@spectratools/graphic-designer-cli 0.10.0 → 0.12.0

package/README.md

@@ -125,6 +125,7 @@ Plus a **freestyle draw layer** with 8 draw command types: `rect`, `circle`, `te
 - **auto** — ELK.js layout engine (layered, stress, force, radial, box algorithms)
 - **grid** — column-based grid layout
 - **stack** — vertical or horizontal stack
+- **ellipse** — evenly spaced nodes on a configurable ellipse
 - **manual** — explicit x/y coordinates
 
 ### Connection Routing Modes
@@ -138,6 +139,36 @@ Per-connection `routing` supports:
 
 `layout.diagramCenter` can optionally override the center point used by `curve` and `arc` routing. When omitted, center is derived from the laid-out element centroid (fallback: canvas center).
 
+### Hexagonal Preset via Ellipse Layout
+
+A six-node hexagonal arrangement is just an ellipse layout with equal angular spacing and matching routing hints:
+
+```ts
+const spec = parseDesignSpec({
+  version: 2,
+  theme: 'dark',
+  elements: [
+    { type: 'flow-node', id: 'triage', label: 'Triage', shape: 'rounded-box' },
+    { type: 'flow-node', id: 'design', label: 'Design', shape: 'rounded-box' },
+    { type: 'flow-node', id: 'build', label: 'Build', shape: 'rounded-box' },
+    { type: 'flow-node', id: 'test', label: 'Test', shape: 'rounded-box' },
+    { type: 'flow-node', id: 'deploy', label: 'Deploy', shape: 'rounded-box' },
+    { type: 'flow-node', id: 'observe', label: 'Observe', shape: 'rounded-box' },
+  ],
+  layout: {
+    mode: 'ellipse',
+    cx: 600,
+    cy: 340,
+    rx: 280,
+    ry: 180,
+    startAngle: -90,
+    diagramCenter: { x: 600, y: 340 },
+    ellipseRx: 280,
+    ellipseRy: 180,
+  },
+});
+```
+
 ## Programmatic Usage
 
 ```ts
@@ -157,7 +188,17 @@ const spec = parseDesignSpec({
     { type: 'flow-node', id: 'b', label: 'End', shape: 'rounded-box', color: '#059669' },
     { type: 'connection', from: 'a', to: 'b', label: 'next', routing: 'arc' },
   ],
-  layout: { mode: 'auto', algorithm: 'layered', diagramCenter: { x: 600, y: 340 } },
+  layout: {
+    mode: 'ellipse',
+    cx: 600,
+    cy: 340,
+    rx: 280,
+    ry: 180,
+    startAngle: -90,
+    diagramCenter: { x: 600, y: 340 },
+    ellipseRx: 280,
+    ellipseRy: 180,
+  },
 });
 
 const render = await renderDesign(spec, { generatorVersion: '0.3.0' });

package/dist/cli.js

@@ -766,6 +766,10 @@ var drawShadowSchema = z2.object({
   offsetY: z2.number().default(4)
 }).strict();
 var drawFontFamilySchema = z2.enum(["heading", "body", "mono"]);
+var strokeGradientSchema = z2.object({
+  from: colorHexSchema2,
+  to: colorHexSchema2
+}).strict();
 var drawRectSchema = z2.object({
   type: z2.literal("rect"),
   x: z2.number(),
@@ -813,6 +817,7 @@ var drawLineSchema = z2.object({
   x2: z2.number(),
   y2: z2.number(),
   color: colorHexSchema2.default("#FFFFFF"),
+  strokeGradient: strokeGradientSchema.optional(),
   width: z2.number().min(0.5).max(32).default(2),
   dash: z2.array(z2.number()).max(6).optional(),
   arrow: z2.enum(["none", "end", "start", "both"]).default("none"),
@@ -843,6 +848,7 @@ var drawBezierSchema = z2.object({
   type: z2.literal("bezier"),
   points: z2.array(drawPointSchema).min(2).max(20),
   color: colorHexSchema2.default("#FFFFFF"),
+  strokeGradient: strokeGradientSchema.optional(),
   width: z2.number().min(0.5).max(32).default(2),
   dash: z2.array(z2.number()).max(6).optional(),
   arrow: z2.enum(["none", "end", "start", "both"]).default("none"),
@@ -1050,7 +1056,8 @@ var connectionElementSchema = z2.object({
   from: z2.string().min(1).max(120),
   to: z2.string().min(1).max(120),
   style: z2.enum(["solid", "dashed", "dotted"]).default("solid"),
-  strokeStyle: z2.enum(["solid", "dashed", "dotted"]).default("solid"),
+  /** @deprecated Use `style` instead. */
+  strokeStyle: z2.enum(["solid", "dashed", "dotted"]).optional(),
   arrow: z2.enum(["end", "start", "both", "none"]).default("end"),
   label: z2.string().min(1).max(200).optional(),
   labelPosition: z2.enum(["start", "middle", "end"]).default("middle"),
@@ -1062,7 +1069,8 @@ var connectionElementSchema = z2.object({
   arrowSize: z2.number().min(4).max(32).optional(),
   arrowPlacement: z2.enum(["endpoint", "boundary"]).default("endpoint"),
   opacity: z2.number().min(0).max(1).default(1),
-  routing: z2.enum(["auto", "orthogonal", "curve", "arc"]).default("auto"),
+  routing: z2.enum(["auto", "orthogonal", "curve", "arc", "straight"]).default("auto"),
+  curveMode: z2.enum(["normal", "ellipse"]).default("normal"),
   tension: z2.number().min(0.1).max(0.8).default(0.35),
   fromAnchor: anchorHintSchema.optional(),
   toAnchor: anchorHintSchema.optional()
@@ -1155,7 +1163,11 @@ var autoLayoutConfigSchema = z2.object({
   /** Sort strategy for radial layout node ordering. Only relevant when algorithm is 'radial'. */
   radialSortBy: z2.enum(["id", "connections"]).optional(),
   /** Explicit center used by curve/arc connection routing. */
-  diagramCenter: diagramCenterSchema.optional()
+  diagramCenter: diagramCenterSchema.optional(),
+  /** Horizontal radius for shared ellipse used by curveMode: 'ellipse'. */
+  ellipseRx: z2.number().positive().optional(),
+  /** Vertical radius for shared ellipse used by curveMode: 'ellipse'. */
+  ellipseRy: z2.number().positive().optional()
 }).strict();
 var gridLayoutConfigSchema = z2.object({
   mode: z2.literal("grid"),
@@ -1165,7 +1177,11 @@ var gridLayoutConfigSchema = z2.object({
   cardMaxHeight: z2.number().int().min(32).max(4096).optional(),
   equalHeight: z2.boolean().default(false),
   /** Explicit center used by curve/arc connection routing. */
-  diagramCenter: diagramCenterSchema.optional()
+  diagramCenter: diagramCenterSchema.optional(),
+  /** Horizontal radius for shared ellipse used by curveMode: 'ellipse'. */
+  ellipseRx: z2.number().positive().optional(),
+  /** Vertical radius for shared ellipse used by curveMode: 'ellipse'. */
+  ellipseRy: z2.number().positive().optional()
 }).strict();
 var stackLayoutConfigSchema = z2.object({
   mode: z2.literal("stack"),
@@ -1173,7 +1189,25 @@ var stackLayoutConfigSchema = z2.object({
   gap: z2.number().int().min(0).max(256).default(24),
   alignment: z2.enum(["start", "center", "end", "stretch"]).default("stretch"),
   /** Explicit center used by curve/arc connection routing. */
-  diagramCenter: diagramCenterSchema.optional()
+  diagramCenter: diagramCenterSchema.optional(),
+  /** Horizontal radius for shared ellipse used by curveMode: 'ellipse'. */
+  ellipseRx: z2.number().positive().optional(),
+  /** Vertical radius for shared ellipse used by curveMode: 'ellipse'. */
+  ellipseRy: z2.number().positive().optional()
+}).strict();
+var ellipseLayoutConfigSchema = z2.object({
+  mode: z2.literal("ellipse"),
+  cx: z2.number().optional(),
+  cy: z2.number().optional(),
+  rx: z2.number().positive(),
+  ry: z2.number().positive(),
+  startAngle: z2.number().default(-90),
+  /** Explicit center used by curve/arc connection routing. */
+  diagramCenter: diagramCenterSchema.optional(),
+  /** Horizontal radius for shared ellipse used by curveMode: 'ellipse'. */
+  ellipseRx: z2.number().positive().optional(),
+  /** Vertical radius for shared ellipse used by curveMode: 'ellipse'. */
+  ellipseRy: z2.number().positive().optional()
 }).strict();
 var manualPositionSchema = z2.object({
   x: z2.number().int(),
@@ -1185,12 +1219,17 @@ var manualLayoutConfigSchema = z2.object({
   mode: z2.literal("manual"),
   positions: z2.record(z2.string().min(1), manualPositionSchema).default({}),
   /** Explicit center used by curve/arc connection routing. */
-  diagramCenter: diagramCenterSchema.optional()
+  diagramCenter: diagramCenterSchema.optional(),
+  /** Horizontal radius for shared ellipse used by curveMode: 'ellipse'. */
+  ellipseRx: z2.number().positive().optional(),
+  /** Vertical radius for shared ellipse used by curveMode: 'ellipse'. */
+  ellipseRy: z2.number().positive().optional()
 }).strict();
 var layoutConfigSchema = z2.discriminatedUnion("mode", [
   autoLayoutConfigSchema,
   gridLayoutConfigSchema,
   stackLayoutConfigSchema,
+  ellipseLayoutConfigSchema,
   manualLayoutConfigSchema
 ]);
 var constraintsSchema = z2.object({
@@ -1250,7 +1289,11 @@ var diagramElementSchema = z2.discriminatedUnion("type", [
 var diagramLayoutSchema = z2.object({
   mode: z2.enum(["manual", "auto"]).default("manual"),
   positions: z2.record(z2.string(), diagramPositionSchema).optional(),
-  diagramCenter: diagramCenterSchema.optional()
+  diagramCenter: diagramCenterSchema.optional(),
+  /** Horizontal radius for shared ellipse used by curveMode: 'ellipse'. */
+  ellipseRx: z2.number().positive().optional(),
+  /** Vertical radius for shared ellipse used by curveMode: 'ellipse'. */
+  ellipseRy: z2.number().positive().optional()
 }).strict();
 var diagramSpecSchema = z2.object({
   version: z2.literal(1),
@@ -2417,6 +2460,35 @@ async function computeElkLayout(elements, config, safeFrame) {
   };
 }
 
+// src/layout/ellipse.ts
+function clampDimension(estimated, max) {
+  return Math.max(1, Math.min(max, Math.floor(estimated)));
+}
+function computeEllipseLayout(elements, config, safeFrame) {
+  const placeable = elements.filter((element) => element.type !== "connection");
+  const positions = /* @__PURE__ */ new Map();
+  if (placeable.length === 0) {
+    return { positions };
+  }
+  const cx = config.cx ?? safeFrame.x + safeFrame.width / 2;
+  const cy = config.cy ?? safeFrame.y + safeFrame.height / 2;
+  const stepDegrees = 360 / placeable.length;
+  for (const [index, element] of placeable.entries()) {
+    const angleRadians = (config.startAngle + index * stepDegrees) * Math.PI / 180;
+    const centerX = cx + config.rx * Math.cos(angleRadians);
+    const centerY = cy + config.ry * Math.sin(angleRadians);
+    const width = clampDimension(estimateElementWidth(element), safeFrame.width);
+    const height = clampDimension(estimateElementHeight(element), safeFrame.height);
+    positions.set(element.id, {
+      x: Math.round(centerX - width / 2),
+      y: Math.round(centerY - height / 2),
+      width,
+      height
+    });
+  }
+  return { positions };
+}
+
 // src/layout/grid.ts
 function computeGridLayout(elements, config, safeFrame) {
   const placeable = elements.filter((element) => element.type !== "connection");
@@ -2512,6 +2584,8 @@ async function computeLayout(elements, layout, safeFrame) {
       return computeGridLayout(elements, layout, safeFrame);
     case "stack":
       return computeStackLayout(elements, layout, safeFrame);
+    case "ellipse":
+      return computeEllipseLayout(elements, layout, safeFrame);
     case "manual":
       return computeManualLayout(elements, layout, safeFrame);
     default:
@@ -2778,12 +2852,12 @@ var MACOS_DOTS = [
   { fill: "#27C93F", stroke: "#1AAB29" }
 ];
 function drawMacosDots(ctx, x, y) {
-  for (const [index, dot2] of MACOS_DOTS.entries()) {
+  for (const [index, dot] of MACOS_DOTS.entries()) {
     ctx.beginPath();
     ctx.arc(x + index * DOT_SPACING, y, DOT_RADIUS, 0, Math.PI * 2);
     ctx.closePath();
-    ctx.fillStyle = dot2.fill;
-    ctx.strokeStyle = dot2.stroke;
+    ctx.fillStyle = dot.fill;
+    ctx.strokeStyle = dot.stroke;
     ctx.lineWidth = DOT_STROKE_WIDTH;
     ctx.fill();
     ctx.stroke();
@@ -3270,56 +3344,71 @@ function curveRoute(fromBounds, toBounds, diagramCenter, tension, fromAnchor, to
   const cp2 = { x: p3.x + n3.x * offset, y: p3.y + n3.y * offset };
   return [p0, cp1, cp2, p3];
 }
-function dot(a, b) {
-  return a.x * b.x + a.y * b.y;
-}
-function localToWorld(origin, axisX, axisY, local) {
-  return {
-    x: origin.x + axisX.x * local.x + axisY.x * local.y,
-    y: origin.y + axisX.y * local.x + axisY.y * local.y
-  };
+function inferEllipseParams(nodeBounds, explicitCenter, explicitRx, explicitRy) {
+  if (nodeBounds.length === 0) {
+    return {
+      cx: explicitCenter?.x ?? 0,
+      cy: explicitCenter?.y ?? 0,
+      rx: explicitRx ?? 1,
+      ry: explicitRy ?? 1
+    };
+  }
+  const centers = nodeBounds.map(rectCenter);
+  const cx = explicitCenter?.x ?? centers.reduce((sum, c) => sum + c.x, 0) / centers.length;
+  const cy = explicitCenter?.y ?? centers.reduce((sum, c) => sum + c.y, 0) / centers.length;
+  const rx = explicitRx ?? Math.max(1, ...centers.map((c) => Math.abs(c.x - cx)));
+  const ry = explicitRy ?? Math.max(1, ...centers.map((c) => Math.abs(c.y - cy)));
+  return { cx, cy, rx, ry };
 }
-function arcRoute(fromBounds, toBounds, diagramCenter, tension, fromAnchor, toAnchor) {
+function ellipseRoute(fromBounds, toBounds, ellipse, fromAnchor, toAnchor) {
   const fromCenter = rectCenter(fromBounds);
   const toCenter = rectCenter(toBounds);
-  const start = resolveAnchor(fromBounds, fromAnchor, toCenter);
-  const end = resolveAnchor(toBounds, toAnchor, fromCenter);
-  const chord = { x: end.x - start.x, y: end.y - start.y };
-  const chordLength = Math.hypot(chord.x, chord.y);
-  if (chordLength < 1e-6) {
-    const mid = { x: (start.x + end.x) / 2, y: (start.y + end.y) / 2 };
-    return [
-      [start, start, mid, mid],
-      [mid, mid, end, end]
-    ];
-  }
-  const axisX = { x: chord.x / chordLength, y: chord.y / chordLength };
-  let axisY = { x: -axisX.y, y: axisX.x };
-  const midpoint = { x: (start.x + end.x) / 2, y: (start.y + end.y) / 2 };
-  const outwardHint = outwardNormal(midpoint, diagramCenter);
-  if (dot(axisY, outwardHint) < 0) {
-    axisY = { x: -axisY.x, y: -axisY.y };
-  }
-  const semiMajor = chordLength / 2;
-  const semiMinor = Math.max(12, chordLength * tension * 0.75);
-  const p0Local = { x: -semiMajor, y: 0 };
-  const cp1Local = { x: -semiMajor, y: ELLIPSE_KAPPA * semiMinor };
-  const cp2Local = { x: -ELLIPSE_KAPPA * semiMajor, y: semiMinor };
-  const pMidLocal = { x: 0, y: semiMinor };
-  const cp3Local = { x: ELLIPSE_KAPPA * semiMajor, y: semiMinor };
-  const cp4Local = { x: semiMajor, y: ELLIPSE_KAPPA * semiMinor };
-  const p3Local = { x: semiMajor, y: 0 };
-  const p0 = localToWorld(midpoint, axisX, axisY, p0Local);
-  const cp1 = localToWorld(midpoint, axisX, axisY, cp1Local);
-  const cp2 = localToWorld(midpoint, axisX, axisY, cp2Local);
-  const pMid = localToWorld(midpoint, axisX, axisY, pMidLocal);
-  const cp3 = localToWorld(midpoint, axisX, axisY, cp3Local);
-  const cp4 = localToWorld(midpoint, axisX, axisY, cp4Local);
-  const p3 = localToWorld(midpoint, axisX, axisY, p3Local);
-  return [
-    [p0, cp1, cp2, pMid],
-    [pMid, cp3, cp4, p3]
-  ];
+  const p0 = resolveAnchor(fromBounds, fromAnchor, toCenter);
+  const p3 = resolveAnchor(toBounds, toAnchor, fromCenter);
+  const theta1 = Math.atan2(
+    (fromCenter.y - ellipse.cy) / ellipse.ry,
+    (fromCenter.x - ellipse.cx) / ellipse.rx
+  );
+  const theta2 = Math.atan2(
+    (toCenter.y - ellipse.cy) / ellipse.ry,
+    (toCenter.x - ellipse.cx) / ellipse.rx
+  );
+  let angularSpan = theta2 - theta1;
+  while (angularSpan > Math.PI) angularSpan -= 2 * Math.PI;
+  while (angularSpan <= -Math.PI) angularSpan += 2 * Math.PI;
+  const absSpan = Math.abs(angularSpan);
+  const kappa = absSpan < 1e-6 ? 0 : 4 / 3 * Math.tan(absSpan / 4);
+  const tangent1 = {
+    x: -ellipse.rx * Math.sin(theta1),
+    y: ellipse.ry * Math.cos(theta1)
+  };
+  const tangent2 = {
+    x: -ellipse.rx * Math.sin(theta2),
+    y: ellipse.ry * Math.cos(theta2)
+  };
+  const len1 = Math.hypot(tangent1.x, tangent1.y) || 1;
+  const len2 = Math.hypot(tangent2.x, tangent2.y) || 1;
+  const norm1 = { x: tangent1.x / len1, y: tangent1.y / len1 };
+  const norm2 = { x: tangent2.x / len2, y: tangent2.y / len2 };
+  const chordLength = Math.hypot(p3.x - p0.x, p3.y - p0.y);
+  const cpDistance = chordLength * kappa * 0.5;
+  const sign = angularSpan >= 0 ? 1 : -1;
+  const cp1 = {
+    x: p0.x + norm1.x * cpDistance * sign,
+    y: p0.y + norm1.y * cpDistance * sign
+  };
+  const cp2 = {
+    x: p3.x - norm2.x * cpDistance * sign,
+    y: p3.y - norm2.y * cpDistance * sign
+  };
+  return [p0, cp1, cp2, p3];
+}
+function straightRoute(fromBounds, toBounds, fromAnchor, toAnchor) {
+  const fromC = rectCenter(fromBounds);
+  const toC = rectCenter(toBounds);
+  const p0 = resolveAnchor(fromBounds, fromAnchor, toC);
+  const p3 = resolveAnchor(toBounds, toAnchor, fromC);
+  return [p0, p3];
 }
 function orthogonalRoute(fromBounds, toBounds, fromAnchor, toAnchor) {
   const fromC = rectCenter(fromBounds);
@@ -3365,15 +3454,6 @@ function findBoundaryIntersection(p0, cp1, cp2, p3, targetRect, searchFromEnd) {
   }
   return void 0;
 }
-function pointAlongArc(route, t) {
-  const [first, second] = route;
-  if (t <= 0.5) {
-    const localT2 = Math.max(0, Math.min(1, t * 2));
-    return bezierPointAt(first[0], first[1], first[2], first[3], localT2);
-  }
-  const localT = Math.max(0, Math.min(1, (t - 0.5) * 2));
-  return bezierPointAt(second[0], second[1], second[2], second[3], localT);
-}
 function computeDiagramCenter(nodeBounds, canvasCenter) {
   if (nodeBounds.length === 0) {
     return canvasCenter ?? { x: 0, y: 0 };
@@ -3496,8 +3576,19 @@ function polylineBounds(points) {
   };
 }
 function renderConnection(ctx, conn, fromBounds, toBounds, theme, edgeRoute, options) {
-  const routing = conn.routing ?? "auto";
-  const strokeStyle = conn.strokeStyle ?? conn.style ?? "solid";
+  let routing = conn.routing ?? "auto";
+  let curveMode = conn.curveMode ?? "normal";
+  if (conn.strokeStyle !== void 0) {
+    console.warn("connection.strokeStyle is deprecated, use style instead");
+  }
+  if (routing === "arc") {
+    console.warn(
+      "connection routing: 'arc' is deprecated. Use routing: 'curve' with curveMode: 'ellipse' instead."
+    );
+    routing = "curve";
+    curveMode = "ellipse";
+  }
+  const strokeStyle = conn.style ?? conn.strokeStyle ?? "solid";
   const strokeWidth = conn.width ?? conn.strokeWidth ?? 2;
   const tension = conn.tension ?? 0.35;
   const dash = dashFromStyle(strokeStyle);
@@ -3519,14 +3610,29 @@ function renderConnection(ctx, conn, fromBounds, toBounds, theme, edgeRoute, opt
   ctx.globalAlpha = conn.opacity;
   const arrowPlacement = conn.arrowPlacement ?? "endpoint";
   if (routing === "curve") {
-    const [p0, cp1, cp2, p3] = curveRoute(
-      fromBounds,
-      toBounds,
-      diagramCenter,
-      tension,
-      conn.fromAnchor,
-      conn.toAnchor
-    );
+    let p0;
+    let cp1;
+    let cp2;
+    let p3;
+    if (curveMode === "ellipse") {
+      const ellipse = options?.ellipseParams ?? inferEllipseParams([fromBounds, toBounds]);
+      [p0, cp1, cp2, p3] = ellipseRoute(
+        fromBounds,
+        toBounds,
+        ellipse,
+        conn.fromAnchor,
+        conn.toAnchor
+      );
+    } else {
+      [p0, cp1, cp2, p3] = curveRoute(
+        fromBounds,
+        toBounds,
+        diagramCenter,
+        tension,
+        conn.fromAnchor,
+        conn.toAnchor
+      );
+    }
     const stroke = resolveConnectionStroke(ctx, p0, p3, conn.fromColor, style.color, conn.toColor);
     ctx.strokeStyle = stroke;
     ctx.lineWidth = style.width;
@@ -3559,51 +3665,22 @@ function renderConnection(ctx, conn, fromBounds, toBounds, theme, edgeRoute, opt
         }
       }
     }
-  } else if (routing === "arc") {
-    const [first, second] = arcRoute(
-      fromBounds,
-      toBounds,
-      diagramCenter,
-      tension,
-      conn.fromAnchor,
-      conn.toAnchor
-    );
-    const [p0, cp1, cp2, pMid] = first;
-    const [, cp3, cp4, p3] = second;
+  } else if (routing === "straight") {
+    const [p0, p3] = straightRoute(fromBounds, toBounds, conn.fromAnchor, conn.toAnchor);
     const stroke = resolveConnectionStroke(ctx, p0, p3, conn.fromColor, style.color, conn.toColor);
     ctx.strokeStyle = stroke;
     ctx.lineWidth = style.width;
     ctx.setLineDash(style.dash ?? []);
     ctx.beginPath();
     ctx.moveTo(p0.x, p0.y);
-    ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, pMid.x, pMid.y);
-    ctx.bezierCurveTo(cp3.x, cp3.y, cp4.x, cp4.y, p3.x, p3.y);
+    ctx.lineTo(p3.x, p3.y);
     ctx.stroke();
-    linePoints = [p0, cp1, cp2, pMid, cp3, cp4, p3];
+    linePoints = [p0, p3];
     startPoint = p0;
     endPoint = p3;
-    startAngle = Math.atan2(p0.y - cp1.y, p0.x - cp1.x);
-    endAngle = Math.atan2(p3.y - cp4.y, p3.x - cp4.x);
-    labelPoint = pointAlongArc([first, second], labelT);
-    if (arrowPlacement === "boundary") {
-      if (conn.arrow === "end" || conn.arrow === "both") {
-        const [, s_cp3, s_cp4, s_p3] = second;
-        const tEnd = findBoundaryIntersection(pMid, s_cp3, s_cp4, s_p3, toBounds, true);
-        if (tEnd !== void 0) {
-          endPoint = bezierPointAt(pMid, s_cp3, s_cp4, s_p3, tEnd);
-          const tangent = bezierTangentAt(pMid, s_cp3, s_cp4, s_p3, tEnd);
-          endAngle = Math.atan2(tangent.y, tangent.x);
-        }
-      }
-      if (conn.arrow === "start" || conn.arrow === "both") {
-        const tStart = findBoundaryIntersection(p0, cp1, cp2, pMid, fromBounds, false);
-        if (tStart !== void 0) {
-          startPoint = bezierPointAt(p0, cp1, cp2, pMid, tStart);
-          const tangent = bezierTangentAt(p0, cp1, cp2, pMid, tStart);
-          startAngle = Math.atan2(tangent.y, tangent.x) + Math.PI;
-        }
-      }
-    }
+    startAngle = Math.atan2(p0.y - p3.y, p0.x - p3.x);
+    endAngle = Math.atan2(p3.y - p0.y, p3.x - p0.x);
+    labelPoint = pointAlongPolyline(linePoints, labelT);
   } else {
     const hasAnchorHints = conn.fromAnchor !== void 0 || conn.toAnchor !== void 0;
     const useElkRoute = routing === "auto" && !hasAnchorHints && (edgeRoute?.points.length ?? 0) >= 2;
@@ -3869,6 +3946,24 @@ function fromPoints(points) {
 function resolveDrawFont(theme, family) {
   return resolveFont(theme.fonts[family], family);
 }
+function createDrawStrokeGradient(ctx, start, end, strokeGradient) {
+  const gradient = ctx.createLinearGradient(start.x, start.y, end.x, end.y);
+  gradient.addColorStop(0, strokeGradient.from);
+  gradient.addColorStop(1, strokeGradient.to);
+  return gradient;
+}
+function resolveDrawStroke(ctx, start, end, color, strokeGradient) {
+  if (!strokeGradient) {
+    return color;
+  }
+  return createDrawStrokeGradient(ctx, start, end, strokeGradient);
+}
+function resolveArrowFill(color, strokeGradient, position) {
+  if (!strokeGradient) {
+    return color;
+  }
+  return position === "start" ? strokeGradient.from : strokeGradient.to;
+}
 function measureSpacedTextWidth(ctx, text, letterSpacing) {
   const chars = [...text];
   if (chars.length === 0) {
@@ -4147,18 +4242,31 @@ function renderDrawCommands(ctx, commands, theme) {
         const from = { x: command.x1, y: command.y1 };
         const to = { x: command.x2, y: command.y2 };
         const lineAngle = angleBetween(from, to);
+        const stroke = resolveDrawStroke(ctx, from, to, command.color, command.strokeGradient);
         withOpacity(ctx, command.opacity, () => {
           applyDrawShadow(ctx, command.shadow);
           drawLine(ctx, from, to, {
-            color: command.color,
+            color: stroke,
             width: command.width,
             ...command.dash ? { dash: command.dash } : {}
           });
           if (command.arrow === "end" || command.arrow === "both") {
-            drawArrowhead(ctx, to, lineAngle, command.arrowSize, command.color);
+            drawArrowhead(
+              ctx,
+              to,
+              lineAngle,
+              command.arrowSize,
+              resolveArrowFill(command.color, command.strokeGradient, "end")
+            );
           }
           if (command.arrow === "start" || command.arrow === "both") {
-            drawArrowhead(ctx, from, lineAngle + Math.PI, command.arrowSize, command.color);
+            drawArrowhead(
+              ctx,
+              from,
+              lineAngle + Math.PI,
+              command.arrowSize,
+              resolveArrowFill(command.color, command.strokeGradient, "start")
+            );
           }
         });
         const arrowPadding = command.arrow === "none" ? 0 : command.arrowSize;
@@ -4166,7 +4274,7 @@ function renderDrawCommands(ctx, commands, theme) {
           id,
           kind: "draw",
           bounds: expandRect(fromPoints([from, to]), Math.max(command.width / 2, arrowPadding)),
-          foregroundColor: command.color
+          foregroundColor: command.strokeGradient?.from ?? command.color
         });
         break;
       }
@@ -4200,10 +4308,17 @@ function renderDrawCommands(ctx, commands, theme) {
       }
       case "bezier": {
         const points = command.points;
+        const stroke = resolveDrawStroke(
+          ctx,
+          points[0],
+          points[points.length - 1],
+          command.color,
+          command.strokeGradient
+        );
         withOpacity(ctx, command.opacity, () => {
           applyDrawShadow(ctx, command.shadow);
           drawBezier(ctx, points, {
-            color: command.color,
+            color: stroke,
             width: command.width,
             ...command.dash ? { dash: command.dash } : {}
           });
@@ -4215,11 +4330,17 @@ function renderDrawCommands(ctx, commands, theme) {
               points[points.length - 1],
               endAngle,
               command.arrowSize,
-              command.color
+              resolveArrowFill(command.color, command.strokeGradient, "end")
             );
           }
           if (command.arrow === "start" || command.arrow === "both") {
-            drawArrowhead(ctx, points[0], startAngle + Math.PI, command.arrowSize, command.color);
+            drawArrowhead(
+              ctx,
+              points[0],
+              startAngle + Math.PI,
+              command.arrowSize,
+              resolveArrowFill(command.color, command.strokeGradient, "start")
+            );
           }
         });
         const arrowPadding = command.arrow === "none" ? 0 : command.arrowSize;
@@ -4227,7 +4348,7 @@ function renderDrawCommands(ctx, commands, theme) {
           id,
           kind: "draw",
           bounds: expandRect(fromPoints(points), Math.max(command.width / 2, arrowPadding)),
-          foregroundColor: command.color
+          foregroundColor: command.strokeGradient?.from ?? command.color
         });
         break;
       }
@@ -5032,10 +5153,19 @@ async function renderDesign(input, options = {}) {
         break;
     }
   }
-  const diagramCenter = spec.layout.diagramCenter ?? computeDiagramCenter(
-    spec.elements.filter((element) => element.type !== "connection").map((element) => elementRects.get(element.id)).filter((rect) => rect != null),
-    { x: spec.canvas.width / 2, y: spec.canvas.height / 2 }
+  const nodeBounds = spec.elements.filter((element) => element.type !== "connection").map((element) => elementRects.get(element.id)).filter((rect) => rect != null);
+  const diagramCenter = spec.layout.diagramCenter ?? computeDiagramCenter(nodeBounds, { x: spec.canvas.width / 2, y: spec.canvas.height / 2 });
+  const layoutEllipseRx = "ellipseRx" in spec.layout ? spec.layout.ellipseRx : void 0;
+  const layoutEllipseRy = "ellipseRy" in spec.layout ? spec.layout.ellipseRy : void 0;
+  const hasEllipseConnections = spec.elements.some(
+    (el) => el.type === "connection" && (el.curveMode === "ellipse" || el.routing === "arc")
   );
+  const ellipseParams = hasEllipseConnections ? inferEllipseParams(
+    nodeBounds,
+    spec.layout.diagramCenter ?? diagramCenter,
+    layoutEllipseRx,
+    layoutEllipseRy
+  ) : void 0;
   for (const element of spec.elements) {
     if (element.type !== "connection") {
       continue;
@@ -5049,7 +5179,15 @@ async function renderDesign(input, options = {}) {
     }
     const edgeRoute = edgeRoutes?.get(`${element.from}-${element.to}`);
     elements.push(
-      ...renderConnection(ctx, element, fromRect, toRect, theme, edgeRoute, { diagramCenter })
+      ...renderConnection(
+        ctx,
+        element,
+        fromRect,
+        toRect,
+        theme,
+        edgeRoute,
+        ellipseParams ? { diagramCenter, ellipseParams } : { diagramCenter }
+      )
     );
   }
   if (footerRect && spec.footer) {