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

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

@@ -1,5 +1,6 @@
 import { NODE_DEFINITIONS, edgeWaypoints, roundedPath, routeRuntimeTransition, smoothPath } from '../core/index.js';
 import { createDefaultIconRegistry, resolveNodeVisual } from '../icons/index.js';
+import { resolveNodeSubtitle, supportsNodeSubtitle } from '../node-presentation/index.js';
 import { createRuntimePresentation } from '../runtime/index.js';
 import { createRuntimeAppearance } from '../theme/index.js';
 
@@ -304,7 +305,7 @@ function nodeToneName(node) {
   return ({ userTask: 'user-task', serviceTask: 'service-task', scriptTask: 'script-task', businessRuleTask: 'rule-task', sendTask: 'message-task', receiveTask: 'message-task', manualTask: 'manual-task' })[node.type] || 'primary';
 }
 
-function renderDefaultNode({ document, group, node, definition, visual, presentation, theme, iconRegistry }) {
+function renderDefaultNode({ document, group, node, definition, visual, presentation, subtitle: definitionSubtitle, theme, iconRegistry }) {
   const colors = theme.colors;
   const statusTone = tone(theme, presentation?.status === 'rejected' ? 'danger' : presentation?.status === 'active' ? 'primary' : presentation?.status === 'completed' ? 'success' : 'neutral');
   const typeTone = tone(theme, nodeToneName(node));
@@ -360,7 +361,10 @@ function renderDefaultNode({ document, group, node, definition, visual, presenta
   const iconY = y + (height - iconSize) / 2;
   const copyX = iconX + iconSize + 12;
   const title = node.name || definition.label;
-  const subtitle = presentation?.actionSummary || presentation?.summary || (node.properties?.assignee || node.properties?.candidateGroups || node.properties?.candidateUsers || '');
+  const subtitle = definitionSubtitle === undefined
+    ? presentation?.actionSummary || presentation?.summary || (node.properties?.assignee || node.properties?.candidateGroups || node.properties?.candidateUsers || '')
+    : definitionSubtitle;
+  const hasSubtitleRow = subtitle !== null;
   const hasStatus = Boolean(presentation?.status && presentation.status !== 'idle');
   const label = hasStatus ? String(presentation.statusLabel || presentation.status) : '';
   const statusTypography = { fontSize: 10.5, fontWeight: 650, fontFamily: theme.fontFamily };
@@ -371,18 +375,24 @@ function renderDefaultNode({ document, group, node, definition, visual, presenta
   const titleTypography = { fontSize: 14, fontWeight: 650, fontFamily: theme.fontFamily };
   const subtitleTypography = { fontSize: 11.5, fontWeight: 400, fontFamily: theme.fontFamily };
   const fittedTitle = fitText(document, title, titleMaxWidth, titleTypography);
-  const fittedSubtitle = fitText(document, subtitle, subtitleMaxWidth, subtitleTypography);
-  const tooltip = [title, subtitle].filter(Boolean).join('\n');
+  const fittedSubtitle = hasSubtitleRow ? fitText(document, subtitle, subtitleMaxWidth, subtitleTypography) : '';
+  const tooltip = subtitle === null || subtitle === '' ? title : `${title}\n${subtitle}`;
+  group.setAttribute('role', 'group');
+  group.setAttribute('aria-label', tooltip);
   if (tooltip && (fittedTitle !== title || fittedSubtitle !== String(subtitle || ''))) group.appendChild(svgElement(document, 'title', {}, tooltip));
 
   const clipId = safeSvgId(node.id);
-  const titleClip = appendClipPath(document, group, `nova-node-${clipId}-title-clip`, { x: copyX, y: y + 9, width: titleMaxWidth, height: 23 });
-  const subtitleClip = appendClipPath(document, group, `nova-node-${clipId}-subtitle-clip`, { x: copyX, y: y + 33, width: subtitleMaxWidth, height: 21 });
+  const titleY = hasSubtitleRow ? y + 27 : y + height / 2 + 5;
+  const titleClipY = hasSubtitleRow ? y + 9 : y + (height - 23) / 2;
+  const titleClip = appendClipPath(document, group, `nova-node-${clipId}-title-clip`, { x: copyX, y: titleClipY, width: titleMaxWidth, height: 23 });
+  const subtitleClip = hasSubtitleRow
+    ? appendClipPath(document, group, `nova-node-${clipId}-subtitle-clip`, { x: copyX, y: y + 33, width: subtitleMaxWidth, height: 21 })
+    : null;
   group.appendChild(svgElement(document, 'rect', { x, y, width, height, rx: 12, fill: colors.surface, stroke: hasStatus ? statusTone.border : colors.border, 'stroke-width': presentation?.status === 'active' ? 2 : 1.2, filter: 'url(#nova-export-shadow)' }));
   group.appendChild(svgElement(document, 'rect', { x, y: y + 12, width: 3, height: Math.max(12, height - 24), rx: 1.5, fill: typeTone.strong }));
   group.appendChild(svgElement(document, 'rect', { x: iconX, y: iconY, width: iconSize, height: iconSize, rx: 9, fill: typeTone.background }));
   appendIcon(document, group, icon, { x: iconX + 8, y: iconY + 8, width: iconSize - 16, height: iconSize - 16 }, typeTone.foreground);
-  if (fittedTitle) group.appendChild(svgElement(document, 'text', { x: copyX, y: y + 27, fill: colors.text, 'font-size': titleTypography.fontSize, 'font-weight': titleTypography.fontWeight, 'font-family': titleTypography.fontFamily, 'clip-path': titleClip }, fittedTitle));
+  if (fittedTitle) group.appendChild(svgElement(document, 'text', { x: copyX, y: titleY, fill: colors.text, 'font-size': titleTypography.fontSize, 'font-weight': titleTypography.fontWeight, 'font-family': titleTypography.fontFamily, 'clip-path': titleClip }, fittedTitle));
   if (fittedSubtitle) group.appendChild(svgElement(document, 'text', { x: copyX, y: y + 49, fill: colors.textSecondary, 'font-size': subtitleTypography.fontSize, 'font-family': subtitleTypography.fontFamily, 'clip-path': subtitleClip }, fittedSubtitle));
   if (hasStatus) {
     const fittedLabel = fitText(document, label, labelWidth - 16, statusTypography);
@@ -479,6 +489,8 @@ export async function exportDiagramSvg(context = {}, options = {}) {
   }
 
   const nodeLayer = svgElement(document, 'g', { 'data-layer': 'nodes' });
+  const runtimeMode = context.mode === 'instance' || Boolean(context.runtime);
+  const definitionMode = context.mode === 'viewer' ? 'viewer' : 'design';
   const order = { participant: 0, lane: 1, group: 2, container: 3, data: 4, dataStore: 4, annotation: 4, task: 5, gateway: 6, event: 7, boundary: 8 };
   const nodes = [...(model.nodes || [])].sort((a, b) => (order[NODE_DEFINITIONS[a.type]?.kind] ?? 5) - (order[NODE_DEFINITIONS[b.type]?.kind] ?? 5));
   for (const node of nodes) {
@@ -500,7 +512,19 @@ export async function exportDiagramSvg(context = {}, options = {}) {
     } else if (context.htmlNodeRenderers?.[node.type] || context.htmlNodeRenderers?.[definition.kind] || context.htmlNodeRenderer) {
       warnings.push({ code: 'custom-node-renderer-fallback', message: `节点“${node.name || node.id}”没有 SVG Renderer，已使用标准视觉。`, elementId: node.id });
     }
-    if (!rendered) renderDefaultNode({ document, group, node, definition, visual, presentation: nodePresentation, theme, iconRegistry });
+    if (!rendered) {
+      const subtitle = !runtimeMode && supportsNodeSubtitle(definition)
+        ? resolveNodeSubtitle({
+          node,
+          definition,
+          model,
+          mode: definitionMode,
+          surface: 'svg-export',
+          resolver: context.nodeSubtitleResolver,
+        })
+        : undefined;
+      renderDefaultNode({ document, group, node, definition, visual, presentation: nodePresentation, subtitle, theme, iconRegistry });
+    }
     nodeLayer.appendChild(group);
   }
   svg.appendChild(nodeLayer);

package/dist/modules/node-presentation/index.d.ts

@@ -0,0 +1,25 @@
+import type { BpmnNode, NodeDefinition, ProcessModel } from '../core/index.js'
+
+export interface NodeSubtitleResolverContext {
+  readonly node: BpmnNode
+  readonly definition: NodeDefinition
+  readonly model: ProcessModel
+  readonly mode: 'design' | 'viewer'
+  readonly surface: 'canvas' | 'svg-export'
+  readonly defaultSubtitle: string
+}
+
+export type NodeSubtitleResolver = (
+  context: Readonly<NodeSubtitleResolverContext>,
+) => string | null | undefined
+
+export function resolveDefaultNodeSubtitle(node: BpmnNode): string
+export function supportsNodeSubtitle(definition: NodeDefinition): boolean
+export function resolveNodeSubtitle(context: {
+  node: BpmnNode
+  definition: NodeDefinition
+  model: ProcessModel
+  mode: 'design' | 'viewer'
+  surface: 'canvas' | 'svg-export'
+  resolver?: NodeSubtitleResolver | null
+}): string | null

package/dist/modules/node-presentation/index.js

@@ -0,0 +1,51 @@
+function resolverError(node, reason) {
+  const nodeId = node?.id || '<unknown>';
+  const detail = reason instanceof Error ? reason.message : String(reason);
+  const error = new Error(`Node subtitle resolver failed for node "${nodeId}": ${detail}`);
+  if (reason instanceof Error) error.cause = reason;
+  return error;
+}
+
+export function resolveDefaultNodeSubtitle(node) {
+  const properties = node?.properties || {};
+  if (node?.type === 'userTask') return properties.assignee || properties.candidateGroups || properties.candidateUsers || '待配置审批人';
+  if (['serviceTask', 'sendTask', 'businessRuleTask'].includes(node?.type)) return properties.implementation || '待配置执行实现';
+  if (node?.type === 'scriptTask') return properties.scriptFormat || 'Script';
+  if (node?.type === 'callActivity') return properties.calledElement || '待配置调用流程';
+  if (node?.type === 'receiveTask') return '等待消息或外部触发';
+  if (node?.type === 'manualTask') return '人工线下处理';
+  if (node?.type === 'subProcess') return '可折叠子流程';
+  if (node?.type === 'eventSubProcess') return '事件触发子流程';
+  if (node?.type === 'transaction') return '事务边界';
+  return node?.bpmnType?.replace('bpmn:', '') || '';
+}
+
+export function supportsNodeSubtitle(definition) {
+  return definition?.kind === 'task' || definition?.kind === 'container';
+}
+
+export function resolveNodeSubtitle({ node, definition, model, mode, surface, resolver }) {
+  const defaultSubtitle = resolveDefaultNodeSubtitle(node);
+  if (typeof resolver !== 'function') return defaultSubtitle;
+
+  let result;
+  try {
+    result = resolver(Object.freeze({
+      node,
+      definition,
+      model,
+      mode,
+      surface,
+      defaultSubtitle,
+    }));
+  } catch (error) {
+    throw resolverError(node, error);
+  }
+
+  if (result === undefined) return defaultSubtitle;
+  if (result === null || typeof result === 'string') return result;
+  if (result && typeof result.then === 'function') {
+    throw resolverError(node, 'Promise results are not supported; return a string, null, or undefined.');
+  }
+  throw resolverError(node, `invalid result type "${typeof result}"; return a string, null, or undefined.`);
+}

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

@@ -39,6 +39,18 @@ export const defaultBpmnPaletteProvider: PaletteProvider
 export function createPaletteRegistry(): PaletteRegistry
 export function createDefaultPaletteRegistry(options?: { providers?: PaletteProvider[] }): PaletteRegistry
 
+export type PaletteItemRenderer = (context: {
+  container: HTMLElement
+  item: PaletteItem
+  panel: PalettePanel
+  beginCreate(): unknown
+}) => void | (() => void)
+export type PaletteSectionRenderer = (context: {
+  container: HTMLElement
+  section: PaletteSection
+  panel: PalettePanel
+}) => void | (() => void)
+
 export interface PalettePanelOptions {
   container: HTMLElement
   registry: PaletteRegistry
@@ -46,8 +58,8 @@ export interface PalettePanelOptions {
   interactions: { beginCreate(intent: PaletteCreateIntent): unknown; serialize(session: unknown): string }
   canvas?: unknown
   iconRegistry?: IconRegistry
-  renderItem?: ((context: { item: PaletteItem; panel: PalettePanel }) => HTMLElement | null) | null
-  renderSection?: ((context: { section: PaletteSection; panel: PalettePanel }) => HTMLElement | null) | null
+  renderItem?: PaletteItemRenderer | null
+  renderSection?: PaletteSectionRenderer | null
   themeController?: ThemeController | null
   theme?: NovaThemeInput | null
   onThemeChange?: ((state: NovaThemeState) => void) | null

package/dist/modules/palette/index.js

@@ -56,10 +56,10 @@ export class PaletteRegistry {
 export const defaultBpmnPaletteProvider = {
   id: 'bpmn-default-palette',
   priority: 100,
-  getSections() {
+  getSections(context = {}) {
     return PALETTE_GROUPS.map((group) => {
       const items = [];
-      for (const nodeType of group.types) {
+      for (const nodeType of group.types.filter((type) => context.studio?.allowsNodeType?.(type) !== false)) {
         if (nodeType === 'parallelGateway') {
           items.push({
             id: 'node-parallelGateway',
@@ -85,7 +85,7 @@ export const defaultBpmnPaletteProvider = {
         });
       }
       return { id: group.id, label: group.label, collapsed: group.id !== 'favorites', items };
-    });
+    }).filter((section) => section.items.length);
   },
 };
 

package/dist/modules/properties-bpmn/index.js

@@ -17,7 +17,9 @@ function nodeTypeOptions(context) {
       ? ['task', 'container']
       : [currentKind];
   return Object.entries(NODE_DEFINITIONS)
-    .filter(([type, def]) => type !== 'generic' && compatible.includes(def.kind))
+    .filter(([type, def]) => type !== 'generic'
+      && compatible.includes(def.kind)
+      && context.studio?.allowsNodeType?.(type) !== false)
     .map(([value, def]) => ({ value, label: def.label }));
 }
 

package/dist/modules/renderer-svg/index.d.ts

@@ -3,6 +3,7 @@ import type { IconRegistry, NodeVisualResolution } from '../icons/index.js'
 import type { NodeRuntimePresentation, ProcessInstanceSnapshot, RuntimePresentation } from '../runtime/index.js'
 import type { NovaThemeInput, NovaThemeMode, NovaThemeState, RuntimeAppearanceResolver, ThemeController } from '../theme/index.js'
 import type { SvgExportArtifact, SvgExportOptions, SvgExportPreviewController, SvgNodeRenderer } from '../export-svg/index.js'
+import type { NodeSubtitleResolver } from '../node-presentation/index.js'
 
 export interface SceneBounds {
   left: number
@@ -73,6 +74,7 @@ export interface DiagramRendererOptions {
   iconRegistry?: IconRegistry
   nodeRenderers?: Record<string, DiagramNodeRenderer>
   nodeRenderer?: DiagramNodeRenderer
+  nodeSubtitleResolver?: NodeSubtitleResolver
   runtimePresenter?: (context: { model: ProcessModel; runtime: ProcessInstanceSnapshot | null; appearance: RuntimeAppearanceResolver | null }) => RuntimePresentation
   runtimeAppearance?: RuntimeAppearanceResolver | null
   svgExport?: SvgExportOptions & { label?: string; nodeRenderers?: Record<string, SvgNodeRenderer> }
@@ -84,6 +86,7 @@ export interface DiagramRendererOptions {
   onEdgeClick?: (edge: BpmnEdge, event: Event) => void
   onCanvasClick?: (event: Event) => void
   onViewportChange?: (state: { zoom: number; pan: Point }) => void
+  canCreateNodeType?: (nodeType: string) => boolean
   [key: string]: unknown
 }
 export class DiagramRenderer {
@@ -97,6 +100,7 @@ export class DiagramRenderer {
   setModel(model: ProcessModel): void
   setMode(mode: 'design' | 'viewer' | 'instance'): void
   setRuntime(runtime: ProcessInstanceSnapshot | null): void
+  refreshPresentation(): void
   setSelection(selection: ElementSelection | null): void
   setConnectingSource(nodeId: string | null): void
   setSpacePressed(active: boolean): void

package/dist/modules/renderer-svg/index.js

@@ -1,6 +1,7 @@
 import { NODE_DEFINITIONS, PALETTE_GROUPS, PARALLEL_GATEWAY_PRESETS, edgeWaypoints, resolveGatewayRole, resolveSwimlaneLabelPlacement, roundedPath, routeRuntimeTransition, smoothPath } from '../core/index.js';
 import { createRuntimePresentation } from '../runtime/index.js';
 import { createDefaultIconRegistry, createIconElement, resolveNodeVisual } from '../icons/index.js';
+import { resolveNodeSubtitle, supportsNodeSubtitle } from '../node-presentation/index.js';
 import { ThemeController, applyRuntimeTone } from '../theme/index.js';
 import { exportDiagramSvg, openSvgExportPreview } from '../export-svg/index.js';
 
@@ -16,6 +17,15 @@ function quantizeZoom(value, step = 0.05) {
   return Math.round(Math.round(clamped / step) * step * 1000) / 1000;
 }
 
+function eventShapeDiameter(node, definition) {
+  const maximum = definition.kind === 'boundary' ? 40 : 46;
+  const width = Number(node?.width);
+  const height = Number(node?.height);
+  const availableWidth = Number.isFinite(width) ? Math.max(0, width) : maximum;
+  const availableHeight = Number.isFinite(height) ? Math.max(0, height) : maximum;
+  return Math.min(maximum, availableWidth, availableHeight);
+}
+
 function estimateLabelTextWidth(value) {
   let width = 0;
   for (const ch of Array.from(String(value ?? ''))) {
@@ -262,18 +272,8 @@ function routePathData(points, routeStyle = 'rounded', cornerRadius = 14) {
   return roundedPath(points, cornerRadius);
 }
 
-function displaySubtitle(node) {
-  const p = node.properties || {};
-  if (node.type === 'userTask') return p.assignee || p.candidateGroups || p.candidateUsers || '待配置审批人';
-  if (['serviceTask', 'sendTask', 'businessRuleTask'].includes(node.type)) return p.implementation || '待配置执行实现';
-  if (node.type === 'scriptTask') return p.scriptFormat || 'Script';
-  if (node.type === 'callActivity') return p.calledElement || '待配置调用流程';
-  if (node.type === 'receiveTask') return '等待消息或外部触发';
-  if (node.type === 'manualTask') return '人工线下处理';
-  if (node.type === 'subProcess') return '可折叠子流程';
-  if (node.type === 'eventSubProcess') return '事件触发子流程';
-  if (node.type === 'transaction') return '事务边界';
-  return node.bpmnType?.replace('bpmn:', '') || '';
+function nodeAccessibleLabel(title, subtitle) {
+  return subtitle === null || subtitle === '' ? title : `${title}\n${subtitle}`;
 }
 
 function runtimeStatusIconId(presentation) {
@@ -599,6 +599,23 @@ export class DiagramRenderer {
   setModel(model) { this.model = model; this.render(); }
   setMode(mode) { this.mode = mode; this.render(); }
   setRuntime(runtime) { this.runtime = runtime; this.render(); }
+  refreshPresentation() {
+    if (this.mode === 'instance') return;
+    const subtitles = this._resolveDefinitionSubtitles();
+    const nodeElements = new Map(
+      [...this.nodeLayer.querySelectorAll('[data-node-id]')]
+        .map((nodeEl) => [nodeEl.dataset.nodeId, nodeEl]),
+    );
+    const updates = [];
+    for (const node of this.model.nodes) {
+      if (!subtitles.has(node.id)) continue;
+      const nodeEl = nodeElements.get(node.id);
+      if (!nodeEl || nodeEl.dataset.nodePresentation !== 'standard') continue;
+      const definition = NODE_DEFINITIONS[node.type] || NODE_DEFINITIONS.generic;
+      updates.push({ nodeEl, node, definition, subtitle: subtitles.get(node.id) });
+    }
+    updates.forEach((update) => this._applyDefinitionPresentation(update));
+  }
   setSelection(selection) {
     this.selection = selection;
     if (selection?.kind !== 'node' || selection.id !== this.quickMenuNodeId) this.quickMenuNodeId = null;
@@ -645,6 +662,7 @@ export class DiagramRenderer {
       nodeRenderers: options.nodeRenderers || this.svgExportOptions.nodeRenderers,
       htmlNodeRenderers: this.options.nodeRenderers,
       htmlNodeRenderer: this.options.nodeRenderer,
+      nodeSubtitleResolver: this.options.nodeSubtitleResolver,
       mode: this.mode,
       label: options.label || this.svgExportOptions.label,
     }, { ...this.svgExportOptions, ...options });
@@ -748,16 +766,38 @@ export class DiagramRenderer {
     this.runtimePresentation = this.runtime
       ? presenter({ model: this.model, runtime: this.runtime, appearance: this.options.runtimeAppearance })
       : createRuntimePresentation({ model: this.model, runtime: null, appearance: this.options.runtimeAppearance });
+    const subtitles = this._resolveDefinitionSubtitles();
     this._syncSceneBounds();
     this._renderEdges();
     this._renderRuntimeTransitions();
     this._renderGuides();
-    this._renderNodes();
+    this._renderNodes(subtitles);
     this._applyTransform();
     this.container.dataset.mode = this.mode;
     if (this.emptyState) this.emptyState.hidden = this.model.nodes.length > 0 || !this.options.showEmptyState;
   }
 
+  _resolveDefinitionSubtitles() {
+    const subtitles = new Map();
+    if (this.mode === 'instance') return subtitles;
+    const mode = this.mode === 'viewer' ? 'viewer' : 'design';
+    for (const node of this.model.nodes) {
+      const definition = NODE_DEFINITIONS[node.type] || NODE_DEFINITIONS.generic;
+      if (!supportsNodeSubtitle(definition)) continue;
+      const renderers = this.options.nodeRenderers || {};
+      if (typeof (renderers[node.type] || renderers[definition.kind] || this.options.nodeRenderer) === 'function') continue;
+      subtitles.set(node.id, resolveNodeSubtitle({
+        node,
+        definition,
+        model: this.model,
+        mode,
+        surface: 'canvas',
+        resolver: this.options.nodeSubtitleResolver,
+      }));
+    }
+    return subtitles;
+  }
+
   _renderGuides() {
     this.guideSvg.replaceChildren();
     if (this.model.settings?.alignmentGuides === false) return;
@@ -977,7 +1017,7 @@ export class DiagramRenderer {
     requestAnimationFrame(() => { input.focus(); input.select(); });
   }
 
-  _renderNodes() {
+  _renderNodes(subtitles = new Map()) {
     this._nodeContentCleanups.splice(0).forEach((cleanup) => cleanup?.());
     this.nodeLayer.innerHTML = '';
     const zOrder = { participant: 0, lane: 1, group: 2, container: 3, data: 4, dataStore: 4, annotation: 4, task: 5, gateway: 6, event: 7, boundary: 8 };
@@ -1018,7 +1058,7 @@ export class DiagramRenderer {
       nodeEl.tabIndex = 0;
 
       const visual = this._resolveNodeVisual(node);
-      this._renderNodeShape(nodeEl, node, def, runtimeState, visual);
+      this._renderNodeShape(nodeEl, node, def, runtimeState, visual, subtitles.get(node.id));
       if (['task', 'container'].includes(def.kind)) addActivityMarkers(nodeEl, visual, this.iconRegistry);
 
       if (this.mode === 'design') this._renderDesignControls(nodeEl, node, def, selected && this.selection?.kind !== 'multi' && this.interactionMode !== 'pan');
@@ -1048,9 +1088,10 @@ export class DiagramRenderer {
     if (this.mode === 'design' && this.quickMenuNodeId) this._renderQuickMenu();
   }
 
-  _renderNodeShape(nodeEl, node, def, runtimeState, visual) {
+  _renderNodeShape(nodeEl, node, def, runtimeState, visual, subtitle) {
     if (def.kind === 'event' || def.kind === 'boundary') {
       const shape = el('div', 'mb-event-shape');
+      shape.style.setProperty('--mb-event-shape-size', `${eventShapeDiameter(node, def)}px`);
       shape.dataset.stage = def.eventStage || 'intermediate';
       shape.dataset.role = def.eventRole || '';
       if (def.kind === 'boundary' && node.properties?.cancelActivity === false) shape.classList.add('is-noninterrupting');
@@ -1136,6 +1177,7 @@ export class DiagramRenderer {
       nodeEl.appendChild(customHost);
       return;
     }
+    nodeEl.dataset.nodePresentation = 'standard';
     const header = el('div', 'mb-node-header');
     const icon = visual.iconId ? el('span', 'mb-node-icon') : null;
     const iconNode = visual.iconId
@@ -1185,14 +1227,33 @@ export class DiagramRenderer {
         titleWrap.appendChild(action);
       }
     } else {
-      titleWrap.appendChild(el('div', 'mb-node-title', node.name || def.label));
-      titleWrap.appendChild(el('div', 'mb-node-subtitle', displaySubtitle(node)));
+      const title = node.name || def.label;
+      titleWrap.appendChild(el('div', 'mb-node-title', title));
+      if (subtitle !== null) titleWrap.appendChild(el('div', 'mb-node-subtitle', subtitle));
+      const label = nodeAccessibleLabel(title, subtitle);
+      nodeEl.title = label;
+      nodeEl.setAttribute('aria-label', label);
     }
     if (icon) header.append(icon);
     header.append(titleWrap);
     nodeEl.appendChild(header);
   }
 
+  _applyDefinitionPresentation({ nodeEl, node, definition, subtitle }) {
+    const title = node.name || definition.label;
+    const titleWrap = nodeEl.querySelector('.mb-node-title-wrap');
+    const titleEl = titleWrap?.querySelector('.mb-node-title');
+    if (!titleWrap || !titleEl) return;
+    titleEl.textContent = title;
+    const currentSubtitle = titleWrap.querySelector('.mb-node-subtitle');
+    if (subtitle === null) currentSubtitle?.remove();
+    else if (currentSubtitle) currentSubtitle.textContent = subtitle;
+    else titleWrap.appendChild(el('div', 'mb-node-subtitle', subtitle));
+    const label = nodeAccessibleLabel(title, subtitle);
+    nodeEl.title = label;
+    nodeEl.setAttribute('aria-label', label);
+  }
+
   _resolveNodeVisual(node, surface = this.mode === 'instance' ? 'viewer' : 'canvas') {
     const visualModel = this.options.getVisualModel?.() || this.options.visualModel || this.model;
     return resolveNodeVisual(node, { surface, model: visualModel });
@@ -1424,7 +1485,7 @@ export class DiagramRenderer {
         const type = quickItem.nodeType;
         if (type === 'startEvent') continue;
         const def = NODE_DEFINITIONS[type];
-        if (!def) continue;
+        if (!def || this.options.canCreateNodeType?.(type) === false) continue;
         const item = el('button', 'mb-quick-menu-item');
         item.dataset.search = `${quickItem.id} ${type} ${quickItem.label}`.toLowerCase();
         const miniIcon = el('span', `mb-mini-type mb-mini-kind-${def.kind}`);

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

@@ -20,6 +20,7 @@ import type {
   RuntimeAppearanceResolver,
 } from '../theme/index.js'
 import type { RuntimeTimelineSvgRenderer, SvgExportArtifact, SvgExportOptions, SvgExportPreviewController, SvgNodeRenderer } from '../export-svg/index.js'
+import type { NodeSubtitleResolver } from '../node-presentation/index.js'
 
 export type ViewerProjection = 'auto' | 'standard' | 'approval' | 'compact'
 export interface RuntimeTraceItem {
@@ -200,6 +201,7 @@ export interface ViewerOptions {
   iconRegistry?: IconRegistry
   nodeRenderers?: Record<string, Function>
   nodeRenderer?: Function
+  nodeSubtitleResolver?: NodeSubtitleResolver
   projection?: ViewerProjection
   responsive?: boolean
   runtimeTraceOptions?: RuntimeTraceProjectionOptions
@@ -245,6 +247,7 @@ export class BpmnViewer {
   traceProjection: RuntimeTraceProjection | null
   setModel(model: ProcessModel): void
   setRuntime(runtime: ProcessInstanceSnapshot | null): void
+  refreshPresentation(): void
   setDisplayOptions(options: { timeline?: ViewerTimelineOptions; runtimeDetails?: RuntimeDetailsOptions; runtimeTraceOptions?: RuntimeTraceProjectionOptions; runtimeAssetResolver?: RuntimeAssetResolver | null }): void
   setProjection(projection: ViewerProjection): void
   setTheme(theme: NovaThemeInput): NovaThemeState

package/dist/modules/viewer/index.js

@@ -367,7 +367,7 @@ export class BpmnViewer {
     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.mode = options.mode === 'instance' || this.runtime ? 'instance' : 'viewer';
     this.onElementClick = options.onElementClick || (() => {});
     this.onTraceClick = options.onTraceClick || (() => {});
     this.runtimePresenter = options.runtimePresenter || ((context) => createRuntimePresentation(context));
@@ -414,8 +414,15 @@ export class BpmnViewer {
     };
     document.addEventListener('pointerdown', this._outsideHandler, true);
     document.addEventListener('keydown', this._keyHandler);
-    this._rebuildProjection();
-    this._mountRenderer();
+    try {
+      this._rebuildProjection();
+      this._mountRenderer();
+    } catch (error) {
+      document.removeEventListener('pointerdown', this._outsideHandler, true);
+      document.removeEventListener('keydown', this._keyHandler);
+      if (this._ownsThemeController) this.themeController.destroy();
+      throw error;
+    }
     this._resizeObserver = typeof ResizeObserver === 'function'
       ? new ResizeObserver(() => {
         if (this.projection !== 'auto') return;
@@ -576,6 +583,7 @@ export class BpmnViewer {
       iconRegistry: this.options.iconRegistry,
       nodeRenderers: this.options.nodeRenderers,
       nodeRenderer: this.options.nodeRenderer,
+      nodeSubtitleResolver: this.options.nodeSubtitleResolver,
       svgExport: this.svgExportOptions,
       runtimeAppearance: this.runtimeAppearance,
       onNodeClick: (node, event) => this._select('node', node, event),
@@ -918,7 +926,12 @@ export class BpmnViewer {
   }
 
   setModel(model) { this.model = model; this._svgExportAssetCache.clear(); this.refresh(); }
-  setRuntime(runtime) { this.runtime = runtime ? normalizeRuntime(runtime) : null; this._svgExportAssetCache.clear(); this.refresh(); }
+  setRuntime(runtime) {
+    this.runtime = runtime ? normalizeRuntime(runtime) : null;
+    this.mode = this.options.mode === 'instance' || this.runtime ? 'instance' : 'viewer';
+    this._svgExportAssetCache.clear();
+    this.refresh();
+  }
   setProjection(projection) {
     if (!['auto', 'standard', 'approval', 'compact'].includes(projection)) return;
     this.projection = projection;
@@ -954,6 +967,10 @@ export class BpmnViewer {
     this.runtimeAppearance = createRuntimeAppearance(this.runtimeAppearanceOptions);
     this.refresh();
   }
+  refreshPresentation() {
+    if (this.mode !== 'viewer' || (this.runtime && this.activeProjection === 'compact')) return;
+    this.renderer?.refreshPresentation?.();
+  }
   exportSvg(options = {}) {
     const isTimeline = Boolean(this.runtime && this.activeProjection === 'compact' && this.traceProjection);
     const label = isTimeline ? '移动时间线' : this.activeProjection === 'approval' ? '实际路径' : this.runtime ? '完整 BPMN' : '流程展示';