@bpmn-nova/vue 0.3.1-preview → 0.3.2-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.2-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,9 +42,10 @@ 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"
     />
@@ -50,7 +53,63 @@ function handleChange(model, reason, nextXml) {
 </template>
 ```
 
-Expose 提供 `exportXml()`、`fitView()`、`setTheme()`、`exportSvg()` 和 `openSvgExportPreview()`。
+Expose 提供 `getActions()`、`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"
+    >
+      <template #header-start="{ state, actions }">
+        <button type="button" @click="back">← 返回审批列表</button>
+        <ApprovalIcon :icon="icon" />
+        <strong>{{ processName }}</strong>
+        <span>{{ processType }}</span>
+      </template>
+    </BpmnStudio>
+
+    <DxProcessProperties
+      v-if="selectedElement"
+      :element-id="selectedElement.id"
+    />
+  </div>
+</template>
+```
+
+`header-start` 使用 Vue Teleport 在当前应用内渲染，因此保留 provide/inject、响应式状态与组件生命周期；`header` 可完整替换 Header。插槽内通过 `actions` 调用 Undo、Redo、美化、最佳视图、校验和导入导出。若整个 Header 都不需要，配置 `regions.header = 'hidden'`。
+
+编辑器属性面板应订阅 `selection-change`，该事件覆盖节点、连线、多选、清空和键盘选择。`element-click` 是点击观察事件，不能代替选择状态。宿主使用稳定 BPMN Element ID 关联业务配置，并自行拥有保存、发布、权限和服务端事务。
 
 ## 只读展示与审批轨迹
 
@@ -164,12 +223,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 +244,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,12 @@ import type {
   BpmnCanvas as CanvasInstance,
   BpmnStudioController,
   BpmnStudioShell,
+  ContextMenuRegistry,
   InteractionController,
   StudioCommands,
+  StudioShellActions,
   StudioShellOptions,
+  StudioShellRegions,
   StudioShellSlots,
   StudioState,
   TemplateRegistry,
@@ -28,13 +37,33 @@ import type {
   ViewerProjection,
 } from '@bpmn-nova/studio/viewer'
 
+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
 
@@ -56,17 +85,39 @@ export interface BpmnCanvasExposed {
 }
 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
   slotsConfig?: StudioShellSlots
   layout?: StudioShellOptions['layout']
+  regions?: StudioShellRegions
   leftWidth?: number
   rightWidth?: number
   runtime?: ProcessInstanceSnapshot | null
@@ -86,6 +137,7 @@ export interface BpmnStudioProps extends BpmnNovaVisualProps, BpmnModelProps {
   onTraceClick?: (event: RuntimeTraceClickEvent) => void
   onElementClick?: ViewerOptions['onElementClick']
   mode?: 'design' | 'viewer' | 'instance'
+  allowedModes?: Array<'design' | 'viewer' | 'instance'>
   projection?: ViewerProjection
   responsive?: boolean
   projectionOptions?: Array<{ value: ViewerProjection; label: string }>
@@ -93,13 +145,26 @@ export interface BpmnStudioProps extends BpmnNovaVisualProps, BpmnModelProps {
 export interface BpmnStudioExposed {
   getStudio(): BpmnStudioController
   getShell(): BpmnStudioShell | null
+  getActions(): StudioShellActions | null
   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>
+}
+export interface BpmnStudioSlots {
+  'header-start'?(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 {

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(); });
@@ -53,38 +74,107 @@ export const BpmnCanvas = defineComponent({
   },
 });
 
+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, 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 }) {
+  setup(props, { emit, expose, attrs, slots }) {
     const host = ref(null);
+    const headerTarget = ref(null);
+    const headerStartTarget = ref(null);
+    const headerContext = ref(null);
+    const headerStartContext = 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());
     let shell = null;
     let off = 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 && 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 });
       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.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.timeline, props.runtimeDetails, props.runtimeTraceOptions], ([timeline, runtimeDetails, runtimeTraceOptions]) => {
@@ -95,8 +185,21 @@ export const BpmnStudio = defineComponent({
       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 || {}) } });
+    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) });
+    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,
+      }));
+    };
+    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),
+    ]);
   },
 });
 

package/dist/styles.css

@@ -1141,6 +1141,8 @@ textarea.property-control { resize: vertical; }
 
 /* @bpmn-nova/internal/studio */
 .nova-studio-shell { --nova-left-width: 244px; --nova-right-width: 360px; --nova-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif; --nova-font-size-xs: 10px; --nova-font-size-sm: 12px; --nova-font-size-md: 14px; --nova-font-size-lg: 16px; --nova-font-weight-regular: 400; --nova-font-weight-medium: 500; --nova-font-weight-semibold: 600; --nova-font-weight-bold: 700; position: relative; isolation: isolate; width: 100%; height: 100%; min-height: 520px; overflow: hidden; display: grid; grid-template-rows: 58px minmax(0, 1fr); color: var(--nova-color-text, #263148); background: var(--nova-color-canvas, #f6f7fb); font-family: var(--nova-font-family); }
+.nova-studio-shell.is-header-hidden { grid-template-rows: minmax(0, 1fr); }
+.nova-studio-header[hidden], .nova-studio-left[hidden], .nova-studio-right[hidden], .nova-studio-statusbar[hidden] { display: none !important; }
 .nova-studio-header { min-width: 0; border-bottom: 1px solid var(--nova-color-divider, #e4e8f0); background: var(--nova-color-surface, #fff); display: grid; grid-template-columns: minmax(180px, auto) auto minmax(0, 1fr); align-items: center; gap: 18px; padding: 0 12px 0 14px; }
 .nova-studio-brand { min-width: 0; display: flex; align-items: center; gap: 10px; }
 .nova-studio-brand-mark { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--nova-color-text-inverse, #fff); background: linear-gradient(145deg, var(--nova-color-primary, #5362da), var(--nova-color-primary-hover)); font-size: var(--nova-font-size-md); font-weight: var(--nova-font-weight-bold); box-shadow: var(--nova-shadow-sm); }
@@ -1194,7 +1196,11 @@ textarea.property-control { resize: vertical; }
 .nova-studio-beautify-action-icon > .nova-icon-svg { width: 14px; height: 14px; }
 .nova-studio-beautify-action strong { font-size: var(--nova-font-size-sm); font-weight: var(--nova-font-weight-semibold); line-height: 18px; }.nova-studio-beautify-action small { color: #778195; color: var(--nova-color-text-muted, #778195); font-size: var(--nova-font-size-xs); line-height: 14px; }
 .nova-studio-body { min-width: 0; min-height: 0; display: grid; grid-template-columns: var(--nova-left-width) minmax(320px, 1fr) var(--nova-right-width); }
+.nova-studio-body.is-left-hidden { grid-template-columns: minmax(320px, 1fr) var(--nova-right-width); }
+.nova-studio-body.is-right-hidden { grid-template-columns: var(--nova-left-width) minmax(320px, 1fr); }
+.nova-studio-body.is-left-hidden.is-right-hidden { grid-template-columns: minmax(320px, 1fr); }
 .nova-studio-body.is-readonly { grid-template-columns: minmax(320px, 1fr) var(--nova-right-width); }
+.nova-studio-body.is-readonly.is-right-hidden { grid-template-columns: minmax(320px, 1fr); }
 .nova-studio-body.is-readonly .nova-studio-left { display: none; }
 .nova-studio-left, .nova-studio-right, .nova-studio-canvas-column, .nova-studio-canvas { min-width: 0; min-height: 0; overflow: hidden; }
 .nova-studio-left { border-right: 1px solid var(--nova-color-divider, #e4e8f0); background: var(--nova-color-surface, #fff); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
@@ -1206,6 +1212,7 @@ textarea.property-control { resize: vertical; }
 .nova-studio-left::-webkit-scrollbar-thumb:hover, .nova-studio-right::-webkit-scrollbar-thumb:hover { background: #c1c9d5; background: var(--nova-color-text-muted); }
 .nova-studio-left::-webkit-scrollbar-button, .nova-studio-right::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
 .nova-studio-canvas-column { display: grid; grid-template-rows: minmax(0, 1fr) 35px; background: var(--nova-color-canvas, #f7f8fc); }
+.nova-studio-canvas-column.is-footer-hidden { grid-template-rows: minmax(0, 1fr); }
 .nova-studio-canvas-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
 .nova-studio-canvas { position: relative; }
 .nova-studio-canvas-stage > .nova-studio-canvas { width: 100%; height: 100%; }
@@ -1422,6 +1429,7 @@ textarea.property-control { resize: vertical; }
 }
 @media (max-width: 720px) {
   .nova-studio-shell { grid-template-rows: 54px minmax(0,1fr); }
+  .nova-studio-shell.is-header-hidden { grid-template-rows: minmax(0, 1fr); }
   .nova-studio-header { grid-template-columns: auto minmax(0,1fr); padding-left: 9px; }
   .nova-studio-brand-copy { display: none; }
   .nova-studio-body { grid-template-columns: 1fr; }