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

package/dist/modules/theme/index.js

@@ -0,0 +1,368 @@
+const THEME_MODES = new Set(['light', 'dark', 'auto']);
+const TONE_NAME = /^[a-z][a-z0-9-]{0,47}$/;
+
+const COLOR_VARIABLES = Object.freeze({
+  canvas: '--nova-color-canvas',
+  surface: '--nova-color-surface',
+  surfaceRaised: '--nova-color-surface-raised',
+  surfaceSubtle: '--nova-color-surface-subtle',
+  surfaceMuted: '--nova-color-surface-muted',
+  text: '--nova-color-text',
+  textSecondary: '--nova-color-text-secondary',
+  textMuted: '--nova-color-text-muted',
+  textInverse: '--nova-color-text-inverse',
+  border: '--nova-color-border',
+  borderStrong: '--nova-color-border-strong',
+  divider: '--nova-color-divider',
+  primary: '--nova-color-primary',
+  primaryHover: '--nova-color-primary-hover',
+  primarySoft: '--nova-color-primary-soft',
+  focusRing: '--nova-color-focus-ring',
+  edge: '--nova-color-edge',
+  gridDot: '--nova-color-grid-dot',
+  backdrop: '--nova-color-backdrop',
+});
+
+const SHADOW_VARIABLES = Object.freeze({
+  sm: '--nova-shadow-sm',
+  md: '--nova-shadow-md',
+  lg: '--nova-shadow-lg',
+});
+
+const TONE_FIELDS = Object.freeze({
+  foreground: 'foreground',
+  background: 'background',
+  border: 'border',
+  strong: 'strong',
+});
+
+const SNAPSHOT_TONES = Object.freeze([
+  'primary', 'success', 'danger', 'warning', 'info', 'neutral',
+  'user-task', 'service-task', 'script-task', 'rule-task', 'message-task', 'manual-task',
+]);
+
+const DEFAULT_ACTIONS = Object.freeze({
+  submit: Object.freeze({ label: '提交', iconId: 'ui.statusCompleted', tone: 'success' }),
+  approve: Object.freeze({ label: '通过', iconId: 'ui.statusCompleted', tone: 'success' }),
+  reject: Object.freeze({ label: '驳回', iconId: 'ui.statusFailed', tone: 'danger' }),
+  return: Object.freeze({ label: '退回', iconId: 'ui.statusRejected', tone: 'warning' }),
+  'add-sign': Object.freeze({ label: '加签', iconId: 'ui.add', tone: 'info' }),
+  transfer: Object.freeze({ label: '转办', iconId: 'ui.locateTarget', tone: 'info' }),
+  delegate: Object.freeze({ label: '委派', iconId: 'node.userTask', tone: 'info' }),
+  withdraw: Object.freeze({ label: '撤回', iconId: 'ui.statusRejected', tone: 'warning' }),
+  comment: Object.freeze({ label: '备注', iconId: 'ui.edit', tone: 'neutral' }),
+  skip: Object.freeze({ label: '跳过', iconId: 'ui.statusSkipped', tone: 'neutral' }),
+  cancel: Object.freeze({ label: '取消', iconId: 'ui.statusSkipped', tone: 'neutral' }),
+});
+
+const DEFAULT_STATUSES = Object.freeze({
+  idle: 'neutral',
+  active: 'primary',
+  completed: 'success',
+  failed: 'danger',
+  rejected: 'danger',
+  cancelled: 'neutral',
+  skipped: 'neutral',
+  superseded: 'neutral',
+  effective: 'success',
+  resolved: 'neutral',
+});
+
+const DEFAULT_TRANSITIONS = Object.freeze({
+  reject: Object.freeze({ tone: 'danger' }),
+  return: Object.freeze({ tone: 'warning' }),
+  skip: Object.freeze({ tone: 'neutral' }),
+  forward: Object.freeze({ tone: 'success' }),
+});
+
+function normalizeMode(mode, fallback = 'light') {
+  return THEME_MODES.has(mode) ? mode : fallback;
+}
+
+function normalizeTone(tone, fallback = 'neutral') {
+  const value = String(tone || '').trim().toLowerCase();
+  return TONE_NAME.test(value) ? value : fallback;
+}
+
+function supports(ownerWindow, property, value) {
+  if (typeof value !== 'string' || !value.trim()) return false;
+  const css = ownerWindow?.CSS || globalThis.CSS;
+  if (typeof css?.supports === 'function') return css.supports(property, value.trim());
+  const style = ownerWindow?.document?.createElement?.('span')?.style;
+  if (style) {
+    style.setProperty(property, value.trim());
+    return Boolean(style.getPropertyValue(property));
+  }
+  if (property === 'color') return !/[;{}]/.test(value) && /^(?:#[\da-f]{3,8}|[a-z]+|(?:rgb|hsl|hwb|lab|lch|oklab|oklch|color|color-mix|var)\(.+\))$/i.test(value.trim());
+  return property === 'box-shadow' && !/[;}]/.test(value);
+}
+
+function compilePalette(palette, ownerWindow) {
+  if (!palette || typeof palette !== 'object') return new Map();
+  const variables = new Map();
+  for (const [key, variable] of Object.entries(COLOR_VARIABLES)) {
+    const value = palette.colors?.[key];
+    if (supports(ownerWindow, 'color', value)) variables.set(variable, value.trim());
+  }
+  for (const [key, variable] of Object.entries(SHADOW_VARIABLES)) {
+    const value = palette.shadows?.[key];
+    if (supports(ownerWindow, 'box-shadow', value)) variables.set(variable, value.trim());
+  }
+  for (const [rawName, tone] of Object.entries(palette.tones || {})) {
+    const name = normalizeTone(rawName, '');
+    if (!name || !tone || typeof tone !== 'object') continue;
+    for (const [key, suffix] of Object.entries(TONE_FIELDS)) {
+      const value = tone[key];
+      if (supports(ownerWindow, 'color', value)) variables.set(`--nova-tone-${name}-${suffix}`, value.trim());
+    }
+  }
+  return variables;
+}
+
+function normalizeThemeInput(input, current = null) {
+  if (typeof input === 'string') return { ...(current || {}), mode: normalizeMode(input, current?.mode || 'light') };
+  if (!input || typeof input !== 'object') return { mode: 'light', light: null, dark: null };
+  return {
+    mode: normalizeMode(input.mode, current?.mode || 'light'),
+    light: input.light === undefined ? (current?.light || null) : input.light,
+    dark: input.dark === undefined ? (current?.dark || null) : input.dark,
+  };
+}
+
+function mediaListener(media, handler, add) {
+  if (!media) return;
+  if (typeof media[add ? 'addEventListener' : 'removeEventListener'] === 'function') {
+    media[add ? 'addEventListener' : 'removeEventListener']('change', handler);
+  } else if (typeof media[add ? 'addListener' : 'removeListener'] === 'function') {
+    media[add ? 'addListener' : 'removeListener'](handler);
+  }
+}
+
+function readAttribute(root, name) {
+  return typeof root?.getAttribute === 'function' ? root.getAttribute(name) : null;
+}
+
+function writeAttribute(root, name, value) {
+  if (typeof root?.setAttribute === 'function') root.setAttribute(name, value);
+  else if (root?.dataset) root.dataset[name === 'data-nova-theme' ? 'novaTheme' : 'novaThemeMode'] = value;
+}
+
+function removeAttribute(root, name) {
+  if (typeof root?.removeAttribute === 'function') root.removeAttribute(name);
+  else if (root?.dataset) delete root.dataset[name === 'data-nova-theme' ? 'novaTheme' : 'novaThemeMode'];
+}
+
+function readStyle(root, name) {
+  return root?.style?.getPropertyValue?.(name) || '';
+}
+
+function writeStyle(root, name, value) {
+  root?.style?.setProperty?.(name, value);
+}
+
+function removeStyle(root, name) {
+  root?.style?.removeProperty?.(name);
+}
+
+/**
+ * Owns theme state for one top-level BPMN Nova root. Nested modules inherit the
+ * root tokens and share this controller instead of creating duplicate media listeners.
+ */
+export class ThemeController {
+  constructor({ root, theme = null, onChange = null } = {}) {
+    if (!root) throw new Error('ThemeController requires a root element.');
+    this.root = root;
+    this.ownerWindow = root.ownerDocument?.defaultView || (typeof window !== 'undefined' ? window : null);
+    this.options = normalizeThemeInput(theme);
+    this.onChange = typeof onChange === 'function' ? onChange : null;
+    this.listeners = new Set();
+    this.media = null;
+    this._managedVariables = new Set();
+    this._originalVariables = new Map();
+    this._originalTheme = readAttribute(root, 'data-nova-theme');
+    this._originalMode = readAttribute(root, 'data-nova-theme-mode');
+    this._originalColorScheme = root.style?.colorScheme || '';
+    this._mediaChange = () => this._apply(true);
+    this.state = Object.freeze({ mode: this.options.mode, resolvedTheme: 'light' });
+    this._syncMedia();
+    this._apply(false);
+  }
+
+  _resolve() {
+    if (this.options.mode !== 'auto') return this.options.mode;
+    return this.media?.matches ? 'dark' : 'light';
+  }
+
+  _syncMedia() {
+    const needsMedia = this.options.mode === 'auto';
+    if (!needsMedia && this.media) {
+      mediaListener(this.media, this._mediaChange, false);
+      this.media = null;
+      return;
+    }
+    if (needsMedia && !this.media && typeof this.ownerWindow?.matchMedia === 'function') {
+      this.media = this.ownerWindow.matchMedia('(prefers-color-scheme: dark)');
+      mediaListener(this.media, this._mediaChange, true);
+    }
+  }
+
+  _apply(notify = true) {
+    const resolvedTheme = this._resolve();
+    const variables = compilePalette(this.options[resolvedTheme], this.ownerWindow);
+    for (const name of this._managedVariables) {
+      if (variables.has(name)) continue;
+      const original = this._originalVariables.get(name) || '';
+      if (original) writeStyle(this.root, name, original);
+      else removeStyle(this.root, name);
+    }
+    for (const [name, value] of variables) {
+      if (!this._originalVariables.has(name)) this._originalVariables.set(name, readStyle(this.root, name));
+      writeStyle(this.root, name, value);
+    }
+    this._managedVariables = new Set(variables.keys());
+    writeAttribute(this.root, 'data-nova-theme', resolvedTheme);
+    writeAttribute(this.root, 'data-nova-theme-mode', this.options.mode);
+    if (this.root.style) this.root.style.colorScheme = resolvedTheme;
+    this.state = Object.freeze({ mode: this.options.mode, resolvedTheme });
+    if (!notify) return;
+    this.onChange?.(this.state);
+    this.listeners.forEach((listener) => listener(this.state));
+  }
+
+  setTheme(theme) {
+    this.options = normalizeThemeInput(theme, this.options);
+    this._syncMedia();
+    this._apply(true);
+    return this.state;
+  }
+
+  setMode(mode) {
+    this.options = { ...this.options, mode: normalizeMode(mode, this.options.mode) };
+    this._syncMedia();
+    this._apply(true);
+    return this.state;
+  }
+
+  getState() { return this.state; }
+
+  /**
+   * Resolves the concrete color tokens used by standalone visual artifacts.
+   * A short-lived probe inherits the shipped theme stylesheet and receives the
+   * requested palette overrides without changing this controller's root state.
+   */
+  getSnapshot(theme = 'current') {
+    const resolvedTheme = theme === 'current' || !['light', 'dark'].includes(theme)
+      ? this.state.resolvedTheme
+      : theme;
+    const document = this.root.ownerDocument;
+    const ownerWindow = document?.defaultView || this.ownerWindow;
+    if (!document?.createElement || typeof ownerWindow?.getComputedStyle !== 'function') {
+      return Object.freeze({ resolvedTheme, colors: Object.freeze({}), tones: Object.freeze({}), fontFamily: 'sans-serif' });
+    }
+    const probe = document.createElement('span');
+    probe.setAttribute('data-nova-theme', resolvedTheme);
+    probe.setAttribute('aria-hidden', 'true');
+    Object.assign(probe.style, {
+      position: 'fixed',
+      left: '-100000px',
+      top: '-100000px',
+      width: '1px',
+      height: '1px',
+      visibility: 'hidden',
+      pointerEvents: 'none',
+    });
+    for (const [name, value] of compilePalette(this.options[resolvedTheme], ownerWindow)) probe.style.setProperty(name, value);
+    this.root.appendChild(probe);
+    const resolveColor = (variable, fallback = 'rgba(0, 0, 0, 0)') => {
+      probe.style.color = `var(${variable}, ${fallback})`;
+      return ownerWindow.getComputedStyle(probe).color || fallback;
+    };
+    const colors = {};
+    for (const [key, variable] of Object.entries(COLOR_VARIABLES)) colors[key] = resolveColor(variable);
+    const customToneNames = Object.keys(this.options[resolvedTheme]?.tones || {}).map((name) => normalizeTone(name, '')).filter(Boolean);
+    const tones = {};
+    for (const name of new Set([...SNAPSHOT_TONES, ...customToneNames])) {
+      tones[name] = {};
+      for (const suffix of Object.values(TONE_FIELDS)) tones[name][suffix] = resolveColor(`--nova-tone-${name}-${suffix}`);
+      tones[name] = Object.freeze(tones[name]);
+    }
+    probe.style.removeProperty('color');
+    const inherited = ownerWindow.getComputedStyle(this.root);
+    const fontFamily = inherited.fontFamily || '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
+    probe.remove();
+    return Object.freeze({
+      resolvedTheme,
+      colors: Object.freeze(colors),
+      tones: Object.freeze(tones),
+      fontFamily,
+    });
+  }
+
+  subscribe(listener) {
+    if (typeof listener !== 'function') return () => {};
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+
+  destroy() {
+    if (this.media) mediaListener(this.media, this._mediaChange, false);
+    this.media = null;
+    this.listeners.clear();
+    for (const name of this._managedVariables) {
+      const original = this._originalVariables.get(name) || '';
+      if (original) writeStyle(this.root, name, original);
+      else removeStyle(this.root, name);
+    }
+    if (this._originalTheme == null) removeAttribute(this.root, 'data-nova-theme');
+    else writeAttribute(this.root, 'data-nova-theme', this._originalTheme);
+    if (this._originalMode == null) removeAttribute(this.root, 'data-nova-theme-mode');
+    else writeAttribute(this.root, 'data-nova-theme-mode', this._originalMode);
+    if (this.root.style) this.root.style.colorScheme = this._originalColorScheme;
+  }
+}
+
+export function createThemeController(options) { return new ThemeController(options); }
+
+export function createRuntimeAppearance(options = {}) {
+  const statuses = { ...DEFAULT_STATUSES, ...(options.statuses || {}) };
+  const actions = { ...DEFAULT_ACTIONS, ...(options.actions || {}) };
+  const transitions = { ...DEFAULT_TRANSITIONS, ...(options.transitions || {}) };
+  return Object.freeze({
+    resolveStatus(status) { return normalizeTone(statuses[status], DEFAULT_STATUSES[status] || 'neutral'); },
+    resolveAction(action = {}) {
+      const configured = actions[action.type] || {};
+      const fallback = DEFAULT_ACTIONS[action.type] || {};
+      return Object.freeze({
+        label: action.explicitLabel || configured.label || action.label || fallback.label || action.type || '审批操作',
+        iconId: configured.iconId || fallback.iconId || 'ui.edit',
+        tone: normalizeTone(configured.tone || fallback.tone, 'neutral'),
+      });
+    },
+    resolveTransition(transition = {}) {
+      const configured = transitions[transition.type] || {};
+      const fallback = DEFAULT_TRANSITIONS[transition.type] || {};
+      return Object.freeze({ tone: normalizeTone(configured.tone || fallback.tone, 'neutral') });
+    },
+  });
+}
+
+export function applyRuntimeTone(element, tone) {
+  if (!element?.style) return 'neutral';
+  const name = normalizeTone(tone, 'neutral');
+  element.dataset.tone = name;
+  for (const suffix of Object.values(TONE_FIELDS)) {
+    element.style.setProperty(
+      `--nova-runtime-tone-${suffix}`,
+      `var(--nova-tone-${name}-${suffix}, var(--nova-tone-neutral-${suffix}))`,
+    );
+  }
+  return name;
+}
+
+export const DEFAULT_RUNTIME_APPEARANCE = Object.freeze({
+  statuses: DEFAULT_STATUSES,
+  actions: DEFAULT_ACTIONS,
+  transitions: DEFAULT_TRANSITIONS,
+});
+
+export const NOVA_THEME_MODES = Object.freeze([...THEME_MODES]);

package/dist/modules/viewer/index.d.ts

@@ -0,0 +1,265 @@
+import type { BpmnEdge, BpmnNode, NodeType, ProcessModel } from '../core/index.js'
+import type { IconRegistry } from '../icons/index.js'
+import type {
+  ActivityInstance,
+  ActivityStatus,
+  NodeRuntimePresentation,
+  ProcessInstanceSnapshot,
+  RuntimeApprovalActionPresentation,
+  RuntimeAssetRef,
+  RuntimeParticipant,
+  RuntimePresentation,
+  RuntimeTransition,
+  RuntimeTransitionPresentation,
+} from '../runtime/index.js'
+import type {
+  NovaThemeInput,
+  NovaThemeMode,
+  NovaThemeState,
+  RuntimeAppearanceOptions,
+  RuntimeAppearanceResolver,
+} from '../theme/index.js'
+import type { RuntimeTimelineSvgRenderer, SvgExportArtifact, SvgExportOptions, SvgExportPreviewController, SvgNodeRenderer } from '../export-svg/index.js'
+
+export type ViewerProjection = 'auto' | 'standard' | 'approval' | 'compact'
+export interface RuntimeTraceItem {
+  id: string
+  kind: 'activity' | 'milestone' | 'transition'
+  elementId?: string
+  visitId?: string | null
+  transitionId?: string
+  type?: RuntimeTransition['type']
+  name: string
+  nodeType?: NodeType
+  status: ActivityStatus | 'active' | 'resolved'
+  statusLabel: string
+  summary: string
+  time: string
+  startTime?: string
+  endTime?: string
+  outcome?: string
+  comment?: string
+  round?: number
+  participants?: RuntimeParticipant[]
+  records?: ActivityInstance[]
+  actions?: RuntimeApprovalActionPresentation[]
+  latestAction?: RuntimeApprovalActionPresentation | null
+  actionText?: string
+  actionSummary?: string
+  imageCount?: number
+  fileCount?: number
+  assetCount?: number
+  predicted: boolean
+  automated?: boolean
+  order: number
+}
+export interface RuntimeTraceLink {
+  id: string
+  sourceItemId: string
+  targetItemId: string
+  sourceElementId: string
+  targetElementId: string
+  sourceEdgeIds: string[]
+  label: string
+  predicted: boolean
+}
+export interface RuntimeTraceGroup {
+  id: string
+  kind: 'parallel'
+  gatewayId: string
+  label: string
+  itemIds: string[]
+  completed: number
+  total: number
+  status: ActivityStatus
+  order: number
+}
+export interface RuntimeTraceProjection {
+  graphModel: ProcessModel
+  graphRuntime: ProcessInstanceSnapshot
+  items: RuntimeTraceItem[]
+  links: RuntimeTraceLink[]
+  groups: RuntimeTraceGroup[]
+  warnings: string[]
+  mappings: {
+    nodes: Record<string, string[]>
+    edges: Record<string, string[]>
+    items: Record<string, { elementIds: string[]; activityIds: string[]; visitIds: string[] }>
+    edgeVisits: Record<string, string[]>
+  }
+}
+export interface RuntimeTraceProjectionOptions {
+  includePredicted?: boolean
+  showStartMilestone?: boolean
+  showEndMilestone?: boolean
+}
+export function createRuntimeTraceProjection(context: {
+  model: ProcessModel
+  runtime?: ProcessInstanceSnapshot | null
+  presentation?: RuntimePresentation
+  options?: RuntimeTraceProjectionOptions
+}): RuntimeTraceProjection
+
+export interface ViewerTimelineContext {
+  model: ProcessModel
+  runtime: ProcessInstanceSnapshot | null
+  projection: Exclude<ViewerProjection, 'auto'>
+  traceProjection: RuntimeTraceProjection | null
+  viewer: BpmnViewer
+}
+export interface ViewerTimelineOptions {
+  title?: string | null | ((context: ViewerTimelineContext) => string | null)
+  description?: string | null | ((context: ViewerTimelineContext) => string | null)
+}
+export type RuntimeDetailsPlacement = 'popover' | 'center' | 'bottom'
+export interface RuntimeDetailsLayoutOptions {
+  placement?: RuntimeDetailsPlacement
+  width?: number | string
+  maxHeight?: number | string
+  backdrop?: boolean
+  dragToDismiss?: boolean
+}
+export interface RuntimeDetailsOptions {
+  autoOpen?: boolean
+  desktop?: RuntimeDetailsLayoutOptions
+  mobile?: RuntimeDetailsLayoutOptions
+}
+export type RuntimeAssetPurpose = 'thumbnail' | 'preview' | 'download' | 'export'
+export type RuntimeAssetResolver = (
+  asset: RuntimeAssetRef,
+  context: { purpose: RuntimeAssetPurpose; action: RuntimeApprovalActionPresentation; signal: AbortSignal },
+) => string | null | Promise<string | null>
+export type ResolveRuntimeAsset = (
+  asset: RuntimeAssetRef,
+  purpose: RuntimeAssetPurpose,
+  action: RuntimeApprovalActionPresentation,
+) => Promise<string | null>
+export type RuntimeDetailsRenderer = (context: {
+  container: HTMLElement
+  viewer: BpmnViewer
+  node: BpmnNode
+  presentation: NodeRuntimePresentation
+  anchor: Element | null
+  layout: Required<RuntimeDetailsLayoutOptions>
+  resolveAsset: ResolveRuntimeAsset
+  themeState: NovaThemeState
+  runtimeAppearance: RuntimeAppearanceResolver
+  close(): void
+}) => void | (() => void)
+export type RuntimeTransitionDetailsRenderer = (context: {
+  container: HTMLElement
+  viewer: BpmnViewer
+  transition: RuntimeTransitionPresentation
+  sourceNode: BpmnNode | null
+  targetNode: BpmnNode | null
+  anchor: Element | null
+  layout: Required<RuntimeDetailsLayoutOptions>
+  resolveAsset: ResolveRuntimeAsset
+  themeState: NovaThemeState
+  runtimeAppearance: RuntimeAppearanceResolver
+  close(): void
+  locateSource(): void
+  locateTarget(): void
+}) => void | (() => void)
+export type RuntimeTimelineRenderer = (context: {
+  container: HTMLElement
+  model: ProcessModel
+  runtime: ProcessInstanceSnapshot
+  presentation: RuntimePresentation
+  projection: RuntimeTraceProjection
+  title: string | null
+  description: string | null
+  iconRegistry: IconRegistry
+  themeState: NovaThemeState
+  appearance: RuntimeAppearanceResolver
+  resolveAsset: ResolveRuntimeAsset
+  onAssetPreview(asset: RuntimeAssetRef, action: RuntimeApprovalActionPresentation): void
+  onItemClick(item: RuntimeTraceItem, event: Event): void
+  onDetailsRequest(item: RuntimeTraceItem, anchor: Element, event: Event): void
+  onTransitionRequest(item: RuntimeTraceItem, anchor: Element, event: Event): void
+}) => void | (() => void)
+export interface RuntimeTraceClickEvent {
+  targetType: 'node' | 'edge' | 'visit' | 'transition'
+  elementId?: string
+  element?: BpmnNode | BpmnEdge | null
+  visitId?: string | null
+  traceItem?: RuntimeTraceItem | null
+  transition?: RuntimeTransitionPresentation | null
+  presentation?: NodeRuntimePresentation | null
+  activityInstances: ActivityInstance[]
+  actions: RuntimeApprovalActionPresentation[]
+  runtime: ProcessInstanceSnapshot | null
+  projection: Exclude<ViewerProjection, 'auto'>
+  originalEvent?: Event
+  viewer: BpmnViewer
+}
+export interface ViewerOptions {
+  container: HTMLElement
+  model: ProcessModel
+  runtime?: ProcessInstanceSnapshot | null
+  iconRegistry?: IconRegistry
+  nodeRenderers?: Record<string, Function>
+  nodeRenderer?: Function
+  projection?: ViewerProjection
+  responsive?: boolean
+  runtimeTraceOptions?: RuntimeTraceProjectionOptions
+  timeline?: ViewerTimelineOptions
+  runtimeDetails?: RuntimeDetailsOptions
+  onTraceClick?: (payload: RuntimeTraceClickEvent) => void
+  runtimePresenter?: (context: { model: ProcessModel; runtime: ProcessInstanceSnapshot | null; appearance: RuntimeAppearanceResolver }) => RuntimePresentation
+  runtimeTraceProjector?: (context: { model: ProcessModel; runtime: ProcessInstanceSnapshot; presentation: RuntimePresentation; options: RuntimeTraceProjectionOptions }) => RuntimeTraceProjection
+  runtimeAssetResolver?: RuntimeAssetResolver
+  theme?: NovaThemeInput
+  runtimeAppearance?: RuntimeAppearanceOptions
+  svgExport?: SvgExportOptions & { label?: string; nodeRenderers?: Record<string, SvgNodeRenderer>; runtimeTimelineRenderer?: RuntimeTimelineSvgRenderer }
+  onThemeChange?: (state: NovaThemeState) => void
+  runtimeTimelineRenderer?: RuntimeTimelineRenderer
+  onRuntimeTraceItemClick?: (payload: { item: RuntimeTraceItem; projection: RuntimeTraceProjection; viewer: BpmnViewer; event: Event }) => void
+  onProjectionChange?: (payload: { requested: ViewerProjection; active: Exclude<ViewerProjection, 'auto'> }) => void
+  runtimeDetailsRenderer?: RuntimeDetailsRenderer | null
+  onRuntimeDetailsOpen?: (payload: { node: BpmnNode; presentation: NodeRuntimePresentation; layout: Required<RuntimeDetailsLayoutOptions>; close(): void }) => void
+  runtimeTransitionDetailsRenderer?: RuntimeTransitionDetailsRenderer | null
+  onRuntimeTransitionDetailsOpen?: (payload: { transition: RuntimeTransitionPresentation; sourceNode: BpmnNode | null; targetNode: BpmnNode | null; layout: Required<RuntimeDetailsLayoutOptions>; close(): void }) => void
+  onElementClick?: (payload: { kind: 'node' | 'edge'; element: BpmnNode | BpmnEdge; runtime: ProcessInstanceSnapshot | null; presentation: NodeRuntimePresentation | null } | null) => void
+}
+
+export function renderDefaultRuntimeTimeline(context: Parameters<RuntimeTimelineRenderer>[0]): void | (() => void)
+export function formatRuntimeAssetSize(value: number | null | undefined): string
+export function renderRuntimeApprovalContent(context: {
+  container: HTMLElement
+  actions: RuntimeApprovalActionPresentation[]
+  resolveAsset?: ResolveRuntimeAsset
+  onAssetPreview?: (asset: RuntimeAssetRef, action: RuntimeApprovalActionPresentation) => void
+}): void | (() => void)
+export function renderDefaultRuntimeDetails(context: Parameters<RuntimeDetailsRenderer>[0]): void | (() => void)
+export function renderDefaultRuntimeTransitionDetails(context: Parameters<RuntimeTransitionDetailsRenderer>[0]): void | (() => void)
+export function projectModel(model: ProcessModel, projection?: ViewerProjection): ProcessModel
+
+export class BpmnViewer {
+  constructor(options: ViewerOptions)
+  model: ProcessModel
+  runtime: ProcessInstanceSnapshot | null
+  projection: ViewerProjection
+  responsive: boolean
+  activeProjection: Exclude<ViewerProjection, 'auto'>
+  traceProjection: RuntimeTraceProjection | null
+  setModel(model: ProcessModel): void
+  setRuntime(runtime: ProcessInstanceSnapshot | null): void
+  setDisplayOptions(options: { timeline?: ViewerTimelineOptions; runtimeDetails?: RuntimeDetailsOptions; runtimeTraceOptions?: RuntimeTraceProjectionOptions; runtimeAssetResolver?: RuntimeAssetResolver | null }): void
+  setProjection(projection: ViewerProjection): void
+  setTheme(theme: NovaThemeInput): NovaThemeState
+  setThemeMode(mode: NovaThemeMode): NovaThemeState
+  getThemeState(): NovaThemeState
+  exportSvg(options?: SvgExportOptions): Promise<SvgExportArtifact>
+  openSvgExportPreview(options?: SvgExportOptions & { previewTitle?: string; onDownload?: (artifact: SvgExportArtifact) => void }): SvgExportPreviewController
+  setRuntimeAppearance(options: RuntimeAppearanceOptions | null): void
+  fitView(): void
+  zoomBy(delta: number): void
+  clearSelection(): void
+  openRuntimeDetails(node: BpmnNode, presentation?: NodeRuntimePresentation, anchor?: Element | null): boolean
+  openRuntimeTransitionDetails(transition: RuntimeTransitionPresentation | string, anchor?: Element | null): boolean
+  closeRuntimeAssetPreview(): void
+  closeRuntimeDetails(): void
+  refresh(): void
+  destroy(): void
+}