@spectratools/graphic-designer-cli 0.10.0 → 0.12.0

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-BkbcnVcm.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 EllipseLayoutConfig, L as FlowNodeElement, M as Gradient, N as GradientOverlayDecorator, O as GradientSpec, P as GradientStop, Q as GridLayoutConfig, S as ImageElement, U as IterationMeta, V as LayoutConfig, W as LayoutSnapshot, X as ManualLayoutConfig, Y as RainbowRuleDecorator, Z as RenderDesignOptions, R as RenderMetadata, _ as RenderResult, $ as ShapeElement, a0 as StackLayoutConfig, a1 as TerminalElement, a2 as TextElement, a3 as ThemeInput, a4 as VignetteDecorator, a5 as WrittenArtifacts, a6 as builtInThemeBackgrounds, a7 as builtInThemes, a8 as computeSpecHash, a9 as connectionElementSchema, aa as defaultAutoLayout, ab as defaultCanvas, ac as defaultConstraints, ad as defaultGridLayout, ae as defaultLayout, af as defaultStackLayout, ag as defaultTheme, ah as deriveSafeFrame, ai as designSpecSchema, aj as diagramElementSchema, ak as diagramLayoutSchema, al as diagramSpecSchema, am as drawGradientRect, an as drawRainbowRule, ao as drawVignette, ap as flowNodeElementSchema, aq as inferLayout, ar as inferSidecarPath, as as parseDesignSpec, at as parseDiagramSpec, au as renderDesign, av as resolveTheme, aw as writeRenderArtifacts } from './spec.schema-BkbcnVcm.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 };

package/dist/index.js

@@ -775,6 +775,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(),
@@ -822,6 +826,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"),
@@ -852,6 +857,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"),
@@ -1060,7 +1066,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"),
@@ -1072,7 +1079,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()
@@ -1165,7 +1173,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"),
@@ -1175,7 +1187,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"),
@@ -1183,7 +1199,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(),
@@ -1195,12 +1229,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({
@@ -1260,7 +1299,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),
@@ -2430,6 +2473,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");
@@ -2525,6 +2597,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:
@@ -3338,6 +3412,72 @@ function arcRoute(fromBounds, toBounds, diagramCenter, tension, fromAnchor, toAn
     [pMid, cp3, cp4, p3]
   ];
 }
+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 ellipseRoute(fromBounds, toBounds, ellipse, fromAnchor, toAnchor) {
+  const fromCenter = rectCenter(fromBounds);
+  const toCenter = rectCenter(toBounds);
+  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);
   const toC = rectCenter(toBounds);
@@ -3382,15 +3522,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 };
@@ -3513,8 +3644,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);
@@ -3536,14 +3678,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;
@@ -3576,51 +3733,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;
@@ -3886,6 +4014,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) {
@@ -4164,18 +4310,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;
@@ -4183,7 +4342,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;
       }
@@ -4217,10 +4376,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 } : {}
           });
@@ -4232,11 +4398,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;
@@ -4244,7 +4416,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;
       }
@@ -5049,10 +5221,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;
@@ -5066,7 +5247,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) {
@@ -6128,8 +6317,10 @@ export {
   drawRainbowRule,
   drawVignette,
   edgeAnchor,
+  ellipseRoute,
   flowNodeElementSchema,
   highlightCode,
+  inferEllipseParams,
   inferLayout,
   inferSidecarPath,
   initHighlighter,
@@ -6148,6 +6339,7 @@ export {
   resolveShikiTheme,
   resolveTheme,
   runQa,
+  straightRoute,
   themeToShikiMap,
   writeRenderArtifacts
 };

package/dist/qa.d.ts

@@ -1,4 +1,4 @@
-import { R as RenderMetadata, D as DesignSpec } from './spec.schema-B6sXTTou.js';
+import { R as RenderMetadata, D as DesignSpec } from './spec.schema-BkbcnVcm.js';
 import 'zod';
 import '@napi-rs/canvas';