@spectratools/graphic-designer-cli 0.3.2 → 0.6.0

package/dist/renderer.js

@@ -86,6 +86,485 @@ function loadFonts() {
 // src/layout/elk.ts
 import ELK from "elkjs";
 
+// src/primitives/shapes.ts
+function roundRectPath(ctx, rect, radius) {
+  const r = Math.max(0, Math.min(radius, rect.width / 2, rect.height / 2));
+  const right = rect.x + rect.width;
+  const bottom = rect.y + rect.height;
+  ctx.beginPath();
+  ctx.moveTo(rect.x + r, rect.y);
+  ctx.lineTo(right - r, rect.y);
+  ctx.quadraticCurveTo(right, rect.y, right, rect.y + r);
+  ctx.lineTo(right, bottom - r);
+  ctx.quadraticCurveTo(right, bottom, right - r, bottom);
+  ctx.lineTo(rect.x + r, bottom);
+  ctx.quadraticCurveTo(rect.x, bottom, rect.x, bottom - r);
+  ctx.lineTo(rect.x, rect.y + r);
+  ctx.quadraticCurveTo(rect.x, rect.y, rect.x + r, rect.y);
+  ctx.closePath();
+}
+function fillAndStroke(ctx, fill, stroke) {
+  ctx.fillStyle = fill;
+  ctx.fill();
+  if (stroke) {
+    ctx.strokeStyle = stroke;
+    ctx.stroke();
+  }
+}
+function drawRoundedRect(ctx, rect, radius, fill, stroke) {
+  roundRectPath(ctx, rect, radius);
+  fillAndStroke(ctx, fill, stroke);
+}
+function drawCircle(ctx, center, radius, fill, stroke) {
+  ctx.beginPath();
+  ctx.arc(center.x, center.y, Math.max(0, radius), 0, Math.PI * 2);
+  ctx.closePath();
+  fillAndStroke(ctx, fill, stroke);
+}
+function drawDiamond(ctx, bounds, fill, stroke) {
+  const cx = bounds.x + bounds.width / 2;
+  const cy = bounds.y + bounds.height / 2;
+  ctx.beginPath();
+  ctx.moveTo(cx, bounds.y);
+  ctx.lineTo(bounds.x + bounds.width, cy);
+  ctx.lineTo(cx, bounds.y + bounds.height);
+  ctx.lineTo(bounds.x, cy);
+  ctx.closePath();
+  fillAndStroke(ctx, fill, stroke);
+}
+function drawPill(ctx, bounds, fill, stroke) {
+  drawRoundedRect(ctx, bounds, Math.min(bounds.width, bounds.height) / 2, fill, stroke);
+}
+function drawEllipse(ctx, bounds, fill, stroke) {
+  const cx = bounds.x + bounds.width / 2;
+  const cy = bounds.y + bounds.height / 2;
+  ctx.beginPath();
+  ctx.ellipse(
+    cx,
+    cy,
+    Math.max(0, bounds.width / 2),
+    Math.max(0, bounds.height / 2),
+    0,
+    0,
+    Math.PI * 2
+  );
+  ctx.closePath();
+  fillAndStroke(ctx, fill, stroke);
+}
+function drawCylinder(ctx, bounds, fill, stroke) {
+  const rx = Math.max(2, bounds.width / 2);
+  const ry = Math.max(2, Math.min(bounds.height * 0.18, 16));
+  const cx = bounds.x + bounds.width / 2;
+  const topCy = bounds.y + ry;
+  const bottomCy = bounds.y + bounds.height - ry;
+  ctx.beginPath();
+  ctx.moveTo(bounds.x, topCy);
+  ctx.ellipse(cx, topCy, rx, ry, 0, Math.PI, 0, true);
+  ctx.lineTo(bounds.x + bounds.width, bottomCy);
+  ctx.ellipse(cx, bottomCy, rx, ry, 0, 0, Math.PI, false);
+  ctx.closePath();
+  fillAndStroke(ctx, fill, stroke);
+  if (stroke) {
+    ctx.beginPath();
+    ctx.ellipse(cx, topCy, rx, ry, 0, 0, Math.PI * 2);
+    ctx.closePath();
+    ctx.strokeStyle = stroke;
+    ctx.stroke();
+  }
+}
+function drawParallelogram(ctx, bounds, fill, stroke, skew) {
+  const maxSkew = bounds.width * 0.45;
+  const skewX = Math.max(-maxSkew, Math.min(maxSkew, skew ?? bounds.width * 0.18));
+  ctx.beginPath();
+  ctx.moveTo(bounds.x + skewX, bounds.y);
+  ctx.lineTo(bounds.x + bounds.width, bounds.y);
+  ctx.lineTo(bounds.x + bounds.width - skewX, bounds.y + bounds.height);
+  ctx.lineTo(bounds.x, bounds.y + bounds.height);
+  ctx.closePath();
+  fillAndStroke(ctx, fill, stroke);
+}
+
+// src/primitives/text.ts
+var SUPPORTED_FONT_FAMILIES = /* @__PURE__ */ new Set(["Inter", "JetBrains Mono", "Space Grotesk"]);
+function resolveFont(requested, role) {
+  if (SUPPORTED_FONT_FAMILIES.has(requested)) {
+    return requested;
+  }
+  if (role === "mono" || /mono|code|terminal|console/iu.test(requested)) {
+    return "JetBrains Mono";
+  }
+  if (role === "heading" || /display|grotesk|headline/iu.test(requested)) {
+    return "Space Grotesk";
+  }
+  return "Inter";
+}
+function applyFont(ctx, options) {
+  ctx.font = `${options.weight} ${options.size}px ${options.family}`;
+}
+function wrapText(ctx, text, maxWidth, maxLines) {
+  const trimmed = text.trim();
+  if (!trimmed) {
+    return { lines: [], truncated: false };
+  }
+  const words = trimmed.split(/\s+/u);
+  const lines = [];
+  let current = "";
+  for (const word of words) {
+    const trial = current.length > 0 ? `${current} ${word}` : word;
+    if (ctx.measureText(trial).width <= maxWidth) {
+      current = trial;
+      continue;
+    }
+    if (current.length > 0) {
+      lines.push(current);
+      current = word;
+    } else {
+      lines.push(word);
+      current = "";
+    }
+    if (lines.length >= maxLines) {
+      break;
+    }
+  }
+  if (lines.length < maxLines && current.length > 0) {
+    lines.push(current);
+  }
+  const wasTruncated = lines.length >= maxLines && words.join(" ") !== lines.join(" ");
+  if (!wasTruncated) {
+    return { lines, truncated: false };
+  }
+  const lastIndex = lines.length - 1;
+  let truncatedLine = `${lines[lastIndex]}\u2026`;
+  while (truncatedLine.length > 1 && ctx.measureText(truncatedLine).width > maxWidth) {
+    truncatedLine = `${truncatedLine.slice(0, -2)}\u2026`;
+  }
+  lines[lastIndex] = truncatedLine;
+  return { lines, truncated: true };
+}
+function drawTextBlock(ctx, options) {
+  applyFont(ctx, { size: options.fontSize, weight: options.fontWeight, family: options.family });
+  const wrapped = wrapText(ctx, options.text, options.maxWidth, options.maxLines);
+  ctx.fillStyle = options.color;
+  for (const [index, line] of wrapped.lines.entries()) {
+    ctx.fillText(line, options.x, options.y + index * options.lineHeight);
+  }
+  return {
+    height: wrapped.lines.length * options.lineHeight,
+    truncated: wrapped.truncated
+  };
+}
+function drawTextLabel(ctx, text, position, options) {
+  applyFont(ctx, { size: options.fontSize, weight: 600, family: options.fontFamily });
+  const textWidth = Math.ceil(ctx.measureText(text).width);
+  const rect = {
+    x: Math.round(position.x - (textWidth + options.padding * 2) / 2),
+    y: Math.round(position.y - (options.fontSize + options.padding * 2) / 2),
+    width: textWidth + options.padding * 2,
+    height: options.fontSize + options.padding * 2
+  };
+  drawRoundedRect(ctx, rect, options.borderRadius, options.backgroundColor);
+  ctx.fillStyle = options.color;
+  ctx.fillText(text, rect.x + options.padding, rect.y + rect.height - options.padding);
+  return rect;
+}
+
+// src/utils/color.ts
+function parseChannel(hex, offset) {
+  return Number.parseInt(hex.slice(offset, offset + 2), 16);
+}
+function parseHexColor(hexColor) {
+  const normalized = hexColor.startsWith("#") ? hexColor.slice(1) : hexColor;
+  if (normalized.length !== 6 && normalized.length !== 8) {
+    throw new Error(`Unsupported color format: ${hexColor}`);
+  }
+  return {
+    r: parseChannel(normalized, 0),
+    g: parseChannel(normalized, 2),
+    b: parseChannel(normalized, 4)
+  };
+}
+var rgbaRegex = /^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*([01](?:\.\d+)?|0?\.\d+)\s*)?\)$/;
+var hexColorRegex = /^#(?:[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
+function toHex(n) {
+  return n.toString(16).padStart(2, "0");
+}
+function parseRgbaToHex(color) {
+  const match = rgbaRegex.exec(color);
+  if (!match) {
+    throw new Error(`Invalid rgb/rgba color: ${color}`);
+  }
+  const r = Number.parseInt(match[1], 10);
+  const g = Number.parseInt(match[2], 10);
+  const b = Number.parseInt(match[3], 10);
+  if (r > 255 || g > 255 || b > 255) {
+    throw new Error(`RGB channel values must be 0-255, got: ${color}`);
+  }
+  if (match[4] !== void 0) {
+    const a = Number.parseFloat(match[4]);
+    if (a < 0 || a > 1) {
+      throw new Error(`Alpha value must be 0-1, got: ${a}`);
+    }
+    const alphaByte = Math.round(a * 255);
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}${toHex(alphaByte)}`;
+  }
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+function isRgbaColor(color) {
+  return rgbaRegex.test(color);
+}
+function isHexColor(color) {
+  return hexColorRegex.test(color);
+}
+function normalizeColor(color) {
+  if (isHexColor(color)) {
+    return color;
+  }
+  if (isRgbaColor(color)) {
+    return parseRgbaToHex(color);
+  }
+  throw new Error(`Expected #RRGGBB, #RRGGBBAA, rgb(), or rgba() color, got: ${color}`);
+}
+function srgbToLinear(channel) {
+  const normalized = channel / 255;
+  if (normalized <= 0.03928) {
+    return normalized / 12.92;
+  }
+  return ((normalized + 0.055) / 1.055) ** 2.4;
+}
+function relativeLuminance(hexColor) {
+  const normalized = isRgbaColor(hexColor) ? parseRgbaToHex(hexColor) : hexColor;
+  const rgb = parseHexColor(normalized);
+  const r = srgbToLinear(rgb.r);
+  const g = srgbToLinear(rgb.g);
+  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);
+  const r = Math.round(fg.r * opacity + bg.r * (1 - opacity));
+  const g = Math.round(fg.g * opacity + bg.g * (1 - opacity));
+  const b = Math.round(fg.b * opacity + bg.b * (1 - opacity));
+  return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`.toUpperCase();
+}
+
+// src/renderers/flow-node.ts
+var BADGE_FONT_SIZE = 10;
+var BADGE_FONT_WEIGHT = 600;
+var BADGE_LETTER_SPACING = 1;
+var BADGE_PADDING_X = 8;
+var BADGE_PADDING_Y = 3;
+var BADGE_BORDER_RADIUS = 12;
+var BADGE_DEFAULT_COLOR = "#FFFFFF";
+var BADGE_PILL_HEIGHT = BADGE_FONT_SIZE + BADGE_PADDING_Y * 2;
+var BADGE_INSIDE_TOP_EXTRA = BADGE_PILL_HEIGHT + 6;
+function drawNodeShape(ctx, shape, bounds, fill, stroke, cornerRadius) {
+  switch (shape) {
+    case "box":
+      drawRoundedRect(ctx, bounds, 0, fill, stroke);
+      break;
+    case "rounded-box":
+      drawRoundedRect(ctx, bounds, cornerRadius, fill, stroke);
+      break;
+    case "diamond":
+      drawDiamond(ctx, bounds, fill, stroke);
+      break;
+    case "circle": {
+      const radius = Math.min(bounds.width, bounds.height) / 2;
+      drawCircle(
+        ctx,
+        { x: bounds.x + bounds.width / 2, y: bounds.y + bounds.height / 2 },
+        radius,
+        fill,
+        stroke
+      );
+      break;
+    }
+    case "pill":
+      drawPill(ctx, bounds, fill, stroke);
+      break;
+    case "cylinder":
+      drawCylinder(ctx, bounds, fill, stroke);
+      break;
+    case "parallelogram":
+      drawParallelogram(ctx, bounds, fill, stroke);
+      break;
+  }
+}
+function measureSpacedText(ctx, text, letterSpacing) {
+  const base = ctx.measureText(text).width;
+  const extraChars = [...text].length - 1;
+  return extraChars > 0 ? base + extraChars * letterSpacing : base;
+}
+function drawSpacedText(ctx, text, centerX, centerY, letterSpacing) {
+  const chars = [...text];
+  if (chars.length === 0) return;
+  const totalWidth = measureSpacedText(ctx, text, letterSpacing);
+  let cursorX = centerX - totalWidth / 2;
+  ctx.textAlign = "left";
+  for (let i = 0; i < chars.length; i++) {
+    ctx.fillText(chars[i], cursorX, centerY);
+    cursorX += ctx.measureText(chars[i]).width + (i < chars.length - 1 ? letterSpacing : 0);
+  }
+}
+function renderBadgePill(ctx, centerX, centerY, text, textColor, background, monoFont) {
+  ctx.save();
+  applyFont(ctx, { size: BADGE_FONT_SIZE, weight: BADGE_FONT_WEIGHT, family: monoFont });
+  const textWidth = measureSpacedText(ctx, text, BADGE_LETTER_SPACING);
+  const pillWidth = textWidth + BADGE_PADDING_X * 2;
+  const pillHeight = BADGE_PILL_HEIGHT;
+  const pillX = centerX - pillWidth / 2;
+  const pillY = centerY - pillHeight / 2;
+  ctx.fillStyle = background;
+  ctx.beginPath();
+  ctx.roundRect(pillX, pillY, pillWidth, pillHeight, BADGE_BORDER_RADIUS);
+  ctx.fill();
+  ctx.fillStyle = textColor;
+  ctx.textBaseline = "middle";
+  applyFont(ctx, { size: BADGE_FONT_SIZE, weight: BADGE_FONT_WEIGHT, family: monoFont });
+  drawSpacedText(ctx, text, centerX, centerY, BADGE_LETTER_SPACING);
+  ctx.restore();
+  return pillWidth;
+}
+function renderFlowNode(ctx, node, bounds, theme) {
+  const fillColor = node.color ?? theme.surfaceElevated;
+  const borderColor = node.borderColor ?? theme.border;
+  const borderWidth = node.borderWidth ?? 2;
+  const cornerRadius = node.cornerRadius ?? 16;
+  const labelColor = node.labelColor ?? theme.text;
+  const sublabelColor = node.sublabelColor ?? theme.textMuted;
+  const labelFontSize = node.labelFontSize ?? 20;
+  const fillOpacity = node.fillOpacity ?? 1;
+  const hasBadge = !!node.badgeText;
+  const badgePosition = node.badgePosition ?? "inside-top";
+  const badgeColor = node.badgeColor ?? BADGE_DEFAULT_COLOR;
+  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");
+  const centerX = bounds.x + bounds.width / 2;
+  const centerY = bounds.y + bounds.height / 2;
+  const insideTopShift = hasBadge && badgePosition === "inside-top" ? BADGE_INSIDE_TOP_EXTRA / 2 : 0;
+  const sublabelFontSize = Math.max(12, Math.round(labelFontSize * 0.68));
+  const sublabel2FontSize = node.sublabel2FontSize ?? 11;
+  const sublabel2Color = node.sublabel2Color ?? sublabelColor;
+  const lineCount = node.sublabel2 ? 3 : node.sublabel ? 2 : 1;
+  const labelToSublabelGap = Math.max(20, sublabelFontSize + 6);
+  const sublabelToSublabel2Gap = sublabel2FontSize + 4;
+  let textBlockHeight;
+  if (lineCount === 1) {
+    textBlockHeight = labelFontSize;
+  } else if (lineCount === 2) {
+    textBlockHeight = labelFontSize + labelToSublabelGap;
+  } else {
+    textBlockHeight = labelFontSize + labelToSublabelGap + sublabelToSublabel2Gap;
+  }
+  const labelY = lineCount === 1 ? centerY + labelFontSize * 0.3 + insideTopShift : centerY - textBlockHeight / 2 + labelFontSize * 0.8 + insideTopShift;
+  ctx.textAlign = "center";
+  applyFont(ctx, { size: labelFontSize, weight: 700, family: headingFont });
+  ctx.fillStyle = labelColor;
+  ctx.fillText(node.label, centerX, labelY);
+  let textBoundsY = bounds.y + bounds.height / 2 - 18;
+  let textBoundsHeight = 36;
+  if (node.sublabel) {
+    applyFont(ctx, { size: sublabelFontSize, weight: 500, family: bodyFont });
+    ctx.fillStyle = sublabelColor;
+    ctx.fillText(node.sublabel, centerX, labelY + labelToSublabelGap);
+    textBoundsY = bounds.y + bounds.height / 2 - 24;
+    textBoundsHeight = 56;
+  }
+  if (node.sublabel2) {
+    applyFont(ctx, { size: sublabel2FontSize, weight: 500, family: bodyFont });
+    ctx.fillStyle = sublabel2Color;
+    const sublabel2Y = node.sublabel ? labelY + labelToSublabelGap + sublabelToSublabel2Gap : labelY + labelToSublabelGap;
+    ctx.fillText(node.sublabel2, centerX, sublabel2Y);
+    textBoundsY = bounds.y + bounds.height / 2 - 30;
+    textBoundsHeight = 72;
+  }
+  if (hasBadge && node.badgeText) {
+    if (badgePosition === "inside-top") {
+      const badgeCenterY = bounds.y + BADGE_PILL_HEIGHT / 2 + 8;
+      renderBadgePill(
+        ctx,
+        centerX,
+        badgeCenterY,
+        node.badgeText,
+        badgeColor,
+        badgeBackground,
+        monoFont
+      );
+    } else {
+      const badgeCenterY = bounds.y - BADGE_PILL_HEIGHT / 2 - 4;
+      renderBadgePill(
+        ctx,
+        centerX,
+        badgeCenterY,
+        node.badgeText,
+        badgeColor,
+        badgeBackground,
+        monoFont
+      );
+    }
+  }
+  ctx.restore();
+  const effectiveBg = fillOpacity < 1 ? blendColorWithOpacity(fillColor, theme.background, fillOpacity) : fillColor;
+  return [
+    {
+      id: `flow-node-${node.id}`,
+      kind: "flow-node",
+      bounds,
+      foregroundColor: labelColor,
+      backgroundColor: effectiveBg
+    },
+    {
+      id: `flow-node-${node.id}-label`,
+      kind: "text",
+      bounds: {
+        x: bounds.x + 8,
+        y: textBoundsY,
+        width: bounds.width - 16,
+        height: textBoundsHeight
+      },
+      foregroundColor: labelColor,
+      backgroundColor: effectiveBg
+    }
+  ];
+}
+
 // src/layout/estimates.ts
 function estimateElementHeight(element) {
   switch (element.type) {
@@ -184,33 +663,37 @@ function computeStackLayout(elements, config, safeFrame) {
 
 // src/layout/elk.ts
 function estimateFlowNodeSize(node) {
+  const badgeExtra = node.badgeText && (node.badgePosition ?? "inside-top") === "inside-top" ? BADGE_INSIDE_TOP_EXTRA : 0;
+  const sublabel2Extra = node.sublabel2 ? (node.sublabel2FontSize ?? 11) + 4 : 0;
+  const extra = badgeExtra + sublabel2Extra;
   if (node.width && node.height) {
-    return { width: node.width, height: node.height };
+    return { width: node.width, height: node.height + extra };
   }
   if (node.width) {
+    const baseHeight = node.shape === "diamond" || node.shape === "circle" ? node.width : 60;
     return {
       width: node.width,
-      height: node.shape === "diamond" || node.shape === "circle" ? node.width : 60
+      height: baseHeight + extra
     };
   }
   if (node.height) {
     return {
       width: node.shape === "diamond" || node.shape === "circle" ? node.height : 160,
-      height: node.height
+      height: node.height + extra
     };
   }
   switch (node.shape) {
     case "diamond":
     case "circle":
-      return { width: 100, height: 100 };
+      return { width: 100 + extra, height: 100 + extra };
     case "pill":
-      return { width: 180, height: 56 };
+      return { width: 180, height: 56 + extra };
     case "cylinder":
-      return { width: 140, height: 92 };
+      return { width: 140, height: 92 + extra };
     case "parallelogram":
-      return { width: 180, height: 72 };
+      return { width: 180, height: 72 + extra };
     default:
-      return { width: 170, height: 64 };
+      return { width: 170, height: 64 + extra };
   }
 }
 function splitLayoutFrames(safeFrame, direction, hasAuxiliary) {
@@ -328,6 +811,40 @@ function directionToElk(direction) {
       return "DOWN";
   }
 }
+function radialCompactionToElk(compaction) {
+  switch (compaction) {
+    case "radial":
+      return "RADIAL_COMPACTION";
+    case "wedge":
+      return "WEDGE_COMPACTION";
+    default:
+      return "NONE";
+  }
+}
+function radialSortByToElk(sortBy) {
+  switch (sortBy) {
+    case "connections":
+      return "POLAR_COORDINATE";
+    default:
+      return "ID";
+  }
+}
+function buildRadialOptions(config) {
+  const options = {};
+  if (config.radialRoot) {
+    options["elk.radial.centerOnRoot"] = "true";
+  }
+  if (config.radialRadius != null) {
+    options["elk.radial.radius"] = String(config.radialRadius);
+  }
+  if (config.radialCompaction) {
+    options["elk.radial.compaction.strategy"] = radialCompactionToElk(config.radialCompaction);
+  }
+  if (config.radialSortBy) {
+    options["elk.radial.orderId"] = radialSortByToElk(config.radialSortBy);
+  }
+  return options;
+}
 function fallbackForNoFlowNodes(nonFlow, safeFrame) {
   const fallbackConfig = {
     mode: "stack",
@@ -363,6 +880,11 @@ async function computeElkLayout(elements, config, safeFrame) {
     elkNodeSizes.set(node.id, estimateFlowNodeSize(node));
   }
   const edgeIdToRouteKey = /* @__PURE__ */ new Map();
+  const radialOptions = config.algorithm === "radial" ? buildRadialOptions(config) : {};
+  const orderedFlowNodes = config.radialRoot && config.algorithm === "radial" ? [
+    ...flowNodes.filter((node) => node.id === config.radialRoot),
+    ...flowNodes.filter((node) => node.id !== config.radialRoot)
+  ] : flowNodes;
   const elkGraph = {
     id: "root",
     layoutOptions: {
@@ -372,9 +894,10 @@ async function computeElkLayout(elements, config, safeFrame) {
       "elk.layered.spacing.nodeNodeBetweenLayers": String(config.rankSpacing),
       "elk.edgeRouting": edgeRoutingToElk(config.edgeRouting),
       ...config.aspectRatio ? { "elk.aspectRatio": String(config.aspectRatio) } : {},
-      ...config.algorithm === "stress" ? { "elk.stress.desiredEdgeLength": String(config.rankSpacing + config.nodeSpacing) } : {}
+      ...config.algorithm === "stress" ? { "elk.stress.desiredEdgeLength": String(config.rankSpacing + config.nodeSpacing) } : {},
+      ...radialOptions
     },
-    children: flowNodes.map((node) => {
+    children: orderedFlowNodes.map((node) => {
       const size = elkNodeSizes.get(node.id) ?? { width: 160, height: 60 };
       return {
         id: node.id,
@@ -605,268 +1128,86 @@ function roundedRectPath(ctx, x, y, width, height, radius) {
   ctx.lineTo(x + safeRadius, y + height);
   ctx.quadraticCurveTo(x, y + height, x, y + height - safeRadius);
   ctx.lineTo(x, y + safeRadius);
-  ctx.quadraticCurveTo(x, y, x + safeRadius, y);
-  ctx.closePath();
-}
-function parseHexColor(color) {
-  const normalized = color.startsWith("#") ? color.slice(1) : color;
-  if (normalized.length !== 6 && normalized.length !== 8) {
-    throw new Error(`Expected #RRGGBB or #RRGGBBAA color, received ${color}`);
-  }
-  const parseChannel2 = (offset) => Number.parseInt(normalized.slice(offset, offset + 2), 16);
-  return {
-    r: parseChannel2(0),
-    g: parseChannel2(2),
-    b: parseChannel2(4),
-    a: normalized.length === 8 ? parseChannel2(6) / 255 : 1
-  };
-}
-function withAlpha(color, alpha) {
-  const parsed = parseHexColor(color);
-  const effectiveAlpha = clamp01(parsed.a * alpha);
-  return `rgba(${parsed.r}, ${parsed.g}, ${parsed.b}, ${effectiveAlpha})`;
-}
-function drawGradientRect(ctx, rect, gradient, borderRadius = 0) {
-  const fill = gradient.type === "linear" ? createLinearRectGradient(ctx, rect, gradient.angle ?? 180) : ctx.createRadialGradient(
-    rect.x + rect.width / 2,
-    rect.y + rect.height / 2,
-    0,
-    rect.x + rect.width / 2,
-    rect.y + rect.height / 2,
-    Math.max(rect.width, rect.height) / 2
-  );
-  addGradientStops(fill, gradient.stops);
-  ctx.save();
-  ctx.fillStyle = fill;
-  if (borderRadius > 0) {
-    roundedRectPath(ctx, rect.x, rect.y, rect.width, rect.height, borderRadius);
-    ctx.fill();
-  } else {
-    ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
-  }
-  ctx.restore();
-}
-function drawRainbowRule(ctx, x, y, width, thickness = 2, colors = [...DEFAULT_RAINBOW_COLORS], borderRadius = thickness / 2) {
-  if (width <= 0 || thickness <= 0) {
-    return;
-  }
-  const gradient = ctx.createLinearGradient(x, y, x + width, y);
-  const stops = colors.length >= 2 ? colors : [...DEFAULT_RAINBOW_COLORS];
-  for (const [index, color] of stops.entries()) {
-    gradient.addColorStop(index / (stops.length - 1), color);
-  }
-  const ruleTop = y - thickness / 2;
-  ctx.save();
-  roundedRectPath(ctx, x, ruleTop, width, thickness, borderRadius);
-  ctx.fillStyle = gradient;
-  ctx.fill();
-  ctx.restore();
-}
-function drawVignette(ctx, width, height, intensity = 0.3, color = "#000000") {
-  if (width <= 0 || height <= 0 || intensity <= 0) {
-    return;
-  }
-  const centerX = width / 2;
-  const centerY = height / 2;
-  const outerRadius = Math.max(width, height) / 2;
-  const innerRadius = Math.min(width, height) * 0.2;
-  const vignette = ctx.createRadialGradient(
-    centerX,
-    centerY,
-    innerRadius,
-    centerX,
-    centerY,
-    outerRadius
-  );
-  vignette.addColorStop(0, withAlpha(color, 0));
-  vignette.addColorStop(0.6, withAlpha(color, 0));
-  vignette.addColorStop(1, withAlpha(color, clamp01(intensity)));
-  ctx.save();
-  ctx.fillStyle = vignette;
-  ctx.fillRect(0, 0, width, height);
-  ctx.restore();
-}
-
-// src/primitives/shapes.ts
-function roundRectPath(ctx, rect, radius) {
-  const r = Math.max(0, Math.min(radius, rect.width / 2, rect.height / 2));
-  const right = rect.x + rect.width;
-  const bottom = rect.y + rect.height;
-  ctx.beginPath();
-  ctx.moveTo(rect.x + r, rect.y);
-  ctx.lineTo(right - r, rect.y);
-  ctx.quadraticCurveTo(right, rect.y, right, rect.y + r);
-  ctx.lineTo(right, bottom - r);
-  ctx.quadraticCurveTo(right, bottom, right - r, bottom);
-  ctx.lineTo(rect.x + r, bottom);
-  ctx.quadraticCurveTo(rect.x, bottom, rect.x, bottom - r);
-  ctx.lineTo(rect.x, rect.y + r);
-  ctx.quadraticCurveTo(rect.x, rect.y, rect.x + r, rect.y);
-  ctx.closePath();
-}
-function fillAndStroke(ctx, fill, stroke) {
-  ctx.fillStyle = fill;
-  ctx.fill();
-  if (stroke) {
-    ctx.strokeStyle = stroke;
-    ctx.stroke();
-  }
-}
-function drawRoundedRect(ctx, rect, radius, fill, stroke) {
-  roundRectPath(ctx, rect, radius);
-  fillAndStroke(ctx, fill, stroke);
-}
-function drawCircle(ctx, center2, radius, fill, stroke) {
-  ctx.beginPath();
-  ctx.arc(center2.x, center2.y, Math.max(0, radius), 0, Math.PI * 2);
-  ctx.closePath();
-  fillAndStroke(ctx, fill, stroke);
-}
-function drawDiamond(ctx, bounds, fill, stroke) {
-  const cx = bounds.x + bounds.width / 2;
-  const cy = bounds.y + bounds.height / 2;
-  ctx.beginPath();
-  ctx.moveTo(cx, bounds.y);
-  ctx.lineTo(bounds.x + bounds.width, cy);
-  ctx.lineTo(cx, bounds.y + bounds.height);
-  ctx.lineTo(bounds.x, cy);
-  ctx.closePath();
-  fillAndStroke(ctx, fill, stroke);
-}
-function drawPill(ctx, bounds, fill, stroke) {
-  drawRoundedRect(ctx, bounds, Math.min(bounds.width, bounds.height) / 2, fill, stroke);
-}
-function drawEllipse(ctx, bounds, fill, stroke) {
-  const cx = bounds.x + bounds.width / 2;
-  const cy = bounds.y + bounds.height / 2;
-  ctx.beginPath();
-  ctx.ellipse(
-    cx,
-    cy,
-    Math.max(0, bounds.width / 2),
-    Math.max(0, bounds.height / 2),
-    0,
-    0,
-    Math.PI * 2
-  );
-  ctx.closePath();
-  fillAndStroke(ctx, fill, stroke);
-}
-function drawCylinder(ctx, bounds, fill, stroke) {
-  const rx = Math.max(2, bounds.width / 2);
-  const ry = Math.max(2, Math.min(bounds.height * 0.18, 16));
-  const cx = bounds.x + bounds.width / 2;
-  const topCy = bounds.y + ry;
-  const bottomCy = bounds.y + bounds.height - ry;
-  ctx.beginPath();
-  ctx.moveTo(bounds.x, topCy);
-  ctx.ellipse(cx, topCy, rx, ry, 0, Math.PI, 0, true);
-  ctx.lineTo(bounds.x + bounds.width, bottomCy);
-  ctx.ellipse(cx, bottomCy, rx, ry, 0, 0, Math.PI, false);
-  ctx.closePath();
-  fillAndStroke(ctx, fill, stroke);
-  if (stroke) {
-    ctx.beginPath();
-    ctx.ellipse(cx, topCy, rx, ry, 0, 0, Math.PI * 2);
-    ctx.closePath();
-    ctx.strokeStyle = stroke;
-    ctx.stroke();
-  }
-}
-function drawParallelogram(ctx, bounds, fill, stroke, skew) {
-  const maxSkew = bounds.width * 0.45;
-  const skewX = Math.max(-maxSkew, Math.min(maxSkew, skew ?? bounds.width * 0.18));
-  ctx.beginPath();
-  ctx.moveTo(bounds.x + skewX, bounds.y);
-  ctx.lineTo(bounds.x + bounds.width, bounds.y);
-  ctx.lineTo(bounds.x + bounds.width - skewX, bounds.y + bounds.height);
-  ctx.lineTo(bounds.x, bounds.y + bounds.height);
-  ctx.closePath();
-  fillAndStroke(ctx, fill, stroke);
-}
-
-// src/primitives/text.ts
-var SUPPORTED_FONT_FAMILIES = /* @__PURE__ */ new Set(["Inter", "JetBrains Mono", "Space Grotesk"]);
-function resolveFont(requested, role) {
-  if (SUPPORTED_FONT_FAMILIES.has(requested)) {
-    return requested;
-  }
-  if (role === "mono" || /mono|code|terminal|console/iu.test(requested)) {
-    return "JetBrains Mono";
-  }
-  if (role === "heading" || /display|grotesk|headline/iu.test(requested)) {
-    return "Space Grotesk";
-  }
-  return "Inter";
-}
-function applyFont(ctx, options) {
-  ctx.font = `${options.weight} ${options.size}px ${options.family}`;
-}
-function wrapText(ctx, text, maxWidth, maxLines) {
-  const trimmed = text.trim();
-  if (!trimmed) {
-    return { lines: [], truncated: false };
-  }
-  const words = trimmed.split(/\s+/u);
-  const lines = [];
-  let current = "";
-  for (const word of words) {
-    const trial = current.length > 0 ? `${current} ${word}` : word;
-    if (ctx.measureText(trial).width <= maxWidth) {
-      current = trial;
-      continue;
-    }
-    if (current.length > 0) {
-      lines.push(current);
-      current = word;
-    } else {
-      lines.push(word);
-      current = "";
-    }
-    if (lines.length >= maxLines) {
-      break;
-    }
+  ctx.quadraticCurveTo(x, y, x + safeRadius, y);
+  ctx.closePath();
+}
+function parseHexColor2(color) {
+  const normalized = color.startsWith("#") ? color.slice(1) : color;
+  if (normalized.length !== 6 && normalized.length !== 8) {
+    throw new Error(`Expected #RRGGBB or #RRGGBBAA color, received ${color}`);
   }
-  if (lines.length < maxLines && current.length > 0) {
-    lines.push(current);
+  const parseChannel2 = (offset) => Number.parseInt(normalized.slice(offset, offset + 2), 16);
+  return {
+    r: parseChannel2(0),
+    g: parseChannel2(2),
+    b: parseChannel2(4),
+    a: normalized.length === 8 ? parseChannel2(6) / 255 : 1
+  };
+}
+function withAlpha2(color, alpha) {
+  const parsed = parseHexColor2(color);
+  const effectiveAlpha = clamp01(parsed.a * alpha);
+  return `rgba(${parsed.r}, ${parsed.g}, ${parsed.b}, ${effectiveAlpha})`;
+}
+function drawGradientRect(ctx, rect, gradient, borderRadius = 0) {
+  const fill = gradient.type === "linear" ? createLinearRectGradient(ctx, rect, gradient.angle ?? 180) : ctx.createRadialGradient(
+    rect.x + rect.width / 2,
+    rect.y + rect.height / 2,
+    0,
+    rect.x + rect.width / 2,
+    rect.y + rect.height / 2,
+    Math.max(rect.width, rect.height) / 2
+  );
+  addGradientStops(fill, gradient.stops);
+  ctx.save();
+  ctx.fillStyle = fill;
+  if (borderRadius > 0) {
+    roundedRectPath(ctx, rect.x, rect.y, rect.width, rect.height, borderRadius);
+    ctx.fill();
+  } else {
+    ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
   }
-  const wasTruncated = lines.length >= maxLines && words.join(" ") !== lines.join(" ");
-  if (!wasTruncated) {
-    return { lines, truncated: false };
+  ctx.restore();
+}
+function drawRainbowRule(ctx, x, y, width, thickness = 2, colors = [...DEFAULT_RAINBOW_COLORS], borderRadius = thickness / 2) {
+  if (width <= 0 || thickness <= 0) {
+    return;
   }
-  const lastIndex = lines.length - 1;
-  let truncatedLine = `${lines[lastIndex]}\u2026`;
-  while (truncatedLine.length > 1 && ctx.measureText(truncatedLine).width > maxWidth) {
-    truncatedLine = `${truncatedLine.slice(0, -2)}\u2026`;
+  const gradient = ctx.createLinearGradient(x, y, x + width, y);
+  const stops = colors.length >= 2 ? colors : [...DEFAULT_RAINBOW_COLORS];
+  for (const [index, color] of stops.entries()) {
+    gradient.addColorStop(index / (stops.length - 1), color);
   }
-  lines[lastIndex] = truncatedLine;
-  return { lines, truncated: true };
+  const ruleTop = y - thickness / 2;
+  ctx.save();
+  roundedRectPath(ctx, x, ruleTop, width, thickness, borderRadius);
+  ctx.fillStyle = gradient;
+  ctx.fill();
+  ctx.restore();
 }
-function drawTextBlock(ctx, options) {
-  applyFont(ctx, { size: options.fontSize, weight: options.fontWeight, family: options.family });
-  const wrapped = wrapText(ctx, options.text, options.maxWidth, options.maxLines);
-  ctx.fillStyle = options.color;
-  for (const [index, line] of wrapped.lines.entries()) {
-    ctx.fillText(line, options.x, options.y + index * options.lineHeight);
+function drawVignette(ctx, width, height, intensity = 0.3, color = "#000000") {
+  if (width <= 0 || height <= 0 || intensity <= 0) {
+    return;
   }
-  return {
-    height: wrapped.lines.length * options.lineHeight,
-    truncated: wrapped.truncated
-  };
-}
-function drawTextLabel(ctx, text, position, options) {
-  applyFont(ctx, { size: options.fontSize, weight: 600, family: options.fontFamily });
-  const textWidth = Math.ceil(ctx.measureText(text).width);
-  const rect = {
-    x: Math.round(position.x - (textWidth + options.padding * 2) / 2),
-    y: Math.round(position.y - (options.fontSize + options.padding * 2) / 2),
-    width: textWidth + options.padding * 2,
-    height: options.fontSize + options.padding * 2
-  };
-  drawRoundedRect(ctx, rect, options.borderRadius, options.backgroundColor);
-  ctx.fillStyle = options.color;
-  ctx.fillText(text, rect.x + options.padding, rect.y + rect.height - options.padding);
-  return rect;
+  const centerX = width / 2;
+  const centerY = height / 2;
+  const outerRadius = Math.max(width, height) / 2;
+  const innerRadius = Math.min(width, height) * 0.2;
+  const vignette = ctx.createRadialGradient(
+    centerX,
+    centerY,
+    innerRadius,
+    centerX,
+    centerY,
+    outerRadius
+  );
+  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);
+  ctx.restore();
 }
 
 // src/renderers/card.ts
@@ -981,36 +1322,6 @@ function renderCard(ctx, card, rect, theme) {
   return elements;
 }
 
-// src/utils/color.ts
-function parseChannel(hex, offset) {
-  return Number.parseInt(hex.slice(offset, offset + 2), 16);
-}
-function parseHexColor2(hexColor) {
-  const normalized = hexColor.startsWith("#") ? hexColor.slice(1) : hexColor;
-  if (normalized.length !== 6 && normalized.length !== 8) {
-    throw new Error(`Unsupported color format: ${hexColor}`);
-  }
-  return {
-    r: parseChannel(normalized, 0),
-    g: parseChannel(normalized, 2),
-    b: parseChannel(normalized, 4)
-  };
-}
-function srgbToLinear(channel) {
-  const normalized = channel / 255;
-  if (normalized <= 0.03928) {
-    return normalized / 12.92;
-  }
-  return ((normalized + 0.055) / 1.055) ** 2.4;
-}
-function relativeLuminance(hexColor) {
-  const rgb = parseHexColor2(hexColor);
-  const r = srgbToLinear(rgb.r);
-  const g = srgbToLinear(rgb.g);
-  const b = srgbToLinear(rgb.b);
-  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
-}
-
 // src/primitives/window-chrome.ts
 var WINDOW_CHROME_HEIGHT = 34;
 var WINDOW_CHROME_LEFT_MARGIN = 14;
@@ -1023,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();
@@ -1160,7 +1471,17 @@ async function highlightCode(code, language, themeName) {
 
 // src/themes/builtin.ts
 import { z } from "zod";
-var colorHexSchema = z.string().regex(/^#(?:[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/, "Expected #RRGGBB or #RRGGBBAA color");
+var colorHexSchema = z.string().refine(
+  (v) => {
+    try {
+      normalizeColor(v);
+      return true;
+    } catch {
+      return false;
+    }
+  },
+  { message: "Expected #RRGGBB, #RRGGBBAA, rgb(), or rgba() color" }
+).transform((v) => normalizeColor(v));
 var fontFamilySchema = z.string().min(1).max(120);
 var codeThemeSchema = z.object({
   background: colorHexSchema,
@@ -1667,25 +1988,134 @@ 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 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) {
+  const fromCenter = rectCenter(fromBounds);
+  const toCenter = rectCenter(toBounds);
+  const p0 = edgeAnchor(fromBounds, toCenter);
+  const p3 = edgeAnchor(toBounds, 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 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) {
+  const fromCenter = rectCenter(fromBounds);
+  const toCenter = rectCenter(toBounds);
+  const start = edgeAnchor(fromBounds, toCenter);
+  const end = edgeAnchor(toBounds, 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) {
+  const fromC = rectCenter(fromBounds);
+  const toC = rectCenter(toBounds);
+  const p0 = edgeAnchor(fromBounds, toC);
+  const p3 = edgeAnchor(toBounds, 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 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: c.x,
-    y: dy >= 0 ? rect.y + rect.height : rect.y
+    x: totalX / nodeBounds.length,
+    y: totalY / nodeBounds.length
   };
 }
 function dashFromStyle(style) {
@@ -1769,51 +2199,95 @@ 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;
+  if (routing === "curve") {
+    const [p0, cp1, cp2, p3] = curveRoute(fromBounds, toBounds, diagramCenter, tension);
+    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);
+  } else if (routing === "arc") {
+    const [first, second] = arcRoute(fromBounds, toBounds, diagramCenter, tension);
+    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);
+  } else {
+    const useElkRoute = routing === "auto" && (edgeRoute?.points.length ?? 0) >= 2;
+    linePoints = useElkRoute ? edgeRoute?.points ?? orthogonalRoute(fromBounds, toBounds) : orthogonalRoute(fromBounds, toBounds);
+    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
     }
   ];
@@ -2444,92 +2918,6 @@ function renderDrawCommands(ctx, commands, theme) {
   return rendered;
 }
 
-// src/renderers/flow-node.ts
-function renderFlowNode(ctx, node, bounds, theme) {
-  const fillColor = node.color ?? theme.surfaceElevated;
-  const borderColor = node.borderColor ?? theme.border;
-  const borderWidth = node.borderWidth ?? 2;
-  const cornerRadius = node.cornerRadius ?? 16;
-  const labelColor = node.labelColor ?? theme.text;
-  const sublabelColor = node.sublabelColor ?? theme.textMuted;
-  const labelFontSize = node.labelFontSize ?? 20;
-  ctx.save();
-  ctx.globalAlpha = node.opacity;
-  ctx.lineWidth = borderWidth;
-  switch (node.shape) {
-    case "box":
-      drawRoundedRect(ctx, bounds, 0, fillColor, borderColor);
-      break;
-    case "rounded-box":
-      drawRoundedRect(ctx, bounds, cornerRadius, fillColor, borderColor);
-      break;
-    case "diamond":
-      drawDiamond(ctx, bounds, fillColor, borderColor);
-      break;
-    case "circle": {
-      const radius = Math.min(bounds.width, bounds.height) / 2;
-      drawCircle(
-        ctx,
-        { x: bounds.x + bounds.width / 2, y: bounds.y + bounds.height / 2 },
-        radius,
-        fillColor,
-        borderColor
-      );
-      break;
-    }
-    case "pill":
-      drawPill(ctx, bounds, fillColor, borderColor);
-      break;
-    case "cylinder":
-      drawCylinder(ctx, bounds, fillColor, borderColor);
-      break;
-    case "parallelogram":
-      drawParallelogram(ctx, bounds, fillColor, borderColor);
-      break;
-  }
-  const headingFont = resolveFont(theme.fonts.heading, "heading");
-  const bodyFont = resolveFont(theme.fonts.body, "body");
-  const centerX = bounds.x + bounds.width / 2;
-  const centerY = bounds.y + bounds.height / 2;
-  const labelY = node.sublabel ? centerY - Math.max(4, labelFontSize * 0.2) : centerY + labelFontSize * 0.3;
-  ctx.textAlign = "center";
-  applyFont(ctx, { size: labelFontSize, weight: 700, family: headingFont });
-  ctx.fillStyle = labelColor;
-  ctx.fillText(node.label, centerX, labelY);
-  let textBoundsY = bounds.y + bounds.height / 2 - 18;
-  let textBoundsHeight = 36;
-  if (node.sublabel) {
-    const sublabelFontSize = Math.max(12, Math.round(labelFontSize * 0.68));
-    applyFont(ctx, { size: sublabelFontSize, weight: 500, family: bodyFont });
-    ctx.fillStyle = sublabelColor;
-    ctx.fillText(node.sublabel, centerX, labelY + Math.max(20, sublabelFontSize + 6));
-    textBoundsY = bounds.y + bounds.height / 2 - 24;
-    textBoundsHeight = 56;
-  }
-  ctx.restore();
-  return [
-    {
-      id: `flow-node-${node.id}`,
-      kind: "flow-node",
-      bounds,
-      foregroundColor: labelColor,
-      backgroundColor: fillColor
-    },
-    {
-      id: `flow-node-${node.id}-label`,
-      kind: "text",
-      bounds: {
-        x: bounds.x + 8,
-        y: textBoundsY,
-        width: bounds.width - 16,
-        height: textBoundsHeight
-      },
-      foregroundColor: labelColor,
-      backgroundColor: fillColor
-    }
-  ];
-}
-
 // src/renderers/image.ts
 import { loadImage } from "@napi-rs/canvas";
 function roundedRectPath2(ctx, bounds, radius) {
@@ -2784,7 +3172,17 @@ function renderTextElement(ctx, textEl, bounds, theme) {
 
 // src/spec.schema.ts
 import { z as z2 } from "zod";
-var colorHexSchema2 = z2.string().regex(/^#(?:[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/, "Expected #RRGGBB or #RRGGBBAA color");
+var colorHexSchema2 = z2.string().refine(
+  (v) => {
+    try {
+      normalizeColor(v);
+      return true;
+    } catch {
+      return false;
+    }
+  },
+  { message: "Expected #RRGGBB, #RRGGBBAA, rgb(), or rgba() color" }
+).transform((v) => normalizeColor(v));
 var gradientStopSchema = z2.object({
   offset: z2.number().min(0).max(1),
   color: colorHexSchema2
@@ -2968,13 +3366,32 @@ 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(),
+  sublabel2: z2.string().min(1).max(300).optional(),
+  sublabel2Color: colorHexSchema2.optional(),
+  sublabel2FontSize: z2.number().min(8).max(32).optional(),
   labelColor: colorHexSchema2.optional(),
   labelFontSize: z2.number().min(10).max(48).optional(),
   color: colorHexSchema2.optional(),
@@ -2983,20 +3400,30 @@ var flowNodeElementSchema = z2.object({
   cornerRadius: z2.number().min(0).max(64).optional(),
   width: z2.number().int().min(40).max(800).optional(),
   height: z2.number().int().min(30).max(600).optional(),
-  opacity: z2.number().min(0).max(1).default(1)
+  fillOpacity: z2.number().min(0).max(1).default(1),
+  opacity: z2.number().min(0).max(1).default(1),
+  badgeText: z2.string().min(1).max(32).optional(),
+  badgeColor: colorHexSchema2.optional(),
+  badgeBackground: colorHexSchema2.optional(),
+  badgePosition: z2.enum(["top", "inside-top"]).default("inside-top"),
+  shadow: flowNodeShadowSchema.optional()
 }).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)
+  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)
 }).strict();
 var codeBlockStyleSchema = z2.object({
   paddingVertical: z2.number().min(0).max(128).default(56),
@@ -3065,6 +3492,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"),
@@ -3072,7 +3503,17 @@ var autoLayoutConfigSchema = z2.object({
   nodeSpacing: z2.number().int().min(0).max(512).default(80),
   rankSpacing: z2.number().int().min(0).max(512).default(120),
   edgeRouting: z2.enum(["orthogonal", "polyline", "spline"]).default("polyline"),
-  aspectRatio: z2.number().min(0.5).max(3).optional()
+  aspectRatio: z2.number().min(0.5).max(3).optional(),
+  /** ID of the root node for radial layout. Only relevant when algorithm is 'radial'. */
+  radialRoot: z2.string().min(1).max(120).optional(),
+  /** Fixed radius in pixels for radial layout. Only relevant when algorithm is 'radial'. */
+  radialRadius: z2.number().positive().optional(),
+  /** 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(),
+  /** Explicit center used by curve/arc connection routing. */
+  diagramCenter: diagramCenterSchema.optional()
 }).strict();
 var gridLayoutConfigSchema = z2.object({
   mode: z2.literal("grid"),
@@ -3080,13 +3521,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(),
@@ -3096,7 +3541,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,
@@ -3148,6 +3595,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),
@@ -3507,6 +3979,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;
@@ -3519,7 +3995,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;