@bpmn-nova/vue 0.3.2-preview → 0.3.4-preview

package/README.md

@@ -4,7 +4,7 @@ BPMN Nova 的 Vue 3.3+ Adapter，提供 Studio、Designer、Viewer、审批轨
 
 > **English summary:** Vue 3.3+ components and exposed instance methods for BPMN Nova process design, viewing, approval traces, properties, themes, and SVG export.
 
-> 当前版本为 `0.3.2-preview`。Vue 由宿主工程提供，本包不会替应用选择或升级框架版本。
+> 当前版本为 `0.3.4-preview`。Vue 由宿主工程提供，本包不会替应用选择或升级框架版本。
 
 ![BPMN Nova Vue 流程工作台](https://raw.githubusercontent.com/daxiangme/bpmn-nova/dev/docs/assets/bpmn-nova-designer.jpg)
 
@@ -20,6 +20,20 @@ import '@bpmn-nova/vue/styles.css'
 
 只安装本包；`@bpmn-nova/studio` 会作为内部依赖自动解析。容器必须有明确高度。
 
+TypeScript 类型也从 Vue 入口导入，不要为了模型类型额外声明 Studio 直依赖：
+
+```ts
+import type {
+  BpmnNode,
+  EdgeType,
+  ElementSelection,
+  NodeType,
+  ProcessModel,
+} from '@bpmn-nova/vue'
+```
+
+公共类型门面还包含 `BpmnEdge`、`EngineId` 和 `LayoutOptions`。
+
 使用代码生成助手或 IDE Agent 接入时，从随包的 `llms.txt` 开始；需要完整接口和定制资料时再读取 `llms-full.txt`。两份文件都包含在 npm tarball 中，不依赖源码仓库可见性。
 
 ## 流程设计
@@ -53,7 +67,7 @@ function handleChange(model, reason, nextXml) {
 </template>
 ```
 
-Expose 提供 `getActions()`、`exportXml()`、`fitView()`、`setTheme()`、`exportSvg()` 和 `openSvgExportPreview()`。
+Expose 提供 `getActions()`、`validate()`、`exportXml()`、`fitView()`、`setTheme()`、`exportSvg()` 和 `openSvgExportPreview()`。
 
 `xml`/`model` 是外部替换输入，`change` 的 XML 是草稿输出。宿主回写完全相同的导出 XML 不会重新导入或清空撤销历史；切换服务器 revision 或流程时传入不同 XML 会替换模型。Activiti 宿主应显式使用 `engine="activiti"`。
 
@@ -90,6 +104,7 @@ function handleSelectionChange(selection, element) {
       theme="auto"
       @change="handleChange"
       @selection-change="handleSelectionChange"
+      @validation="handleValidation"
     >
       <template #header-start="{ state, actions }">
         <button type="button" @click="back">← 返回审批列表</button>
@@ -97,6 +112,11 @@ function handleSelectionChange(selection, element) {
         <strong>{{ processName }}</strong>
         <span>{{ processType }}</span>
       </template>
+      <template #header-actions="{ actions, mode }">
+        <button type="button" :disabled="mode !== 'design'" @click="actions.validate()">校验</button>
+        <button type="button" :disabled="mode !== 'design'" @click="saveDraft(actions.exportXml())">保存</button>
+        <button type="button" :disabled="mode !== 'design'" @click="publishProcess(actions)">发布</button>
+      </template>
     </BpmnStudio>
 
     <DxProcessProperties
@@ -107,10 +127,56 @@ function handleSelectionChange(selection, element) {
 </template>
 ```
 
-`header-start` 使用 Vue Teleport 在当前应用内渲染，因此保留 provide/inject、响应式状态与组件生命周期；`header` 可完整替换 Header。插槽内通过 `actions` 调用 Undo、Redo、美化、最佳视图、校验和导入导出。若整个 Header 都不需要，配置 `regions.header = 'hidden'`。
+`header-start` 与 `header-actions` 使用 Vue Teleport 在当前应用内渲染，因此保留 provide/inject、响应式状态与组件生命周期。`header-actions` 只替换默认“校验 / 导入 / 导出”动作组，完整 `header` 的优先级更高。默认 Header 的最佳视图只保留在底部缩放区；若整个 Header 都不需要，配置 `regions.header = 'hidden'`。
+
+`actions.validate()` 以 `toolbar` 来源先更新 Nova 默认状态栏，再发送 `validation` 事件并返回 issues；Expose `validate()` 使用 `api` 来源。事件的 `valid` 仅在存在 error 时为 `false`，warning 不默认阻止发布。保存与发布仍由宿主负责。
+
+```js
+async function publishProcess(actions) {
+  const issues = actions.validate()
+  if (issues.some((issue) => issue.level === 'error')) return
+  await publishXml(actions.exportXml())
+}
+```
 
 编辑器属性面板应订阅 `selection-change`，该事件覆盖节点、连线、多选、清空和键盘选择。`element-click` 是点击观察事件，不能代替选择状态。宿主使用稳定 BPMN Element ID 关联业务配置，并自行拥有保存、发布、权限和服务端事务。
 
+## Mode 双向同步与副标题刷新
+
+```vue
+<script setup>
+import { ref } from 'vue'
+
+const studioRef = ref(null)
+const mode = ref('design')
+const summaries = new Map()
+const resolveSubtitle = ({ node }) => summaries.has(node.id)
+  ? summaries.get(node.id)
+  : undefined
+
+function updateSummary() {
+  summaries.set('ServiceTask_Archive', '归档到采购系统')
+  studioRef.value?.refreshPresentation()
+}
+</script>
+
+<template>
+  <BpmnStudio
+    ref="studioRef"
+    v-model:mode="mode"
+    :allowed-modes="['design', 'viewer']"
+    :node-subtitle-resolver="resolveSubtitle"
+    @mode-change="event => console.log(event.source)"
+  >
+    <template #header-start="{ mode: actualMode }">
+      <HostHeader :mode="actualMode" />
+    </template>
+  </BpmnStudio>
+</template>
+```
+
+Expose 的 `getMode()` / `setMode()` 使用 Shell 实际状态。Resolver 返回 `undefined` 保留默认值、`null` 移除副标题行、字符串替换显示；函数引用变化会自动刷新，稳定闭包内部数据变化需显式调用 `refreshPresentation()`。Resolver 只影响 Design/Viewer 标准卡片和 SVG，不覆盖 Instance Runtime Presentation，也不修改 XML、History、Selection 或 Viewport。
+
 ## 只读展示与审批轨迹
 
 ```vue

package/dist/index.d.ts

@@ -18,7 +18,12 @@ import type {
   BpmnStudioShell,
   ContextMenuRegistry,
   InteractionController,
+  NodeSubtitleResolver,
   StudioCommands,
+  StudioMode,
+  StudioModeChangeEvent,
+  StudioValidationEvent,
+  StudioValidationIssue,
   StudioShellActions,
   StudioShellOptions,
   StudioShellRegions,
@@ -37,6 +42,24 @@ import type {
   ViewerProjection,
 } from '@bpmn-nova/studio/viewer'
 
+export type {
+  BpmnEdge,
+  BpmnNode,
+  EdgeType,
+  ElementSelection,
+  EngineId,
+  LayoutOptions,
+  NodeType,
+  ProcessModel,
+} from '@bpmn-nova/studio'
+export type {
+  NodeSubtitleResolver,
+  NodeSubtitleResolverContext,
+  StudioValidationEvent,
+  StudioValidationIssue,
+  StudioValidationSource,
+} from '@bpmn-nova/studio'
+
 export {
   createContextMenuRegistry,
   createDefaultContextMenuRegistry,
@@ -74,11 +97,13 @@ export interface BpmnCanvasProps extends BpmnNovaVisualProps {
   iconRegistry?: IconRegistry
   nodeRenderers?: Record<string, Function>
   nodeRenderer?: Function
+  nodeSubtitleResolver?: NodeSubtitleResolver
   svgExport?: ViewerOptions['svgExport']
 }
 export interface BpmnCanvasExposed {
   getCanvas(): CanvasInstance | null
   fitView(): void
+  refreshPresentation(): void
   setTheme(theme: NovaThemeInput): NovaThemeState | undefined
   exportSvg(options?: SvgExportOptions): Promise<SvgExportArtifact> | undefined
   openSvgExportPreview(options?: SvgExportOptions & { previewTitle?: string; onDownload?: (artifact: SvgExportArtifact) => void }): SvgExportPreviewController | undefined
@@ -115,6 +140,7 @@ export interface BpmnStudioProps extends BpmnNovaVisualProps, BpmnModelProps {
   contextMenuRegistry?: ContextMenuRegistry
   nodeRenderers?: Record<string, Function>
   nodeRenderer?: Function
+  nodeSubtitleResolver?: NodeSubtitleResolver
   slotsConfig?: StudioShellSlots
   layout?: StudioShellOptions['layout']
   regions?: StudioShellRegions
@@ -136,8 +162,8 @@ export interface BpmnStudioProps extends BpmnNovaVisualProps, BpmnModelProps {
   runtimeTraceOptions?: ViewerOptions['runtimeTraceOptions']
   onTraceClick?: (event: RuntimeTraceClickEvent) => void
   onElementClick?: ViewerOptions['onElementClick']
-  mode?: 'design' | 'viewer' | 'instance'
-  allowedModes?: Array<'design' | 'viewer' | 'instance'>
+  mode?: StudioMode
+  allowedModes?: readonly StudioMode[]
   projection?: ViewerProjection
   responsive?: boolean
   projectionOptions?: Array<{ value: ViewerProjection; label: string }>
@@ -146,6 +172,12 @@ export interface BpmnStudioExposed {
   getStudio(): BpmnStudioController
   getShell(): BpmnStudioShell | null
   getActions(): StudioShellActions | null
+  getMode(): StudioMode | undefined
+  getAllowedModes(): readonly StudioMode[]
+  setMode(mode: StudioMode): boolean
+  setAllowedModes(modes: readonly StudioMode[]): readonly StudioMode[]
+  refreshPresentation(): void
+  validate(): StudioValidationIssue[]
   exportXml(engine?: EngineId): string
   fitView(): void
   setTheme(theme: NovaThemeInput): NovaThemeState | undefined
@@ -157,9 +189,11 @@ export interface BpmnStudioSlotContext {
   readonly shell: BpmnStudioShell
   readonly actions: StudioShellActions
   readonly state: Readonly<StudioState>
+  readonly mode: StudioMode
 }
 export interface BpmnStudioSlots {
   'header-start'?(context: BpmnStudioSlotContext): VNodeChild
+  'header-actions'?(context: BpmnStudioSlotContext): VNodeChild
   header?(context: BpmnStudioSlotContext): VNodeChild
 }
 export const BpmnStudio: DefineComponent<BpmnStudioProps> & {
@@ -184,6 +218,7 @@ export interface BpmnViewerProps extends BpmnNovaVisualProps, BpmnModelProps, Om
 export interface BpmnViewerExposed {
   getInstance(): ViewerInstance | null
   fitView(): void
+  refreshPresentation(): void
   setProjection(projection: ViewerProjection): void
   setDisplayOptions(options: Parameters<ViewerInstance['setDisplayOptions']>[0]): void
   setTheme(theme: NovaThemeInput): NovaThemeState | undefined
@@ -225,6 +260,9 @@ export interface BpmnStudioEmits {
   'scope-change': [activeScopeId: string, scopePath: StudioState['scopePath'], state: StudioState]
   'element-click': [payload: Parameters<NonNullable<ViewerOptions['onElementClick']>>[0]]
   'trace-click': [payload: RuntimeTraceClickEvent]
+  'update:mode': [mode: StudioMode]
+  'mode-change': [event: StudioModeChangeEvent]
+  validation: [event: StudioValidationEvent]
 }
 export interface BpmnDesignerEmits {
   change: [model: ProcessModel, reason: string, xml: string]

package/dist/index.js

@@ -58,18 +58,20 @@ export function useBpmnStudio(options = {}) {
 
 export const BpmnCanvas = defineComponent({
   name: 'BpmnNovaCanvas',
-  props: { studio: { type: Object, required: true }, interactions: Object, templates: Object, iconRegistry: Object, nodeRenderers: Object, nodeRenderer: Function, svgExport: Object, theme: [Object, String], onThemeChange: Function },
+  props: { studio: { type: Object, required: true }, interactions: Object, templates: Object, iconRegistry: Object, nodeRenderers: Object, nodeRenderer: Function, nodeSubtitleResolver: Function, svgExport: Object, theme: [Object, String], onThemeChange: Function },
   setup(props, { expose, attrs }) {
     const host = ref(null);
     let canvas = null;
+    const nodeSubtitleResolver = (context) => props.nodeSubtitleResolver?.(context);
     onMounted(() => {
       const interactions = props.interactions || createInteractionController({ studio: props.studio, templates: props.templates || createTemplateRegistry() });
-      canvas = new CoreCanvas({ container: host.value, studio: props.studio, interactions, theme: props.theme, onThemeChange: props.onThemeChange, rendererOptions: { iconRegistry: props.iconRegistry, nodeRenderers: props.nodeRenderers, nodeRenderer: props.nodeRenderer, svgExport: props.svgExport } });
+      canvas = new CoreCanvas({ container: host.value, studio: props.studio, interactions, theme: props.theme, onThemeChange: props.onThemeChange, nodeSubtitleResolver, rendererOptions: { iconRegistry: props.iconRegistry, nodeRenderers: props.nodeRenderers, nodeRenderer: props.nodeRenderer, svgExport: props.svgExport } });
       requestAnimationFrame(() => canvas.fitView());
     });
     onBeforeUnmount(() => canvas?.destroy());
     watch(() => props.theme, (value) => { if (value !== undefined) canvas?.setTheme(value); });
-    expose({ getCanvas: () => canvas, fitView: () => canvas?.fitView(), setTheme: (value) => canvas?.setTheme(value), exportSvg: (options) => canvas?.exportSvg(options), openSvgExportPreview: (options) => canvas?.openSvgExportPreview(options) });
+    watch(() => props.nodeSubtitleResolver, () => canvas?.refreshPresentation());
+    expose({ getCanvas: () => canvas, fitView: () => canvas?.fitView(), refreshPresentation: () => canvas?.refreshPresentation(), setTheme: (value) => canvas?.setTheme(value), exportSvg: (options) => canvas?.exportSvg(options), openSvgExportPreview: (options) => canvas?.openSvgExportPreview(options) });
     return () => h('div', { ...attrs, ref: host, style: { width: '100%', height: '100%', minHeight: '320px', ...(attrs.style || {}) } });
   },
 });
@@ -126,25 +128,31 @@ export const BpmnStudio = defineComponent({
   props: {
     studio: Object, model: Object, xml: String, engine: { type: String, default: 'flowable' }, propertiesProfile: String, allowedNodeTypes: Array, allowedEdgeTypes: Array,
     iconRegistry: Object, paletteRegistry: Object, propertiesRegistry: Object, templateRegistry: Object, contextMenuRegistry: Object,
-    nodeRenderers: Object, nodeRenderer: Function, slotsConfig: Object, layout: Function, regions: Object, leftWidth: Number, rightWidth: Number,
+    nodeRenderers: Object, nodeRenderer: Function, nodeSubtitleResolver: Function, slotsConfig: Object, layout: Function, regions: Object, leftWidth: Number, rightWidth: Number,
     runtime: Object, runtimePresenter: Function, runtimeTraceProjector: Function, runtimeAssetResolver: Function, runtimeTimelineRenderer: Function, onRuntimeTraceItemClick: Function, runtimeDetailsRenderer: Function, onRuntimeDetailsOpen: Function,
     runtimeTransitionDetailsRenderer: Function, onRuntimeTransitionDetailsOpen: Function,
     timeline: Object, runtimeDetails: Object, runtimeTraceOptions: Object, onTraceClick: Function, onElementClick: Function,
     mode: String, allowedModes: Array, projection: String, responsive: { type: Boolean, default: false }, projectionOptions: Array,
     theme: [Object, String], runtimeAppearance: Object, svgExport: Object, onThemeChange: Function,
   },
-  emits: ['change', 'selection-change', 'scope-change', 'element-click', 'trace-click'],
+  emits: ['change', 'selection-change', 'scope-change', 'element-click', 'trace-click', 'update:mode', 'mode-change', 'validation'],
   setup(props, { emit, expose, attrs, slots }) {
     const host = ref(null);
     const headerTarget = ref(null);
     const headerStartTarget = ref(null);
+    const headerActionsTarget = ref(null);
     const headerContext = ref(null);
     const headerStartContext = ref(null);
+    const headerActionsContext = ref(null);
     const owned = !props.studio;
     const studio = props.studio || createStudioController({ model: resolveModel(props), propertiesProfile: props.propertiesProfile, allowedNodeTypes: props.allowedNodeTypes, allowedEdgeTypes: props.allowedEdgeTypes });
     const state = reactive(studio.getState());
+    const actualMode = ref(props.mode || props.allowedModes?.[0] || 'design');
+    const nodeSubtitleResolver = (context) => props.nodeSubtitleResolver?.(context);
     let shell = null;
     let off = null;
+    let offMode = null;
+    let offValidation = null;
 
     const createTeleportSlot = (target, contextRef) => (context) => {
       target.value = context.container;
@@ -158,8 +166,18 @@ export const BpmnStudio = defineComponent({
     onMounted(() => {
       const shellSlots = { ...(props.slotsConfig || {}) };
       if (slots.header) shellSlots.header = createTeleportSlot(headerTarget, headerContext);
-      else if (!shellSlots.header && slots['header-start']) shellSlots.headerStart = createTeleportSlot(headerStartTarget, headerStartContext);
-      shell = new CoreStudioShell({ container: host.value, studio, iconRegistry: props.iconRegistry, paletteRegistry: props.paletteRegistry, propertiesRegistry: props.propertiesRegistry, templateRegistry: props.templateRegistry, contextMenuRegistry: props.contextMenuRegistry, rendererOptions: { nodeRenderers: props.nodeRenderers, nodeRenderer: props.nodeRenderer, runtimePresenter: props.runtimePresenter, runtimeTraceProjector: props.runtimeTraceProjector, runtimeAssetResolver: props.runtimeAssetResolver, runtimeTraceOptions: props.runtimeTraceOptions, runtimeTimelineRenderer: props.runtimeTimelineRenderer, timeline: props.timeline, runtimeDetails: props.runtimeDetails, onRuntimeTraceItemClick: (payload) => props.onRuntimeTraceItemClick?.(payload), runtimeDetailsRenderer: props.runtimeDetailsRenderer, onRuntimeDetailsOpen: (payload) => props.onRuntimeDetailsOpen?.(payload), runtimeTransitionDetailsRenderer: props.runtimeTransitionDetailsRenderer, onRuntimeTransitionDetailsOpen: (payload) => props.onRuntimeTransitionDetailsOpen?.(payload), onElementClick: (payload) => emit('element-click', payload), onTraceClick: (payload) => emit('trace-click', payload) }, slots: shellSlots, layout: props.layout, regions: props.regions, runtime: props.runtime, mode: props.mode, allowedModes: props.allowedModes, projection: props.projection, responsive: props.responsive, projectionOptions: props.projectionOptions, leftWidth: props.leftWidth, rightWidth: props.rightWidth, theme: props.theme, runtimeAppearance: props.runtimeAppearance, svgExport: props.svgExport, onThemeChange: props.onThemeChange });
+      else if (!shellSlots.header) {
+        if (slots['header-start']) shellSlots.headerStart = createTeleportSlot(headerStartTarget, headerStartContext);
+        if (slots['header-actions']) shellSlots.headerActions = createTeleportSlot(headerActionsTarget, headerActionsContext);
+      }
+      shell = new CoreStudioShell({ container: host.value, studio, iconRegistry: props.iconRegistry, paletteRegistry: props.paletteRegistry, propertiesRegistry: props.propertiesRegistry, templateRegistry: props.templateRegistry, contextMenuRegistry: props.contextMenuRegistry, rendererOptions: { nodeRenderers: props.nodeRenderers, nodeRenderer: props.nodeRenderer, nodeSubtitleResolver, runtimePresenter: props.runtimePresenter, runtimeTraceProjector: props.runtimeTraceProjector, runtimeAssetResolver: props.runtimeAssetResolver, runtimeTraceOptions: props.runtimeTraceOptions, runtimeTimelineRenderer: props.runtimeTimelineRenderer, timeline: props.timeline, runtimeDetails: props.runtimeDetails, onRuntimeTraceItemClick: (payload) => props.onRuntimeTraceItemClick?.(payload), runtimeDetailsRenderer: props.runtimeDetailsRenderer, onRuntimeDetailsOpen: (payload) => props.onRuntimeDetailsOpen?.(payload), runtimeTransitionDetailsRenderer: props.runtimeTransitionDetailsRenderer, onRuntimeTransitionDetailsOpen: (payload) => props.onRuntimeTransitionDetailsOpen?.(payload), onElementClick: (payload) => emit('element-click', payload), onTraceClick: (payload) => emit('trace-click', payload) }, slots: shellSlots, layout: props.layout, regions: props.regions, runtime: props.runtime, mode: props.mode, allowedModes: props.allowedModes, projection: props.projection, responsive: props.responsive, projectionOptions: props.projectionOptions, leftWidth: props.leftWidth, rightWidth: props.rightWidth, theme: props.theme, runtimeAppearance: props.runtimeAppearance, svgExport: props.svgExport, onThemeChange: props.onThemeChange });
+      actualMode.value = shell.getMode();
+      offMode = shell.subscribeMode((event) => {
+        actualMode.value = event.mode;
+        emit('update:mode', event.mode);
+        emit('mode-change', event);
+      });
+      offValidation = shell.subscribeValidation((event) => emit('validation', event));
       off = studio.subscribe((event) => {
         Object.assign(state, event.state);
         if (event.type === 'modelChanged') emit('change', studio.model, event.reason, studio.exportXml());
@@ -172,11 +190,16 @@ export const BpmnStudio = defineComponent({
       if (value && value !== studio.exportXml(props.engine)) studio.importXml(value, props.engine);
     });
     watch(() => props.runtime, (value) => { if (value !== undefined) shell?.setRuntime(value); });
-    watch(() => props.mode, (value) => { if (value) shell?.setMode(value); });
+    watch(() => [props.allowedModes, props.mode], ([allowedModes, mode]) => {
+      if (!shell) return;
+      if (allowedModes !== undefined) shell.setAllowedModes(allowedModes);
+      if (mode) shell.setMode(mode);
+    }, { deep: true });
     watch(() => props.projection, (value) => { if (value) shell?.setProjection(value); });
     watch(() => props.regions, (value) => { if (value !== undefined) shell?.setRegions(value); }, { deep: true });
     watch(() => props.theme, (value) => { if (value !== undefined) shell?.setTheme(value); });
     watch(() => props.runtimeAppearance, (value) => { if (value !== undefined) shell?.setRuntimeAppearance(value); });
+    watch(() => props.nodeSubtitleResolver, () => shell?.refreshPresentation());
     watch(() => [props.timeline, props.runtimeDetails, props.runtimeTraceOptions], ([timeline, runtimeDetails, runtimeTraceOptions]) => {
       if (!shell) return;
       shell.rendererOptions.timeline = timeline;
@@ -184,8 +207,8 @@ export const BpmnStudio = defineComponent({
       shell.rendererOptions.runtimeTraceOptions = runtimeTraceOptions;
       shell.viewer?.setDisplayOptions({ timeline, runtimeDetails, runtimeTraceOptions });
     });
-    onBeforeUnmount(() => { off?.(); shell?.destroy(); if (owned) studio.destroy(); });
-    expose({ getStudio: () => studio, getShell: () => shell, getActions: () => shell?.actions || null, exportXml: (engine) => studio.exportXml(engine), exportSvg: (options) => shell?.exportSvg(options), openSvgExportPreview: (options) => shell?.openSvgExportPreview(options), fitView: () => shell?.fitView(), setTheme: (value) => shell?.setTheme(value) });
+    onBeforeUnmount(() => { offMode?.(); offValidation?.(); off?.(); shell?.destroy(); if (owned) studio.destroy(); });
+    expose({ getStudio: () => studio, getShell: () => shell, getActions: () => shell?.actions || null, getMode: () => shell?.getMode(), getAllowedModes: () => shell?.getAllowedModes() || [], setMode: (value) => shell?.setMode(value) || false, setAllowedModes: (value) => shell?.setAllowedModes(value) || [], refreshPresentation: () => shell?.refreshPresentation(), validate: () => shell?.validate() || [], exportXml: (engine) => studio.exportXml(engine), exportSvg: (options) => shell?.exportSvg(options), openSvgExportPreview: (options) => shell?.openSvgExportPreview(options), fitView: () => shell?.fitView(), setTheme: (value) => shell?.setTheme(value) });
     const renderSlot = (name, target, contextRef) => {
       if (!slots[name] || !target.value || !contextRef.value) return null;
       return h(Teleport, { to: target.value }, slots[name]({
@@ -193,12 +216,14 @@ export const BpmnStudio = defineComponent({
         shell: contextRef.value.shell,
         actions: contextRef.value.actions,
         state,
+        mode: actualMode.value,
       }));
     };
     return () => h(Fragment, null, [
       h('div', { ...attrs, ref: host, style: { width: '100%', height: '100%', minHeight: '520px', ...(attrs.style || {}) } }),
       renderSlot('header', headerTarget, headerContext),
       renderSlot('header-start', headerStartTarget, headerStartContext),
+      renderSlot('header-actions', headerActionsTarget, headerActionsContext),
     ]);
   },
 });
@@ -265,6 +290,7 @@ export const BpmnViewer = defineComponent({
     iconRegistry: Object,
     nodeRenderers: Object,
     nodeRenderer: Function,
+    nodeSubtitleResolver: Function,
     timeline: Object,
     runtimeDetails: Object,
     runtimePresenter: Function,
@@ -290,6 +316,7 @@ export const BpmnViewer = defineComponent({
   setup(props, { emit, expose, attrs }) {
     const host = ref(null);
     let instance = null;
+    const nodeSubtitleResolver = (context) => props.nodeSubtitleResolver?.(context);
     onMounted(() => {
       instance = new CoreViewer({
         container: host.value,
@@ -298,6 +325,7 @@ export const BpmnViewer = defineComponent({
         iconRegistry: props.iconRegistry,
         nodeRenderers: props.nodeRenderers,
         nodeRenderer: props.nodeRenderer,
+        nodeSubtitleResolver,
         timeline: props.timeline,
         runtimeDetails: props.runtimeDetails,
         runtimePresenter: props.runtimePresenter,
@@ -327,10 +355,11 @@ export const BpmnViewer = defineComponent({
     watch(() => props.projection, (value) => instance?.setProjection(value));
     watch(() => props.theme, (value) => { if (value !== undefined) instance?.setTheme(value); });
     watch(() => props.runtimeAppearance, (value) => { if (value !== undefined) instance?.setRuntimeAppearance(value); });
+    watch(() => props.nodeSubtitleResolver, () => instance?.refreshPresentation());
     watch(() => [props.timeline, props.runtimeDetails, props.runtimeTraceOptions, props.runtimeAssetResolver], ([timeline, runtimeDetails, runtimeTraceOptions, runtimeAssetResolver]) => instance?.setDisplayOptions({ timeline, runtimeDetails, runtimeTraceOptions, runtimeAssetResolver }));
     watch(() => props.model, (value) => { if (value) instance?.setModel(value); });
     watch(() => props.xml, (value) => { if (value) instance?.setModel(importBpmn(value, props.engine)); });
-    expose({ getInstance: () => instance, fitView: () => instance?.fitView(), setProjection: (p) => instance?.setProjection(p), setDisplayOptions: (value) => instance?.setDisplayOptions(value), setTheme: (value) => instance?.setTheme(value), exportSvg: (options) => instance?.exportSvg(options), openSvgExportPreview: (options) => instance?.openSvgExportPreview(options) });
+    expose({ getInstance: () => instance, fitView: () => instance?.fitView(), refreshPresentation: () => instance?.refreshPresentation(), setProjection: (p) => instance?.setProjection(p), setDisplayOptions: (value) => instance?.setDisplayOptions(value), setTheme: (value) => instance?.setTheme(value), exportSvg: (options) => instance?.exportSvg(options), openSvgExportPreview: (options) => instance?.openSvgExportPreview(options) });
     return () => h('div', { ...attrs, ref: host, style: { width: '100%', height: '100%', minHeight: '260px', ...(attrs.style || {}) } });
   },
 });

package/dist/styles.css

@@ -511,8 +511,8 @@
 .mb-node-event,
 .mb-node-boundary { display: grid; place-items: center; z-index: 7; }
 .mb-event-shape {
-  width: 46px;
-  height: 46px;
+  width: var(--mb-event-shape-size, 46px);
+  height: var(--mb-event-shape-size, 46px);
   box-sizing: border-box;
   display: grid;
   place-items: center;
@@ -523,7 +523,7 @@
   box-shadow: var(--nova-shadow-sm);
   position: relative;
 }
-.mb-node-boundary .mb-event-shape { width: 40px; height: 40px; border-width: 2px; }
+.mb-node-boundary .mb-event-shape { width: var(--mb-event-shape-size, 40px); height: var(--mb-event-shape-size, 40px); border-width: 2px; }
 .mb-event-shape[data-stage="intermediate"],
 .mb-node-boundary .mb-event-shape { box-shadow: inset 0 0 0 3px var(--nova-color-surface), inset 0 0 0 4.5px var(--nova-color-text-muted, #8796a9), var(--nova-shadow-sm); }
 .mb-event-shape[data-stage="end"] { border-width: 4px; border-color: var(--nova-color-text-secondary); }
@@ -1159,6 +1159,7 @@ textarea.property-control { resize: vertical; }
 .nova-studio-projection-switch button:hover { color: var(--nova-tone-primary-foreground, #4d59ca); background: var(--nova-color-primary-soft, #f4f5ff); }.nova-studio-projection-switch button.is-active { color: var(--nova-tone-primary-foreground, #4654c8); background: var(--nova-color-primary-soft, #eef0ff); font-weight: var(--nova-font-weight-semibold); }
 .nova-studio-tools { min-width: 0; overflow: visible; display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
 .nova-studio-tools::-webkit-scrollbar { display: none; }
+.nova-studio-header-actions { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
 .nova-studio-tool-divider { flex: none; width: 1px; height: 20px; margin: 0 2px; background: var(--nova-color-divider, #e4e8f0); }
 .nova-studio-tool { flex: none; min-height: 32px; border: 1px solid var(--nova-color-border, #e2e6ef); border-radius: 7px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; color: var(--nova-color-text-secondary, #4c586d); background: var(--nova-color-surface, #fff); font-size: var(--nova-font-size-sm); line-height: 18px; white-space: nowrap; cursor: pointer; }
 .nova-studio-tool:focus { outline: none; }.nova-studio-tool:focus-visible { outline: 2px solid var(--nova-color-focus-ring, #aeb7ff); outline-offset: 1px; }