@spectratools/graphic-designer-cli 0.10.0 → 0.11.0

package/dist/cli.js

@@ -1050,7 +1050,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 +1063,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 +1157,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 +1171,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 +1183,11 @@ 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 manualPositionSchema = z2.object({
   x: z2.number().int(),
@@ -1185,7 +1199,11 @@ 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,
@@ -1250,7 +1268,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),
@@ -2778,12 +2800,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 +3292,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 +3402,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 +3524,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 +3558,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 +3613,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;
@@ -5032,10 +5057,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 +5083,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) {

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { Cli } from 'incur';
-import { T as ThemeInput, D as DesignSpec, a as Rect$1, b as DrawCommand, c as Theme, d as RenderedElement, A as AnchorHint, C as ConnectionElement } from './spec.schema-B6sXTTou.js';
-export { e as AutoLayoutConfig, B as BuiltInTheme, f as CardElement, g as CodeBlockElement, h as ConstraintSpec, i as DEFAULT_GENERATOR_VERSION, j as DEFAULT_RAINBOW_COLORS, k as Decorator, l as DesignCardSpec, m as DesignSafeFrame, n as DesignTheme, o as DiagramElement, p as DiagramLayout, q as DiagramSpec, r as DrawArc, s as DrawBadge, t as DrawBezier, u as DrawCircle, v as DrawFontFamily, w as DrawGradientRect, x as DrawLine, y as DrawPath, z as DrawPoint, E as DrawRect, F as DrawShadow, G as DrawText, H as DrawTextRow, I as DrawTextRowSegment, J as Element, K as FlowNodeElement, L as Gradient, M as GradientOverlayDecorator, N as GradientSpec, O as GradientStop, P as GridLayoutConfig, Q as ImageElement, S as IterationMeta, U as LayoutConfig, V as LayoutSnapshot, W as ManualLayoutConfig, X as RainbowRuleDecorator, Y as RenderDesignOptions, R as RenderMetadata, Z as RenderResult, _ as ShapeElement, $ as StackLayoutConfig, a0 as TerminalElement, a1 as TextElement, a2 as ThemeInput, a3 as VignetteDecorator, a4 as WrittenArtifacts, a5 as builtInThemeBackgrounds, a6 as builtInThemes, a7 as computeSpecHash, a8 as connectionElementSchema, a9 as defaultAutoLayout, aa as defaultCanvas, ab as defaultConstraints, ac as defaultGridLayout, ad as defaultLayout, ae as defaultStackLayout, af as defaultTheme, ag as deriveSafeFrame, ah as designSpecSchema, ai as diagramElementSchema, aj as diagramLayoutSchema, ak as diagramSpecSchema, al as drawGradientRect, am as drawRainbowRule, an as drawVignette, ao as flowNodeElementSchema, ap as inferLayout, aq as inferSidecarPath, ar as parseDesignSpec, as as parseDiagramSpec, at as renderDesign, au as resolveTheme, av as writeRenderArtifacts } from './spec.schema-B6sXTTou.js';
+import { T as ThemeInput, D as DesignSpec, a as Rect$1, b as DrawCommand, c as Theme, d as RenderedElement, A as AnchorHint, C as ConnectionElement } from './spec.schema-CYlOLxmK.js';
+export { e as AutoLayoutConfig, B as BuiltInTheme, f as CardElement, g as CodeBlockElement, h as ConstraintSpec, i as DEFAULT_GENERATOR_VERSION, j as DEFAULT_RAINBOW_COLORS, k as Decorator, l as DesignCardSpec, m as DesignSafeFrame, n as DesignTheme, o as DiagramElement, p as DiagramLayout, q as DiagramSpec, r as DrawArc, s as DrawBadge, t as DrawBezier, u as DrawCircle, v as DrawFontFamily, w as DrawGradientRect, x as DrawLine, y as DrawPath, z as DrawPoint, E as DrawRect, F as DrawShadow, G as DrawText, H as DrawTextRow, I as DrawTextRowSegment, J as Element, K as FlowNodeElement, L as Gradient, M as GradientOverlayDecorator, N as GradientSpec, O as GradientStop, P as GridLayoutConfig, Q as ImageElement, S as IterationMeta, U as LayoutConfig, V as LayoutSnapshot, W as ManualLayoutConfig, X as RainbowRuleDecorator, Y as RenderDesignOptions, R as RenderMetadata, Z as RenderResult, _ as ShapeElement, $ as StackLayoutConfig, a0 as TerminalElement, a1 as TextElement, a2 as ThemeInput, a3 as VignetteDecorator, a4 as WrittenArtifacts, a5 as builtInThemeBackgrounds, a6 as builtInThemes, a7 as computeSpecHash, a8 as connectionElementSchema, a9 as defaultAutoLayout, aa as defaultCanvas, ab as defaultConstraints, ac as defaultGridLayout, ad as defaultLayout, ae as defaultStackLayout, af as defaultTheme, ag as deriveSafeFrame, ah as designSpecSchema, ai as diagramElementSchema, aj as diagramLayoutSchema, ak as diagramSpecSchema, al as drawGradientRect, am as drawRainbowRule, an as drawVignette, ao as flowNodeElementSchema, ap as inferLayout, aq as inferSidecarPath, ar as parseDesignSpec, as as parseDiagramSpec, at as renderDesign, au as resolveTheme, av as writeRenderArtifacts } from './spec.schema-CYlOLxmK.js';
 import { SKRSContext2D } from '@napi-rs/canvas';
 export { QaIssue, QaReferenceResult, QaReport, QaSeverity, readMetadata, runQa } from './qa.js';
 import { Highlighter } from 'shiki';
@@ -245,9 +245,16 @@ type Point$1 = {
 
 type Point = Point$1;
 type Rect = Rect$1;
-type ConnectionRouting = 'auto' | 'orthogonal' | 'curve' | 'arc';
+type ConnectionRouting = 'auto' | 'orthogonal' | 'curve' | 'arc' | 'straight';
+type ConnectionCurveMode = 'normal' | 'ellipse';
 type ConnectionArrow = 'none' | 'end' | 'start' | 'both';
 type ConnectionStrokeStyle = 'solid' | 'dashed' | 'dotted';
+type EllipseParams = {
+    cx: number;
+    cy: number;
+    rx: number;
+    ry: number;
+};
 type ConnectionRenderOptions = {
     fromBounds: Rect;
     toBounds: Rect;
@@ -292,6 +299,38 @@ declare function curveRoute(fromBounds: Rect, toBounds: Rect, diagramCenter: Poi
  * automatic edge anchor calculation.
  */
 declare function arcRoute(fromBounds: Rect, toBounds: Rect, diagramCenter: Point, tension: number, fromAnchor?: AnchorHint, toAnchor?: AnchorHint): [CubicBezierSegment, CubicBezierSegment];
+/**
+ * Infer ellipse parameters from the bounding boxes of all flow-node elements.
+ *
+ * When explicit `ellipseRx`/`ellipseRy` are provided they are used directly.
+ * Otherwise the ellipse is fitted by computing the centroid of all node centers
+ * as the center, with `rx` and `ry` derived from the maximum horizontal and
+ * vertical distance from the centroid to any node center.
+ */
+declare function inferEllipseParams(nodeBounds: Rect[], explicitCenter?: Point, explicitRx?: number, explicitRy?: number): EllipseParams;
+/**
+ * Compute a cubic bezier curve that traces an arc on a shared global ellipse.
+ *
+ * Uses the generalized kappa formula: `κ = (4/3) × tan(angularSpan / 4)`
+ * to produce control points from the ellipse tangent vectors at the source
+ * and target angles.
+ *
+ * The source and target points are the edge anchors of the respective node
+ * bounding boxes (not points on the ellipse itself), but the control points
+ * are derived from the ellipse tangent at the angle each node center makes
+ * with the ellipse center. This produces curves that follow the global
+ * ellipse arc while connecting node boundaries correctly.
+ *
+ * @returns `[startPoint, controlPoint1, controlPoint2, endPoint]`
+ */
+declare function ellipseRoute(fromBounds: Rect, toBounds: Rect, ellipse: EllipseParams, fromAnchor?: AnchorHint, toAnchor?: AnchorHint): [Point, Point, Point, Point];
+/**
+ * Compute a straight-line route between two rectangles.
+ *
+ * When `fromAnchor` or `toAnchor` hints are provided, they override the
+ * automatic edge anchor calculation.
+ */
+declare function straightRoute(fromBounds: Rect, toBounds: Rect, fromAnchor?: AnchorHint, toAnchor?: AnchorHint): [Point, Point];
 /**
  * Compute an orthogonal (right-angle) path between two rectangles.
  * Returns an array of waypoints forming a 3-segment path.
@@ -309,6 +348,7 @@ declare function bezierPointAt(p0: Point, cp1: Point, cp2: Point, p3: Point, t:
 declare function computeDiagramCenter(nodeBounds: Rect[], canvasCenter?: Point): Point;
 declare function renderConnection(ctx: SKRSContext2D, conn: ConnectionElement, fromBounds: Rect, toBounds: Rect, theme: Theme, edgeRoute?: EdgeRoute, options?: {
     diagramCenter?: Point;
+    ellipseParams?: EllipseParams;
 }): RenderedElement[];
 
 /**
@@ -366,4 +406,4 @@ declare function highlightCode(code: string, language: string, themeName: string
  */
 declare function disposeHighlighter(): void;
 
-export { type CompareImagesOptions, type CompareImagesReport, type CompareRegionScore, type CompareVerdict, type ConnectionArrow, ConnectionElement, type ConnectionRenderOptions, type ConnectionRouting, type ConnectionStrokeStyle, type CubicBezierSegment, DesignSpec, DrawCommand, type EdgeRoute, type ElkLayoutResult, type HighlightedLine, type LayoutResult, type Point, Rect$1 as Rect, RenderedElement, Theme, arcRoute, bezierPointAt, buildCardsSpec, buildCodeSpec, buildFlowchartSpec, buildTerminalSpec, cli, compareImages, computeDiagramCenter, curveRoute, disposeHighlighter, edgeAnchor, highlightCode, initHighlighter, loadFonts, orthogonalRoute, outwardNormal, rectCenter, renderConnection, renderDrawCommands, resolveShikiTheme, themeToShikiMap };
+export { type CompareImagesOptions, type CompareImagesReport, type CompareRegionScore, type CompareVerdict, type ConnectionArrow, type ConnectionCurveMode, ConnectionElement, type ConnectionRenderOptions, type ConnectionRouting, type ConnectionStrokeStyle, type CubicBezierSegment, DesignSpec, DrawCommand, type EdgeRoute, type ElkLayoutResult, type EllipseParams, type HighlightedLine, type LayoutResult, type Point, Rect$1 as Rect, RenderedElement, Theme, arcRoute, bezierPointAt, buildCardsSpec, buildCodeSpec, buildFlowchartSpec, buildTerminalSpec, cli, compareImages, computeDiagramCenter, curveRoute, disposeHighlighter, edgeAnchor, ellipseRoute, highlightCode, inferEllipseParams, initHighlighter, loadFonts, orthogonalRoute, outwardNormal, rectCenter, renderConnection, renderDrawCommands, resolveShikiTheme, straightRoute, themeToShikiMap };