@spectratools/graphic-designer-cli 0.4.0 → 0.7.0

package/dist/renderer.js

@@ -115,9 +115,9 @@ function drawRoundedRect(ctx, rect, radius, fill, stroke) {
   roundRectPath(ctx, rect, radius);
   fillAndStroke(ctx, fill, stroke);
 }
-function drawCircle(ctx, center2, radius, fill, stroke) {
+function drawCircle(ctx, center, radius, fill, stroke) {
   ctx.beginPath();
-  ctx.arc(center2.x, center2.y, Math.max(0, radius), 0, Math.PI * 2);
+  ctx.arc(center.x, center.y, Math.max(0, radius), 0, Math.PI * 2);
   ctx.closePath();
   fillAndStroke(ctx, fill, stroke);
 }
@@ -339,6 +339,10 @@ function relativeLuminance(hexColor) {
   const b = srgbToLinear(rgb.b);
   return 0.2126 * r + 0.7152 * g + 0.0722 * b;
 }
+function withAlpha(hexColor, opacity) {
+  const rgb = parseHexColor(hexColor);
+  return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${opacity})`;
+}
 function blendColorWithOpacity(foreground, background, opacity) {
   const fg = parseHexColor(foreground);
   const bg = parseHexColor(background);
@@ -441,15 +445,34 @@ function renderFlowNode(ctx, node, bounds, theme) {
   const badgeBackground = node.badgeBackground ?? borderColor ?? theme.accent;
   ctx.save();
   ctx.lineWidth = borderWidth;
+  if (node.shadow) {
+    const shadowColor = node.shadow.color ?? borderColor ?? theme.accent;
+    ctx.shadowColor = withAlpha(shadowColor, node.shadow.opacity);
+    ctx.shadowBlur = node.shadow.blur;
+    ctx.shadowOffsetX = node.shadow.offsetX;
+    ctx.shadowOffsetY = node.shadow.offsetY;
+  }
   if (fillOpacity < 1) {
     ctx.globalAlpha = node.opacity * fillOpacity;
     drawNodeShape(ctx, node.shape, bounds, fillColor, void 0, cornerRadius);
+    if (node.shadow) {
+      ctx.shadowColor = "transparent";
+      ctx.shadowBlur = 0;
+      ctx.shadowOffsetX = 0;
+      ctx.shadowOffsetY = 0;
+    }
     ctx.globalAlpha = node.opacity;
     drawNodeShape(ctx, node.shape, bounds, "rgba(0,0,0,0)", borderColor, cornerRadius);
   } else {
     ctx.globalAlpha = node.opacity;
     drawNodeShape(ctx, node.shape, bounds, fillColor, borderColor, cornerRadius);
   }
+  if (node.shadow) {
+    ctx.shadowColor = "transparent";
+    ctx.shadowBlur = 0;
+    ctx.shadowOffsetX = 0;
+    ctx.shadowOffsetY = 0;
+  }
   const headingFont = resolveFont(theme.fonts.heading, "heading");
   const bodyFont = resolveFont(theme.fonts.body, "body");
   const monoFont = resolveFont(theme.fonts.mono, "mono");
@@ -1121,7 +1144,7 @@ function parseHexColor2(color) {
     a: normalized.length === 8 ? parseChannel2(6) / 255 : 1
   };
 }
-function withAlpha(color, alpha) {
+function withAlpha2(color, alpha) {
   const parsed = parseHexColor2(color);
   const effectiveAlpha = clamp01(parsed.a * alpha);
   return `rgba(${parsed.r}, ${parsed.g}, ${parsed.b}, ${effectiveAlpha})`;
@@ -1178,9 +1201,9 @@ function drawVignette(ctx, width, height, intensity = 0.3, color = "#000000") {
     centerY,
     outerRadius
   );
-  vignette.addColorStop(0, withAlpha(color, 0));
-  vignette.addColorStop(0.6, withAlpha(color, 0));
-  vignette.addColorStop(1, withAlpha(color, clamp01(intensity)));
+  vignette.addColorStop(0, withAlpha2(color, 0));
+  vignette.addColorStop(0.6, withAlpha2(color, 0));
+  vignette.addColorStop(1, withAlpha2(color, clamp01(intensity)));
   ctx.save();
   ctx.fillStyle = vignette;
   ctx.fillRect(0, 0, width, height);
@@ -1311,12 +1334,12 @@ var MACOS_DOTS = [
   { fill: "#27C93F", stroke: "#1AAB29" }
 ];
 function drawMacosDots(ctx, x, y) {
-  for (const [index, dot] of MACOS_DOTS.entries()) {
+  for (const [index, dot2] of MACOS_DOTS.entries()) {
     ctx.beginPath();
     ctx.arc(x + index * DOT_SPACING, y, DOT_RADIUS, 0, Math.PI * 2);
     ctx.closePath();
-    ctx.fillStyle = dot.fill;
-    ctx.strokeStyle = dot.stroke;
+    ctx.fillStyle = dot2.fill;
+    ctx.strokeStyle = dot2.stroke;
     ctx.lineWidth = DOT_STROKE_WIDTH;
     ctx.fill();
     ctx.stroke();
@@ -1965,25 +1988,203 @@ function drawOrthogonalPath(ctx, from, to, style) {
 }
 
 // src/renderers/connection.ts
-function center(rect) {
+var ELLIPSE_KAPPA = 4 * (Math.sqrt(2) - 1) / 3;
+function rectCenter(rect) {
   return {
     x: rect.x + rect.width / 2,
     y: rect.y + rect.height / 2
   };
 }
-function edgeAnchor(rect, target) {
-  const c = center(rect);
+function edgeAnchor(bounds, target) {
+  const c = rectCenter(bounds);
   const dx = target.x - c.x;
   const dy = target.y - c.y;
-  if (Math.abs(dx) >= Math.abs(dy)) {
-    return {
-      x: dx >= 0 ? rect.x + rect.width : rect.x,
-      y: c.y
-    };
+  if (dx === 0 && dy === 0) {
+    return { x: c.x, y: c.y - bounds.height / 2 };
+  }
+  const hw = bounds.width / 2;
+  const hh = bounds.height / 2;
+  const absDx = Math.abs(dx);
+  const absDy = Math.abs(dy);
+  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, fromAnchor, toAnchor) {
+  const fromCenter = rectCenter(fromBounds);
+  const toCenter = rectCenter(toBounds);
+  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 = 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];
+}
+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 arcRoute(fromBounds, toBounds, diagramCenter, tension, 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]
+  ];
+}
+function orthogonalRoute(fromBounds, toBounds, fromAnchor, toAnchor) {
+  const fromC = rectCenter(fromBounds);
+  const toC = rectCenter(toBounds);
+  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];
+}
+function bezierPointAt(p0, cp1, cp2, p3, t) {
+  const mt = 1 - t;
+  return {
+    x: mt * mt * mt * p0.x + 3 * mt * mt * t * cp1.x + 3 * mt * t * t * cp2.x + t * t * t * p3.x,
+    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: c.x,
-    y: dy >= 0 ? rect.y + rect.height : rect.y
+    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) {
+    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 };
+  }
+  let totalX = 0;
+  let totalY = 0;
+  for (const bounds of nodeBounds) {
+    totalX += bounds.x + bounds.width / 2;
+    totalY += bounds.y + bounds.height / 2;
+  }
+  return {
+    x: totalX / nodeBounds.length,
+    y: totalY / nodeBounds.length
   };
 }
 function dashFromStyle(style) {
@@ -2067,51 +2268,148 @@ function polylineBounds(points) {
     height: Math.max(1, maxY - minY)
   };
 }
-function renderConnection(ctx, conn, fromBounds, toBounds, theme, edgeRoute) {
-  const fromCenter = center(fromBounds);
-  const toCenter = center(toBounds);
-  const from = edgeAnchor(fromBounds, toCenter);
-  const to = edgeAnchor(toBounds, fromCenter);
-  const dash = dashFromStyle(conn.style);
+function renderConnection(ctx, conn, fromBounds, toBounds, theme, edgeRoute, options) {
+  const routing = conn.routing ?? "auto";
+  const strokeStyle = conn.strokeStyle ?? conn.style ?? "solid";
+  const strokeWidth = conn.width ?? conn.strokeWidth ?? 2;
+  const tension = conn.tension ?? 0.35;
+  const dash = dashFromStyle(strokeStyle);
   const style = {
     color: conn.color ?? theme.borderMuted,
-    width: conn.width ?? 2,
+    width: strokeWidth,
     headSize: conn.arrowSize ?? 10,
     ...dash ? { dash } : {}
   };
-  const points = edgeRoute && edgeRoute.points.length >= 2 ? edgeRoute.points : [from, { x: (from.x + to.x) / 2, y: from.y }, { x: (from.x + to.x) / 2, y: to.y }, to];
-  const startSegment = points[1] ?? points[0];
-  const endStart = points[points.length - 2] ?? points[0];
-  const end = points[points.length - 1] ?? points[0];
-  let startAngle = Math.atan2(startSegment.y - points[0].y, startSegment.x - points[0].x) + Math.PI;
-  let endAngle = Math.atan2(end.y - endStart.y, end.x - endStart.x);
+  const labelT = conn.labelPosition === "start" ? 0.2 : conn.labelPosition === "end" ? 0.8 : 0.5;
+  const diagramCenter = options?.diagramCenter ?? computeDiagramCenter([fromBounds, toBounds]);
+  let linePoints;
+  let startPoint;
+  let endPoint;
+  let startAngle;
+  let endAngle;
+  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,
+      conn.fromAnchor,
+      conn.toAnchor
+    );
+    ctx.strokeStyle = style.color;
+    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, p3.x, p3.y);
+    ctx.stroke();
+    linePoints = [p0, cp1, cp2, p3];
+    startPoint = p0;
+    endPoint = p3;
+    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,
+      conn.fromAnchor,
+      conn.toAnchor
+    );
+    const [p0, cp1, cp2, pMid] = first;
+    const [, cp3, cp4, p3] = second;
+    ctx.strokeStyle = style.color;
+    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.stroke();
+    linePoints = [p0, cp1, cp2, pMid, cp3, cp4, 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;
+        }
+      }
+    }
+  } else {
+    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];
+    endPoint = linePoints[linePoints.length - 1] ?? linePoints[0];
+    startAngle = Math.atan2(startSegment.y - linePoints[0].y, startSegment.x - linePoints[0].x) + Math.PI;
+    endAngle = Math.atan2(endPoint.y - endStart.y, endPoint.x - endStart.x);
+    if (useElkRoute) {
+      drawCubicInterpolatedPath(ctx, linePoints, style);
+    } else {
+      drawOrthogonalPath(ctx, startPoint, endPoint, style);
+    }
+    labelPoint = pointAlongPolyline(linePoints, labelT);
+  }
   if (!Number.isFinite(startAngle)) {
     startAngle = 0;
   }
   if (!Number.isFinite(endAngle)) {
     endAngle = 0;
   }
-  const t = conn.labelPosition === "start" ? 0.2 : conn.labelPosition === "end" ? 0.8 : 0.5;
-  const labelPoint = pointAlongPolyline(points, t);
-  ctx.save();
-  ctx.globalAlpha = conn.opacity;
-  if (edgeRoute && edgeRoute.points.length >= 2) {
-    drawCubicInterpolatedPath(ctx, points, style);
-  } else {
-    drawOrthogonalPath(ctx, points[0], points[points.length - 1], style);
-  }
   if (conn.arrow === "start" || conn.arrow === "both") {
-    drawArrowhead(ctx, points[0], startAngle, style.headSize, style.color);
+    drawArrowhead(ctx, startPoint, startAngle, style.headSize, style.color);
   }
   if (conn.arrow === "end" || conn.arrow === "both") {
-    drawArrowhead(ctx, end, endAngle, style.headSize, style.color);
+    drawArrowhead(ctx, endPoint, endAngle, style.headSize, style.color);
   }
   ctx.restore();
   const elements = [
     {
       id: `connection-${conn.from}-${conn.to}`,
       kind: "connection",
-      bounds: polylineBounds(points),
+      bounds: polylineBounds(linePoints),
       foregroundColor: style.color
     }
   ];
@@ -2737,6 +3035,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;
@@ -3118,6 +3446,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,
@@ -3126,7 +3463,8 @@ var drawCommandSchema = z2.discriminatedUnion("type", [
   drawBezierSchema,
   drawPathSchema,
   drawBadgeSchema,
-  drawGradientRectSchema
+  drawGradientRectSchema,
+  drawGridSchema
 ]);
 var defaultCanvas = {
   width: 1200,
@@ -3190,10 +3528,26 @@ var cardElementSchema = z2.object({
   tone: z2.enum(["neutral", "accent", "success", "warning", "error"]).default("neutral"),
   icon: z2.string().min(1).max(64).optional()
 }).strict();
+var flowNodeShadowSchema = z2.object({
+  color: colorHexSchema2.optional(),
+  blur: z2.number().min(0).max(64).default(8),
+  offsetX: z2.number().min(-32).max(32).default(0),
+  offsetY: z2.number().min(-32).max(32).default(0),
+  opacity: z2.number().min(0).max(1).default(0.3)
+}).strict();
 var flowNodeElementSchema = z2.object({
   type: z2.literal("flow-node"),
   id: z2.string().min(1).max(120),
-  shape: z2.enum(["box", "rounded-box", "diamond", "circle", "pill", "cylinder", "parallelogram"]),
+  shape: z2.enum([
+    "box",
+    "rounded-box",
+    "diamond",
+    "circle",
+    "pill",
+    "cylinder",
+    "parallelogram",
+    "hexagon"
+  ]).default("rounded-box"),
   label: z2.string().min(1).max(200),
   sublabel: z2.string().min(1).max(300).optional(),
   sublabelColor: colorHexSchema2.optional(),
@@ -3213,20 +3567,35 @@ var flowNodeElementSchema = z2.object({
   badgeText: z2.string().min(1).max(32).optional(),
   badgeColor: colorHexSchema2.optional(),
   badgeBackground: colorHexSchema2.optional(),
-  badgePosition: z2.enum(["top", "inside-top"]).default("inside-top")
+  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),
   to: z2.string().min(1).max(120),
   style: z2.enum(["solid", "dashed", "dotted"]).default("solid"),
+  strokeStyle: z2.enum(["solid", "dashed", "dotted"]).default("solid"),
   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"),
   color: colorHexSchema2.optional(),
-  width: z2.number().min(0.5).max(8).optional(),
+  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(),
-  opacity: z2.number().min(0).max(1).default(1)
+  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),
+  fromAnchor: anchorHintSchema.optional(),
+  toAnchor: anchorHintSchema.optional()
 }).strict();
 var codeBlockStyleSchema = z2.object({
   paddingVertical: z2.number().min(0).max(128).default(56),
@@ -3295,6 +3664,10 @@ var elementSchema = z2.discriminatedUnion("type", [
   shapeElementSchema,
   imageElementSchema
 ]);
+var diagramCenterSchema = z2.object({
+  x: z2.number(),
+  y: z2.number()
+}).strict();
 var autoLayoutConfigSchema = z2.object({
   mode: z2.literal("auto"),
   algorithm: z2.enum(["layered", "stress", "force", "radial", "box"]).default("layered"),
@@ -3310,7 +3683,9 @@ var autoLayoutConfigSchema = z2.object({
   /** Compaction strategy for radial layout. Only relevant when algorithm is 'radial'. */
   radialCompaction: z2.enum(["none", "radial", "wedge"]).optional(),
   /** Sort strategy for radial layout node ordering. Only relevant when algorithm is 'radial'. */
-  radialSortBy: z2.enum(["id", "connections"]).optional()
+  radialSortBy: z2.enum(["id", "connections"]).optional(),
+  /** Explicit center used by curve/arc connection routing. */
+  diagramCenter: diagramCenterSchema.optional()
 }).strict();
 var gridLayoutConfigSchema = z2.object({
   mode: z2.literal("grid"),
@@ -3318,13 +3693,17 @@ var gridLayoutConfigSchema = z2.object({
   gap: z2.number().int().min(0).max(256).default(24),
   cardMinHeight: z2.number().int().min(32).max(4096).optional(),
   cardMaxHeight: z2.number().int().min(32).max(4096).optional(),
-  equalHeight: z2.boolean().default(false)
+  equalHeight: z2.boolean().default(false),
+  /** Explicit center used by curve/arc connection routing. */
+  diagramCenter: diagramCenterSchema.optional()
 }).strict();
 var stackLayoutConfigSchema = z2.object({
   mode: z2.literal("stack"),
   direction: z2.enum(["vertical", "horizontal"]).default("vertical"),
   gap: z2.number().int().min(0).max(256).default(24),
-  alignment: z2.enum(["start", "center", "end", "stretch"]).default("stretch")
+  alignment: z2.enum(["start", "center", "end", "stretch"]).default("stretch"),
+  /** Explicit center used by curve/arc connection routing. */
+  diagramCenter: diagramCenterSchema.optional()
 }).strict();
 var manualPositionSchema = z2.object({
   x: z2.number().int(),
@@ -3334,7 +3713,9 @@ var manualPositionSchema = z2.object({
 }).strict();
 var manualLayoutConfigSchema = z2.object({
   mode: z2.literal("manual"),
-  positions: z2.record(z2.string().min(1), manualPositionSchema).default({})
+  positions: z2.record(z2.string().min(1), manualPositionSchema).default({}),
+  /** Explicit center used by curve/arc connection routing. */
+  diagramCenter: diagramCenterSchema.optional()
 }).strict();
 var layoutConfigSchema = z2.discriminatedUnion("mode", [
   autoLayoutConfigSchema,
@@ -3386,6 +3767,31 @@ var canvasSchema = z2.object({
   padding: z2.number().int().min(0).max(256).default(defaultCanvas.padding)
 }).strict();
 var themeInputSchema = z2.union([builtInThemeSchema, themeSchema]);
+var diagramPositionSchema = z2.object({
+  x: z2.number(),
+  y: z2.number(),
+  width: z2.number().positive(),
+  height: z2.number().positive()
+}).strict();
+var diagramElementSchema = z2.discriminatedUnion("type", [
+  flowNodeElementSchema,
+  connectionElementSchema
+]);
+var diagramLayoutSchema = z2.object({
+  mode: z2.enum(["manual", "auto"]).default("manual"),
+  positions: z2.record(z2.string(), diagramPositionSchema).optional(),
+  diagramCenter: diagramCenterSchema.optional()
+}).strict();
+var diagramSpecSchema = z2.object({
+  version: z2.literal(1),
+  canvas: z2.object({
+    width: z2.number().int().min(320).max(4096).default(1200),
+    height: z2.number().int().min(180).max(4096).default(675)
+  }).default({ width: 1200, height: 675 }),
+  theme: themeSchema.optional(),
+  elements: z2.array(diagramElementSchema).min(1),
+  layout: diagramLayoutSchema.default({ mode: "manual" })
+}).strict();
 var designSpecSchema = z2.object({
   version: z2.literal(2).default(2),
   canvas: canvasSchema.default(defaultCanvas),
@@ -3745,6 +4151,10 @@ 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 }
+  );
   for (const element of spec.elements) {
     if (element.type !== "connection") {
       continue;
@@ -3757,7 +4167,9 @@ async function renderDesign(input, options = {}) {
       );
     }
     const edgeRoute = edgeRoutes?.get(`${element.from}-${element.to}`);
-    elements.push(...renderConnection(ctx, element, fromRect, toRect, theme, edgeRoute));
+    elements.push(
+      ...renderConnection(ctx, element, fromRect, toRect, theme, edgeRoute, { diagramCenter })
+    );
   }
   if (footerRect && spec.footer) {
     const footerText = spec.footer.tagline ? `${spec.footer.text} \u2022 ${spec.footer.tagline}` : spec.footer.text;