@spectratools/graphic-designer-cli 0.11.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"),
@@ -1189,6 +1195,20 @@ var stackLayoutConfigSchema = z2.object({
   /** 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(),
   y: z2.number().int(),
@@ -1209,6 +1229,7 @@ var layoutConfigSchema = z2.discriminatedUnion("mode", [
   autoLayoutConfigSchema,
   gridLayoutConfigSchema,
   stackLayoutConfigSchema,
+  ellipseLayoutConfigSchema,
   manualLayoutConfigSchema
 ]);
 var constraintsSchema = z2.object({
@@ -2439,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");
@@ -2534,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:
@@ -3894,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) {
@@ -4172,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;
@@ -4191,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;
       }
@@ -4225,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 } : {}
           });
@@ -4240,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;
@@ -4252,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;
       }

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-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 { 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';

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"),
@@ -1199,6 +1205,20 @@ var stackLayoutConfigSchema = z2.object({
   /** 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(),
   y: z2.number().int(),
@@ -1219,6 +1239,7 @@ var layoutConfigSchema = z2.discriminatedUnion("mode", [
   autoLayoutConfigSchema,
   gridLayoutConfigSchema,
   stackLayoutConfigSchema,
+  ellipseLayoutConfigSchema,
   manualLayoutConfigSchema
 ]);
 var constraintsSchema = z2.object({
@@ -2452,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");
@@ -2547,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:
@@ -3962,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) {
@@ -4240,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;
@@ -4259,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;
       }
@@ -4293,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 } : {}
           });
@@ -4308,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;
@@ -4320,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;
       }

package/dist/qa.d.ts

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

package/dist/qa.js

@@ -509,6 +509,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(),
@@ -556,6 +560,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"),
@@ -586,6 +591,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"),
@@ -932,6 +938,20 @@ var stackLayoutConfigSchema = z2.object({
   /** 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(),
   y: z2.number().int(),
@@ -952,6 +972,7 @@ var layoutConfigSchema = z2.discriminatedUnion("mode", [
   autoLayoutConfigSchema,
   gridLayoutConfigSchema,
   stackLayoutConfigSchema,
+  ellipseLayoutConfigSchema,
   manualLayoutConfigSchema
 ]);
 var constraintsSchema = z2.object({

package/dist/renderer.d.ts

@@ -1,3 +1,3 @@
-export { i as DEFAULT_GENERATOR_VERSION, S as IterationMeta, V as LayoutSnapshot, a as Rect, Y as RenderDesignOptions, R as RenderMetadata, Z as RenderResult, d as RenderedElement, a4 as WrittenArtifacts, a7 as computeSpecHash, aq as inferSidecarPath, at as renderDesign, av as writeRenderArtifacts } from './spec.schema-CYlOLxmK.js';
+export { i as DEFAULT_GENERATOR_VERSION, U as IterationMeta, W as LayoutSnapshot, a as Rect, Z as RenderDesignOptions, R as RenderMetadata, _ as RenderResult, d as RenderedElement, a5 as WrittenArtifacts, a8 as computeSpecHash, ar as inferSidecarPath, au as renderDesign, aw as writeRenderArtifacts } from './spec.schema-BkbcnVcm.js';
 import 'zod';
 import '@napi-rs/canvas';