@zuilib/text-editor 0.7.1 → 0.7.2

package/dist/index.js

@@ -1543,2152 +1543,2159 @@ function moveGroup(shapes, selected, clickedId) {
   return new Map(shapes.filter((s) => ids.has(s.id)).map((s) => [s.id, s]));
 }
 
-// src/drawing/canvas/PropertyBar.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function Swatch({
-  color,
-  kind,
-  active,
-  onClick
-}) {
-  const name = color === "transparent" ? "none" : color;
-  return /* @__PURE__ */ jsx2(
-    "button",
-    {
-      type: "button",
-      title: `${kind} ${name}`,
-      "aria-label": `${kind} color ${name}`,
-      "aria-pressed": active,
-      className: `zui-drawing-swatch ${color === "transparent" ? "is-transparent" : ""} ${active ? "is-active" : ""}`,
-      style: { backgroundColor: color },
-      onClick
-    }
-  );
+// src/drawing/skeleton.ts
+var COLOR_PRESETS = {
+  /** No outline, light surface; text stays dark */
+  plain: { stroke: "transparent", fill: "#f1f3f5" },
+  /** Solid dark card; text renders light */
+  black: { stroke: "#1e1e1e", fill: "#1e1e1e" },
+  gray: { stroke: "#1e1e1e", fill: "transparent" },
+  red: { stroke: "#e03131", fill: "#ffc9c9" },
+  green: { stroke: "#2f9e44", fill: "#b2f2bb" },
+  blue: { stroke: "#1971c2", fill: "#a5d8ff" },
+  orange: { stroke: "#f08c00", fill: "#ffec99" },
+  purple: { stroke: "#7048e8", fill: "#d0bfff" }
+};
+var COLOR_NAMES = Object.keys(COLOR_PRESETS);
+var TEXT_WRAP_WIDTH = 260;
+var SLOT_GAP = 6;
+var RANK_GAP = 90;
+var STACK_GAP = 40;
+var LAYOUT_ORIGIN = 32;
+var CANVAS_MARGIN = 32;
+var MIN_AUTO_CANVAS_HEIGHT = 120;
+var DEFAULT_STROKE2 = "#1e1e1e";
+var STROKE_WIDTH = 2;
+function isDrawingSkeleton(value) {
+  return isRecord2(value) && Array.isArray(value.boxes);
 }
-function OptionButton({
-  label,
-  active,
-  onClick,
-  children,
-  className
-}) {
-  return /* @__PURE__ */ jsx2(
-    "button",
-    {
-      type: "button",
-      title: label,
-      "aria-label": label,
-      "aria-pressed": active,
-      className: `zui-drawing-tool ${active ? "is-active" : ""} ${className ?? ""}`,
-      onClick,
-      children: /* @__PURE__ */ jsx2(Icon, { children })
-    }
+function parseDrawingSkeleton(json) {
+  try {
+    const parsed = JSON.parse(json);
+    if (!isDrawingSkeleton(parsed)) return EMPTY_DRAWING;
+    return expandSkeleton(normalizeSkeleton(parsed));
+  } catch {
+    return EMPTY_DRAWING;
+  }
+}
+function expandSkeleton(skeleton) {
+  const boxes = dedupeById(skeleton.boxes);
+  const boxTypes = new Map(boxes.map((box) => [box.id, box.type ?? "rect"]));
+  const sizes = new Map(boxes.map((box) => [box.id, measureBox(box, boxTypes.get(box.id))]));
+  const boxIds = new Set(boxTypes.keys());
+  const connectors = (skeleton.connectors ?? []).filter(
+    (c) => boxIds.has(endId(c.from)) && boxIds.has(endId(c.to)) && endId(c.from) !== endId(c.to)
+  );
+  const positions = layoutBoxes(boxes, sizes, connectors, skeleton.direction ?? "right");
+  const boxShapes = boxes.map(
+    (box) => expandBox(box, boxTypes.get(box.id), sizes.get(box.id), positions.get(box.id))
   );
+  const centers = new Map(boxShapes.map((shape) => [shape.id, shapeCenter(shape)]));
+  const used = new Set(boxIds);
+  const nextId = (prefix) => {
+    let i = used.size + 1;
+    while (used.has(`${prefix}${i}`)) i += 1;
+    const id = `${prefix}${i}`;
+    used.add(id);
+    return id;
+  };
+  const connectorShapes = connectors.map((c) => expandConnector(c, centers, nextId("c")));
+  const textShapes = (skeleton.texts ?? []).map((t) => expandText(t, nextId("t")));
+  const shapes = resolveBindings([...boxShapes, ...connectorShapes, ...textShapes]);
+  const bottom = shapes.reduce((max, shape) => {
+    const b = bbox(shape);
+    return Math.max(max, b.y + b.h);
+  }, 0);
+  return normalizeDrawingData({
+    version: 2,
+    ...skeleton.canvasWidth !== void 0 ? { canvasWidth: skeleton.canvasWidth } : {},
+    canvasHeight: skeleton.canvasHeight ?? Math.max(MIN_AUTO_CANVAS_HEIGHT, Math.ceil(bottom + CANVAS_MARGIN)),
+    ...skeleton.width !== void 0 ? { width: skeleton.width } : {},
+    shapes
+  });
 }
-function PropertyBar({
-  selection,
-  showFill,
-  stroke,
-  fill,
-  onStroke,
-  onFill,
-  onRouting,
-  onDirection,
-  onDelete
-}) {
-  const connectors = selection.filter((s) => isConnectorType(s.type));
-  const arrows = selection.filter((s) => s.type === "arrow");
-  const allElbow = connectors.length > 0 && connectors.every((s) => s.routing === "elbow");
-  const allStraight = connectors.length > 0 && connectors.every((s) => s.routing !== "elbow");
-  const allTwoWay = arrows.length > 0 && arrows.every((s) => s.bidirectional);
-  const allOneWay = arrows.length > 0 && arrows.every((s) => !s.bidirectional);
-  const showFillSwatches = showFill || selection.some((s) => isBoxType(s.type));
-  return /* @__PURE__ */ jsxs2("div", { className: "zui-drawing-props", onPointerDown: (e) => e.stopPropagation(), children: [
-    /* @__PURE__ */ jsxs2("div", { className: "zui-drawing-props-group", "aria-label": "Stroke color", children: [
-      /* @__PURE__ */ jsx2("span", { className: "zui-drawing-swatch-label", children: "Stroke" }),
-      STROKE_COLORS.map((color) => /* @__PURE__ */ jsx2(
-        Swatch,
-        {
-          color,
-          kind: "Stroke",
-          active: stroke === color,
-          onClick: () => onStroke(color)
-        },
-        color
-      ))
-    ] }),
-    showFillSwatches && /* @__PURE__ */ jsxs2("div", { className: "zui-drawing-props-group", "aria-label": "Fill color", children: [
-      /* @__PURE__ */ jsx2("span", { className: "zui-drawing-swatch-label", children: "Fill" }),
-      FILL_COLORS.map((color) => /* @__PURE__ */ jsx2(
-        Swatch,
-        {
-          color,
-          kind: "Fill",
-          active: fill === color,
-          onClick: () => onFill(color)
-        },
-        color
-      ))
-    ] }),
-    connectors.length > 0 && /* @__PURE__ */ jsxs2("div", { className: "zui-drawing-props-group", "aria-label": "Connector routing", children: [
-      /* @__PURE__ */ jsx2(OptionButton, { label: "Straight connector", active: allStraight, onClick: () => onRouting(false), children: UI_ICONS.straight }),
-      /* @__PURE__ */ jsx2(OptionButton, { label: "Elbow connector (auto-routed)", active: allElbow, onClick: () => onRouting(true), children: UI_ICONS.elbow })
-    ] }),
-    arrows.length > 0 && /* @__PURE__ */ jsxs2("div", { className: "zui-drawing-props-group", "aria-label": "Arrow direction", children: [
-      /* @__PURE__ */ jsx2(OptionButton, { label: "One-way arrow", active: allOneWay, onClick: () => onDirection(false), children: UI_ICONS.oneWay }),
-      /* @__PURE__ */ jsx2(OptionButton, { label: "Two-way arrow", active: allTwoWay, onClick: () => onDirection(true), children: UI_ICONS.twoWay })
-    ] }),
-    selection.length > 0 && /* @__PURE__ */ jsx2("div", { className: "zui-drawing-props-group", children: /* @__PURE__ */ jsx2(
-      OptionButton,
-      {
-        label: selection.length > 1 ? `Delete ${selection.length} shapes` : "Delete shape",
-        className: "zui-drawing-tool-danger",
-        onClick: onDelete,
-        children: UI_ICONS.trash
-      }
-    ) })
-  ] });
+function measureBox(box, type) {
+  const def = BOX_DEFINITIONS[type];
+  const probe = {
+    id: "",
+    type,
+    x: 0,
+    y: 0,
+    w: def.defaultSize.w,
+    h: def.defaultSize.h,
+    stroke: "",
+    fill: "",
+    strokeWidth: 0
+  };
+  const area = def.textArea(probe);
+  const ratioW = area.w / def.defaultSize.w;
+  const ratioH = area.h / def.defaultSize.h;
+  const wrapWidth = box.w !== void 0 ? Math.max(20, box.w * ratioW) : TEXT_WRAP_WIDTH;
+  const slots = def.textSlots.flatMap((slot) => {
+    const size = slotSize(box, slot, wrapWidth);
+    return size ? [size] : [];
+  });
+  const innerW = slots.reduce((max, s) => Math.max(max, s.w), 0);
+  const innerH = slots.reduce((sum, s) => sum + s.h, 0) + Math.max(0, slots.length - 1) * SLOT_GAP;
+  return {
+    w: box.w ?? Math.max(def.defaultSize.w, Math.ceil(innerW / ratioW)),
+    h: box.h ?? Math.max(def.defaultSize.h, Math.ceil(innerH / ratioH))
+  };
 }
-
-// src/drawing/canvas/SelectionOverlay.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var HANDLE = 7;
-function Handle({
-  x,
-  y,
-  cursor,
-  square,
-  onPointerDown,
-  title
-}) {
-  const props = {
-    className: "zui-drawing-handle",
-    strokeWidth: 1.5,
-    style: { cursor },
-    onPointerDown
+function slotSize(box, slot, wrapWidth) {
+  const value = box[slot];
+  if (!value) return null;
+  const fontSize = slot === "text" ? FONT_SIZE : SMALL_FONT_SIZE;
+  return textBoxSize(wrapText(value, wrapWidth, fontSize).join("\n"), fontSize);
+}
+function layoutBoxes(boxes, sizes, connectors, direction) {
+  const positions = /* @__PURE__ */ new Map();
+  const auto = boxes.filter((box) => box.x === void 0 || box.y === void 0);
+  const autoIds = new Set(auto.map((box) => box.id));
+  const edges = connectors.map((c) => ({ from: endId(c.from), to: endId(c.to) })).filter((e) => e.from !== e.to && autoIds.has(e.from) && autoIds.has(e.to));
+  const ranks = rankNodes(
+    auto.map((box) => box.id),
+    acyclicEdges(
+      auto.map((box) => box.id),
+      edges
+    )
+  );
+  const rows = [];
+  for (const box of auto) {
+    const rank = ranks.get(box.id) ?? 0;
+    (rows[rank] ?? (rows[rank] = [])).push(box.id);
+  }
+  const main = direction === "right" ? "w" : "h";
+  const cross = direction === "right" ? "h" : "w";
+  const rowMain = rows.map((row) => row.reduce((max, id) => Math.max(max, sizes.get(id)[main]), 0));
+  const rowCross = rows.map(
+    (row) => row.reduce((sum, id) => sum + sizes.get(id)[cross], 0) + Math.max(0, row.length - 1) * STACK_GAP
+  );
+  const maxCross = rowCross.reduce((max, c) => Math.max(max, c), 0);
+  let mainOffset = LAYOUT_ORIGIN;
+  rows.forEach((row, rank) => {
+    let crossOffset = LAYOUT_ORIGIN + (maxCross - rowCross[rank]) / 2;
+    for (const id of row) {
+      const size = sizes.get(id);
+      const mainPos = Math.round(mainOffset + (rowMain[rank] - size[main]) / 2);
+      const crossPos = Math.round(crossOffset);
+      positions.set(
+        id,
+        direction === "right" ? { x: mainPos, y: crossPos } : { x: crossPos, y: mainPos }
+      );
+      crossOffset += size[cross] + STACK_GAP;
+    }
+    mainOffset += rowMain[rank] + RANK_GAP;
+  });
+  for (const box of boxes) {
+    const computed = positions.get(box.id) ?? { x: LAYOUT_ORIGIN, y: LAYOUT_ORIGIN };
+    positions.set(box.id, { x: box.x ?? computed.x, y: box.y ?? computed.y });
+  }
+  return positions;
+}
+function acyclicEdges(ids, edges) {
+  const outgoing = /* @__PURE__ */ new Map();
+  for (const edge of edges) (outgoing.get(edge.from) ?? outgoing.set(edge.from, []).get(edge.from)).push(edge);
+  const state = /* @__PURE__ */ new Map();
+  const kept = [];
+  const visit = (id) => {
+    state.set(id, "visiting");
+    for (const edge of outgoing.get(id) ?? []) {
+      const target = state.get(edge.to);
+      if (target === "visiting") continue;
+      kept.push(edge);
+      if (target === void 0) visit(edge.to);
+    }
+    state.set(id, "done");
   };
-  return square ? /* @__PURE__ */ jsx3("rect", { ...props, x: x - HANDLE / 2, y: y - HANDLE / 2, width: HANDLE, height: HANDLE, rx: 2, children: title && /* @__PURE__ */ jsx3("title", { children: title }) }) : /* @__PURE__ */ jsx3("circle", { ...props, cx: x, cy: y, r: HANDLE / 2 + 0.5, children: title && /* @__PURE__ */ jsx3("title", { children: title }) });
+  for (const id of ids) if (!state.has(id)) visit(id);
+  return kept;
 }
-function SelectionOverlay({
-  shape,
-  points,
-  onHandlePointerDown,
-  onWaypointAdd,
-  onWaypointRemove
-}) {
-  if (isConnectorType(shape.type)) {
-    const waypoints = shape.waypoints ?? [];
-    const isZ = shape.routing === "elbow" && !waypoints.length && points.length === 4;
-    const elbowMid = isZ ? { x: (points[1].x + points[2].x) / 2, y: (points[1].y + points[2].y) / 2 } : null;
-    const elbowVertical = isZ && Math.abs(points[1].x - points[2].x) < 0.01;
-    const ghosts = points.slice(0, -1).flatMap((p, i) => {
-      const q = points[i + 1];
-      if (Math.hypot(q.x - p.x, q.y - p.y) < 28) return [];
-      if (isZ && i === 1) return [];
-      return [{ index: i, x: (p.x + q.x) / 2, y: (p.y + q.y) / 2 }];
-    });
-    return /* @__PURE__ */ jsxs3("g", { className: "zui-drawing-selection", children: [
-      ghosts.map(({ index, x, y }) => /* @__PURE__ */ jsx3(
-        "circle",
-        {
-          className: "zui-drawing-handle zui-drawing-ghost",
-          cx: x,
-          cy: y,
-          r: 4.5,
-          strokeWidth: 1.5,
-          strokeDasharray: "2 2",
-          style: { cursor: "copy" },
-          onPointerDown: (e) => onWaypointAdd(e, shape.id, index, { x, y }),
-          children: /* @__PURE__ */ jsx3("title", { children: "Drag to add a bend" })
-        },
-        `ghost-${index}`
-      )),
-      waypoints.map((p, i) => /* @__PURE__ */ jsx3(
-        "g",
-        {
-          onDoubleClick: (e) => {
-            e.stopPropagation();
-            onWaypointRemove(shape.id, i);
-          },
-          children: /* @__PURE__ */ jsx3(
-            Handle,
-            {
-              x: p.x,
-              y: p.y,
-              square: true,
-              cursor: "move",
-              title: "Drag to move, double-click to remove",
-              onPointerDown: (e) => onHandlePointerDown(e, { mode: "waypoint", id: shape.id, index: i })
-            }
-          )
-        },
-        `wp-${i}`
-      )),
-      elbowMid && /* @__PURE__ */ jsx3(
-        Handle,
-        {
-          x: elbowMid.x,
-          y: elbowMid.y,
-          square: true,
-          cursor: elbowVertical ? "ew-resize" : "ns-resize",
-          title: "Slide the middle segment",
-          onPointerDown: (e) => onHandlePointerDown(e, {
-            mode: "elbow",
-            id: shape.id,
-            a: points[0],
-            d: points[3],
-            vertical: elbowVertical
-          })
-        }
-      ),
-      ["start", "end"].map((end) => {
-        const p = end === "start" ? points[0] : points[points.length - 1];
-        return /* @__PURE__ */ jsx3(
-          Handle,
-          {
-            x: p.x,
-            y: p.y,
-            cursor: "crosshair",
-            onPointerDown: (e) => onHandlePointerDown(e, { mode: "endpoint", id: shape.id, end, orig: shape })
-          },
-          end
-        );
-      })
-    ] });
-  }
-  const b = bbox(shape);
-  const pad = 5;
-  const corners = [
-    { corner: "nw", x: b.x - pad, y: b.y - pad },
-    { corner: "ne", x: b.x + b.w + pad, y: b.y - pad },
-    { corner: "sw", x: b.x - pad, y: b.y + b.h + pad },
-    { corner: "se", x: b.x + b.w + pad, y: b.y + b.h + pad }
-  ];
-  const resizable = shape.type !== "text";
-  return /* @__PURE__ */ jsxs3("g", { className: "zui-drawing-selection", children: [
-    /* @__PURE__ */ jsx3(SelectionFrame, { rect: b, pad }),
-    resizable && corners.map(({ corner, x, y }) => /* @__PURE__ */ jsx3(
-      Handle,
-      {
-        x,
-        y,
-        square: true,
-        cursor: corner === "nw" || corner === "se" ? "nwse-resize" : "nesw-resize",
-        onPointerDown: (e) => onHandlePointerDown(e, { mode: "resize", id: shape.id, corner, orig: shape })
-      },
-      corner
-    ))
-  ] });
+function rankNodes(ids, edges) {
+  const incoming = /* @__PURE__ */ new Map();
+  for (const edge of edges) (incoming.get(edge.to) ?? incoming.set(edge.to, []).get(edge.to)).push(edge.from);
+  const ranks = /* @__PURE__ */ new Map();
+  const rankOf = (id) => {
+    const known = ranks.get(id);
+    if (known !== void 0) return known;
+    const rank = (incoming.get(id) ?? []).reduce((max, from) => Math.max(max, rankOf(from) + 1), 0);
+    ranks.set(id, rank);
+    return rank;
+  };
+  for (const id of ids) rankOf(id);
+  return ranks;
 }
-function SelectionFrame({ rect, pad }) {
-  return /* @__PURE__ */ jsx3(
-    "rect",
-    {
-      x: rect.x - pad,
-      y: rect.y - pad,
-      width: rect.w + pad * 2,
-      height: rect.h + pad * 2,
-      rx: 6,
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: 1,
-      strokeDasharray: "5 4",
-      pointerEvents: "none"
-    }
-  );
+function expandBox(box, type, size, position) {
+  const preset = box.color ? COLOR_PRESETS[box.color] : void 0;
+  const fill = box.fill ?? preset?.fill ?? BOX_DEFINITIONS[type].defaultFill ?? "transparent";
+  return {
+    id: box.id,
+    type,
+    x: position.x,
+    y: position.y,
+    w: size.w,
+    h: size.h,
+    stroke: box.stroke ?? preset?.stroke ?? DEFAULT_STROKE2,
+    fill,
+    strokeWidth: STROKE_WIDTH,
+    ...box.text ? { text: box.text } : {},
+    ...box.label ? { label: box.label } : {},
+    ...box.footer ? { footer: box.footer } : {}
+  };
 }
-function GroupSelectionOverlay({
-  shapes,
-  paths
-}) {
-  if (!shapes.length) return null;
-  const rects = shapes.map((s) => {
-    if (!isConnectorType(s.type)) return bbox(s);
-    const pts = paths.get(s.id) ?? [];
-    const xs = pts.map((p) => p.x);
-    const ys = pts.map((p) => p.y);
-    const x = Math.min(...xs);
-    const y = Math.min(...ys);
-    return { x, y, w: Math.max(...xs) - x, h: Math.max(...ys) - y };
-  });
-  return /* @__PURE__ */ jsxs3("g", { className: "zui-drawing-selection", pointerEvents: "none", children: [
-    rects.map((r, i) => /* @__PURE__ */ jsx3(
-      "rect",
-      {
-        x: r.x - 3,
-        y: r.y - 3,
-        width: r.w + 6,
-        height: r.h + 6,
-        rx: 4,
-        fill: "none",
-        stroke: "currentColor",
-        strokeWidth: 1,
-        opacity: 0.45
-      },
-      shapes[i].id
-    )),
-    /* @__PURE__ */ jsx3(SelectionFrame, { rect: unionRects(rects), pad: 8 })
-  ] });
+function expandConnector(connector, centers, fallbackId) {
+  const type = connector.type ?? "arrow";
+  const from = centers.get(endId(connector.from));
+  const to = centers.get(endId(connector.to));
+  return {
+    id: connector.id ?? fallbackId,
+    type,
+    x: from.x,
+    y: from.y,
+    w: to.x - from.x,
+    h: to.y - from.y,
+    stroke: connector.stroke ?? (connector.color ? COLOR_PRESETS[connector.color].stroke : DEFAULT_STROKE2),
+    fill: "transparent",
+    strokeWidth: STROKE_WIDTH,
+    startBinding: toBinding(connector.from),
+    endBinding: toBinding(connector.to),
+    ...connector.text ? { text: connector.text } : {},
+    ...type === "arrow" && connector.bidirectional ? { bidirectional: true } : {},
+    ...connector.routing === "elbow" ? { routing: "elbow" } : {}
+  };
 }
-function MarqueeOverlay({ rect }) {
-  return /* @__PURE__ */ jsx3(
-    "rect",
-    {
-      className: "zui-drawing-selection",
-      x: rect.x,
-      y: rect.y,
-      width: rect.w,
-      height: rect.h,
-      rx: 3,
-      fill: "currentColor",
-      fillOpacity: 0.08,
-      stroke: "currentColor",
-      strokeWidth: 1,
-      pointerEvents: "none"
-    }
-  );
+function expandText(text, fallbackId) {
+  const size = textBoxSize(text.text);
+  return {
+    id: text.id ?? fallbackId,
+    type: "text",
+    x: text.x,
+    y: text.y,
+    w: size.w,
+    h: size.h,
+    stroke: text.stroke ?? (text.color ? COLOR_PRESETS[text.color].stroke : DEFAULT_STROKE2),
+    fill: "transparent",
+    strokeWidth: STROKE_WIDTH,
+    text: text.text
+  };
 }
-
-// src/drawing/shapes/render.tsx
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-var n = (v) => Number.isInteger(v) ? String(v) : v.toFixed(2);
-function BoxGeometry({
-  shape,
-  stroke
-}) {
+function endId(end) {
+  return typeof end === "string" ? end : end.id;
+}
+function toBinding(end) {
+  if (typeof end === "string" || !end.side) return { id: endId(end) };
+  return { id: end.id, fixedPoint: SIDE_FIXED_POINTS[end.side] };
+}
+function shapeCenter(shape) {
   const b = bbox(shape);
-  const fill = shape.fill;
-  switch (shape.type) {
-    case "rect":
-      return /* @__PURE__ */ jsx4(
-        "rect",
-        {
-          ...stroke,
-          x: b.x,
-          y: b.y,
-          width: b.w,
-          height: b.h,
-          rx: Math.min(8, b.w / 4, b.h / 4),
-          fill
-        }
-      );
-    case "ellipse":
-      return /* @__PURE__ */ jsx4(
-        "ellipse",
-        {
-          ...stroke,
-          cx: b.x + b.w / 2,
-          cy: b.y + b.h / 2,
-          rx: b.w / 2,
-          ry: b.h / 2,
-          fill
-        }
-      );
-    case "diamond":
-      return /* @__PURE__ */ jsx4(
-        "polygon",
-        {
-          ...stroke,
-          points: `${n(b.x + b.w / 2)},${n(b.y)} ${n(b.x + b.w)},${n(b.y + b.h / 2)} ${n(b.x + b.w / 2)},${n(b.y + b.h)} ${n(b.x)},${n(b.y + b.h / 2)}`,
-          fill
-        }
-      );
-    case "note": {
-      const f = NOTE_FOLD(b);
-      const r = b.x + b.w;
-      const btm = b.y + b.h;
-      return /* @__PURE__ */ jsxs4("g", { children: [
-        /* @__PURE__ */ jsx4(
-          "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`,
-            fill
-          }
-        ),
-        /* @__PURE__ */ jsx4(
-          "path",
-          {
-            ...stroke,
-            d: `M ${n(r - f)} ${n(btm)} V ${n(btm - f)} H ${n(r)}`,
-            fill: "rgba(0,0,0,0.08)"
-          }
-        )
-      ] });
-    }
-    case "cylinder": {
-      const ry = CYLINDER_RY(b);
-      const rx = b.w / 2;
-      const cx = b.x + rx;
-      return /* @__PURE__ */ jsxs4("g", { children: [
-        /* @__PURE__ */ jsx4(
-          "path",
-          {
-            ...stroke,
-            d: `M ${n(b.x)} ${n(b.y + ry)} V ${n(b.y + b.h - ry)} A ${n(rx)} ${n(ry)} 0 0 0 ${n(b.x + b.w)} ${n(b.y + b.h - ry)} V ${n(b.y + ry)}`,
-            fill
-          }
-        ),
-        /* @__PURE__ */ jsx4("ellipse", { ...stroke, cx, cy: b.y + ry, rx, ry, fill })
-      ] });
-    }
-    case "cloud": {
-      const p = (u, v) => `${n(b.x + u * b.w)} ${n(b.y + v * b.h)}`;
-      return /* @__PURE__ */ jsx4(
-        "path",
-        {
-          ...stroke,
-          d: `M ${p(0.22, 0.86)} C ${p(0.04, 0.88)} ${p(0, 0.58)} ${p(0.16, 0.5)} C ${p(0.08, 0.26)} ${p(0.3, 0.12)} ${p(0.42, 0.28)} C ${p(0.5, 0.02)} ${p(0.76, 0.04)} ${p(0.78, 0.3)} C ${p(0.98, 0.26)} ${p(1.04, 0.56)} ${p(0.88, 0.64)} C ${p(1, 0.8)} ${p(0.9, 0.9)} ${p(0.76, 0.86)} Z`,
-          fill
-        }
-      );
-    }
-    case "queue": {
-      const rx = QUEUE_RX(b);
-      const ry = b.h / 2;
-      return /* @__PURE__ */ jsxs4("g", { children: [
-        /* @__PURE__ */ jsx4(
-          "path",
-          {
-            ...stroke,
-            d: `M ${n(b.x + rx)} ${n(b.y)} H ${n(b.x + b.w - rx)} V ${n(b.y + b.h)} H ${n(b.x + rx)} A ${n(rx)} ${n(ry)} 0 0 1 ${n(b.x + rx)} ${n(b.y)} Z`,
-            fill
-          }
-        ),
-        /* @__PURE__ */ jsx4(
-          "ellipse",
-          {
-            ...stroke,
-            cx: b.x + b.w - rx,
-            cy: b.y + ry,
-            rx,
-            ry,
-            fill
-          }
-        )
-      ] });
-    }
-    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__ */ jsxs4("g", { children: [
-        /* @__PURE__ */ jsx4("circle", { ...stroke, cx, cy: b.y + r, r, fill }),
-        /* @__PURE__ */ jsx4(
-          "path",
-          {
-            ...stroke,
-            fill: "none",
-            d: `M ${n(cx)} ${n(neck)} V ${n(hip)} M ${n(cx - reach)} ${n(armY)} H ${n(cx + reach)} M ${n(cx)} ${n(hip)} L ${n(cx - reach)} ${n(b.y + figH)} M ${n(cx)} ${n(hip)} L ${n(cx + reach)} ${n(b.y + figH)}`
-          }
-        )
-      ] });
-    }
-    default:
-      return null;
-  }
+  return { x: b.x + b.w / 2, y: b.y + b.h / 2 };
 }
-
-// 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);
+function dedupeById(items) {
+  const seen = /* @__PURE__ */ new Set();
+  return items.filter((item) => seen.has(item.id) ? false : (seen.add(item.id), true));
+}
+function normalizeSkeleton(raw) {
+  const value = raw;
+  const boxes = value.boxes.flatMap((b) => {
+    const box = normalizeBox(b);
+    return box ? [box] : [];
+  });
+  const connectors = Array.isArray(value.connectors) ? value.connectors.flatMap((c) => {
+    const connector = normalizeConnector(c);
+    return connector ? [connector] : [];
+  }) : [];
+  const texts = Array.isArray(value.texts) ? value.texts.flatMap((t) => {
+    const text = normalizeText(t);
+    return text ? [text] : [];
+  }) : [];
+  const canvasWidth = finiteNumber(value.canvasWidth);
+  const canvasHeight = finiteNumber(value.canvasHeight);
   return {
-    area: def ? def.textArea(shape) : bbox(shape),
-    slots: def ? def.textSlots : ["label", "text", "footer"]
+    direction: value.direction === "down" ? "down" : "right",
+    ...canvasWidth !== void 0 ? { canvasWidth } : {},
+    ...canvasHeight !== void 0 ? { canvasHeight } : {},
+    ...isBlockWidth(value.width) ? { width: value.width } : {},
+    boxes,
+    connectors,
+    texts
   };
 }
-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 normalizeBox(value) {
+  if (!isRecord2(value) || !nonEmptyString(value.id)) return null;
+  if (value.type !== void 0 && !(typeof value.type === "string" && isBoxType(value.type))) {
+    return null;
+  }
+  return compact({
+    id: value.id,
+    type: value.type,
+    label: nonEmptyString(value.label) ? value.label : void 0,
+    text: nonEmptyString(value.text) ? value.text : void 0,
+    footer: nonEmptyString(value.footer) ? value.footer : void 0,
+    x: finiteNumber(value.x),
+    y: finiteNumber(value.y),
+    w: positiveNumber(value.w),
+    h: positiveNumber(value.h),
+    color: colorName(value.color),
+    stroke: nonEmptyString(value.stroke) ? value.stroke : void 0,
+    fill: nonEmptyString(value.fill) ? value.fill : void 0
+  });
 }
-var textStyle = { userSelect: "none" };
-var hintStyle = { userSelect: "none", pointerEvents: "none" };
-function BoxTexts({
-  shape,
-  hideField,
-  showHints
-}) {
-  const { area, slots } = slotLayout(shape);
-  const cx = area.x + area.w / 2;
-  const wrapW = Math.max(area.w, 20);
-  const hints = showHints && area.h >= 56 && area.w >= 44;
-  const mainLines = wrapText(shape.text ?? "", wrapW, FONT_SIZE);
-  const labelLines = wrapText(shape.label ?? "", wrapW, SMALL_FONT_SIZE);
-  const footerLines = wrapText(shape.footer ?? "", wrapW, SMALL_FONT_SIZE);
-  const mainLineH = FONT_SIZE * LINE_HEIGHT;
-  const smallLineH = SMALL_FONT_SIZE * LINE_HEIGHT;
-  const mainStart = area.y + area.h / 2 - (mainLines.length - 1) * mainLineH / 2 + FONT_SIZE * 0.35;
-  const common = {
-    fill: shape.stroke,
-    textAnchor: "middle"
-  };
-  return /* @__PURE__ */ jsxs5("g", { children: [
-    slots.includes("label") && hideField !== "label" && (shape.label ? labelLines.map((line, i) => /* @__PURE__ */ createElement(
-      "text",
-      {
-        ...common,
-        key: i,
-        x: cx,
-        y: area.y + SMALL_FONT_SIZE + i * smallLineH,
-        fontSize: SMALL_FONT_SIZE,
-        fontWeight: 600,
-        letterSpacing: 0.3,
-        opacity: 0.85,
-        style: textStyle
-      },
-      line
-    )) : hints && /* @__PURE__ */ jsx5(
-      "text",
-      {
-        ...common,
-        x: cx,
-        y: area.y + SMALL_FONT_SIZE,
-        fontSize: SMALL_FONT_SIZE,
-        opacity: 0.3,
-        style: hintStyle,
-        children: "Label"
-      }
-    )),
-    slots.includes("text") && hideField !== "text" && (shape.text ? mainLines.map((line, i) => /* @__PURE__ */ createElement(
-      "text",
-      {
-        ...common,
-        key: i,
-        x: cx,
-        y: mainStart + i * mainLineH,
-        fontSize: FONT_SIZE,
-        style: textStyle
-      },
-      line
-    )) : hints && /* @__PURE__ */ jsx5(
-      "text",
-      {
-        ...common,
-        x: cx,
-        y: mainStart,
-        fontSize: FONT_SIZE,
-        opacity: 0.3,
-        style: hintStyle,
-        children: "Text"
-      }
-    )),
-    slots.includes("footer") && hideField !== "footer" && (shape.footer ? footerLines.map((line, i) => /* @__PURE__ */ createElement(
-      "text",
-      {
-        ...common,
-        key: i,
-        x: cx,
-        y: area.y + area.h - 3 - (footerLines.length - 1 - i) * smallLineH,
-        fontSize: SMALL_FONT_SIZE,
-        opacity: 0.65,
-        style: textStyle
-      },
-      line
-    )) : hints && /* @__PURE__ */ jsx5(
-      "text",
-      {
-        ...common,
-        x: cx,
-        y: area.y + area.h - 3,
-        fontSize: SMALL_FONT_SIZE,
-        opacity: 0.3,
-        style: hintStyle,
-        children: "Footer"
-      }
-    ))
-  ] });
+function normalizeConnector(value) {
+  if (!isRecord2(value)) return null;
+  const from = normalizeEnd(value.from);
+  const to = normalizeEnd(value.to);
+  if (!from || !to) return null;
+  if (value.type !== void 0 && !(typeof value.type === "string" && isConnectorType(value.type))) {
+    return null;
+  }
+  return compact({
+    id: nonEmptyString(value.id) ? value.id : void 0,
+    type: value.type,
+    from,
+    to,
+    text: nonEmptyString(value.text) ? value.text : void 0,
+    bidirectional: value.bidirectional === true ? true : void 0,
+    routing: value.routing === "elbow" ? "elbow" : void 0,
+    color: colorName(value.color),
+    stroke: nonEmptyString(value.stroke) ? value.stroke : void 0
+  });
 }
-function ConnectorLabel({
-  shape,
-  points
-}) {
-  const text = shape.text ?? "";
-  const lines = wrapText(text, CONNECTOR_LABEL_MAX_WIDTH, CONNECTOR_FONT_SIZE);
-  const size = textBoxSize(lines.join("\n"), CONNECTOR_FONT_SIZE);
-  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(
-      "rect",
-      {
-        x: midX - size.w / 2 - 5,
-        y: midY - size.h / 2 - 3,
-        width: size.w + 10,
-        height: size.h + 6,
-        rx: 5,
-        className: "zui-drawing-label-plate",
-        opacity: 0.94
-      }
-    ),
-    lines.map((line, i) => /* @__PURE__ */ jsx5(
-      "text",
-      {
-        x: midX,
-        y: startY + i * lineH,
-        fill: shape.stroke,
-        fontSize: CONNECTOR_FONT_SIZE,
-        textAnchor: "middle",
-        style: textStyle,
-        children: line
-      },
-      i
-    ))
-  ] });
+function normalizeEnd(value) {
+  if (nonEmptyString(value)) return value;
+  if (!isRecord2(value) || !nonEmptyString(value.id)) return null;
+  const side = value.side;
+  return typeof side === "string" && side in SIDE_FIXED_POINTS ? { id: value.id, side } : { id: value.id };
 }
-function ShapeView({
-  shape,
-  points,
-  hideField,
-  showHints
-}) {
-  const stroke = {
-    stroke: shape.stroke,
-    strokeWidth: shape.strokeWidth,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  };
-  if (isBoxType(shape.type)) {
-    return /* @__PURE__ */ jsxs5("g", { children: [
-      /* @__PURE__ */ jsx5(BoxGeometry, { shape, stroke }),
-      /* @__PURE__ */ jsx5(BoxTexts, { shape, hideField, showHints })
-    ] });
-  }
-  if (isConnectorType(shape.type)) {
-    const pts = points ?? [
-      { 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__ */ jsx5(
-    "text",
-    {
-      x: shape.x,
-      y: shape.y + FONT_SIZE,
-      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))
-    }
-  );
+function normalizeText(value) {
+  if (!isRecord2(value) || !nonEmptyString(value.text)) return null;
+  const x = finiteNumber(value.x);
+  const y = finiteNumber(value.y);
+  if (x === void 0 || y === void 0) return null;
+  return compact({
+    id: nonEmptyString(value.id) ? value.id : void 0,
+    x,
+    y,
+    text: value.text,
+    color: colorName(value.color),
+    stroke: nonEmptyString(value.stroke) ? value.stroke : void 0
+  });
 }
-function HitArea({
-  shape,
-  points
-}) {
-  if (isConnectorType(shape.type) && points) {
-    return /* @__PURE__ */ jsx5("path", { d: polylinePath(points), fill: "none", stroke: "transparent", strokeWidth: 16 });
-  }
-  const b = bbox(shape);
-  return /* @__PURE__ */ jsx5(
-    "rect",
-    {
-      x: b.x - 2,
-      y: b.y - 2,
-      width: Math.max(b.w, 8) + 4,
-      height: Math.max(b.h, 8) + 4,
-      fill: "transparent",
-      stroke: "none"
-    }
-  );
+function isRecord2(value) {
+  return typeof value === "object" && value !== null;
 }
-
-// src/drawing/canvas/TextEditOverlay.tsx
-import {
-  useEffect as useEffect5,
-  useRef as useRef2,
-  useState
-} from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
-function TextEditOverlay({
-  shape,
-  field,
-  points,
-  onCommit
-}) {
-  const original = shape[field] ?? "";
-  const [value, setValue] = useState(original);
-  const ref = useRef2(null);
-  const valueRef = useRef2(value);
-  valueRef.current = value;
-  useEffect5(() => {
-    const el = ref.current;
-    if (!el) return;
-    el.focus();
-    el.select();
-    const onKeyDown = (e) => {
-      e.stopPropagation();
-      if ((e.key === "Home" || e.key === "End") && !e.shiftKey && !e.metaKey && !e.ctrlKey) {
-        e.preventDefault();
-        const text = el.value;
-        const caret = e.key === "Home" ? el.selectionStart : el.selectionEnd;
-        const pos = e.key === "Home" ? text.lastIndexOf("\n", caret - 1) + 1 : (text.indexOf("\n", caret) + 1 || text.length + 1) - 1;
-        el.setSelectionRange(pos, pos);
-        return;
-      }
-      if (e.key === "Enter" && !e.shiftKey) {
-        e.preventDefault();
-        onCommit(shape.id, field, valueRef.current);
-      } else if (e.key === "Escape") {
-        e.preventDefault();
-        onCommit(shape.id, field, original);
+function nonEmptyString(value) {
+  return typeof value === "string" && value !== "";
+}
+function finiteNumber(value) {
+  return typeof value === "number" && Number.isFinite(value) ? value : void 0;
+}
+function positiveNumber(value) {
+  const n2 = finiteNumber(value);
+  return n2 !== void 0 && n2 > 0 ? n2 : void 0;
+}
+function colorName(value) {
+  return typeof value === "string" && COLOR_NAMES.includes(value) ? value : void 0;
+}
+function compact(value) {
+  return Object.fromEntries(Object.entries(value).filter(([, v]) => v !== void 0));
+}
+var COLOR_SCHEMA = {
+  enum: COLOR_NAMES,
+  description: "Named color preset: outline plus, for boxes, a matching fill. `plain` has no outline and a light fill, `black` is a dark card with light text, `gray` is a dark outline on transparent (the default); the rest pair a colored outline with its pastel fill."
+};
+var END_SCHEMA = {
+  oneOf: [
+    {
+      type: "string",
+      description: "Id of a box. The connector attaches to its outline, aimed at the other end"
+    },
+    {
+      type: "object",
+      required: ["id"],
+      additionalProperties: false,
+      properties: {
+        id: { type: "string", description: "Id of a box" },
+        side: {
+          enum: ["top", "right", "bottom", "left"],
+          description: "Pin the endpoint to the middle of this side of the box instead of auto-aiming"
+        }
       }
-    };
-    const stop = (e) => e.stopPropagation();
-    el.addEventListener("keydown", onKeyDown);
-    el.addEventListener("keyup", stop);
-    el.addEventListener("keypress", stop);
-    return () => {
-      el.removeEventListener("keydown", onKeyDown);
-      el.removeEventListener("keyup", stop);
-      el.removeEventListener("keypress", stop);
-    };
-  }, []);
-  const style = {
-    color: shape.stroke,
-    fontFamily: "var(--zui-drawing-font)",
-    lineHeight: LINE_HEIGHT
-  };
-  if (shape.type === "text") {
-    const size = textBoxSize(value || " ");
-    Object.assign(style, {
-      left: shape.x,
-      top: shape.y,
-      fontSize: FONT_SIZE,
-      width: Math.max(80, size.w + 20),
-      height: size.h + 2,
-      // `pre` would keep the lines, but Chrome ignores Home/End in a
-      // `white-space: pre` textarea; the width tracks the content anyway
-      whiteSpace: "pre-wrap"
-    });
-  } else if (isConnectorType(shape.type)) {
-    const lines = wrapText(value, CONNECTOR_LABEL_MAX_WIDTH, CONNECTOR_FONT_SIZE);
-    const size = textBoxSize(lines.join("\n") || " ", CONNECTOR_FONT_SIZE);
-    const width = Math.max(70, size.w + 16);
-    const height = size.h + 4;
-    const mid = connectorMidpoint(
-      points ?? [
-        { x: shape.x, y: shape.y },
-        { x: shape.x + shape.w, y: shape.y + shape.h }
-      ]
-    );
-    Object.assign(style, {
-      left: mid.x - width / 2,
-      top: mid.y - height / 2,
-      width,
-      height,
-      fontSize: CONNECTOR_FONT_SIZE,
-      textAlign: "center",
-      whiteSpace: "pre-wrap"
-    });
-  } else {
-    const { area } = slotLayout(shape);
-    const fontSize = field === "text" ? FONT_SIZE : SMALL_FONT_SIZE;
-    const width = Math.max(area.w, 40);
-    const lines = wrapText(value, width, fontSize).length;
-    const boxH = lines * fontSize * LINE_HEIGHT + 2;
-    const top = field === "label" ? area.y - 1 : field === "footer" ? area.y + area.h - boxH + 1 : area.y + area.h / 2 - boxH / 2;
-    Object.assign(style, {
-      left: area.x,
-      top,
-      width,
-      height: boxH,
-      fontSize,
-      fontWeight: field === "label" ? 600 : void 0,
-      letterSpacing: field === "label" ? 0.3 : void 0,
-      opacity: field === "text" ? 1 : field === "label" ? 0.85 : 0.65,
-      textAlign: "center",
-      whiteSpace: "pre-wrap"
-    });
+    }
+  ],
+  description: "Box a connector end attaches to: a bare box id, or {id, side} to pick the attach edge"
+};
+var DRAWING_SKELETON_JSON_SCHEMA = {
+  $schema: "http://json-schema.org/draft-07/schema#",
+  title: "DrawingSkeleton",
+  description: "Compact intent description of a diagram. Boxes are sized from their text and laid out automatically along the connector flow; connectors are drawn between box outlines. Only say what is on the canvas \u2014 geometry is derived",
+  type: "object",
+  required: ["boxes"],
+  additionalProperties: false,
+  properties: {
+    direction: {
+      enum: ["right", "down"],
+      description: 'Auto-layout flow direction. Boxes connected a\u2192b are placed in successive ranks along this axis ("right" = columns left to right, "down" = rows top to bottom). Default "right"'
+    },
+    canvasWidth: {
+      type: "number",
+      minimum: 120,
+      description: "Logical canvas width in px. Omit for a fluid canvas in CSS pixels"
+    },
+    canvasHeight: {
+      type: "number",
+      minimum: 80,
+      description: "Canvas height in px. Omit to fit the content"
+    },
+    width: {
+      enum: ["full", "text", "content"],
+      description: 'Block width: "text" aligns the drawing with the text column (same as "full" unless the app sets a text measure); "content" fits the drawing to its shapes and left-aligns it with the text; omit to span the editor'
+    },
+    boxes: {
+      type: "array",
+      items: { $ref: "#/definitions/box" },
+      description: "Card-like shapes carrying up to three text slots. Order is the render order and the stacking order within a layout rank"
+    },
+    connectors: {
+      type: "array",
+      items: { $ref: "#/definitions/connector" },
+      description: "Arrows and lines between boxes. Connectors whose from/to id does not match a box are dropped"
+    },
+    texts: {
+      type: "array",
+      items: { $ref: "#/definitions/text" },
+      description: "Free-floating annotations not attached to any box. Prefer box slots (label/text/footer) when the text belongs to a box"
+    }
+  },
+  definitions: {
+    box: {
+      type: "object",
+      required: ["id"],
+      additionalProperties: false,
+      properties: {
+        id: { type: "string", description: "Unique within the drawing; connectors reference it" },
+        type: {
+          enum: BOX_TYPES,
+          description: 'Shape: rect (default), ellipse, diamond (decision), note (sticky note, yellow by default), cylinder (database), cloud (external system), queue (message queue), actor (stick figure; only the "text" slot renders, below the figure)'
+        },
+        label: { type: "string", description: "Small bold heading at the top of the box" },
+        text: {
+          type: "string",
+          description: 'Main content, centered. Wraps automatically; "\\n" forces a line break'
+        },
+        footer: { type: "string", description: "Small dim line at the bottom of the box" },
+        x: { type: "number", description: "Top-left x in px. Omit (with y) to let the layout place the box" },
+        y: { type: "number", description: "Top-left y in px. Omit (with x) to let the layout place the box" },
+        w: {
+          type: "number",
+          exclusiveMinimum: 0,
+          description: "Width in px. Omit to size from the text (never smaller than the type default)"
+        },
+        h: {
+          type: "number",
+          exclusiveMinimum: 0,
+          description: "Height in px. Omit to size from the text (never smaller than the type default)"
+        },
+        color: COLOR_SCHEMA,
+        stroke: { type: "string", description: "CSS color of the outline and text; overrides the preset" },
+        fill: {
+          type: "string",
+          description: 'CSS color of the interior ("transparent" for none); overrides the preset'
+        }
+      }
+    },
+    connector: {
+      type: "object",
+      required: ["from", "to"],
+      additionalProperties: false,
+      properties: {
+        id: { type: "string", description: "Optional; generated when omitted" },
+        type: {
+          enum: CONNECTOR_TYPES,
+          description: 'arrow (default; arrowhead at "to") or line (no arrowheads)'
+        },
+        from: END_SCHEMA,
+        to: END_SCHEMA,
+        text: { type: "string", description: "Label rendered at the middle of the connector" },
+        bidirectional: {
+          type: "boolean",
+          description: "Arrow only: arrowheads on both ends"
+        },
+        routing: {
+          enum: ["straight", "elbow"],
+          description: "straight (default) draws a direct line; elbow draws a right-angled path routed around the boxes"
+        },
+        color: COLOR_SCHEMA,
+        stroke: { type: "string", description: "CSS color of the line and label; overrides the preset" }
+      }
+    },
+    text: {
+      type: "object",
+      required: ["x", "y", "text"],
+      additionalProperties: false,
+      properties: {
+        id: { type: "string", description: "Optional; generated when omitted" },
+        x: { type: "number", description: "Top-left x of the first line, in px" },
+        y: { type: "number", description: "Top-left y of the first line, in px" },
+        text: { type: "string", description: 'Content; "\\n" forces a line break' },
+        color: COLOR_SCHEMA,
+        stroke: { type: "string", description: "CSS color of the text; overrides the preset" }
+      }
+    }
   }
-  const placeholder = field === "label" ? "Label" : field === "footer" ? "Footer" : "Text";
-  return /* @__PURE__ */ jsx6(
-    "textarea",
+};
+
+// src/drawing/canvas/PropertyBar.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var COLOR_NAMES2 = Object.keys(COLOR_PRESETS);
+function Swatch({
+  name,
+  active,
+  onClick
+}) {
+  const preset = COLOR_PRESETS[name];
+  return /* @__PURE__ */ jsx2(
+    "button",
     {
-      ref,
-      className: "zui-drawing-text-input",
-      style,
-      value,
-      placeholder,
-      spellCheck: false,
-      onChange: (e) => setValue(e.target.value),
-      onBlur: () => onCommit(shape.id, field, value),
-      onPointerDown: (e) => e.stopPropagation()
+      type: "button",
+      title: `Color: ${name}`,
+      "aria-label": `Color ${name}`,
+      "aria-pressed": active,
+      className: `zui-drawing-swatch ${active ? "is-active" : ""}`,
+      style: { backgroundColor: preset.fill, borderColor: preset.stroke },
+      onClick
     }
   );
 }
-
-// src/drawing/canvas/Toolbar.tsx
-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";
-var BLOCK_WIDTH_OPTIONS = [
-  {
-    width: "full",
-    label: "Full width",
-    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" })
-    ] })
-  },
-  {
-    width: "text",
-    label: "Text width",
-    icon: /* @__PURE__ */ jsxs6(Fragment, { children: [
-      /* @__PURE__ */ jsx7("path", { d: "M3 4v12M17 4v12" }),
-      /* @__PURE__ */ jsx7("path", { d: "M6.5 7h7M6.5 10h7M6.5 13h4.5" })
-    ] })
-  },
-  {
-    width: "content",
-    label: "Content width",
-    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" })
-    ] })
-  }
-];
-
-// src/drawing/canvas/Toolbar.tsx
-import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
-var PRIMARY_TOOLS = [
-  { tool: "select", label: "Select" },
-  { tool: "rect", label: "Rectangle" },
-  { tool: "ellipse", label: "Ellipse" },
-  { tool: "diamond", label: "Diamond" },
-  { tool: "arrow", label: "Arrow" },
-  { tool: "line", label: "Line" },
-  { tool: "text", label: "Text" }
-];
-var MORE_SHAPES = ["note", "cylinder", "cloud", "queue", "actor"];
-function ToolButton({
+function OptionButton({
   label,
   active,
   onClick,
   children,
-  className,
-  pressed
+  className
 }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx2(
     "button",
     {
       type: "button",
       title: label,
       "aria-label": label,
-      "aria-pressed": pressed ?? active,
+      "aria-pressed": active,
       className: `zui-drawing-tool ${active ? "is-active" : ""} ${className ?? ""}`,
       onClick,
-      children: /* @__PURE__ */ jsx8(Icon, { children })
+      children: /* @__PURE__ */ jsx2(Icon, { children })
     }
   );
 }
-function DrawingToolbar({
-  tool,
-  onToolChange,
-  width,
-  onWidthChange,
-  onCopyMermaid
-}) {
-  const [moreOpen, setMoreOpen] = useState2(false);
-  const [lastMore, setLastMore] = useState2("note");
-  const [copied, setCopied] = useState2(false);
-  const moreRef = useRef3(null);
-  useEffect6(() => {
-    if (!moreOpen) return;
-    const close = (e) => {
-      if (!moreRef.current?.contains(e.target)) setMoreOpen(false);
-    };
-    const key = (e) => {
-      if (e.key === "Escape") setMoreOpen(false);
-    };
-    document.addEventListener("pointerdown", close);
-    document.addEventListener("keydown", key);
-    return () => {
-      document.removeEventListener("pointerdown", close);
-      document.removeEventListener("keydown", key);
-    };
-  }, [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(
-          "button",
-          {
-            type: "button",
-            title: "More shapes",
-            "aria-label": "More shapes",
-            "aria-haspopup": "menu",
-            "aria-expanded": moreOpen,
-            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" })
-            ]
-          }
-        ),
-        moreOpen && /* @__PURE__ */ jsx8("div", { className: "zui-drawing-popover", role: "menu", children: MORE_SHAPES.map((type) => /* @__PURE__ */ jsxs7(
-          "button",
-          {
-            type: "button",
-            role: "menuitemradio",
-            "aria-checked": tool === type,
-            className: `zui-drawing-popover-item ${tool === type ? "is-active" : ""}`,
-            onClick: () => {
-              setLastMore(type);
-              onToolChange(type);
-              setMoreOpen(false);
-            },
-            children: [
-              /* @__PURE__ */ jsx8(Icon, { size: 18, children: SHAPE_ICONS[type] }),
-              /* @__PURE__ */ jsx8("span", { children: BOX_DEFINITIONS[type].label })
-            ]
-          },
-          type
-        )) })
-      ] })
+function PropertyBar({
+  selection,
+  stroke,
+  fill,
+  onColor,
+  onRouting,
+  onDirection,
+  onDelete
+}) {
+  const connectors = selection.filter((s) => isConnectorType(s.type));
+  const arrows = selection.filter((s) => s.type === "arrow");
+  const allElbow = connectors.length > 0 && connectors.every((s) => s.routing === "elbow");
+  const allStraight = connectors.length > 0 && connectors.every((s) => s.routing !== "elbow");
+  const allTwoWay = arrows.length > 0 && arrows.every((s) => s.bidirectional);
+  const allOneWay = arrows.length > 0 && arrows.every((s) => !s.bidirectional);
+  return /* @__PURE__ */ jsxs2("div", { className: "zui-drawing-props", onPointerDown: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsx2("div", { className: "zui-drawing-props-group", role: "radiogroup", "aria-label": "Color", children: COLOR_NAMES2.map((name) => /* @__PURE__ */ jsx2(
+      Swatch,
+      {
+        name,
+        active: COLOR_PRESETS[name].stroke === stroke && COLOR_PRESETS[name].fill === fill,
+        onClick: () => onColor(name)
+      },
+      name
+    )) }),
+    connectors.length > 0 && /* @__PURE__ */ jsxs2("div", { className: "zui-drawing-props-group", "aria-label": "Connector routing", children: [
+      /* @__PURE__ */ jsx2(OptionButton, { label: "Straight connector", active: allStraight, onClick: () => onRouting(false), children: UI_ICONS.straight }),
+      /* @__PURE__ */ jsx2(OptionButton, { label: "Elbow connector (auto-routed)", active: allElbow, onClick: () => onRouting(true), children: UI_ICONS.elbow })
     ] }),
-    /* @__PURE__ */ jsxs7("div", { className: "zui-drawing-toolbar-group zui-drawing-toolbar-group-end", children: [
-      /* @__PURE__ */ jsx8(
-        ToolButton,
+    arrows.length > 0 && /* @__PURE__ */ jsxs2("div", { className: "zui-drawing-props-group", "aria-label": "Arrow direction", children: [
+      /* @__PURE__ */ jsx2(OptionButton, { label: "One-way arrow", active: allOneWay, onClick: () => onDirection(false), children: UI_ICONS.oneWay }),
+      /* @__PURE__ */ jsx2(OptionButton, { label: "Two-way arrow", active: allTwoWay, onClick: () => onDirection(true), children: UI_ICONS.twoWay })
+    ] }),
+    selection.length > 0 && /* @__PURE__ */ jsx2("div", { className: "zui-drawing-props-group", children: /* @__PURE__ */ jsx2(
+      OptionButton,
+      {
+        label: selection.length > 1 ? `Delete ${selection.length} shapes` : "Delete shape",
+        className: "zui-drawing-tool-danger",
+        onClick: onDelete,
+        children: UI_ICONS.trash
+      }
+    ) })
+  ] });
+}
+
+// src/drawing/canvas/SelectionOverlay.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var HANDLE = 7;
+function Handle({
+  x,
+  y,
+  cursor,
+  square,
+  onPointerDown,
+  title
+}) {
+  const props = {
+    className: "zui-drawing-handle",
+    strokeWidth: 1.5,
+    style: { cursor },
+    onPointerDown
+  };
+  return square ? /* @__PURE__ */ jsx3("rect", { ...props, x: x - HANDLE / 2, y: y - HANDLE / 2, width: HANDLE, height: HANDLE, rx: 2, children: title && /* @__PURE__ */ jsx3("title", { children: title }) }) : /* @__PURE__ */ jsx3("circle", { ...props, cx: x, cy: y, r: HANDLE / 2 + 0.5, children: title && /* @__PURE__ */ jsx3("title", { children: title }) });
+}
+function SelectionOverlay({
+  shape,
+  points,
+  onHandlePointerDown,
+  onWaypointAdd,
+  onWaypointRemove
+}) {
+  if (isConnectorType(shape.type)) {
+    const waypoints = shape.waypoints ?? [];
+    const isZ = shape.routing === "elbow" && !waypoints.length && points.length === 4;
+    const elbowMid = isZ ? { x: (points[1].x + points[2].x) / 2, y: (points[1].y + points[2].y) / 2 } : null;
+    const elbowVertical = isZ && Math.abs(points[1].x - points[2].x) < 0.01;
+    const ghosts = points.slice(0, -1).flatMap((p, i) => {
+      const q = points[i + 1];
+      if (Math.hypot(q.x - p.x, q.y - p.y) < 28) return [];
+      if (isZ && i === 1) return [];
+      return [{ index: i, x: (p.x + q.x) / 2, y: (p.y + q.y) / 2 }];
+    });
+    return /* @__PURE__ */ jsxs3("g", { className: "zui-drawing-selection", children: [
+      ghosts.map(({ index, x, y }) => /* @__PURE__ */ jsx3(
+        "circle",
         {
-          label: copied ? "Copied Mermaid to clipboard" : "Copy as Mermaid",
-          className: copied ? "is-success" : "",
-          onClick: () => {
-            void onCopyMermaid().then((ok) => {
-              if (!ok) return;
-              setCopied(true);
-              setTimeout(() => setCopied(false), 1600);
-            });
+          className: "zui-drawing-handle zui-drawing-ghost",
+          cx: x,
+          cy: y,
+          r: 4.5,
+          strokeWidth: 1.5,
+          strokeDasharray: "2 2",
+          style: { cursor: "copy" },
+          onPointerDown: (e) => onWaypointAdd(e, shape.id, index, { x, y }),
+          children: /* @__PURE__ */ jsx3("title", { children: "Drag to add a bend" })
+        },
+        `ghost-${index}`
+      )),
+      waypoints.map((p, i) => /* @__PURE__ */ jsx3(
+        "g",
+        {
+          onDoubleClick: (e) => {
+            e.stopPropagation();
+            onWaypointRemove(shape.id, i);
           },
-          children: copied ? UI_ICONS.check : UI_ICONS.mermaid
+          children: /* @__PURE__ */ jsx3(
+            Handle,
+            {
+              x: p.x,
+              y: p.y,
+              square: true,
+              cursor: "move",
+              title: "Drag to move, double-click to remove",
+              onPointerDown: (e) => onHandlePointerDown(e, { mode: "waypoint", id: shape.id, index: i })
+            }
+          )
+        },
+        `wp-${i}`
+      )),
+      elbowMid && /* @__PURE__ */ jsx3(
+        Handle,
+        {
+          x: elbowMid.x,
+          y: elbowMid.y,
+          square: true,
+          cursor: elbowVertical ? "ew-resize" : "ns-resize",
+          title: "Slide the middle segment",
+          onPointerDown: (e) => onHandlePointerDown(e, {
+            mode: "elbow",
+            id: shape.id,
+            a: points[0],
+            d: points[3],
+            vertical: elbowVertical
+          })
         }
       ),
-      /* @__PURE__ */ jsx8("span", { className: "zui-drawing-toolbar-divider" }),
-      BLOCK_WIDTH_OPTIONS.map(({ width: option, label, icon }) => /* @__PURE__ */ jsx8(
-        ToolButton,
-        {
-          label,
-          active: width === option,
-          onClick: () => onWidthChange(option),
-          children: icon
-        },
-        option
-      ))
-    ] })
+      ["start", "end"].map((end) => {
+        const p = end === "start" ? points[0] : points[points.length - 1];
+        return /* @__PURE__ */ jsx3(
+          Handle,
+          {
+            x: p.x,
+            y: p.y,
+            cursor: "crosshair",
+            onPointerDown: (e) => onHandlePointerDown(e, { mode: "endpoint", id: shape.id, end, orig: shape })
+          },
+          end
+        );
+      })
+    ] });
+  }
+  const b = bbox(shape);
+  const pad = 5;
+  const corners = [
+    { corner: "nw", x: b.x - pad, y: b.y - pad },
+    { corner: "ne", x: b.x + b.w + pad, y: b.y - pad },
+    { corner: "sw", x: b.x - pad, y: b.y + b.h + pad },
+    { corner: "se", x: b.x + b.w + pad, y: b.y + b.h + pad }
+  ];
+  const resizable = shape.type !== "text";
+  return /* @__PURE__ */ jsxs3("g", { className: "zui-drawing-selection", children: [
+    /* @__PURE__ */ jsx3(SelectionFrame, { rect: b, pad }),
+    resizable && corners.map(({ corner, x, y }) => /* @__PURE__ */ jsx3(
+      Handle,
+      {
+        x,
+        y,
+        square: true,
+        cursor: corner === "nw" || corner === "se" ? "nwse-resize" : "nesw-resize",
+        onPointerDown: (e) => onHandlePointerDown(e, { mode: "resize", id: shape.id, corner, orig: shape })
+      },
+      corner
+    ))
   ] });
 }
-
-// src/drawing/canvas/DrawingCanvas.tsx
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
-var MIN_HEIGHT = 120;
-var MAX_HEIGHT = 1200;
-var WIDTH_CLASS = {
-  full: "",
-  text: "is-text-width",
-  content: "is-content-width"
-};
-var MIN_CONTENT_WIDTH = 240;
-var CONTENT_WIDTH_PADDING = 40;
-var EMPTY_SET = /* @__PURE__ */ new Set();
-function contentWidth(shapes, paths) {
-  let right = 0;
-  for (const shape of shapes) {
-    if (isConnectorType(shape.type)) {
-      for (const p of paths.get(shape.id) ?? []) right = Math.max(right, p.x);
-    } else {
-      const b = bbox(shape);
-      right = Math.max(right, b.x + b.w);
+function SelectionFrame({ rect, pad }) {
+  return /* @__PURE__ */ jsx3(
+    "rect",
+    {
+      x: rect.x - pad,
+      y: rect.y - pad,
+      width: rect.w + pad * 2,
+      height: rect.h + pad * 2,
+      rx: 6,
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1,
+      strokeDasharray: "5 4",
+      pointerEvents: "none"
     }
-  }
-  return Math.max(MIN_CONTENT_WIDTH, Math.ceil(right + CONTENT_WIDTH_PADDING));
+  );
 }
-function computePaths(shapes) {
-  const paths = /* @__PURE__ */ new Map();
-  for (const shape of shapes) {
-    if (isConnectorType(shape.type)) paths.set(shape.id, connectorPoints(shape, shapes));
-  }
-  return paths;
+function GroupSelectionOverlay({
+  shapes,
+  paths
+}) {
+  if (!shapes.length) return null;
+  const rects = shapes.map((s) => {
+    if (!isConnectorType(s.type)) return bbox(s);
+    const pts = paths.get(s.id) ?? [];
+    const xs = pts.map((p) => p.x);
+    const ys = pts.map((p) => p.y);
+    const x = Math.min(...xs);
+    const y = Math.min(...ys);
+    return { x, y, w: Math.max(...xs) - x, h: Math.max(...ys) - y };
+  });
+  return /* @__PURE__ */ jsxs3("g", { className: "zui-drawing-selection", pointerEvents: "none", children: [
+    rects.map((r, i) => /* @__PURE__ */ jsx3(
+      "rect",
+      {
+        x: r.x - 3,
+        y: r.y - 3,
+        width: r.w + 6,
+        height: r.h + 6,
+        rx: 4,
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 1,
+        opacity: 0.45
+      },
+      shapes[i].id
+    )),
+    /* @__PURE__ */ jsx3(SelectionFrame, { rect: unionRects(rects), pad: 8 })
+  ] });
 }
-function DrawingCanvas({ nodeKey, data }) {
-  const [editor] = useLexicalComposerContext5();
-  const isEditable = useLexicalEditable();
-  const [shapes, setShapes] = useState3(data.shapes);
-  const [canvasHeight, setCanvasHeight] = useState3(data.canvasHeight);
-  const [width, setWidth] = useState3(data.width ?? "full");
-  const [tool, setTool] = useState3("select");
-  const [selectedIds, setSelectedIds] = useState3(EMPTY_SET);
-  const [editingText, setEditingText] = useState3(null);
-  const [stroke, setStroke] = useState3(STROKE_COLORS[0]);
-  const [fill, setFill] = useState3(FILL_COLORS[0]);
-  const [hoverBoxId, setHoverBoxId] = useState3(null);
-  const [marquee, setMarquee] = useState3(null);
-  const [scale, setScale] = useState3(1);
-  const rootRef = useRef4(null);
-  const svgRef = useRef4(null);
-  const dragRef = useRef4(null);
-  const pendingTextEditRef = useRef4(null);
-  const pendingPointRef = useRef4(null);
-  const frameRef = useRef4(null);
-  const lastCommittedRef = useRef4(serializeDrawingData(data));
-  const shapesRef = useRef4(shapes);
-  shapesRef.current = shapes;
-  const heightRef = useRef4(canvasHeight);
-  heightRef.current = canvasHeight;
-  const widthRef = useRef4(width);
-  widthRef.current = width;
-  const selectedRef = useRef4(selectedIds);
-  selectedRef.current = selectedIds;
-  const paths = useMemo(() => computePaths(shapes), [shapes]);
-  const canvasWidth = data.canvasWidth;
-  const logicalWidth = canvasWidth ?? (width === "content" ? contentWidth(shapes, paths) : null);
-  useEffect7(() => {
-    const incoming = serializeDrawingData(data);
-    if (incoming !== lastCommittedRef.current) {
-      lastCommittedRef.current = incoming;
-      setShapes(data.shapes);
-      setCanvasHeight(data.canvasHeight);
-      setWidth(data.width ?? "full");
-      setSelectedIds(EMPTY_SET);
-      setEditingText(null);
-    }
-  }, [data]);
-  useEffect7(() => {
-    const svg = svgRef.current;
-    if (!logicalWidth || !svg || typeof ResizeObserver === "undefined") {
-      setScale(1);
-      return;
-    }
-    const update = () => {
-      const rect = svg.getBoundingClientRect();
-      setScale(rect.width > 0 ? rect.width / logicalWidth : 1);
-    };
-    update();
-    const observer = new ResizeObserver(update);
-    observer.observe(svg);
-    return () => observer.disconnect();
-  }, [logicalWidth]);
-  const commit = useCallback(
-    (nextShapes, options) => {
-      const nextWidth = options?.width ?? widthRef.current;
-      const explicitFull = options?.width === void 0 && data.width !== void 0;
-      const payload = {
-        version: 2,
-        ...canvasWidth ? { canvasWidth } : {},
-        canvasHeight: options?.height ?? heightRef.current,
-        ...nextWidth !== "full" || explicitFull ? { width: nextWidth } : {},
-        shapes: nextShapes
-      };
-      const json = serializeDrawingData(payload);
-      if (json === lastCommittedRef.current) return;
-      lastCommittedRef.current = json;
-      editor.update(() => {
-        const node = $getNodeByKey2(nodeKey);
-        if ($isDrawingNode(node)) node.setData(payload);
-      });
-    },
-    [editor, nodeKey, canvasWidth, data.width]
-  );
-  const updateShapes = useCallback(
-    (updater, options) => {
-      setShapes((prev) => {
-        const next = resolveBindings(updater(prev));
-        if (options?.commit) commit(next);
-        return next;
-      });
-    },
-    [commit]
-  );
-  const getPoint = useCallback((e) => {
-    const svg = svgRef.current;
-    if (!svg) return { x: 0, y: 0 };
-    const ctm = svg.getScreenCTM();
-    if (!ctm) {
-      const rect = svg.getBoundingClientRect();
-      return { x: e.clientX - rect.left, y: e.clientY - rect.top };
+function MarqueeOverlay({ rect }) {
+  return /* @__PURE__ */ jsx3(
+    "rect",
+    {
+      className: "zui-drawing-selection",
+      x: rect.x,
+      y: rect.y,
+      width: rect.w,
+      height: rect.h,
+      rx: 3,
+      fill: "currentColor",
+      fillOpacity: 0.08,
+      stroke: "currentColor",
+      strokeWidth: 1,
+      pointerEvents: "none"
     }
-    const inverse = ctm.inverse();
-    return {
-      x: inverse.a * e.clientX + inverse.c * e.clientY + inverse.e,
-      y: inverse.b * e.clientX + inverse.d * e.clientY + inverse.f
-    };
-  }, []);
-  const selection = useMemo(
-    () => shapes.filter((s) => selectedIds.has(s.id)),
-    [shapes, selectedIds]
   );
-  const single = selection.length === 1 ? selection[0] : null;
-  const startTextEditing = useCallback((id, field) => {
-    setEditingText({ id, field });
-    setSelectedIds(/* @__PURE__ */ new Set([id]));
-  }, []);
-  const capture = (e) => {
-    svgRef.current?.setPointerCapture(e.pointerId);
-  };
-  const handleBackgroundPointerDown = useCallback(
-    (e) => {
-      if (!isEditable || editingText || e.button !== 0) return;
-      const point = getPoint(e);
-      capture(e);
-      if (tool === "select") {
-        if (!e.shiftKey) setSelectedIds(EMPTY_SET);
-        dragRef.current = { mode: "marquee", origin: point, current: point, additive: e.shiftKey };
-        return;
-      }
-      if (tool === "text") {
-        const id2 = createShapeId();
-        const size = textBoxSize("");
-        updateShapes((prev) => [
-          ...prev,
+}
+
+// src/drawing/shapes/render.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var n = (v) => Number.isInteger(v) ? String(v) : v.toFixed(2);
+function BoxGeometry({
+  shape,
+  stroke
+}) {
+  const b = bbox(shape);
+  const fill = shape.fill;
+  switch (shape.type) {
+    case "rect":
+      return /* @__PURE__ */ jsx4(
+        "rect",
+        {
+          ...stroke,
+          x: b.x,
+          y: b.y,
+          width: b.w,
+          height: b.h,
+          rx: Math.min(8, b.w / 4, b.h / 4),
+          fill
+        }
+      );
+    case "ellipse":
+      return /* @__PURE__ */ jsx4(
+        "ellipse",
+        {
+          ...stroke,
+          cx: b.x + b.w / 2,
+          cy: b.y + b.h / 2,
+          rx: b.w / 2,
+          ry: b.h / 2,
+          fill
+        }
+      );
+    case "diamond":
+      return /* @__PURE__ */ jsx4(
+        "polygon",
+        {
+          ...stroke,
+          points: `${n(b.x + b.w / 2)},${n(b.y)} ${n(b.x + b.w)},${n(b.y + b.h / 2)} ${n(b.x + b.w / 2)},${n(b.y + b.h)} ${n(b.x)},${n(b.y + b.h / 2)}`,
+          fill
+        }
+      );
+    case "note": {
+      const f = NOTE_FOLD(b);
+      const r = b.x + b.w;
+      const btm = b.y + b.h;
+      return /* @__PURE__ */ jsxs4("g", { children: [
+        /* @__PURE__ */ jsx4(
+          "path",
           {
-            id: id2,
-            type: "text",
-            x: point.x,
-            y: point.y - FONT_SIZE / 2,
-            w: size.w,
-            h: size.h,
-            stroke,
-            fill: "transparent",
-            strokeWidth: 2,
-            text: ""
+            ...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`,
+            fill
           }
-        ]);
-        setTool("select");
-        setSelectedIds(/* @__PURE__ */ new Set([id2]));
-        pendingTextEditRef.current = id2;
-        return;
-      }
-      const id = createShapeId();
-      const def = isBoxType(tool) ? BOX_DEFINITIONS[tool] : null;
-      const shapeFill = def ? fill === "transparent" && def.defaultFill ? def.defaultFill : fill : "transparent";
-      dragRef.current = { mode: "draw", id, origin: point };
-      setSelectedIds(EMPTY_SET);
-      updateShapes((prev) => [
-        ...prev,
-        { id, type: tool, x: point.x, y: point.y, w: 0, h: 0, stroke, fill: shapeFill, strokeWidth: 2 }
-      ]);
-    },
-    [isEditable, editingText, getPoint, tool, stroke, fill, updateShapes, startTextEditing]
-  );
-  const handleShapePointerDown = useCallback(
-    (e, shape) => {
-      if (!isEditable || tool !== "select" || editingText || e.button !== 0) return;
-      e.stopPropagation();
-      const point = getPoint(e);
-      capture(e);
-      const selected = selectedRef.current;
-      if (e.shiftKey) {
-        if (selected.has(shape.id)) {
-          const next2 = new Set(selected);
-          next2.delete(shape.id);
-          setSelectedIds(next2);
-          return;
-        }
-        const next = new Set(selected).add(shape.id);
-        setSelectedIds(next);
-        dragRef.current = {
-          mode: "move",
-          clickedId: shape.id,
-          origin: point,
-          origs: moveGroup(shapesRef.current, next, shape.id),
-          wasSelected: false
-        };
-        return;
-      }
-      const wasSelected = selected.size === 1 && selected.has(shape.id);
-      const group = selected.has(shape.id) ? selected : /* @__PURE__ */ new Set([shape.id]);
-      if (!selected.has(shape.id)) setSelectedIds(group);
-      dragRef.current = {
-        mode: "move",
-        clickedId: shape.id,
-        origin: point,
-        origs: moveGroup(shapesRef.current, group, shape.id),
-        wasSelected
-      };
-    },
-    [isEditable, tool, editingText, getPoint]
-  );
-  const handleHandlePointerDown = useCallback(
-    (e, drag) => {
-      if (!isEditable || e.button !== 0) return;
-      e.stopPropagation();
-      capture(e);
-      dragRef.current = drag;
-      if (drag.mode === "endpoint") {
-        const key = drag.end === "start" ? "startBinding" : "endBinding";
-        updateShapes(
-          (prev) => prev.map((s) => s.id === drag.id ? { ...s, [key]: void 0 } : s)
-        );
-      }
-    },
-    [isEditable, updateShapes]
-  );
-  const flushPointer = useCallback(() => {
-    frameRef.current = null;
-    const point = pendingPointRef.current;
-    const drag = dragRef.current;
-    if (!point || !drag) return;
-    if (drag.mode === "marquee") {
-      drag.current = point;
-      setMarquee({ origin: drag.origin, current: point });
-      return;
-    }
-    updateShapes((prev) => applyDrag(prev, drag, point));
-    if (drag.mode === "endpoint" || drag.mode === "draw" && isConnectorType(shapesRef.current.find((s) => s.id === drag.id)?.type ?? "")) {
-      const box = findBoxAt(shapesRef.current, point, drag.id);
-      setHoverBoxId((prev) => prev === (box?.id ?? null) ? prev : box?.id ?? null);
+        ),
+        /* @__PURE__ */ jsx4(
+          "path",
+          {
+            ...stroke,
+            d: `M ${n(r - f)} ${n(btm)} V ${n(btm - f)} H ${n(r)}`,
+            fill: "rgba(0,0,0,0.08)"
+          }
+        )
+      ] });
     }
-  }, [updateShapes]);
-  const handlePointerMove = useCallback(
-    (e) => {
-      if (!dragRef.current) return;
-      pendingPointRef.current = getPoint(e);
-      if (frameRef.current === null) {
-        frameRef.current = requestAnimationFrame(flushPointer);
-      }
-    },
-    [getPoint, flushPointer]
-  );
-  const handlePointerUp = useCallback(
-    (e) => {
-      const drag = dragRef.current;
-      dragRef.current = null;
-      if (frameRef.current !== null) {
-        cancelAnimationFrame(frameRef.current);
-        frameRef.current = null;
-      }
-      pendingPointRef.current = null;
-      setHoverBoxId(null);
-      if (pendingTextEditRef.current) {
-        const id = pendingTextEditRef.current;
-        pendingTextEditRef.current = null;
-        startTextEditing(id, "text");
-        return;
-      }
-      if (!drag) return;
-      const point = getPoint(e);
-      if (drag.mode === "marquee") {
-        setMarquee(null);
-        const rect = marqueeRect(drag.origin, point);
-        if (rect.w < CLICK_TOLERANCE && rect.h < CLICK_TOLERANCE) return;
-        const ids = shapesWithin(shapesRef.current, rect, paths);
-        setSelectedIds((prev) => drag.additive ? /* @__PURE__ */ new Set([...prev, ...ids]) : new Set(ids));
-        return;
-      }
-      if (drag.mode === "move" && drag.wasSelected) {
-        const moved = Math.abs(point.x - drag.origin.x) > CLICK_TOLERANCE || Math.abs(point.y - drag.origin.y) > CLICK_TOLERANCE;
-        const current = shapesRef.current.find((s) => s.id === drag.clickedId);
-        if (!moved && current) {
-          updateShapes((prev) => applyDrag(prev, drag, drag.origin));
-          if (current.type === "text" || isConnectorType(current.type)) {
-            startTextEditing(current.id, "text");
-          } else {
-            startTextEditing(current.id, slotAt(current, drag.origin.y));
+    case "cylinder": {
+      const ry = CYLINDER_RY(b);
+      const rx = b.w / 2;
+      const cx = b.x + rx;
+      return /* @__PURE__ */ jsxs4("g", { children: [
+        /* @__PURE__ */ jsx4(
+          "path",
+          {
+            ...stroke,
+            d: `M ${n(b.x)} ${n(b.y + ry)} V ${n(b.y + b.h - ry)} A ${n(rx)} ${n(ry)} 0 0 0 ${n(b.x + b.w)} ${n(b.y + b.h - ry)} V ${n(b.y + ry)}`,
+            fill
           }
-          return;
+        ),
+        /* @__PURE__ */ jsx4("ellipse", { ...stroke, cx, cy: b.y + ry, rx, ry, fill })
+      ] });
+    }
+    case "cloud": {
+      const p = (u, v) => `${n(b.x + u * b.w)} ${n(b.y + v * b.h)}`;
+      return /* @__PURE__ */ jsx4(
+        "path",
+        {
+          ...stroke,
+          d: `M ${p(0.22, 0.86)} C ${p(0.04, 0.88)} ${p(0, 0.58)} ${p(0.16, 0.5)} C ${p(0.08, 0.26)} ${p(0.3, 0.12)} ${p(0.42, 0.28)} C ${p(0.5, 0.02)} ${p(0.76, 0.04)} ${p(0.78, 0.3)} C ${p(0.98, 0.26)} ${p(1.04, 0.56)} ${p(0.88, 0.64)} C ${p(1, 0.8)} ${p(0.9, 0.9)} ${p(0.76, 0.86)} Z`,
+          fill
         }
-      }
-      if (drag.mode === "draw") {
-        const drawn = shapesRef.current.find((s) => s.id === drag.id);
-        if (drawn && Math.abs(drawn.w) < 4 && Math.abs(drawn.h) < 4) {
-          if (drawn && isBoxType(drawn.type)) {
-            const size = BOX_DEFINITIONS[drawn.type].defaultSize;
-            updateShapes(
-              (prev) => prev.map(
-                (s) => s.id === drag.id ? { ...s, x: s.x - size.w / 2, y: s.y - size.h / 2, w: size.w, h: size.h } : s
-              ),
-              { commit: true }
-            );
-            setTool("select");
-            setSelectedIds(/* @__PURE__ */ new Set([drag.id]));
-          } else {
-            updateShapes((prev) => prev.filter((s) => s.id !== drag.id));
+      );
+    }
+    case "queue": {
+      const rx = QUEUE_RX(b);
+      const ry = b.h / 2;
+      return /* @__PURE__ */ jsxs4("g", { children: [
+        /* @__PURE__ */ jsx4(
+          "path",
+          {
+            ...stroke,
+            d: `M ${n(b.x + rx)} ${n(b.y)} H ${n(b.x + b.w - rx)} V ${n(b.y + b.h)} H ${n(b.x + rx)} A ${n(rx)} ${n(ry)} 0 0 1 ${n(b.x + rx)} ${n(b.y)} Z`,
+            fill
           }
-          return;
-        }
-        if (drawn && isConnectorType(drawn.type)) {
-          updateShapes((prev) => prev.map((s) => s.id === drag.id ? bindEndpoints(s, prev) : s));
-        }
-        setTool("select");
-        setSelectedIds(/* @__PURE__ */ new Set([drag.id]));
-      }
-      if (drag.mode === "endpoint") {
-        updateShapes(
-          (prev) => prev.map((s) => {
-            if (s.id !== drag.id) return s;
-            const end = drag.end === "start" ? { x: s.x, y: s.y } : { x: s.x + s.w, y: s.y + s.h };
-            const box = findBoxAt(prev, end, s.id);
-            const other = drag.end === "start" ? s.endBinding : s.startBinding;
-            if (box && box.id === other?.id) return s;
-            const key = drag.end === "start" ? "startBinding" : "endBinding";
-            return { ...s, [key]: box ? makeBinding(box, end) : void 0 };
-          })
-        );
-      }
-      updateShapes((prev) => prev.map(normalize), { commit: true });
-    },
-    [getPoint, paths, updateShapes, startTextEditing]
-  );
-  const deleteSelection = useCallback(() => {
-    const ids = selectedRef.current;
-    if (!ids.size) return;
-    setEditingText(null);
-    setSelectedIds(EMPTY_SET);
-    updateShapes(
-      (prev) => prev.filter(
-        (s) => !ids.has(s.id) && !(s.startBinding && ids.has(s.startBinding.id)) && !(s.endBinding && ids.has(s.endBinding.id))
-      ),
-      { commit: true }
-    );
-  }, [updateShapes]);
-  const editingRef = useRef4(editingText);
-  editingRef.current = editingText;
-  useEffect7(() => {
-    const root = rootRef.current;
-    if (!root || !isEditable) return;
-    const onKeyDown = (e) => {
-      if (editingRef.current) return;
-      const ids = selectedRef.current;
-      if ((e.key === "Delete" || e.key === "Backspace") && ids.size) {
-        e.preventDefault();
-        e.stopPropagation();
-        deleteSelection();
-      } else if (e.key === "Enter" && ids.size === 1) {
-        const [id] = ids;
-        const shape = shapesRef.current.find((s) => s.id === id);
-        if (shape) {
-          e.preventDefault();
-          e.stopPropagation();
-          startTextEditing(shape.id, "text");
-        }
-      } else if (e.key === "a" && (e.metaKey || e.ctrlKey)) {
-        e.preventDefault();
-        e.stopPropagation();
-        setSelectedIds(new Set(shapesRef.current.map((s) => s.id)));
-      } else if (e.key === "Escape") {
-        e.stopPropagation();
-        setSelectedIds(EMPTY_SET);
-        setTool("select");
-      }
-    };
-    root.addEventListener("keydown", onKeyDown);
-    return () => root.removeEventListener("keydown", onKeyDown);
-  }, [isEditable, deleteSelection, startTextEditing]);
-  const applyToSelection = useCallback(
-    (patch) => {
-      const ids = selectedRef.current;
-      if (!ids.size) return;
-      updateShapes((prev) => prev.map((s) => ids.has(s.id) ? patch(s) : s), { commit: true });
-    },
-    [updateShapes]
-  );
-  const applyStroke = useCallback(
-    (color) => {
-      setStroke(color);
-      applyToSelection((s) => ({ ...s, stroke: color }));
-    },
-    [applyToSelection]
-  );
-  const applyFill = useCallback(
-    (color) => {
-      setFill(color);
-      applyToSelection((s) => isBoxType(s.type) ? { ...s, fill: color } : s);
-    },
-    [applyToSelection]
-  );
-  const applyRouting = useCallback(
-    (elbow) => applyToSelection(
-      (s) => isConnectorType(s.type) ? { ...s, routing: elbow ? "elbow" : void 0, elbow: void 0, waypoints: void 0 } : s
-    ),
-    [applyToSelection]
-  );
-  const applyDirection = useCallback(
-    (bidirectional) => applyToSelection(
-      (s) => s.type === "arrow" ? { ...s, bidirectional: bidirectional || void 0 } : s
-    ),
-    [applyToSelection]
-  );
-  const applyWidth = useCallback(
-    (next) => {
-      setWidth(next);
-      commit(shapesRef.current, { width: next });
-    },
-    [commit]
-  );
-  const addWaypoint = useCallback(
-    (e, shapeId, segmentIndex, point) => {
-      if (!isEditable || e.button !== 0) return;
-      e.stopPropagation();
-      capture(e);
-      updateShapes(
-        (prev) => prev.map((s) => {
-          if (s.id !== shapeId || !isConnectorType(s.type)) return s;
-          const interior = connectorPoints(s, prev).slice(1, -1);
-          const waypoints = [...interior.slice(0, segmentIndex), point, ...interior.slice(segmentIndex)];
-          return { ...s, waypoints, routing: void 0, elbow: void 0 };
-        })
-      );
-      dragRef.current = { mode: "waypoint", id: shapeId, index: segmentIndex };
-    },
-    [isEditable, updateShapes]
-  );
-  const removeWaypoint = useCallback(
-    (shapeId, index) => {
-      updateShapes(
-        (prev) => prev.map((s) => {
-          if (s.id !== shapeId || !s.waypoints) return s;
-          const waypoints = s.waypoints.filter((_, i) => i !== index);
-          return { ...s, waypoints: waypoints.length ? waypoints : void 0 };
-        }),
-        { commit: true }
-      );
-    },
-    [updateShapes]
-  );
-  const commitText = useCallback(
-    (id, field, value) => {
-      setEditingText(null);
-      rootRef.current?.focus({ preventScroll: true });
-      updateShapes(
-        (prev) => prev.flatMap((s) => {
-          if (s.id !== id) return [s];
-          if (s.type === "text") {
-            return value.trim() === "" ? [] : [{ ...s, text: value, ...textBoxSize(value) }];
+        ),
+        /* @__PURE__ */ jsx4(
+          "ellipse",
+          {
+            ...stroke,
+            cx: b.x + b.w - rx,
+            cy: b.y + ry,
+            rx,
+            ry,
+            fill
           }
-          return [{ ...s, [field]: value.trim() === "" ? void 0 : value }];
-        }),
-        { commit: true }
-      );
-    },
-    [updateShapes]
-  );
-  const copyMermaid = useCallback(async () => {
-    const payload = { version: 2, canvasHeight: heightRef.current, shapes: shapesRef.current };
-    try {
-      await navigator.clipboard.writeText(drawingToMermaid(payload));
-      return true;
-    } catch {
-      return false;
+        )
+      ] });
     }
-  }, []);
-  const editingShape = shapes.find((s) => s.id === editingText?.id) ?? null;
-  const hoverBox = hoverBoxId ? shapes.find((s) => s.id === hoverBoxId) : null;
-  const propStroke = single?.stroke ?? selection[0]?.stroke ?? stroke;
-  const propFill = single?.fill ?? selection.find((s) => isBoxType(s.type))?.fill ?? fill;
-  const canvasCursor = tool === "select" ? "default" : tool === "text" ? "text" : "crosshair";
-  return /* @__PURE__ */ jsxs8(
-    "div",
-    {
-      ref: rootRef,
-      className: `zui-drawing-canvas ${WIDTH_CLASS[width]} ${isEditable ? "is-editable" : ""}`,
-      tabIndex: isEditable ? 0 : void 0,
-      onFocus: () => editor.dispatchCommand(DRAWING_FOCUS_COMMAND, nodeKey),
-      onBlur: (e) => {
-        if (rootRef.current?.contains(e.relatedTarget)) return;
-        editor.dispatchCommand(DRAWING_FOCUS_COMMAND, null);
+    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__ */ jsxs4("g", { children: [
+        /* @__PURE__ */ jsx4("circle", { ...stroke, cx, cy: b.y + r, r, fill }),
+        /* @__PURE__ */ jsx4(
+          "path",
+          {
+            ...stroke,
+            fill: "none",
+            d: `M ${n(cx)} ${n(neck)} V ${n(hip)} M ${n(cx - reach)} ${n(armY)} H ${n(cx + reach)} M ${n(cx)} ${n(hip)} L ${n(cx - reach)} ${n(b.y + figH)} M ${n(cx)} ${n(hip)} L ${n(cx + reach)} ${n(b.y + figH)}`
+          }
+        )
+      ] });
+    }
+    default:
+      return null;
+  }
+}
+
+// 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"]
+  };
+}
+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, (c) => c + c) : 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
+}) {
+  const { area, slots } = slotLayout(shape);
+  const cx = area.x + area.w / 2;
+  const wrapW = Math.max(area.w, 20);
+  const hints = showHints && area.h >= 56 && area.w >= 44;
+  const mainLines = wrapText(shape.text ?? "", wrapW, FONT_SIZE);
+  const labelLines = wrapText(shape.label ?? "", wrapW, SMALL_FONT_SIZE);
+  const footerLines = wrapText(shape.footer ?? "", wrapW, SMALL_FONT_SIZE);
+  const mainLineH = FONT_SIZE * LINE_HEIGHT;
+  const smallLineH = SMALL_FONT_SIZE * LINE_HEIGHT;
+  const mainStart = area.y + area.h / 2 - (mainLines.length - 1) * mainLineH / 2 + FONT_SIZE * 0.35;
+  const common = {
+    fill: textColorFor(shape),
+    textAnchor: "middle"
+  };
+  return /* @__PURE__ */ jsxs5("g", { children: [
+    slots.includes("label") && hideField !== "label" && (shape.label ? labelLines.map((line, i) => /* @__PURE__ */ createElement(
+      "text",
+      {
+        ...common,
+        key: i,
+        x: cx,
+        y: area.y + SMALL_FONT_SIZE + i * smallLineH,
+        fontSize: SMALL_FONT_SIZE,
+        fontWeight: 600,
+        letterSpacing: 0.3,
+        opacity: 0.85,
+        style: textStyle
       },
-      children: [
-        isEditable && /* @__PURE__ */ jsxs8("div", { className: "zui-drawing-toolbar", onPointerDown: (e) => e.stopPropagation(), children: [
-          /* @__PURE__ */ jsx9(
-            DrawingToolbar,
-            {
-              tool,
-              onToolChange: (t) => {
-                setTool(t);
-                if (t !== "select") setSelectedIds(EMPTY_SET);
-              },
-              width,
-              onWidthChange: applyWidth,
-              onCopyMermaid: copyMermaid
-            }
-          ),
-          /* @__PURE__ */ jsx9("div", { className: "zui-drawing-props-host", children: /* @__PURE__ */ jsx9(
-            PropertyBar,
-            {
-              selection,
-              showFill: tool !== "select" && isBoxType(tool),
-              stroke: propStroke,
-              fill: propFill,
-              onStroke: applyStroke,
-              onFill: applyFill,
-              onRouting: applyRouting,
-              onDirection: applyDirection,
-              onDelete: deleteSelection
-            }
-          ) })
-        ] }),
-        /* @__PURE__ */ jsxs8("div", { className: "zui-drawing-stage", children: [
-          /* @__PURE__ */ jsxs8(
-            "svg",
-            {
-              ref: svgRef,
-              className: "zui-drawing-surface",
-              style: {
-                height: logicalWidth ? void 0 : canvasHeight,
-                width: logicalWidth ?? void 0,
-                maxWidth: "100%",
-                aspectRatio: logicalWidth ? `${logicalWidth} / ${canvasHeight}` : void 0,
-                cursor: canvasCursor
-              },
-              viewBox: logicalWidth ? `0 0 ${logicalWidth} ${canvasHeight}` : void 0,
-              preserveAspectRatio: "xMinYMin meet",
-              onPointerDown: handleBackgroundPointerDown,
-              onPointerMove: handlePointerMove,
-              onPointerUp: handlePointerUp,
-              onPointerCancel: handlePointerUp,
-              onDoubleClick: (e) => {
-                if (!isEditable) return;
-                const target = e.target.closest("[data-shape-id]");
-                const id = target?.getAttribute("data-shape-id");
-                const shape = id ? shapes.find((s) => s.id === id) : null;
-                if (!shape) return;
-                if (shape.type === "text" || isConnectorType(shape.type)) {
-                  startTextEditing(shape.id, "text");
-                } else {
-                  startTextEditing(shape.id, slotAt(shape, getPoint(e).y));
-                }
-              },
-              children: [
-                shapes.map((shape) => /* @__PURE__ */ jsxs8(
-                  "g",
-                  {
-                    "data-shape-id": shape.id,
-                    className: `zui-drawing-shape ${selectedIds.has(shape.id) ? "is-selected" : ""}`,
-                    style: { cursor: isEditable && tool === "select" ? "move" : void 0 },
-                    onPointerDown: (e) => handleShapePointerDown(e, shape),
-                    children: [
-                      /* @__PURE__ */ jsx9(HitArea, { shape, points: paths.get(shape.id) }),
-                      shape.id === editingText?.id && shape.type === "text" ? null : /* @__PURE__ */ jsx9(
-                        ShapeView,
-                        {
-                          shape,
-                          points: paths.get(shape.id),
-                          hideField: shape.id === editingText?.id ? editingText.field : null,
-                          showHints: isEditable && tool === "select" && single?.id === shape.id && shape.id !== editingText?.id
-                        }
-                      )
-                    ]
-                  },
-                  shape.id
-                )),
-                hoverBox && /* @__PURE__ */ jsx9(
-                  "polygon",
-                  {
-                    className: "zui-drawing-selection zui-drawing-bind-target",
-                    points: boxOutline(hoverBox).map((p) => `${p.x},${p.y}`).join(" "),
-                    fill: "currentColor",
-                    fillOpacity: 0.06,
-                    stroke: "currentColor",
-                    strokeWidth: 2,
-                    strokeLinejoin: "round",
-                    pointerEvents: "none"
-                  }
-                ),
-                single && isEditable && !editingText && /* @__PURE__ */ jsx9(
-                  SelectionOverlay,
-                  {
-                    shape: single,
-                    points: paths.get(single.id) ?? [],
-                    onHandlePointerDown: handleHandlePointerDown,
-                    onWaypointAdd: addWaypoint,
-                    onWaypointRemove: removeWaypoint
-                  }
-                ),
-                selection.length > 1 && isEditable && /* @__PURE__ */ jsx9(GroupSelectionOverlay, { shapes: selection, paths }),
-                marquee && /* @__PURE__ */ jsx9(MarqueeOverlay, { rect: marqueeRect(marquee.origin, marquee.current) })
-              ]
-            }
-          ),
-          isEditable && shapes.length === 0 && /* @__PURE__ */ jsx9("div", { className: "zui-drawing-empty", "aria-hidden": "true", children: "Pick a shape above, then click or drag on the canvas" }),
-          editingShape && editingText && /* @__PURE__ */ jsx9(
-            "div",
-            {
-              className: "zui-drawing-overlay",
-              style: {
-                transform: `scale(${scale})`,
-                width: logicalWidth ?? void 0,
-                height: logicalWidth ? canvasHeight : void 0
-              },
-              children: /* @__PURE__ */ jsx9(
-                TextEditOverlay,
-                {
-                  shape: editingShape,
-                  field: editingText.field,
-                  points: paths.get(editingShape.id),
-                  onCommit: commitText
-                },
-                `${editingShape.id}:${editingText.field}`
-              )
-            }
-          ),
-          isEditable && /* @__PURE__ */ jsx9(
-            HeightHandle,
-            {
-              height: canvasHeight,
-              scale,
-              onChange: setCanvasHeight,
-              onCommit: (h) => commit(shapesRef.current, { height: h })
-            }
-          )
-        ] })
-      ]
-    }
-  );
-}
-function HeightHandle({
-  height,
-  scale,
-  onChange,
-  onCommit
-}) {
-  const dragRef = useRef4(null);
-  const latestRef = useRef4(height);
-  latestRef.current = height;
-  const clamp = (h) => Math.round(Math.min(MAX_HEIGHT, Math.max(MIN_HEIGHT, h)));
-  return /* @__PURE__ */ jsx9(
-    "div",
-    {
-      className: "zui-drawing-resize",
-      title: "Drag to resize the canvas",
-      role: "separator",
-      "aria-orientation": "horizontal",
-      onPointerDown: (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        e.currentTarget.setPointerCapture(e.pointerId);
-        dragRef.current = { startY: e.clientY, orig: height };
+      line
+    )) : hints && /* @__PURE__ */ jsx5(
+      "text",
+      {
+        ...common,
+        x: cx,
+        y: area.y + SMALL_FONT_SIZE,
+        fontSize: SMALL_FONT_SIZE,
+        opacity: 0.3,
+        style: hintStyle,
+        children: "Label"
+      }
+    )),
+    slots.includes("text") && hideField !== "text" && (shape.text ? mainLines.map((line, i) => /* @__PURE__ */ createElement(
+      "text",
+      {
+        ...common,
+        key: i,
+        x: cx,
+        y: mainStart + i * mainLineH,
+        fontSize: FONT_SIZE,
+        style: textStyle
       },
-      onPointerMove: (e) => {
-        const drag = dragRef.current;
-        if (!drag) return;
-        onChange(clamp(drag.orig + (e.clientY - drag.startY) / Math.max(scale, 0.05)));
+      line
+    )) : hints && /* @__PURE__ */ jsx5(
+      "text",
+      {
+        ...common,
+        x: cx,
+        y: mainStart,
+        fontSize: FONT_SIZE,
+        opacity: 0.3,
+        style: hintStyle,
+        children: "Text"
+      }
+    )),
+    slots.includes("footer") && hideField !== "footer" && (shape.footer ? footerLines.map((line, i) => /* @__PURE__ */ createElement(
+      "text",
+      {
+        ...common,
+        key: i,
+        x: cx,
+        y: area.y + area.h - 3 - (footerLines.length - 1 - i) * smallLineH,
+        fontSize: SMALL_FONT_SIZE,
+        opacity: 0.65,
+        style: textStyle
       },
-      onPointerUp: () => {
-        if (!dragRef.current) return;
-        dragRef.current = null;
-        onCommit(latestRef.current);
+      line
+    )) : hints && /* @__PURE__ */ jsx5(
+      "text",
+      {
+        ...common,
+        x: cx,
+        y: area.y + area.h - 3,
+        fontSize: SMALL_FONT_SIZE,
+        opacity: 0.3,
+        style: hintStyle,
+        children: "Footer"
+      }
+    ))
+  ] });
+}
+function ConnectorLabel({
+  shape,
+  points
+}) {
+  const text = shape.text ?? "";
+  const lines = wrapText(text, CONNECTOR_LABEL_MAX_WIDTH, CONNECTOR_FONT_SIZE);
+  const size = textBoxSize(lines.join("\n"), CONNECTOR_FONT_SIZE);
+  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(
+      "rect",
+      {
+        x: midX - size.w / 2 - 5,
+        y: midY - size.h / 2 - 3,
+        width: size.w + 10,
+        height: size.h + 6,
+        rx: 5,
+        className: "zui-drawing-label-plate",
+        opacity: 0.94
+      }
+    ),
+    lines.map((line, i) => /* @__PURE__ */ jsx5(
+      "text",
+      {
+        x: midX,
+        y: startY + i * lineH,
+        fill: shape.stroke,
+        fontSize: CONNECTOR_FONT_SIZE,
+        textAnchor: "middle",
+        style: textStyle,
+        children: line
       },
-      children: /* @__PURE__ */ jsx9(Icon, { size: 14, children: UI_ICONS.grip })
+      i
+    ))
+  ] });
+}
+function ShapeView({
+  shape,
+  points,
+  hideField,
+  showHints
+}) {
+  const stroke = {
+    stroke: shape.stroke,
+    strokeWidth: shape.strokeWidth,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  };
+  if (isBoxType(shape.type)) {
+    return /* @__PURE__ */ jsxs5("g", { children: [
+      /* @__PURE__ */ jsx5(BoxGeometry, { shape, stroke }),
+      /* @__PURE__ */ jsx5(BoxTexts, { shape, hideField, showHints })
+    ] });
+  }
+  if (isConnectorType(shape.type)) {
+    const pts = points ?? [
+      { 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__ */ jsx5(
+    "text",
+    {
+      x: shape.x,
+      y: shape.y + FONT_SIZE,
+      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))
     }
   );
 }
-
-// src/drawing/skeleton.ts
-var COLOR_PRESETS = {
-  gray: { stroke: "#1e1e1e", fill: "transparent" },
-  red: { stroke: "#e03131", fill: "#ffc9c9" },
-  green: { stroke: "#2f9e44", fill: "#b2f2bb" },
-  blue: { stroke: "#1971c2", fill: "#a5d8ff" },
-  orange: { stroke: "#f08c00", fill: "#ffec99" },
-  purple: { stroke: "#7048e8", fill: "#d0bfff" }
-};
-var COLOR_NAMES = Object.keys(COLOR_PRESETS);
-var TEXT_WRAP_WIDTH = 260;
-var SLOT_GAP = 6;
-var RANK_GAP = 90;
-var STACK_GAP = 40;
-var LAYOUT_ORIGIN = 32;
-var CANVAS_MARGIN = 32;
-var MIN_AUTO_CANVAS_HEIGHT = 120;
-var DEFAULT_STROKE2 = "#1e1e1e";
-var STROKE_WIDTH = 2;
-function isDrawingSkeleton(value) {
-  return isRecord2(value) && Array.isArray(value.boxes);
-}
-function parseDrawingSkeleton(json) {
-  try {
-    const parsed = JSON.parse(json);
-    if (!isDrawingSkeleton(parsed)) return EMPTY_DRAWING;
-    return expandSkeleton(normalizeSkeleton(parsed));
-  } catch {
-    return EMPTY_DRAWING;
+function HitArea({
+  shape,
+  points
+}) {
+  if (isConnectorType(shape.type) && points) {
+    return /* @__PURE__ */ jsx5("path", { d: polylinePath(points), fill: "none", stroke: "transparent", strokeWidth: 16 });
   }
-}
-function expandSkeleton(skeleton) {
-  const boxes = dedupeById(skeleton.boxes);
-  const boxTypes = new Map(boxes.map((box) => [box.id, box.type ?? "rect"]));
-  const sizes = new Map(boxes.map((box) => [box.id, measureBox(box, boxTypes.get(box.id))]));
-  const boxIds = new Set(boxTypes.keys());
-  const connectors = (skeleton.connectors ?? []).filter(
-    (c) => boxIds.has(endId(c.from)) && boxIds.has(endId(c.to)) && endId(c.from) !== endId(c.to)
-  );
-  const positions = layoutBoxes(boxes, sizes, connectors, skeleton.direction ?? "right");
-  const boxShapes = boxes.map(
-    (box) => expandBox(box, boxTypes.get(box.id), sizes.get(box.id), positions.get(box.id))
+  const b = bbox(shape);
+  return /* @__PURE__ */ jsx5(
+    "rect",
+    {
+      x: b.x - 2,
+      y: b.y - 2,
+      width: Math.max(b.w, 8) + 4,
+      height: Math.max(b.h, 8) + 4,
+      fill: "transparent",
+      stroke: "none"
+    }
   );
-  const centers = new Map(boxShapes.map((shape) => [shape.id, shapeCenter(shape)]));
-  const used = new Set(boxIds);
-  const nextId = (prefix) => {
-    let i = used.size + 1;
-    while (used.has(`${prefix}${i}`)) i += 1;
-    const id = `${prefix}${i}`;
-    used.add(id);
-    return id;
-  };
-  const connectorShapes = connectors.map((c) => expandConnector(c, centers, nextId("c")));
-  const textShapes = (skeleton.texts ?? []).map((t) => expandText(t, nextId("t")));
-  const shapes = resolveBindings([...boxShapes, ...connectorShapes, ...textShapes]);
-  const bottom = shapes.reduce((max, shape) => {
-    const b = bbox(shape);
-    return Math.max(max, b.y + b.h);
-  }, 0);
-  return normalizeDrawingData({
-    version: 2,
-    ...skeleton.canvasWidth !== void 0 ? { canvasWidth: skeleton.canvasWidth } : {},
-    canvasHeight: skeleton.canvasHeight ?? Math.max(MIN_AUTO_CANVAS_HEIGHT, Math.ceil(bottom + CANVAS_MARGIN)),
-    ...skeleton.width !== void 0 ? { width: skeleton.width } : {},
-    shapes
-  });
 }
-function measureBox(box, type) {
-  const def = BOX_DEFINITIONS[type];
-  const probe = {
-    id: "",
-    type,
-    x: 0,
-    y: 0,
-    w: def.defaultSize.w,
-    h: def.defaultSize.h,
-    stroke: "",
-    fill: "",
-    strokeWidth: 0
-  };
-  const area = def.textArea(probe);
-  const ratioW = area.w / def.defaultSize.w;
-  const ratioH = area.h / def.defaultSize.h;
-  const wrapWidth = box.w !== void 0 ? Math.max(20, box.w * ratioW) : TEXT_WRAP_WIDTH;
-  const slots = def.textSlots.flatMap((slot) => {
-    const size = slotSize(box, slot, wrapWidth);
-    return size ? [size] : [];
-  });
-  const innerW = slots.reduce((max, s) => Math.max(max, s.w), 0);
-  const innerH = slots.reduce((sum, s) => sum + s.h, 0) + Math.max(0, slots.length - 1) * SLOT_GAP;
-  return {
-    w: box.w ?? Math.max(def.defaultSize.w, Math.ceil(innerW / ratioW)),
-    h: box.h ?? Math.max(def.defaultSize.h, Math.ceil(innerH / ratioH))
+
+// src/drawing/canvas/TextEditOverlay.tsx
+import {
+  useEffect as useEffect5,
+  useRef as useRef2,
+  useState
+} from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+function TextEditOverlay({
+  shape,
+  field,
+  points,
+  onCommit
+}) {
+  const original = shape[field] ?? "";
+  const [value, setValue] = useState(original);
+  const ref = useRef2(null);
+  const valueRef = useRef2(value);
+  valueRef.current = value;
+  useEffect5(() => {
+    const el = ref.current;
+    if (!el) return;
+    el.focus();
+    el.select();
+    const onKeyDown = (e) => {
+      e.stopPropagation();
+      if ((e.key === "Home" || e.key === "End") && !e.shiftKey && !e.metaKey && !e.ctrlKey) {
+        e.preventDefault();
+        const text = el.value;
+        const caret = e.key === "Home" ? el.selectionStart : el.selectionEnd;
+        const pos = e.key === "Home" ? text.lastIndexOf("\n", caret - 1) + 1 : (text.indexOf("\n", caret) + 1 || text.length + 1) - 1;
+        el.setSelectionRange(pos, pos);
+        return;
+      }
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        onCommit(shape.id, field, valueRef.current);
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        onCommit(shape.id, field, original);
+      }
+    };
+    const stop = (e) => e.stopPropagation();
+    el.addEventListener("keydown", onKeyDown);
+    el.addEventListener("keyup", stop);
+    el.addEventListener("keypress", stop);
+    return () => {
+      el.removeEventListener("keydown", onKeyDown);
+      el.removeEventListener("keyup", stop);
+      el.removeEventListener("keypress", stop);
+    };
+  }, []);
+  const style = {
+    color: textColorFor(shape),
+    fontFamily: "var(--zui-drawing-font)",
+    lineHeight: LINE_HEIGHT
   };
-}
-function slotSize(box, slot, wrapWidth) {
-  const value = box[slot];
-  if (!value) return null;
-  const fontSize = slot === "text" ? FONT_SIZE : SMALL_FONT_SIZE;
-  return textBoxSize(wrapText(value, wrapWidth, fontSize).join("\n"), fontSize);
-}
-function layoutBoxes(boxes, sizes, connectors, direction) {
-  const positions = /* @__PURE__ */ new Map();
-  const auto = boxes.filter((box) => box.x === void 0 || box.y === void 0);
-  const autoIds = new Set(auto.map((box) => box.id));
-  const edges = connectors.map((c) => ({ from: endId(c.from), to: endId(c.to) })).filter((e) => e.from !== e.to && autoIds.has(e.from) && autoIds.has(e.to));
-  const ranks = rankNodes(
-    auto.map((box) => box.id),
-    acyclicEdges(
-      auto.map((box) => box.id),
-      edges
-    )
-  );
-  const rows = [];
-  for (const box of auto) {
-    const rank = ranks.get(box.id) ?? 0;
-    (rows[rank] ?? (rows[rank] = [])).push(box.id);
+  if (shape.type === "text") {
+    const size = textBoxSize(value || " ");
+    Object.assign(style, {
+      left: shape.x,
+      top: shape.y,
+      fontSize: FONT_SIZE,
+      width: Math.max(80, size.w + 20),
+      height: size.h + 2,
+      // `pre` would keep the lines, but Chrome ignores Home/End in a
+      // `white-space: pre` textarea; the width tracks the content anyway
+      whiteSpace: "pre-wrap"
+    });
+  } else if (isConnectorType(shape.type)) {
+    const lines = wrapText(value, CONNECTOR_LABEL_MAX_WIDTH, CONNECTOR_FONT_SIZE);
+    const size = textBoxSize(lines.join("\n") || " ", CONNECTOR_FONT_SIZE);
+    const width = Math.max(70, size.w + 16);
+    const height = size.h + 4;
+    const mid = connectorMidpoint(
+      points ?? [
+        { x: shape.x, y: shape.y },
+        { x: shape.x + shape.w, y: shape.y + shape.h }
+      ]
+    );
+    Object.assign(style, {
+      left: mid.x - width / 2,
+      top: mid.y - height / 2,
+      width,
+      height,
+      fontSize: CONNECTOR_FONT_SIZE,
+      textAlign: "center",
+      whiteSpace: "pre-wrap"
+    });
+  } else {
+    const { area } = slotLayout(shape);
+    const fontSize = field === "text" ? FONT_SIZE : SMALL_FONT_SIZE;
+    const width = Math.max(area.w, 40);
+    const lines = wrapText(value, width, fontSize).length;
+    const boxH = lines * fontSize * LINE_HEIGHT + 2;
+    const top = field === "label" ? area.y - 1 : field === "footer" ? area.y + area.h - boxH + 1 : area.y + area.h / 2 - boxH / 2;
+    Object.assign(style, {
+      left: area.x,
+      top,
+      width,
+      height: boxH,
+      fontSize,
+      fontWeight: field === "label" ? 600 : void 0,
+      letterSpacing: field === "label" ? 0.3 : void 0,
+      opacity: field === "text" ? 1 : field === "label" ? 0.85 : 0.65,
+      textAlign: "center",
+      whiteSpace: "pre-wrap"
+    });
   }
-  const main = direction === "right" ? "w" : "h";
-  const cross = direction === "right" ? "h" : "w";
-  const rowMain = rows.map((row) => row.reduce((max, id) => Math.max(max, sizes.get(id)[main]), 0));
-  const rowCross = rows.map(
-    (row) => row.reduce((sum, id) => sum + sizes.get(id)[cross], 0) + Math.max(0, row.length - 1) * STACK_GAP
+  const placeholder = field === "label" ? "Label" : field === "footer" ? "Footer" : "Text";
+  return /* @__PURE__ */ jsx6(
+    "textarea",
+    {
+      ref,
+      className: "zui-drawing-text-input",
+      style,
+      value,
+      placeholder,
+      spellCheck: false,
+      onChange: (e) => setValue(e.target.value),
+      onBlur: () => onCommit(shape.id, field, value),
+      onPointerDown: (e) => e.stopPropagation()
+    }
   );
-  const maxCross = rowCross.reduce((max, c) => Math.max(max, c), 0);
-  let mainOffset = LAYOUT_ORIGIN;
-  rows.forEach((row, rank) => {
-    let crossOffset = LAYOUT_ORIGIN + (maxCross - rowCross[rank]) / 2;
-    for (const id of row) {
-      const size = sizes.get(id);
-      const mainPos = Math.round(mainOffset + (rowMain[rank] - size[main]) / 2);
-      const crossPos = Math.round(crossOffset);
-      positions.set(
-        id,
-        direction === "right" ? { x: mainPos, y: crossPos } : { x: crossPos, y: mainPos }
-      );
-      crossOffset += size[cross] + STACK_GAP;
-    }
-    mainOffset += rowMain[rank] + RANK_GAP;
-  });
-  for (const box of boxes) {
-    const computed = positions.get(box.id) ?? { x: LAYOUT_ORIGIN, y: LAYOUT_ORIGIN };
-    positions.set(box.id, { x: box.x ?? computed.x, y: box.y ?? computed.y });
+}
+
+// src/drawing/canvas/Toolbar.tsx
+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";
+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" })
+    ] })
+  },
+  {
+    preset: "comfortable",
+    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" })
+    ] })
+  },
+  {
+    preset: "full",
+    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" })
+    ] })
   }
-  return positions;
+];
+function layoutPreset(width) {
+  return width === "content" ? "compact" : width === "text" ? "comfortable" : "full";
 }
-function acyclicEdges(ids, edges) {
-  const outgoing = /* @__PURE__ */ new Map();
-  for (const edge of edges) (outgoing.get(edge.from) ?? outgoing.set(edge.from, []).get(edge.from)).push(edge);
-  const state = /* @__PURE__ */ new Map();
-  const kept = [];
-  const visit = (id) => {
-    state.set(id, "visiting");
-    for (const edge of outgoing.get(id) ?? []) {
-      const target = state.get(edge.to);
-      if (target === "visiting") continue;
-      kept.push(edge);
-      if (target === void 0) visit(edge.to);
+
+// src/drawing/canvas/Toolbar.tsx
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var PRIMARY_TOOLS = [
+  { tool: "select", label: "Select" },
+  { tool: "rect", label: "Rectangle" },
+  { tool: "ellipse", label: "Ellipse" },
+  { tool: "diamond", label: "Diamond" },
+  { tool: "arrow", label: "Arrow" },
+  { tool: "line", label: "Line" },
+  { tool: "text", label: "Text" }
+];
+var MORE_SHAPES = ["note", "cylinder", "cloud", "queue", "actor"];
+function ToolButton({
+  label,
+  active,
+  onClick,
+  children,
+  className,
+  pressed
+}) {
+  return /* @__PURE__ */ jsx8(
+    "button",
+    {
+      type: "button",
+      title: label,
+      "aria-label": label,
+      "aria-pressed": pressed ?? active,
+      className: `zui-drawing-tool ${active ? "is-active" : ""} ${className ?? ""}`,
+      onClick,
+      children: /* @__PURE__ */ jsx8(Icon, { children })
     }
-    state.set(id, "done");
-  };
-  for (const id of ids) if (!state.has(id)) visit(id);
-  return kept;
-}
-function rankNodes(ids, edges) {
-  const incoming = /* @__PURE__ */ new Map();
-  for (const edge of edges) (incoming.get(edge.to) ?? incoming.set(edge.to, []).get(edge.to)).push(edge.from);
-  const ranks = /* @__PURE__ */ new Map();
-  const rankOf = (id) => {
-    const known = ranks.get(id);
-    if (known !== void 0) return known;
-    const rank = (incoming.get(id) ?? []).reduce((max, from) => Math.max(max, rankOf(from) + 1), 0);
-    ranks.set(id, rank);
-    return rank;
-  };
-  for (const id of ids) rankOf(id);
-  return ranks;
+  );
 }
-function expandBox(box, type, size, position) {
-  const preset = box.color ? COLOR_PRESETS[box.color] : void 0;
-  const fill = box.fill ?? preset?.fill ?? BOX_DEFINITIONS[type].defaultFill ?? "transparent";
-  return {
-    id: box.id,
-    type,
-    x: position.x,
-    y: position.y,
-    w: size.w,
-    h: size.h,
-    stroke: box.stroke ?? preset?.stroke ?? DEFAULT_STROKE2,
-    fill,
-    strokeWidth: STROKE_WIDTH,
-    ...box.text ? { text: box.text } : {},
-    ...box.label ? { label: box.label } : {},
-    ...box.footer ? { footer: box.footer } : {}
-  };
+function DrawingToolbar({
+  tool,
+  onToolChange,
+  width,
+  onWidthChange,
+  onCopyMermaid,
+  properties
+}) {
+  const [moreOpen, setMoreOpen] = useState2(false);
+  const [lastMore, setLastMore] = useState2("note");
+  const [copied, setCopied] = useState2(false);
+  const moreRef = useRef3(null);
+  useEffect6(() => {
+    if (!moreOpen) return;
+    const close = (e) => {
+      if (!moreRef.current?.contains(e.target)) setMoreOpen(false);
+    };
+    const key = (e) => {
+      if (e.key === "Escape") setMoreOpen(false);
+    };
+    document.addEventListener("pointerdown", close);
+    document.addEventListener("keydown", key);
+    return () => {
+      document.removeEventListener("pointerdown", close);
+      document.removeEventListener("keydown", key);
+    };
+  }, [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(
+          "button",
+          {
+            type: "button",
+            title: "More shapes",
+            "aria-label": "More shapes",
+            "aria-haspopup": "menu",
+            "aria-expanded": moreOpen,
+            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" })
+            ]
+          }
+        ),
+        moreOpen && /* @__PURE__ */ jsx8("div", { className: "zui-drawing-popover", role: "menu", children: MORE_SHAPES.map((type) => /* @__PURE__ */ jsxs7(
+          "button",
+          {
+            type: "button",
+            role: "menuitemradio",
+            "aria-checked": tool === type,
+            className: `zui-drawing-popover-item ${tool === type ? "is-active" : ""}`,
+            onClick: () => {
+              setLastMore(type);
+              onToolChange(type);
+              setMoreOpen(false);
+            },
+            children: [
+              /* @__PURE__ */ jsx8(Icon, { size: 18, children: SHAPE_ICONS[type] }),
+              /* @__PURE__ */ jsx8("span", { children: BOX_DEFINITIONS[type].label })
+            ]
+          },
+          type
+        )) })
+      ] })
+    ] }),
+    properties,
+    /* @__PURE__ */ jsxs7("div", { className: "zui-drawing-toolbar-group zui-drawing-toolbar-group-end", children: [
+      /* @__PURE__ */ jsx8(
+        ToolButton,
+        {
+          label: copied ? "Copied Mermaid to clipboard" : "Copy as Mermaid",
+          className: copied ? "is-success" : "",
+          onClick: () => {
+            void onCopyMermaid().then((ok) => {
+              if (!ok) return;
+              setCopied(true);
+              setTimeout(() => setCopied(false), 1600);
+            });
+          },
+          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(
+        ToolButton,
+        {
+          label,
+          active: layoutPreset(width) === preset,
+          onClick: () => onWidthChange(presetWidth),
+          children: icon
+        },
+        preset
+      ))
+    ] })
+  ] });
 }
-function expandConnector(connector, centers, fallbackId) {
-  const type = connector.type ?? "arrow";
-  const from = centers.get(endId(connector.from));
-  const to = centers.get(endId(connector.to));
-  return {
-    id: connector.id ?? fallbackId,
-    type,
-    x: from.x,
-    y: from.y,
-    w: to.x - from.x,
-    h: to.y - from.y,
-    stroke: connector.stroke ?? (connector.color ? COLOR_PRESETS[connector.color].stroke : DEFAULT_STROKE2),
-    fill: "transparent",
-    strokeWidth: STROKE_WIDTH,
-    startBinding: toBinding(connector.from),
-    endBinding: toBinding(connector.to),
-    ...connector.text ? { text: connector.text } : {},
-    ...type === "arrow" && connector.bidirectional ? { bidirectional: true } : {},
-    ...connector.routing === "elbow" ? { routing: "elbow" } : {}
-  };
+
+// src/drawing/canvas/DrawingCanvas.tsx
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var MIN_HEIGHT = 120;
+var MAX_HEIGHT = 1200;
+var WIDTH_CLASS = {
+  full: "",
+  text: "is-text-width",
+  content: "is-content-width"
+};
+var MIN_CONTENT_WIDTH = 240;
+var CONTENT_WIDTH_PADDING = 40;
+var EMPTY_SET = /* @__PURE__ */ new Set();
+function contentWidth(shapes, paths) {
+  let right = 0;
+  for (const shape of shapes) {
+    if (isConnectorType(shape.type)) {
+      for (const p of paths.get(shape.id) ?? []) right = Math.max(right, p.x);
+    } else {
+      const b = bbox(shape);
+      right = Math.max(right, b.x + b.w);
+    }
+  }
+  return Math.max(MIN_CONTENT_WIDTH, Math.ceil(right + CONTENT_WIDTH_PADDING));
 }
-function expandText(text, fallbackId) {
-  const size = textBoxSize(text.text);
-  return {
-    id: text.id ?? fallbackId,
-    type: "text",
-    x: text.x,
-    y: text.y,
-    w: size.w,
-    h: size.h,
-    stroke: text.stroke ?? (text.color ? COLOR_PRESETS[text.color].stroke : DEFAULT_STROKE2),
-    fill: "transparent",
-    strokeWidth: STROKE_WIDTH,
-    text: text.text
-  };
-}
-function endId(end) {
-  return typeof end === "string" ? end : end.id;
-}
-function toBinding(end) {
-  if (typeof end === "string" || !end.side) return { id: endId(end) };
-  return { id: end.id, fixedPoint: SIDE_FIXED_POINTS[end.side] };
-}
-function shapeCenter(shape) {
-  const b = bbox(shape);
-  return { x: b.x + b.w / 2, y: b.y + b.h / 2 };
-}
-function dedupeById(items) {
-  const seen = /* @__PURE__ */ new Set();
-  return items.filter((item) => seen.has(item.id) ? false : (seen.add(item.id), true));
-}
-function normalizeSkeleton(raw) {
-  const value = raw;
-  const boxes = value.boxes.flatMap((b) => {
-    const box = normalizeBox(b);
-    return box ? [box] : [];
-  });
-  const connectors = Array.isArray(value.connectors) ? value.connectors.flatMap((c) => {
-    const connector = normalizeConnector(c);
-    return connector ? [connector] : [];
-  }) : [];
-  const texts = Array.isArray(value.texts) ? value.texts.flatMap((t) => {
-    const text = normalizeText(t);
-    return text ? [text] : [];
-  }) : [];
-  const canvasWidth = finiteNumber(value.canvasWidth);
-  const canvasHeight = finiteNumber(value.canvasHeight);
-  return {
-    direction: value.direction === "down" ? "down" : "right",
-    ...canvasWidth !== void 0 ? { canvasWidth } : {},
-    ...canvasHeight !== void 0 ? { canvasHeight } : {},
-    ...isBlockWidth(value.width) ? { width: value.width } : {},
-    boxes,
-    connectors,
-    texts
-  };
-}
-function normalizeBox(value) {
-  if (!isRecord2(value) || !nonEmptyString(value.id)) return null;
-  if (value.type !== void 0 && !(typeof value.type === "string" && isBoxType(value.type))) {
-    return null;
-  }
-  return compact({
-    id: value.id,
-    type: value.type,
-    label: nonEmptyString(value.label) ? value.label : void 0,
-    text: nonEmptyString(value.text) ? value.text : void 0,
-    footer: nonEmptyString(value.footer) ? value.footer : void 0,
-    x: finiteNumber(value.x),
-    y: finiteNumber(value.y),
-    w: positiveNumber(value.w),
-    h: positiveNumber(value.h),
-    color: colorName(value.color),
-    stroke: nonEmptyString(value.stroke) ? value.stroke : void 0,
-    fill: nonEmptyString(value.fill) ? value.fill : void 0
-  });
-}
-function normalizeConnector(value) {
-  if (!isRecord2(value)) return null;
-  const from = normalizeEnd(value.from);
-  const to = normalizeEnd(value.to);
-  if (!from || !to) return null;
-  if (value.type !== void 0 && !(typeof value.type === "string" && isConnectorType(value.type))) {
-    return null;
+function computePaths(shapes) {
+  const paths = /* @__PURE__ */ new Map();
+  for (const shape of shapes) {
+    if (isConnectorType(shape.type)) paths.set(shape.id, connectorPoints(shape, shapes));
   }
-  return compact({
-    id: nonEmptyString(value.id) ? value.id : void 0,
-    type: value.type,
-    from,
-    to,
-    text: nonEmptyString(value.text) ? value.text : void 0,
-    bidirectional: value.bidirectional === true ? true : void 0,
-    routing: value.routing === "elbow" ? "elbow" : void 0,
-    color: colorName(value.color),
-    stroke: nonEmptyString(value.stroke) ? value.stroke : void 0
-  });
-}
-function normalizeEnd(value) {
-  if (nonEmptyString(value)) return value;
-  if (!isRecord2(value) || !nonEmptyString(value.id)) return null;
-  const side = value.side;
-  return typeof side === "string" && side in SIDE_FIXED_POINTS ? { id: value.id, side } : { id: value.id };
-}
-function normalizeText(value) {
-  if (!isRecord2(value) || !nonEmptyString(value.text)) return null;
-  const x = finiteNumber(value.x);
-  const y = finiteNumber(value.y);
-  if (x === void 0 || y === void 0) return null;
-  return compact({
-    id: nonEmptyString(value.id) ? value.id : void 0,
-    x,
-    y,
-    text: value.text,
-    color: colorName(value.color),
-    stroke: nonEmptyString(value.stroke) ? value.stroke : void 0
-  });
-}
-function isRecord2(value) {
-  return typeof value === "object" && value !== null;
-}
-function nonEmptyString(value) {
-  return typeof value === "string" && value !== "";
-}
-function finiteNumber(value) {
-  return typeof value === "number" && Number.isFinite(value) ? value : void 0;
-}
-function positiveNumber(value) {
-  const n2 = finiteNumber(value);
-  return n2 !== void 0 && n2 > 0 ? n2 : void 0;
-}
-function colorName(value) {
-  return typeof value === "string" && COLOR_NAMES.includes(value) ? value : void 0;
+  return paths;
 }
-function compact(value) {
-  return Object.fromEntries(Object.entries(value).filter(([, v]) => v !== void 0));
+function DrawingCanvas({ nodeKey, data }) {
+  const [editor] = useLexicalComposerContext5();
+  const isEditable = useLexicalEditable();
+  const [shapes, setShapes] = useState3(data.shapes);
+  const [canvasHeight, setCanvasHeight] = useState3(data.canvasHeight);
+  const [width, setWidth] = useState3(data.width ?? "full");
+  const [tool, setTool] = useState3("select");
+  const [selectedIds, setSelectedIds] = useState3(EMPTY_SET);
+  const [editingText, setEditingText] = useState3(null);
+  const [stroke, setStroke] = useState3(STROKE_COLORS[0]);
+  const [fill, setFill] = useState3(FILL_COLORS[0]);
+  const [hoverBoxId, setHoverBoxId] = useState3(null);
+  const [marquee, setMarquee] = useState3(null);
+  const [scale, setScale] = useState3(1);
+  const rootRef = useRef4(null);
+  const svgRef = useRef4(null);
+  const dragRef = useRef4(null);
+  const pendingTextEditRef = useRef4(null);
+  const pendingPointRef = useRef4(null);
+  const frameRef = useRef4(null);
+  const lastCommittedRef = useRef4(serializeDrawingData(data));
+  const shapesRef = useRef4(shapes);
+  shapesRef.current = shapes;
+  const heightRef = useRef4(canvasHeight);
+  heightRef.current = canvasHeight;
+  const widthRef = useRef4(width);
+  widthRef.current = width;
+  const selectedRef = useRef4(selectedIds);
+  selectedRef.current = selectedIds;
+  const paths = useMemo(() => computePaths(shapes), [shapes]);
+  const canvasWidth = data.canvasWidth;
+  const logicalWidth = canvasWidth ?? (width === "content" ? contentWidth(shapes, paths) : null);
+  useEffect7(() => {
+    const incoming = serializeDrawingData(data);
+    if (incoming !== lastCommittedRef.current) {
+      lastCommittedRef.current = incoming;
+      setShapes(data.shapes);
+      setCanvasHeight(data.canvasHeight);
+      setWidth(data.width ?? "full");
+      setSelectedIds(EMPTY_SET);
+      setEditingText(null);
+    }
+  }, [data]);
+  useEffect7(() => {
+    const svg = svgRef.current;
+    if (!logicalWidth || !svg || typeof ResizeObserver === "undefined") {
+      setScale(1);
+      return;
+    }
+    const update = () => {
+      const rect = svg.getBoundingClientRect();
+      setScale(rect.width > 0 ? rect.width / logicalWidth : 1);
+    };
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(svg);
+    return () => observer.disconnect();
+  }, [logicalWidth]);
+  const commit = useCallback(
+    (nextShapes, options) => {
+      const nextWidth = options?.width ?? widthRef.current;
+      const explicitFull = options?.width === void 0 && data.width !== void 0;
+      const payload = {
+        version: 2,
+        ...canvasWidth ? { canvasWidth } : {},
+        canvasHeight: options?.height ?? heightRef.current,
+        ...nextWidth !== "full" || explicitFull ? { width: nextWidth } : {},
+        shapes: nextShapes
+      };
+      const json = serializeDrawingData(payload);
+      if (json === lastCommittedRef.current) return;
+      lastCommittedRef.current = json;
+      editor.update(() => {
+        const node = $getNodeByKey2(nodeKey);
+        if ($isDrawingNode(node)) node.setData(payload);
+      });
+    },
+    [editor, nodeKey, canvasWidth, data.width]
+  );
+  const updateShapes = useCallback(
+    (updater, options) => {
+      setShapes((prev) => {
+        const next = resolveBindings(updater(prev));
+        if (options?.commit) commit(next);
+        return next;
+      });
+    },
+    [commit]
+  );
+  const getPoint = useCallback((e) => {
+    const svg = svgRef.current;
+    if (!svg) return { x: 0, y: 0 };
+    const ctm = svg.getScreenCTM();
+    if (!ctm) {
+      const rect = svg.getBoundingClientRect();
+      return { x: e.clientX - rect.left, y: e.clientY - rect.top };
+    }
+    const inverse = ctm.inverse();
+    return {
+      x: inverse.a * e.clientX + inverse.c * e.clientY + inverse.e,
+      y: inverse.b * e.clientX + inverse.d * e.clientY + inverse.f
+    };
+  }, []);
+  const selection = useMemo(
+    () => shapes.filter((s) => selectedIds.has(s.id)),
+    [shapes, selectedIds]
+  );
+  const single = selection.length === 1 ? selection[0] : null;
+  const startTextEditing = useCallback((id, field) => {
+    setEditingText({ id, field });
+    setSelectedIds(/* @__PURE__ */ new Set([id]));
+  }, []);
+  const capture = (e) => {
+    svgRef.current?.setPointerCapture(e.pointerId);
+  };
+  const handleBackgroundPointerDown = useCallback(
+    (e) => {
+      if (!isEditable || editingText || e.button !== 0) return;
+      const point = getPoint(e);
+      capture(e);
+      if (tool === "select") {
+        if (!e.shiftKey) setSelectedIds(EMPTY_SET);
+        dragRef.current = { mode: "marquee", origin: point, current: point, additive: e.shiftKey };
+        return;
+      }
+      if (tool === "text") {
+        const id2 = createShapeId();
+        const size = textBoxSize("");
+        updateShapes((prev) => [
+          ...prev,
+          {
+            id: id2,
+            type: "text",
+            x: point.x,
+            y: point.y - FONT_SIZE / 2,
+            w: size.w,
+            h: size.h,
+            stroke,
+            fill: "transparent",
+            strokeWidth: 2,
+            text: ""
+          }
+        ]);
+        setTool("select");
+        setSelectedIds(/* @__PURE__ */ new Set([id2]));
+        pendingTextEditRef.current = id2;
+        return;
+      }
+      const id = createShapeId();
+      const def = isBoxType(tool) ? BOX_DEFINITIONS[tool] : null;
+      const shapeFill = def ? fill === "transparent" && def.defaultFill ? def.defaultFill : fill : "transparent";
+      dragRef.current = { mode: "draw", id, origin: point };
+      setSelectedIds(EMPTY_SET);
+      updateShapes((prev) => [
+        ...prev,
+        { id, type: tool, x: point.x, y: point.y, w: 0, h: 0, stroke, fill: shapeFill, strokeWidth: 2 }
+      ]);
+    },
+    [isEditable, editingText, getPoint, tool, stroke, fill, updateShapes, startTextEditing]
+  );
+  const handleShapePointerDown = useCallback(
+    (e, shape) => {
+      if (!isEditable || tool !== "select" || editingText || e.button !== 0) return;
+      e.stopPropagation();
+      const point = getPoint(e);
+      capture(e);
+      const selected = selectedRef.current;
+      if (e.shiftKey) {
+        if (selected.has(shape.id)) {
+          const next2 = new Set(selected);
+          next2.delete(shape.id);
+          setSelectedIds(next2);
+          return;
+        }
+        const next = new Set(selected).add(shape.id);
+        setSelectedIds(next);
+        dragRef.current = {
+          mode: "move",
+          clickedId: shape.id,
+          origin: point,
+          origs: moveGroup(shapesRef.current, next, shape.id),
+          wasSelected: false
+        };
+        return;
+      }
+      const wasSelected = selected.size === 1 && selected.has(shape.id);
+      const group = selected.has(shape.id) ? selected : /* @__PURE__ */ new Set([shape.id]);
+      if (!selected.has(shape.id)) setSelectedIds(group);
+      dragRef.current = {
+        mode: "move",
+        clickedId: shape.id,
+        origin: point,
+        origs: moveGroup(shapesRef.current, group, shape.id),
+        wasSelected
+      };
+    },
+    [isEditable, tool, editingText, getPoint]
+  );
+  const handleHandlePointerDown = useCallback(
+    (e, drag) => {
+      if (!isEditable || e.button !== 0) return;
+      e.stopPropagation();
+      capture(e);
+      dragRef.current = drag;
+      if (drag.mode === "endpoint") {
+        const key = drag.end === "start" ? "startBinding" : "endBinding";
+        updateShapes(
+          (prev) => prev.map((s) => s.id === drag.id ? { ...s, [key]: void 0 } : s)
+        );
+      }
+    },
+    [isEditable, updateShapes]
+  );
+  const flushPointer = useCallback(() => {
+    frameRef.current = null;
+    const point = pendingPointRef.current;
+    const drag = dragRef.current;
+    if (!point || !drag) return;
+    if (drag.mode === "marquee") {
+      drag.current = point;
+      setMarquee({ origin: drag.origin, current: point });
+      return;
+    }
+    updateShapes((prev) => applyDrag(prev, drag, point));
+    if (drag.mode === "endpoint" || drag.mode === "draw" && isConnectorType(shapesRef.current.find((s) => s.id === drag.id)?.type ?? "")) {
+      const box = findBoxAt(shapesRef.current, point, drag.id);
+      setHoverBoxId((prev) => prev === (box?.id ?? null) ? prev : box?.id ?? null);
+    }
+  }, [updateShapes]);
+  const handlePointerMove = useCallback(
+    (e) => {
+      if (!dragRef.current) return;
+      pendingPointRef.current = getPoint(e);
+      if (frameRef.current === null) {
+        frameRef.current = requestAnimationFrame(flushPointer);
+      }
+    },
+    [getPoint, flushPointer]
+  );
+  const handlePointerUp = useCallback(
+    (e) => {
+      const drag = dragRef.current;
+      dragRef.current = null;
+      if (frameRef.current !== null) {
+        cancelAnimationFrame(frameRef.current);
+        frameRef.current = null;
+      }
+      pendingPointRef.current = null;
+      setHoverBoxId(null);
+      if (pendingTextEditRef.current) {
+        const id = pendingTextEditRef.current;
+        pendingTextEditRef.current = null;
+        startTextEditing(id, "text");
+        return;
+      }
+      if (!drag) return;
+      const point = getPoint(e);
+      if (drag.mode === "marquee") {
+        setMarquee(null);
+        const rect = marqueeRect(drag.origin, point);
+        if (rect.w < CLICK_TOLERANCE && rect.h < CLICK_TOLERANCE) return;
+        const ids = shapesWithin(shapesRef.current, rect, paths);
+        setSelectedIds((prev) => drag.additive ? /* @__PURE__ */ new Set([...prev, ...ids]) : new Set(ids));
+        return;
+      }
+      if (drag.mode === "move" && drag.wasSelected) {
+        const moved = Math.abs(point.x - drag.origin.x) > CLICK_TOLERANCE || Math.abs(point.y - drag.origin.y) > CLICK_TOLERANCE;
+        const current = shapesRef.current.find((s) => s.id === drag.clickedId);
+        if (!moved && current) {
+          updateShapes((prev) => applyDrag(prev, drag, drag.origin));
+          if (current.type === "text" || isConnectorType(current.type)) {
+            startTextEditing(current.id, "text");
+          } else {
+            startTextEditing(current.id, slotAt(current, drag.origin.y));
+          }
+          return;
+        }
+      }
+      if (drag.mode === "draw") {
+        const drawn = shapesRef.current.find((s) => s.id === drag.id);
+        if (drawn && Math.abs(drawn.w) < 4 && Math.abs(drawn.h) < 4) {
+          if (drawn && isBoxType(drawn.type)) {
+            const size = BOX_DEFINITIONS[drawn.type].defaultSize;
+            updateShapes(
+              (prev) => prev.map(
+                (s) => s.id === drag.id ? { ...s, x: s.x - size.w / 2, y: s.y - size.h / 2, w: size.w, h: size.h } : s
+              ),
+              { commit: true }
+            );
+            setTool("select");
+            setSelectedIds(/* @__PURE__ */ new Set([drag.id]));
+          } else {
+            updateShapes((prev) => prev.filter((s) => s.id !== drag.id));
+          }
+          return;
+        }
+        if (drawn && isConnectorType(drawn.type)) {
+          updateShapes((prev) => prev.map((s) => s.id === drag.id ? bindEndpoints(s, prev) : s));
+        }
+        setTool("select");
+        setSelectedIds(/* @__PURE__ */ new Set([drag.id]));
+      }
+      if (drag.mode === "endpoint") {
+        updateShapes(
+          (prev) => prev.map((s) => {
+            if (s.id !== drag.id) return s;
+            const end = drag.end === "start" ? { x: s.x, y: s.y } : { x: s.x + s.w, y: s.y + s.h };
+            const box = findBoxAt(prev, end, s.id);
+            const other = drag.end === "start" ? s.endBinding : s.startBinding;
+            if (box && box.id === other?.id) return s;
+            const key = drag.end === "start" ? "startBinding" : "endBinding";
+            return { ...s, [key]: box ? makeBinding(box, end) : void 0 };
+          })
+        );
+      }
+      updateShapes((prev) => prev.map(normalize), { commit: true });
+    },
+    [getPoint, paths, updateShapes, startTextEditing]
+  );
+  const deleteSelection = useCallback(() => {
+    const ids = selectedRef.current;
+    if (!ids.size) return;
+    setEditingText(null);
+    setSelectedIds(EMPTY_SET);
+    updateShapes(
+      (prev) => prev.filter(
+        (s) => !ids.has(s.id) && !(s.startBinding && ids.has(s.startBinding.id)) && !(s.endBinding && ids.has(s.endBinding.id))
+      ),
+      { commit: true }
+    );
+  }, [updateShapes]);
+  const editingRef = useRef4(editingText);
+  editingRef.current = editingText;
+  useEffect7(() => {
+    const root = rootRef.current;
+    if (!root || !isEditable) return;
+    const onKeyDown = (e) => {
+      if (editingRef.current) return;
+      const ids = selectedRef.current;
+      if ((e.key === "Delete" || e.key === "Backspace") && ids.size) {
+        e.preventDefault();
+        e.stopPropagation();
+        deleteSelection();
+      } else if (e.key === "Enter" && ids.size === 1) {
+        const [id] = ids;
+        const shape = shapesRef.current.find((s) => s.id === id);
+        if (shape) {
+          e.preventDefault();
+          e.stopPropagation();
+          startTextEditing(shape.id, "text");
+        }
+      } else if (e.key === "a" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        e.stopPropagation();
+        setSelectedIds(new Set(shapesRef.current.map((s) => s.id)));
+      } else if (e.key === "Escape") {
+        e.stopPropagation();
+        setSelectedIds(EMPTY_SET);
+        setTool("select");
+      }
+    };
+    root.addEventListener("keydown", onKeyDown);
+    return () => root.removeEventListener("keydown", onKeyDown);
+  }, [isEditable, deleteSelection, startTextEditing]);
+  const applyToSelection = useCallback(
+    (patch) => {
+      const ids = selectedRef.current;
+      if (!ids.size) return;
+      updateShapes((prev) => prev.map((s) => ids.has(s.id) ? patch(s) : s), { commit: true });
+    },
+    [updateShapes]
+  );
+  const applyColor = useCallback(
+    (name) => {
+      const preset = COLOR_PRESETS[name];
+      setStroke(preset.stroke);
+      setFill(preset.fill);
+      applyToSelection(
+        (s) => isBoxType(s.type) ? { ...s, stroke: preset.stroke, fill: preset.fill } : (
+          // Connectors and text have nothing but their stroke to show
+          { ...s, stroke: preset.stroke === "transparent" ? STROKE_COLORS[0] : preset.stroke }
+        )
+      );
+    },
+    [applyToSelection]
+  );
+  const applyRouting = useCallback(
+    (elbow) => applyToSelection(
+      (s) => isConnectorType(s.type) ? { ...s, routing: elbow ? "elbow" : void 0, elbow: void 0, waypoints: void 0 } : s
+    ),
+    [applyToSelection]
+  );
+  const applyDirection = useCallback(
+    (bidirectional) => applyToSelection(
+      (s) => s.type === "arrow" ? { ...s, bidirectional: bidirectional || void 0 } : s
+    ),
+    [applyToSelection]
+  );
+  const applyWidth = useCallback(
+    (next) => {
+      setWidth(next);
+      commit(shapesRef.current, { width: next });
+    },
+    [commit]
+  );
+  const addWaypoint = useCallback(
+    (e, shapeId, segmentIndex, point) => {
+      if (!isEditable || e.button !== 0) return;
+      e.stopPropagation();
+      capture(e);
+      updateShapes(
+        (prev) => prev.map((s) => {
+          if (s.id !== shapeId || !isConnectorType(s.type)) return s;
+          const interior = connectorPoints(s, prev).slice(1, -1);
+          const waypoints = [...interior.slice(0, segmentIndex), point, ...interior.slice(segmentIndex)];
+          return { ...s, waypoints, routing: void 0, elbow: void 0 };
+        })
+      );
+      dragRef.current = { mode: "waypoint", id: shapeId, index: segmentIndex };
+    },
+    [isEditable, updateShapes]
+  );
+  const removeWaypoint = useCallback(
+    (shapeId, index) => {
+      updateShapes(
+        (prev) => prev.map((s) => {
+          if (s.id !== shapeId || !s.waypoints) return s;
+          const waypoints = s.waypoints.filter((_, i) => i !== index);
+          return { ...s, waypoints: waypoints.length ? waypoints : void 0 };
+        }),
+        { commit: true }
+      );
+    },
+    [updateShapes]
+  );
+  const commitText = useCallback(
+    (id, field, value) => {
+      setEditingText(null);
+      rootRef.current?.focus({ preventScroll: true });
+      updateShapes(
+        (prev) => prev.flatMap((s) => {
+          if (s.id !== id) return [s];
+          if (s.type === "text") {
+            return value.trim() === "" ? [] : [{ ...s, text: value, ...textBoxSize(value) }];
+          }
+          return [{ ...s, [field]: value.trim() === "" ? void 0 : value }];
+        }),
+        { commit: true }
+      );
+    },
+    [updateShapes]
+  );
+  const copyMermaid = useCallback(async () => {
+    const payload = { version: 2, canvasHeight: heightRef.current, shapes: shapesRef.current };
+    try {
+      await navigator.clipboard.writeText(drawingToMermaid(payload));
+      return true;
+    } catch {
+      return false;
+    }
+  }, []);
+  const editingShape = shapes.find((s) => s.id === editingText?.id) ?? null;
+  const hoverBox = hoverBoxId ? shapes.find((s) => s.id === hoverBoxId) : null;
+  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(
+    "div",
+    {
+      ref: rootRef,
+      className: `zui-drawing-canvas ${WIDTH_CLASS[width]} ${isEditable ? "is-editable" : ""}`,
+      tabIndex: isEditable ? 0 : void 0,
+      onFocus: () => editor.dispatchCommand(DRAWING_FOCUS_COMMAND, nodeKey),
+      onBlur: (e) => {
+        if (rootRef.current?.contains(e.relatedTarget)) return;
+        editor.dispatchCommand(DRAWING_FOCUS_COMMAND, null);
+      },
+      children: [
+        isEditable && /* @__PURE__ */ jsx9("div", { className: "zui-drawing-toolbar", onPointerDown: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx9(
+          DrawingToolbar,
+          {
+            tool,
+            onToolChange: (t) => {
+              setTool(t);
+              if (t !== "select") setSelectedIds(EMPTY_SET);
+            },
+            width,
+            onWidthChange: applyWidth,
+            onCopyMermaid: copyMermaid,
+            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(
+                PropertyBar,
+                {
+                  selection,
+                  stroke: propStroke,
+                  fill: propFill,
+                  onColor: applyColor,
+                  onRouting: applyRouting,
+                  onDirection: applyDirection,
+                  onDelete: deleteSelection
+                }
+              ) })
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsxs8("div", { className: "zui-drawing-stage", children: [
+          /* @__PURE__ */ jsxs8(
+            "svg",
+            {
+              ref: svgRef,
+              className: "zui-drawing-surface",
+              style: {
+                height: logicalWidth ? void 0 : canvasHeight,
+                width: logicalWidth ?? void 0,
+                maxWidth: "100%",
+                aspectRatio: logicalWidth ? `${logicalWidth} / ${canvasHeight}` : void 0,
+                cursor: canvasCursor
+              },
+              viewBox: logicalWidth ? `0 0 ${logicalWidth} ${canvasHeight}` : void 0,
+              preserveAspectRatio: "xMinYMin meet",
+              onPointerDown: handleBackgroundPointerDown,
+              onPointerMove: handlePointerMove,
+              onPointerUp: handlePointerUp,
+              onPointerCancel: handlePointerUp,
+              onDoubleClick: (e) => {
+                if (!isEditable) return;
+                const target = e.target.closest("[data-shape-id]");
+                const id = target?.getAttribute("data-shape-id");
+                const shape = id ? shapes.find((s) => s.id === id) : null;
+                if (!shape) return;
+                if (shape.type === "text" || isConnectorType(shape.type)) {
+                  startTextEditing(shape.id, "text");
+                } else {
+                  startTextEditing(shape.id, slotAt(shape, getPoint(e).y));
+                }
+              },
+              children: [
+                shapes.map((shape) => /* @__PURE__ */ jsxs8(
+                  "g",
+                  {
+                    "data-shape-id": shape.id,
+                    className: `zui-drawing-shape ${selectedIds.has(shape.id) ? "is-selected" : ""}`,
+                    style: { cursor: isEditable && tool === "select" ? "move" : void 0 },
+                    onPointerDown: (e) => handleShapePointerDown(e, shape),
+                    children: [
+                      /* @__PURE__ */ jsx9(HitArea, { shape, points: paths.get(shape.id) }),
+                      shape.id === editingText?.id && shape.type === "text" ? null : /* @__PURE__ */ jsx9(
+                        ShapeView,
+                        {
+                          shape,
+                          points: paths.get(shape.id),
+                          hideField: shape.id === editingText?.id ? editingText.field : null,
+                          showHints: isEditable && tool === "select" && single?.id === shape.id && shape.id !== editingText?.id
+                        }
+                      )
+                    ]
+                  },
+                  shape.id
+                )),
+                hoverBox && /* @__PURE__ */ jsx9(
+                  "polygon",
+                  {
+                    className: "zui-drawing-selection zui-drawing-bind-target",
+                    points: boxOutline(hoverBox).map((p) => `${p.x},${p.y}`).join(" "),
+                    fill: "currentColor",
+                    fillOpacity: 0.06,
+                    stroke: "currentColor",
+                    strokeWidth: 2,
+                    strokeLinejoin: "round",
+                    pointerEvents: "none"
+                  }
+                ),
+                single && isEditable && !editingText && /* @__PURE__ */ jsx9(
+                  SelectionOverlay,
+                  {
+                    shape: single,
+                    points: paths.get(single.id) ?? [],
+                    onHandlePointerDown: handleHandlePointerDown,
+                    onWaypointAdd: addWaypoint,
+                    onWaypointRemove: removeWaypoint
+                  }
+                ),
+                selection.length > 1 && isEditable && /* @__PURE__ */ jsx9(GroupSelectionOverlay, { shapes: selection, paths }),
+                marquee && /* @__PURE__ */ jsx9(MarqueeOverlay, { rect: marqueeRect(marquee.origin, marquee.current) })
+              ]
+            }
+          ),
+          isEditable && shapes.length === 0 && /* @__PURE__ */ jsx9("div", { className: "zui-drawing-empty", "aria-hidden": "true", children: "Pick a shape above, then click or drag on the canvas" }),
+          editingShape && editingText && /* @__PURE__ */ jsx9(
+            "div",
+            {
+              className: "zui-drawing-overlay",
+              style: {
+                transform: `scale(${scale})`,
+                width: logicalWidth ?? void 0,
+                height: logicalWidth ? canvasHeight : void 0
+              },
+              children: /* @__PURE__ */ jsx9(
+                TextEditOverlay,
+                {
+                  shape: editingShape,
+                  field: editingText.field,
+                  points: paths.get(editingShape.id),
+                  onCommit: commitText
+                },
+                `${editingShape.id}:${editingText.field}`
+              )
+            }
+          ),
+          isEditable && /* @__PURE__ */ jsx9(
+            HeightHandle,
+            {
+              height: canvasHeight,
+              scale,
+              onChange: setCanvasHeight,
+              onCommit: (h) => commit(shapesRef.current, { height: h })
+            }
+          )
+        ] })
+      ]
+    }
+  );
 }
-var COLOR_SCHEMA = {
-  enum: COLOR_NAMES,
-  description: "Named color preset. Sets the stroke (outline + text) and, for boxes, a matching pastel fill. Omit for the default gray on transparent"
-};
-var END_SCHEMA = {
-  oneOf: [
-    {
-      type: "string",
-      description: "Id of a box. The connector attaches to its outline, aimed at the other end"
-    },
+function HeightHandle({
+  height,
+  scale,
+  onChange,
+  onCommit
+}) {
+  const dragRef = useRef4(null);
+  const latestRef = useRef4(height);
+  latestRef.current = height;
+  const clamp = (h) => Math.round(Math.min(MAX_HEIGHT, Math.max(MIN_HEIGHT, h)));
+  return /* @__PURE__ */ jsx9(
+    "div",
     {
-      type: "object",
-      required: ["id"],
-      additionalProperties: false,
-      properties: {
-        id: { type: "string", description: "Id of a box" },
-        side: {
-          enum: ["top", "right", "bottom", "left"],
-          description: "Pin the endpoint to the middle of this side of the box instead of auto-aiming"
-        }
-      }
-    }
-  ],
-  description: "Box a connector end attaches to: a bare box id, or {id, side} to pick the attach edge"
-};
-var DRAWING_SKELETON_JSON_SCHEMA = {
-  $schema: "http://json-schema.org/draft-07/schema#",
-  title: "DrawingSkeleton",
-  description: "Compact intent description of a diagram. Boxes are sized from their text and laid out automatically along the connector flow; connectors are drawn between box outlines. Only say what is on the canvas \u2014 geometry is derived",
-  type: "object",
-  required: ["boxes"],
-  additionalProperties: false,
-  properties: {
-    direction: {
-      enum: ["right", "down"],
-      description: 'Auto-layout flow direction. Boxes connected a\u2192b are placed in successive ranks along this axis ("right" = columns left to right, "down" = rows top to bottom). Default "right"'
-    },
-    canvasWidth: {
-      type: "number",
-      minimum: 120,
-      description: "Logical canvas width in px. Omit for a fluid canvas in CSS pixels"
-    },
-    canvasHeight: {
-      type: "number",
-      minimum: 80,
-      description: "Canvas height in px. Omit to fit the content"
-    },
-    width: {
-      enum: ["full", "text", "content"],
-      description: 'Block width: "text" aligns the drawing with the text column (same as "full" unless the app sets a text measure); "content" fits the drawing to its shapes and left-aligns it with the text; omit to span the editor'
-    },
-    boxes: {
-      type: "array",
-      items: { $ref: "#/definitions/box" },
-      description: "Card-like shapes carrying up to three text slots. Order is the render order and the stacking order within a layout rank"
-    },
-    connectors: {
-      type: "array",
-      items: { $ref: "#/definitions/connector" },
-      description: "Arrows and lines between boxes. Connectors whose from/to id does not match a box are dropped"
-    },
-    texts: {
-      type: "array",
-      items: { $ref: "#/definitions/text" },
-      description: "Free-floating annotations not attached to any box. Prefer box slots (label/text/footer) when the text belongs to a box"
-    }
-  },
-  definitions: {
-    box: {
-      type: "object",
-      required: ["id"],
-      additionalProperties: false,
-      properties: {
-        id: { type: "string", description: "Unique within the drawing; connectors reference it" },
-        type: {
-          enum: BOX_TYPES,
-          description: 'Shape: rect (default), ellipse, diamond (decision), note (sticky note, yellow by default), cylinder (database), cloud (external system), queue (message queue), actor (stick figure; only the "text" slot renders, below the figure)'
-        },
-        label: { type: "string", description: "Small bold heading at the top of the box" },
-        text: {
-          type: "string",
-          description: 'Main content, centered. Wraps automatically; "\\n" forces a line break'
-        },
-        footer: { type: "string", description: "Small dim line at the bottom of the box" },
-        x: { type: "number", description: "Top-left x in px. Omit (with y) to let the layout place the box" },
-        y: { type: "number", description: "Top-left y in px. Omit (with x) to let the layout place the box" },
-        w: {
-          type: "number",
-          exclusiveMinimum: 0,
-          description: "Width in px. Omit to size from the text (never smaller than the type default)"
-        },
-        h: {
-          type: "number",
-          exclusiveMinimum: 0,
-          description: "Height in px. Omit to size from the text (never smaller than the type default)"
-        },
-        color: COLOR_SCHEMA,
-        stroke: { type: "string", description: "CSS color of the outline and text; overrides the preset" },
-        fill: {
-          type: "string",
-          description: 'CSS color of the interior ("transparent" for none); overrides the preset'
-        }
-      }
-    },
-    connector: {
-      type: "object",
-      required: ["from", "to"],
-      additionalProperties: false,
-      properties: {
-        id: { type: "string", description: "Optional; generated when omitted" },
-        type: {
-          enum: CONNECTOR_TYPES,
-          description: 'arrow (default; arrowhead at "to") or line (no arrowheads)'
-        },
-        from: END_SCHEMA,
-        to: END_SCHEMA,
-        text: { type: "string", description: "Label rendered at the middle of the connector" },
-        bidirectional: {
-          type: "boolean",
-          description: "Arrow only: arrowheads on both ends"
-        },
-        routing: {
-          enum: ["straight", "elbow"],
-          description: "straight (default) draws a direct line; elbow draws a right-angled path routed around the boxes"
-        },
-        color: COLOR_SCHEMA,
-        stroke: { type: "string", description: "CSS color of the line and label; overrides the preset" }
-      }
-    },
-    text: {
-      type: "object",
-      required: ["x", "y", "text"],
-      additionalProperties: false,
-      properties: {
-        id: { type: "string", description: "Optional; generated when omitted" },
-        x: { type: "number", description: "Top-left x of the first line, in px" },
-        y: { type: "number", description: "Top-left y of the first line, in px" },
-        text: { type: "string", description: 'Content; "\\n" forces a line break' },
-        color: COLOR_SCHEMA,
-        stroke: { type: "string", description: "CSS color of the text; overrides the preset" }
-      }
+      className: "zui-drawing-resize",
+      title: "Drag to resize the canvas",
+      role: "separator",
+      "aria-orientation": "horizontal",
+      onPointerDown: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        e.currentTarget.setPointerCapture(e.pointerId);
+        dragRef.current = { startY: e.clientY, orig: height };
+      },
+      onPointerMove: (e) => {
+        const drag = dragRef.current;
+        if (!drag) return;
+        onChange(clamp(drag.orig + (e.clientY - drag.startY) / Math.max(scale, 0.05)));
+      },
+      onPointerUp: () => {
+        if (!dragRef.current) return;
+        dragRef.current = null;
+        onCommit(latestRef.current);
+      },
+      children: /* @__PURE__ */ jsx9(Icon, { size: 14, children: UI_ICONS.grip })
     }
-  }
-};
+  );
+}
 
 // src/nodes/DrawingNode.tsx
 import { jsx as jsx10 } from "react/jsx-runtime";
@@ -4726,24 +4733,7 @@ function HistoryButtons() {
 }
 
 // src/plugins/TableSettingsPlugin.tsx
-import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
-var DENSITY_OPTIONS = [
-  {
-    density: "compact",
-    label: "Compact rows",
-    icon: /* @__PURE__ */ jsx14("path", { d: "M3 4.5h14M3 8.17h14M3 11.83h14M3 15.5h14" })
-  },
-  {
-    density: "comfortable",
-    label: "Comfortable rows",
-    icon: /* @__PURE__ */ jsx14("path", { d: "M3 4.5h14M3 10h14M3 15.5h14" })
-  },
-  {
-    density: "spacious",
-    label: "Spacious rows",
-    icon: /* @__PURE__ */ jsx14("path", { d: "M3 5h14M3 15h14" })
-  }
-];
+import { jsx as jsx14 } from "react/jsx-runtime";
 function Icon3({ children }) {
   return /* @__PURE__ */ jsx14(
     "svg",
@@ -4806,42 +4796,29 @@ function TableSettingsPlugin() {
     [editor]
   );
   if (!isEditable || !anchor || !settings) return null;
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsx14(
     "div",
     {
       className: "zui-table-settings",
       role: "toolbar",
       "aria-label": "Table settings",
       style: { top: anchor.top, right: anchor.right },
-      children: [
-        BLOCK_WIDTH_OPTIONS.map(({ width, label, icon }) => /* @__PURE__ */ jsx14(
-          ToolbarButton,
-          {
-            label,
-            active: settings.width === width,
-            onClick: () => update({ width }),
-            children: /* @__PURE__ */ jsx14(Icon3, { children: icon })
-          },
-          width
-        )),
-        /* @__PURE__ */ jsx14(ToolbarDivider, {}),
-        DENSITY_OPTIONS.map(({ density, label, icon }) => /* @__PURE__ */ jsx14(
-          ToolbarButton,
-          {
-            label,
-            active: settings.density === density,
-            onClick: () => update({ density }),
-            children: /* @__PURE__ */ jsx14(Icon3, { children: icon })
-          },
-          density
-        ))
-      ]
+      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
+      ))
     }
   );
 }
 
 // src/EditorContent.tsx
-import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
 function EditorContent({
   placeholder = "Start writing...",
   foldable = true,
@@ -4862,8 +4839,8 @@ function EditorContent({
       }
     );
   }
-  return /* @__PURE__ */ jsxs12("div", { className: "zui-text-editor-body", children: [
-    /* @__PURE__ */ jsxs12("div", { className: "zui-text-editor-main", children: [
+  return /* @__PURE__ */ jsxs11("div", { className: "zui-text-editor-body", children: [
+    /* @__PURE__ */ jsxs11("div", { className: "zui-text-editor-main", children: [
       /* @__PURE__ */ jsx15(
         RichTextPlugin,
         {
@@ -4891,7 +4868,7 @@ import { useLexicalComposerContext as useLexicalComposerContext10 } from "@lexic
 import {
   TableOfContentsPlugin
 } from "@lexical/react/LexicalTableOfContentsPlugin";
-import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
 var INDENT_PER_LEVEL = {
   h1: 0,
   h2: 1,
@@ -4947,7 +4924,7 @@ function OutlinePlugin() {
     for (const [key] of entries) {
       editor.getElementByKey(key)?.setAttribute("data-outline-key", key);
     }
-    return /* @__PURE__ */ jsxs13(
+    return /* @__PURE__ */ jsxs12(
       "div",
       {
         className: `zui-text-editor-outline ${collapsed ? "is-collapsed" : ""}`,
@@ -4976,7 +4953,7 @@ function OutlinePlugin() {
               )
             }
           ),
-          !collapsed && /* @__PURE__ */ jsxs13("nav", { className: "zui-text-editor-outline-list", "aria-label": "Table of contents", children: [
+          !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(
               "button",
@@ -4999,7 +4976,7 @@ function OutlinePlugin() {
 }
 
 // src/MarkdownEditor.tsx
-import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
 var DEFAULT_ITEMS = {
   format: /* @__PURE__ */ jsx17(FormatButtons, {}),
   insert: /* @__PURE__ */ jsx17(InsertButtons, {}),
@@ -5020,7 +4997,7 @@ function MarkdownEditor({
   foldable = true,
   ...rootProps
 }) {
-  return /* @__PURE__ */ jsxs14(EditorRoot, { ...rootProps, children: [
+  return /* @__PURE__ */ jsxs13(EditorRoot, { ...rootProps, children: [
     toolbar === true && /* @__PURE__ */ jsx17(EditorToolbar, {}),
     typeof toolbar === "function" && toolbar(DEFAULT_ITEMS),
     /* @__PURE__ */ jsx17(EditorContent, { placeholder, foldable, children: outline && /* @__PURE__ */ jsx17(OutlinePlugin, {}) })