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

package/dist/modules/viewer/timeline.js

@@ -0,0 +1,276 @@
+import { createDefaultIconRegistry, createIconElement } from '../icons/index.js';
+import { renderRuntimeApprovalContent } from './runtime-content.js';
+import { applyRuntimeTone } from '../theme/index.js';
+
+function element(tag, className, text) {
+  const node = document.createElement(tag);
+  if (className) node.className = className;
+  if (text !== undefined) node.textContent = text;
+  return node;
+}
+
+function statusIconId(status) {
+  if (status === 'completed') return 'ui.statusCompleted';
+  if (status === 'active') return 'ui.statusActive';
+  if (status === 'failed') return 'ui.statusFailed';
+  if (status === 'rejected') return 'ui.statusRejected';
+  if (['skipped', 'cancelled'].includes(status)) return 'ui.statusSkipped';
+  return 'ui.statusIdle';
+}
+
+function icon(registry, id, className = 'nova-icon nova-icon-md') {
+  const host = element('span', className);
+  const svg = createIconElement(registry.resolve(id, null), { className: 'nova-icon-svg' });
+  if (svg) host.appendChild(svg);
+  return host;
+}
+
+function resultText(item) {
+  const outcome = item.outcome;
+  return { approved: '已同意', rejected: '已驳回', returned: '已退回', submitted: '已提交', pending: '待处理' }[outcome] || item.statusLabel || '';
+}
+
+function formatTime(value) {
+  if (!value) return '';
+  return String(value).replace('T', ' ');
+}
+
+function renderParticipants(item) {
+  if ((item.participants || []).length < 2) return null;
+  const details = element('details', 'mb-runtime-timeline-participants');
+  const summary = element('summary', '', `查看处理人 · ${item.participants.length}人`);
+  const list = element('div', 'mb-runtime-timeline-participant-list');
+  item.participants.forEach((participant) => list.appendChild(element('span', '', participant.name)));
+  details.append(summary, list);
+  return details;
+}
+
+function renderTimelineAction({ container, action, resolveAsset, onAssetPreview, appearance }) {
+  const actionAppearance = appearance?.resolveAction(action) || { label: action.label, tone: 'neutral' };
+  const article = element('article', `mb-runtime-timeline-action type-${action.type}`);
+  applyRuntimeTone(article, actionAppearance.tone);
+  const header = element('header', 'mb-runtime-timeline-action-head');
+  header.append(
+    element('strong', '', actionAppearance.label),
+    element('span', '', [action.actor?.name, formatTime(action.occurredAt)].filter(Boolean).join(' · ')),
+  );
+  article.appendChild(header);
+  if (action.targets?.length) article.appendChild(element('div', 'mb-runtime-action-targets', `目标：${action.targets.map((target) => target.name).join('、')}`));
+  renderRuntimeApprovalContent({
+    container: article,
+    action,
+    resolveAsset,
+    compact: true,
+    onPreview: onAssetPreview,
+  });
+  container.appendChild(article);
+}
+
+function renderTimelineActions({ item, resolveAsset, onAssetPreview, appearance }) {
+  const actions = item.actions || [];
+  if (!actions.length) return null;
+  const host = element('div', 'mb-runtime-timeline-actions');
+  const newest = actions.at(-1);
+  renderTimelineAction({ container: host, action: newest, resolveAsset, onAssetPreview, appearance });
+  if (actions.length > 1) {
+    const details = element('details', 'mb-runtime-timeline-action-history');
+    const summary = element('summary', '', `查看更早操作 · ${actions.length - 1} 条`);
+    const body = element('div', 'mb-runtime-timeline-action-history-body');
+    [...actions].slice(0, -1).reverse().forEach((action) => renderTimelineAction({ container: body, action, resolveAsset, onAssetPreview, appearance }));
+    details.append(summary, body);
+    host.appendChild(details);
+  }
+  return host;
+}
+
+function renderActivityItem({ item, registry, conditionLabel, onItemClick, onDetailsRequest, resolveAsset, onAssetPreview, appearance, compact = false }) {
+  const article = element('article', `mb-runtime-timeline-item status-${item.status}${item.predicted ? ' is-predicted' : ''}${compact ? ' is-group-child' : ''}`);
+  applyRuntimeTone(article, appearance?.resolveStatus(item.status));
+  article.dataset.traceItemId = item.id;
+  article.dataset.elementId = item.elementId;
+  const rail = element('div', 'mb-runtime-timeline-rail');
+  rail.appendChild(icon(registry, statusIconId(item.status), 'nova-icon nova-icon-lg'));
+  const card = element('div', 'mb-runtime-timeline-card');
+  const trigger = element('button', 'mb-runtime-timeline-card-main');
+  trigger.type = 'button';
+  trigger.setAttribute('aria-label', `${item.name}，${item.statusLabel}${item.summary ? `，${item.summary}` : ''}${item.comment ? `，${item.comment}` : ''}`);
+  const heading = element('div', 'mb-runtime-timeline-heading');
+  const title = element('strong', '', item.name);
+  if (item.round > 1) title.appendChild(element('small', '', `第 ${item.round} 次`));
+  heading.append(title, element('em', '', resultText(item)));
+  const meta = element('div', 'mb-runtime-timeline-meta');
+  meta.append(element('span', '', item.summary || (item.automated ? item.statusLabel : '')), element('time', '', formatTime(item.time)));
+  trigger.append(heading, meta);
+  trigger.addEventListener('click', (event) => {
+    onItemClick?.(item, event);
+    onDetailsRequest?.(item, event.currentTarget, event);
+  });
+  card.appendChild(trigger);
+  const actions = renderTimelineActions({ item, resolveAsset, onAssetPreview, appearance });
+  if (actions) card.appendChild(actions);
+  const content = element('div', 'mb-runtime-timeline-content');
+  if (conditionLabel) content.appendChild(element('span', 'mb-runtime-timeline-condition', conditionLabel));
+  content.appendChild(card);
+  const participants = renderParticipants(item);
+  if (participants) content.appendChild(participants);
+  article.append(rail, content);
+  return article;
+}
+
+function renderTransitionItem({ item, registry, onItemClick, onTransitionRequest, resolveAsset, onAssetPreview, appearance }) {
+  const article = element('article', `mb-runtime-timeline-item mb-runtime-timeline-transition type-${item.type}`);
+  applyRuntimeTone(article, appearance?.resolveTransition(item).tone);
+  article.dataset.traceItemId = item.id;
+  const rail = element('div', 'mb-runtime-timeline-rail');
+  rail.appendChild(icon(registry, 'ui.statusRejected', 'nova-icon nova-icon-lg'));
+  const card = element('div', 'mb-runtime-timeline-transition-card');
+  const button = element('button', 'mb-runtime-timeline-transition-main');
+  button.type = 'button';
+  button.append(
+    element('strong', '', item.name),
+    element('span', '', [item.summary, formatTime(item.time)].filter(Boolean).join(' · ')),
+  );
+  button.addEventListener('click', (event) => {
+    onItemClick?.(item, event);
+    onTransitionRequest?.(item, event.currentTarget, event);
+  });
+  card.appendChild(button);
+  const action = item.actions?.[0];
+  if (action) {
+    renderRuntimeApprovalContent({ container: card, action, resolveAsset, compact: true, onPreview: onAssetPreview });
+  } else if (item.comment) card.appendChild(element('p', 'mb-runtime-action-paragraph', item.comment));
+  article.append(rail, card);
+  return article;
+}
+
+function renderParallelGroup({ group, children, registry, linkByTarget, onItemClick, onDetailsRequest, resolveAsset, onAssetPreview, appearance }) {
+  const details = element('details', `mb-runtime-timeline-group status-${group.status}`);
+  applyRuntimeTone(details, appearance?.resolveStatus(group.status));
+  details.dataset.traceGroupId = group.id;
+  const summary = element('summary', 'mb-runtime-timeline-group-summary');
+  summary.append(
+    icon(registry, statusIconId(group.status), 'nova-icon nova-icon-lg'),
+    element('strong', '', group.label),
+    element('span', '', `${group.completed}/${group.total} 已完成`),
+  );
+  const body = element('div', 'mb-runtime-timeline-group-body');
+  children.sort((a, b) => a.order - b.order).forEach((item) => body.appendChild(renderActivityItem({
+    item,
+    registry,
+    conditionLabel: linkByTarget.get(item.id)?.label || '',
+    onItemClick,
+    onDetailsRequest,
+    resolveAsset,
+    onAssetPreview,
+    appearance,
+    compact: true,
+  })));
+  details.append(summary, body);
+  return details;
+}
+
+export function renderDefaultRuntimeTimeline({
+  container,
+  model,
+  projection,
+  title,
+  description,
+  iconRegistry,
+  onItemClick,
+  onDetailsRequest,
+  onTransitionRequest,
+  resolveAsset,
+  onAssetPreview,
+  appearance,
+}) {
+  const registry = iconRegistry || createDefaultIconRegistry();
+  const root = element('section', 'mb-runtime-timeline');
+  root.setAttribute('aria-label', `${title || model.name || '流程'}审批轨迹`);
+  const list = element('div', 'mb-runtime-timeline-list');
+  const linkByTarget = new Map(projection.links.map((link) => [link.targetItemId, link]));
+  const groupedIds = new Set(projection.groups.flatMap((group) => group.itemIds));
+  const sequence = [
+    ...projection.items.filter((item) => !groupedIds.has(item.id)),
+    ...projection.groups.map((group) => ({ ...group, kind: 'parallel-group' })),
+  ].sort((a, b) => (a.order - b.order) || a.id.localeCompare(b.id));
+
+  sequence.forEach((entry) => {
+    if (entry.kind === 'parallel-group') {
+      list.appendChild(renderParallelGroup({
+        group: entry,
+        children: entry.itemIds.map((id) => projection.items.find((item) => item.id === id)).filter(Boolean),
+        registry,
+        linkByTarget,
+        onItemClick,
+        onDetailsRequest,
+        resolveAsset,
+        onAssetPreview,
+        appearance,
+      }));
+      return;
+    }
+    if (entry.kind === 'transition') {
+      list.appendChild(renderTransitionItem({ item: entry, registry, onItemClick, onTransitionRequest, resolveAsset, onAssetPreview, appearance }));
+      return;
+    }
+    list.appendChild(renderActivityItem({
+      item: entry,
+      registry,
+      conditionLabel: linkByTarget.get(entry.id)?.label || '',
+      onItemClick,
+      onDetailsRequest,
+      resolveAsset,
+      onAssetPreview,
+      appearance,
+    }));
+  });
+  if (!sequence.length) list.appendChild(element('div', 'mb-runtime-timeline-empty', '暂无运行轨迹'));
+  if (title !== null || description !== null) {
+    const header = element('header', 'mb-runtime-timeline-header');
+    if (title !== null) header.appendChild(element('strong', '', title));
+    if (description !== null) header.appendChild(element('span', '', description));
+    root.appendChild(header);
+  }
+  root.appendChild(list);
+  container.appendChild(root);
+  return () => root.remove();
+}
+
+export class RuntimeTimelineHost {
+  constructor(container, options = {}) {
+    this.container = container;
+    this.options = options;
+    this.iconRegistry = options.iconRegistry || createDefaultIconRegistry();
+    this.selection = null;
+    this._cleanup = null;
+    this.container.innerHTML = '';
+    this.container.classList.remove('mb-diagram-host');
+    this.container.classList.add('mb-runtime-timeline-host');
+    this.render();
+  }
+
+  render() {
+    const scrollTop = this.container.scrollTop;
+    this._cleanup?.();
+    this.container.replaceChildren();
+    const renderer = this.options.renderer || renderDefaultRuntimeTimeline;
+    this._cleanup = renderer({ container: this.container, iconRegistry: this.iconRegistry, ...this.options }) || null;
+    this.container.scrollTop = scrollTop;
+  }
+
+  setSelection(selection) {
+    this.selection = selection;
+    this.container.querySelectorAll('[data-element-id]').forEach((node) => node.classList.toggle('is-selected', selection?.kind === 'node' && node.dataset.elementId === selection.id));
+  }
+
+  fitView() { this.container.scrollTop = 0; }
+  zoomBy() {}
+  actualSize() {}
+
+  destroy() {
+    this._cleanup?.();
+    this._cleanup = null;
+    this.container.innerHTML = '';
+    this.container.classList.remove('mb-runtime-timeline-host');
+  }
+}

package/dist/selection-layout.js

@@ -3,7 +3,7 @@ import {
   autoLayout,
   elementScopeId,
   getNode,
-} from '@bpmn-nova/core';
+} from './modules/core/index.js';
 
 const LAYOUT_KINDS = new Set(['event', 'task', 'container', 'gateway']);
 const GROUPABLE_KINDS = new Set(['event', 'task', 'container', 'gateway', 'data', 'dataStore', 'annotation']);

package/dist/shell.js

@@ -1,9 +1,10 @@
-import { createDefaultIconRegistry, hydrateIcons } from '@bpmn-nova/icons';
-import { createDefaultPaletteRegistry, PalettePanel } from '@bpmn-nova/palette';
-import { createDefaultPropertiesRegistry, PropertiesPanel } from '@bpmn-nova/properties';
-import { demoRuntime } from '@bpmn-nova/runtime';
-import { BpmnViewer } from '@bpmn-nova/viewer';
-import { ThemeController } from '@bpmn-nova/theme';
+import { createDefaultIconRegistry, hydrateIcons } from './modules/icons/index.js';
+import { createDefaultPaletteRegistry, PalettePanel } from './modules/palette/index.js';
+import { createDefaultPropertiesRegistry, PropertiesPanel } from './modules/properties/index.js';
+import { demoRuntime } from './modules/runtime/index.js';
+import { BpmnViewer } from './modules/viewer/index.js';
+import { ThemeController } from './modules/theme/index.js';
+import { openSvgExportPreview } from './modules/export-svg/index.js';
 import { BpmnCanvas } from './canvas.js';
 import { createDefaultContextMenuRegistry } from './context-menu.js';
 import { createInteractionController, createTemplateRegistry } from './interactions.js';
@@ -49,6 +50,7 @@ export class BpmnStudioShell {
     rightWidth = 360,
     theme = null,
     runtimeAppearance = null,
+    svgExport = null,
     onThemeChange = null,
   } = {}) {
     if (!container || !studio) throw new Error('BpmnStudioShell requires container and studio.');
@@ -70,11 +72,13 @@ export class BpmnStudioShell {
       responsive,
       projectionOptions,
       runtimeAppearance,
+      svgExport: svgExport || rendererOptions.svgExport || null,
     });
     this.propertiesRegistry = propertiesRegistry || createDefaultPropertiesRegistry({ studio });
     this.interactions = createInteractionController({ studio, templates: templateRegistry });
     this._cleanups = [];
     this._instances = [];
+    this._svgExportPreview = null;
     this.container.classList.add('nova-studio-shell');
     this.themeController = new ThemeController({ root: this.container, theme, onChange: onThemeChange });
     this.container.style.setProperty('--nova-left-width', `${leftWidth}px`);
@@ -204,7 +208,34 @@ export class BpmnStudioShell {
     importInput.hidden = true;
     const validateButton = tool('校验', '校验流程结构', () => this._showValidationStatus(), 'nova-studio-validate');
     const importButton = tool('导入', '导入 BPMN XML', () => importInput.click(), 'nova-studio-import');
-    const exportButton = tool('导出 BPMN', '导出当前流程 XML', () => this._exportBpmn(), 'nova-studio-export is-primary');
+    const exportMenu = node('div', 'nova-studio-export-menu');
+    const exportButton = node('button', 'nova-studio-tool nova-studio-export is-primary');
+    exportButton.type = 'button';
+    exportButton.title = '导出当前内容';
+    exportButton.append(node('span', '', '导出'), iconNode('ui.chevron', 'nova-icon nova-icon-xs'));
+    const exportPopover = node('div', 'nova-studio-export-popover is-hidden');
+    const exportSvgButton = node('button', 'nova-studio-export-option');
+    exportSvgButton.type = 'button';
+    exportSvgButton.append(iconNode('ui.preview'), node('strong', '', '导出 SVG'), node('small', '', '预览确认后下载'));
+    exportSvgButton.addEventListener('click', () => {
+      exportPopover.classList.add('is-hidden');
+      exportButton.focus({ preventScroll: true });
+      this.openSvgExportPreview();
+    });
+    const exportBpmnButton = node('button', 'nova-studio-export-option');
+    exportBpmnButton.type = 'button';
+    exportBpmnButton.append(iconNode('ui.design'), node('strong', '', '导出 BPMN'), node('small', '', '下载流程 XML'));
+    exportBpmnButton.addEventListener('click', () => {
+      exportPopover.classList.add('is-hidden');
+      this._exportBpmn();
+    });
+    exportPopover.append(exportSvgButton, exportBpmnButton);
+    exportButton.addEventListener('click', (event) => {
+      event.stopPropagation();
+      exportPopover.classList.toggle('is-hidden');
+    });
+    exportMenu.append(exportButton, exportPopover);
+    tools.appendChild(exportMenu);
     importInput.addEventListener('change', async () => {
       const file = importInput.files?.[0];
       if (!file) return;
@@ -275,7 +306,10 @@ export class BpmnStudioShell {
       _projectionSwitch: projectionSwitch,
       _projectionButtons: projectionButtons,
       _viewportTools: viewportTools,
-      _designControls: [undo, redo, beautifySplit, validateButton, importButton, exportButton],
+      _designControls: [undo, redo, beautifySplit, validateButton, importButton],
+      _exportMenu: exportMenu,
+      _exportPopover: exportPopover,
+      _exportBpmnButton: exportBpmnButton,
       _defaultContext: context,
       _defaultMount: mount,
       _usesDefaultProperties: !this.slots.right,
@@ -319,6 +353,7 @@ export class BpmnStudioShell {
     this._setStatus(`${initialGraph.nodes.length} 节点 · ${initialGraph.edges.length} 连线`, 'ok');
     const closeBeautify = (event) => {
       if (!beautifySplit.contains(event.target)) beautifyMenu.classList.add('is-hidden');
+      if (!exportMenu.contains(event.target)) exportPopover.classList.add('is-hidden');
     };
     document.addEventListener('click', closeBeautify);
     this._cleanups.push(() => document.removeEventListener('click', closeBeautify));
@@ -391,6 +426,7 @@ export class BpmnStudioShell {
     this._floatingHead?.classList.toggle('is-hidden', readonly);
     this._designControls?.forEach((control) => control.classList.toggle('is-hidden-by-mode', readonly));
     this._projectionSwitch?.classList.toggle('is-hidden', mode !== 'instance');
+    this._exportBpmnButton?.classList.toggle('is-hidden', mode !== 'design');
     this._syncProjectionButtons();
     this._body?.classList.remove('is-timeline');
 
@@ -418,6 +454,7 @@ export class BpmnStudioShell {
         runtimePresenter: this.rendererOptions.runtimePresenter,
         runtimeTraceProjector: this.rendererOptions.runtimeTraceProjector,
         runtimeAssetResolver: this.rendererOptions.runtimeAssetResolver,
+        svgExport: this.svgExport,
         runtimeTimelineRenderer: this.slots.runtimeTimeline
           ? (timeline) => mountSlot(this.slots.runtimeTimeline, timeline.container, { ...timeline, studio: this.studio, shell: this })
           : this.rendererOptions.runtimeTimelineRenderer,
@@ -544,6 +581,35 @@ export class BpmnStudioShell {
   }
   fitView() { this._fitActive(); }
   zoomBy(factor) { this._zoomActive(factor); }
+  exportSvg(options) {
+    const active = this.canvas || this.viewer;
+    if (!active?.exportSvg) return Promise.reject(new Error('当前视图不支持 SVG 导出。'));
+    const label = this.mode === 'design' ? '流程设计' : this.mode === 'viewer' ? '流程展示' : this.viewer?.activeProjection === 'compact' ? '移动时间线' : this.viewer?.activeProjection === 'approval' ? '实际路径' : '完整 BPMN';
+    const filename = options?.filename || this.svgExport?.filename || `${this.studio.model.name || this.studio.model.id}-${label}`;
+    return active.exportSvg({ label, ...(options || {}), filename });
+  }
+  openSvgExportPreview(options = {}) {
+    if (this._svgExportPreview && !this._svgExportPreview.closed) {
+      this._svgExportPreview.focus();
+      return this._svgExportPreview;
+    }
+    const active = this.canvas || this.viewer;
+    if (!active?.exportSvg) return null;
+    const label = this.mode === 'design' ? '流程设计' : this.mode === 'viewer' ? '流程展示' : this.viewer?.activeProjection === 'compact' ? '移动时间线' : this.viewer?.activeProjection === 'approval' ? '实际路径' : '完整 BPMN';
+    const filename = options.filename || this.svgExport?.filename || `${this.studio.model.name || this.studio.model.id}-${label}`;
+    this._svgExportPreview = openSvgExportPreview({
+      container: this.container,
+      title: options.previewTitle || `导出 ${label} SVG`,
+      initialTheme: options.theme || 'current',
+      createArtifact: (previewOptions) => this.exportSvg({ label, ...options, ...previewOptions, filename }),
+      onClose: () => { this._svgExportPreview = null; },
+      onDownload: (artifact) => {
+        this._setStatus(`SVG 已导出：${artifact.filename}`, 'ok');
+        options.onDownload?.(artifact);
+      },
+    });
+    return this._svgExportPreview;
+  }
 
   _setStatus(message, tone = 'ok') {
     if (!this._statusText || !this._statusDot) return;
@@ -583,7 +649,12 @@ export class BpmnStudioShell {
       selectionToolbar: options.selectionToolbar ?? this.slots.selectionToolbar ?? null,
       contextMenu: options.contextMenu ?? this.slots.contextMenu ?? null,
       contextMenuRegistry: options.contextMenuRegistry ?? this.contextMenuRegistry,
-      rendererOptions: { iconRegistry: this.iconRegistry, ...this.rendererOptions, ...(options.rendererOptions || {}) },
+      rendererOptions: {
+        iconRegistry: this.iconRegistry,
+        ...this.rendererOptions,
+        svgExport: this.svgExport,
+        ...(options.rendererOptions || {}),
+      },
       themeController: this.themeController,
     });
     this._instances.push(instance); return instance;
@@ -597,6 +668,8 @@ export class BpmnStudioShell {
     instance.render(); this._instances.push(instance); return instance;
   }
   destroy() {
+    this._svgExportPreview?.close?.({ immediate: true });
+    this._svgExportPreview = null;
     this._cleanups.splice(0).reverse().forEach((cleanup) => cleanup?.());
     this._instances.splice(0).reverse().forEach((instance) => instance.destroy?.());
     this.container.innerHTML = '';

package/dist/styles.css

@@ -1,4 +1,4 @@
-/* @bpmn-nova/theme */
+/* @bpmn-nova/internal/theme */
 [data-nova-theme] {
   accent-color: var(--nova-color-primary);
 }
@@ -149,7 +149,7 @@
   --nova-tone-manual-task-strong: #dc876f;
 }
 
-/* @bpmn-nova/icons */
+/* @bpmn-nova/internal/icons */
 .nova-icon { width: 16px; height: 16px; display: inline-grid; place-items: center; flex: none; color: currentColor; line-height: 0; transform-origin: 50% 50%; }
 .nova-icon.nova-icon-xs { width: 12px; height: 12px; }
 .nova-icon.nova-icon-sm { width: 14px; height: 14px; }
@@ -157,7 +157,97 @@
 .nova-icon > .nova-icon-svg { width: 100%; height: 100%; display: block; overflow: visible; fill: none; stroke: currentColor; vector-effect: non-scaling-stroke; }
 .nova-icon[data-icon-missing="true"] { visibility: hidden; }
 
-/* @bpmn-nova/renderer-svg */
+/* @bpmn-nova/internal/export-svg */
+.nova-svg-export-preview {
+  position: absolute;
+  inset: 0;
+  z-index: 140;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+  box-sizing: border-box;
+  background: var(--nova-color-backdrop, rgba(20, 26, 39, .38));
+  color: var(--nova-color-text, #1f2430);
+  font-family: var(--nova-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif);
+  opacity: 1;
+  transition: opacity .18s ease;
+}
+.nova-svg-export-preview.is-entering,
+.nova-svg-export-preview.is-closing { opacity: 0; }
+.nova-svg-export-dialog {
+  width: min(1120px, 100%);
+  height: min(820px, 100%);
+  min-height: 420px;
+  display: grid;
+  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
+  overflow: hidden;
+  border: 1px solid var(--nova-color-border, #e1e5ec);
+  border-radius: 16px;
+  background: var(--nova-color-surface, #fff);
+  box-shadow: var(--nova-shadow-lg, 0 18px 52px rgba(22, 29, 48, .2));
+  transform: translateY(0) scale(1);
+  transition: transform .2s cubic-bezier(.2, .8, .2, 1);
+}
+.nova-svg-export-preview.is-entering .nova-svg-export-dialog,
+.nova-svg-export-preview.is-closing .nova-svg-export-dialog { transform: translateY(10px) scale(.985); }
+.nova-svg-export-header,
+.nova-svg-export-toolbar,
+.nova-svg-export-footer { display: flex; align-items: center; gap: 12px; padding: 14px 18px; }
+.nova-svg-export-header { justify-content: space-between; border-bottom: 1px solid var(--nova-color-divider, #e9ecf2); }
+.nova-svg-export-heading { display: grid; gap: 3px; }
+.nova-svg-export-heading strong { font-size: 17px; }
+.nova-svg-export-heading span { color: var(--nova-color-text-muted); font-size: 12px; }
+.nova-svg-export-close { width: 34px; height: 34px; border: 0; border-radius: 9px; background: transparent; color: var(--nova-color-text-muted); font-size: 24px; line-height: 1; cursor: pointer; }
+.nova-svg-export-close:hover { background: var(--nova-color-surface-muted); color: var(--nova-color-text); }
+.nova-svg-export-toolbar { justify-content: space-between; flex-wrap: wrap; background: var(--nova-color-surface-subtle); border-bottom: 1px solid var(--nova-color-divider); }
+.nova-svg-export-theme,
+.nova-svg-export-viewport-tools { display: inline-flex; align-items: center; gap: 3px; padding: 3px; border-radius: 9px; background: var(--nova-color-surface); border: 1px solid var(--nova-color-border); }
+.nova-svg-export-theme button,
+.nova-svg-export-viewport-tools button { min-height: 28px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--nova-color-text-secondary); cursor: pointer; }
+.nova-svg-export-theme button.is-active { background: var(--nova-color-primary-soft); color: var(--nova-color-primary); font-weight: 650; }
+.nova-svg-export-theme button:focus-visible,
+.nova-svg-export-viewport-tools button:focus-visible,
+.nova-svg-export-actions button:focus-visible,
+.nova-svg-export-close:focus-visible,
+.nova-svg-export-viewport:focus-visible { outline: 2px solid var(--nova-color-focus-ring); outline-offset: 2px; }
+.nova-svg-export-transparent { display: inline-flex; align-items: center; gap: 7px; color: var(--nova-color-text-secondary); font-size: 12px; cursor: pointer; }
+.nova-svg-export-viewport-tools span { min-width: 46px; text-align: center; color: var(--nova-color-text-muted); font-size: 11px; }
+.nova-svg-export-body { position: relative; min-height: 0; overflow: hidden; background: var(--nova-color-canvas); }
+.nova-svg-export-viewport { position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: none; background-color: var(--nova-color-canvas); background-image: linear-gradient(45deg, color-mix(in srgb, var(--nova-color-border) 35%, transparent) 25%, transparent 25%), linear-gradient(-45deg, color-mix(in srgb, var(--nova-color-border) 35%, transparent) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, color-mix(in srgb, var(--nova-color-border) 35%, transparent) 75%), linear-gradient(-45deg, transparent 75%, color-mix(in srgb, var(--nova-color-border) 35%, transparent) 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0; }
+.nova-svg-export-viewport.is-dragging { cursor: grabbing; }
+.nova-svg-export-stage { position: absolute; left: 0; top: 0; width: 1px; height: 1px; transform-origin: 0 0; will-change: transform; }
+.nova-svg-export-image { display: block; max-width: none; user-select: none; pointer-events: none; box-shadow: 0 6px 24px rgba(0, 0, 0, .14); }
+.nova-svg-export-state { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; background: color-mix(in srgb, var(--nova-color-surface) 88%, transparent); color: var(--nova-color-text-secondary); }
+.nova-svg-export-state[hidden] { display: none; }
+.nova-svg-export-state.is-error { color: var(--nova-tone-danger-foreground); }
+.nova-svg-export-spinner { width: 24px; height: 24px; border: 2px solid var(--nova-color-border); border-top-color: var(--nova-color-primary); border-radius: 50%; animation: nova-svg-export-spin .8s linear infinite; }
+.nova-svg-export-state.is-error .nova-svg-export-spinner { display: none; }
+@keyframes nova-svg-export-spin { to { transform: rotate(360deg); } }
+.nova-svg-export-warnings { max-height: 110px; overflow: auto; padding: 10px 18px; border-top: 1px solid var(--nova-tone-warning-border); background: var(--nova-tone-warning-background); color: var(--nova-tone-warning-foreground); font-size: 11px; }
+.nova-svg-export-warnings[hidden] { display: none; }
+.nova-svg-export-warnings strong { display: block; margin-bottom: 4px; }
+.nova-svg-export-warnings ul { margin: 0; padding-left: 18px; }
+.nova-svg-export-footer { justify-content: space-between; border-top: 1px solid var(--nova-color-divider); }
+.nova-svg-export-summary { min-width: 0; overflow: hidden; color: var(--nova-color-text-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
+.nova-svg-export-actions { display: flex; gap: 8px; }
+.nova-svg-export-actions button { min-height: 34px; padding: 0 14px; border: 1px solid var(--nova-color-border); border-radius: 9px; background: var(--nova-color-surface); color: var(--nova-color-text-secondary); cursor: pointer; }
+.nova-svg-export-actions button.is-primary { border-color: var(--nova-color-primary); background: var(--nova-color-primary); color: var(--nova-color-text-inverse, #fff); }
+.nova-svg-export-actions button:disabled { opacity: .48; cursor: not-allowed; }
+@media (max-width: 720px) {
+  .nova-svg-export-preview { padding: 10px; }
+  .nova-svg-export-dialog { width: 100%; height: 100%; min-height: 0; border-radius: 12px; }
+  .nova-svg-export-toolbar { align-items: flex-start; }
+  .nova-svg-export-viewport-tools { order: 3; width: 100%; justify-content: center; }
+  .nova-svg-export-summary { display: none; }
+  .nova-svg-export-footer { justify-content: flex-end; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .nova-svg-export-preview,
+  .nova-svg-export-dialog { transition: none; }
+  .nova-svg-export-spinner { animation: none; }
+}
+
+/* @bpmn-nova/internal/renderer-svg */
 .mb-diagram-host,
 .mb-runtime-timeline-host {
   --mb-primary: var(--nova-color-primary, #635bff);
@@ -898,7 +988,7 @@ button.mb-runtime-action-summary:hover, button.mb-runtime-action-summary:focus-v
   height: 100%;
 }
 
-/* @bpmn-nova/palette */
+/* @bpmn-nova/internal/palette */
 .nova-palette { height: 100%; overflow: auto; padding: 10px; color: var(--nova-color-text, #243047); background: var(--nova-color-surface, #fff); }
 .nova-palette-section { border-bottom: 1px solid var(--nova-color-divider, #edf0f5); padding: 3px 0 8px; }
 .nova-palette-section-toggle { width: 100%; min-height: 34px; border: 0; background: transparent; display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 6px; color: inherit; cursor: pointer; text-align: left; }
@@ -917,7 +1007,7 @@ button.mb-runtime-action-summary:hover, button.mb-runtime-action-summary:focus-v
 .nova-palette-item-copy strong { font-size: var(--nova-font-size-sm, 12px); line-height: 18px; font-weight: var(--nova-font-weight-semibold, 600); }
 .nova-palette-item-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--nova-color-text-muted, #919aad); font-size: var(--nova-font-size-xs, 10px); line-height: 14px; }
 
-/* @bpmn-nova/properties-renderer */
+/* @bpmn-nova/internal/properties-renderer */
 .nova-properties { min-height: 100%; color: var(--nova-color-text); background: var(--nova-color-surface); color-scheme: inherit; }
 .properties-head { position: sticky; top: 0; z-index: 5; padding: 15px 16px 12px; border-bottom: 1px solid var(--nova-color-divider, #e7eaf1); background: color-mix(in srgb, var(--nova-color-surface) 97%, transparent); backdrop-filter: blur(10px); }
 .properties-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
@@ -1049,8 +1139,8 @@ textarea.property-control { resize: vertical; }
 .property-branch-target { min-width: 0; flex: 1; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 5px; }
 .property-branch-target small { color: var(--nova-color-text-muted); font-size: var(--nova-font-size-xs, 10px); line-height: 14px; }.property-branch-target strong { overflow: hidden; color: var(--nova-color-text-secondary); font-size: var(--nova-font-size-sm, 12px); line-height: 18px; font-weight: var(--nova-font-weight-semibold, 600); text-overflow: ellipsis; white-space: nowrap; }.property-branch-target > span { color: var(--nova-color-primary); font-size: var(--nova-font-size-sm, 12px); }
 
-/* @bpmn-nova/studio */
-.nova-studio-shell { --nova-left-width: 244px; --nova-right-width: 360px; --nova-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif; --nova-font-size-xs: 10px; --nova-font-size-sm: 12px; --nova-font-size-md: 14px; --nova-font-size-lg: 16px; --nova-font-weight-regular: 400; --nova-font-weight-medium: 500; --nova-font-weight-semibold: 600; --nova-font-weight-bold: 700; width: 100%; height: 100%; min-height: 520px; overflow: hidden; display: grid; grid-template-rows: 58px minmax(0, 1fr); color: var(--nova-color-text, #263148); background: var(--nova-color-canvas, #f6f7fb); font-family: var(--nova-font-family); }
+/* @bpmn-nova/internal/studio */
+.nova-studio-shell { --nova-left-width: 244px; --nova-right-width: 360px; --nova-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif; --nova-font-size-xs: 10px; --nova-font-size-sm: 12px; --nova-font-size-md: 14px; --nova-font-size-lg: 16px; --nova-font-weight-regular: 400; --nova-font-weight-medium: 500; --nova-font-weight-semibold: 600; --nova-font-weight-bold: 700; position: relative; isolation: isolate; width: 100%; height: 100%; min-height: 520px; overflow: hidden; display: grid; grid-template-rows: 58px minmax(0, 1fr); color: var(--nova-color-text, #263148); background: var(--nova-color-canvas, #f6f7fb); font-family: var(--nova-font-family); }
 .nova-studio-header { min-width: 0; border-bottom: 1px solid var(--nova-color-divider, #e4e8f0); background: var(--nova-color-surface, #fff); display: grid; grid-template-columns: minmax(180px, auto) auto minmax(0, 1fr); align-items: center; gap: 18px; padding: 0 12px 0 14px; }
 .nova-studio-brand { min-width: 0; display: flex; align-items: center; gap: 10px; }
 .nova-studio-brand-mark { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--nova-color-text-inverse, #fff); background: linear-gradient(145deg, var(--nova-color-primary, #5362da), var(--nova-color-primary-hover)); font-size: var(--nova-font-size-md); font-weight: var(--nova-font-weight-bold); box-shadow: var(--nova-shadow-sm); }
@@ -1076,6 +1166,17 @@ textarea.property-control { resize: vertical; }
 .nova-studio-tool.is-primary { border-color: var(--nova-color-primary); color: var(--nova-color-text-inverse, #fff); background: var(--nova-color-primary, #5361d6); }
 .nova-studio-tool.is-primary:hover { border-color: var(--nova-color-primary-hover); color: var(--nova-color-text-inverse, #fff); background: var(--nova-color-primary-hover); }
 .nova-studio-tool:disabled { opacity: .4; cursor: default; }
+.nova-studio-export-menu { position: relative; flex: none; }
+.nova-studio-export-menu > .nova-studio-tool { display: inline-flex; align-items: center; gap: 7px; }
+.nova-studio-export-popover { position: absolute; z-index: 90; top: calc(100% + 8px); right: 0; width: 220px; padding: 6px; border: 1px solid var(--nova-color-border); border-radius: 11px; background: var(--nova-color-surface-raised); box-shadow: var(--nova-shadow-md); }
+.nova-studio-export-popover.is-hidden { display: none; }
+.nova-studio-export-option { width: 100%; display: grid; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 9px; padding: 9px; border: 0; border-radius: 8px; background: transparent; color: var(--nova-color-text); text-align: left; cursor: pointer; }
+.nova-studio-export-option:hover { background: var(--nova-color-surface-muted); }
+.nova-studio-export-option:focus-visible { outline: 2px solid var(--nova-color-focus-ring); outline-offset: -2px; }
+.nova-studio-export-option > .nova-icon { grid-row: 1 / span 2; align-self: center; color: var(--nova-color-primary); }
+.nova-studio-export-option strong { font-size: var(--nova-font-size-sm, 12px); }
+.nova-studio-export-option small { color: var(--nova-color-text-muted); font-size: var(--nova-font-size-xs, 10px); }
+.nova-studio-export-option.is-hidden { display: none; }
 .nova-studio-import-input { display: none; }
 .nova-studio-beautify-split { position: relative; flex: none; display: flex; }
 .nova-studio-beautify-split .nova-studio-beautify { border-radius: 7px 0 0 7px; }