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

package/README.md

@@ -1,10 +1,10 @@
 # @bpmn-nova/vue
 
-BPMN Nova 的 Vue 3.3+ Adapter，提供 Studio、Designer、Viewer、审批轨迹、Properties 和 Expose 实例方法。
+BPMN Nova 的 Vue 3.3+ Adapter，提供 Studio、Designer、Viewer、审批轨迹、Palette、Properties 和 Expose 实例方法。
 
 > **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.1-preview`。Vue 由宿主工程提供，本包不会替应用选择或升级框架版本。
+> 当前版本为 `0.3.3-preview`。Vue 由宿主工程提供，本包不会替应用选择或升级框架版本。
 
 ![BPMN Nova Vue 流程工作台](https://raw.githubusercontent.com/daxiangme/bpmn-nova/dev/docs/assets/bpmn-nova-designer.jpg)
 
@@ -20,6 +20,8 @@ import '@bpmn-nova/vue/styles.css'
 
 只安装本包；`@bpmn-nova/studio` 会作为内部依赖自动解析。容器必须有明确高度。
 
+使用代码生成助手或 IDE Agent 接入时，从随包的 `llms.txt` 开始；需要完整接口和定制资料时再读取 `llms-full.txt`。两份文件都包含在 npm tarball 中，不依赖源码仓库可见性。
+
 ## 流程设计
 
 ```vue
@@ -28,7 +30,7 @@ import { ref } from 'vue'
 import { BpmnStudio } from '@bpmn-nova/vue'
 import '@bpmn-nova/vue/styles.css'
 
-defineProps({ xml: String })
+const props = defineProps({ initialXml: String })
 const studioRef = ref(null)
 
 function handleChange(model, reason, nextXml) {
@@ -40,17 +42,126 @@ function handleChange(model, reason, nextXml) {
   <div style="height: 720px">
     <BpmnStudio
       ref="studioRef"
-      :xml="xml"
+      :xml="props.initialXml"
       engine="flowable"
       mode="design"
+      :allowed-modes="['design']"
+      theme="auto"
+      @change="handleChange"
+    />
+  </div>
+</template>
+```
+
+Expose 提供 `getActions()`、`validate()`、`exportXml()`、`fitView()`、`setTheme()`、`exportSvg()` 和 `openSvgExportPreview()`。
+
+`xml`/`model` 是外部替换输入，`change` 的 XML 是草稿输出。宿主回写完全相同的导出 XML 不会重新导入或清空撤销历史；切换服务器 revision 或流程时传入不同 XML 会替换模型。Activiti 宿主应显式使用 `engine="activiti"`。
+
+## 组合宿主头部与业务属性面板
+
+默认 `BpmnStudio` 是包含 Header、Palette、Canvas、Properties 和 Statusbar 的完整工作台。下面的接入显式隐藏 Nova Properties，保留 Nova Palette，并只替换 Header 左侧品牌区：
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import { BpmnStudio } from '@bpmn-nova/vue'
+import '@bpmn-nova/vue/styles.css'
+
+const studioRef = ref(null)
+const selectedElement = ref(null)
+const supportedNodeTypes = ['startEvent', 'userTask', 'exclusiveGateway', 'endEvent']
+
+function handleSelectionChange(selection, element) {
+  selectedElement.value = selection ? element : null
+}
+</script>
+
+<template>
+  <div class="process-design-workbench">
+    <BpmnStudio
+      ref="studioRef"
+      :xml="xml"
+      engine="activiti"
+      mode="design"
+      :allowed-modes="['design']"
+      :allowed-node-types="supportedNodeTypes"
+      :allowed-edge-types="['sequenceFlow']"
+      :regions="{ right: 'hidden' }"
       theme="auto"
       @change="handleChange"
+      @selection-change="handleSelectionChange"
+      @validation="handleValidation"
+    >
+      <template #header-start="{ state, actions }">
+        <button type="button" @click="back">← 返回审批列表</button>
+        <ApprovalIcon :icon="icon" />
+        <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
+      v-if="selectedElement"
+      :element-id="selectedElement.id"
     />
   </div>
 </template>
 ```
 
-Expose 提供 `exportXml()`、`fitView()`、`setTheme()`、`exportSvg()` 和 `openSvgExportPreview()`。
+`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。
 
 ## 只读展示与审批轨迹
 
@@ -164,12 +275,16 @@ studioRef.value?.openSvgExportPreview({
 
 本包还导出：
 
-- `BpmnDesigner`、`BpmnCanvas`、`BpmnPropertiesPanel`
+- `BpmnDesigner`、`BpmnCanvas`、`BpmnPalettePanel`、`BpmnPropertiesPanel`
 - `useBpmnStudio`
 - `createVuePropertyComponent`
 - `createVueRuntimeDetailsComponent`
 - `createVueRuntimeTransitionDetailsComponent`
 - `createVueRuntimeTimelineComponent`
+- `createStudioController`、`createEmptyProcess`、`importBpmn`、`exportBpmn`
+- Palette、Properties、Context Menu、Icon 和 Template Registry 的公开创建函数
+
+完整工作台可通过 `allowedNodeTypes` 与 `allowedEdgeTypes` 限制宿主支持的图元类型，通过 `allowedModes` 限制可切换的工作台模式。图元限制同时作用于 XML 导入、Palette、连接、快捷新增、模板和节点类型转换。
 
 ## 常见问题
 
@@ -181,11 +296,11 @@ studioRef.value?.openSvgExportPreview({
 
 ## 文档与 AI
 
+- npm 包内 `llms.txt`：可执行安装入口
+- npm 包内 `llms-full.txt`：完整 AI 上下文
 - [完整项目能力](https://github.com/daxiangme/bpmn-nova)
 - [React/Vue 组件说明](https://github.com/daxiangme/bpmn-nova/blob/dev/docs/COMPONENTS.md)
 - [公开 Interface](https://github.com/daxiangme/bpmn-nova/blob/dev/docs/API.md)
-- [AI 接入入口](https://raw.githubusercontent.com/daxiangme/bpmn-nova/dev/llms.txt)
-- [AI 完整上下文](https://raw.githubusercontent.com/daxiangme/bpmn-nova/dev/llms-full.txt)
 
 ## License
 

package/dist/index.d.ts

@@ -1,8 +1,14 @@
-import type { Component, DefineComponent } from 'vue'
-import type { BpmnEdge, BpmnNode, ElementSelection, EngineId, LayoutOptions, ProcessModel } from '@bpmn-nova/studio'
+import type { Component, DefineComponent, VNodeChild } from 'vue'
+import type { BpmnEdge, BpmnNode, EdgeType, ElementSelection, EngineId, LayoutOptions, NodeType, ProcessModel } from '@bpmn-nova/studio'
 import type { BpmnDesigner as DesignerInstance } from '@bpmn-nova/studio/designer'
 import type { IconRegistry } from '@bpmn-nova/studio'
-import type { PaletteRegistry } from '@bpmn-nova/studio'
+import type {
+  PaletteItemRenderer,
+  PalettePanel as PalettePanelInstance,
+  PaletteProvider,
+  PaletteRegistry,
+  PaletteSectionRenderer,
+} from '@bpmn-nova/studio'
 import type { PropertiesContext, PropertiesProvider, PropertiesRegistry, PropertyEntry } from '@bpmn-nova/studio'
 import type { ProcessInstanceSnapshot } from '@bpmn-nova/studio/runtime'
 import type { SvgExportArtifact, SvgExportOptions, SvgExportPreviewController } from '@bpmn-nova/studio/export-svg'
@@ -10,9 +16,17 @@ import type {
   BpmnCanvas as CanvasInstance,
   BpmnStudioController,
   BpmnStudioShell,
+  ContextMenuRegistry,
   InteractionController,
+  NodeSubtitleResolver,
   StudioCommands,
+  StudioMode,
+  StudioModeChangeEvent,
+  StudioValidationEvent,
+  StudioValidationIssue,
+  StudioShellActions,
   StudioShellOptions,
+  StudioShellRegions,
   StudioShellSlots,
   StudioState,
   TemplateRegistry,
@@ -28,13 +42,41 @@ import type {
   ViewerProjection,
 } from '@bpmn-nova/studio/viewer'
 
+export type {
+  NodeSubtitleResolver,
+  NodeSubtitleResolverContext,
+  StudioValidationEvent,
+  StudioValidationIssue,
+  StudioValidationSource,
+} from '@bpmn-nova/studio'
+
+export {
+  createContextMenuRegistry,
+  createDefaultContextMenuRegistry,
+  createDefaultIconRegistry,
+  createDefaultPaletteRegistry,
+  createDefaultPropertiesRegistry,
+  createEmptyProcess,
+  createPaletteRegistry,
+  createPropertiesRegistry,
+  createStudioController,
+  createTemplateRegistry,
+  exportBpmn,
+  importBpmn,
+  propertyEntry,
+  propertyGroup,
+  registerActivitiProperties,
+  registerBpmnProperties,
+  registerFlowableProperties,
+} from '@bpmn-nova/studio'
+
 export interface BpmnNovaVisualProps {
   theme?: NovaThemeInput
   runtimeAppearance?: RuntimeAppearanceOptions
   onThemeChange?: (state: NovaThemeState) => void
 }
 export interface BpmnModelProps { model?: ProcessModel; xml?: string; engine?: EngineId }
-export interface UseBpmnStudioOptions extends BpmnModelProps { studio?: BpmnStudioController; propertiesProfile?: 'business' | 'developer' }
+export interface UseBpmnStudioOptions extends BpmnModelProps { studio?: BpmnStudioController; propertiesProfile?: 'business' | 'developer'; allowedNodeTypes?: NodeType[]; allowedEdgeTypes?: EdgeType[] }
 export interface UseBpmnStudioResult { studio: BpmnStudioController; state: StudioState; commands: StudioCommands }
 export function useBpmnStudio(options?: UseBpmnStudioOptions): UseBpmnStudioResult
 
@@ -45,28 +87,53 @@ 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
 }
 export const BpmnCanvas: DefineComponent<BpmnCanvasProps>
 
+export interface BpmnPalettePanelProps extends BpmnNovaVisualProps {
+  studio: BpmnStudioController
+  interactions?: InteractionController
+  templates?: TemplateRegistry
+  registry?: PaletteRegistry
+  providers?: PaletteProvider[]
+  canvas?: CanvasInstance | null
+  iconRegistry?: IconRegistry
+  renderItem?: PaletteItemRenderer
+  renderSection?: PaletteSectionRenderer
+}
+export interface BpmnPalettePanelExposed {
+  getPanel(): PalettePanelInstance | null
+  render(): void
+  setTheme(theme: NovaThemeInput): NovaThemeState | undefined
+}
+export const BpmnPalettePanel: DefineComponent<BpmnPalettePanelProps>
+
 export interface BpmnStudioProps extends BpmnNovaVisualProps, BpmnModelProps {
   studio?: BpmnStudioController
   propertiesProfile?: 'business' | 'developer'
+  allowedNodeTypes?: NodeType[]
+  allowedEdgeTypes?: EdgeType[]
   iconRegistry?: IconRegistry
   paletteRegistry?: PaletteRegistry
   propertiesRegistry?: PropertiesRegistry
   templateRegistry?: TemplateRegistry
+  contextMenuRegistry?: ContextMenuRegistry
   nodeRenderers?: Record<string, Function>
   nodeRenderer?: Function
+  nodeSubtitleResolver?: NodeSubtitleResolver
   slotsConfig?: StudioShellSlots
   layout?: StudioShellOptions['layout']
+  regions?: StudioShellRegions
   leftWidth?: number
   rightWidth?: number
   runtime?: ProcessInstanceSnapshot | null
@@ -85,7 +152,8 @@ export interface BpmnStudioProps extends BpmnNovaVisualProps, BpmnModelProps {
   runtimeTraceOptions?: ViewerOptions['runtimeTraceOptions']
   onTraceClick?: (event: RuntimeTraceClickEvent) => void
   onElementClick?: ViewerOptions['onElementClick']
-  mode?: 'design' | 'viewer' | 'instance'
+  mode?: StudioMode
+  allowedModes?: readonly StudioMode[]
   projection?: ViewerProjection
   responsive?: boolean
   projectionOptions?: Array<{ value: ViewerProjection; label: string }>
@@ -93,13 +161,34 @@ export interface BpmnStudioProps extends BpmnNovaVisualProps, BpmnModelProps {
 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
   exportSvg(options?: SvgExportOptions): Promise<SvgExportArtifact> | undefined
   openSvgExportPreview(options?: SvgExportOptions & { previewTitle?: string; onDownload?: (artifact: SvgExportArtifact) => void }): SvgExportPreviewController | null | undefined
 }
-export const BpmnStudio: DefineComponent<BpmnStudioProps>
+export interface BpmnStudioSlotContext {
+  readonly studio: BpmnStudioController
+  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> & {
+  new(): { $slots: BpmnStudioSlots }
+}
 
 export interface BpmnDesignerProps extends BpmnNovaVisualProps, BpmnModelProps { svgExport?: ViewerOptions['svgExport'] }
 export interface BpmnDesignerExposed {
@@ -119,6 +208,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
@@ -160,6 +250,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

@@ -1,9 +1,30 @@
-import { createApp, defineComponent, h, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
+import { Fragment, Teleport, createApp, defineComponent, h, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
 import { BpmnDesigner as CoreDesigner } from '@bpmn-nova/studio/designer';
 import { BpmnViewer as CoreViewer } from '@bpmn-nova/studio/viewer';
 import { importBpmn, exportBpmn } from '@bpmn-nova/studio';
 import { createEmptyProcess } from '@bpmn-nova/studio';
 import { BpmnCanvas as CoreCanvas, BpmnStudioShell as CoreStudioShell, createInteractionController, createStudioController, createTemplateRegistry } from '@bpmn-nova/studio';
+import { PalettePanel as CorePalettePanel, createDefaultPaletteRegistry as createCoreDefaultPaletteRegistry } from '@bpmn-nova/studio';
+
+export {
+  createContextMenuRegistry,
+  createDefaultContextMenuRegistry,
+  createDefaultIconRegistry,
+  createDefaultPaletteRegistry,
+  createDefaultPropertiesRegistry,
+  createEmptyProcess,
+  createPaletteRegistry,
+  createPropertiesRegistry,
+  createStudioController,
+  createTemplateRegistry,
+  exportBpmn,
+  importBpmn,
+  propertyEntry,
+  propertyGroup,
+  registerActivitiProperties,
+  registerBpmnProperties,
+  registerFlowableProperties,
+} from '@bpmn-nova/studio';
 
 export function createVueRuntimeDetailsComponent(Component) {
   return ({ container, ...context }) => {
@@ -28,7 +49,7 @@ function resolveModel(props) {
 }
 
 export function useBpmnStudio(options = {}) {
-  const studio = options.studio || createStudioController({ model: resolveModel(options), propertiesProfile: options.propertiesProfile });
+  const studio = options.studio || createStudioController({ model: resolveModel(options), propertiesProfile: options.propertiesProfile, allowedNodeTypes: options.allowedNodeTypes, allowedEdgeTypes: options.allowedEdgeTypes });
   const state = reactive(studio.getState());
   const off = studio.subscribe((event) => Object.assign(state, event.state));
   onBeforeUnmount(() => { off(); if (!options.studio) studio.destroy(); });
@@ -37,56 +58,148 @@ 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 || {}) } });
   },
 });
 
+export const BpmnPalettePanel = defineComponent({
+  name: 'BpmnNovaPalettePanel',
+  props: {
+    studio: { type: Object, required: true },
+    interactions: Object,
+    templates: Object,
+    registry: Object,
+    providers: Array,
+    canvas: Object,
+    iconRegistry: Object,
+    renderItem: Function,
+    renderSection: Function,
+    theme: [Object, String],
+    onThemeChange: Function,
+  },
+  setup(props, { expose, attrs }) {
+    const host = ref(null);
+    let panel = null;
+
+    const mountPanel = () => {
+      if (!host.value || !props.studio) return;
+      panel?.destroy();
+      const interactions = props.interactions || createInteractionController({ studio: props.studio, templates: props.templates || createTemplateRegistry() });
+      const registry = props.registry || createCoreDefaultPaletteRegistry({ providers: props.providers || [] });
+      panel = new CorePalettePanel({
+        container: host.value,
+        registry,
+        studio: props.studio,
+        interactions,
+        canvas: props.canvas || null,
+        iconRegistry: props.iconRegistry,
+        renderItem: props.renderItem,
+        renderSection: props.renderSection,
+        theme: props.theme,
+        onThemeChange: props.onThemeChange,
+      });
+    };
+
+    onMounted(mountPanel);
+    watch(() => [props.studio, props.registry, props.interactions, props.templates, props.canvas, props.providers, props.iconRegistry, props.renderItem, props.renderSection], mountPanel);
+    watch(() => props.theme, (value) => { if (value !== undefined) panel?.setTheme(value); });
+    onBeforeUnmount(() => panel?.destroy());
+    expose({ getPanel: () => panel, render: () => panel?.render(), setTheme: (value) => panel?.setTheme(value) });
+    return () => h('div', { ...attrs, ref: host, style: { width: '100%', height: '100%', overflow: 'auto', ...(attrs.style || {}) } });
+  },
+});
+
 export const BpmnStudio = defineComponent({
   name: 'BpmnNovaStudio',
   props: {
-    studio: Object, model: Object, xml: String, engine: { type: String, default: 'flowable' }, propertiesProfile: String,
-    iconRegistry: Object, paletteRegistry: Object, propertiesRegistry: Object, templateRegistry: Object,
-    nodeRenderers: Object, nodeRenderer: Function, slotsConfig: Object, layout: Function, leftWidth: Number, rightWidth: Number,
+    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, 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, projection: String, responsive: { type: Boolean, default: false }, projectionOptions: Array,
+    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'],
-  setup(props, { emit, expose, attrs }) {
+  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 });
+    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;
+      contextRef.value = context;
+      return () => {
+        if (target.value === context.container) target.value = null;
+        if (contextRef.value === context) contextRef.value = null;
+      };
+    };
+
     onMounted(() => {
-      shell = new CoreStudioShell({ container: host.value, studio, iconRegistry: props.iconRegistry, paletteRegistry: props.paletteRegistry, propertiesRegistry: props.propertiesRegistry, templateRegistry: props.templateRegistry, 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: props.slotsConfig || {}, layout: props.layout, runtime: props.runtime, mode: props.mode, 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 });
+      const shellSlots = { ...(props.slotsConfig || {}) };
+      if (slots.header) shellSlots.header = createTeleportSlot(headerTarget, headerContext);
+      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());
         if (event.type === 'selectionChanged') emit('selection-change', studio.selection, studio.getSelectedElement());
         if (event.type === 'scopeChanged') emit('scope-change', event.activeScopeId, event.scopePath, studio.getState());
       });
     });
     watch(() => props.model, (value) => { if (value && value !== studio.model) studio.setModel(value); });
-    watch(() => props.xml, (value) => { if (value) studio.importXml(value, props.engine); });
+    watch(() => props.xml, (value) => {
+      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;
@@ -94,9 +207,24 @@ 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, exportXml: (engine) => studio.exportXml(engine), exportSvg: (options) => shell?.exportSvg(options), openSvgExportPreview: (options) => shell?.openSvgExportPreview(options), fitView: () => shell?.canvas?.fitView(), setTheme: (value) => shell?.setTheme(value) });
-    return () => h('div', { ...attrs, ref: host, style: { width: '100%', height: '100%', minHeight: '520px', ...(attrs.style || {}) } });
+    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]({
+        studio: contextRef.value.studio,
+        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),
+    ]);
   },
 });
 
@@ -162,6 +290,7 @@ export const BpmnViewer = defineComponent({
     iconRegistry: Object,
     nodeRenderers: Object,
     nodeRenderer: Function,
+    nodeSubtitleResolver: Function,
     timeline: Object,
     runtimeDetails: Object,
     runtimePresenter: Function,
@@ -187,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,
@@ -195,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,
@@ -224,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 || {}) } });
   },
 });