@ngroznykh/papirus 0.5.9 → 0.6.0

package/dist/papirus.js

@@ -2903,15 +2903,15 @@ class TextLabel {
     this.applyStyle(ctx);
     const lineHeight = (this._style.fontSize ?? 14) * 1.2;
     const effectiveMaxWidth = this._maxWidth ?? this._autoMaxWidth;
-    const text = this._text ?? "";
+    const text2 = this._text ?? "";
     if (effectiveMaxWidth !== void 0) {
       const maxWidth = Math.max(
         0,
         effectiveMaxWidth - this._inset.left - this._inset.right
       );
-      this._lines = this.wrapText(ctx, text, maxWidth);
+      this._lines = this.wrapText(ctx, text2, maxWidth);
     } else {
-      this._lines = text.split("\n");
+      this._lines = text2.split("\n");
     }
     let maxLineWidth = 0;
     for (const line of this._lines) {
@@ -3005,9 +3005,9 @@ class TextLabel {
     ctx.textAlign = this._style.align ?? "center";
     ctx.textBaseline = this._style.baseline ?? "middle";
   }
-  wrapText(ctx, text, maxWidth) {
+  wrapText(ctx, text2, maxWidth) {
     const lines = [];
-    const paragraphs = text.split("\n");
+    const paragraphs = text2.split("\n");
     for (const paragraph of paragraphs) {
       const words = paragraph.split(" ");
       let currentLine = "";
@@ -4239,6 +4239,8 @@ class Edge extends Element {
     this._pathStrategy = this.getPathStrategy(this._type);
     this._lockAnchors = options.lockAnchors ?? true;
     this._labelOffset = options.labelOffset ?? 0;
+    this._labelPosition = options.labelPosition ?? 0.5;
+    this._labelFollowPath = options.labelFollowPath ?? false;
     this._labelBackground = options.labelBackground;
     this._labelLineGap = options.labelLineGap ?? false;
     if (options.label !== void 0) {
@@ -4332,6 +4334,31 @@ class Edge extends Element {
       this.markDirty();
     }
   }
+  /**
+   * Position along path (0 = source, 0.5 = midpoint, 1 = target)
+   */
+  get labelPosition() {
+    return this._labelPosition;
+  }
+  set labelPosition(value) {
+    const clamped = Math.max(0, Math.min(1, value));
+    if (this._labelPosition !== clamped) {
+      this._labelPosition = clamped;
+      this.markDirty();
+    }
+  }
+  /**
+   * Whether label text rotates to follow the path tangent
+   */
+  get labelFollowPath() {
+    return this._labelFollowPath;
+  }
+  set labelFollowPath(value) {
+    if (this._labelFollowPath !== value) {
+      this._labelFollowPath = value;
+      this.markDirty();
+    }
+  }
   /**
    * Label background configuration
    */
@@ -4767,11 +4794,20 @@ class Edge extends Element {
     }
     const labelWidth = this._label.measuredWidth;
     const labelHeight = this._label.measuredHeight;
+    const rot = this.getLabelRotation();
+    let effectiveWidth = labelWidth;
+    let effectiveHeight = labelHeight;
+    if (rot !== 0) {
+      const cosR = Math.abs(Math.cos(rot));
+      const sinR = Math.abs(Math.sin(rot));
+      effectiveWidth = labelWidth * cosR + labelHeight * sinR;
+      effectiveHeight = labelWidth * sinR + labelHeight * cosR;
+    }
     const labelRect = {
-      x: labelCenter.x - labelWidth / 2,
-      y: labelCenter.y - labelHeight / 2,
-      width: labelWidth,
-      height: labelHeight
+      x: labelCenter.x - effectiveWidth / 2,
+      y: labelCenter.y - effectiveHeight / 2,
+      width: effectiveWidth,
+      height: effectiveHeight
     };
     const segmentIntersections = [];
     for (let i = 0; i < polyline.length - 1; i++) {
@@ -5045,10 +5081,12 @@ class Edge extends Element {
     if (this._label === void 0 || this._path.length < 2) {
       return;
     }
-    const midpoint = this.getPathMidpoint();
-    const labelPosition = {
-      x: midpoint.x,
-      y: midpoint.y + this._labelOffset
+    const { point, angle: pathAngle } = this.getPathPointAt(this._labelPosition);
+    const rotation = this.getLabelRotation();
+    const perpAngle = this._labelFollowPath ? pathAngle + Math.PI / 2 : Math.PI / 2;
+    const labelCenter = {
+      x: point.x + this._labelOffset * Math.cos(perpAngle),
+      y: point.y + this._labelOffset * Math.sin(perpAngle)
     };
     const labelOpacity = this._label.style.opacity ?? 1;
     this._label.measure(ctx);
@@ -5057,29 +5095,39 @@ class Edge extends Element {
     const bgColor = this._labelBackground?.color ?? "#ffffff";
     const bgOpacity = this._labelBackground?.opacity ?? 1;
     const bgRadius = this._labelBackground?.borderRadius ?? EDGE_LABEL_BACKGROUND_RADIUS;
-    const bgX = labelPosition.x - labelWidth / 2;
-    const bgY = labelPosition.y - labelHeight / 2;
-    const bgWidth = labelWidth;
-    const bgHeight = labelHeight;
+    ctx.save();
+    if (rotation !== 0) {
+      ctx.translate(labelCenter.x, labelCenter.y);
+      ctx.rotate(rotation);
+      ctx.translate(-labelCenter.x, -labelCenter.y);
+    }
+    const bgX = labelCenter.x - labelWidth / 2;
+    const bgY = labelCenter.y - labelHeight / 2;
     ctx.fillStyle = bgColor;
     ctx.globalAlpha = bgOpacity;
     if (bgRadius > 0) {
-      this.drawRoundedRect(ctx, bgX, bgY, bgWidth, bgHeight, bgRadius);
+      this.drawRoundedRect(ctx, bgX, bgY, labelWidth, labelHeight, bgRadius);
       ctx.fill();
     } else {
-      ctx.fillRect(bgX, bgY, bgWidth, bgHeight);
+      ctx.fillRect(bgX, bgY, labelWidth, labelHeight);
     }
     ctx.globalAlpha = labelOpacity;
-    this._label.renderAt(ctx, labelPosition);
+    this._label.renderAt(ctx, labelCenter);
     ctx.globalAlpha = 1;
+    ctx.restore();
   }
   drawRoundedRect(ctx, x, y, width, height, radius) {
     drawRoundedRectPath(ctx, x, y, width, height, radius);
   }
-  getPathMidpoint() {
+  /**
+   * Get a point along the sampled path at parameter t (0..1).
+   * Also returns the tangent angle in radians at that point.
+   */
+  getPathPointAt(t) {
     const path = this._path;
+    let samples;
     if (this._type === "bezier" && path.length >= 4) {
-      const samples = [];
+      samples = [];
       const steps = 20;
       for (let i = 1; i + 2 < path.length; i += 3) {
         const p0 = path[i - 1];
@@ -5087,16 +5135,15 @@ class Edge extends Element {
         const p2 = path[i + 1];
         const p3 = path[i + 2];
         for (let s = 0; s <= steps; s++) {
-          const t = s / steps;
-          if (samples.length > 0 && t === 0) {
-            continue;
-          }
-          samples.push(bezierPoint(p0, p1, p2, p3, t));
+          const st = s / steps;
+          if (samples.length > 0 && st === 0) continue;
+          samples.push(bezierPoint(p0, p1, p2, p3, st));
         }
       }
-      return this.getPolylineMidpoint(samples);
+    } else {
+      samples = path;
     }
-    return this.getPolylineMidpoint(path);
+    return this.getPointAlongPolyline(samples, t);
   }
   /**
    * Get world position of label center along path.
@@ -5105,18 +5152,33 @@ class Edge extends Element {
     if (this._path.length < 2) {
       return null;
     }
-    const midpoint = this.getPathMidpoint();
+    const { point, angle: pathAngle } = this.getPathPointAt(this._labelPosition);
+    const perpAngle = this._labelFollowPath ? pathAngle + Math.PI / 2 : Math.PI / 2;
     return {
-      x: midpoint.x,
-      y: midpoint.y + this._labelOffset
+      x: point.x + this._labelOffset * Math.cos(perpAngle),
+      y: point.y + this._labelOffset * Math.sin(perpAngle)
     };
   }
-  getPolylineMidpoint(path) {
+  /**
+   * Get label rotation angle in radians (if labelFollowPath is true).
+   */
+  getLabelRotation() {
+    if (!this._labelFollowPath || this._path.length < 2) return 0;
+    const { angle: angle2 } = this.getPathPointAt(this._labelPosition);
+    let a = angle2;
+    if (a > Math.PI / 2) a -= Math.PI;
+    if (a < -Math.PI / 2) a += Math.PI;
+    return a;
+  }
+  /**
+   * Get point and tangent angle at parameter t along a polyline.
+   */
+  getPointAlongPolyline(path, t) {
     if (path.length === 0) {
-      return { x: 0, y: 0 };
+      return { point: { x: 0, y: 0 }, angle: 0 };
     }
     if (path.length === 1) {
-      return path[0];
+      return { point: path[0], angle: 0 };
     }
     let totalLength = 0;
     const segments = [];
@@ -5127,19 +5189,28 @@ class Edge extends Element {
       segments.push({ start, end, length });
       totalLength += length;
     }
-    const halfLength = totalLength / 2;
+    const targetLength = totalLength * Math.max(0, Math.min(1, t));
     let accumulated = 0;
     for (const seg of segments) {
-      if (accumulated + seg.length >= halfLength) {
-        const t = (halfLength - accumulated) / seg.length;
-        return {
-          x: seg.start.x + t * (seg.end.x - seg.start.x),
-          y: seg.start.y + t * (seg.end.y - seg.start.y)
+      if (accumulated + seg.length >= targetLength) {
+        const segT = seg.length > 0 ? (targetLength - accumulated) / seg.length : 0;
+        const point = {
+          x: seg.start.x + segT * (seg.end.x - seg.start.x),
+          y: seg.start.y + segT * (seg.end.y - seg.start.y)
         };
+        const angle2 = Math.atan2(seg.end.y - seg.start.y, seg.end.x - seg.start.x);
+        return { point, angle: angle2 };
       }
       accumulated += seg.length;
     }
-    return path[0];
+    const lastSeg = segments[segments.length - 1];
+    return {
+      point: lastSeg.end,
+      angle: Math.atan2(
+        lastSeg.end.y - lastSeg.start.y,
+        lastSeg.end.x - lastSeg.start.x
+      )
+    };
   }
   getPathStrategy(type) {
     switch (type) {
@@ -5187,10 +5258,10 @@ class LabelEditor {
   /**
    * Start editing a label
    */
-  start(kind, id, text, worldPosition, worldToScreen, onCommit) {
+  start(kind, id, text2, worldPosition, worldToScreen, onCommit) {
     this.finish(true);
     const screenPoint = worldToScreen(worldPosition.x, worldPosition.y);
-    const textarea = this.createTextarea(text, screenPoint);
+    const textarea = this.createTextarea(text2, screenPoint);
     const { cleanup } = this.setupEventHandlers(textarea, onCommit);
     document.body.appendChild(textarea);
     textarea.focus();
@@ -5214,9 +5285,9 @@ class LabelEditor {
       onCommit(kind, id, value);
     }
   }
-  createTextarea(text, screenPoint) {
+  createTextarea(text2, screenPoint) {
     const textarea = document.createElement("textarea");
-    textarea.value = text;
+    textarea.value = text2;
     textarea.rows = 1;
     textarea.spellcheck = false;
     textarea.setAttribute("aria-label", "Edit label");
@@ -5715,6 +5786,24 @@ class InteractionManager {
       return;
     }
     this.selectionManager.handleClick(event);
+    this.emitComponentClick(event);
+  }
+  emitComponentClick(event) {
+    const point = { x: event.worldX, y: event.worldY };
+    const hitElement = this.renderer.getInteractableElementAtPoint(point, event.screenX, event.screenY);
+    if (!hitElement || !("typeName" in hitElement)) return;
+    const node = hitElement;
+    if (node.typeName !== "composite") return;
+    const compositeNode = node;
+    const component = compositeNode.getComponentAtPoint(point);
+    if (!component) return;
+    if (component.id !== void 0) {
+      this.renderer.emit("componentClick", node.id, component, point);
+    }
+    const asAny = component;
+    if (typeof asAny["onClick"] === "function") {
+      asAny["onClick"](component);
+    }
   }
   handleDoubleClick(event) {
     if (this.renderer.blocksDiagramPointerAtScreen(event.screenX, event.screenY)) {
@@ -5742,6 +5831,10 @@ class InteractionManager {
       return;
     }
     if ("typeName" in hitElement) {
+      if (hitElement.typeName === "composite") {
+        this.startCompositeNameEdit(hitElement);
+        return;
+      }
       const editText = hitElement.label?.editableText ?? hitElement.label?.text ?? "";
       this.startLabelEdit("node", hitElement.id, editText, hitElement.getLabelPosition());
       return;
@@ -5851,16 +5944,66 @@ class InteractionManager {
         return false;
     }
   }
-  startLabelEdit(kind, id, text, worldPosition) {
+  startLabelEdit(kind, id, text2, worldPosition) {
     this.labelEditor.start(
       kind,
       id,
-      text,
+      text2,
       worldPosition,
       (x, y) => this.renderer.worldToScreen(x, y),
       (k, i, value) => this.handleLabelCommit(k, i, value)
     );
   }
+  startCompositeNameEdit(node) {
+    const nameText = this.findNameComponent(node.content);
+    if (!nameText) return;
+    const currentText = nameText.text;
+    const worldPos = node.getLabelPosition();
+    this.labelEditor.start(
+      "node",
+      node.id,
+      currentText,
+      worldPos,
+      (x, y) => this.renderer.worldToScreen(x, y),
+      (_kind, _id, value) => {
+        const trimmed = value.trim();
+        if (trimmed.length > 0 && trimmed !== currentText) {
+          const before = currentText;
+          nameText.text = trimmed;
+          this.historyManager.execute({
+            execute: () => {
+              nameText.text = trimmed;
+            },
+            undo: () => {
+              nameText.text = before;
+            }
+          });
+        }
+      }
+    );
+  }
+  findNameComponent(container2) {
+    for (const child of container2.children) {
+      if (child.type === "text") {
+        const ctext = child;
+        if (ctext.role === "name") return ctext;
+      }
+      if (child.type === "container") {
+        const found = this.findNameComponent(
+          child
+        );
+        if (found) return found;
+      }
+      if (child.type === "shape") {
+        const content = child.content;
+        if (content) {
+          const found = this.findNameComponent(content);
+          if (found) return found;
+        }
+      }
+    }
+    return null;
+  }
   handleLabelCommit(kind, id, nextValue) {
     if (kind === "node") {
       this.changeNodeProperties(id, (node) => {
@@ -6395,20 +6538,20 @@ class ContextMenuManager extends EventEmitter {
     }
   }
   buildMenu(items, target) {
-    const container = document.createElement("div");
-    container.style.position = "fixed";
-    container.style.zIndex = "10000";
-    container.style.background = "#ffffff";
-    container.style.border = "1px solid #e5e7eb";
-    container.style.borderRadius = "8px";
-    container.style.padding = "6px";
-    container.style.boxShadow = "0 8px 20px rgba(15, 23, 42, 0.18)";
-    container.style.fontFamily = "system-ui, -apple-system, Segoe UI, sans-serif";
-    container.style.fontSize = "14px";
-    container.style.color = "#0f172a";
+    const container2 = document.createElement("div");
+    container2.style.position = "fixed";
+    container2.style.zIndex = "10000";
+    container2.style.background = "#ffffff";
+    container2.style.border = "1px solid #e5e7eb";
+    container2.style.borderRadius = "8px";
+    container2.style.padding = "6px";
+    container2.style.boxShadow = "0 8px 20px rgba(15, 23, 42, 0.18)";
+    container2.style.fontFamily = "system-ui, -apple-system, Segoe UI, sans-serif";
+    container2.style.fontSize = "14px";
+    container2.style.color = "#0f172a";
     const list = this.buildList(items, target);
-    container.appendChild(list);
-    return container;
+    container2.appendChild(list);
+    return container2;
   }
   buildList(items, target) {
     const list = document.createElement("ul");
@@ -6510,7 +6653,7 @@ class ContextMenuManager extends EventEmitter {
     }
     return list;
   }
-  createIconElement(icon) {
+  createIconElement(icon2) {
     const iconEl = document.createElement("span");
     iconEl.style.width = "16px";
     iconEl.style.height = "16px";
@@ -6519,16 +6662,16 @@ class ContextMenuManager extends EventEmitter {
     iconEl.style.justifyContent = "center";
     iconEl.style.textAlign = "center";
     iconEl.style.flexShrink = "0";
-    if (!icon) {
+    if (!icon2) {
       iconEl.textContent = "";
       return iconEl;
     }
-    if (typeof icon === "string") {
-      if (this.isSvgString(icon)) {
-        iconEl.innerHTML = icon;
+    if (typeof icon2 === "string") {
+      if (this.isSvgString(icon2)) {
+        iconEl.innerHTML = icon2;
       } else if (this.options.iconToUrl) {
         const img = document.createElement("img");
-        img.src = this.options.iconToUrl(icon);
+        img.src = this.options.iconToUrl(icon2);
         img.alt = "";
         img.style.width = "16px";
         img.style.height = "16px";
@@ -6537,15 +6680,15 @@ class ContextMenuManager extends EventEmitter {
       } else {
         iconEl.classList.add("material-symbols-outlined");
         iconEl.style.fontSize = "16px";
-        iconEl.textContent = icon;
+        iconEl.textContent = icon2;
       }
       return iconEl;
     }
-    if (icon.type === "svg" || icon.type === "html") {
-      iconEl.innerHTML = icon.value;
+    if (icon2.type === "svg" || icon2.type === "html") {
+      iconEl.innerHTML = icon2.value;
     } else if (this.options.iconToUrl) {
       const img = document.createElement("img");
-      img.src = this.options.iconToUrl(icon.value);
+      img.src = this.options.iconToUrl(icon2.value);
       img.alt = "";
       img.style.width = "16px";
       img.style.height = "16px";
@@ -6554,7 +6697,7 @@ class ContextMenuManager extends EventEmitter {
     } else {
       iconEl.classList.add("material-symbols-outlined");
       iconEl.style.fontSize = "16px";
-      iconEl.textContent = icon.value;
+      iconEl.textContent = icon2.value;
     }
     return iconEl;
   }
@@ -8435,10 +8578,6 @@ class LRUCache {
     return this.maxSize;
   }
 }
-function isCornerPlacement(placement) {
-  return placement === "top-left" || placement === "top-right" || placement === "bottom-left" || placement === "bottom-right";
-}
-const svgTextCache = new LRUCache(100);
 function styleSetColor(style, key, color) {
   const hasKey = new RegExp(`${key}\\s*:`).test(style);
   if (hasKey) {
@@ -8489,6 +8628,18 @@ function svgToDataUrl(svg) {
   const encoded = encodeURIComponent(svg).replace(/%0A/g, "").replace(/%0D/g, "").replace(/%09/g, " ").replace(/%20/g, " ");
   return `data:image/svg+xml;utf8,${encoded}`;
 }
+function isSvgUrl(url) {
+  try {
+    const path = new URL(url, "http://localhost").pathname;
+    return path.endsWith(".svg");
+  } catch {
+    return url.endsWith(".svg");
+  }
+}
+function isCornerPlacement(placement) {
+  return placement === "top-left" || placement === "top-right" || placement === "bottom-left" || placement === "bottom-right";
+}
+const svgTextCache = new LRUCache(100);
 class NodeImage {
   constructor(options, onChange) {
     this._loaded = false;
@@ -10349,181 +10500,1603 @@ const ShapeFactories = {
     }
   }
 };
-const DEFAULT_THEME = {
-  name: "default",
-  colors: {
-    background: "#ffffff",
-    grid: "#e5e5e5",
-    selection: "rgba(59, 130, 246, 0.1)",
-    connectionPreview: "#3b82f6"
-  },
-  node: {
-    default: {
-      fillColor: "#ffffff",
-      strokeColor: "#333333",
-      strokeWidth: 2,
-      opacity: 1,
-      cornerRadius: 4
-    },
-    hover: {
-      fillColor: "#f5f5f5",
-      strokeColor: "#6366f1",
-      strokeWidth: 2,
-      opacity: 1,
-      cornerRadius: 4
-    },
-    selected: {
-      strokeColor: "#3b82f6",
-      strokeWidth: 2,
-      opacity: 1
-    },
-    dragging: {
-      strokeColor: "#333333",
-      strokeWidth: 2,
-      opacity: 0.8
-    }
-  },
-  edge: {
-    default: {
-      strokeColor: "#666666",
-      strokeWidth: 2,
-      opacity: 1
-    },
-    hover: {
-      strokeColor: "#6366f1",
-      strokeWidth: 2,
-      opacity: 1
-    },
-    selected: {
-      strokeColor: "#3b82f6",
-      strokeWidth: 3,
-      opacity: 1
-    }
-  },
-  text: {
-    font: "14px sans-serif",
-    fontSize: 14,
-    fontFamily: "sans-serif",
-    fontWeight: "normal",
-    color: "#333333",
-    align: "center",
-    baseline: "middle"
-  },
-  port: {
-    default: { color: "#666666", radius: 6 },
-    hover: { color: "#3b82f6", radius: 7 }
-  },
-  group: {
-    default: {
-      fillColor: "rgba(200, 200, 200, 0.2)",
-      strokeColor: "#999999",
-      strokeWidth: 1,
-      opacity: 1
-    },
-    selected: {
-      fillColor: "rgba(59, 130, 246, 0.1)",
-      strokeColor: "#3b82f6",
-      strokeWidth: 2,
-      opacity: 1
+const DEFAULT_FONT_FAMILY = "sans-serif";
+const DEFAULT_FONT_SIZE = 14;
+const DEFAULT_LINE_HEIGHT = 1.2;
+const DEFAULT_COLOR$1 = "#000000";
+class CText {
+  constructor(options) {
+    this.type = "text";
+    this._cachedLines = null;
+    this.id = options.id;
+    this._text = options.text;
+    this._fontFamily = options.fontFamily ?? DEFAULT_FONT_FAMILY;
+    this._fontWeight = options.fontWeight ?? "normal";
+    this._fontStyle = options.fontStyle ?? "normal";
+    this._fontSize = options.fontSize ?? DEFAULT_FONT_SIZE;
+    this._color = options.color ?? DEFAULT_COLOR$1;
+    this._align = options.align ?? "center";
+    this._verticalAlign = options.verticalAlign ?? "middle";
+    this._maxLines = options.maxLines;
+    this._lineHeight = options.lineHeight ?? DEFAULT_LINE_HEIGHT;
+    this._role = options.role;
+    this._rotation = options.rotation ?? 0;
+    this.style = options.style ?? {};
+  }
+  // --- Property accessors with dirty notification ---
+  get text() {
+    return this._text;
+  }
+  set text(value) {
+    if (this._text !== value) {
+      this._text = value;
+      this._cachedLines = null;
+      this._onChange?.();
     }
   }
-};
-const DARK_THEME = {
-  name: "dark",
-  colors: {
-    background: "#1a1a1a",
-    grid: "#333333",
-    selection: "rgba(99, 102, 241, 0.2)",
-    connectionPreview: "#6366f1"
-  },
-  node: {
-    default: {
-      fillColor: "#2d2d2d",
-      strokeColor: "#555555",
-      strokeWidth: 2,
-      opacity: 1,
-      cornerRadius: 4
-    },
-    hover: {
-      fillColor: "#3d3d3d",
-      strokeColor: "#6366f1",
-      strokeWidth: 2,
-      opacity: 1,
-      cornerRadius: 4
-    },
-    selected: {
-      fillColor: "#2d2d2d",
-      strokeColor: "#555555",
-      strokeWidth: 2,
-      opacity: 1,
-      cornerRadius: 4
-    },
-    dragging: {
-      fillColor: "#404040",
-      strokeColor: "#555555",
-      strokeWidth: 2,
-      opacity: 0.8,
-      cornerRadius: 4
+  get fontFamily() {
+    return this._fontFamily;
+  }
+  set fontFamily(value) {
+    if (this._fontFamily !== value) {
+      this._fontFamily = value;
+      this._onChange?.();
     }
-  },
-  edge: {
-    default: {
-      strokeColor: "#888888",
-      strokeWidth: 2,
-      opacity: 1
-    },
-    hover: {
-      strokeColor: "#6366f1",
-      strokeWidth: 2,
-      opacity: 1
-    },
-    selected: {
-      strokeColor: "#818cf8",
-      strokeWidth: 3,
-      opacity: 1
+  }
+  get fontWeight() {
+    return this._fontWeight;
+  }
+  set fontWeight(value) {
+    if (this._fontWeight !== value) {
+      this._fontWeight = value;
+      this._onChange?.();
     }
-  },
-  text: {
-    font: "14px sans-serif",
-    fontSize: 14,
-    fontFamily: "sans-serif",
-    fontWeight: "normal",
-    color: "#e0e0e0",
-    align: "center",
-    baseline: "middle"
-  },
-  port: {
-    default: { color: "#888888", radius: 6 },
-    hover: { color: "#6366f1", radius: 7 }
-  },
-  group: {
-    default: {
-      fillColor: "rgba(100, 100, 100, 0.2)",
-      strokeColor: "#666666",
-      strokeWidth: 1,
-      opacity: 1
-    },
-    selected: {
-      fillColor: "rgba(99, 102, 241, 0.2)",
-      strokeColor: "#6366f1",
-      strokeWidth: 2,
-      opacity: 1
+  }
+  get fontStyle() {
+    return this._fontStyle;
+  }
+  set fontStyle(value) {
+    if (this._fontStyle !== value) {
+      this._fontStyle = value;
+      this._onChange?.();
     }
   }
-};
-class StyleManager {
-  constructor(theme) {
-    this._classes = /* @__PURE__ */ new Map();
-    this._builtInThemes = /* @__PURE__ */ new Map([
-      ["default", DEFAULT_THEME],
-      ["dark", DARK_THEME]
-    ]);
-    if (theme === void 0) {
-      this._theme = DEFAULT_THEME;
-    } else if (typeof theme === "string") {
-      this._theme = this._builtInThemes.get(theme) ?? DEFAULT_THEME;
-    } else {
-      this._theme = theme;
+  get fontSize() {
+    return this._fontSize;
+  }
+  set fontSize(value) {
+    if (this._fontSize !== value) {
+      this._fontSize = value;
+      this._onChange?.();
+    }
+  }
+  get color() {
+    return this._color;
+  }
+  set color(value) {
+    if (this._color !== value) {
+      this._color = value;
+      this._onChange?.();
+    }
+  }
+  get align() {
+    return this._align;
+  }
+  set align(value) {
+    if (this._align !== value) {
+      this._align = value;
+      this._onChange?.();
+    }
+  }
+  get verticalAlign() {
+    return this._verticalAlign;
+  }
+  set verticalAlign(value) {
+    if (this._verticalAlign !== value) {
+      this._verticalAlign = value;
+      this._onChange?.();
+    }
+  }
+  get maxLines() {
+    return this._maxLines;
+  }
+  set maxLines(value) {
+    if (this._maxLines !== value) {
+      this._maxLines = value;
+      this._onChange?.();
+    }
+  }
+  get lineHeight() {
+    return this._lineHeight;
+  }
+  get role() {
+    return this._role;
+  }
+  get rotation() {
+    return this._rotation;
+  }
+  set rotation(value) {
+    if (this._rotation !== value) {
+      this._rotation = value;
+      this._onChange?.();
+    }
+  }
+  setOnChange(cb) {
+    this._onChange = cb;
+  }
+  getFont() {
+    return `${this._fontStyle} ${this._fontWeight} ${this._fontSize}px ${this._fontFamily}`;
+  }
+  getLineHeightPx() {
+    return this._fontSize * this._lineHeight;
+  }
+  /**
+   * Word-wrap text to fit within maxWidth.
+   */
+  wrapText(ctx, maxWidth) {
+    ctx.font = this.getFont();
+    const words = this._text.split(" ");
+    const lines = [];
+    let currentLine = "";
+    for (const word of words) {
+      const testLine = currentLine ? `${currentLine} ${word}` : word;
+      const metrics = ctx.measureText(testLine);
+      if (metrics.width > maxWidth && currentLine) {
+        lines.push(currentLine);
+        currentLine = word;
+      } else {
+        currentLine = testLine;
+      }
+    }
+    if (currentLine) {
+      lines.push(currentLine);
+    }
+    if (this._maxLines !== void 0 && lines.length > this._maxLines) {
+      const truncated = lines.slice(0, this._maxLines);
+      const lastLine = truncated[truncated.length - 1];
+      if (lastLine !== void 0) {
+        truncated[truncated.length - 1] = lastLine + "…";
+      }
+      return truncated;
+    }
+    return lines;
+  }
+  measure(ctx) {
+    ctx.font = this.getFont();
+    const lineHeightPx = this.getLineHeightPx();
+    const rawLines = this._text.split("\n");
+    let maxWidth = 0;
+    for (const line of rawLines) {
+      const metrics = ctx.measureText(line);
+      if (metrics.width > maxWidth) {
+        maxWidth = metrics.width;
+      }
+    }
+    let lineCount = rawLines.length;
+    if (this._maxLines !== void 0 && lineCount > this._maxLines) {
+      lineCount = this._maxLines;
+    }
+    const width = maxWidth;
+    const height = lineCount * lineHeightPx;
+    if (this._rotation === 90 || this._rotation === -90) {
+      return { width: height, height: width };
+    }
+    return { width, height };
+  }
+  render(ctx, bounds) {
+    if (this.style.visible === false) return;
+    const opacity = this.style.opacity ?? 1;
+    if (opacity <= 0) return;
+    ctx.save();
+    ctx.globalAlpha *= opacity;
+    ctx.font = this.getFont();
+    ctx.fillStyle = this._color;
+    const isRotated = this._rotation === 90 || this._rotation === -90;
+    const textBounds = isRotated ? { x: bounds.x, y: bounds.y, width: bounds.height, height: bounds.width } : bounds;
+    const lines = this.wrapText(ctx, textBounds.width);
+    this._cachedLines = lines;
+    const lineHeightPx = this.getLineHeightPx();
+    const totalTextHeight = lines.length * lineHeightPx;
+    let textAlign;
+    let xBase;
+    switch (this._align) {
+      case "left":
+        textAlign = "left";
+        xBase = textBounds.x;
+        break;
+      case "right":
+        textAlign = "right";
+        xBase = textBounds.x + textBounds.width;
+        break;
+      default:
+        textAlign = "center";
+        xBase = textBounds.x + textBounds.width / 2;
+        break;
+    }
+    let yStart;
+    switch (this._verticalAlign) {
+      case "top":
+        yStart = textBounds.y + lineHeightPx / 2;
+        break;
+      case "bottom":
+        yStart = textBounds.y + textBounds.height - totalTextHeight + lineHeightPx / 2;
+        break;
+      default:
+        yStart = textBounds.y + (textBounds.height - totalTextHeight) / 2 + lineHeightPx / 2;
+        break;
+    }
+    ctx.textAlign = textAlign;
+    ctx.textBaseline = "middle";
+    if (isRotated) {
+      const cx = bounds.x + bounds.width / 2;
+      const cy = bounds.y + bounds.height / 2;
+      ctx.translate(cx, cy);
+      ctx.rotate(this._rotation * Math.PI / 180);
+      const offsetX = xBase - (textBounds.x + textBounds.width / 2);
+      const offsetY = yStart - (textBounds.y + textBounds.height / 2);
+      for (let i = 0; i < lines.length; i++) {
+        ctx.fillText(lines[i], offsetX, offsetY + i * lineHeightPx);
+      }
+    } else {
+      for (let i = 0; i < lines.length; i++) {
+        ctx.fillText(lines[i], xBase, yStart + i * lineHeightPx);
+      }
+    }
+    ctx.restore();
+  }
+  hitTest(point, bounds) {
+    if (this.style.visible === false) return null;
+    if (point.x >= bounds.x && point.x <= bounds.x + bounds.width && point.y >= bounds.y && point.y <= bounds.y + bounds.height) {
+      return this;
+    }
+    return null;
+  }
+  serialize() {
+    const data = {
+      type: "text",
+      text: this._text
+    };
+    if (this.id !== void 0) data.id = this.id;
+    if (this.style && Object.keys(this.style).length > 0) data.style = this.style;
+    if (this._fontFamily !== DEFAULT_FONT_FAMILY) data.fontFamily = this._fontFamily;
+    if (this._fontWeight !== "normal") data.fontWeight = this._fontWeight;
+    if (this._fontStyle !== "normal") data.fontStyle = this._fontStyle;
+    if (this._fontSize !== DEFAULT_FONT_SIZE) data.fontSize = this._fontSize;
+    if (this._color !== DEFAULT_COLOR$1) data.color = this._color;
+    if (this._align !== "center") data.align = this._align;
+    if (this._verticalAlign !== "middle") data.verticalAlign = this._verticalAlign;
+    if (this._maxLines !== void 0) data.maxLines = this._maxLines;
+    if (this._lineHeight !== DEFAULT_LINE_HEIGHT) data.lineHeight = this._lineHeight;
+    if (this._role !== void 0) data.role = this._role;
+    if (this._rotation !== 0) data.rotation = this._rotation;
+    return data;
+  }
+  toSVG(bounds) {
+    if (this.style.visible === false) return "";
+    const lineHeightPx = this.getLineHeightPx();
+    const displayLines = this._cachedLines ?? this._text.split("\n");
+    const totalTextHeight = displayLines.length * lineHeightPx;
+    let anchor;
+    let xBase;
+    switch (this._align) {
+      case "left":
+        anchor = "start";
+        xBase = bounds.x;
+        break;
+      case "right":
+        anchor = "end";
+        xBase = bounds.x + bounds.width;
+        break;
+      default:
+        anchor = "middle";
+        xBase = bounds.x + bounds.width / 2;
+        break;
+    }
+    let yStart;
+    switch (this._verticalAlign) {
+      case "top":
+        yStart = bounds.y + lineHeightPx * 0.75;
+        break;
+      case "bottom":
+        yStart = bounds.y + bounds.height - totalTextHeight + lineHeightPx * 0.75;
+        break;
+      default:
+        yStart = bounds.y + (bounds.height - totalTextHeight) / 2 + lineHeightPx * 0.75;
+        break;
+    }
+    const fontAttrs = [
+      `font-family="${this._fontFamily}"`,
+      `font-size="${this._fontSize}"`,
+      this._fontWeight !== "normal" ? `font-weight="${this._fontWeight}"` : "",
+      this._fontStyle !== "normal" ? `font-style="${this._fontStyle}"` : ""
+    ].filter(Boolean).join(" ");
+    const transform = this._rotation !== 0 ? ` transform="rotate(${this._rotation}, ${bounds.x + bounds.width / 2}, ${bounds.y + bounds.height / 2})"` : "";
+    const tspans = displayLines.map(
+      (line, i) => `<tspan x="${xBase}" dy="${i === 0 ? 0 : lineHeightPx}">${escapeXml(line)}</tspan>`
+    ).join("");
+    return `<text x="${xBase}" y="${yStart}" ${fontAttrs} fill="${this._color}" text-anchor="${anchor}"${transform}>${tspans}</text>`;
+  }
+}
+function escapeXml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+const DEFAULT_ICON_SIZE = 24;
+const svgFetchCache = new LRUCache(100);
+class CIcon {
+  constructor(options) {
+    this.type = "icon";
+    this._loaded = false;
+    this.id = options.id;
+    this._source = options.source;
+    this._width = options.width ?? DEFAULT_ICON_SIZE;
+    this._height = options.height ?? DEFAULT_ICON_SIZE;
+    this._backgroundColor = options.backgroundColor;
+    this._fillColor = options.fillColor;
+    this._bindsNotationIcon = options.bindsNotationIcon ?? false;
+    this.onClick = options.onClick;
+    this.style = options.style ?? {};
+    if (options.visible === false) {
+      this.style.visible = false;
+    }
+    this._image = new Image();
+    this._image.onload = () => {
+      this._loaded = true;
+      this._onChange?.();
+    };
+    this._image.onerror = () => {
+      this._onChange?.();
+    };
+    void this.loadSource(this._source);
+  }
+  get source() {
+    return this._source;
+  }
+  set source(value) {
+    if (this._source !== value) {
+      this._source = value;
+      this._loaded = false;
+      void this.loadSource(value);
+      this._onChange?.();
+    }
+  }
+  get width() {
+    return this._width;
+  }
+  set width(value) {
+    if (this._width !== value) {
+      this._width = value;
+      this._onChange?.();
+    }
+  }
+  get height() {
+    return this._height;
+  }
+  set height(value) {
+    if (this._height !== value) {
+      this._height = value;
+      this._onChange?.();
+    }
+  }
+  get backgroundColor() {
+    return this._backgroundColor;
+  }
+  set backgroundColor(value) {
+    if (this._backgroundColor !== value) {
+      this._backgroundColor = value;
+      this._onChange?.();
+    }
+  }
+  get fillColor() {
+    return this._fillColor;
+  }
+  set fillColor(value) {
+    if (this._fillColor !== value) {
+      this._fillColor = value;
+      void this.loadSource(this._source);
+      this._onChange?.();
+    }
+  }
+  get loaded() {
+    return this._loaded;
+  }
+  get bindsNotationIcon() {
+    return this._bindsNotationIcon;
+  }
+  set bindsNotationIcon(value) {
+    if (this._bindsNotationIcon !== value) {
+      this._bindsNotationIcon = value;
+      this._onChange?.();
+    }
+  }
+  setOnChange(cb) {
+    this._onChange = cb;
+  }
+  async loadSource(source) {
+    if (isSvgMarkup(source)) {
+      const tinted = this._fillColor ? tintSvg(source, void 0, this._fillColor) : source;
+      this._image.src = svgToDataUrl(tinted);
+    } else if (isSvgUrl(source) && this._fillColor) {
+      try {
+        const svgText = await this.fetchSvg(source);
+        const tinted = tintSvg(svgText, void 0, this._fillColor);
+        this._image.src = svgToDataUrl(tinted);
+      } catch {
+        this._image.src = source;
+      }
+    } else {
+      this._image.src = source;
+    }
+  }
+  async fetchSvg(url) {
+    let promise = svgFetchCache.get(url);
+    if (!promise) {
+      promise = fetch(url).then((r) => r.text());
+      svgFetchCache.set(url, promise);
+    }
+    return promise;
+  }
+  measure(_ctx) {
+    return { width: this._width, height: this._height };
+  }
+  render(ctx, bounds) {
+    if (this.style.visible === false) return;
+    const opacity = this.style.opacity ?? 1;
+    if (opacity <= 0) return;
+    ctx.save();
+    ctx.globalAlpha *= opacity;
+    if (this._backgroundColor) {
+      ctx.fillStyle = this._backgroundColor;
+      ctx.fillRect(bounds.x, bounds.y, bounds.width, bounds.height);
+    }
+    if (this._loaded) {
+      const drawWidth = Math.min(this._width, bounds.width);
+      const drawHeight = Math.min(this._height, bounds.height);
+      const dx = bounds.x + (bounds.width - drawWidth) / 2;
+      const dy = bounds.y + (bounds.height - drawHeight) / 2;
+      ctx.drawImage(this._image, dx, dy, drawWidth, drawHeight);
+    }
+    ctx.restore();
+  }
+  hitTest(point, bounds) {
+    if (this.style.visible === false) return null;
+    if (point.x >= bounds.x && point.x <= bounds.x + bounds.width && point.y >= bounds.y && point.y <= bounds.y + bounds.height) {
+      return this;
+    }
+    return null;
+  }
+  serialize() {
+    const data = {
+      type: "icon",
+      source: this._source,
+      width: this._width,
+      height: this._height
+    };
+    if (this.id !== void 0) data.id = this.id;
+    if (this.style && Object.keys(this.style).length > 0) data.style = this.style;
+    if (this._backgroundColor) data.backgroundColor = this._backgroundColor;
+    if (this._fillColor) data.fillColor = this._fillColor;
+    if (this._bindsNotationIcon) data.bindsNotationIcon = true;
+    return data;
+  }
+  toSVG(bounds) {
+    if (this.style.visible === false) return "";
+    let svg = "";
+    if (this._backgroundColor) {
+      svg += `<rect x="${bounds.x}" y="${bounds.y}" width="${bounds.width}" height="${bounds.height}" fill="${this._backgroundColor}" />`;
+    }
+    const drawWidth = Math.min(this._width, bounds.width);
+    const drawHeight = Math.min(this._height, bounds.height);
+    const dx = bounds.x + (bounds.width - drawWidth) / 2;
+    const dy = bounds.y + (bounds.height - drawHeight) / 2;
+    svg += `<image href="${escapeXmlAttr(this._source)}" x="${dx}" y="${dy}" width="${drawWidth}" height="${drawHeight}" />`;
+    return svg;
+  }
+}
+function escapeXmlAttr(str) {
+  return str.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+const DEFAULT_COLOR = "#cccccc";
+const DEFAULT_THICKNESS = 1;
+class CDivider {
+  constructor(options = {}) {
+    this.type = "divider";
+    this.id = options.id;
+    this._color = options.color ?? DEFAULT_COLOR;
+    this._thickness = options.thickness ?? DEFAULT_THICKNESS;
+    this.style = options.style ?? {};
+  }
+  get color() {
+    return this._color;
+  }
+  set color(value) {
+    if (this._color !== value) {
+      this._color = value;
+      this._onChange?.();
+    }
+  }
+  get thickness() {
+    return this._thickness;
+  }
+  set thickness(value) {
+    if (this._thickness !== value) {
+      this._thickness = value;
+      this._onChange?.();
+    }
+  }
+  setOnChange(cb) {
+    this._onChange = cb;
+  }
+  measure(_ctx) {
+    return { width: this._thickness, height: this._thickness };
+  }
+  render(ctx, bounds) {
+    if (this.style.visible === false) return;
+    ctx.save();
+    ctx.strokeStyle = this._color;
+    ctx.lineWidth = this._thickness;
+    ctx.globalAlpha *= this.style.opacity ?? 1;
+    ctx.beginPath();
+    if (bounds.width >= bounds.height) {
+      const y = bounds.y + bounds.height / 2;
+      ctx.moveTo(bounds.x, y);
+      ctx.lineTo(bounds.x + bounds.width, y);
+    } else {
+      const x = bounds.x + bounds.width / 2;
+      ctx.moveTo(x, bounds.y);
+      ctx.lineTo(x, bounds.y + bounds.height);
+    }
+    ctx.stroke();
+    ctx.restore();
+  }
+  hitTest(_point, _bounds) {
+    return null;
+  }
+  serialize() {
+    const data = { type: "divider" };
+    if (this.id !== void 0) data.id = this.id;
+    if (this._color !== DEFAULT_COLOR) data.color = this._color;
+    if (this._thickness !== DEFAULT_THICKNESS) data.thickness = this._thickness;
+    if (this.style && Object.keys(this.style).length > 0) data.style = this.style;
+    return data;
+  }
+  toSVG(bounds) {
+    if (this.style.visible === false) return "";
+    if (bounds.width >= bounds.height) {
+      const y = bounds.y + bounds.height / 2;
+      return `<line x1="${bounds.x}" y1="${y}" x2="${bounds.x + bounds.width}" y2="${y}" stroke="${this._color}" stroke-width="${this._thickness}" />`;
+    } else {
+      const x = bounds.x + bounds.width / 2;
+      return `<line x1="${x}" y1="${bounds.y}" x2="${x}" y2="${bounds.y + bounds.height}" stroke="${this._color}" stroke-width="${this._thickness}" />`;
+    }
+  }
+}
+function normalizeSides(value, fallback = 0) {
+  if (value === void 0) {
+    return { top: fallback, right: fallback, bottom: fallback, left: fallback };
+  }
+  if (typeof value === "number") {
+    return { top: value, right: value, bottom: value, left: value };
+  }
+  return {
+    top: value.top ?? fallback,
+    right: value.right ?? fallback,
+    bottom: value.bottom ?? fallback,
+    left: value.left ?? fallback
+  };
+}
+function flexLayout(container2, config, children) {
+  const pad = normalizeSides(config.padding);
+  const isRow = config.direction === "row";
+  const innerWidth = Math.max(0, container2.width - pad.left - pad.right);
+  const innerHeight = Math.max(0, container2.height - pad.top - pad.bottom);
+  const availableMain = isRow ? innerWidth : innerHeight;
+  const availableCross = isRow ? innerHeight : innerWidth;
+  if (children.length === 0) {
+    return {
+      childBounds: [],
+      contentSize: { width: pad.left + pad.right, height: pad.top + pad.bottom }
+    };
+  }
+  const baseSizes = [];
+  const mainMargins = [];
+  const crossMargins = [];
+  for (const child of children) {
+    const m = child.margin;
+    if (isRow) {
+      mainMargins.push({ before: m.left, after: m.right });
+      crossMargins.push({ before: m.top, after: m.bottom });
+    } else {
+      mainMargins.push({ before: m.top, after: m.bottom });
+      crossMargins.push({ before: m.left, after: m.right });
+    }
+    const measured = isRow ? child.measure.width : child.measure.height;
+    const minMain = isRow ? child.minSize.width : child.minSize.height;
+    const basis = child.flexBasis === "auto" ? measured : child.flexBasis;
+    baseSizes.push(Math.max(basis, minMain));
+  }
+  const totalGaps = config.gap * Math.max(0, children.length - 1);
+  let totalMargins = 0;
+  for (const mm of mainMargins) {
+    totalMargins += mm.before + mm.after;
+  }
+  let totalBase = 0;
+  for (const s of baseSizes) {
+    totalBase += s;
+  }
+  const totalUsed = totalBase + totalGaps + totalMargins;
+  const finalSizes = [...baseSizes];
+  const remaining = availableMain - totalUsed;
+  if (remaining > 0) {
+    let totalGrow = 0;
+    for (const child of children) {
+      totalGrow += child.flexGrow;
+    }
+    if (totalGrow > 0) {
+      for (let i = 0; i < children.length; i++) {
+        const child = children[i];
+        finalSizes[i] = finalSizes[i] + remaining * child.flexGrow / totalGrow;
+      }
+    }
+  } else if (remaining < 0) {
+    let totalShrink = 0;
+    for (let i = 0; i < children.length; i++) {
+      totalShrink += children[i].flexShrink * baseSizes[i];
+    }
+    if (totalShrink > 0) {
+      const deficit = -remaining;
+      for (let i = 0; i < children.length; i++) {
+        const child = children[i];
+        const shrinkRatio = child.flexShrink * baseSizes[i] / totalShrink;
+        const minMain = isRow ? child.minSize.width : child.minSize.height;
+        finalSizes[i] = Math.max(minMain, finalSizes[i] - deficit * shrinkRatio);
+      }
+    }
+  }
+  let actualTotal = totalGaps + totalMargins;
+  for (const s of finalSizes) {
+    actualTotal += s;
+  }
+  const freeSpace = Math.max(0, availableMain - actualTotal);
+  let mainOffset;
+  let betweenExtra;
+  switch (config.justifyContent) {
+    case "center":
+      mainOffset = freeSpace / 2;
+      betweenExtra = 0;
+      break;
+    case "end":
+      mainOffset = freeSpace;
+      betweenExtra = 0;
+      break;
+    case "space-between":
+      mainOffset = 0;
+      betweenExtra = children.length > 1 ? freeSpace / (children.length - 1) : 0;
+      break;
+    case "space-around":
+      betweenExtra = freeSpace / children.length;
+      mainOffset = betweenExtra / 2;
+      break;
+    default:
+      mainOffset = 0;
+      betweenExtra = 0;
+      break;
+  }
+  const childBounds = [];
+  let cursor = mainOffset;
+  let maxCrossContent = 0;
+  for (let i = 0; i < children.length; i++) {
+    const child = children[i];
+    const mainSize = finalSizes[i];
+    const mm = mainMargins[i];
+    const cm = crossMargins[i];
+    cursor += mm.before;
+    const crossAvailable = availableCross - cm.before - cm.after;
+    const measuredCross = isRow ? child.measure.height : child.measure.width;
+    const align = child.alignSelf === "auto" ? config.alignItems : child.alignSelf;
+    let crossSize;
+    let crossOffset;
+    if (align === "stretch") {
+      crossSize = crossAvailable;
+      crossOffset = cm.before;
+    } else {
+      crossSize = Math.min(measuredCross, crossAvailable);
+      switch (align) {
+        case "center":
+          crossOffset = cm.before + (crossAvailable - crossSize) / 2;
+          break;
+        case "end":
+          crossOffset = cm.before + crossAvailable - crossSize;
+          break;
+        default:
+          crossOffset = cm.before;
+          break;
+      }
+    }
+    maxCrossContent = Math.max(maxCrossContent, crossOffset + crossSize + cm.after);
+    if (isRow) {
+      childBounds.push({
+        x: pad.left + cursor,
+        y: pad.top + crossOffset,
+        width: mainSize,
+        height: crossSize
+      });
+    } else {
+      childBounds.push({
+        x: pad.left + crossOffset,
+        y: pad.top + cursor,
+        width: crossSize,
+        height: mainSize
+      });
+    }
+    cursor += mainSize + mm.after;
+    if (i < children.length - 1) {
+      cursor += config.gap + betweenExtra;
+    }
+  }
+  const mainContent = cursor;
+  const contentWidth = isRow ? pad.left + mainContent + pad.right : pad.left + maxCrossContent + pad.right;
+  const contentHeight = isRow ? pad.top + maxCrossContent + pad.bottom : pad.top + mainContent + pad.bottom;
+  return {
+    childBounds,
+    contentSize: { width: contentWidth, height: contentHeight }
+  };
+}
+class CContainer {
+  constructor(options = {}) {
+    this.type = "container";
+    this._cachedBounds = null;
+    this._cachedContainerBounds = null;
+    this.id = options.id;
+    this._direction = options.direction ?? "column";
+    this._justifyContent = options.justifyContent ?? "start";
+    this._alignItems = options.alignItems ?? "stretch";
+    this._gap = options.gap ?? 0;
+    this._padding = options.padding ?? 0;
+    this._children = options.children ?? [];
+    this.style = options.style ?? {};
+    for (const child of this._children) {
+      child.setOnChange(() => this.handleChildChange());
+    }
+  }
+  get direction() {
+    return this._direction;
+  }
+  get justifyContent() {
+    return this._justifyContent;
+  }
+  get alignItems() {
+    return this._alignItems;
+  }
+  get gap() {
+    return this._gap;
+  }
+  get padding() {
+    return this._padding;
+  }
+  get children() {
+    return this._children;
+  }
+  addChild(child) {
+    child.setOnChange(() => this.handleChildChange());
+    this._children.push(child);
+    this.handleChildChange();
+  }
+  removeChild(index) {
+    const removed = this._children.splice(index, 1)[0];
+    if (removed) {
+      removed.setOnChange(void 0);
+      this.handleChildChange();
+    }
+    return removed;
+  }
+  insertChild(index, child) {
+    child.setOnChange(() => this.handleChildChange());
+    this._children.splice(index, 0, child);
+    this.handleChildChange();
+  }
+  setOnChange(cb) {
+    this._onChange = cb;
+  }
+  handleChildChange() {
+    this._cachedBounds = null;
+    this._onChange?.();
+  }
+  getFlexConfig() {
+    return {
+      direction: this._direction,
+      justifyContent: this._justifyContent,
+      alignItems: this._alignItems,
+      gap: this._gap,
+      padding: this._padding
+    };
+  }
+  buildFlexChildren(ctx) {
+    return this._children.map((child) => {
+      const s = child.style;
+      const measured = child.measure(ctx);
+      return {
+        measure: measured,
+        minSize: { width: 0, height: 0 },
+        flexGrow: s.flexGrow ?? 0,
+        flexShrink: s.flexShrink ?? 1,
+        flexBasis: s.flexBasis ?? "auto",
+        alignSelf: s.alignSelf ?? "auto",
+        margin: normalizeSides(s.margin)
+      };
+    });
+  }
+  measure(ctx) {
+    const flexChildren = this.buildFlexChildren(ctx);
+    const measureConfig = {
+      ...this.getFlexConfig(),
+      justifyContent: "start",
+      alignItems: "start"
+    };
+    const measureChildren = flexChildren.map((c) => ({
+      ...c,
+      flexGrow: 0,
+      alignSelf: "start"
+    }));
+    const result = flexLayout(
+      { width: 1e5, height: 1e5 },
+      measureConfig,
+      measureChildren
+    );
+    return result.contentSize;
+  }
+  render(ctx, bounds) {
+    if (this.style.visible === false) return;
+    const flexChildren = this.buildFlexChildren(ctx);
+    const result = flexLayout(
+      { width: bounds.width, height: bounds.height },
+      this.getFlexConfig(),
+      flexChildren
+    );
+    this._cachedBounds = result.childBounds;
+    this._cachedContainerBounds = bounds;
+    const opacity = this.style.opacity ?? 1;
+    if (opacity < 1) {
+      ctx.save();
+      ctx.globalAlpha *= opacity;
+    }
+    for (let i = 0; i < this._children.length; i++) {
+      const child = this._children[i];
+      if (child.style.visible === false) continue;
+      const cb = result.childBounds[i];
+      child.render(ctx, {
+        x: bounds.x + cb.x,
+        y: bounds.y + cb.y,
+        width: cb.width,
+        height: cb.height
+      });
+    }
+    if (opacity < 1) {
+      ctx.restore();
+    }
+  }
+  hitTest(point, bounds) {
+    if (this.style.visible === false) return null;
+    if (!this._cachedBounds) return null;
+    for (let i = this._children.length - 1; i >= 0; i--) {
+      const child = this._children[i];
+      if (child.style.visible === false) continue;
+      const cb = this._cachedBounds[i];
+      const absBounds = {
+        x: bounds.x + cb.x,
+        y: bounds.y + cb.y,
+        width: cb.width,
+        height: cb.height
+      };
+      const hit = child.hitTest(point, absBounds);
+      if (hit) return hit;
+    }
+    return null;
+  }
+  /**
+   * Find a component by id recursively.
+   */
+  findById(id) {
+    for (const child of this._children) {
+      if (child.id === id) return child;
+      if (child.type === "container") {
+        const found = child.findById(id);
+        if (found) return found;
+      }
+      if (child.type === "shape") {
+        const content = child.content;
+        if (content) {
+          const found = content.findById(id);
+          if (found) return found;
+        }
+      }
+    }
+    return void 0;
+  }
+  serialize() {
+    const data = {
+      type: "container",
+      direction: this._direction,
+      children: this._children.map((c) => c.serialize())
+    };
+    if (this.id !== void 0) data.id = this.id;
+    if (this.style && Object.keys(this.style).length > 0) data.style = this.style;
+    if (this._justifyContent !== "start") data.justifyContent = this._justifyContent;
+    if (this._alignItems !== "stretch") data.alignItems = this._alignItems;
+    if (this._gap !== 0) data.gap = this._gap;
+    if (typeof this._padding === "number" && this._padding !== 0 || typeof this._padding === "object" && Object.values(this._padding).some((v) => v !== void 0 && v !== 0)) {
+      data.padding = this._padding;
+    }
+    return data;
+  }
+  toSVG(bounds) {
+    if (this.style.visible === false) return "";
+    const cachedBounds = this._cachedBounds;
+    const cachedContainer = this._cachedContainerBounds;
+    const childSvg = this._children.map((child, i) => {
+      if (child.style.visible === false) return "";
+      if (cachedBounds && cachedContainer) {
+        const cb = cachedBounds[i];
+        const dx = bounds.x - cachedContainer.x;
+        const dy = bounds.y - cachedContainer.y;
+        return child.toSVG({
+          x: cachedContainer.x + cb.x + dx,
+          y: cachedContainer.y + cb.y + dy,
+          width: cb.width,
+          height: cb.height
+        });
+      }
+      const h = bounds.height / Math.max(1, this._children.length);
+      return child.toSVG({
+        x: bounds.x,
+        y: bounds.y + i * h,
+        width: bounds.width,
+        height: h
+      });
+    }).join("");
+    return `<g>${childSvg}</g>`;
+  }
+}
+class CShape {
+  constructor(options = {}) {
+    this.type = "shape";
+    this.id = options.id;
+    this._borderColor = options.borderColor;
+    this._borderWidth = options.borderWidth ?? 0;
+    this._backgroundColor = options.backgroundColor;
+    this._cornerRadius = options.cornerRadius ?? 0;
+    this._padding = options.padding ?? 0;
+    this.onClick = options.onClick;
+    this._content = options.content;
+    this.style = options.style ?? {};
+    if (this._content) {
+      this._content.setOnChange(() => this._onChange?.());
+    }
+  }
+  get borderColor() {
+    return this._borderColor;
+  }
+  set borderColor(value) {
+    if (this._borderColor !== value) {
+      this._borderColor = value;
+      this._onChange?.();
+    }
+  }
+  get borderWidth() {
+    return this._borderWidth;
+  }
+  set borderWidth(value) {
+    if (this._borderWidth !== value) {
+      this._borderWidth = value;
+      this._onChange?.();
+    }
+  }
+  get backgroundColor() {
+    return this._backgroundColor;
+  }
+  set backgroundColor(value) {
+    if (this._backgroundColor !== value) {
+      this._backgroundColor = value;
+      this._onChange?.();
+    }
+  }
+  get cornerRadius() {
+    return this._cornerRadius;
+  }
+  get padding() {
+    return this._padding;
+  }
+  get content() {
+    return this._content;
+  }
+  setOnChange(cb) {
+    this._onChange = cb;
+  }
+  measure(ctx) {
+    const pad = normalizeSides(this._padding);
+    const bw = this._borderWidth;
+    if (this._content) {
+      const contentSize = this._content.measure(ctx);
+      return {
+        width: contentSize.width + pad.left + pad.right + bw * 2,
+        height: contentSize.height + pad.top + pad.bottom + bw * 2
+      };
+    }
+    return {
+      width: pad.left + pad.right + bw * 2,
+      height: pad.top + pad.bottom + bw * 2
+    };
+  }
+  render(ctx, bounds) {
+    if (this.style.visible === false) return;
+    ctx.save();
+    ctx.globalAlpha *= this.style.opacity ?? 1;
+    const { x, y, width, height } = bounds;
+    if (this._backgroundColor) {
+      ctx.fillStyle = this._backgroundColor;
+      if (this._cornerRadius > 0 && ctx.roundRect) {
+        ctx.beginPath();
+        ctx.roundRect(x, y, width, height, this._cornerRadius);
+        ctx.fill();
+      } else {
+        ctx.fillRect(x, y, width, height);
+      }
+    }
+    if (this._borderColor && this._borderWidth > 0) {
+      ctx.strokeStyle = this._borderColor;
+      ctx.lineWidth = this._borderWidth;
+      if (this._cornerRadius > 0 && ctx.roundRect) {
+        ctx.beginPath();
+        ctx.roundRect(x, y, width, height, this._cornerRadius);
+        ctx.stroke();
+      } else {
+        ctx.strokeRect(x, y, width, height);
+      }
+    }
+    if (this._content) {
+      const pad = normalizeSides(this._padding);
+      const bw = this._borderWidth;
+      this._content.render(ctx, {
+        x: x + pad.left + bw,
+        y: y + pad.top + bw,
+        width: Math.max(0, width - pad.left - pad.right - bw * 2),
+        height: Math.max(0, height - pad.top - pad.bottom - bw * 2)
+      });
+    }
+    ctx.restore();
+  }
+  hitTest(point, bounds) {
+    if (this.style.visible === false) return null;
+    if (point.x < bounds.x || point.x > bounds.x + bounds.width || point.y < bounds.y || point.y > bounds.y + bounds.height) {
+      return null;
+    }
+    if (this._content) {
+      const pad = normalizeSides(this._padding);
+      const bw = this._borderWidth;
+      const contentBounds = {
+        x: bounds.x + pad.left + bw,
+        y: bounds.y + pad.top + bw,
+        width: Math.max(0, bounds.width - pad.left - pad.right - bw * 2),
+        height: Math.max(0, bounds.height - pad.top - pad.bottom - bw * 2)
+      };
+      const hit = this._content.hitTest(point, contentBounds);
+      if (hit) return hit;
+    }
+    return this;
+  }
+  serialize() {
+    const data = { type: "shape" };
+    if (this.id !== void 0) data.id = this.id;
+    if (this.style && Object.keys(this.style).length > 0) data.style = this.style;
+    if (this._borderColor) data.borderColor = this._borderColor;
+    if (this._borderWidth !== 0) data.borderWidth = this._borderWidth;
+    if (this._backgroundColor) data.backgroundColor = this._backgroundColor;
+    if (this._cornerRadius !== 0) data.cornerRadius = this._cornerRadius;
+    if (typeof this._padding === "number" && this._padding !== 0 || typeof this._padding === "object" && Object.values(this._padding).some((v) => v !== void 0 && v !== 0)) {
+      data.padding = this._padding;
+    }
+    if (this._content) {
+      data.content = this._content.serialize();
+    }
+    return data;
+  }
+  toSVG(bounds) {
+    if (this.style.visible === false) return "";
+    let svg = "";
+    const { x, y, width, height } = bounds;
+    const hasFill = !!this._backgroundColor;
+    const hasStroke = !!this._borderColor && this._borderWidth > 0;
+    if (hasFill || hasStroke) {
+      const fill = hasFill ? `fill="${this._backgroundColor}"` : 'fill="none"';
+      const stroke = hasStroke ? `stroke="${this._borderColor}" stroke-width="${this._borderWidth}"` : "";
+      const rx = this._cornerRadius > 0 ? ` rx="${this._cornerRadius}"` : "";
+      svg += `<rect x="${x}" y="${y}" width="${width}" height="${height}" ${fill} ${stroke}${rx} />`;
+    }
+    if (this._content) {
+      const pad = normalizeSides(this._padding);
+      const bw = this._borderWidth;
+      svg += this._content.toSVG({
+        x: x + pad.left + bw,
+        y: y + pad.top + bw,
+        width: Math.max(0, width - pad.left - pad.right - bw * 2),
+        height: Math.max(0, height - pad.top - pad.bottom - bw * 2)
+      });
+    }
+    return svg;
+  }
+}
+function deserializeCComponent(data) {
+  switch (data.type) {
+    case "text":
+      return new CText({
+        id: data.id,
+        text: data.text ?? "",
+        fontFamily: data.fontFamily,
+        fontWeight: data.fontWeight,
+        fontStyle: data.fontStyle,
+        fontSize: data.fontSize,
+        color: data.color,
+        align: data.align,
+        verticalAlign: data.verticalAlign,
+        maxLines: data.maxLines,
+        lineHeight: data.lineHeight,
+        role: data.role,
+        rotation: data.rotation,
+        style: data.style
+      });
+    case "icon":
+      return new CIcon({
+        id: data.id,
+        source: data.source ?? "",
+        width: data.width,
+        height: data.height,
+        backgroundColor: data.backgroundColor,
+        fillColor: data.fillColor,
+        bindsNotationIcon: data.bindsNotationIcon === true,
+        style: data.style
+      });
+    case "divider":
+      return new CDivider({
+        id: data.id,
+        color: data.color,
+        thickness: data.thickness,
+        style: data.style
+      });
+    case "container":
+      return new CContainer({
+        id: data.id,
+        direction: data.direction,
+        justifyContent: data.justifyContent,
+        alignItems: data.alignItems,
+        gap: data.gap,
+        padding: data.padding,
+        children: data.children?.map(deserializeCComponent),
+        style: data.style
+      });
+    case "shape":
+      return new CShape({
+        id: data.id,
+        borderColor: data.borderColor,
+        borderWidth: data.borderWidth,
+        backgroundColor: data.backgroundColor,
+        cornerRadius: data.cornerRadius,
+        padding: data.padding,
+        content: data.content ? deserializeCComponent(data.content) : void 0,
+        style: data.style
+      });
+    default:
+      throw new Error(`Unknown component type: ${String(data.type)}`);
+  }
+}
+class CompositeNode extends Node {
+  constructor(options) {
+    super(options);
+    this._content = options.content;
+    this._shapeType = options.shapeType ?? "rectangle";
+    this._cornerRadius = options.cornerRadius ?? 0;
+    this._pathFactory = options.pathFactory;
+    this._autoSize = options.autoSize ?? false;
+    this._minWidth = options.minWidth ?? 0;
+    this._minHeight = options.minHeight ?? 0;
+    this._content.setOnChange(() => this.markDirty());
+  }
+  get typeName() {
+    return "composite";
+  }
+  get content() {
+    return this._content;
+  }
+  get shapeType() {
+    return this._shapeType;
+  }
+  get cornerRadius() {
+    return this._cornerRadius;
+  }
+  get autoSize() {
+    return this._autoSize;
+  }
+  set autoSize(value) {
+    if (this._autoSize !== value) {
+      this._autoSize = value;
+      this.markDirty();
+    }
+  }
+  get minWidth() {
+    return this._minWidth;
+  }
+  get minHeight() {
+    return this._minHeight;
+  }
+  /**
+   * Find a component by id in the content tree.
+   */
+  getComponent(id) {
+    if (this._content.id === id) return this._content;
+    return this._content.findById(id);
+  }
+  /**
+   * Hit test the component tree. Returns the deepest component at the given world point.
+   */
+  getComponentAtPoint(worldPoint) {
+    const bounds = this.getContentBounds();
+    return this._content.hitTest(worldPoint, bounds);
+  }
+  getContentBounds() {
+    return this.getLabelContainerBounds(this.getBounds());
+  }
+  // --- Shape rendering ---
+  hitTest(point) {
+    if (this._shapeType === "circle") {
+      return this.hitTestEllipse(point);
+    }
+    if (this._shapeType === "diamond") {
+      return this.hitTestDiamond(point);
+    }
+    return super.hitTest(point);
+  }
+  hitTestEllipse(point) {
+    const center = this.getCenter();
+    const padding = NODE_HITBOX_PADDING;
+    const rx = this._width / 2 + padding;
+    const ry = this._height / 2 + padding;
+    const dx = point.x - center.x;
+    const dy = point.y - center.y;
+    return dx * dx / (rx * rx) + dy * dy / (ry * ry) <= 1;
+  }
+  hitTestDiamond(point) {
+    const center = this.getCenter();
+    const padding = NODE_HITBOX_PADDING;
+    const hw = this._width / 2 + padding;
+    const hh = this._height / 2 + padding;
+    const dx = Math.abs(point.x - center.x);
+    const dy = Math.abs(point.y - center.y);
+    return dx / hw + dy / hh <= 1;
+  }
+  render(ctx) {
+    if (this._autoSize) {
+      this.applyAutoSize(ctx);
+    }
+    const { x, y, width, height } = this.getBounds();
+    const style = this.style;
+    const baseOpacity = style.opacity ?? 1;
+    const fillOpacity = style.fillOpacity ?? 1;
+    const strokeOpacity = style.strokeOpacity ?? 1;
+    this.applyStyle(ctx);
+    ctx.beginPath();
+    this.buildShapePath(ctx, x, y, width, height);
+    ctx.closePath();
+    ctx.globalAlpha = baseOpacity * fillOpacity;
+    ctx.fill();
+    ctx.globalAlpha = baseOpacity * strokeOpacity;
+    ctx.stroke();
+    ctx.globalAlpha = 1;
+    this.renderContents(ctx);
+  }
+  buildShapePath(ctx, x, y, w, h) {
+    switch (this._shapeType) {
+      case "circle": {
+        const cx = x + w / 2;
+        const cy = y + h / 2;
+        ctx.ellipse(cx, cy, w / 2, h / 2, 0, 0, Math.PI * 2);
+        break;
+      }
+      case "diamond": {
+        const cx = x + w / 2;
+        const cy = y + h / 2;
+        ctx.moveTo(cx, y);
+        ctx.lineTo(x + w, cy);
+        ctx.lineTo(cx, y + h);
+        ctx.lineTo(x, cy);
+        break;
+      }
+      case "custom": {
+        if (this._pathFactory) {
+          const path = this._pathFactory(w, h);
+          ctx.save();
+          ctx.translate(x, y);
+          ctx.fill(path);
+          ctx.stroke(path);
+          ctx.restore();
+          return;
+        }
+        this.buildRectPath(ctx, x, y, w, h);
+        break;
+      }
+      default:
+        this.buildRectPath(ctx, x, y, w, h);
+        break;
+    }
+  }
+  buildRectPath(ctx, x, y, w, h) {
+    const radius = Math.min(this._cornerRadius, w / 2, h / 2);
+    if (radius > 0) {
+      ctx.moveTo(x + radius, y);
+      ctx.lineTo(x + w - radius, y);
+      ctx.arcTo(x + w, y, x + w, y + radius, radius);
+      ctx.lineTo(x + w, y + h - radius);
+      ctx.arcTo(x + w, y + h, x + w - radius, y + h, radius);
+      ctx.lineTo(x + radius, y + h);
+      ctx.arcTo(x, y + h, x, y + h - radius, radius);
+      ctx.lineTo(x, y + radius);
+      ctx.arcTo(x, y, x + radius, y, radius);
+    } else {
+      ctx.rect(x, y, w, h);
+    }
+  }
+  // --- Content rendering (overrides Node.renderContents) ---
+  renderContents(ctx) {
+    ctx.setLineDash([]);
+    ctx.lineDashOffset = 0;
+    const contentBounds = this.getContentBounds();
+    this._content.render(ctx, contentBounds);
+    this.renderPorts(ctx);
+  }
+  applyAutoSize(ctx) {
+    const contentSize = this._content.measure(ctx);
+    const inset = this.contentInset;
+    const neededWidth = Math.max(
+      this._minWidth,
+      contentSize.width + inset.left + inset.right
+    );
+    const neededHeight = Math.max(
+      this._minHeight,
+      contentSize.height + inset.top + inset.bottom
+    );
+    if (neededWidth > this._width) {
+      this._width = neededWidth;
+    }
+    if (neededHeight > this._height) {
+      this._height = neededHeight;
+    }
+  }
+  // --- Outline methods for connections (delegate based on shapeType) ---
+  getLabelContainerBounds(bounds) {
+    if (this._shapeType === "circle") {
+      const factor = 1 / Math.SQRT2;
+      const w = bounds.width * factor;
+      const h = bounds.height * factor;
+      return {
+        x: bounds.x + (bounds.width - w) / 2,
+        y: bounds.y + (bounds.height - h) / 2,
+        width: w,
+        height: h
+      };
+    }
+    if (this._shapeType === "diamond") {
+      const w = bounds.width / 2;
+      const h = bounds.height / 2;
+      return {
+        x: bounds.x + (bounds.width - w) / 2,
+        y: bounds.y + (bounds.height - h) / 2,
+        width: w,
+        height: h
+      };
+    }
+    const ci = this.contentInset;
+    return {
+      x: bounds.x + ci.left,
+      y: bounds.y + ci.top,
+      width: Math.max(0, bounds.width - ci.left - ci.right),
+      height: Math.max(0, bounds.height - ci.top - ci.bottom)
+    };
+  }
+  /**
+   * Get the minimum content size needed for the content tree.
+   * Useful for external auto-sizing logic.
+   */
+  getContentMinSize(ctx) {
+    return this._content.measure(ctx);
+  }
+}
+function text(options) {
+  return new CText(options);
+}
+function icon(options) {
+  return new CIcon(options);
+}
+function divider(options) {
+  return new CDivider(options);
+}
+function container(options) {
+  return new CContainer(options);
+}
+function shape(options) {
+  return new CShape(options);
+}
+const DEFAULT_THEME = {
+  name: "default",
+  colors: {
+    background: "#ffffff",
+    grid: "#e5e5e5",
+    selection: "rgba(59, 130, 246, 0.1)",
+    connectionPreview: "#3b82f6"
+  },
+  node: {
+    default: {
+      fillColor: "#ffffff",
+      strokeColor: "#333333",
+      strokeWidth: 2,
+      opacity: 1,
+      cornerRadius: 4
+    },
+    hover: {
+      fillColor: "#f5f5f5",
+      strokeColor: "#6366f1",
+      strokeWidth: 2,
+      opacity: 1,
+      cornerRadius: 4
+    },
+    selected: {
+      strokeColor: "#3b82f6",
+      strokeWidth: 2,
+      opacity: 1
+    },
+    dragging: {
+      strokeColor: "#333333",
+      strokeWidth: 2,
+      opacity: 0.8
+    }
+  },
+  edge: {
+    default: {
+      strokeColor: "#666666",
+      strokeWidth: 2,
+      opacity: 1
+    },
+    hover: {
+      strokeColor: "#6366f1",
+      strokeWidth: 2,
+      opacity: 1
+    },
+    selected: {
+      strokeColor: "#3b82f6",
+      strokeWidth: 3,
+      opacity: 1
+    }
+  },
+  text: {
+    font: "14px sans-serif",
+    fontSize: 14,
+    fontFamily: "sans-serif",
+    fontWeight: "normal",
+    color: "#333333",
+    align: "center",
+    baseline: "middle"
+  },
+  port: {
+    default: { color: "#666666", radius: 6 },
+    hover: { color: "#3b82f6", radius: 7 }
+  },
+  group: {
+    default: {
+      fillColor: "rgba(200, 200, 200, 0.2)",
+      strokeColor: "#999999",
+      strokeWidth: 1,
+      opacity: 1
+    },
+    selected: {
+      fillColor: "rgba(59, 130, 246, 0.1)",
+      strokeColor: "#3b82f6",
+      strokeWidth: 2,
+      opacity: 1
+    }
+  }
+};
+const DARK_THEME = {
+  name: "dark",
+  colors: {
+    background: "#1a1a1a",
+    grid: "#333333",
+    selection: "rgba(99, 102, 241, 0.2)",
+    connectionPreview: "#6366f1"
+  },
+  node: {
+    default: {
+      fillColor: "#2d2d2d",
+      strokeColor: "#555555",
+      strokeWidth: 2,
+      opacity: 1,
+      cornerRadius: 4
+    },
+    hover: {
+      fillColor: "#3d3d3d",
+      strokeColor: "#6366f1",
+      strokeWidth: 2,
+      opacity: 1,
+      cornerRadius: 4
+    },
+    selected: {
+      fillColor: "#2d2d2d",
+      strokeColor: "#555555",
+      strokeWidth: 2,
+      opacity: 1,
+      cornerRadius: 4
+    },
+    dragging: {
+      fillColor: "#404040",
+      strokeColor: "#555555",
+      strokeWidth: 2,
+      opacity: 0.8,
+      cornerRadius: 4
+    }
+  },
+  edge: {
+    default: {
+      strokeColor: "#888888",
+      strokeWidth: 2,
+      opacity: 1
+    },
+    hover: {
+      strokeColor: "#6366f1",
+      strokeWidth: 2,
+      opacity: 1
+    },
+    selected: {
+      strokeColor: "#818cf8",
+      strokeWidth: 3,
+      opacity: 1
+    }
+  },
+  text: {
+    font: "14px sans-serif",
+    fontSize: 14,
+    fontFamily: "sans-serif",
+    fontWeight: "normal",
+    color: "#e0e0e0",
+    align: "center",
+    baseline: "middle"
+  },
+  port: {
+    default: { color: "#888888", radius: 6 },
+    hover: { color: "#6366f1", radius: 7 }
+  },
+  group: {
+    default: {
+      fillColor: "rgba(100, 100, 100, 0.2)",
+      strokeColor: "#666666",
+      strokeWidth: 1,
+      opacity: 1
+    },
+    selected: {
+      fillColor: "rgba(99, 102, 241, 0.2)",
+      strokeColor: "#6366f1",
+      strokeWidth: 2,
+      opacity: 1
+    }
+  }
+};
+class StyleManager {
+  constructor(theme) {
+    this._classes = /* @__PURE__ */ new Map();
+    this._builtInThemes = /* @__PURE__ */ new Map([
+      ["default", DEFAULT_THEME],
+      ["dark", DARK_THEME]
+    ]);
+    if (theme === void 0) {
+      this._theme = DEFAULT_THEME;
+    } else if (typeof theme === "string") {
+      this._theme = this._builtInThemes.get(theme) ?? DEFAULT_THEME;
+    } else {
+      this._theme = theme;
     }
   }
   /**
@@ -10873,12 +12446,12 @@ class Serializer {
         label = node.label.text;
       }
     }
-    let icon;
+    let icon2;
     if (node.icon) {
       const opts = node.icon.options;
       const source = typeof opts.source === "string" ? opts.source : void 0;
       if (source) {
-        icon = omitEmptyValues({
+        icon2 = omitEmptyValues({
           source,
           width: opts.width,
           height: opts.height,
@@ -10899,7 +12472,7 @@ class Serializer {
     }
     const contentInset = node.contentInset;
     const hasContentInset = contentInset.top !== 0 || contentInset.right !== 0 || contentInset.bottom !== 0 || contentInset.left !== 0;
-    return omitEmptyValues({
+    const base = omitEmptyValues({
       id: node.id,
       type: node.typeName,
       x: node.x,
@@ -10910,12 +12483,23 @@ class Serializer {
       styleClass: node.styleClass,
       label,
       labelStyleClass: typeof label === "string" ? node.label?.styleClass : void 0,
-      icon,
+      icon: icon2,
       contentInset: hasContentInset ? contentInset : void 0,
       anchorPoints,
       ports: ports.length > 0 ? ports : void 0,
       data: Object.keys(node.data).length > 0 ? node.data : void 0
     });
+    if (node.typeName === "composite") {
+      const cn = node;
+      const ext = base;
+      ext.content = cn.content.serialize();
+      ext.shapeType = cn.shapeType;
+      if (cn.cornerRadius !== 0) ext.cornerRadius = cn.cornerRadius;
+      ext.autoSize = cn.autoSize;
+      if (cn.minWidth !== 0) ext.minWidth = cn.minWidth;
+      if (cn.minHeight !== 0) ext.minHeight = cn.minHeight;
+    }
+    return base;
   }
   serializeEdge(edge) {
     return {
@@ -10932,6 +12516,8 @@ class Serializer {
       label: edge.label?.text,
       labelStyleClass: edge.label?.styleClass,
       labelOffset: edge.labelOffset !== 0 ? edge.labelOffset : void 0,
+      labelPosition: edge.labelPosition !== 0.5 ? edge.labelPosition : void 0,
+      labelFollowPath: edge.labelFollowPath ? true : void 0,
       labelBackground: edge.labelBackground,
       labelLineGap: edge.labelLineGap ? true : void 0,
       data: Object.keys(edge.data).length > 0 ? edge.data : void 0
@@ -11290,16 +12876,16 @@ class SvgExporter {
     const strokeOpacity = (style.strokeOpacity ?? 1) * baseOpacity;
     const dash = style.lineDash?.length ? ` stroke-dasharray="${style.lineDash.join(" ")}"` : "";
     const dashOffset = style.lineDashOffset !== void 0 ? ` stroke-dashoffset="${style.lineDashOffset}"` : "";
-    let shape;
+    let shape2;
     switch (node.typeName) {
       case "rectangle": {
         const radius = this.getNodeCornerRadius(node, bounds);
-        shape = `<rect x="${bounds.x}" y="${bounds.y}" width="${bounds.width}" height="${bounds.height}" rx="${radius}" ry="${radius}"`;
+        shape2 = `<rect x="${bounds.x}" y="${bounds.y}" width="${bounds.width}" height="${bounds.height}" rx="${radius}" ry="${radius}"`;
         break;
       }
       case "circle": {
         const center = node.getCenter();
-        shape = `<ellipse cx="${center.x}" cy="${center.y}" rx="${bounds.width / 2}" ry="${bounds.height / 2}"`;
+        shape2 = `<ellipse cx="${center.x}" cy="${center.y}" rx="${bounds.width / 2}" ry="${bounds.height / 2}"`;
         break;
       }
       case "diamond": {
@@ -11312,27 +12898,61 @@ class SvgExporter {
           `${center.x},${center.y + hh}`,
           `${center.x - hw},${center.y}`
         ].join(" ");
-        shape = `<polygon points="${points}"`;
+        shape2 = `<polygon points="${points}"`;
         break;
       }
       case "custom": {
         const svgPath = "getSvgPath" in node && typeof node.getSvgPath === "function" ? node.getSvgPath() : null;
         if (svgPath) {
-          shape = `<path d="${this.escapeAttribute(svgPath)}" transform="translate(${bounds.x}, ${bounds.y})"`;
+          shape2 = `<path d="${this.escapeAttribute(svgPath)}" transform="translate(${bounds.x}, ${bounds.y})"`;
         } else {
-          shape = `<rect x="${bounds.x}" y="${bounds.y}" width="${bounds.width}" height="${bounds.height}"`;
+          shape2 = `<rect x="${bounds.x}" y="${bounds.y}" width="${bounds.width}" height="${bounds.height}"`;
         }
         break;
       }
+      case "composite": {
+        const cn = node;
+        switch (cn.shapeType) {
+          case "circle": {
+            const center = node.getCenter();
+            shape2 = `<ellipse cx="${center.x}" cy="${center.y}" rx="${bounds.width / 2}" ry="${bounds.height / 2}"`;
+            break;
+          }
+          case "diamond": {
+            const center = node.getCenter();
+            const hw = bounds.width / 2;
+            const hh = bounds.height / 2;
+            const points = [
+              `${center.x},${center.y - hh}`,
+              `${center.x + hw},${center.y}`,
+              `${center.x},${center.y + hh}`,
+              `${center.x - hw},${center.y}`
+            ].join(" ");
+            shape2 = `<polygon points="${points}"`;
+            break;
+          }
+          default: {
+            const radius = cn.cornerRadius;
+            shape2 = `<rect x="${bounds.x}" y="${bounds.y}" width="${bounds.width}" height="${bounds.height}" rx="${radius}" ry="${radius}"`;
+            break;
+          }
+        }
+        const contentBounds = cn.getLabelContainerBounds(bounds);
+        const contentSvg = cn.content.toSVG(contentBounds);
+        return [
+          `${shape2} fill="${fill}" fill-opacity="${fillOpacity}" stroke="${stroke}" stroke-width="${strokeWidth}" stroke-opacity="${strokeOpacity}"${dash}${dashOffset}/>`,
+          contentSvg
+        ].join("");
+      }
       default: {
-        shape = `<rect x="${bounds.x}" y="${bounds.y}" width="${bounds.width}" height="${bounds.height}"`;
+        shape2 = `<rect x="${bounds.x}" y="${bounds.y}" width="${bounds.width}" height="${bounds.height}"`;
       }
     }
     const label = this.renderNodeLabel(node, bounds);
-    const icon = this.renderNodeIcon(node, bounds);
+    const icon2 = this.renderNodeIcon(node, bounds);
     return [
-      `${shape} fill="${fill}" fill-opacity="${fillOpacity}" stroke="${stroke}" stroke-width="${strokeWidth}" stroke-opacity="${strokeOpacity}"${dash}${dashOffset}/>`,
-      icon,
+      `${shape2} fill="${fill}" fill-opacity="${fillOpacity}" stroke="${stroke}" stroke-width="${strokeWidth}" stroke-opacity="${strokeOpacity}"${dash}${dashOffset}/>`,
+      icon2,
       label
     ].join("");
   }
@@ -11360,9 +12980,9 @@ class SvgExporter {
       return "";
     }
     const labelPoint = this.getEdgeLabelPoint(edge, edgeLabelOffset);
-    const text = this.renderTextLabel(edge.label.text, labelPoint, edge.label.style);
+    const text2 = this.renderTextLabel(edge.label.text, labelPoint, edge.label.style);
     const bg = this.renderEdgeLabelBackground(edge, labelPoint);
-    return `${bg}${text}`;
+    return `${bg}${text2}`;
   }
   renderEdgeLabelBackground(edge, point) {
     if (!edge.label) {
@@ -11398,12 +13018,12 @@ class SvgExporter {
       left: n(value.left)
     };
   }
-  measureTextLabel(text, style = {}, inset = 8) {
+  measureTextLabel(text2, style = {}, inset = 8) {
     const fontSize = style.fontSize ?? 14;
     const fontFamily = style.fontFamily ?? "sans-serif";
     const fontWeight = style.fontWeight ?? "normal";
     const lineHeight = fontSize * 1.2;
-    const lines = text.split("\n");
+    const lines = text2.split("\n");
     let maxWidth = 0;
     if (typeof document !== "undefined") {
       const canvas = document.createElement("canvas");
@@ -11516,7 +13136,7 @@ class SvgExporter {
       y: midpoint.y + effectiveOffset
     };
   }
-  renderTextLabel(text, point, style = {}) {
+  renderTextLabel(text2, point, style = {}) {
     const fill = style.color ?? "#000000";
     const fontSize = style.fontSize ?? 14;
     const fontFamily = style.fontFamily ?? "sans-serif";
@@ -11524,10 +13144,10 @@ class SvgExporter {
     const opacity = style.opacity ?? 1;
     const anchor = style.align === "left" ? "start" : style.align === "right" ? "end" : "middle";
     const baseline = style.baseline === "top" ? "text-before-edge" : style.baseline === "bottom" ? "text-after-edge" : "middle";
-    const lines = text.split("\n");
+    const lines = text2.split("\n");
     if (lines.length <= 1) {
       return `<text x="${point.x}" y="${point.y}" fill="${fill}" fill-opacity="${opacity}" font-size="${fontSize}" font-family="${fontFamily}" font-weight="${fontWeight}" text-anchor="${anchor}" dominant-baseline="${baseline}">${this.escapeText(
-        text
+        text2
       )}</text>`;
     }
     const lineHeight = fontSize * 1.2;
@@ -11596,16 +13216,16 @@ class SvgExporter {
     return Math.max(0, Math.min(rectangleRadius, bounds.width / 2, bounds.height / 2));
   }
   renderNodeIcon(node, nodeBounds) {
-    const icon = node.icon;
-    if (!icon) {
+    const icon2 = node.icon;
+    if (!icon2) {
       return "";
     }
-    const opts = icon.options;
-    const iconSize = icon.getSize();
+    const opts = icon2.options;
+    const iconSize = icon2.getSize();
     if (iconSize.width <= 0 || iconSize.height <= 0) {
       return "";
     }
-    const iconInset = icon.inset;
+    const iconInset = icon2.inset;
     const iconBoxSize = this.getIconBoxSize(iconSize, iconInset);
     const iconBounds = this.getIconBounds(
       nodeBounds,
@@ -11817,8 +13437,8 @@ class SvgExporter {
       "</svg>"
     ].join("");
   }
-  escapeText(text) {
-    return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+  escapeText(text2) {
+    return text2.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
   }
 }
 class AutoLayout {
@@ -12370,8 +13990,14 @@ export {
   AnimationManager,
   AutoLayout,
   AutoRouting,
+  CContainer,
+  CDivider,
+  CIcon,
+  CShape,
+  CText,
   CircleNode,
   CompositeCommand,
+  CompositeNode,
   ConnectionManager,
   ContextMenuManager,
   CustomShapeNode,
@@ -12416,15 +14042,21 @@ export {
   calculateBezierControlPoints,
   clamp,
   clonePoints,
+  container,
+  deserializeCComponent,
   distance,
   distanceToSegment,
   distributeNodes,
+  divider,
   drawRoundedRectPath,
   expandBounds,
+  flexLayout,
   generateId,
+  icon,
   isCornerPlacement,
   lerp,
   mergeBounds,
+  normalizeSides,
   pointInEllipse,
   pointInRect,
   rectIntersection,
@@ -12435,7 +14067,9 @@ export {
   resetPortIdCounter,
   rotatePoint,
   segmentRectIntersections,
+  shape,
   snapPointToGrid,
-  snapToGrid
+  snapToGrid,
+  text
 };
 //# sourceMappingURL=papirus.js.map