@bpmn-nova/studio 0.3.0-preview → 0.3.2-preview

package/dist/modules/export-svg/render.js

@@ -0,0 +1,718 @@
+import { NODE_DEFINITIONS, edgeWaypoints, roundedPath, routeRuntimeTransition, smoothPath } from '../core/index.js';
+import { createDefaultIconRegistry, resolveNodeVisual } from '../icons/index.js';
+import { createRuntimePresentation } from '../runtime/index.js';
+import { createRuntimeAppearance } from '../theme/index.js';
+
+const SVG_NS = 'http://www.w3.org/2000/svg';
+const DEFAULT_SIZE = Object.freeze({ width: 960, height: 540 });
+const DEFAULT_PADDING = 32;
+const textMeasureContexts = new WeakMap();
+const graphemeSegmenter = typeof Intl !== 'undefined' && typeof Intl.Segmenter === 'function'
+  ? new Intl.Segmenter(undefined, { granularity: 'grapheme' })
+  : null;
+
+function svgElement(document, tag, attributes = {}, text = null) {
+  const node = document.createElementNS(SVG_NS, tag);
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value !== undefined && value !== null && value !== '') node.setAttribute(name, String(value));
+  }
+  if (text !== null && text !== undefined) node.textContent = String(text);
+  return node;
+}
+
+function graphemes(value) {
+  const source = String(value || '');
+  if (!source) return [];
+  if (graphemeSegmenter) return [...graphemeSegmenter.segment(source)].map((part) => part.segment);
+  return Array.from(source);
+}
+
+function fallbackTextWidth(value, fontSize = 13, fontWeight = 400) {
+  const weightFactor = Number(fontWeight) >= 600 ? 1.025 : 1;
+  const width = graphemes(value).reduce((total, character) => {
+    if (/^\s$/u.test(character)) return total + fontSize * 0.33;
+    if (/^[\u0000-\u00ff]$/u.test(character)) {
+      if (/^[ilI1|.,'`:;!]$/u.test(character)) return total + fontSize * 0.3;
+      if (/^[mwMW@#%&]$/u.test(character)) return total + fontSize * 0.82;
+      return total + fontSize * 0.56;
+    }
+    if (/^[\p{P}\p{S}]$/u.test(character)) return total + fontSize * 0.72;
+    return total + fontSize;
+  }, 0);
+  return width * weightFactor;
+}
+
+function textMeasureContext(document) {
+  if (!document || typeof document !== 'object') return null;
+  if (textMeasureContexts.has(document)) return textMeasureContexts.get(document);
+  let context = null;
+  try {
+    context = document.createElement?.('canvas')?.getContext?.('2d') || null;
+  } catch {
+    context = null;
+  }
+  textMeasureContexts.set(document, context);
+  return context;
+}
+
+function measureText(document, value, { fontSize = 13, fontWeight = 400, fontFamily = 'sans-serif' } = {}) {
+  const source = String(value || '');
+  const context = textMeasureContext(document);
+  if (!context?.measureText) return fallbackTextWidth(source, fontSize, fontWeight);
+  try {
+    context.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+    const measured = context.measureText(source).width;
+    if (Number.isFinite(measured)) return measured;
+  } catch {
+    // Fall back to deterministic Unicode-aware estimates for non-browser documents.
+  }
+  return fallbackTextWidth(source, fontSize, fontWeight);
+}
+
+function fitText(document, value, maxWidth, typography = {}) {
+  const source = String(value || '');
+  const width = Math.max(0, finite(maxWidth, 0));
+  if (!source || width <= 0) return '';
+  if (measureText(document, source, typography) <= width) return source;
+
+  const ellipsis = '\u2026';
+  const ellipsisWidth = measureText(document, ellipsis, typography);
+  if (ellipsisWidth > width) return '';
+  const characters = graphemes(source);
+  let low = 0;
+  let high = characters.length;
+  while (low < high) {
+    const middle = Math.ceil((low + high) / 2);
+    const candidate = `${characters.slice(0, middle).join('')}${ellipsis}`;
+    if (measureText(document, candidate, typography) <= width) low = middle;
+    else high = middle - 1;
+  }
+  return `${characters.slice(0, low).join('')}${ellipsis}`;
+}
+
+function safeSvgId(value) {
+  const source = String(value || 'node');
+  const normalized = source.replace(/[^a-zA-Z0-9_-]+/g, '-').replace(/^-+|-+$/g, '') || 'node';
+  let hash = 2166136261;
+  for (const character of source) {
+    hash ^= character.codePointAt(0);
+    hash = Math.imul(hash, 16777619);
+  }
+  return `${normalized}-${(hash >>> 0).toString(36)}`;
+}
+
+function appendClipPath(document, parent, id, bounds) {
+  const clipPath = svgElement(document, 'clipPath', { id });
+  clipPath.appendChild(svgElement(document, 'rect', {
+    x: bounds.x,
+    y: bounds.y,
+    width: Math.max(0, bounds.width),
+    height: Math.max(0, bounds.height),
+  }));
+  parent.appendChild(clipPath);
+  return `url(#${id})`;
+}
+
+function resolvedDocument(context) {
+  const document = context?.document || context?.root?.ownerDocument || globalThis.document;
+  if (!document?.createElementNS) throw new Error('SVG export requires a DOM Document.');
+  return document;
+}
+
+function fallbackTheme(resolvedTheme = 'light') {
+  const dark = resolvedTheme === 'dark';
+  const colors = dark
+    ? { canvas: '#10131a', surface: '#171b24', surfaceRaised: '#202633', surfaceSubtle: '#141821', surfaceMuted: '#252b38', text: '#edf1f7', textSecondary: '#bdc6d5', textMuted: '#8f9aad', border: '#303847', borderStrong: '#465164', divider: '#29313f', primary: '#918cff', primarySoft: '#2a2852', edge: '#657188' }
+    : { canvas: '#f8f9fb', surface: '#ffffff', surfaceRaised: '#ffffff', surfaceSubtle: '#f7f8fb', surfaceMuted: '#f0f2f7', text: '#1f2430', textSecondary: '#596477', textMuted: '#7d8798', border: '#e1e5ec', borderStrong: '#cbd2dd', divider: '#e9ecf2', primary: '#635bff', primarySoft: '#f0efff', edge: '#9aa8bb' };
+  const tones = dark
+    ? {
+      primary: { foreground: '#b6b3ff', background: '#2a2852', border: '#555097', strong: '#918cff' },
+      success: { foreground: '#71d6ab', background: '#17382d', border: '#2b6550', strong: '#42bd88' },
+      danger: { foreground: '#ff9aa3', background: '#42232a', border: '#7a3b45', strong: '#f06c78' },
+      warning: { foreground: '#edbd6d', background: '#3c301d', border: '#71582b', strong: '#d99d3d' },
+      info: { foreground: '#98b8ff', background: '#202f50', border: '#3a568d', strong: '#7298ee' },
+      neutral: { foreground: '#aeb8c8', background: '#252b36', border: '#414a59', strong: '#8f9aad' },
+    }
+    : {
+      primary: { foreground: '#5149e8', background: '#f0efff', border: '#c9c6ff', strong: '#635bff' },
+      success: { foreground: '#19875b', background: '#eaf8f1', border: '#bde6d3', strong: '#22a06b' },
+      danger: { foreground: '#c93f4b', background: '#fff0f1', border: '#f2b9bf', strong: '#df4b55' },
+      warning: { foreground: '#a36b13', background: '#fff6e8', border: '#ecd2a4', strong: '#c48218' },
+      info: { foreground: '#3665c5', background: '#eef3ff', border: '#c7d5f5', strong: '#527bd4' },
+      neutral: { foreground: '#667186', background: '#f1f3f6', border: '#dce1e8', strong: '#8791a3' },
+    };
+  return { resolvedTheme, colors, tones, fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif' };
+}
+
+function themeSnapshot(context, options) {
+  const requested = options.theme || 'current';
+  const snapshot = context.themeSnapshot
+    || context.themeController?.getSnapshot?.(requested)
+    || fallbackTheme(requested === 'dark' ? 'dark' : 'light');
+  const fallback = fallbackTheme(snapshot.resolvedTheme);
+  return {
+    ...fallback,
+    ...snapshot,
+    colors: { ...fallback.colors, ...(snapshot.colors || {}) },
+    tones: { ...fallback.tones, ...(snapshot.tones || {}) },
+  };
+}
+
+function tone(theme, name) {
+  return theme.tones?.[name] || theme.tones?.neutral || fallbackTheme(theme.resolvedTheme).tones.neutral;
+}
+
+function finite(value, fallback = 0) {
+  const number = Number(value);
+  return Number.isFinite(number) ? number : fallback;
+}
+
+function formatTime(value) {
+  return value ? String(value).replace('T', ' ') : '';
+}
+
+function formatSize(value) {
+  const bytes = Number(value);
+  if (!Number.isFinite(bytes) || bytes < 0) return '';
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(bytes < 10240 ? 1 : 0)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(bytes < 1024 * 10240 ? 1 : 0)} MB`;
+}
+
+function routePath(points, style = 'rounded', radius = 14) {
+  if (!points.length) return '';
+  if (style === 'straight') return points.map((point, index) => `${index ? 'L' : 'M'} ${point.x} ${point.y}`).join(' ');
+  if (style === 'smooth') return smoothPath(points, Math.max(24, radius * 1.7));
+  return roundedPath(points, radius);
+}
+
+function longestSegmentCenter(points) {
+  let candidate = null;
+  for (let index = 0; index < points.length - 1; index += 1) {
+    const start = points[index];
+    const end = points[index + 1];
+    const length = Math.hypot(end.x - start.x, end.y - start.y);
+    if (!candidate || length > candidate.length) candidate = { length, x: (start.x + end.x) / 2, y: (start.y + end.y) / 2 };
+  }
+  return candidate || points[0] || { x: 0, y: 0 };
+}
+
+function wrapText(value, maxWidth, fontSize = 13) {
+  const source = String(value || '');
+  if (!source) return [];
+  const average = fontSize * 0.78;
+  const limit = Math.max(1, Math.floor(maxWidth / average));
+  const lines = [];
+  for (const paragraph of source.split(/\r?\n/)) {
+    if (!paragraph) { lines.push(''); continue; }
+    let current = '';
+    for (const character of Array.from(paragraph)) {
+      if (current && Array.from(current).length >= limit) {
+        lines.push(current);
+        current = character;
+      } else current += character;
+    }
+    if (current) lines.push(current);
+  }
+  return lines;
+}
+
+function appendTextLines(document, parent, lines, { x, y, lineHeight = 18, attributes = {} } = {}) {
+  const text = svgElement(document, 'text', { x, y, ...attributes });
+  lines.forEach((line, index) => text.appendChild(svgElement(document, 'tspan', { x, dy: index ? lineHeight : 0 }, line)));
+  parent.appendChild(text);
+  return text;
+}
+
+function appendIcon(document, parent, descriptor, bounds, color) {
+  if (!descriptor?.paths?.length) return;
+  const viewBox = String(descriptor.viewBox || '0 0 24 24').split(/\s+/).map(Number);
+  const sourceWidth = viewBox[2] || 24;
+  const sourceHeight = viewBox[3] || 24;
+  const scale = Math.min(bounds.width / sourceWidth, bounds.height / sourceHeight);
+  const tx = bounds.x + (bounds.width - sourceWidth * scale) / 2 - (viewBox[0] || 0) * scale;
+  const ty = bounds.y + (bounds.height - sourceHeight * scale) / 2 - (viewBox[1] || 0) * scale;
+  const group = svgElement(document, 'g', { transform: `translate(${tx} ${ty}) scale(${scale})`, color, fill: descriptor.fill || 'none', stroke: color });
+  descriptor.paths.forEach((path) => {
+    const attributes = {};
+    for (const [key, value] of Object.entries(path)) attributes[key === 'dash' ? 'stroke-dasharray' : key] = value === 'currentColor' ? color : value;
+    group.appendChild(svgElement(document, 'path', attributes));
+  });
+  parent.appendChild(group);
+}
+
+function includeBounds(bounds, rect) {
+  if (!rect) return;
+  bounds.left = Math.min(bounds.left, rect.x);
+  bounds.top = Math.min(bounds.top, rect.y);
+  bounds.right = Math.max(bounds.right, rect.x + rect.width);
+  bounds.bottom = Math.max(bounds.bottom, rect.y + rect.height);
+}
+
+function createRoot(document, { minX, minY, width, height, title, theme, transparentBackground }) {
+  const svg = svgElement(document, 'svg', {
+    xmlns: SVG_NS,
+    width,
+    height,
+    viewBox: `${minX} ${minY} ${width} ${height}`,
+    role: 'img',
+    'aria-label': title,
+    'data-nova-svg-export': 'true',
+    'data-nova-theme': theme.resolvedTheme,
+  });
+  svg.appendChild(svgElement(document, 'title', {}, title));
+  if (!transparentBackground) svg.appendChild(svgElement(document, 'rect', { x: minX, y: minY, width, height, fill: theme.colors.canvas }));
+  return svg;
+}
+
+function serializeArtifact(document, svg, { filename, width, height, viewBox, warnings }) {
+  const serializer = new (document.defaultView?.XMLSerializer || globalThis.XMLSerializer)();
+  const source = `<?xml version="1.0" encoding="UTF-8"?>\n${serializer.serializeToString(svg)}`;
+  const BlobType = document.defaultView?.Blob || globalThis.Blob;
+  const blob = new BlobType([source], { type: 'image/svg+xml;charset=utf-8' });
+  return Object.freeze({ svg: source, blob, filename, mimeType: 'image/svg+xml', width, height, viewBox, warnings: Object.freeze([...warnings]) });
+}
+
+export function sanitizeSvgFilename(value, fallback = 'bpmn-nova') {
+  const clean = String(value || fallback)
+    .replace(/[\\/:*?"<>|\u0000-\u001f]/g, '-')
+    .replace(/\s+/g, ' ')
+    .replace(/[. ]+$/g, '')
+    .trim()
+    .slice(0, 120) || fallback;
+  return clean.toLowerCase().endsWith('.svg') ? clean : `${clean}.svg`;
+}
+
+function addDefinitions(document, svg, theme) {
+  const defs = svgElement(document, 'defs');
+  const shadow = svgElement(document, 'filter', { id: 'nova-export-shadow', x: '-20%', y: '-30%', width: '140%', height: '160%' });
+  shadow.appendChild(svgElement(document, 'feDropShadow', { dx: 0, dy: 2, stdDeviation: 2, 'flood-color': theme.resolvedTheme === 'dark' ? '#000000' : '#1f2841', 'flood-opacity': theme.resolvedTheme === 'dark' ? 0.34 : 0.12 }));
+  defs.appendChild(shadow);
+  const markers = new Map([['edge', theme.colors.edge]]);
+  for (const name of Object.keys(theme.tones || {})) {
+    if (/^[a-z][a-z0-9-]{0,47}$/.test(name)) markers.set(name, tone(theme, name).strong);
+  }
+  for (const [id, color] of markers) {
+    const marker = svgElement(document, 'marker', { id: `nova-arrow-${id}`, viewBox: '0 0 10 10', refX: 8.5, refY: 5, markerWidth: 7, markerHeight: 7, orient: 'auto-start-reverse', markerUnits: 'strokeWidth' });
+    marker.appendChild(svgElement(document, 'path', { d: 'M 0 0 L 10 5 L 0 10 z', fill: color }));
+    defs.appendChild(marker);
+  }
+  svg.appendChild(defs);
+}
+
+function nodeToneName(node) {
+  return ({ userTask: 'user-task', serviceTask: 'service-task', scriptTask: 'script-task', businessRuleTask: 'rule-task', sendTask: 'message-task', receiveTask: 'message-task', manualTask: 'manual-task' })[node.type] || 'primary';
+}
+
+function renderDefaultNode({ document, group, node, definition, visual, presentation, theme, iconRegistry }) {
+  const colors = theme.colors;
+  const statusTone = tone(theme, presentation?.status === 'rejected' ? 'danger' : presentation?.status === 'active' ? 'primary' : presentation?.status === 'completed' ? 'success' : 'neutral');
+  const typeTone = tone(theme, nodeToneName(node));
+  const icon = iconRegistry.resolve(visual.iconId, null);
+  const { x, y, width, height } = node;
+  if (['event', 'boundary'].includes(definition.kind)) {
+    const radius = Math.min(width, height) / 2 - 2;
+    group.appendChild(svgElement(document, 'circle', { cx: x + width / 2, cy: y + height / 2, r: radius, fill: colors.surface, stroke: presentation?.status && presentation.status !== 'idle' ? statusTone.strong : colors.borderStrong, 'stroke-width': definition.eventStage === 'end' ? 3 : 2, 'stroke-dasharray': definition.kind === 'boundary' && node.properties?.cancelActivity === false ? '5 3' : null }));
+    if (definition.eventStage === 'intermediate' || definition.kind === 'boundary') group.appendChild(svgElement(document, 'circle', { cx: x + width / 2, cy: y + height / 2, r: radius - 5, fill: 'none', stroke: colors.borderStrong, 'stroke-width': 1.4 }));
+    appendIcon(document, group, icon, { x: x + width * 0.3, y: y + height * 0.3, width: width * 0.4, height: height * 0.4 }, colors.textSecondary);
+    appendTextLines(document, group, wrapText(node.name || definition.label, 150, 12), { x: x + width / 2, y: y + height + 20, lineHeight: 15, attributes: { 'text-anchor': 'middle', fill: colors.textSecondary, 'font-size': 12, 'font-family': theme.fontFamily } });
+    return;
+  }
+  if (definition.kind === 'gateway') {
+    const points = `${x + width / 2},${y + 2} ${x + width - 2},${y + height / 2} ${x + width / 2},${y + height - 2} ${x + 2},${y + height / 2}`;
+    group.appendChild(svgElement(document, 'polygon', { points, fill: colors.surface, stroke: presentation?.status && presentation.status !== 'idle' ? statusTone.strong : colors.borderStrong, 'stroke-width': 2, filter: 'url(#nova-export-shadow)' }));
+    appendIcon(document, group, icon, { x: x + width * 0.28, y: y + height * 0.28, width: width * 0.44, height: height * 0.44 }, colors.textSecondary);
+    appendTextLines(document, group, wrapText(node.name || definition.label, 160, 12), { x: x + width / 2, y: y + height + 20, lineHeight: 15, attributes: { 'text-anchor': 'middle', fill: colors.textSecondary, 'font-size': 12, 'font-family': theme.fontFamily } });
+    return;
+  }
+  if (definition.kind === 'participant' || definition.kind === 'lane') {
+    group.appendChild(svgElement(document, 'rect', { x, y, width, height, rx: 4, fill: colors.surfaceSubtle, stroke: colors.borderStrong, 'stroke-width': 1.3 }));
+    const rail = Math.min(42, Math.max(30, width * 0.08));
+    group.appendChild(svgElement(document, 'line', { x1: x + rail, y1: y, x2: x + rail, y2: y + height, stroke: colors.borderStrong, 'stroke-width': 1.2 }));
+    const title = svgElement(document, 'text', { x: x + rail / 2, y: y + height / 2, transform: `rotate(-90 ${x + rail / 2} ${y + height / 2})`, 'text-anchor': 'middle', fill: colors.textSecondary, 'font-size': 12, 'font-weight': 600, 'font-family': theme.fontFamily }, node.name || definition.label);
+    group.appendChild(title);
+    return;
+  }
+  if (definition.kind === 'group') {
+    group.appendChild(svgElement(document, 'rect', { x, y, width, height, rx: 10, fill: 'none', stroke: colors.borderStrong, 'stroke-width': 1.2, 'stroke-dasharray': '7 5' }));
+    group.appendChild(svgElement(document, 'text', { x: x + 12, y: y + 22, fill: colors.textSecondary, 'font-size': 12, 'font-weight': 600, 'font-family': theme.fontFamily }, node.properties?.categoryValue || node.name || '分组'));
+    return;
+  }
+  if (definition.kind === 'annotation') {
+    group.appendChild(svgElement(document, 'path', { d: `M ${x + 10} ${y} H ${x} V ${y + height} H ${x + 10}`, fill: 'none', stroke: colors.borderStrong, 'stroke-width': 1.5 }));
+    appendTextLines(document, group, wrapText(node.properties?.text || node.name || '说明', width - 24, 12), { x: x + 16, y: y + 20, lineHeight: 17, attributes: { fill: colors.textSecondary, 'font-size': 12, 'font-family': theme.fontFamily } });
+    return;
+  }
+  if (definition.kind === 'data' || definition.kind === 'dataStore') {
+    if (definition.kind === 'data') group.appendChild(svgElement(document, 'path', { d: `M ${x + 8} ${y + 2} H ${x + width - 18} L ${x + width - 2} ${y + 18} V ${y + height - 2} H ${x + 8} Z`, fill: colors.surface, stroke: colors.borderStrong, 'stroke-width': 1.5 }));
+    else {
+      group.appendChild(svgElement(document, 'rect', { x: x + 4, y: y + 10, width: width - 8, height: height - 20, fill: colors.surface, stroke: colors.borderStrong, 'stroke-width': 1.5 }));
+      group.appendChild(svgElement(document, 'ellipse', { cx: x + width / 2, cy: y + 10, rx: width / 2 - 4, ry: 9, fill: colors.surface, stroke: colors.borderStrong, 'stroke-width': 1.5 }));
+      group.appendChild(svgElement(document, 'ellipse', { cx: x + width / 2, cy: y + height - 10, rx: width / 2 - 4, ry: 9, fill: 'none', stroke: colors.borderStrong, 'stroke-width': 1.5 }));
+    }
+    appendIcon(document, group, icon, { x: x + width * 0.33, y: y + height * 0.31, width: width * 0.34, height: height * 0.34 }, colors.textSecondary);
+    appendTextLines(document, group, wrapText(node.name || definition.label, 150, 12), { x: x + width / 2, y: y + height + 20, lineHeight: 15, attributes: { 'text-anchor': 'middle', fill: colors.textSecondary, 'font-size': 12, 'font-family': theme.fontFamily } });
+    return;
+  }
+
+  const iconSize = Math.min(36, height - 24);
+  const iconX = x + 14;
+  const iconY = y + (height - iconSize) / 2;
+  const copyX = iconX + iconSize + 12;
+  const title = node.name || definition.label;
+  const subtitle = presentation?.actionSummary || presentation?.summary || (node.properties?.assignee || node.properties?.candidateGroups || node.properties?.candidateUsers || '');
+  const hasStatus = Boolean(presentation?.status && presentation.status !== 'idle');
+  const label = hasStatus ? String(presentation.statusLabel || presentation.status) : '';
+  const statusTypography = { fontSize: 10.5, fontWeight: 650, fontFamily: theme.fontFamily };
+  const labelWidth = hasStatus ? Math.max(38, Math.min(88, Math.ceil(measureText(document, label, statusTypography) + 16))) : 0;
+  const statusX = x + width - labelWidth - 10;
+  const titleMaxWidth = Math.max(0, (hasStatus ? statusX - 8 : x + width - 12) - copyX);
+  const subtitleMaxWidth = Math.max(0, x + width - 12 - copyX);
+  const titleTypography = { fontSize: 14, fontWeight: 650, fontFamily: theme.fontFamily };
+  const subtitleTypography = { fontSize: 11.5, fontWeight: 400, fontFamily: theme.fontFamily };
+  const fittedTitle = fitText(document, title, titleMaxWidth, titleTypography);
+  const fittedSubtitle = fitText(document, subtitle, subtitleMaxWidth, subtitleTypography);
+  const tooltip = [title, subtitle].filter(Boolean).join('\n');
+  if (tooltip && (fittedTitle !== title || fittedSubtitle !== String(subtitle || ''))) group.appendChild(svgElement(document, 'title', {}, tooltip));
+
+  const clipId = safeSvgId(node.id);
+  const titleClip = appendClipPath(document, group, `nova-node-${clipId}-title-clip`, { x: copyX, y: y + 9, width: titleMaxWidth, height: 23 });
+  const subtitleClip = appendClipPath(document, group, `nova-node-${clipId}-subtitle-clip`, { x: copyX, y: y + 33, width: subtitleMaxWidth, height: 21 });
+  group.appendChild(svgElement(document, 'rect', { x, y, width, height, rx: 12, fill: colors.surface, stroke: hasStatus ? statusTone.border : colors.border, 'stroke-width': presentation?.status === 'active' ? 2 : 1.2, filter: 'url(#nova-export-shadow)' }));
+  group.appendChild(svgElement(document, 'rect', { x, y: y + 12, width: 3, height: Math.max(12, height - 24), rx: 1.5, fill: typeTone.strong }));
+  group.appendChild(svgElement(document, 'rect', { x: iconX, y: iconY, width: iconSize, height: iconSize, rx: 9, fill: typeTone.background }));
+  appendIcon(document, group, icon, { x: iconX + 8, y: iconY + 8, width: iconSize - 16, height: iconSize - 16 }, typeTone.foreground);
+  if (fittedTitle) group.appendChild(svgElement(document, 'text', { x: copyX, y: y + 27, fill: colors.text, 'font-size': titleTypography.fontSize, 'font-weight': titleTypography.fontWeight, 'font-family': titleTypography.fontFamily, 'clip-path': titleClip }, fittedTitle));
+  if (fittedSubtitle) group.appendChild(svgElement(document, 'text', { x: copyX, y: y + 49, fill: colors.textSecondary, 'font-size': subtitleTypography.fontSize, 'font-family': subtitleTypography.fontFamily, 'clip-path': subtitleClip }, fittedSubtitle));
+  if (hasStatus) {
+    const fittedLabel = fitText(document, label, labelWidth - 16, statusTypography);
+    group.appendChild(svgElement(document, 'rect', { x: x + width - labelWidth - 10, y: y + 9, width: labelWidth, height: 22, rx: 11, fill: statusTone.background }));
+    group.appendChild(svgElement(document, 'text', { x: x + width - labelWidth / 2 - 10, y: y + 24, 'text-anchor': 'middle', fill: statusTone.foreground, 'font-size': statusTypography.fontSize, 'font-weight': statusTypography.fontWeight, 'font-family': statusTypography.fontFamily }, fittedLabel));
+  }
+}
+
+export async function exportDiagramSvg(context = {}, options = {}) {
+  options.signal?.throwIfAborted?.();
+  const document = resolvedDocument(context);
+  const model = context.model || { id: 'Process', name: 'BPMN Nova', nodes: [], edges: [], settings: {} };
+  const theme = themeSnapshot(context, options);
+  const appearance = context.runtimeAppearance?.resolveStatus ? context.runtimeAppearance : createRuntimeAppearance(context.runtimeAppearance || {});
+  const presentation = context.runtimePresentation || createRuntimePresentation({ model, runtime: context.runtime || null, appearance });
+  const iconRegistry = context.iconRegistry || createDefaultIconRegistry();
+  const warnings = [];
+  const bounds = { left: Infinity, top: Infinity, right: -Infinity, bottom: -Infinity };
+  for (const node of model.nodes || []) includeBounds(bounds, { x: node.x - 4, y: node.y - 4, width: node.width + 8, height: node.height + 42 });
+  for (const edge of model.edges || []) for (const point of edgeWaypoints(model, edge)) includeBounds(bounds, { x: point.x - 4, y: point.y - 4, width: 8, height: 8 });
+  if (!Number.isFinite(bounds.left)) Object.assign(bounds, { left: 0, top: 0, right: DEFAULT_SIZE.width, bottom: DEFAULT_SIZE.height });
+
+  const runtimeRoutes = [];
+  if (context.mode === 'instance' || context.runtime) {
+    for (const transition of presentation.getTransitions?.() || []) {
+      if (!['reject', 'return'].includes(transition.type) || !transition.visible) continue;
+      const route = routeRuntimeTransition(model, transition, { occupiedRoutes: runtimeRoutes });
+      if (!route) continue;
+      runtimeRoutes.push(route.points);
+      route.points.forEach((point) => includeBounds(bounds, { x: point.x - 8, y: point.y - 8, width: 16, height: 16 }));
+      includeBounds(bounds, { x: route.labelPoint.x - 100, y: route.labelPoint.y - 20, width: 200, height: 40 });
+    }
+  }
+  const padding = Math.max(0, finite(options.padding, DEFAULT_PADDING));
+  const minX = Math.floor(bounds.left - padding);
+  const minY = Math.floor(bounds.top - padding);
+  const width = Math.max(1, Math.ceil(bounds.right - bounds.left + padding * 2));
+  const height = Math.max(1, Math.ceil(bounds.bottom - bounds.top + padding * 2));
+  const title = options.title || model.name || 'BPMN Nova';
+  const svg = createRoot(document, { minX, minY, width, height, title, theme, transparentBackground: options.transparentBackground === true });
+  addDefinitions(document, svg, theme);
+
+  const edgeLayer = svgElement(document, 'g', { 'data-layer': 'edges' });
+  for (const edge of model.edges || []) {
+    const points = edgeWaypoints(model, edge);
+    const edgeState = presentation.getEdge?.(edge.id) || { status: 'idle' };
+    const completed = edgeState.status === 'completed';
+    const stroke = completed ? tone(theme, 'success').strong : theme.colors.edge;
+    const type = edge.type || 'sequenceFlow';
+    const path = svgElement(document, 'path', {
+      d: routePath(points, edge.routeStyle || model.settings?.edgeStyle || 'rounded', edge.cornerRadius ?? model.settings?.cornerRadius ?? 14),
+      fill: 'none', stroke, 'stroke-width': completed ? 2.3 : 1.8, 'stroke-linecap': 'round', 'stroke-linejoin': 'round',
+      'stroke-dasharray': type === 'messageFlow' ? '8 7' : type === 'association' ? '2 6' : null,
+      'marker-end': type === 'association' ? null : `url(#nova-arrow-${completed ? 'success' : 'edge'})`,
+    });
+    edgeLayer.appendChild(path);
+    if (edge.name) {
+      const position = longestSegmentCenter(points);
+      const labelTypography = { fontSize: 11, fontWeight: 600, fontFamily: theme.fontFamily };
+      const labelWidth = Math.max(44, Math.min(180, Math.ceil(measureText(document, edge.name, labelTypography) + 20)));
+      const fittedLabel = fitText(document, edge.name, labelWidth - 16, labelTypography);
+      const labelGroup = svgElement(document, 'g', { 'data-edge-label-id': edge.id || '' });
+      if (fittedLabel !== String(edge.name)) labelGroup.appendChild(svgElement(document, 'title', {}, edge.name));
+      labelGroup.appendChild(svgElement(document, 'rect', { x: position.x - labelWidth / 2, y: position.y - 13, width: labelWidth, height: 26, rx: 7, fill: theme.colors.surfaceRaised, stroke: theme.colors.border, 'stroke-width': 1 }));
+      labelGroup.appendChild(svgElement(document, 'text', { x: position.x, y: position.y + 4, 'text-anchor': 'middle', fill: theme.colors.textSecondary, 'font-size': labelTypography.fontSize, 'font-weight': labelTypography.fontWeight, 'font-family': labelTypography.fontFamily }, fittedLabel));
+      edgeLayer.appendChild(labelGroup);
+    }
+  }
+  svg.appendChild(edgeLayer);
+
+  if (context.mode === 'instance' || context.runtime) {
+    const transitionLayer = svgElement(document, 'g', { 'data-layer': 'runtime-transitions' });
+    const occupied = [];
+    for (const transition of presentation.getTransitions?.() || []) {
+      if (!['reject', 'return'].includes(transition.type) || !transition.visible) continue;
+      const route = routeRuntimeTransition(model, transition, { occupiedRoutes: occupied });
+      if (!route) continue;
+      occupied.push(route.points);
+      const toneName = appearance.resolveTransition?.(transition)?.tone || (transition.type === 'reject' ? 'danger' : 'warning');
+      const transitionTone = tone(theme, toneName);
+      const markerTone = Object.hasOwn(theme.tones || {}, toneName) && /^[a-z][a-z0-9-]{0,47}$/.test(toneName) ? toneName : 'neutral';
+      transitionLayer.appendChild(svgElement(document, 'path', { d: routePath(route.points, model.settings?.edgeStyle || 'rounded', model.settings?.cornerRadius || 14), fill: 'none', stroke: transitionTone.strong, 'stroke-width': 2.2, 'stroke-dasharray': '8 6', 'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'marker-end': `url(#nova-arrow-${markerTone})`, opacity: transition.latest ? 1 : 0.42 }));
+      const label = transition.label || (transition.type === 'reject' ? '驳回' : '退回');
+      const labelTypography = { fontSize: 11, fontWeight: 650, fontFamily: theme.fontFamily };
+      const labelWidth = Math.max(68, Math.min(210, Math.ceil(measureText(document, label, labelTypography) + 20)));
+      const fittedLabel = fitText(document, label, labelWidth - 16, labelTypography);
+      const labelGroup = svgElement(document, 'g', { 'data-transition-label-id': transition.id || '' });
+      if (fittedLabel !== String(label)) labelGroup.appendChild(svgElement(document, 'title', {}, label));
+      labelGroup.appendChild(svgElement(document, 'rect', { x: route.labelPoint.x - labelWidth / 2, y: route.labelPoint.y - 14, width: labelWidth, height: 28, rx: 7, fill: theme.colors.surfaceRaised, stroke: transitionTone.border, 'stroke-width': 1 }));
+      labelGroup.appendChild(svgElement(document, 'text', { x: route.labelPoint.x, y: route.labelPoint.y + 4, 'text-anchor': 'middle', fill: transitionTone.foreground, 'font-size': labelTypography.fontSize, 'font-weight': labelTypography.fontWeight, 'font-family': labelTypography.fontFamily }, fittedLabel));
+      transitionLayer.appendChild(labelGroup);
+    }
+    svg.appendChild(transitionLayer);
+  }
+
+  const nodeLayer = svgElement(document, 'g', { 'data-layer': 'nodes' });
+  const order = { participant: 0, lane: 1, group: 2, container: 3, data: 4, dataStore: 4, annotation: 4, task: 5, gateway: 6, event: 7, boundary: 8 };
+  const nodes = [...(model.nodes || [])].sort((a, b) => (order[NODE_DEFINITIONS[a.type]?.kind] ?? 5) - (order[NODE_DEFINITIONS[b.type]?.kind] ?? 5));
+  for (const node of nodes) {
+    options.signal?.throwIfAborted?.();
+    const definition = NODE_DEFINITIONS[node.type] || NODE_DEFINITIONS.generic;
+    const nodePresentation = presentation.getNode?.(node.id) || null;
+    const visual = resolveNodeVisual(node, { surface: context.mode === 'instance' ? 'viewer' : 'canvas', model: context.visualModel || model });
+    const group = svgElement(document, 'g', { 'data-node-id': node.id });
+    const customRenderer = context.nodeRenderers?.[node.type] || context.nodeRenderers?.[definition.kind];
+    let rendered = false;
+    if (typeof customRenderer === 'function') {
+      try {
+        rendered = customRenderer({ container: group, node, definition, runtimePresentation: nodePresentation, visual, model, themeSnapshot: theme, iconRegistry }) !== false;
+        if (!rendered) group.replaceChildren();
+      } catch (error) {
+        group.replaceChildren();
+        warnings.push({ code: 'custom-node-renderer-failed', message: `节点“${node.name || node.id}”的 SVG Renderer 执行失败，已使用标准视觉。`, elementId: node.id });
+      }
+    } else if (context.htmlNodeRenderers?.[node.type] || context.htmlNodeRenderers?.[definition.kind] || context.htmlNodeRenderer) {
+      warnings.push({ code: 'custom-node-renderer-fallback', message: `节点“${node.name || node.id}”没有 SVG Renderer，已使用标准视觉。`, elementId: node.id });
+    }
+    if (!rendered) renderDefaultNode({ document, group, node, definition, visual, presentation: nodePresentation, theme, iconRegistry });
+    nodeLayer.appendChild(group);
+  }
+  svg.appendChild(nodeLayer);
+  const filename = sanitizeSvgFilename(options.filename || `${model.name || model.id || 'process'}-${context.label || (context.mode === 'instance' ? '审批轨迹' : context.mode === 'viewer' ? '流程展示' : '流程设计')}`);
+  return serializeArtifact(document, svg, { filename, width, height, viewBox: { x: minX, y: minY, width, height }, warnings });
+}
+
+async function resolvedImageData(asset, action, context, warnings, signal) {
+  const cache = context.assetCache || new Map();
+  const key = `${asset.id}:export`;
+  const cached = cache.get(key);
+  if (typeof cached === 'string') return cached;
+  const promise = Promise.resolve(context.resolveAsset?.(asset, 'export', action)).then(async (url) => {
+    signal?.throwIfAborted?.();
+    if (!url) throw new Error('Resource resolver returned no URL.');
+    if (String(url).startsWith('data:')) {
+      if (!String(url).startsWith('data:image/')) throw new Error('Unexpected Data URL MIME type.');
+      return String(url);
+    }
+    const ownerWindow = context.document?.defaultView || globalThis;
+    const response = await ownerWindow.fetch(url, { signal });
+    if (!response.ok) throw new Error(`HTTP ${response.status}`);
+    const blob = await response.blob();
+    if (!blob.type.startsWith('image/')) throw new Error(`Unexpected MIME type: ${blob.type || 'unknown'}`);
+    return await new Promise((resolve, reject) => {
+      const reader = new ownerWindow.FileReader();
+      reader.addEventListener('load', () => resolve(String(reader.result)), { once: true });
+      reader.addEventListener('error', () => reject(reader.error || new Error('Unable to read image.')), { once: true });
+      reader.readAsDataURL(blob);
+    });
+  });
+  try {
+    const data = await promise;
+    cache.set(key, data);
+    return data;
+  } catch (error) {
+    cache.delete(key);
+    if (signal?.aborted) throw error;
+    warnings.push({ code: 'asset-unavailable', message: `图片“${asset.name}”无法嵌入 SVG，已显示占位内容。`, assetId: asset.id, elementId: action.elementId });
+    return null;
+  }
+}
+
+function timelineSequence(projection) {
+  const groupedIds = new Set((projection.groups || []).flatMap((group) => group.itemIds || []));
+  return [
+    ...(projection.items || []).filter((item) => !groupedIds.has(item.id)),
+    ...(projection.groups || []).map((group) => ({ ...group, kind: 'parallel-group' })),
+  ].sort((a, b) => (a.order - b.order) || String(a.id).localeCompare(String(b.id)));
+}
+
+function actionHeight(action) {
+  const paragraphLines = wrapText(action.plainText || action.content?.plainText || '', 700, 12).length;
+  const blockParagraphs = (action.content?.blocks || []).filter((block) => block.type === 'paragraph').reduce((sum, block) => sum + wrapText(block.text, 700, 12).length, 0);
+  const images = action.images?.length || (action.content?.blocks || []).filter((block) => block.type === 'image').length;
+  const files = action.files?.length || (action.content?.blocks || []).filter((block) => block.type === 'file').length;
+  const targets = action.targets?.length ? 18 : 0;
+  return 52 + targets + Math.max(1, blockParagraphs || paragraphLines) * 17 + (images ? 68 : 0) + files * 40;
+}
+
+async function renderTimelineAction({ document, parent, action, x, y, width, theme, appearance, context, warnings, signal }) {
+  const actionAppearance = appearance.resolveAction(action);
+  const actionTone = tone(theme, actionAppearance.tone);
+  const height = actionHeight(action);
+  parent.appendChild(svgElement(document, 'rect', { x, y, width, height, rx: 9, fill: theme.colors.surfaceSubtle }));
+  const labelWidth = Math.max(42, Math.min(86, Array.from(actionAppearance.label).length * 12 + 16));
+  parent.appendChild(svgElement(document, 'rect', { x: x + 12, y: y + 10, width: labelWidth, height: 22, rx: 11, fill: actionTone.background }));
+  parent.appendChild(svgElement(document, 'text', { x: x + 12 + labelWidth / 2, y: y + 25, 'text-anchor': 'middle', fill: actionTone.foreground, 'font-size': 11, 'font-weight': 650, 'font-family': theme.fontFamily }, actionAppearance.label));
+  parent.appendChild(svgElement(document, 'text', { x: x + 22 + labelWidth, y: y + 25, fill: theme.colors.textMuted, 'font-size': 11, 'font-family': theme.fontFamily }, [action.actor?.name, formatTime(action.occurredAt)].filter(Boolean).join(' · ')));
+  let cursorY = y + 48;
+  if (action.targets?.length) {
+    parent.appendChild(svgElement(document, 'text', { x: x + 12, y: cursorY, fill: theme.colors.textSecondary, 'font-size': 11, 'font-family': theme.fontFamily }, `目标：${action.targets.map((item) => item.name).join('、')}`));
+    cursorY += 18;
+  }
+  const paragraphBlocks = (action.content?.blocks || []).filter((block) => block.type === 'paragraph' && block.text);
+  const paragraphs = paragraphBlocks.length ? paragraphBlocks.map((block) => block.text) : [action.plainText || action.content?.plainText || ''].filter(Boolean);
+  for (const paragraph of paragraphs) {
+    const lines = wrapText(paragraph, width - 24, 12);
+    appendTextLines(document, parent, lines, { x: x + 12, y: cursorY, lineHeight: 17, attributes: { fill: theme.colors.textSecondary, 'font-size': 12, 'font-family': theme.fontFamily } });
+    cursorY += lines.length * 17 + 4;
+  }
+  const assets = new Map((action.content?.assets || []).map((asset) => [asset.id, asset]));
+  const imageBlocks = (action.content?.blocks || []).filter((block) => block.type === 'image');
+  const fileBlocks = (action.content?.blocks || []).filter((block) => block.type === 'file');
+  if (imageBlocks.length || fileBlocks.length) cursorY += 4;
+  let mediaX = x + 12;
+  for (const block of imageBlocks) {
+    const asset = assets.get(block.assetId);
+    if (!asset || !asset.mediaType?.startsWith('image/')) {
+      warnings.push({ code: 'asset-invalid', message: '审批图片引用无效，已显示占位内容。', assetId: block.assetId, elementId: action.elementId });
+      parent.appendChild(svgElement(document, 'rect', { x: mediaX, y: cursorY, width: 88, height: 58, rx: 7, fill: theme.colors.surfaceMuted, stroke: theme.colors.border }));
+    } else {
+      const data = await resolvedImageData(asset, action, context, warnings, signal);
+      if (data) parent.appendChild(svgElement(document, 'image', { x: mediaX, y: cursorY, width: 88, height: 58, preserveAspectRatio: 'xMidYMid slice', href: data }));
+      else parent.appendChild(svgElement(document, 'rect', { x: mediaX, y: cursorY, width: 88, height: 58, rx: 7, fill: theme.colors.surfaceMuted, stroke: theme.colors.border }));
+    }
+    mediaX += 98;
+  }
+  if (imageBlocks.length) cursorY += 68;
+  for (const block of fileBlocks) {
+    const asset = assets.get(block.assetId);
+    const fileY = cursorY;
+    parent.appendChild(svgElement(document, 'rect', { x: x + 12, y: fileY, width: width - 24, height: 34, rx: 7, fill: theme.colors.surfaceRaised, stroke: theme.colors.border }));
+    parent.appendChild(svgElement(document, 'text', { x: x + 22, y: fileY + 15, fill: theme.colors.textSecondary, 'font-size': 11, 'font-weight': 600, 'font-family': theme.fontFamily }, asset?.name || '附件不可用'));
+    parent.appendChild(svgElement(document, 'text', { x: x + 22, y: fileY + 28, fill: theme.colors.textMuted, 'font-size': 9.5, 'font-family': theme.fontFamily }, asset ? [asset.mediaType, formatSize(asset.size)].filter(Boolean).join(' · ') : ''));
+    cursorY += 40;
+  }
+  return height;
+}
+
+function resultLabel(item) {
+  return ({ approved: '已同意', rejected: '已驳回', returned: '已退回', submitted: '已提交', pending: '待处理' })[item.outcome] || item.statusLabel || '';
+}
+
+async function renderTimelineItem({ document, parent, item, x, y, width, theme, appearance, context, warnings, signal }) {
+  const itemTone = tone(theme, appearance.resolveStatus(item.status));
+  const actions = item.actions || [];
+  const actionTotal = actions.reduce((sum, action) => sum + actionHeight(action) + 8, 0);
+  const height = 76 + actionTotal;
+  const railX = x + 18;
+  parent.appendChild(svgElement(document, 'line', { x1: railX, y1: y, x2: railX, y2: y + height + 16, stroke: theme.colors.divider, 'stroke-width': 2 }));
+  parent.appendChild(svgElement(document, 'circle', { cx: railX, cy: y + 22, r: 14, fill: itemTone.background, stroke: itemTone.border, 'stroke-width': 1 }));
+  parent.appendChild(svgElement(document, 'circle', { cx: railX, cy: y + 22, r: 4.5, fill: itemTone.strong }));
+  const contentX = x + 46;
+  const contentWidth = width - 46;
+  parent.appendChild(svgElement(document, 'text', { x: contentX, y: y + 20, fill: theme.colors.text, 'font-size': 15, 'font-weight': 650, 'font-family': theme.fontFamily }, `${item.name}${item.round > 1 ? `  第 ${item.round} 次` : ''}`));
+  parent.appendChild(svgElement(document, 'text', { x: contentX + contentWidth, y: y + 20, 'text-anchor': 'end', fill: itemTone.foreground, 'font-size': 12, 'font-weight': 600, 'font-family': theme.fontFamily }, resultLabel(item)));
+  parent.appendChild(svgElement(document, 'text', { x: contentX, y: y + 42, fill: theme.colors.textSecondary, 'font-size': 11.5, 'font-family': theme.fontFamily }, item.summary || ''));
+  parent.appendChild(svgElement(document, 'text', { x: contentX + contentWidth, y: y + 42, 'text-anchor': 'end', fill: theme.colors.textMuted, 'font-size': 11, 'font-family': theme.fontFamily }, formatTime(item.time)));
+  let actionY = y + 56;
+  for (const action of actions) {
+    const actionHeightValue = await renderTimelineAction({ document, parent, action, x: contentX, y: actionY, width: contentWidth, theme, appearance, context, warnings, signal });
+    actionY += actionHeightValue + 8;
+  }
+  return height;
+}
+
+export async function exportRuntimeTimelineSvg(context = {}, options = {}) {
+  options.signal?.throwIfAborted?.();
+  const document = resolvedDocument(context);
+  const projection = context.projection || { items: [], groups: [], links: [] };
+  const theme = themeSnapshot(context, options);
+  const appearance = context.runtimeAppearance?.resolveStatus ? context.runtimeAppearance : createRuntimeAppearance(context.runtimeAppearance || {});
+  const warnings = [];
+  const width = Math.max(640, finite(options.width, 960));
+  const padding = Math.max(0, finite(options.padding, DEFAULT_PADDING));
+  const title = options.title ?? context.title ?? context.model?.name ?? '审批轨迹';
+  const description = options.description ?? context.description ?? '按实际处理顺序展示';
+  const sequence = timelineSequence(projection);
+  const contentHeight = sequence.reduce((sum, entry) => {
+    if (entry.kind === 'parallel-group') {
+      const children = (entry.itemIds || []).map((id) => projection.items.find((item) => item.id === id)).filter(Boolean);
+      return sum + 50 + children.reduce((childSum, item) => childSum + 76 + (item.actions || []).reduce((actionSum, action) => actionSum + actionHeight(action) + 8, 0) + 16, 0);
+    }
+    return sum + 76 + (entry.actions || []).reduce((actionSum, action) => actionSum + actionHeight(action) + 8, 0) + 16;
+  }, 0);
+  const headerHeight = title || description ? 74 : 0;
+  const height = Math.max(240, padding * 2 + headerHeight + contentHeight);
+  const svg = createRoot(document, { minX: 0, minY: 0, width, height, title: title || '审批轨迹', theme, transparentBackground: options.transparentBackground === true });
+  addDefinitions(document, svg, theme);
+  const root = svgElement(document, 'g', { 'data-layer': 'runtime-timeline' });
+  if (title) root.appendChild(svgElement(document, 'text', { x: padding, y: padding + 20, fill: theme.colors.text, 'font-size': 20, 'font-weight': 700, 'font-family': theme.fontFamily }, title));
+  if (description) root.appendChild(svgElement(document, 'text', { x: padding, y: padding + 43, fill: theme.colors.textMuted, 'font-size': 12, 'font-family': theme.fontFamily }, description));
+  let y = padding + headerHeight;
+  const customRenderer = context.timelineRenderer;
+  let customHeight = 0;
+  if (typeof customRenderer === 'function') {
+    const customLayer = svgElement(document, 'g', { 'data-layer': 'custom-runtime-timeline' });
+    try {
+      const result = await customRenderer({ container: customLayer, document, projection, model: context.model, runtime: context.runtime, themeSnapshot: theme, appearance, resolveAsset: context.resolveAsset, signal: options.signal });
+      if (result?.height) customHeight = Math.max(0, finite(result.height));
+      root.appendChild(customLayer);
+    } catch (error) {
+      warnings.push({ code: 'custom-timeline-renderer-failed', message: '自定义时间线 SVG Renderer 执行失败，已使用默认时间线。' });
+    }
+  }
+  if (!customRenderer || warnings.some((warning) => warning.code === 'custom-timeline-renderer-failed')) {
+    for (const entry of sequence) {
+      options.signal?.throwIfAborted?.();
+      if (entry.kind === 'parallel-group') {
+        const groupTone = tone(theme, appearance.resolveStatus(entry.status));
+        root.appendChild(svgElement(document, 'rect', { x: padding, y, width: width - padding * 2, height: 36, rx: 8, fill: theme.colors.surfaceSubtle }));
+        root.appendChild(svgElement(document, 'text', { x: padding + 14, y: y + 23, fill: groupTone.foreground, 'font-size': 13, 'font-weight': 650, 'font-family': theme.fontFamily }, `${entry.label} · ${entry.completed}/${entry.total} 已完成`));
+        y += 50;
+        const children = (entry.itemIds || []).map((id) => projection.items.find((item) => item.id === id)).filter(Boolean).sort((a, b) => a.order - b.order);
+        for (const child of children) y += await renderTimelineItem({ document, parent: root, item: child, x: padding + 18, y, width: width - padding * 2 - 18, theme, appearance, context, warnings, signal: options.signal }) + 16;
+      } else {
+        y += await renderTimelineItem({ document, parent: root, item: entry, x: padding, y, width: width - padding * 2, theme, appearance, context, warnings, signal: options.signal }) + 16;
+      }
+    }
+  }
+  svg.appendChild(root);
+  const actualHeight = Math.max(height, customHeight, Math.ceil(y + padding));
+  svg.setAttribute('height', String(actualHeight));
+  svg.setAttribute('viewBox', `0 0 ${width} ${actualHeight}`);
+  const background = svg.querySelector(':scope > rect');
+  if (background) background.setAttribute('height', String(actualHeight));
+  const filename = sanitizeSvgFilename(options.filename || `${context.model?.name || 'process'}-${context.label || '移动时间线'}`);
+  return serializeArtifact(document, svg, { filename, width, height: actualHeight, viewBox: { x: 0, y: 0, width, height: actualHeight }, warnings });
+}
+
+export function downloadSvg(artifact, { document = globalThis.document } = {}) {
+  if (!artifact?.blob || !document?.createElement) throw new Error('A valid SVG export Artifact is required.');
+  const ownerWindow = document.defaultView || globalThis;
+  const url = ownerWindow.URL.createObjectURL(artifact.blob);
+  const anchor = document.createElement('a');
+  anchor.href = url;
+  anchor.download = sanitizeSvgFilename(artifact.filename);
+  anchor.hidden = true;
+  document.body.appendChild(anchor);
+  anchor.click();
+  anchor.remove();
+  ownerWindow.setTimeout(() => ownerWindow.URL.revokeObjectURL(url), 0);
+  return artifact.filename;
+}