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

package/dist/modules/viewer/index.js

@@ -0,0 +1,1011 @@
+import { cloneModel, createEdge, getScopeGraph, NODE_DEFINITIONS } from '../core/index.js';
+import { createDefaultIconRegistry, createIconElement } from '../icons/index.js';
+import { DiagramRenderer } from '../renderer-svg/index.js';
+import { createRuntimePresentation, normalizeRuntime } from '../runtime/index.js';
+import { createRuntimeTraceProjection } from './runtime-trace.js';
+import { renderDefaultRuntimeTimeline, RuntimeTimelineHost } from './timeline.js';
+import { renderRuntimeApprovalContent } from './runtime-content.js';
+import { createRuntimeDetailsMotionController } from './runtime-details-motion.js';
+import { ThemeController, applyRuntimeTone, createRuntimeAppearance } from '../theme/index.js';
+import { exportRuntimeTimelineSvg, openSvgExportPreview } from '../export-svg/index.js';
+export { createRuntimeTraceProjection } from './runtime-trace.js';
+export { renderDefaultRuntimeTimeline } from './timeline.js';
+export { formatRuntimeAssetSize, renderRuntimeApprovalContent } from './runtime-content.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 outcomeLabel(outcome) {
+  return { approved: '通过', rejected: '驳回', returned: '退回', submitted: '提交', pending: '待处理' }[outcome] || outcome || '';
+}
+
+const defaultDetailsIconRegistry = createDefaultIconRegistry();
+
+function runtimeDetailsCloseButton({ viewer, label, close }) {
+  const button = element('button', 'mb-runtime-details-close');
+  button.type = 'button';
+  button.title = label;
+  button.setAttribute('aria-label', label);
+  const iconHost = element('span', 'nova-icon nova-icon-md');
+  const iconRegistry = viewer?.renderer?.iconRegistry || defaultDetailsIconRegistry;
+  const icon = createIconElement(iconRegistry.resolve('ui.close', null), { className: 'nova-icon-svg' });
+  if (icon) iconHost.appendChild(icon);
+  button.appendChild(iconHost);
+  button.addEventListener('click', close);
+  return button;
+}
+
+function renderRuntimeAction({ container, viewer, action, resolveAsset, compact = false }) {
+  const appearance = viewer?.runtimeAppearance?.resolveAction(action) || { label: action.label, tone: 'neutral' };
+  const article = element('article', `mb-runtime-action type-${action.type}${compact ? ' is-compact' : ''}`);
+  article.dataset.runtimeActionId = action.id;
+  applyRuntimeTone(article, appearance.tone);
+  const header = element('header', 'mb-runtime-action-head');
+  const heading = element('div', 'mb-runtime-action-heading');
+  heading.append(
+    element('strong', '', action.actor?.name || '系统'),
+    element('em', '', appearance.label),
+  );
+  header.appendChild(heading);
+  if (action.occurredAt) header.appendChild(element('time', '', action.occurredAt));
+  article.appendChild(header);
+  if (action.targets?.length) article.appendChild(element('div', 'mb-runtime-action-targets', `目标：${action.targets.map((target) => target.name).join('、')}`));
+  if (action.targetElementId && !action.targets?.length) article.appendChild(element('div', 'mb-runtime-action-targets', `目标节点：${action.targetElementId}`));
+  renderRuntimeApprovalContent({
+    container: article,
+    action,
+    resolveAsset,
+    compact,
+    onPreview: (asset, sourceAction) => viewer?._openRuntimeAssetPreview(asset, sourceAction),
+  });
+  container.appendChild(article);
+  return article;
+}
+
+export function renderDefaultRuntimeDetails({ container, viewer, node, presentation, close, resolveAsset }) {
+  const popover = element('section', 'mb-runtime-details-popover');
+  popover.setAttribute('role', 'dialog');
+  popover.setAttribute('aria-label', `${node.name || '节点'}审批详情`);
+  popover.tabIndex = -1;
+  const header = element('header', 'mb-runtime-details-head');
+  const heading = element('div', 'mb-runtime-details-heading');
+  heading.append(element('strong', '', node.name || '节点详情'), element('span', '', presentation.round > 1 ? `第 ${presentation.round} 次处理` : '审批轨迹'));
+  const status = element('em', `status-${presentation.status}`, presentation.statusLabel);
+  applyRuntimeTone(status, viewer?.runtimeAppearance?.resolveStatus(presentation.status));
+  const closeButton = runtimeDetailsCloseButton({ viewer, label: '关闭审批详情', close });
+  header.append(heading, status, closeButton);
+  popover.appendChild(header);
+
+  if (presentation.approvalMode || presentation.total > 1) {
+    const mode = presentation.approvalMode === 'all' ? (presentation.multiInstanceMode === 'sequential' ? '顺序会签' : '会签') : presentation.approvalMode === 'any' ? '或签' : '多人审批';
+    const summary = element('div', 'mb-runtime-details-progress');
+    summary.append(element('span', '', mode), element('strong', '', `${presentation.completed}/${presentation.total || presentation.required}`));
+    popover.appendChild(summary);
+  }
+
+  const body = element('div', 'mb-runtime-details-body');
+  const appendRecord = (record) => {
+    const row = element('article', 'mb-runtime-details-person');
+    const avatar = element('span', 'mb-runtime-details-avatar', (record.participant?.name || record.assignee || '?').slice(0, 1));
+    if (record.participant?.avatarUrl) {
+      avatar.textContent = '';
+      const image = document.createElement('img');
+      image.src = record.participant.avatarUrl;
+      image.alt = '';
+      avatar.appendChild(image);
+    }
+    const copy = element('div', 'mb-runtime-details-person-copy');
+    const title = element('div', 'mb-runtime-details-person-title');
+    const recordStatus = element('em', `status-${record.status}`, outcomeLabel(record.outcome) || presentation.statusLabel);
+    applyRuntimeTone(recordStatus, viewer?.runtimeAppearance?.resolveStatus(record.status));
+    title.append(element('strong', '', record.participant?.name || record.assignee || '待分配审批人'), recordStatus);
+    copy.appendChild(title);
+    const time = [record.startTime, record.endTime].filter(Boolean).join(' — ');
+    if (time) copy.appendChild(element('time', '', time));
+    row.append(avatar, copy);
+    body.appendChild(row);
+  };
+  const visits = [...presentation.visits].reverse();
+  const renderedActionIds = new Set();
+  if (!visits.length) body.appendChild(element('div', 'mb-runtime-details-empty', presentation.summary || presentation.statusLabel));
+  visits.forEach((visit) => {
+    if (presentation.visits.length > 1) body.appendChild(element('div', 'mb-runtime-details-round', `第 ${visit.round} 次处理`));
+    [...visit.records].reverse().forEach(appendRecord);
+    [...visit.actions].reverse().forEach((action) => {
+      renderRuntimeAction({ container: body, viewer, action, resolveAsset });
+      renderedActionIds.add(action.id);
+    });
+  });
+  [...presentation.actions].reverse().filter((action) => !renderedActionIds.has(action.id)).forEach((action) => {
+    renderRuntimeAction({ container: body, viewer, action, resolveAsset });
+    renderedActionIds.add(action.id);
+  });
+
+  const abnormal = [...presentation.transitions].filter((item) => ['reject', 'return'].includes(item.type)).reverse();
+  abnormal.forEach((transition) => {
+    const block = element('article', `mb-runtime-details-transition type-${transition.type}`);
+    applyRuntimeTone(block, viewer?.runtimeAppearance?.resolveTransition(transition).tone);
+    block.appendChild(element('strong', '', transition.type === 'reject' ? `驳回至 ${transition.targetName || transition.targetElementId}` : `退回至 ${transition.targetName || transition.targetElementId}`));
+    const meta = [transition.operator, transition.occurredAt || transition.time].filter(Boolean).join(' · ');
+    if (meta) block.appendChild(element('span', '', meta));
+    if (transition.action && !renderedActionIds.has(transition.action.id)) {
+      renderRuntimeApprovalContent({
+        container: block,
+        action: transition.action,
+        resolveAsset,
+        onPreview: (asset, action) => viewer?._openRuntimeAssetPreview(asset, action),
+      });
+    } else if (!transition.action && transition.comment) block.appendChild(element('p', '', transition.comment));
+    body.appendChild(block);
+  });
+  popover.appendChild(body);
+  container.appendChild(popover);
+  requestAnimationFrame(() => popover.focus({ preventScroll: true }));
+  return () => popover.remove();
+}
+
+export function renderDefaultRuntimeTransitionDetails({
+  container,
+  viewer,
+  transition,
+  sourceNode,
+  targetNode,
+  close,
+  locateSource,
+  locateTarget,
+  resolveAsset,
+}) {
+  const actionLabel = transition.type === 'return' ? '退回' : '驳回';
+  const popover = element('section', 'mb-runtime-details-popover mb-runtime-transition-details');
+  popover.setAttribute('role', 'dialog');
+  popover.setAttribute('aria-label', `${sourceNode?.name || transition.sourceName || '节点'}${actionLabel}记录`);
+  popover.tabIndex = -1;
+
+  const header = element('header', 'mb-runtime-details-head');
+  const heading = element('div', 'mb-runtime-details-heading');
+  heading.append(
+    element('strong', '', sourceNode?.name || transition.sourceName || '驳回记录'),
+    element('span', '', `${actionLabel}记录`),
+  );
+  const status = element('em', 'status-rejected', `已${actionLabel}`);
+  applyRuntimeTone(status, viewer?.runtimeAppearance?.resolveTransition(transition).tone);
+  const closeButton = runtimeDetailsCloseButton({ viewer, label: `关闭${actionLabel}详情`, close });
+  header.append(heading, status, closeButton);
+
+  const body = element('div', 'mb-runtime-details-body');
+  const actor = element('article', 'mb-runtime-transition-actor');
+  const actorName = transition.action?.actor?.name || transition.operator || '未知处理人';
+  const avatar = element('span', 'mb-runtime-details-avatar', actorName.slice(0, 1));
+  const actorCopy = element('div', 'mb-runtime-details-person-copy');
+  const actorTitle = element('div', 'mb-runtime-details-person-title');
+  const actorStatus = element('em', 'status-rejected', actionLabel);
+  applyRuntimeTone(actorStatus, viewer?.runtimeAppearance?.resolveTransition(transition).tone);
+  actorTitle.append(
+    element('strong', '', actorName),
+    actorStatus,
+  );
+  actorCopy.appendChild(actorTitle);
+  const time = transition.action?.occurredAt || transition.occurredAt || transition.time;
+  if (time) actorCopy.appendChild(element('time', '', time));
+  actor.append(avatar, actorCopy);
+  body.appendChild(actor);
+
+  const target = element('article', `mb-runtime-details-transition type-${transition.type}`);
+  applyRuntimeTone(target, viewer?.runtimeAppearance?.resolveTransition(transition).tone);
+  target.appendChild(element('strong', '', `${actionLabel}至 ${targetNode?.name || transition.targetName || transition.targetElementId}`));
+  if (transition.action) {
+    renderRuntimeApprovalContent({
+      container: target,
+      action: transition.action,
+      resolveAsset,
+      onPreview: (asset, action) => viewer?._openRuntimeAssetPreview(asset, action),
+    });
+  } else if (transition.comment) target.appendChild(element('p', '', transition.comment));
+  body.appendChild(target);
+
+  if (transition.issues?.length) {
+    const warning = element('div', 'mb-runtime-transition-warning');
+    transition.issues.forEach((issue) => warning.appendChild(element('p', '', issue)));
+    body.appendChild(warning);
+  }
+
+  const footer = element('footer', 'mb-runtime-transition-actions');
+  const sourceButton = element('button', '', '定位来源');
+  sourceButton.type = 'button';
+  sourceButton.disabled = !sourceNode;
+  sourceButton.addEventListener('click', locateSource);
+  const targetButton = element('button', '', '定位目标');
+  targetButton.type = 'button';
+  targetButton.disabled = !targetNode;
+  targetButton.addEventListener('click', locateTarget);
+  footer.append(sourceButton, targetButton);
+
+  popover.append(header, body, footer);
+  container.appendChild(popover);
+  requestAnimationFrame(() => popover.focus({ preventScroll: true }));
+  return () => popover.remove();
+}
+
+function buildVisibleGraph(model, predicate, orientation = 'horizontal') {
+  const visible = new Set(model.nodes.filter(predicate).map((n) => n.id));
+  const outgoing = new Map(model.nodes.map((n) => [n.id, []]));
+  for (const edge of model.edges) {
+    if (outgoing.has(edge.source)) outgoing.get(edge.source).push(edge);
+  }
+
+  const copy = cloneModel(model);
+  copy.nodes = model.nodes.filter((n) => visible.has(n.id)).map((n) => cloneModel(n));
+  copy.edges = [];
+
+  for (const source of copy.nodes) {
+    const queue = (outgoing.get(source.id) || []).map((edge) => ({ nodeId: edge.target, edges: [edge.id], trail: [source.id] }));
+    const seen = new Set();
+    while (queue.length) {
+      const item = queue.shift();
+      if (item.trail.includes(item.nodeId)) continue;
+      const key = `${item.nodeId}|${item.trail.join('>')}`;
+      if (seen.has(key)) continue;
+      seen.add(key);
+      if (visible.has(item.nodeId)) {
+        if (item.nodeId !== source.id && !copy.edges.some((e) => e.source === source.id && e.target === item.nodeId)) {
+          const first = model.edges.find((e) => e.id === item.edges[0]);
+          copy.edges.push(createEdge(source.id, item.nodeId, {
+            id: `Projected_${source.id}_${item.nodeId}`,
+            name: first?.name || '',
+            condition: first?.condition || '',
+            sourceEdgeIds: item.edges,
+          }));
+        }
+        continue;
+      }
+      for (const edge of outgoing.get(item.nodeId) || []) queue.push({ nodeId: edge.target, edges: [...item.edges, edge.id], trail: [...item.trail, item.nodeId] });
+    }
+  }
+
+  const sorted = [...copy.nodes].sort((a, b) => (a.x - b.x) || (a.y - b.y));
+  const startX = 110;
+  const startY = 150;
+  const gap = orientation === 'vertical' ? 104 : 260;
+  sorted.forEach((node, index) => {
+    const def = NODE_DEFINITIONS[node.type] || NODE_DEFINITIONS.generic;
+    if (orientation === 'vertical') {
+      node.x = 180;
+      node.y = startY + index * gap;
+      if (def.kind === 'task') { node.width = 260; node.height = 74; }
+    } else {
+      node.x = startX + index * gap;
+      node.y = 260;
+      if (def.kind === 'task') { node.width = 210; node.height = 78; }
+    }
+  });
+  copy.edges.forEach((e) => { e.waypoints = null; });
+  return copy;
+}
+
+export function projectModel(model, projection = 'standard') {
+  const rootGraph = getScopeGraph(model, model.id);
+  if (projection === 'approval') {
+    return buildVisibleGraph(rootGraph, (n) => { const def = NODE_DEFINITIONS[n.type] || {}; return ['start', 'end'].includes(def.eventStage) || ['userTask', 'callActivity'].includes(n.type); }, 'horizontal');
+  }
+  if (projection === 'compact') {
+    return buildVisibleGraph(rootGraph, (n) => { const def = NODE_DEFINITIONS[n.type] || {}; return ['start', 'end'].includes(def.eventStage) || ['userTask', 'callActivity'].includes(n.type); }, 'vertical');
+  }
+  return cloneModel(rootGraph);
+}
+
+function projectRuntime(runtime, projectedModel) {
+  if (!runtime) return null;
+  const normalized = normalizeRuntime(runtime);
+  const visited = new Set(normalized.visitedEdges);
+  const projectedVisited = [...normalized.visitedEdges];
+  for (const edge of projectedModel.edges) {
+    if (edge.sourceEdgeIds?.length && edge.sourceEdgeIds.every((id) => visited.has(id))) projectedVisited.push(edge.id);
+  }
+  const projectedEdgeVisits = [...(normalized.edgeVisits || [])];
+  for (const edge of projectedModel.edges) {
+    if (!edge.sourceEdgeIds?.length) continue;
+    const visits = edge.sourceEdgeIds
+      .map((id) => normalized.edgeVisits?.filter((visit) => visit.edgeId === id).at(-1))
+      .filter(Boolean);
+    if (visits.length === edge.sourceEdgeIds.length) {
+      const latest = visits.sort((a, b) => String(a.occurredAt || a.time || '').localeCompare(String(b.occurredAt || b.time || ''))).at(-1);
+      projectedEdgeVisits.push({ ...latest, id: `ProjectedVisit_${edge.id}`, edgeId: edge.id });
+    }
+  }
+  const transitions = normalized.transitions.map((transition) => ({
+    ...transition,
+    invalidatedEdgeIds: transition.invalidatedEdgeIds
+      ? [
+        ...transition.invalidatedEdgeIds,
+        ...projectedModel.edges
+          .filter((edge) => edge.sourceEdgeIds?.some((id) => transition.invalidatedEdgeIds.includes(id)))
+          .map((edge) => edge.id),
+      ]
+      : undefined,
+  }));
+  return { ...normalized, transitions, edgeVisits: projectedEdgeVisits, visitedEdges: projectedVisited };
+}
+
+const DEFAULT_TIMELINE_DESCRIPTION = '按实际处理顺序展示';
+const DEFAULT_RUNTIME_DETAILS_LAYOUT = Object.freeze({
+  desktop: Object.freeze({ placement: 'popover' }),
+  mobile: Object.freeze({ placement: 'bottom' }),
+});
+
+function mergeTimelineOptions(current = {}, patch = {}) {
+  return { ...current, ...patch };
+}
+
+function mergeRuntimeDetailsOptions(current = {}, patch = {}) {
+  return {
+    autoOpen: patch.autoOpen ?? current.autoOpen ?? true,
+    desktop: { ...(current.desktop || DEFAULT_RUNTIME_DETAILS_LAYOUT.desktop), ...(patch.desktop || {}) },
+    mobile: { ...(current.mobile || DEFAULT_RUNTIME_DETAILS_LAYOUT.mobile), ...(patch.mobile || {}) },
+  };
+}
+
+function cssLength(value, fallback) {
+  const resolved = value ?? fallback;
+  return typeof resolved === 'number' ? `${resolved}px` : String(resolved);
+}
+
+export class BpmnViewer {
+  constructor(options = {}) {
+    if (!options.container) throw new Error('BpmnViewer requires container.');
+    this.options = options;
+    this.container = options.container;
+    this.themeController = options.themeController || new ThemeController({ root: this.container, theme: options.theme, onChange: options.onThemeChange });
+    this._ownsThemeController = !options.themeController;
+    this.runtimeAppearanceOptions = options.runtimeAppearance || {};
+    this.runtimeAppearance = createRuntimeAppearance(this.runtimeAppearanceOptions);
+    this.model = options.model;
+    this.runtime = options.runtime ? normalizeRuntime(options.runtime) : null;
+    this.responsive = options.responsive === true;
+    this.projection = options.projection || (this.runtime && this.responsive ? 'auto' : this.runtime ? 'approval' : 'standard');
+    this.activeProjection = 'standard';
+    this.mode = this.runtime ? 'instance' : 'viewer';
+    this.onElementClick = options.onElementClick || (() => {});
+    this.onTraceClick = options.onTraceClick || (() => {});
+    this.runtimePresenter = options.runtimePresenter || ((context) => createRuntimePresentation(context));
+    this.runtimeTraceProjector = options.runtimeTraceProjector || ((context) => createRuntimeTraceProjection(context));
+    this.runtimeTimelineRenderer = options.runtimeTimelineRenderer || renderDefaultRuntimeTimeline;
+    this.runtimeAssetResolver = options.runtimeAssetResolver || null;
+    this.svgExportOptions = options.svgExport || {};
+    this._svgExportPreview = null;
+    this._svgExportAssetCache = new Map();
+    this.onRuntimeTraceItemClick = options.onRuntimeTraceItemClick || (() => {});
+    this.onProjectionChange = options.onProjectionChange || (() => {});
+    this.runtimeDetailsRenderer = options.runtimeDetailsRenderer === null ? null : (options.runtimeDetailsRenderer || renderDefaultRuntimeDetails);
+    this.onRuntimeDetailsOpen = options.onRuntimeDetailsOpen || (() => {});
+    this.runtimeTransitionDetailsRenderer = options.runtimeTransitionDetailsRenderer === null
+      ? null
+      : (options.runtimeTransitionDetailsRenderer || renderDefaultRuntimeTransitionDetails);
+    this.onRuntimeTransitionDetailsOpen = options.onRuntimeTransitionDetailsOpen || (() => {});
+    this.onViewportChange = options.onViewportChange || (() => {});
+    this.runtimeTraceOptions = { ...(options.runtimeTraceOptions || {}) };
+    this.timelineOptions = mergeTimelineOptions({}, options.timeline || {});
+    this.runtimeDetailsOptions = mergeRuntimeDetailsOptions({}, options.runtimeDetails || {});
+    this.traceProjection = null;
+    this.projectedModel = null;
+    this.projectedRuntime = null;
+    this.runtimePresentation = null;
+    this.selection = null;
+    this._detailsCleanup = null;
+    this._detailsMotion = null;
+    this._detailsRoot = null;
+    this._detailsAnchor = null;
+    this._detailsLayout = null;
+    this._detailsTarget = null;
+    this._detailsAnchorFocusVisible = false;
+    this._assetControllers = new Set();
+    this._assetPreviewRoot = null;
+    this._outsideHandler = (event) => {
+      if (!this._detailsRoot || this._detailsRoot.contains(event.target) || this._detailsAnchor?.contains?.(event.target) || this._assetPreviewRoot?.contains(event.target)) return;
+      this.closeRuntimeDetails();
+    };
+    this._keyHandler = (event) => {
+      if (event.key !== 'Escape') return;
+      if (this._assetPreviewRoot) this.closeRuntimeAssetPreview();
+      else this.closeRuntimeDetails();
+    };
+    document.addEventListener('pointerdown', this._outsideHandler, true);
+    document.addEventListener('keydown', this._keyHandler);
+    this._rebuildProjection();
+    this._mountRenderer();
+    this._resizeObserver = typeof ResizeObserver === 'function'
+      ? new ResizeObserver(() => {
+        if (this.projection !== 'auto') return;
+        const next = this._resolveProjection();
+        if (next !== this.activeProjection) this.refresh();
+      })
+      : null;
+    this._resizeObserver?.observe(options.container);
+  }
+
+  _resolveProjection() {
+    if (this.projection !== 'auto') return this.projection;
+    if (!this.runtime) return 'standard';
+    const width = this.container.clientWidth || this.container.getBoundingClientRect?.().width || 0;
+    return width > 0 && width < 720 ? 'compact' : 'approval';
+  }
+
+  _rebuildProjection() {
+    const previousProjection = this.activeProjection;
+    this.activeProjection = this._resolveProjection();
+    if (this.runtime && ['approval', 'compact'].includes(this.activeProjection)) {
+      const sourcePresentation = this.runtimePresenter({ model: this.model, runtime: this.runtime, appearance: this.runtimeAppearance });
+      this.traceProjection = this.runtimeTraceProjector({ model: this.model, runtime: this.runtime, presentation: sourcePresentation, options: this.runtimeTraceOptions });
+      this.projectedModel = this.traceProjection.graphModel;
+      this.projectedRuntime = this.traceProjection.graphRuntime;
+    } else {
+      this.traceProjection = null;
+      this.projectedModel = projectModel(this.model, this.activeProjection);
+      this.projectedRuntime = projectRuntime(this.runtime, this.projectedModel);
+    }
+    this.runtimePresentation = this.runtimePresenter({ model: this.projectedModel, runtime: this.projectedRuntime, appearance: this.runtimeAppearance });
+    if (previousProjection !== this.activeProjection) this.onProjectionChange({ requested: this.projection, active: this.activeProjection });
+  }
+
+  _resolveTimelineOptions() {
+    const context = {
+      model: this.model,
+      runtime: this.runtime,
+      projection: this.activeProjection,
+      traceProjection: this.traceProjection,
+      viewer: this,
+    };
+    const resolve = (value, fallback) => {
+      const candidate = value === undefined ? fallback : value;
+      const result = typeof candidate === 'function' ? candidate(context) : candidate;
+      return result == null ? null : String(result);
+    };
+    return {
+      title: resolve(this.timelineOptions.title, this.model.name || '审批轨迹'),
+      description: resolve(this.timelineOptions.description, DEFAULT_TIMELINE_DESCRIPTION),
+    };
+  }
+
+  _currentRuntimeDetailsLayout() {
+    const configured = this.activeProjection === 'compact' ? this.runtimeDetailsOptions.mobile : this.runtimeDetailsOptions.desktop;
+    const placement = configured.placement || (this.activeProjection === 'compact' ? 'bottom' : 'popover');
+    return {
+      placement,
+      width: configured.width ?? (placement === 'bottom' ? '100%' : 360),
+      maxHeight: configured.maxHeight ?? (placement === 'bottom' ? '75%' : 360),
+      backdrop: configured.backdrop ?? placement !== 'popover',
+      dragToDismiss: configured.dragToDismiss ?? placement === 'bottom',
+    };
+  }
+
+  _activityInstancesFor({ traceItem = null, presentation = null } = {}) {
+    if (traceItem?.records) return [...traceItem.records];
+    if (presentation?.records) return [...presentation.records];
+    return [];
+  }
+
+  _emitTraceClick(payload) {
+    let element = payload.element || null;
+    if (element && payload.targetType === 'edge') {
+      const sourceIds = element.sourceEdgeIds?.length ? element.sourceEdgeIds : [element.id];
+      const sourceEdges = sourceIds.map((id) => this.model.edges.find((edge) => edge.id === id)).filter(Boolean);
+      element = sourceEdges.find((edge) => element.name && edge.name === element.name) || sourceEdges[0] || element;
+    } else if (element?.id && payload.targetType !== 'edge') {
+      element = this.model.nodes.find((node) => node.id === element.id) || element;
+    }
+    const presentation = payload.presentation || (element?.id && payload.targetType !== 'edge'
+      ? this.runtimePresentation.getNode(element.id)
+      : null);
+    this.onTraceClick({
+      targetType: payload.targetType,
+      elementId: payload.elementId || element?.id,
+      element,
+      visitId: payload.visitId ?? payload.traceItem?.visitId ?? null,
+      traceItem: payload.traceItem || null,
+      transition: payload.transition || null,
+      presentation,
+      activityInstances: this._activityInstancesFor({ traceItem: payload.traceItem, presentation }),
+      actions: payload.traceItem?.actions || (payload.transition?.action ? [payload.transition.action] : presentation?.actions) || [],
+      runtime: this.runtime,
+      projection: this.activeProjection,
+      originalEvent: payload.originalEvent,
+      viewer: this,
+    });
+  }
+
+  _mountRenderer() {
+    this.renderer?.destroy?.();
+    if (this.runtime && this.activeProjection === 'compact' && this.traceProjection) {
+      const timeline = this._resolveTimelineOptions();
+      this.renderer = new RuntimeTimelineHost(this.container, {
+        model: this.projectedModel,
+        runtime: this.projectedRuntime,
+        presentation: this.runtimePresentation,
+        projection: this.traceProjection,
+        ...timeline,
+        iconRegistry: this.options.iconRegistry,
+        appearance: this.runtimeAppearance,
+        themeState: this.themeController.getState(),
+        resolveAsset: (asset, purpose, action) => this._resolveRuntimeAsset(asset, purpose, action),
+        onAssetPreview: (asset, action) => this._openRuntimeAssetPreview(asset, action),
+        renderer: this.runtimeTimelineRenderer,
+        onItemClick: (item, event) => {
+          this.onRuntimeTraceItemClick({ item, event, projection: this.traceProjection, viewer: this });
+          if (item.kind === 'transition') {
+            const transition = this.runtimePresentation.getTransition(item.transitionId);
+            const element = this.model.nodes.find((candidate) => candidate.id === transition?.sourceElementId) || null;
+            this._emitTraceClick({ targetType: 'transition', element, transition, traceItem: item, originalEvent: event });
+            return;
+          }
+          const element = this.model.nodes.find((candidate) => candidate.id === item.elementId) || null;
+          const presentation = element ? this.runtimePresentation.getNode(element.id) : null;
+          this._emitTraceClick({ targetType: 'visit', element, traceItem: item, presentation, originalEvent: event });
+        },
+        onDetailsRequest: (item, anchor, event) => {
+          const node = this.model.nodes.find((candidate) => candidate.id === item.elementId);
+          if (!node) return;
+          this._select('node', node, event, { emitTrace: false });
+          const presentation = this.runtimePresentation.getNode(node.id);
+          if (presentation.hasDetails && this.runtimeDetailsOptions.autoOpen) {
+            this._openRuntimeDetails(node, presentation, anchor, {
+              restoreFocusVisible: event ? event.detail === 0 : Boolean(anchor?.matches?.(':focus-visible')),
+            });
+          }
+        },
+        onTransitionRequest: (item, anchor, event) => {
+          const transition = this.runtimePresentation.getTransition(item.transitionId);
+          if (this.runtimeDetailsOptions.autoOpen) {
+            this._openRuntimeTransitionDetails(transition, anchor, {
+              restoreFocusVisible: event ? event.detail === 0 : Boolean(anchor?.matches?.(':focus-visible')),
+            });
+          }
+        },
+      });
+      return;
+    }
+    this.renderer = new DiagramRenderer(this.container, {
+      themeController: this.themeController,
+      model: this.projectedModel,
+      visualModel: this.model,
+      runtime: this.projectedRuntime,
+      runtimePresenter: () => this.runtimePresentation,
+      mode: this.mode,
+      iconRegistry: this.options.iconRegistry,
+      nodeRenderers: this.options.nodeRenderers,
+      nodeRenderer: this.options.nodeRenderer,
+      svgExport: this.svgExportOptions,
+      runtimeAppearance: this.runtimeAppearance,
+      onNodeClick: (node, event) => this._select('node', node, event),
+      onEdgeClick: (edge, event) => this._select('edge', edge, event),
+      onCanvasClick: () => this.clearSelection(),
+      onRuntimeDetailsRequest: ({ node, presentation, anchor, event }) => {
+        this._emitTraceClick({ targetType: 'node', element: node, presentation, originalEvent: event });
+        if (this.runtimeDetailsOptions.autoOpen) this.openRuntimeDetails(node, presentation, anchor);
+      },
+      onRuntimeTransitionClick: (transition, event) => {
+        const element = this.model.nodes.find((node) => node.id === transition.sourceElementId) || null;
+        this._emitTraceClick({ targetType: 'transition', element, transition, originalEvent: event });
+        if (this.runtimeDetailsOptions.autoOpen) this.openRuntimeTransitionDetails(transition, event.currentTarget);
+      },
+      onViewportChange: (viewport) => { this._disposeRuntimeDetails(); this.onViewportChange(viewport); },
+    });
+  }
+
+  _select(kind, element, originalEvent = undefined, { emitTrace = true } = {}) {
+    this.selection = { kind, id: element.id };
+    this.renderer.setSelection(this.selection);
+    const presentation = kind === 'node' ? this.runtimePresentation.getNode(element.id) : null;
+    this.onElementClick({ kind, element, runtime: this.runtime, presentation });
+    if (emitTrace) this._emitTraceClick({ targetType: kind, element, presentation, originalEvent });
+  }
+
+  clearSelection() {
+    this.selection = null;
+    this.renderer.setSelection(null);
+    this.onElementClick(null);
+  }
+
+  _createRuntimeDetailsLayer(layout, anchor, restoreFocusVisible = Boolean(anchor?.matches?.(':focus-visible'))) {
+    const root = element('div', [
+      'mb-runtime-details-layer',
+      'is-entering',
+      this.activeProjection === 'compact' ? 'is-timeline' : '',
+      `placement-${layout.placement}`,
+      layout.backdrop ? 'has-backdrop' : '',
+    ].filter(Boolean).join(' '));
+    root.addEventListener('pointerdown', (event) => {
+      if (event.target === root && layout.backdrop) this.closeRuntimeDetails();
+    });
+    this.renderer.container.appendChild(root);
+    this._detailsRoot = root;
+    this._detailsAnchor = anchor;
+    this._detailsLayout = layout;
+    this._detailsAnchorFocusVisible = restoreFocusVisible;
+    return root;
+  }
+
+  _isRuntimeDetailsTargetOpen(kind, id) {
+    if (id == null || !this._detailsRoot?.parentNode || this._detailsRoot.classList.contains('is-closing')) return false;
+    return this._detailsTarget?.kind === kind && this._detailsTarget.id === id;
+  }
+
+  _createRuntimeDetailsDragHandle(panel, layout) {
+    if (layout.placement !== 'bottom' || !layout.dragToDismiss) return null;
+    panel.classList.add('is-drag-dismissible');
+    const handle = element('div', 'mb-runtime-details-drag-handle');
+    handle.dataset.runtimeDetailsDragHandle = '';
+    handle.setAttribute('aria-hidden', 'true');
+    panel.prepend(handle);
+    return handle;
+  }
+
+  _suppressTimelinePointerFocus(anchor) {
+    if (!anchor?.matches?.('.mb-runtime-timeline-card-main, .mb-runtime-timeline-transition-main')) return;
+    const className = 'is-pointer-focus-restored';
+    const clear = () => {
+      anchor.classList.remove(className);
+      anchor.removeEventListener('blur', clear);
+      anchor.removeEventListener('keydown', clear);
+      anchor.removeEventListener('pointerdown', clear);
+    };
+    anchor.classList.add(className);
+    anchor.addEventListener('blur', clear, { once: true });
+    anchor.addEventListener('keydown', clear, { once: true });
+    anchor.addEventListener('pointerdown', clear, { once: true });
+  }
+
+  _finalizeRuntimeDetails({ root, cleanup, motion, anchor, restoreFocus, restoreFocusVisible = false }) {
+    motion?.destroy();
+    cleanup?.();
+    root?.remove();
+    if (this._detailsRoot !== root) return;
+    this._detailsCleanup = null;
+    this._detailsMotion = null;
+    this._detailsRoot = null;
+    this._detailsAnchor = null;
+    this._detailsLayout = null;
+    this._detailsTarget = null;
+    this._detailsAnchorFocusVisible = false;
+    if (restoreFocus && anchor?.isConnected && typeof anchor.focus === 'function') {
+      requestAnimationFrame(() => {
+        if (this._detailsRoot || !anchor.isConnected) return;
+        if (!restoreFocusVisible) this._suppressTimelinePointerFocus(anchor);
+        anchor.focus({ preventScroll: true });
+      });
+    }
+  }
+
+  _prepareRuntimeDetailsMotion(layout) {
+    const root = this._detailsRoot;
+    const panel = root?.firstElementChild;
+    if (!root || !panel) return;
+    panel.classList.add('mb-runtime-details-motion-panel');
+    const handle = this._createRuntimeDetailsDragHandle(panel, layout);
+    const cleanup = this._detailsCleanup;
+    const anchor = this._detailsAnchor;
+    const restoreFocusVisible = this._detailsAnchorFocusVisible;
+    let motion = null;
+    motion = createRuntimeDetailsMotionController({
+      layer: root,
+      panel,
+      handle,
+      placement: layout.placement,
+      dragToDismiss: layout.dragToDismiss,
+      onDismissed: ({ restoreFocus }) => this._finalizeRuntimeDetails({
+        root,
+        cleanup,
+        motion,
+        anchor,
+        restoreFocus,
+        restoreFocusVisible,
+      }),
+    });
+    this._detailsMotion = motion;
+  }
+
+  async _resolveRuntimeAsset(asset, purpose, action, externalSignal = null) {
+    if (!this.runtimeAssetResolver) return null;
+    const controller = new AbortController();
+    const abort = () => controller.abort(externalSignal?.reason);
+    if (externalSignal?.aborted) abort();
+    else externalSignal?.addEventListener?.('abort', abort, { once: true });
+    this._assetControllers.add(controller);
+    try {
+      const resolved = await this.runtimeAssetResolver(asset, { purpose, action, signal: controller.signal });
+      if (!resolved || controller.signal.aborted) return null;
+      const url = new URL(String(resolved), this.container.ownerDocument.baseURI);
+      return ['http:', 'https:', 'blob:'].includes(url.protocol) || (purpose === 'export' && url.protocol === 'data:') ? url.href : null;
+    } catch {
+      return null;
+    } finally {
+      externalSignal?.removeEventListener?.('abort', abort);
+      this._assetControllers.delete(controller);
+    }
+  }
+
+  _openRuntimeAssetPreview(asset, action) {
+    this.closeRuntimeAssetPreview();
+    if (!asset?.mediaType?.startsWith('image/')) return false;
+    const root = element('div', 'mb-runtime-asset-preview');
+    root.setAttribute('role', 'dialog');
+    root.setAttribute('aria-modal', 'true');
+    root.setAttribute('aria-label', `图片预览：${asset.name}`);
+    root.addEventListener('pointerdown', (event) => { if (event.target === root) this.closeRuntimeAssetPreview(); });
+    const dialog = element('section', 'mb-runtime-asset-preview-dialog');
+    const header = element('header', 'mb-runtime-asset-preview-head');
+    header.appendChild(element('strong', '', asset.name));
+    const close = runtimeDetailsCloseButton({ viewer: this, label: '关闭图片预览', close: () => this.closeRuntimeAssetPreview() });
+    header.appendChild(close);
+    const body = element('div', 'mb-runtime-asset-preview-body');
+    const state = element('span', 'mb-runtime-asset-preview-state', '图片加载中');
+    body.appendChild(state);
+    dialog.append(header, body);
+    root.appendChild(dialog);
+    this.renderer.container.appendChild(root);
+    this._assetPreviewRoot = root;
+    Promise.resolve(this._resolveRuntimeAsset(asset, 'preview', action)).then((url) => {
+      if (!root.isConnected) return;
+      if (!url) { state.textContent = '资源不可用'; return; }
+      const image = document.createElement('img');
+      image.alt = asset.name;
+      image.addEventListener('load', () => {
+        if (root.isConnected) body.replaceChildren(image);
+      }, { once: true });
+      image.addEventListener('error', () => {
+        if (root.isConnected) state.textContent = '资源不可用';
+      }, { once: true });
+      image.src = url;
+    });
+    requestAnimationFrame(() => close.focus({ preventScroll: true }));
+    return true;
+  }
+
+  closeRuntimeAssetPreview() {
+    this._assetPreviewRoot?.remove();
+    this._assetPreviewRoot = null;
+  }
+
+  openRuntimeDetails(node, presentation = this.runtimePresentation.getNode(node.id), anchor = null) {
+    return this._openRuntimeDetails(node, presentation, anchor);
+  }
+
+  _openRuntimeDetails(node, presentation, anchor, { restoreFocusVisible = Boolean(anchor?.matches?.(':focus-visible')) } = {}) {
+    if (!this.runtimeDetailsRenderer || !node || !presentation) return false;
+    if (this._isRuntimeDetailsTargetOpen('node', node.id)) return true;
+    this._disposeRuntimeDetails();
+    const layout = this._currentRuntimeDetailsLayout();
+    const root = this._createRuntimeDetailsLayer(layout, anchor, restoreFocusVisible);
+    this._detailsTarget = { kind: 'node', id: node.id };
+    const close = () => this.closeRuntimeDetails();
+    this._detailsCleanup = this.runtimeDetailsRenderer({
+      container: root,
+      viewer: this,
+      node,
+      presentation,
+      anchor,
+      layout,
+      close,
+      resolveAsset: (asset, purpose, action) => this._resolveRuntimeAsset(asset, purpose, action),
+      themeState: this.themeController.getState(),
+      runtimeAppearance: this.runtimeAppearance,
+    }) || null;
+    this._prepareRuntimeDetailsMotion(layout);
+    this._positionRuntimeDetails(anchor, layout);
+    this._detailsMotion?.enter();
+    this.onRuntimeDetailsOpen({ node, presentation, layout, close });
+    return true;
+  }
+
+  openRuntimeTransitionDetails(transitionOrId, anchor = null) {
+    const transition = typeof transitionOrId === 'string'
+      ? this.runtimePresentation.getTransition(transitionOrId)
+      : this.runtimePresentation.getTransition(transitionOrId?.id) || transitionOrId;
+    return this._openRuntimeTransitionDetails(transition, anchor);
+  }
+
+  _openRuntimeTransitionDetails(transition, anchor, { restoreFocusVisible = Boolean(anchor?.matches?.(':focus-visible')) } = {}) {
+    if (!this.runtimeTransitionDetailsRenderer || !transition) return false;
+    if (this._isRuntimeDetailsTargetOpen('transition', transition.id)) return true;
+    this._disposeRuntimeDetails();
+    const sourceNode = this.projectedModel.nodes.find((node) => node.id === transition.sourceElementId) || null;
+    const targetNode = this.projectedModel.nodes.find((node) => node.id === transition.targetElementId) || null;
+    const layout = this._currentRuntimeDetailsLayout();
+    const root = this._createRuntimeDetailsLayer(layout, anchor, restoreFocusVisible);
+    this._detailsTarget = { kind: 'transition', id: transition.id };
+    const close = () => this.closeRuntimeDetails();
+    const locate = (node) => {
+      if (!node) return;
+      this._select('node', node);
+      this.closeRuntimeDetails();
+    };
+    this._detailsCleanup = this.runtimeTransitionDetailsRenderer({
+      container: root,
+      viewer: this,
+      transition,
+      sourceNode,
+      targetNode,
+      anchor,
+      layout,
+      close,
+      resolveAsset: (asset, purpose, action) => this._resolveRuntimeAsset(asset, purpose, action),
+      themeState: this.themeController.getState(),
+      runtimeAppearance: this.runtimeAppearance,
+      locateSource: () => locate(sourceNode),
+      locateTarget: () => locate(targetNode),
+    }) || null;
+    this._prepareRuntimeDetailsMotion(layout);
+    this._positionRuntimeDetails(anchor, layout);
+    this._detailsMotion?.enter();
+    this.onRuntimeTransitionDetailsOpen({ transition, sourceNode, targetNode, layout, close });
+    return true;
+  }
+
+  _positionRuntimeDetails(anchor, layout = this._detailsLayout || this._currentRuntimeDetailsLayout()) {
+    if (!this._detailsRoot) return;
+    const host = this.renderer.container.getBoundingClientRect();
+    const target = anchor?.getBoundingClientRect?.() || host;
+    const popover = this._detailsRoot.firstElementChild;
+    if (!popover) return;
+    popover.style.width = cssLength(layout.width, layout.placement === 'bottom' ? '100%' : 360);
+    popover.style.maxHeight = cssLength(layout.maxHeight, layout.placement === 'bottom' ? '75%' : 360);
+    popover.style.setProperty('--mb-runtime-details-max-height', cssLength(layout.maxHeight, layout.placement === 'bottom' ? '75%' : 360));
+    if (layout.placement !== 'bottom') popover.style.maxWidth = 'calc(100% - 24px)';
+    if (layout.placement === 'bottom') {
+      popover.style.left = '0';
+      popover.style.right = '0';
+      popover.style.top = 'auto';
+      popover.style.bottom = '0';
+      return;
+    }
+    const measured = popover.getBoundingClientRect();
+    const width = popover.offsetWidth || measured.width || Math.min(360, Math.max(0, host.width - 24));
+    const height = popover.offsetHeight || measured.height;
+    if (layout.placement === 'center') {
+      popover.style.left = `${Math.max(12, (host.width - width) / 2)}px`;
+      popover.style.top = `${Math.max(12, (host.height - height) / 2)}px`;
+      return;
+    }
+    let left = target.left - host.left + target.width / 2 - width / 2;
+    left = Math.max(12, Math.min(left, host.width - width - 12));
+    let top = target.top - host.top - height - 10;
+    if (top < 12) top = Math.min(host.height - height - 12, target.bottom - host.top + 10);
+    popover.style.left = `${Math.max(12, left)}px`;
+    popover.style.top = `${Math.max(12, top)}px`;
+  }
+
+  closeRuntimeDetails() {
+    this.closeRuntimeAssetPreview();
+    if (!this._detailsRoot) return;
+    if (this._detailsMotion) {
+      this._detailsMotion.dismiss({ restoreFocus: true });
+      return;
+    }
+    this._finalizeRuntimeDetails({
+      root: this._detailsRoot,
+      cleanup: this._detailsCleanup,
+      motion: null,
+      anchor: this._detailsAnchor,
+      restoreFocus: true,
+      restoreFocusVisible: this._detailsAnchorFocusVisible,
+    });
+  }
+
+  _disposeRuntimeDetails() {
+    this.closeRuntimeAssetPreview();
+    if (!this._detailsRoot) return;
+    if (this._detailsMotion) {
+      this._detailsMotion.dismiss({ immediate: true, restoreFocus: false });
+      return;
+    }
+    this._finalizeRuntimeDetails({
+      root: this._detailsRoot,
+      cleanup: this._detailsCleanup,
+      motion: null,
+      anchor: this._detailsAnchor,
+      restoreFocus: false,
+      restoreFocusVisible: this._detailsAnchorFocusVisible,
+    });
+  }
+
+  refresh() {
+    this._disposeRuntimeDetails();
+    this._rebuildProjection();
+    this._mountRenderer();
+    if (this.selection) this.renderer.setSelection?.(this.selection);
+  }
+
+  setModel(model) { this.model = model; this._svgExportAssetCache.clear(); this.refresh(); }
+  setRuntime(runtime) { this.runtime = runtime ? normalizeRuntime(runtime) : null; this._svgExportAssetCache.clear(); this.refresh(); }
+  setProjection(projection) {
+    if (!['auto', 'standard', 'approval', 'compact'].includes(projection)) return;
+    this.projection = projection;
+    this.refresh();
+    requestAnimationFrame(() => this.renderer.fitView());
+  }
+  setDisplayOptions({ timeline, runtimeDetails, runtimeTraceOptions, runtimeAssetResolver } = {}) {
+    let changed = false;
+    if (runtimeAssetResolver !== undefined) {
+      this.runtimeAssetResolver = runtimeAssetResolver || null;
+      this._svgExportAssetCache.clear();
+      changed = true;
+    }
+    if (runtimeTraceOptions !== undefined) {
+      this.runtimeTraceOptions = { ...this.runtimeTraceOptions, ...(runtimeTraceOptions || {}) };
+      changed = true;
+    }
+    if (timeline !== undefined) {
+      this.timelineOptions = mergeTimelineOptions(this.timelineOptions, timeline || {});
+      changed = true;
+    }
+    if (runtimeDetails !== undefined) {
+      this.runtimeDetailsOptions = mergeRuntimeDetailsOptions(this.runtimeDetailsOptions, runtimeDetails || {});
+      changed = true;
+    }
+    if (changed) this.refresh();
+  }
+  setTheme(theme) { return this.themeController.setTheme(theme); }
+  setThemeMode(mode) { return this.themeController.setMode(mode); }
+  getThemeState() { return this.themeController.getState(); }
+  setRuntimeAppearance(runtimeAppearance) {
+    this.runtimeAppearanceOptions = runtimeAppearance || {};
+    this.runtimeAppearance = createRuntimeAppearance(this.runtimeAppearanceOptions);
+    this.refresh();
+  }
+  exportSvg(options = {}) {
+    const isTimeline = Boolean(this.runtime && this.activeProjection === 'compact' && this.traceProjection);
+    const label = isTimeline ? '移动时间线' : this.activeProjection === 'approval' ? '实际路径' : this.runtime ? '完整 BPMN' : '流程展示';
+    const filename = options.filename || this.svgExportOptions.filename || `${this.model.name || this.model.id || 'process'}-${label}`;
+    if (isTimeline) {
+      const timeline = this._resolveTimelineOptions();
+      return exportRuntimeTimelineSvg({
+        document: this.container.ownerDocument,
+        root: this.container,
+        model: this.model,
+        runtime: this.runtime,
+        projection: this.traceProjection,
+        ...timeline,
+        themeController: this.themeController,
+        iconRegistry: this.options.iconRegistry,
+        runtimeAppearance: this.runtimeAppearance,
+        resolveAsset: (asset, purpose, action) => this._resolveRuntimeAsset(asset, purpose, action, options.signal),
+        assetCache: this._svgExportAssetCache,
+        timelineRenderer: this.svgExportOptions.runtimeTimelineRenderer,
+        label,
+      }, { ...this.svgExportOptions, ...options, filename });
+    }
+    return this.renderer.exportSvg({ ...this.svgExportOptions, ...options, filename, label });
+  }
+  openSvgExportPreview(options = {}) {
+    if (this._svgExportPreview && !this._svgExportPreview.closed) {
+      this._svgExportPreview.focus();
+      return this._svgExportPreview;
+    }
+    this._svgExportPreview = openSvgExportPreview({
+      container: this.container,
+      title: options.previewTitle || '导出 SVG',
+      initialTheme: options.theme || 'current',
+      createArtifact: (previewOptions) => this.exportSvg({ ...options, ...previewOptions }),
+      onClose: () => { this._svgExportPreview = null; },
+      onDownload: options.onDownload,
+    });
+    return this._svgExportPreview;
+  }
+  fitView() { this.renderer.fitView(); }
+  zoomBy(delta) { this.renderer.zoomBy(delta); }
+  destroy() {
+    this._svgExportPreview?.close?.({ immediate: true });
+    this._svgExportPreview = null;
+    this._svgExportAssetCache.clear();
+    this._disposeRuntimeDetails();
+    this._assetControllers.forEach((controller) => controller.abort());
+    this._assetControllers.clear();
+    this._resizeObserver?.disconnect?.();
+    document.removeEventListener('pointerdown', this._outsideHandler, true);
+    document.removeEventListener('keydown', this._keyHandler);
+    this.renderer.destroy();
+    if (this._ownsThemeController) this.themeController.destroy();
+  }
+}