@spectratools/graphic-designer-cli 0.6.0 → 0.7.0

package/dist/cli.js

@@ -852,6 +852,15 @@ var drawGradientRectSchema = z2.object({
   radius: z2.number().min(0).max(256).default(0),
   opacity: z2.number().min(0).max(1).default(1)
 }).strict();
+var drawGridSchema = z2.object({
+  type: z2.literal("grid"),
+  spacing: z2.number().min(5).max(200).default(40),
+  color: colorHexSchema2.default("#1E2D4A"),
+  width: z2.number().min(0.1).max(4).default(0.5),
+  opacity: z2.number().min(0).max(1).default(0.2),
+  offsetX: z2.number().default(0),
+  offsetY: z2.number().default(0)
+}).strict();
 var drawCommandSchema = z2.discriminatedUnion("type", [
   drawRectSchema,
   drawCircleSchema,
@@ -860,7 +869,8 @@ var drawCommandSchema = z2.discriminatedUnion("type", [
   drawBezierSchema,
   drawPathSchema,
   drawBadgeSchema,
-  drawGradientRectSchema
+  drawGradientRectSchema,
+  drawGridSchema
 ]);
 var defaultCanvas = {
   width: 1200,
@@ -966,6 +976,13 @@ var flowNodeElementSchema = z2.object({
   badgePosition: z2.enum(["top", "inside-top"]).default("inside-top"),
   shadow: flowNodeShadowSchema.optional()
 }).strict();
+var anchorHintSchema = z2.union([
+  z2.enum(["top", "bottom", "left", "right", "center"]),
+  z2.object({
+    x: z2.number().min(-1).max(1),
+    y: z2.number().min(-1).max(1)
+  }).strict()
+]);
 var connectionElementSchema = z2.object({
   type: z2.literal("connection"),
   from: z2.string().min(1).max(120),
@@ -979,9 +996,12 @@ var connectionElementSchema = z2.object({
   width: z2.number().min(0.5).max(10).optional(),
   strokeWidth: z2.number().min(0.5).max(10).default(2),
   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"),
-  tension: z2.number().min(0.1).max(0.8).default(0.35)
+  tension: z2.number().min(0.1).max(0.8).default(0.35),
+  fromAnchor: anchorHintSchema.optional(),
+  toAnchor: anchorHintSchema.optional()
 }).strict();
 var codeBlockStyleSchema = z2.object({
   paddingVertical: z2.number().min(0).max(128).default(56),
@@ -3105,21 +3125,61 @@ function edgeAnchor(bounds, target) {
   const t = absDx * hh > absDy * hw ? hw / absDx : hh / absDy;
   return { x: c.x + dx * t, y: c.y + dy * t };
 }
+function resolveAnchor(bounds, anchor, fallbackTarget) {
+  if (!anchor) return edgeAnchor(bounds, fallbackTarget);
+  if (typeof anchor === "string") {
+    const c2 = rectCenter(bounds);
+    switch (anchor) {
+      case "top":
+        return { x: c2.x, y: bounds.y };
+      case "bottom":
+        return { x: c2.x, y: bounds.y + bounds.height };
+      case "left":
+        return { x: bounds.x, y: c2.y };
+      case "right":
+        return { x: bounds.x + bounds.width, y: c2.y };
+      case "center":
+        return c2;
+    }
+  }
+  const c = rectCenter(bounds);
+  return {
+    x: c.x + anchor.x * (bounds.width / 2),
+    y: c.y + anchor.y * (bounds.height / 2)
+  };
+}
+function anchorNormal(anchor, point, diagramCenter) {
+  if (typeof anchor === "string") {
+    switch (anchor) {
+      case "top":
+        return { x: 0, y: -1 };
+      case "bottom":
+        return { x: 0, y: 1 };
+      case "left":
+        return { x: -1, y: 0 };
+      case "right":
+        return { x: 1, y: 0 };
+      case "center":
+        return outwardNormal(point, diagramCenter);
+    }
+  }
+  return outwardNormal(point, diagramCenter);
+}
 function outwardNormal(point, diagramCenter) {
   const dx = point.x - diagramCenter.x;
   const dy = point.y - diagramCenter.y;
   const len = Math.hypot(dx, dy) || 1;
   return { x: dx / len, y: dy / len };
 }
-function curveRoute(fromBounds, toBounds, diagramCenter, tension) {
+function curveRoute(fromBounds, toBounds, diagramCenter, tension, fromAnchor, toAnchor) {
   const fromCenter = rectCenter(fromBounds);
   const toCenter = rectCenter(toBounds);
-  const p0 = edgeAnchor(fromBounds, toCenter);
-  const p3 = edgeAnchor(toBounds, fromCenter);
+  const p0 = resolveAnchor(fromBounds, fromAnchor, toCenter);
+  const p3 = resolveAnchor(toBounds, toAnchor, fromCenter);
   const dist = Math.hypot(p3.x - p0.x, p3.y - p0.y);
   const offset = dist * tension;
-  const n0 = outwardNormal(p0, diagramCenter);
-  const n3 = outwardNormal(p3, diagramCenter);
+  const n0 = anchorNormal(fromAnchor, p0, diagramCenter);
+  const n3 = anchorNormal(toAnchor, p3, diagramCenter);
   const cp1 = { x: p0.x + n0.x * offset, y: p0.y + n0.y * offset };
   const cp2 = { x: p3.x + n3.x * offset, y: p3.y + n3.y * offset };
   return [p0, cp1, cp2, p3];
@@ -3133,11 +3193,11 @@ function localToWorld(origin, axisX, axisY, local) {
     y: origin.y + axisX.y * local.x + axisY.y * local.y
   };
 }
-function arcRoute(fromBounds, toBounds, diagramCenter, tension) {
+function arcRoute(fromBounds, toBounds, diagramCenter, tension, fromAnchor, toAnchor) {
   const fromCenter = rectCenter(fromBounds);
   const toCenter = rectCenter(toBounds);
-  const start = edgeAnchor(fromBounds, toCenter);
-  const end = edgeAnchor(toBounds, fromCenter);
+  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) {
@@ -3175,11 +3235,11 @@ function arcRoute(fromBounds, toBounds, diagramCenter, tension) {
     [pMid, cp3, cp4, p3]
   ];
 }
-function orthogonalRoute(fromBounds, toBounds) {
+function orthogonalRoute(fromBounds, toBounds, fromAnchor, toAnchor) {
   const fromC = rectCenter(fromBounds);
   const toC = rectCenter(toBounds);
-  const p0 = edgeAnchor(fromBounds, toC);
-  const p3 = edgeAnchor(toBounds, fromC);
+  const p0 = resolveAnchor(fromBounds, fromAnchor, toC);
+  const p3 = resolveAnchor(toBounds, toAnchor, fromC);
   const midX = (p0.x + p3.x) / 2;
   return [p0, { x: midX, y: p0.y }, { x: midX, y: p3.y }, p3];
 }
@@ -3190,6 +3250,35 @@ function bezierPointAt(p0, cp1, cp2, p3, t) {
     y: mt * mt * mt * p0.y + 3 * mt * mt * t * cp1.y + 3 * mt * t * t * cp2.y + t * t * t * p3.y
   };
 }
+function bezierTangentAt(p0, cp1, cp2, p3, t) {
+  const mt = 1 - t;
+  return {
+    x: 3 * mt * mt * (cp1.x - p0.x) + 6 * mt * t * (cp2.x - cp1.x) + 3 * t * t * (p3.x - cp2.x),
+    y: 3 * mt * mt * (cp1.y - p0.y) + 6 * mt * t * (cp2.y - cp1.y) + 3 * t * t * (p3.y - cp2.y)
+  };
+}
+function isInsideRect(point, rect) {
+  return point.x >= rect.x && point.x <= rect.x + rect.width && point.y >= rect.y && point.y <= rect.y + rect.height;
+}
+function findBoundaryIntersection(p0, cp1, cp2, p3, targetRect, searchFromEnd) {
+  const step = 5e-3;
+  if (searchFromEnd) {
+    for (let t = 0.95; t >= 0.5; t -= step) {
+      const pt = bezierPointAt(p0, cp1, cp2, p3, t);
+      if (!isInsideRect(pt, targetRect)) {
+        return t;
+      }
+    }
+  } else {
+    for (let t = 0.05; t <= 0.5; t += step) {
+      const pt = bezierPointAt(p0, cp1, cp2, p3, t);
+      if (!isInsideRect(pt, targetRect)) {
+        return t;
+      }
+    }
+  }
+  return void 0;
+}
 function pointAlongArc(route, t) {
   const [first, second] = route;
   if (t <= 0.5) {
@@ -3317,8 +3406,16 @@ function renderConnection(ctx, conn, fromBounds, toBounds, theme, edgeRoute, opt
   let labelPoint;
   ctx.save();
   ctx.globalAlpha = conn.opacity;
+  const arrowPlacement = conn.arrowPlacement ?? "endpoint";
   if (routing === "curve") {
-    const [p0, cp1, cp2, p3] = curveRoute(fromBounds, toBounds, diagramCenter, tension);
+    const [p0, cp1, cp2, p3] = curveRoute(
+      fromBounds,
+      toBounds,
+      diagramCenter,
+      tension,
+      conn.fromAnchor,
+      conn.toAnchor
+    );
     ctx.strokeStyle = style.color;
     ctx.lineWidth = style.width;
     ctx.setLineDash(style.dash ?? []);
@@ -3332,8 +3429,33 @@ function renderConnection(ctx, conn, fromBounds, toBounds, theme, edgeRoute, opt
     startAngle = Math.atan2(p0.y - cp1.y, p0.x - cp1.x);
     endAngle = Math.atan2(p3.y - cp2.y, p3.x - cp2.x);
     labelPoint = bezierPointAt(p0, cp1, cp2, p3, labelT);
+    if (arrowPlacement === "boundary") {
+      if (conn.arrow === "end" || conn.arrow === "both") {
+        const tEnd = findBoundaryIntersection(p0, cp1, cp2, p3, toBounds, true);
+        if (tEnd !== void 0) {
+          endPoint = bezierPointAt(p0, cp1, cp2, p3, tEnd);
+          const tangent = bezierTangentAt(p0, cp1, cp2, p3, tEnd);
+          endAngle = Math.atan2(tangent.y, tangent.x);
+        }
+      }
+      if (conn.arrow === "start" || conn.arrow === "both") {
+        const tStart = findBoundaryIntersection(p0, cp1, cp2, p3, fromBounds, false);
+        if (tStart !== void 0) {
+          startPoint = bezierPointAt(p0, cp1, cp2, p3, tStart);
+          const tangent = bezierTangentAt(p0, cp1, cp2, p3, tStart);
+          startAngle = Math.atan2(tangent.y, tangent.x) + Math.PI;
+        }
+      }
+    }
   } else if (routing === "arc") {
-    const [first, second] = arcRoute(fromBounds, toBounds, diagramCenter, tension);
+    const [first, second] = arcRoute(
+      fromBounds,
+      toBounds,
+      diagramCenter,
+      tension,
+      conn.fromAnchor,
+      conn.toAnchor
+    );
     const [p0, cp1, cp2, pMid] = first;
     const [, cp3, cp4, p3] = second;
     ctx.strokeStyle = style.color;
@@ -3350,9 +3472,29 @@ function renderConnection(ctx, conn, fromBounds, toBounds, theme, edgeRoute, opt
     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;
+        }
+      }
+    }
   } else {
-    const useElkRoute = routing === "auto" && (edgeRoute?.points.length ?? 0) >= 2;
-    linePoints = useElkRoute ? edgeRoute?.points ?? orthogonalRoute(fromBounds, toBounds) : orthogonalRoute(fromBounds, toBounds);
+    const hasAnchorHints = conn.fromAnchor !== void 0 || conn.toAnchor !== void 0;
+    const useElkRoute = routing === "auto" && !hasAnchorHints && (edgeRoute?.points.length ?? 0) >= 2;
+    linePoints = useElkRoute ? edgeRoute?.points ?? orthogonalRoute(fromBounds, toBounds, conn.fromAnchor, conn.toAnchor) : orthogonalRoute(fromBounds, toBounds, conn.fromAnchor, conn.toAnchor);
     startPoint = linePoints[0];
     const startSegment = linePoints[1] ?? linePoints[0];
     const endStart = linePoints[linePoints.length - 2] ?? linePoints[0];
@@ -4009,6 +4151,36 @@ function renderDrawCommands(ctx, commands, theme) {
         });
         break;
       }
+      case "grid": {
+        const canvasWidth = ctx.canvas.width;
+        const canvasHeight = ctx.canvas.height;
+        withOpacity(ctx, command.opacity, () => {
+          ctx.strokeStyle = command.color;
+          ctx.lineWidth = command.width;
+          const startX = command.offsetX % command.spacing;
+          for (let x = startX; x <= canvasWidth; x += command.spacing) {
+            ctx.beginPath();
+            ctx.moveTo(x, 0);
+            ctx.lineTo(x, canvasHeight);
+            ctx.stroke();
+          }
+          const startY = command.offsetY % command.spacing;
+          for (let y = startY; y <= canvasHeight; y += command.spacing) {
+            ctx.beginPath();
+            ctx.moveTo(0, y);
+            ctx.lineTo(canvasWidth, y);
+            ctx.stroke();
+          }
+        });
+        rendered.push({
+          id,
+          kind: "draw",
+          bounds: { x: 0, y: 0, width: canvasWidth, height: canvasHeight },
+          foregroundColor: command.color,
+          allowOverlap: true
+        });
+        break;
+      }
     }
   }
   return rendered;

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, C as ConnectionElement } from './spec.schema-Dm_wOLTd.js';
-export { A as AutoLayoutConfig, B as BuiltInTheme, e as CardElement, f as CodeBlockElement, g as ConstraintSpec, h as DEFAULT_GENERATOR_VERSION, i as DEFAULT_RAINBOW_COLORS, j as Decorator, k as DesignCardSpec, l as DesignSafeFrame, m as DesignTheme, n as DiagramElement, o as DiagramLayout, p as DiagramSpec, q as DrawBadge, r as DrawBezier, s as DrawCircle, t as DrawFontFamily, u as DrawGradientRect, v as DrawLine, w as DrawPath, x as DrawPoint, y as DrawRect, z as DrawText, E as Element, F as FlowNodeElement, G as Gradient, H as GradientOverlayDecorator, I as GradientSpec, J as GradientStop, K as GridLayoutConfig, L as ImageElement, M as LayoutConfig, N as LayoutSnapshot, O as ManualLayoutConfig, P as RainbowRuleDecorator, R as RenderMetadata, Q as RenderResult, S as ShapeElement, U as StackLayoutConfig, V as TerminalElement, W as TextElement, X as ThemeInput, Y as VignetteDecorator, Z as WrittenArtifacts, _ as builtInThemeBackgrounds, $ as builtInThemes, a0 as computeSpecHash, a1 as connectionElementSchema, a2 as defaultAutoLayout, a3 as defaultCanvas, a4 as defaultConstraints, a5 as defaultGridLayout, a6 as defaultLayout, a7 as defaultStackLayout, a8 as defaultTheme, a9 as deriveSafeFrame, aa as designSpecSchema, ab as diagramElementSchema, ac as diagramLayoutSchema, ad as diagramSpecSchema, ae as drawGradientRect, af as drawRainbowRule, ag as drawVignette, ah as flowNodeElementSchema, ai as inferLayout, aj as inferSidecarPath, ak as parseDesignSpec, al as parseDiagramSpec, am as renderDesign, an as resolveTheme, ao as writeRenderArtifacts } from './spec.schema-Dm_wOLTd.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-BeFz_nk1.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 DrawBadge, s as DrawBezier, t as DrawCircle, u as DrawFontFamily, v as DrawGradientRect, w as DrawLine, x as DrawPath, y as DrawPoint, z as DrawRect, E as DrawText, F as Element, G as FlowNodeElement, H as Gradient, I as GradientOverlayDecorator, J as GradientSpec, K as GradientStop, L as GridLayoutConfig, M as ImageElement, N as LayoutConfig, O as LayoutSnapshot, P as ManualLayoutConfig, Q as RainbowRuleDecorator, R as RenderMetadata, S as RenderResult, U as ShapeElement, V as StackLayoutConfig, W as TerminalElement, X as TextElement, Y as ThemeInput, Z as VignetteDecorator, _ as WrittenArtifacts, $ as builtInThemeBackgrounds, a0 as builtInThemes, a1 as computeSpecHash, a2 as connectionElementSchema, a3 as defaultAutoLayout, a4 as defaultCanvas, a5 as defaultConstraints, a6 as defaultGridLayout, a7 as defaultLayout, a8 as defaultStackLayout, a9 as defaultTheme, aa as deriveSafeFrame, ab as designSpecSchema, ac as diagramElementSchema, ad as diagramLayoutSchema, ae as diagramSpecSchema, af as drawGradientRect, ag as drawRainbowRule, ah as drawVignette, ai as flowNodeElementSchema, aj as inferLayout, ak as inferSidecarPath, al as parseDesignSpec, am as parseDiagramSpec, an as renderDesign, ao as resolveTheme, ap as writeRenderArtifacts } from './spec.schema-BeFz_nk1.js';
 import { SKRSContext2D } from '@napi-rs/canvas';
 export { QaIssue, QaReferenceResult, QaReport, QaSeverity, readMetadata, runQa } from './qa.js';
 import { Highlighter } from 'shiki';
@@ -275,21 +275,31 @@ declare function outwardNormal(point: Point, diagramCenter: Point): Point;
 /**
  * Compute a cubic bezier curve that bows outward from the diagram center.
  * Returns `[startPoint, controlPoint1, controlPoint2, endPoint]`.
+ *
+ * When `fromAnchor` or `toAnchor` hints are provided, they override the
+ * automatic edge anchor calculation and the outward normal is derived from
+ * the hint direction instead of from the diagram center.
  */
-declare function curveRoute(fromBounds: Rect, toBounds: Rect, diagramCenter: Point, tension: number): [Point, Point, Point, Point];
+declare function curveRoute(fromBounds: Rect, toBounds: Rect, diagramCenter: Point, tension: number, fromAnchor?: AnchorHint, toAnchor?: AnchorHint): [Point, Point, Point, Point];
 /**
  * Approximate an outward-bowing half-ellipse with two cubic bezier segments.
  *
  * Uses the classic kappa constant (`4 * (sqrt(2) - 1) / 3`) for quarter-ellipse
  * control points, producing a stable arc from source edge anchor to target edge
  * anchor.
+ *
+ * When `fromAnchor` or `toAnchor` hints are provided, they override the
+ * automatic edge anchor calculation.
  */
-declare function arcRoute(fromBounds: Rect, toBounds: Rect, diagramCenter: Point, tension: number): [CubicBezierSegment, CubicBezierSegment];
+declare function arcRoute(fromBounds: Rect, toBounds: Rect, diagramCenter: Point, tension: number, fromAnchor?: AnchorHint, toAnchor?: AnchorHint): [CubicBezierSegment, CubicBezierSegment];
 /**
  * Compute an orthogonal (right-angle) path between two rectangles.
  * Returns an array of waypoints forming a 3-segment path.
+ *
+ * When `fromAnchor` or `toAnchor` hints are provided, they override the
+ * automatic edge anchor calculation.
  */
-declare function orthogonalRoute(fromBounds: Rect, toBounds: Rect): Point[];
+declare function orthogonalRoute(fromBounds: Rect, toBounds: Rect, fromAnchor?: AnchorHint, toAnchor?: AnchorHint): Point[];
 /** Evaluate cubic bezier at parameter `t`. */
 declare function bezierPointAt(p0: Point, cp1: Point, cp2: Point, p3: Point, t: number): Point;
 /**

package/dist/index.js

@@ -861,6 +861,15 @@ var drawGradientRectSchema = z2.object({
   radius: z2.number().min(0).max(256).default(0),
   opacity: z2.number().min(0).max(1).default(1)
 }).strict();
+var drawGridSchema = z2.object({
+  type: z2.literal("grid"),
+  spacing: z2.number().min(5).max(200).default(40),
+  color: colorHexSchema2.default("#1E2D4A"),
+  width: z2.number().min(0.1).max(4).default(0.5),
+  opacity: z2.number().min(0).max(1).default(0.2),
+  offsetX: z2.number().default(0),
+  offsetY: z2.number().default(0)
+}).strict();
 var drawCommandSchema = z2.discriminatedUnion("type", [
   drawRectSchema,
   drawCircleSchema,
@@ -869,7 +878,8 @@ var drawCommandSchema = z2.discriminatedUnion("type", [
   drawBezierSchema,
   drawPathSchema,
   drawBadgeSchema,
-  drawGradientRectSchema
+  drawGradientRectSchema,
+  drawGridSchema
 ]);
 var defaultCanvas = {
   width: 1200,
@@ -976,6 +986,13 @@ var flowNodeElementSchema = z2.object({
   badgePosition: z2.enum(["top", "inside-top"]).default("inside-top"),
   shadow: flowNodeShadowSchema.optional()
 }).strict();
+var anchorHintSchema = z2.union([
+  z2.enum(["top", "bottom", "left", "right", "center"]),
+  z2.object({
+    x: z2.number().min(-1).max(1),
+    y: z2.number().min(-1).max(1)
+  }).strict()
+]);
 var connectionElementSchema = z2.object({
   type: z2.literal("connection"),
   from: z2.string().min(1).max(120),
@@ -989,9 +1006,12 @@ var connectionElementSchema = z2.object({
   width: z2.number().min(0.5).max(10).optional(),
   strokeWidth: z2.number().min(0.5).max(10).default(2),
   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"),
-  tension: z2.number().min(0.1).max(0.8).default(0.35)
+  tension: z2.number().min(0.1).max(0.8).default(0.35),
+  fromAnchor: anchorHintSchema.optional(),
+  toAnchor: anchorHintSchema.optional()
 }).strict();
 var codeBlockStyleSchema = z2.object({
   paddingVertical: z2.number().min(0).max(128).default(56),
@@ -3122,21 +3142,61 @@ function edgeAnchor(bounds, target) {
   const t = absDx * hh > absDy * hw ? hw / absDx : hh / absDy;
   return { x: c.x + dx * t, y: c.y + dy * t };
 }
+function resolveAnchor(bounds, anchor, fallbackTarget) {
+  if (!anchor) return edgeAnchor(bounds, fallbackTarget);
+  if (typeof anchor === "string") {
+    const c2 = rectCenter(bounds);
+    switch (anchor) {
+      case "top":
+        return { x: c2.x, y: bounds.y };
+      case "bottom":
+        return { x: c2.x, y: bounds.y + bounds.height };
+      case "left":
+        return { x: bounds.x, y: c2.y };
+      case "right":
+        return { x: bounds.x + bounds.width, y: c2.y };
+      case "center":
+        return c2;
+    }
+  }
+  const c = rectCenter(bounds);
+  return {
+    x: c.x + anchor.x * (bounds.width / 2),
+    y: c.y + anchor.y * (bounds.height / 2)
+  };
+}
+function anchorNormal(anchor, point, diagramCenter) {
+  if (typeof anchor === "string") {
+    switch (anchor) {
+      case "top":
+        return { x: 0, y: -1 };
+      case "bottom":
+        return { x: 0, y: 1 };
+      case "left":
+        return { x: -1, y: 0 };
+      case "right":
+        return { x: 1, y: 0 };
+      case "center":
+        return outwardNormal(point, diagramCenter);
+    }
+  }
+  return outwardNormal(point, diagramCenter);
+}
 function outwardNormal(point, diagramCenter) {
   const dx = point.x - diagramCenter.x;
   const dy = point.y - diagramCenter.y;
   const len = Math.hypot(dx, dy) || 1;
   return { x: dx / len, y: dy / len };
 }
-function curveRoute(fromBounds, toBounds, diagramCenter, tension) {
+function curveRoute(fromBounds, toBounds, diagramCenter, tension, fromAnchor, toAnchor) {
   const fromCenter = rectCenter(fromBounds);
   const toCenter = rectCenter(toBounds);
-  const p0 = edgeAnchor(fromBounds, toCenter);
-  const p3 = edgeAnchor(toBounds, fromCenter);
+  const p0 = resolveAnchor(fromBounds, fromAnchor, toCenter);
+  const p3 = resolveAnchor(toBounds, toAnchor, fromCenter);
   const dist = Math.hypot(p3.x - p0.x, p3.y - p0.y);
   const offset = dist * tension;
-  const n0 = outwardNormal(p0, diagramCenter);
-  const n3 = outwardNormal(p3, diagramCenter);
+  const n0 = anchorNormal(fromAnchor, p0, diagramCenter);
+  const n3 = anchorNormal(toAnchor, p3, diagramCenter);
   const cp1 = { x: p0.x + n0.x * offset, y: p0.y + n0.y * offset };
   const cp2 = { x: p3.x + n3.x * offset, y: p3.y + n3.y * offset };
   return [p0, cp1, cp2, p3];
@@ -3150,11 +3210,11 @@ function localToWorld(origin, axisX, axisY, local) {
     y: origin.y + axisX.y * local.x + axisY.y * local.y
   };
 }
-function arcRoute(fromBounds, toBounds, diagramCenter, tension) {
+function arcRoute(fromBounds, toBounds, diagramCenter, tension, fromAnchor, toAnchor) {
   const fromCenter = rectCenter(fromBounds);
   const toCenter = rectCenter(toBounds);
-  const start = edgeAnchor(fromBounds, toCenter);
-  const end = edgeAnchor(toBounds, fromCenter);
+  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) {
@@ -3192,11 +3252,11 @@ function arcRoute(fromBounds, toBounds, diagramCenter, tension) {
     [pMid, cp3, cp4, p3]
   ];
 }
-function orthogonalRoute(fromBounds, toBounds) {
+function orthogonalRoute(fromBounds, toBounds, fromAnchor, toAnchor) {
   const fromC = rectCenter(fromBounds);
   const toC = rectCenter(toBounds);
-  const p0 = edgeAnchor(fromBounds, toC);
-  const p3 = edgeAnchor(toBounds, fromC);
+  const p0 = resolveAnchor(fromBounds, fromAnchor, toC);
+  const p3 = resolveAnchor(toBounds, toAnchor, fromC);
   const midX = (p0.x + p3.x) / 2;
   return [p0, { x: midX, y: p0.y }, { x: midX, y: p3.y }, p3];
 }
@@ -3207,6 +3267,35 @@ function bezierPointAt(p0, cp1, cp2, p3, t) {
     y: mt * mt * mt * p0.y + 3 * mt * mt * t * cp1.y + 3 * mt * t * t * cp2.y + t * t * t * p3.y
   };
 }
+function bezierTangentAt(p0, cp1, cp2, p3, t) {
+  const mt = 1 - t;
+  return {
+    x: 3 * mt * mt * (cp1.x - p0.x) + 6 * mt * t * (cp2.x - cp1.x) + 3 * t * t * (p3.x - cp2.x),
+    y: 3 * mt * mt * (cp1.y - p0.y) + 6 * mt * t * (cp2.y - cp1.y) + 3 * t * t * (p3.y - cp2.y)
+  };
+}
+function isInsideRect(point, rect) {
+  return point.x >= rect.x && point.x <= rect.x + rect.width && point.y >= rect.y && point.y <= rect.y + rect.height;
+}
+function findBoundaryIntersection(p0, cp1, cp2, p3, targetRect, searchFromEnd) {
+  const step = 5e-3;
+  if (searchFromEnd) {
+    for (let t = 0.95; t >= 0.5; t -= step) {
+      const pt = bezierPointAt(p0, cp1, cp2, p3, t);
+      if (!isInsideRect(pt, targetRect)) {
+        return t;
+      }
+    }
+  } else {
+    for (let t = 0.05; t <= 0.5; t += step) {
+      const pt = bezierPointAt(p0, cp1, cp2, p3, t);
+      if (!isInsideRect(pt, targetRect)) {
+        return t;
+      }
+    }
+  }
+  return void 0;
+}
 function pointAlongArc(route, t) {
   const [first, second] = route;
   if (t <= 0.5) {
@@ -3334,8 +3423,16 @@ function renderConnection(ctx, conn, fromBounds, toBounds, theme, edgeRoute, opt
   let labelPoint;
   ctx.save();
   ctx.globalAlpha = conn.opacity;
+  const arrowPlacement = conn.arrowPlacement ?? "endpoint";
   if (routing === "curve") {
-    const [p0, cp1, cp2, p3] = curveRoute(fromBounds, toBounds, diagramCenter, tension);
+    const [p0, cp1, cp2, p3] = curveRoute(
+      fromBounds,
+      toBounds,
+      diagramCenter,
+      tension,
+      conn.fromAnchor,
+      conn.toAnchor
+    );
     ctx.strokeStyle = style.color;
     ctx.lineWidth = style.width;
     ctx.setLineDash(style.dash ?? []);
@@ -3349,8 +3446,33 @@ function renderConnection(ctx, conn, fromBounds, toBounds, theme, edgeRoute, opt
     startAngle = Math.atan2(p0.y - cp1.y, p0.x - cp1.x);
     endAngle = Math.atan2(p3.y - cp2.y, p3.x - cp2.x);
     labelPoint = bezierPointAt(p0, cp1, cp2, p3, labelT);
+    if (arrowPlacement === "boundary") {
+      if (conn.arrow === "end" || conn.arrow === "both") {
+        const tEnd = findBoundaryIntersection(p0, cp1, cp2, p3, toBounds, true);
+        if (tEnd !== void 0) {
+          endPoint = bezierPointAt(p0, cp1, cp2, p3, tEnd);
+          const tangent = bezierTangentAt(p0, cp1, cp2, p3, tEnd);
+          endAngle = Math.atan2(tangent.y, tangent.x);
+        }
+      }
+      if (conn.arrow === "start" || conn.arrow === "both") {
+        const tStart = findBoundaryIntersection(p0, cp1, cp2, p3, fromBounds, false);
+        if (tStart !== void 0) {
+          startPoint = bezierPointAt(p0, cp1, cp2, p3, tStart);
+          const tangent = bezierTangentAt(p0, cp1, cp2, p3, tStart);
+          startAngle = Math.atan2(tangent.y, tangent.x) + Math.PI;
+        }
+      }
+    }
   } else if (routing === "arc") {
-    const [first, second] = arcRoute(fromBounds, toBounds, diagramCenter, tension);
+    const [first, second] = arcRoute(
+      fromBounds,
+      toBounds,
+      diagramCenter,
+      tension,
+      conn.fromAnchor,
+      conn.toAnchor
+    );
     const [p0, cp1, cp2, pMid] = first;
     const [, cp3, cp4, p3] = second;
     ctx.strokeStyle = style.color;
@@ -3367,9 +3489,29 @@ function renderConnection(ctx, conn, fromBounds, toBounds, theme, edgeRoute, opt
     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;
+        }
+      }
+    }
   } else {
-    const useElkRoute = routing === "auto" && (edgeRoute?.points.length ?? 0) >= 2;
-    linePoints = useElkRoute ? edgeRoute?.points ?? orthogonalRoute(fromBounds, toBounds) : orthogonalRoute(fromBounds, toBounds);
+    const hasAnchorHints = conn.fromAnchor !== void 0 || conn.toAnchor !== void 0;
+    const useElkRoute = routing === "auto" && !hasAnchorHints && (edgeRoute?.points.length ?? 0) >= 2;
+    linePoints = useElkRoute ? edgeRoute?.points ?? orthogonalRoute(fromBounds, toBounds, conn.fromAnchor, conn.toAnchor) : orthogonalRoute(fromBounds, toBounds, conn.fromAnchor, conn.toAnchor);
     startPoint = linePoints[0];
     const startSegment = linePoints[1] ?? linePoints[0];
     const endStart = linePoints[linePoints.length - 2] ?? linePoints[0];
@@ -4026,6 +4168,36 @@ function renderDrawCommands(ctx, commands, theme) {
         });
         break;
       }
+      case "grid": {
+        const canvasWidth = ctx.canvas.width;
+        const canvasHeight = ctx.canvas.height;
+        withOpacity(ctx, command.opacity, () => {
+          ctx.strokeStyle = command.color;
+          ctx.lineWidth = command.width;
+          const startX = command.offsetX % command.spacing;
+          for (let x = startX; x <= canvasWidth; x += command.spacing) {
+            ctx.beginPath();
+            ctx.moveTo(x, 0);
+            ctx.lineTo(x, canvasHeight);
+            ctx.stroke();
+          }
+          const startY = command.offsetY % command.spacing;
+          for (let y = startY; y <= canvasHeight; y += command.spacing) {
+            ctx.beginPath();
+            ctx.moveTo(0, y);
+            ctx.lineTo(canvasWidth, y);
+            ctx.stroke();
+          }
+        });
+        rendered.push({
+          id,
+          kind: "draw",
+          bounds: { x: 0, y: 0, width: canvasWidth, height: canvasHeight },
+          foregroundColor: command.color,
+          allowOverlap: true
+        });
+        break;
+      }
     }
   }
   return rendered;

package/dist/qa.d.ts

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