@crazyhappyone/auto-graph 0.0.1 → 0.0.2

package/dist/index.cjs

@@ -1,11 +1,13 @@
 'use strict';
 
+var module$1 = require('module');
 var pretext = require('@chenglou/pretext');
 var buffer = require('buffer');
 var yaml = require('yaml');
 var zod = require('zod');
 var dagre = require('@dagrejs/dagre');
 
+var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 // src/geometry/boxes.ts
 function normalizeInsets(input = 0) {
   if (typeof input === "number") {
@@ -822,34 +824,34 @@ function assertFiniteNonNegative(value, label) {
     throw new TypeError(`${label} must be a finite non-negative width`);
   }
 }
-function validateTextStyle(style) {
-  assertFinitePositive(style.fontSize, "fontSize");
-  if (style.lineHeight !== void 0) {
-    assertFinitePositive(style.lineHeight, "lineHeight");
+function validateTextStyle(style2) {
+  assertFinitePositive(style2.fontSize, "fontSize");
+  if (style2.lineHeight !== void 0) {
+    assertFinitePositive(style2.lineHeight, "lineHeight");
   }
-  if (style.letterSpacing !== void 0 && !Number.isFinite(style.letterSpacing)) {
+  if (style2.letterSpacing !== void 0 && !Number.isFinite(style2.letterSpacing)) {
     throw new TypeError("letterSpacing must be finite");
   }
 }
-function resolveLineHeight(style) {
-  validateTextStyle(style);
-  return style.lineHeight ?? style.fontSize * 1.2;
+function resolveLineHeight(style2) {
+  validateTextStyle(style2);
+  return style2.lineHeight ?? style2.fontSize * 1.2;
 }
-function toCanvasFont(style) {
-  validateTextStyle(style);
-  const fontStyle = style.fontStyle === "italic" ? "italic " : "";
-  const fontWeight = style.fontWeight ?? 400;
-  return `${fontStyle}${fontWeight} ${style.fontSize}px ${style.fontFamily}`;
+function toCanvasFont(style2) {
+  validateTextStyle(style2);
+  const fontStyle = style2.fontStyle === "italic" ? "italic " : "";
+  const fontWeight = style2.fontWeight ?? 400;
+  return `${fontStyle}${fontWeight} ${style2.fontSize}px ${style2.fontFamily}`;
 }
 
 // src/text/fallback.ts
 var DeterministicTextMeasurer = class {
-  prepare(text, style) {
-    validateTextStyle(style);
+  prepare(text, style2) {
+    validateTextStyle(style2);
     return {
       text,
-      font: toCanvasFont(style),
-      style: { ...style },
+      font: toCanvasFont(style2),
+      style: { ...style2 },
       backend: "deterministic"
     };
   }
@@ -908,9 +910,9 @@ var DeterministicTextMeasurer = class {
     return output;
   }
 };
-function getCharacterWidth(style) {
-  const letterSpacing = style.letterSpacing ?? 0;
-  return Math.max(0, style.fontSize * 0.6 + letterSpacing);
+function getCharacterWidth(style2) {
+  const letterSpacing = style2.letterSpacing ?? 0;
+  return Math.max(0, style2.fontSize * 0.6 + letterSpacing);
 }
 function createLine(text, width, segmentIndex, start, end) {
   return {
@@ -931,27 +933,53 @@ function assertFinitePositiveLineHeight(lineHeight) {
     throw new TypeError("lineHeight must be finite and positive");
   }
 }
+var require2 = module$1.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('index.cjs', document.baseURI).href)));
+function installNodeCanvasRuntime(loadNodeCanvasModule = loadDefaultNodeCanvasModule) {
+  if (typeof globalThis.OffscreenCanvas === "function") {
+    return true;
+  }
+  try {
+    const canvasModule = loadNodeCanvasModule();
+    const { createCanvas } = canvasModule;
+    const NodeOffscreenCanvas = class {
+      canvas;
+      constructor(width, height) {
+        this.canvas = createCanvas(width, height);
+      }
+      getContext(contextId) {
+        return contextId === "2d" ? this.canvas.getContext("2d") : null;
+      }
+    };
+    globalThis.OffscreenCanvas = NodeOffscreenCanvas;
+    return true;
+  } catch {
+    return false;
+  }
+}
+function loadDefaultNodeCanvasModule() {
+  return require2("@napi-rs/canvas");
+}
 var RUNTIME_UNAVAILABLE = "text.pretext.runtime-unavailable";
 function isPretextRuntimeAvailable() {
   return typeof Intl.Segmenter === "function" && typeof globalThis.OffscreenCanvas === "function";
 }
 var PretextTextMeasurer = class {
-  prepare(text, style) {
+  prepare(text, style2) {
     if (!isPretextRuntimeAvailable()) {
       throw new TypeError(RUNTIME_UNAVAILABLE);
     }
-    validateTextStyle(style);
-    const font = toCanvasFont(style);
+    validateTextStyle(style2);
+    const font = toCanvasFont(style2);
     const options = {
-      ...style.whiteSpace === void 0 ? {} : { whiteSpace: style.whiteSpace },
-      ...style.wordBreak === void 0 ? {} : { wordBreak: style.wordBreak },
-      ...style.letterSpacing === void 0 ? {} : { letterSpacing: style.letterSpacing }
+      ...style2.whiteSpace === void 0 ? {} : { whiteSpace: style2.whiteSpace },
+      ...style2.wordBreak === void 0 ? {} : { wordBreak: style2.wordBreak },
+      ...style2.letterSpacing === void 0 ? {} : { letterSpacing: style2.letterSpacing }
     };
     const prepared = pretext.prepareWithSegments(text, font, options);
     return {
       text,
       font,
-      style: { ...style },
+      style: { ...style2 },
       backend: "pretext",
       pretextPrepared: prepared
     };
@@ -1001,6 +1029,13 @@ function toInternalPrepared(prepared) {
   return prepared.pretextPrepared;
 }
 
+// src/text/default.ts
+function createDefaultTextMeasurer(options = {}) {
+  const installRuntime = options.installNodeCanvasRuntime ?? installNodeCanvasRuntime;
+  installRuntime();
+  return isPretextRuntimeAvailable() ? new PretextTextMeasurer() : new DeterministicTextMeasurer();
+}
+
 // src/labels/fit.ts
 function fitLabel(text, options, measurer) {
   return computeLabelLayout(text, options, measurer);
@@ -1067,6 +1102,7 @@ function computeLabelLayout(text, options, measurer) {
     fittedSize,
     padding,
     font: { ...options.font },
+    textBackend: prepared.backend,
     lineHeight,
     lines: buildLines(textLayout, contentBox2, lineHeight),
     overflow,
@@ -1161,8 +1197,9 @@ function normalizeDiagramDsl(dslValue, options = {}) {
       ...outputResult(dsl)
     };
   }
-  const measurer = options.textMeasurer ?? new DeterministicTextMeasurer();
+  const measurer = options.textMeasurer ?? createDefaultTextMeasurer();
   const routeKind = dsl.routing?.kind ?? "orthogonal";
+  const portShifting = normalizePortShifting(dsl.routing?.portShifting);
   const diagram = {
     id: options.id ?? dsl.id ?? "diagram",
     ...dsl.title === void 0 ? {} : { title: dsl.title },
@@ -1170,9 +1207,14 @@ function normalizeDiagramDsl(dslValue, options = {}) {
     nodes: normalizeNodes(dsl, measurer),
     edges: normalizeEdges(dsl),
     groups: normalizeGroups(dsl, measurer),
+    swimlanes: normalizeSwimlanes(dsl),
     constraints: normalizeConstraints(dsl),
     diagnostics: [],
-    metadata: { routeKind }
+    ...dsl.frame === void 0 ? {} : { frame: normalizeFrame(dsl.frame) },
+    metadata: {
+      routeKind,
+      ...portShifting === void 0 ? {} : { portShifting }
+    }
   };
   return {
     diagram,
@@ -1180,6 +1222,15 @@ function normalizeDiagramDsl(dslValue, options = {}) {
     ...outputResult(dsl)
   };
 }
+function normalizePortShifting(portShifting) {
+  if (portShifting === void 0) {
+    return void 0;
+  }
+  return {
+    ...portShifting.enabled === void 0 ? {} : { enabled: portShifting.enabled },
+    ...portShifting.spacing === void 0 ? {} : { spacing: portShifting.spacing }
+  };
+}
 function outputResult(dsl) {
   return dsl.output?.format === void 0 ? {} : { output: { format: dsl.output.format } };
 }
@@ -1189,15 +1240,24 @@ function normalizeNodes(dsl, measurer) {
     const label = toLabel(node?.label);
     const labelLayout = label === void 0 ? void 0 : fitDslLabel(label, measurer);
     const fittedSize = labelLayout?.fittedSize;
+    const nodeCompartments = node?.compartments === void 0 ? void 0 : compartments(node.compartments);
+    const compartmentWidth = nodeCompartments === void 0 ? 0 : compartmentNaturalWidth(id, label, nodeCompartments, measurer);
     return {
       id,
       ...label === void 0 ? {} : { label },
       shape: node?.shape ?? "rectangle",
       ...node?.position === void 0 ? {} : { position: point(node.position) },
+      ...node?.style === void 0 ? {} : { style: style(node.style) },
+      ...node?.ports === void 0 ? {} : { ports: normalizePorts(node.ports) },
+      ...nodeCompartments === void 0 ? {} : { compartments: nodeCompartments },
       size: {
-        width: Math.max(DEFAULT_NODE_MIN_SIZE.width, fittedSize?.width ?? 0),
+        width: Math.max(
+          DEFAULT_NODE_MIN_SIZE.width,
+          fittedSize?.width ?? 0,
+          compartmentWidth
+        ),
         height: Math.max(
-          DEFAULT_NODE_MIN_SIZE.height,
+          nodeCompartments === void 0 ? DEFAULT_NODE_MIN_SIZE.height : compartmentHeight(nodeCompartments),
           fittedSize?.height ?? 0
         )
       },
@@ -1206,11 +1266,42 @@ function normalizeNodes(dsl, measurer) {
     };
   });
 }
+function compartmentHeight(value) {
+  const rowCount = (value.stereotype === void 0 ? 0 : 1) + 1 + (value.properties?.length ?? 0) + (value.constraints?.length ?? 0);
+  const rowHeight = 16;
+  const verticalPadding = 20;
+  return Math.max(
+    DEFAULT_NODE_MIN_SIZE.height,
+    rowCount * rowHeight + verticalPadding
+  );
+}
+function compartmentNaturalWidth(id, label, value, measurer) {
+  const rows = compartmentRows(id, label, value);
+  const maxRowWidth = rows.reduce((width, row) => {
+    const prepared = measurer.prepare(row, DEFAULT_FONT);
+    return Math.max(width, measurer.naturalWidth(prepared));
+  }, 0);
+  return Math.ceil(
+    maxRowWidth + DEFAULT_NODE_PADDING.left + DEFAULT_NODE_PADDING.right
+  );
+}
+function compartmentRows(id, label, value) {
+  return [
+    ...value.stereotype === void 0 ? [] : [value.stereotype],
+    value.name ?? label?.text ?? id,
+    ...value.properties ?? [],
+    ...value.constraints ?? []
+  ];
+}
 function normalizeEdges(dsl) {
   const counts = /* @__PURE__ */ new Map();
   return (dsl.edges ?? []).map((edge) => {
-    const sourceId = typeof edge === "string" ? "" : edge.sourceId ?? edge.source ?? "";
-    const targetId = typeof edge === "string" ? "" : edge.targetId ?? edge.target ?? "";
+    const source = typeof edge === "string" ? void 0 : edge.source;
+    const target = typeof edge === "string" ? void 0 : edge.target;
+    const sourceId = typeof edge === "string" ? "" : edge.sourceId ?? endpointNodeId(source) ?? "";
+    const targetId = typeof edge === "string" ? "" : edge.targetId ?? endpointNodeId(target) ?? "";
+    const sourceEndpoint = typeof edge === "string" ? { nodeId: sourceId } : endpoint(source, edge.sourceId);
+    const targetEndpoint = typeof edge === "string" ? { nodeId: targetId } : endpoint(target, edge.targetId);
     const baseId = `${sourceId}-${targetId}`;
     const count = counts.get(baseId) ?? 0;
     counts.set(baseId, count + 1);
@@ -1218,9 +1309,96 @@ function normalizeEdges(dsl) {
     const label = typeof edge === "string" ? void 0 : toLabel(edge.label);
     return {
       id,
-      source: { nodeId: sourceId },
-      target: { nodeId: targetId },
-      ...label === void 0 ? {} : { label }
+      source: sourceEndpoint,
+      target: targetEndpoint,
+      ...label === void 0 ? {} : { label },
+      ...typeof edge === "string" || edge.style === void 0 ? {} : { style: edge.style },
+      ...typeof edge === "string" || edge.arrowhead === void 0 ? {} : { arrowhead: edge.arrowhead }
+    };
+  });
+}
+function normalizePorts(ports) {
+  return Object.keys(ports ?? {}).sort().map((id) => {
+    const port = ports?.[id];
+    const label = toLabel(port?.label);
+    return {
+      id,
+      ...label === void 0 ? {} : { label },
+      side: port?.side ?? "right",
+      kind: port?.kind ?? "proxy",
+      ...port?.order === void 0 ? {} : { order: port.order },
+      ...port?.style === void 0 ? {} : { style: style(port.style) }
+    };
+  });
+}
+function endpoint(value, nodeIdOverride) {
+  if (nodeIdOverride !== void 0) {
+    return {
+      nodeId: nodeIdOverride,
+      ...typeof value === "object" && value.node === nodeIdOverride && value.port !== void 0 ? { portId: value.port } : {}
+    };
+  }
+  if (value === void 0) {
+    return { nodeId: "" };
+  }
+  if (typeof value === "string") {
+    return { nodeId: value };
+  }
+  return {
+    nodeId: value.node,
+    ...value.port === void 0 ? {} : { portId: value.port }
+  };
+}
+function style(value) {
+  return {
+    ...value.fill === void 0 ? {} : { fill: value.fill },
+    ...value.stroke === void 0 ? {} : { stroke: value.stroke }
+  };
+}
+function compartments(value) {
+  return {
+    ...value.stereotype === void 0 ? {} : { stereotype: value.stereotype },
+    ...value.name === void 0 ? {} : { name: value.name },
+    ...value.properties === void 0 ? {} : { properties: value.properties.map(formatCompartmentEntry) },
+    ...value.constraints === void 0 ? {} : { constraints: [...value.constraints] }
+  };
+}
+function normalizeFrame(frame) {
+  return {
+    kind: frame.kind,
+    ...frame.context === void 0 ? {} : { context: frame.context },
+    ...frame.name === void 0 ? {} : { name: frame.name },
+    titleTab: frame.titleTab,
+    ...frame.style === void 0 ? {} : { style: style(frame.style) }
+  };
+}
+function formatCompartmentEntry(value) {
+  if (typeof value === "string") {
+    return value;
+  }
+  const [entry] = Object.entries(value);
+  if (entry === void 0) {
+    return "";
+  }
+  return `${entry[0]}: ${entry[1]}`;
+}
+function normalizeSwimlanes(dsl) {
+  return Object.keys(dsl.swimlanes ?? {}).sort().map((id) => {
+    const swimlane = dsl.swimlanes?.[id];
+    const label = toLabel(swimlane?.label);
+    return {
+      id,
+      ...label === void 0 ? {} : { label },
+      orientation: swimlane?.orientation ?? "vertical",
+      lanes: Object.keys(swimlane?.lanes ?? {}).sort().map((laneId) => {
+        const lane = swimlane?.lanes[laneId];
+        const laneLabel = toLabel(lane?.label);
+        return {
+          id: laneId,
+          ...laneLabel === void 0 ? {} : { label: laneLabel },
+          children: [...lane?.children ?? []]
+        };
+      })
     };
   });
 }
@@ -1290,18 +1468,37 @@ function validateReferences(dsl) {
   const diagnostics = [];
   const nodeIds = new Set(Object.keys(dsl.nodes));
   const groupIds = new Set(Object.keys(dsl.groups ?? {}));
+  const swimlaneLaneIds = new Set(
+    Object.entries(dsl.swimlanes ?? {}).flatMap(
+      ([swimlaneId, swimlane]) => Object.keys(swimlane.lanes).map((laneId) => `${swimlaneId}.${laneId}`)
+    )
+  );
   (dsl.edges ?? []).forEach((edge, index) => {
     if (typeof edge === "string") {
       return;
     }
-    const sourceId = edge.sourceId ?? edge.source;
-    const targetId = edge.targetId ?? edge.target;
+    const sourceId = edge.sourceId ?? endpointNodeId(edge.source);
+    const targetId = edge.targetId ?? endpointNodeId(edge.target);
+    const sourceEndpoint = endpoint(edge.source, edge.sourceId);
+    const targetEndpoint = endpoint(edge.target, edge.targetId);
     if (sourceId !== void 0 && !nodeIds.has(sourceId)) {
       diagnostics.push(referenceMissing(["edges", index, "source"], sourceId));
     }
     if (targetId !== void 0 && !nodeIds.has(targetId)) {
       diagnostics.push(referenceMissing(["edges", index, "target"], targetId));
     }
+    validateEndpointPort(
+      dsl,
+      sourceEndpoint,
+      ["edges", index, "source"],
+      diagnostics
+    );
+    validateEndpointPort(
+      dsl,
+      targetEndpoint,
+      ["edges", index, "target"],
+      diagnostics
+    );
   });
   for (const [groupId, group] of Object.entries(dsl.groups ?? {})) {
     (group.nodes ?? []).forEach((nodeId, index) => {
@@ -1319,6 +1516,27 @@ function validateReferences(dsl) {
       }
     });
   }
+  for (const [swimlaneId, swimlane] of Object.entries(dsl.swimlanes ?? {})) {
+    for (const [laneId, lane] of Object.entries(swimlane.lanes)) {
+      (lane.children ?? []).forEach((child, childIndex) => {
+        if (!nodeIds.has(child)) {
+          diagnostics.push(
+            referenceMissing(
+              [
+                "swimlanes",
+                swimlaneId,
+                "lanes",
+                laneId,
+                "children",
+                childIndex
+              ],
+              child
+            )
+          );
+        }
+      });
+    }
+  }
   (dsl.constraints ?? []).forEach((constraint, index) => {
     switch (constraint.kind) {
       case "exact-position": {
@@ -1362,7 +1580,7 @@ function validateReferences(dsl) {
         break;
       case "containment": {
         const container = constraint.containerId ?? constraint.container;
-        if (container !== void 0 && !hasNodeOrGroup(container, nodeIds, groupIds)) {
+        if (container !== void 0 && !hasNodeOrGroup(container, nodeIds, groupIds, swimlaneLaneIds)) {
           diagnostics.push(
             referenceMissing(["constraints", index, "container"], container)
           );
@@ -1395,8 +1613,23 @@ function referenceMissing(path, id) {
     hint: "Define the referenced node or group id, or update this reference."
   };
 }
-function hasNodeOrGroup(id, nodeIds, groupIds) {
-  return nodeIds.has(id) || groupIds.has(id);
+function hasNodeOrGroup(id, nodeIds, groupIds, swimlaneLaneIds = /* @__PURE__ */ new Set()) {
+  return nodeIds.has(id) || groupIds.has(id) || swimlaneLaneIds.has(id);
+}
+function endpointNodeId(endpointValue) {
+  if (typeof endpointValue === "string" || endpointValue === void 0) {
+    return endpointValue;
+  }
+  return endpointValue.node;
+}
+function validateEndpointPort(dsl, endpointValue, path, diagnostics) {
+  if (endpointValue.portId === void 0) {
+    return;
+  }
+  const node = dsl.nodes[endpointValue.nodeId];
+  if (node !== void 0 && node.ports?.[endpointValue.portId] === void 0) {
+    diagnostics.push(referenceMissing([...path, "port"], endpointValue.portId));
+  }
 }
 function toLabel(value) {
   if (value === void 0) {
@@ -1425,6 +1658,8 @@ function point(value) {
 var directionSchema = zod.z.enum(["TB", "LR", "BT", "RL"]);
 var routeKindSchema = zod.z.enum(["orthogonal", "straight"]);
 var outputFormatSchema = zod.z.enum(["svg", "excalidraw"]);
+var edgeStrokeStyleSchema = zod.z.enum(["solid", "dashed"]);
+var edgeArrowheadSchema = zod.z.enum(["triangle", "hollowTriangle"]);
 var nodeShapeSchema = zod.z.enum([
   "rectangle",
   "rounded-rectangle",
@@ -1452,18 +1687,49 @@ var labelSchema = zod.z.union([
     maxWidth: finiteNumberSchema.optional()
   })
 ]);
+var styleSchema = zod.z.object({
+  fill: zod.z.string().optional(),
+  stroke: zod.z.string().optional()
+});
+var portSideSchema = zod.z.enum(["top", "right", "bottom", "left"]);
+var portKindSchema = zod.z.enum(["proxy", "flow"]);
+var portSchema = zod.z.object({
+  label: labelSchema.optional(),
+  side: portSideSchema,
+  kind: portKindSchema.optional(),
+  order: finiteNumberSchema.optional(),
+  style: styleSchema.optional()
+});
+var compartmentsSchema = zod.z.object({
+  stereotype: zod.z.string().optional(),
+  name: zod.z.string().optional(),
+  properties: zod.z.array(zod.z.record(zod.z.string(), zod.z.string()).or(zod.z.string())).optional(),
+  constraints: zod.z.array(zod.z.string()).optional()
+});
 var nodeSchema = zod.z.object({
   label: labelSchema.optional(),
   shape: nodeShapeSchema.optional(),
-  position: pointSchema.optional()
+  position: pointSchema.optional(),
+  style: styleSchema.optional(),
+  ports: zod.z.record(zod.z.string(), portSchema).optional(),
+  compartments: compartmentsSchema.optional()
 });
+var endpointSchema = zod.z.union([
+  zod.z.string(),
+  zod.z.object({
+    node: zod.z.string(),
+    port: zod.z.string().optional()
+  })
+]);
 var structuredEdgeSchema = zod.z.object({
   id: zod.z.string().optional(),
-  source: zod.z.string().optional(),
-  target: zod.z.string().optional(),
+  source: endpointSchema.optional(),
+  target: endpointSchema.optional(),
   sourceId: zod.z.string().optional(),
   targetId: zod.z.string().optional(),
-  label: labelSchema.optional()
+  label: labelSchema.optional(),
+  style: edgeStrokeStyleSchema.optional(),
+  arrowhead: edgeArrowheadSchema.optional()
 }).superRefine((edge, context) => {
   if (edge.source === void 0 && edge.sourceId === void 0) {
     context.addIssue({
@@ -1487,6 +1753,17 @@ var groupSchema = zod.z.object({
   groups: zod.z.array(zod.z.string()).optional(),
   padding: insetsSchema.optional()
 });
+var swimlaneSchema = zod.z.object({
+  label: labelSchema.optional(),
+  orientation: zod.z.enum(["vertical", "horizontal"]).optional(),
+  lanes: zod.z.record(
+    zod.z.string(),
+    zod.z.object({
+      label: labelSchema.optional(),
+      children: zod.z.array(zod.z.string()).optional()
+    })
+  )
+});
 var exactPositionConstraintSchema = zod.z.object({
   kind: zod.z.literal("exact-position"),
   target: zod.z.string().optional(),
@@ -1547,12 +1824,24 @@ var diagramDslSchema = zod.z.object({
     direction: directionSchema.optional()
   }).optional(),
   routing: zod.z.object({
-    kind: routeKindSchema.optional()
+    kind: routeKindSchema.optional(),
+    portShifting: zod.z.object({
+      enabled: zod.z.boolean().optional(),
+      spacing: finiteNumberSchema.optional()
+    }).optional()
   }).optional(),
   nodes: zod.z.record(zod.z.string(), nodeSchema),
   edges: zod.z.array(edgeSchema).optional(),
   groups: zod.z.record(zod.z.string(), groupSchema).optional(),
+  swimlanes: zod.z.record(zod.z.string(), swimlaneSchema).optional(),
   constraints: zod.z.array(constraintSchema).optional(),
+  frame: zod.z.object({
+    kind: zod.z.string(),
+    context: zod.z.string().optional(),
+    name: zod.z.string().optional(),
+    titleTab: zod.z.string(),
+    style: styleSchema.optional()
+  }).optional(),
   output: zod.z.object({
     format: outputFormatSchema.optional()
   }).optional()
@@ -1828,11 +2117,12 @@ function renderArrow(edge) {
       height: box.height
     }),
     backgroundColor: "transparent",
+    strokeStyle: edge.style ?? "solid",
     points: relativePoints,
     startBinding: { elementId: `node:${edge.source.nodeId}`, focus: 0, gap: 0 },
     endBinding: { elementId: `node:${edge.target.nodeId}`, focus: 0, gap: 0 },
     startArrowhead: null,
-    endArrowhead: "arrow"
+    endArrowhead: mapArrowhead(edge.arrowhead)
   };
 }
 function renderText(id, label, box, containerId, groupIds) {
@@ -1910,6 +2200,16 @@ function mapShape(shape) {
       return "cylinder";
   }
 }
+function mapArrowhead(arrowhead) {
+  switch (arrowhead) {
+    case void 0:
+      return "arrow";
+    case "triangle":
+      return "triangle";
+    case "hollowTriangle":
+      return "triangle_outline";
+  }
+}
 function createGroupMembership(groups) {
   const membership = /* @__PURE__ */ new Map();
   for (const group of groups) {
@@ -1976,19 +2276,28 @@ function exportSvg(diagram, options = {}) {
     `<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="${formatBoxViewBox(diagram.bounds)}">`,
     ...title === void 0 ? [] : [`  <title>${escapeXml(title)}</title>`],
     `  <rect class="background" x="${formatNumber(diagram.bounds.x)}" y="${formatNumber(diagram.bounds.y)}" width="${formatNumber(diagram.bounds.width)}" height="${formatNumber(diagram.bounds.height)}" fill="#ffffff"/>`,
+    ...diagram.frame === void 0 ? [] : [indent(renderFrame(diagram.frame))],
+    ...(diagram.swimlanes ?? []).flatMap(
+      (swimlane) => renderSwimlane(swimlane)
+    ),
     ...diagram.groups.map((group) => indent(renderGroup2(group))),
     ...diagram.edges.flatMap((edge) => {
-      const path = renderEdgePath(edge.points, edge.id);
+      const path = renderEdgePath(edge);
       if (path === void 0) {
         return [];
       }
-      return [indent(path), indent(renderArrowhead(edge.points, edge.id))];
+      return [indent(path), indent(renderArrowhead(edge))];
     }),
     ...diagram.nodes.map((node) => indent(renderNode2(node))),
+    ...diagram.nodes.flatMap((node) => renderCompartments(node)),
+    ...diagram.nodes.flatMap((node) => renderPorts(node)),
     ...diagram.groups.flatMap(
       (group) => renderLabel(group.label, group.box, group)
     ),
-    ...diagram.nodes.flatMap((node) => renderLabel(node.label, node.box, node)),
+    ...diagram.nodes.flatMap(
+      (node) => node.compartments === void 0 ? renderLabel(node.label, node.box, node) : []
+    ),
+    ...diagram.edges.flatMap((edge) => renderEdgeLabel(edge)),
     "</svg>"
   ];
   return `${lines.join("\n")}
@@ -1998,7 +2307,9 @@ function renderGroup2(group) {
   return `<rect class="group" data-id="${escapeAttribute(group.id)}" x="${formatNumber(group.box.x)}" y="${formatNumber(group.box.y)}" width="${formatNumber(group.box.width)}" height="${formatNumber(group.box.height)}" fill="${GROUP_FILL}" stroke="${STROKE}" stroke-dasharray="6 4"/>`;
 }
 function renderNode2(node) {
-  const common = `class="node node-${node.shape}" data-id="${escapeAttribute(node.id)}" fill="${NODE_FILL}" stroke="${STROKE}"`;
+  const fill = node.style?.fill ?? NODE_FILL;
+  const stroke = node.style?.stroke ?? STROKE;
+  const common = `class="node node-${node.shape}" data-id="${escapeAttribute(node.id)}" fill="${escapeAttribute(fill)}" stroke="${escapeAttribute(stroke)}"`;
   switch (node.shape) {
     case "rectangle":
       return renderRect(node.box, common);
@@ -2014,16 +2325,111 @@ function renderNode2(node) {
       return `<path ${common} d="${formatCylinderPath(node.box)}"/>`;
   }
 }
+function renderFrame(frame) {
+  const stroke = frame.style?.stroke ?? "#6b7280";
+  const fill = frame.style?.fill ?? "transparent";
+  return [
+    `<g class="sysml-frame" data-kind="${escapeAttribute(frame.kind)}">`,
+    `  <rect class="sysml-frame-border" x="${formatNumber(frame.box.x)}" y="${formatNumber(frame.box.y)}" width="${formatNumber(frame.box.width)}" height="${formatNumber(frame.box.height)}" fill="${escapeAttribute(fill)}" stroke="${escapeAttribute(stroke)}"/>`,
+    `  <path class="sysml-title-tab" d="M ${formatNumber(frame.titleBox.x)} ${formatNumber(frame.titleBox.y + frame.titleBox.height)} L ${formatNumber(frame.titleBox.x)} ${formatNumber(frame.titleBox.y)} L ${formatNumber(frame.titleBox.x + frame.titleBox.width - 16)} ${formatNumber(frame.titleBox.y)} L ${formatNumber(frame.titleBox.x + frame.titleBox.width)} ${formatNumber(frame.titleBox.y + frame.titleBox.height)} Z" fill="#f3f4f6" stroke="${escapeAttribute(stroke)}"/>`,
+    `  <text class="sysml-title-tab-label" x="${formatNumber(frame.titleBox.x + 8)}" y="${formatNumber(frame.titleBox.y + frame.titleBox.height / 2)}" dominant-baseline="middle" font-family="${FONT_FAMILY}" font-size="12" fill="#111827">${escapeXml(frame.titleTab)}</text>`,
+    "</g>"
+  ].join("\n");
+}
+function renderSwimlane(swimlane) {
+  if (swimlane.box === void 0) {
+    return [];
+  }
+  const lines = [
+    `  <g class="swimlane" data-id="${escapeAttribute(swimlane.id)}">`,
+    `    <rect class="swimlane-frame" x="${formatNumber(swimlane.box.x)}" y="${formatNumber(swimlane.box.y)}" width="${formatNumber(swimlane.box.width)}" height="${formatNumber(swimlane.box.height)}" fill="#ffffff" stroke="${STROKE}"/>`
+  ];
+  for (const lane of swimlane.lanes) {
+    if (lane.box === void 0) {
+      continue;
+    }
+    lines.push(
+      `    <rect class="swimlane-lane" data-lane="${escapeAttribute(`${swimlane.id}.${lane.id}`)}" x="${formatNumber(lane.box.x)}" y="${formatNumber(lane.box.y)}" width="${formatNumber(lane.box.width)}" height="${formatNumber(lane.box.height)}" fill="none" stroke="${STROKE}"/>`
+    );
+    if (lane.label?.text !== void 0) {
+      lines.push(
+        `    <text class="swimlane-label" x="${formatNumber(lane.box.x + lane.box.width / 2)}" y="${formatNumber(lane.box.y + 16)}" text-anchor="middle" font-family="${FONT_FAMILY}" font-size="12" fill="#111827">${escapeXml(lane.label.text)}</text>`
+      );
+    }
+  }
+  lines.push("  </g>");
+  return lines;
+}
+function renderPorts(node) {
+  return (node.ports ?? []).flatMap((port) => [
+    `  <rect class="port" data-kind="${escapeAttribute(port.kind)}" data-port="${escapeAttribute(`${node.id}.${port.id}`)}" x="${formatNumber(port.box.x)}" y="${formatNumber(port.box.y)}" width="${formatNumber(port.box.width)}" height="${formatNumber(port.box.height)}" fill="${escapeAttribute(port.style?.fill ?? "#d9ead3")}" stroke="${escapeAttribute(port.style?.stroke ?? STROKE)}"/>`,
+    ...port.label?.text === void 0 ? [] : [
+      `  <text class="port-label" data-for="${escapeAttribute(`${node.id}.${port.id}`)}" x="${formatNumber(portLabelX(port.anchor.x, port.side))}" y="${formatNumber(port.anchor.y - 8)}" text-anchor="${port.side === "left" ? "end" : "start"}" font-family="${FONT_FAMILY}" font-size="10" fill="#111827">${escapeXml(port.label.text)}</text>`
+    ]
+  ]);
+}
+function renderCompartments(node) {
+  const compartments2 = node.compartments;
+  if (compartments2 === void 0) {
+    return [];
+  }
+  const rows = [
+    ...compartments2.stereotype === void 0 ? [] : [{ className: "stereotype", text: compartments2.stereotype }],
+    {
+      className: "name",
+      text: compartments2.name ?? node.label?.text ?? node.id
+    },
+    ...(compartments2.properties ?? []).map((text) => ({
+      className: "properties",
+      text
+    })),
+    ...(compartments2.constraints ?? []).map((text) => ({
+      className: "constraints",
+      text
+    }))
+  ];
+  const lineHeight = 16;
+  const lines = [
+    `  <g class="compartment" data-for="${escapeAttribute(node.id)}">`
+  ];
+  for (let index = 0; index < rows.length; index += 1) {
+    const row = rows[index];
+    if (row === void 0) {
+      continue;
+    }
+    const y = node.box.y + 18 + index * lineHeight;
+    if (index > 1) {
+      lines.push(
+        `    <line class="compartment-separator" x1="${formatNumber(node.box.x)}" y1="${formatNumber(y - 12)}" x2="${formatNumber(node.box.x + node.box.width)}" y2="${formatNumber(y - 12)}" stroke="${STROKE}"/>`
+      );
+    }
+    lines.push(
+      `    <text class="compartment-${row.className}" x="${formatNumber(node.box.x + node.box.width / 2)}" y="${formatNumber(y)}" text-anchor="middle" font-family="${FONT_FAMILY}" font-size="11" fill="#111827">${escapeXml(row.text)}</text>`
+    );
+  }
+  lines.push("  </g>");
+  return lines;
+}
+function portLabelX(x, side) {
+  if (side === "left") {
+    return x - 8;
+  }
+  if (side === "right") {
+    return x + 8;
+  }
+  return x + 8;
+}
 function renderRect(box, attributes) {
   return `<rect ${attributes} x="${formatNumber(box.x)}" y="${formatNumber(box.y)}" width="${formatNumber(box.width)}" height="${formatNumber(box.height)}"/>`;
 }
 function renderLabel(label, box, item) {
   const labelLayout = item.labelLayout;
   if (labelLayout?.lines !== void 0 && labelLayout.lines.length > 0) {
+    const offset = isAbsoluteLabelLayout(labelLayout.box, box) ? { x: 0, y: 0 } : { x: box.x, y: box.y };
     return [
       `  <text class="label" data-for="${escapeAttribute(item.id)}" font-family="${FONT_FAMILY}" font-size="${formatNumber(labelLayout.font.fontSize)}" fill="#111827">`,
       ...labelLayout.lines.map(
-        (line) => `    <tspan x="${formatNumber(line.box.x)}" y="${formatNumber(line.baselineY)}">${escapeXml(line.text)}</tspan>`
+        (line) => `    <tspan x="${formatNumber(offset.x + line.box.x)}" y="${formatNumber(offset.y + line.baselineY)}">${escapeXml(line.text)}</tspan>`
       ),
       "  </text>"
     ];
@@ -2035,15 +2441,91 @@ function renderLabel(label, box, item) {
     `  <text class="label" data-for="${escapeAttribute(item.id)}" x="${formatNumber(box.x + box.width / 2)}" y="${formatNumber(box.y + box.height / 2)}" text-anchor="middle" dominant-baseline="middle" font-family="${FONT_FAMILY}" font-size="14" fill="#111827">${escapeXml(label.text)}</text>`
   ];
 }
-function renderEdgePath(points, id) {
-  if (points.length < 2) {
+function renderEdgePath(edge) {
+  if (edge.points.length < 2) {
     return void 0;
   }
-  return `<path class="edge" data-id="${escapeAttribute(id)}" d="${formatPath(points)}" fill="none" stroke="${EDGE_STROKE}" stroke-width="1.5"/>`;
+  const dash = edge.style === "dashed" ? ' stroke-dasharray="6 4"' : "";
+  return `<path class="edge" data-id="${escapeAttribute(edge.id)}" d="${formatPath(pathPointsBeforeArrowhead(edge.points))}" fill="none" stroke="${EDGE_STROKE}" stroke-width="1.5"${dash}/>`;
 }
-function renderArrowhead(points, id) {
+function renderEdgeLabel(edge) {
+  if (edge.label?.text === void 0 || edge.points.length < 2) {
+    return [];
+  }
+  const placement = labelPlacementOnPolyline(edge.points);
+  if (placement === void 0) {
+    return [];
+  }
+  return [
+    `  <text class="edge-label" data-for="${escapeAttribute(edge.id)}" x="${formatNumber(placement.x)}" y="${formatNumber(placement.y)}" text-anchor="middle" dominant-baseline="middle" font-family="${FONT_FAMILY}" font-size="12" fill="#111827">${escapeXml(edge.label.text)}</text>`
+  ];
+}
+function renderArrowhead(edge) {
+  const arrowhead = computeArrowhead(edge.points);
+  const fill = edge.arrowhead === "hollowTriangle" ? "none" : EDGE_STROKE;
+  return `<polygon class="edge-arrowhead" data-edge="${escapeAttribute(edge.id)}" points="${formatPoints([arrowhead.tip, arrowhead.left, arrowhead.right])}" fill="${fill}" stroke="${EDGE_STROKE}"/>`;
+}
+function labelPlacementOnPolyline(points) {
+  const segments = nonZeroSegments(points);
+  const totalLength = segments.reduce(
+    (sum, segment) => sum + segment.length,
+    0
+  );
+  if (totalLength <= 0) {
+    return void 0;
+  }
+  let remaining = totalLength / 2;
+  for (const segment of segments) {
+    if (remaining <= segment.length) {
+      const ratio = remaining / segment.length;
+      const x = segment.start.x + (segment.end.x - segment.start.x) * ratio;
+      const y = segment.start.y + (segment.end.y - segment.start.y) * ratio;
+      const offset2 = labelOffset(segment);
+      return { x: x + offset2.x, y: y + offset2.y };
+    }
+    remaining -= segment.length;
+  }
+  const last = segments.at(-1);
+  if (last === void 0) {
+    return void 0;
+  }
+  const offset = labelOffset(last);
+  return { x: last.end.x + offset.x, y: last.end.y + offset.y };
+}
+function nonZeroSegments(points) {
+  const segments = [];
+  for (let index = 0; index < points.length - 1; index += 1) {
+    const start = points[index];
+    const end = points[index + 1];
+    if (start === void 0 || end === void 0) {
+      continue;
+    }
+    const length = Math.hypot(end.x - start.x, end.y - start.y);
+    if (length > 0) {
+      segments.push({ start, end, length });
+    }
+  }
+  return segments;
+}
+function labelOffset(segment) {
+  const offset = 10;
+  const dx = segment.end.x - segment.start.x;
+  const dy = segment.end.y - segment.start.y;
+  return {
+    x: -dy / segment.length * offset,
+    y: dx / segment.length * offset
+  };
+}
+function pathPointsBeforeArrowhead(points) {
   const arrowhead = computeArrowhead(points);
-  return `<polygon class="edge-arrowhead" data-edge="${escapeAttribute(id)}" points="${formatPoints([arrowhead.tip, arrowhead.left, arrowhead.right])}" fill="${EDGE_STROKE}" stroke="${EDGE_STROKE}"/>`;
+  const base = {
+    x: (arrowhead.left.x + arrowhead.right.x) / 2,
+    y: (arrowhead.left.y + arrowhead.right.y) / 2
+  };
+  return [...points.slice(0, -1), base];
+}
+function isAbsoluteLabelLayout(labelBox, itemBox) {
+  return labelBox.x >= itemBox.x && labelBox.y >= itemBox.y && labelBox.x + labelBox.width <= itemBox.x + itemBox.width && labelBox.y + labelBox.height <= itemBox.y + itemBox.height;
 }
 function shapePoints(shape, box) {
   const left = box.x;
@@ -2230,20 +2712,33 @@ function isValidDimension(value) {
 // src/routing/routes.ts
 function routeEdge(input) {
   const diagnostics = [];
+  const defaultAnchors = defaultAnchorsForGeometry(
+    input.source.box,
+    input.target.box,
+    input.direction
+  );
   const source = getEdgePort(
     input.source,
     input.target.center,
-    input.sourceAnchor
+    input.sourceAnchor ?? defaultAnchors.sourceAnchor
   );
   const target = getEdgePort(
     input.target,
     input.source.center,
-    input.targetAnchor
+    input.targetAnchor ?? defaultAnchors.targetAnchor
   );
   if ((input.kind ?? "orthogonal") === "straight") {
     return { points: simplifyRoute([source, target]), diagnostics };
   }
   const candidates = orthogonalCandidates(source, target, input.direction);
+  candidates.push(
+    ...expandedObstacleCandidates(
+      source,
+      target,
+      input.direction,
+      input.obstacles ?? []
+    )
+  );
   for (const candidate of candidates) {
     if (!routeIntersectsObstacles(candidate, input.obstacles ?? [])) {
       return { points: simplifyRoute(candidate), diagnostics };
@@ -2282,27 +2777,113 @@ function simplifyRoute(points) {
 function orthogonalCandidates(source, target, direction) {
   const midpointX = (source.x + target.x) / 2;
   const midpointY = (source.y + target.y) / 2;
-  const candidates = [
-    [source, { x: target.x, y: source.y }, target],
-    [source, { x: source.x, y: target.y }, target]
-  ];
+  const candidates = [];
   if (direction === "TB" || direction === "BT") {
     candidates.push([
       source,
-      { x: midpointX, y: source.y },
-      { x: midpointX, y: target.y },
+      { x: source.x, y: midpointY },
+      { x: target.x, y: midpointY },
       target
     ]);
   } else {
     candidates.push([
       source,
-      { x: source.x, y: midpointY },
-      { x: target.x, y: midpointY },
+      { x: midpointX, y: source.y },
+      { x: midpointX, y: target.y },
       target
     ]);
   }
+  candidates.push(
+    [source, { x: target.x, y: source.y }, target],
+    [source, { x: source.x, y: target.y }, target]
+  );
   return candidates;
 }
+function defaultSourceAnchor(direction) {
+  switch (direction) {
+    case "LR":
+      return "right";
+    case "RL":
+      return "left";
+    case "TB":
+      return "bottom";
+    case "BT":
+      return "top";
+  }
+}
+function defaultAnchorsForGeometry(source, target, direction) {
+  const dx = target.x + target.width / 2 - (source.x + source.width / 2);
+  const dy = target.y + target.height / 2 - (source.y + source.height / 2);
+  if (Math.abs(dy) > Math.abs(dx)) {
+    return dy >= 0 ? { sourceAnchor: "bottom", targetAnchor: "top" } : { sourceAnchor: "top", targetAnchor: "bottom" };
+  }
+  if (Math.abs(dx) > 0) {
+    return dx >= 0 ? { sourceAnchor: "right", targetAnchor: "left" } : { sourceAnchor: "left", targetAnchor: "right" };
+  }
+  return {
+    sourceAnchor: defaultSourceAnchor(direction),
+    targetAnchor: defaultTargetAnchor(direction)
+  };
+}
+function defaultTargetAnchor(direction) {
+  switch (direction) {
+    case "LR":
+      return "left";
+    case "RL":
+      return "right";
+    case "TB":
+      return "top";
+    case "BT":
+      return "bottom";
+  }
+}
+function expandedObstacleCandidates(source, target, direction, obstacles) {
+  if (obstacles.length === 0) {
+    return [];
+  }
+  const margin = 16;
+  const candidates = [];
+  if (direction === "TB" || direction === "BT") {
+    const lanes = sortedUniqueLanes(
+      obstacles.flatMap((obstacle) => [
+        obstacle.x - margin,
+        obstacle.x + obstacle.width + margin
+      ]),
+      (source.x + target.x) / 2
+    );
+    for (const laneX of lanes) {
+      candidates.push([
+        source,
+        { x: laneX, y: source.y },
+        { x: laneX, y: target.y },
+        target
+      ]);
+    }
+  } else {
+    const lanes = sortedUniqueLanes(
+      obstacles.flatMap((obstacle) => [
+        obstacle.y - margin,
+        obstacle.y + obstacle.height + margin
+      ]),
+      (source.y + target.y) / 2
+    );
+    for (const laneY of lanes) {
+      candidates.push([
+        source,
+        { x: source.x, y: laneY },
+        { x: target.x, y: laneY },
+        target
+      ]);
+    }
+  }
+  return candidates;
+}
+function sortedUniqueLanes(lanes, midpoint) {
+  return [...new Set(lanes)].filter((lane) => Number.isFinite(lane)).sort((left, right) => {
+    const distance = Math.abs(left - midpoint) - Math.abs(right - midpoint);
+    return distance === 0 ? left - right : distance;
+  });
+}
 function routeIntersectsObstacles(points, obstacles) {
   for (let index = 0; index < points.length - 1; index += 1) {
     const a = points[index];
@@ -2381,12 +2962,17 @@ function solveDiagram(diagram, options = {}) {
     options,
     diagnostics
   );
+  const coordinatedSwimlanes = coordinateSwimlanes(
+    diagram.swimlanes ?? [],
+    constrained.boxes
+  );
   const groupBoxes = new Map(
     coordinatedGroups.map((group) => [group.id, group.box])
   );
   const coordinatedEdges = coordinateEdges(
     edges,
     nodeGeometryById,
+    coordinatedNodes,
     [...nodeGeometryById.values()].map((geometry) => geometry.obstacleBox),
     diagram.direction,
     options,
@@ -2394,8 +2980,18 @@ function solveDiagram(diagram, options = {}) {
   );
   const allBoxes = [
     ...coordinatedNodes.map((node) => node.box),
-    ...groupBoxes.values()
+    ...coordinatedNodes.flatMap(
+      (node) => (node.ports ?? []).flatMap(
+        (port) => port.label === void 0 ? [port.box] : [port.box, portLabelBox(port)]
+      )
+    ),
+    ...groupBoxes.values(),
+    ...coordinatedSwimlanes.flatMap(
+      (swimlane) => swimlane.box === void 0 ? [] : [swimlane.box]
+    )
   ];
+  const contentBounds = allBoxes.length === 0 ? { x: 0, y: 0, width: 0, height: 0 } : unionBoxes(allBoxes);
+  const frame = diagram.frame === void 0 ? void 0 : coordinateFrame(diagram.frame, contentBounds);
   return {
     id: diagram.id,
     ...diagram.title === void 0 ? {} : { title: diagram.title },
@@ -2403,8 +2999,10 @@ function solveDiagram(diagram, options = {}) {
     nodes: coordinatedNodes,
     edges: coordinatedEdges,
     groups: coordinatedGroups,
+    ...coordinatedSwimlanes.length === 0 ? {} : { swimlanes: coordinatedSwimlanes },
     diagnostics,
-    bounds: allBoxes.length === 0 ? { x: 0, y: 0, width: 0, height: 0 } : unionBoxes(allBoxes),
+    bounds: frame === void 0 ? contentBounds : unionBoxes([contentBounds, frame.box, frame.titleBox]),
+    ...frame === void 0 ? {} : { frame },
     ...diagram.metadata === void 0 ? {} : { metadata: diagram.metadata }
   };
 }
@@ -2430,6 +3028,9 @@ function coordinateNodes(nodes, boxes, options, diagnostics) {
     coordinated.push({
       id: node.id,
       ...node.label === void 0 ? {} : { label: node.label },
+      ...node.style === void 0 ? {} : { style: node.style },
+      ...node.ports === void 0 ? {} : { ports: coordinatePorts(node, box, options.portShifting) },
+      ...node.compartments === void 0 ? {} : { compartments: node.compartments },
       ...node.labelLayout === void 0 ? {} : { labelLayout: node.labelLayout },
       shape: node.shape,
       ...node.metadata === void 0 ? {} : { metadata: node.metadata },
@@ -2440,6 +3041,142 @@ function coordinateNodes(nodes, boxes, options, diagnostics) {
   }
   return coordinated;
 }
+function coordinatePorts(node, nodeBox, portShifting) {
+  const portsBySide = /* @__PURE__ */ new Map();
+  for (const port of node.ports ?? []) {
+    const ports = portsBySide.get(port.side) ?? [];
+    ports.push(port);
+    portsBySide.set(port.side, ports);
+  }
+  const coordinated = [];
+  for (const [side, ports] of portsBySide) {
+    const sorted = [...ports ?? []].sort((a, b) => {
+      const order = (a.order ?? 0) - (b.order ?? 0);
+      return order === 0 ? a.id.localeCompare(b.id) : order;
+    });
+    for (let index = 0; index < sorted.length; index += 1) {
+      const port = sorted[index];
+      if (port === void 0) {
+        continue;
+      }
+      const anchor = portAnchor(
+        nodeBox,
+        side,
+        index,
+        sorted.length,
+        portShifting
+      );
+      const box = portBox(anchor);
+      coordinated.push({ ...port, box, anchor });
+    }
+  }
+  return coordinated.sort((a, b) => a.id.localeCompare(b.id));
+}
+function portAnchor(nodeBox, side, index, count, portShifting) {
+  const shiftingEnabled = portShifting?.enabled ?? true;
+  const spacing = portShifting?.spacing ?? 24;
+  const centeredOffset = shiftingEnabled ? (index - (count - 1) / 2) * spacing : 0;
+  switch (side) {
+    case "left":
+      return {
+        x: nodeBox.x,
+        y: nodeBox.y + nodeBox.height / 2 + centeredOffset
+      };
+    case "right":
+      return {
+        x: nodeBox.x + nodeBox.width,
+        y: nodeBox.y + nodeBox.height / 2 + centeredOffset
+      };
+    case "top":
+      return {
+        x: nodeBox.x + nodeBox.width / 2 + centeredOffset,
+        y: nodeBox.y
+      };
+    case "bottom":
+      return {
+        x: nodeBox.x + nodeBox.width / 2 + centeredOffset,
+        y: nodeBox.y + nodeBox.height
+      };
+  }
+}
+function portBox(anchor) {
+  const size = 10;
+  return {
+    x: anchor.x - size / 2,
+    y: anchor.y - size / 2,
+    width: size,
+    height: size
+  };
+}
+function portLabelBox(port) {
+  const textWidth = Math.max(0, (port.label?.text.length ?? 0) * 6);
+  const height = 12;
+  const gap = 8;
+  const x = port.side === "left" ? port.anchor.x - gap - textWidth : port.anchor.x + gap;
+  return {
+    x,
+    y: port.anchor.y - 8 - height,
+    width: textWidth,
+    height
+  };
+}
+function coordinateSwimlanes(swimlanes, nodeBoxes) {
+  const titleSize = 28;
+  const padding = 16;
+  return swimlanes.map((swimlane) => {
+    const laneBoxes = swimlane.lanes.flatMap((lane) => {
+      const childBoxes = lane.children.map((child) => nodeBoxes.get(child)).filter((box) => box !== void 0);
+      return childBoxes.length === 0 ? [] : [unionBoxes(childBoxes)];
+    });
+    const laneUnion = laneBoxes.length === 0 ? { x: 0, y: 0, width: 120, height: 80 } : unionBoxes(laneBoxes);
+    const outer = expand(laneUnion, padding, titleSize);
+    const laneCount = Math.max(1, swimlane.lanes.length);
+    const lanes = swimlane.lanes.map((lane, index) => {
+      const box = swimlane.orientation === "vertical" ? {
+        x: outer.x + outer.width / laneCount * index,
+        y: outer.y,
+        width: outer.width / laneCount,
+        height: outer.height
+      } : {
+        x: outer.x,
+        y: outer.y + outer.height / laneCount * index,
+        width: outer.width,
+        height: outer.height / laneCount
+      };
+      return { ...lane, box };
+    });
+    return { ...swimlane, lanes, box: outer };
+  });
+}
+function coordinateFrame(frame, contentBounds) {
+  const padding = 32;
+  const titleHeight = 28;
+  const titleWidth = Math.max(180, frame.titleTab.length * 7);
+  const box = {
+    x: contentBounds.x - padding,
+    y: contentBounds.y - padding - titleHeight,
+    width: contentBounds.width + padding * 2,
+    height: contentBounds.height + padding * 2 + titleHeight
+  };
+  return {
+    ...frame,
+    box,
+    titleBox: {
+      x: box.x,
+      y: box.y,
+      width: Math.min(titleWidth, box.width * 0.8),
+      height: titleHeight
+    }
+  };
+}
+function expand(box, padding, titleSize) {
+  return {
+    x: box.x - padding,
+    y: box.y - padding - titleSize,
+    width: box.width + padding * 2,
+    height: box.height + padding * 2 + titleSize
+  };
+}
 function coordinateGroups(groups, nodeBoxes, options, diagnostics) {
   const coordinated = [];
   const groupBoxes = /* @__PURE__ */ new Map();
@@ -2488,8 +3225,11 @@ function coordinateGroups(groups, nodeBoxes, options, diagnostics) {
   }
   return coordinated;
 }
-function coordinateEdges(edges, nodes, obstacles, direction, options, diagnostics) {
+function coordinateEdges(edges, nodes, coordinatedNodes, obstacles, direction, options, diagnostics) {
   const coordinated = [];
+  const coordinatedNodeById = new Map(
+    coordinatedNodes.map((node) => [node.id, node])
+  );
   for (const edge of edges) {
     const source = nodes.get(edge.source.nodeId);
     const target = nodes.get(edge.target.nodeId);
@@ -2507,11 +3247,13 @@ function coordinateEdges(edges, nodes, obstacles, direction, options, diagnostic
       });
       continue;
     }
+    const sourcePort = coordinatedNodeById.get(edge.source.nodeId)?.ports?.find((port) => port.id === edge.source.portId);
+    const targetPort = coordinatedNodeById.get(edge.target.nodeId)?.ports?.find((port) => port.id === edge.target.portId);
     const route = routeEdge({
       kind: options.routeKind ?? "orthogonal",
       direction,
-      source,
-      target,
+      source: portGeometry(source, sourcePort),
+      target: portGeometry(target, targetPort),
       ...edge.source.anchor === void 0 ? {} : { sourceAnchor: edge.source.anchor },
       ...edge.target.anchor === void 0 ? {} : { targetAnchor: edge.target.anchor },
       obstacles: obstacles.filter(
@@ -2531,6 +3273,21 @@ function coordinateEdges(edges, nodes, obstacles, direction, options, diagnostic
   }
   return coordinated;
 }
+function portGeometry(nodeGeometry, port) {
+  if (port === void 0) {
+    return nodeGeometry;
+  }
+  return {
+    ...nodeGeometry,
+    box: port.box,
+    center: port.anchor,
+    anchors: nodeGeometry.anchors.map((anchor) => ({
+      name: anchor.name,
+      point: port.anchor
+    })),
+    obstacleBox: port.box
+  };
+}
 function stableById(items) {
   return [...items].sort((a, b) => a.id.localeCompare(b.id));
 }
@@ -2591,7 +3348,8 @@ function renderDiagramDsl(source, options = {}) {
     return { diagnostics };
   }
   const solved = solveDiagram(normalized.diagram, {
-    routeKind: normalized.diagram.metadata?.routeKind === "straight" ? "straight" : "orthogonal"
+    routeKind: normalized.diagram.metadata?.routeKind === "straight" ? "straight" : "orthogonal",
+    ...solvePortShiftingOption(normalized.diagram.metadata?.portShifting)
   });
   const solveDiagnostics = solved.diagnostics.map(toSolveDiagnostic);
   if (hasErrorDiagnostics2(solveDiagnostics)) {
@@ -2630,6 +3388,22 @@ function renderDiagramDsl(source, options = {}) {
 function toSolveDiagnostic(diagnostic) {
   return { ...diagnostic, layer: "solve" };
 }
+function solvePortShiftingOption(value) {
+  if (!isJsonObject(value)) {
+    return {};
+  }
+  const portShifting = {};
+  if (value.enabled === false) {
+    portShifting.enabled = false;
+  }
+  if (typeof value.spacing === "number") {
+    portShifting.spacing = value.spacing;
+  }
+  return { portShifting };
+}
+function isJsonObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
 function toExportDiagnostic(diagnostic) {
   return { ...diagnostic, layer: "export" };
 }
@@ -2776,11 +3550,13 @@ exports.canonicalize = canonicalize;
 exports.computeArrowhead = computeArrowhead;
 exports.computeContainerGeometry = computeContainerGeometry;
 exports.computeShapeGeometry = computeShapeGeometry;
+exports.createDefaultTextMeasurer = createDefaultTextMeasurer;
 exports.expandBox = expandBox;
 exports.exportExcalidraw = exportExcalidraw;
 exports.exportSvg = exportSvg;
 exports.fitLabel = fitLabel;
 exports.getEdgePort = getEdgePort;
+exports.installNodeCanvasRuntime = installNodeCanvasRuntime;
 exports.intersectsAabb = intersectsAabb;
 exports.isPretextRuntimeAvailable = isPretextRuntimeAvailable;
 exports.normalizeDiagramDsl = normalizeDiagramDsl;