@bpmn-nova/vue 0.3.3-preview → 0.3.5-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.3-preview`。Vue 由宿主工程提供，本包不会替应用选择或升级框架版本。
+> 当前版本为 `0.3.5-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 中，不依赖源码仓库可见性。
 
 ## 流程设计
@@ -32,6 +46,7 @@ import '@bpmn-nova/vue/styles.css'
 
 const props = defineProps({ initialXml: String })
 const studioRef = ref(null)
+const studioConfig = { ui: { controlSize: 'medium' } }
 
 function handleChange(model, reason, nextXml) {
   console.log(reason, nextXml)
@@ -44,6 +59,7 @@ function handleChange(model, reason, nextXml) {
       ref="studioRef"
       :xml="props.initialXml"
       engine="flowable"
+      :config="studioConfig"
       mode="design"
       :allowed-modes="['design']"
       theme="auto"
@@ -84,9 +100,10 @@ function handleSelectionChange(selection, element) {
       engine="activiti"
       mode="design"
       :allowed-modes="['design']"
-      :allowed-node-types="supportedNodeTypes"
-      :allowed-edge-types="['sequenceFlow']"
-      :regions="{ right: 'hidden' }"
+      :config="{
+        modeling: { allowedNodeTypes: supportedNodeTypes, allowedEdgeTypes: ['sequenceFlow'] },
+        ui: { controlSize: 'medium', regions: { right: 'hidden' } },
+      }"
       theme="auto"
       @change="handleChange"
       @selection-change="handleSelectionChange"
@@ -98,7 +115,7 @@ function handleSelectionChange(selection, element) {
         <strong>{{ processName }}</strong>
         <span>{{ processType }}</span>
       </template>
-      <template #header-actions="{ actions, mode }">
+      <template #header-actions="{ actions, mode, ui }">
         <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>
@@ -127,6 +144,49 @@ async function publishProcess(actions) {
 
 编辑器属性面板应订阅 `selection-change`，该事件覆盖节点、连线、多选、清空和键盘选择。`element-click` 是点击观察事件，不能代替选择状态。宿主使用稳定 BPMN Element ID 关联业务配置，并自行拥有保存、发布、权限和服务端事务。
 
+`config` 收拢 `modeling/ui/viewer/export` 静态选项。顶部控件尺寸使用 `config.ui.controlSize`，默认 `medium`，支持 `small`、`medium`、`large` 和 `24px`–`48px`。Slot Context 的只读 `ui.controlHeight` 可直接适配宿主按钮；Element Plus `default`、Ant Design `middle` 都映射到 Nova `medium`。自定义 px 时也可在 Header Actions 样式中读取 `--nova-control-height` 等公开变量。
+
+```vue
+<BpmnStudio ref="studioRef" :config="{ ui: { controlSize: '36px' } }">
+  <template #header-actions="{ actions, ui }">
+    <HostActions :actions="actions" :button-height="ui.controlHeight" />
+  </template>
+</BpmnStudio>
+```
+
+Expose 同步提供 `getConfig()` / `setConfig()`；响应式更新 UI、Viewer 或 Export 不重建 Canvas。旧顶层配置继续兼容并标记 Deprecated，同项冲突时显式旧值优先。`config.modeling` 只在内部 Controller 创建时建立节点和连线约束。
+
+## 原生右侧 Slot 与折叠
+
+不需要把所有业务面板都放到 Nova 外部。使用 `#right` 可以只替换右侧内容，并保留 Nova 的布局与折叠按钮；它高于 `slotsConfig.right`，通过 Teleport 保留宿主上下文。不要同时设置 `regions.right: 'hidden'`，否则整个区域都隐藏。
+
+```vue
+<BpmnStudio
+  ref="studioRef"
+  :xml="xml"
+  :config="{ ui: {
+    leftPanel: { collapsible: true, defaultCollapsed: false },
+    rightPanel: { collapsible: true, defaultCollapsed: false, layout: 'flex' },
+  } }"
+  @sidebar-change="event => console.log(event.side, event.collapsed, event.source)"
+>
+  <template #right="{ panelSelection, mode }">
+    <header style="flex: none; padding: 12px">业务详情 · {{ mode }}</header>
+    <div style="flex: 1; min-height: 0; overflow: auto; padding: 12px">
+      {{ panelSelection.selectedElement?.id ?? '未选择元素' }}
+      <!-- 填入宿主表单 -->
+    </div>
+    <footer style="flex: none; padding: 12px">宿主固定操作区</footer>
+  </template>
+</BpmnStudio>
+```
+
+默认 `flex` 由宿主安排内部滚动；`scroll` 由 Nova 滚动整个内容，宿主只填普通内容。父容器仍需可计算高度。收起不卸载 Slot，不丢失表单/滚动状态、不自动 Fit；左右分隔线中点按钮支持键盘，200ms 动画尊重减少动态效果。容器 ≤720px 时首次默认收起，按钮保留，展开挤压画布而非抽屉，宽窄屏分别记忆状态。
+
+Expose 增加 `getSidebarState()`、`setSidebarCollapsed(side, collapsed)`、`subscribeSidebarChange()`、`getPanelSelection()`、`subscribePanelSelection()`；设置仅在实际切换时返回 `true`。Header/Right Slot 共享响应式 `panelSelection`（`selection`、`selectedElement`、`trace`），只读轨迹选择不回写设计选择。
+
+Instance 默认隐藏右侧且没有展开按钮；需要时显式设置 `config.ui.regions.right: 'default'`。新增能力自 `0.3.5-preview` 提供。完整示例见[侧栏指南](https://github.com/daxiangme/bpmn-nova/blob/dev/docs/CUSTOMIZATION.md#侧栏布局与平滑折叠)或包内 `llms-full.txt`。
+
 ## Mode 双向同步与副标题刷新
 
 ```vue
@@ -165,6 +225,8 @@ Expose 的 `getMode()` / `setMode()` 使用 Shell 实际状态。Resolver 返回
 
 ## 只读展示与审批轨迹
 
+真实后端的数据格式与接入步骤见[审批轨迹接入指南](https://github.com/daxiangme/bpmn-nova/blob/dev/docs/RUNTIME-INTEGRATION.md)，完整正文也包含在包内 `llms-full.txt`。Vue 根入口的 `ProcessInstanceSnapshot`、Activity/Action/Transition、`RuntimeTraceClickEvent` 与资源 Resolver 等 14 个 Runtime 类型出口自 `0.3.5-preview` 提供；旧版可按指南从 `BpmnStudioProps['runtime']` 推导，无需增加 Studio 直依赖。
+
 ```vue
 <script setup>
 import { BpmnViewer } from '@bpmn-nova/vue'
@@ -301,6 +363,7 @@ studioRef.value?.openSvgExportPreview({
 - [完整项目能力](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)
+- [审批轨迹接入指南](https://github.com/daxiangme/bpmn-nova/blob/dev/docs/RUNTIME-INTEGRATION.md)
 
 ## License
 

package/dist/index.d.ts

@@ -14,6 +14,7 @@ import type { ProcessInstanceSnapshot } from '@bpmn-nova/studio/runtime'
 import type { SvgExportArtifact, SvgExportOptions, SvgExportPreviewController } from '@bpmn-nova/studio/export-svg'
 import type {
   BpmnCanvas as CanvasInstance,
+  BpmnStudioConfig,
   BpmnStudioController,
   BpmnStudioShell,
   ContextMenuRegistry,
@@ -22,6 +23,10 @@ import type {
   StudioCommands,
   StudioMode,
   StudioModeChangeEvent,
+  StudioPanelSelection,
+  StudioSidebarChangeEvent,
+  StudioSidebarSide,
+  StudioSidebarState,
   StudioValidationEvent,
   StudioValidationIssue,
   StudioShellActions,
@@ -29,6 +34,7 @@ import type {
   StudioShellRegions,
   StudioShellSlots,
   StudioState,
+  StudioUiContext,
   TemplateRegistry,
 } from '@bpmn-nova/studio'
 import type { NovaThemeInput, NovaThemeState, RuntimeAppearanceOptions } from '@bpmn-nova/studio/theme'
@@ -43,13 +49,57 @@ import type {
 } from '@bpmn-nova/studio/viewer'
 
 export type {
+  BpmnEdge,
+  BpmnNode,
+  EdgeType,
+  ElementSelection,
+  EngineId,
+  LayoutOptions,
+  NodeType,
+  ProcessModel,
+} from '@bpmn-nova/studio'
+export type {
+  BpmnStudioConfig,
   NodeSubtitleResolver,
   NodeSubtitleResolverContext,
+  StudioControlSize,
+  StudioModelingConfig,
+  StudioPanelSelection,
+  StudioRightPanelConfig,
+  StudioSidebarChangeEvent,
+  StudioSidebarChangeSource,
+  StudioSidebarConfig,
+  StudioSidebarSide,
+  StudioSidebarState,
+  StudioSvgExportOptions,
+  StudioUiConfig,
+  StudioUiContext,
   StudioValidationEvent,
   StudioValidationIssue,
   StudioValidationSource,
+  StudioViewerConfig,
 } from '@bpmn-nova/studio'
 
+/** Runtime integration facade. Added in 0.3.5-preview; no runtime JavaScript exports. */
+export type {
+  ActivityInstance,
+  ActivityStatus,
+  ProcessInstanceSnapshot,
+  RuntimeApprovalAction,
+  RuntimeApprovalActionType,
+  RuntimeApprovalContent,
+  RuntimeApprovalContentBlock,
+  RuntimeAssetRef,
+  RuntimeEdgeVisit,
+  RuntimeParticipant,
+  RuntimeTransition,
+} from '@bpmn-nova/studio/runtime'
+export type {
+  RuntimeAssetPurpose,
+  RuntimeAssetResolver,
+  RuntimeTraceClickEvent,
+} from '@bpmn-nova/studio/viewer'
+
 export {
   createContextMenuRegistry,
   createDefaultContextMenuRegistry,
@@ -76,7 +126,16 @@ export interface BpmnNovaVisualProps {
   onThemeChange?: (state: NovaThemeState) => void
 }
 export interface BpmnModelProps { model?: ProcessModel; xml?: string; engine?: EngineId }
-export interface UseBpmnStudioOptions extends BpmnModelProps { studio?: BpmnStudioController; propertiesProfile?: 'business' | 'developer'; allowedNodeTypes?: NodeType[]; allowedEdgeTypes?: EdgeType[] }
+export interface UseBpmnStudioOptions extends BpmnModelProps {
+  studio?: BpmnStudioController
+  config?: BpmnStudioConfig
+  /** @deprecated Use config.modeling.propertiesProfile. */
+  propertiesProfile?: 'business' | 'developer'
+  /** @deprecated Use config.modeling.allowedNodeTypes. */
+  allowedNodeTypes?: NodeType[]
+  /** @deprecated Use config.modeling.allowedEdgeTypes. */
+  allowedEdgeTypes?: EdgeType[]
+}
 export interface UseBpmnStudioResult { studio: BpmnStudioController; state: StudioState; commands: StudioCommands }
 export function useBpmnStudio(options?: UseBpmnStudioOptions): UseBpmnStudioResult
 
@@ -120,8 +179,12 @@ export const BpmnPalettePanel: DefineComponent<BpmnPalettePanelProps>
 
 export interface BpmnStudioProps extends BpmnNovaVisualProps, BpmnModelProps {
   studio?: BpmnStudioController
+  config?: BpmnStudioConfig
+  /** @deprecated Use config.modeling.propertiesProfile. */
   propertiesProfile?: 'business' | 'developer'
+  /** @deprecated Use config.modeling.allowedNodeTypes. */
   allowedNodeTypes?: NodeType[]
+  /** @deprecated Use config.modeling.allowedEdgeTypes. */
   allowedEdgeTypes?: EdgeType[]
   iconRegistry?: IconRegistry
   paletteRegistry?: PaletteRegistry
@@ -133,39 +196,56 @@ export interface BpmnStudioProps extends BpmnNovaVisualProps, BpmnModelProps {
   nodeSubtitleResolver?: NodeSubtitleResolver
   slotsConfig?: StudioShellSlots
   layout?: StudioShellOptions['layout']
+  /** @deprecated Use config.ui.regions. */
   regions?: StudioShellRegions
+  /** @deprecated Use config.ui.sidebarWidth.left. */
   leftWidth?: number
+  /** @deprecated Use config.ui.sidebarWidth.right. */
   rightWidth?: number
   runtime?: ProcessInstanceSnapshot | null
   runtimePresenter?: ViewerOptions['runtimePresenter']
   runtimeTraceProjector?: ViewerOptions['runtimeTraceProjector']
   runtimeAssetResolver?: ViewerOptions['runtimeAssetResolver']
   runtimeTimelineRenderer?: RuntimeTimelineRenderer
+  /** @deprecated Use config.export. */
   svgExport?: ViewerOptions['svgExport']
   onRuntimeTraceItemClick?: ViewerOptions['onRuntimeTraceItemClick']
   runtimeDetailsRenderer?: RuntimeDetailsRenderer | null
   onRuntimeDetailsOpen?: ViewerOptions['onRuntimeDetailsOpen']
   runtimeTransitionDetailsRenderer?: RuntimeTransitionDetailsRenderer | null
   onRuntimeTransitionDetailsOpen?: ViewerOptions['onRuntimeTransitionDetailsOpen']
+  /** @deprecated Use config.viewer.timeline. */
   timeline?: ViewerOptions['timeline']
+  /** @deprecated Use config.viewer.runtimeDetails. */
   runtimeDetails?: ViewerOptions['runtimeDetails']
+  /** @deprecated Use config.viewer.runtimeTraceOptions. */
   runtimeTraceOptions?: ViewerOptions['runtimeTraceOptions']
   onTraceClick?: (event: RuntimeTraceClickEvent) => void
   onElementClick?: ViewerOptions['onElementClick']
   mode?: StudioMode
   allowedModes?: readonly StudioMode[]
   projection?: ViewerProjection
+  /** @deprecated Use config.viewer.responsive. */
   responsive?: boolean
+  /** @deprecated Use config.viewer.projectionOptions. */
   projectionOptions?: Array<{ value: ViewerProjection; label: string }>
+  onSidebarChange?: (event: StudioSidebarChangeEvent) => void
 }
 export interface BpmnStudioExposed {
   getStudio(): BpmnStudioController
   getShell(): BpmnStudioShell | null
   getActions(): StudioShellActions | null
+  getConfig(): Readonly<BpmnStudioConfig> | undefined
+  setConfig(config?: BpmnStudioConfig): Readonly<BpmnStudioConfig> | undefined
   getMode(): StudioMode | undefined
   getAllowedModes(): readonly StudioMode[]
   setMode(mode: StudioMode): boolean
   setAllowedModes(modes: readonly StudioMode[]): readonly StudioMode[]
+  getSidebarState(): StudioSidebarState | undefined
+  setSidebarCollapsed(side: StudioSidebarSide, collapsed: boolean): boolean
+  subscribeSidebarChange(listener: (event: StudioSidebarChangeEvent) => void): () => void
+  getPanelSelection(): StudioPanelSelection | undefined
+  subscribePanelSelection(listener: (selection: StudioPanelSelection) => void): () => void
   refreshPresentation(): void
   validate(): StudioValidationIssue[]
   exportXml(engine?: EngineId): string
@@ -180,11 +260,14 @@ export interface BpmnStudioSlotContext {
   readonly actions: StudioShellActions
   readonly state: Readonly<StudioState>
   readonly mode: StudioMode
+  readonly ui: StudioUiContext
+  readonly panelSelection: StudioPanelSelection
 }
 export interface BpmnStudioSlots {
   'header-start'?(context: BpmnStudioSlotContext): VNodeChild
   'header-actions'?(context: BpmnStudioSlotContext): VNodeChild
   header?(context: BpmnStudioSlotContext): VNodeChild
+  right?(context: BpmnStudioSlotContext): VNodeChild
 }
 export const BpmnStudio: DefineComponent<BpmnStudioProps> & {
   new(): { $slots: BpmnStudioSlots }
@@ -253,6 +336,7 @@ export interface BpmnStudioEmits {
   'update:mode': [mode: StudioMode]
   'mode-change': [event: StudioModeChangeEvent]
   validation: [event: StudioValidationEvent]
+  'sidebar-change': [event: StudioSidebarChangeEvent]
 }
 export interface BpmnDesignerEmits {
   change: [model: ProcessModel, reason: string, xml: string]

package/dist/index.js

@@ -1,4 +1,4 @@
-import { Fragment, Teleport, createApp, defineComponent, h, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
+import { Fragment, Teleport, createApp, defineComponent, h, onBeforeUnmount, onMounted, onUpdated, reactive, readonly, ref, shallowRef, 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';
@@ -49,7 +49,7 @@ function resolveModel(props) {
 }
 
 export function useBpmnStudio(options = {}) {
-  const studio = options.studio || createStudioController({ model: resolveModel(options), propertiesProfile: options.propertiesProfile, allowedNodeTypes: options.allowedNodeTypes, allowedEdgeTypes: options.allowedEdgeTypes });
+  const studio = options.studio || createStudioController({ model: resolveModel(options), config: options.config, 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(); });
@@ -126,33 +126,41 @@ export const BpmnPalettePanel = defineComponent({
 export const BpmnStudio = defineComponent({
   name: 'BpmnNovaStudio',
   props: {
-    studio: Object, model: Object, xml: String, engine: { type: String, default: 'flowable' }, propertiesProfile: String, allowedNodeTypes: Array, allowedEdgeTypes: Array,
+    studio: Object, model: Object, xml: String, engine: { type: String, default: 'flowable' }, config: Object, 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, allowedModes: Array, projection: String, responsive: { type: Boolean, default: false }, projectionOptions: Array,
+    mode: String, allowedModes: Array, projection: String, responsive: { type: Boolean, default: undefined }, projectionOptions: Array,
     theme: [Object, String], runtimeAppearance: Object, svgExport: Object, onThemeChange: Function,
   },
-  emits: ['change', 'selection-change', 'scope-change', 'element-click', 'trace-click', 'update:mode', 'mode-change', 'validation'],
+  emits: ['change', 'selection-change', 'scope-change', 'element-click', 'trace-click', 'update:mode', 'mode-change', 'validation', 'sidebar-change'],
   setup(props, { emit, expose, attrs, slots }) {
     const host = ref(null);
     const headerTarget = ref(null);
     const headerStartTarget = ref(null);
     const headerActionsTarget = ref(null);
+    const rightTarget = shallowRef(null);
     const headerContext = ref(null);
     const headerStartContext = ref(null);
     const headerActionsContext = ref(null);
+    const rightContext = shallowRef(null);
     const owned = !props.studio;
-    const studio = props.studio || createStudioController({ model: resolveModel(props), propertiesProfile: props.propertiesProfile, allowedNodeTypes: props.allowedNodeTypes, allowedEdgeTypes: props.allowedEdgeTypes });
+    const studio = props.studio || createStudioController({ model: resolveModel(props), config: props.config, propertiesProfile: props.propertiesProfile, allowedNodeTypes: props.allowedNodeTypes, allowedEdgeTypes: props.allowedEdgeTypes });
     const state = reactive(studio.getState());
     const actualMode = ref(props.mode || props.allowedModes?.[0] || 'design');
+    const actualUi = reactive({ controlSize: 'medium', controlHeight: '32px' });
+    const readonlyUi = readonly(actualUi);
+    const panelSelection = shallowRef(Object.freeze({ selection: studio.selection, selectedElement: studio.getSelectedElement(), trace: null }));
     const nodeSubtitleResolver = (context) => props.nodeSubtitleResolver?.(context);
     let shell = null;
     let off = null;
     let offMode = null;
     let offValidation = null;
+    let offSidebar = null;
+    let offPanelSelection = null;
+    let mountedRightSlot = null;
 
     const createTeleportSlot = (target, contextRef) => (context) => {
       target.value = context.container;
@@ -162,6 +170,8 @@ export const BpmnStudio = defineComponent({
         if (contextRef.value === context) contextRef.value = null;
       };
     };
+    const nativeRightSlot = createTeleportSlot(rightTarget, rightContext);
+    const resolveRightSlot = () => slots.right ? nativeRightSlot : props.slotsConfig?.right;
 
     onMounted(() => {
       const shellSlots = { ...(props.slotsConfig || {}) };
@@ -170,14 +180,20 @@ export const BpmnStudio = defineComponent({
         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 });
+      mountedRightSlot = resolveRightSlot();
+      shellSlots.right = mountedRightSlot;
+      shell = new CoreStudioShell({ container: host.value, studio, config: props.config, 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, timeline: props.timeline, runtimeDetails: props.runtimeDetails, runtimeTraceOptions: props.runtimeTraceOptions, theme: props.theme, runtimeAppearance: props.runtimeAppearance, svgExport: props.svgExport, onThemeChange: props.onThemeChange });
       actualMode.value = shell.getMode();
+      Object.assign(actualUi, shell.ui);
       offMode = shell.subscribeMode((event) => {
         actualMode.value = event.mode;
         emit('update:mode', event.mode);
         emit('mode-change', event);
       });
       offValidation = shell.subscribeValidation((event) => emit('validation', event));
+      panelSelection.value = shell.getPanelSelection();
+      offPanelSelection = shell.subscribePanelSelection((value) => { panelSelection.value = value; });
+      offSidebar = shell.subscribeSidebarChange((event) => emit('sidebar-change', event));
       off = studio.subscribe((event) => {
         Object.assign(state, event.state);
         if (event.type === 'modelChanged') emit('change', studio.model, event.reason, studio.exportXml());
@@ -185,6 +201,14 @@ export const BpmnStudio = defineComponent({
         if (event.type === 'scopeChanged') emit('scope-change', event.activeScopeId, event.scopePath, studio.getState());
       });
     });
+    // Vue slot membership is not reactive. Reconcile it after a parent update,
+    // keeping the same Teleport mount for ordinary slot-content changes.
+    onUpdated(() => {
+      const nextSlot = resolveRightSlot();
+      if (!shell || nextSlot === mountedRightSlot) return;
+      shell._setRightSlot(nextSlot);
+      mountedRightSlot = nextSlot;
+    });
     watch(() => props.model, (value) => { if (value && value !== studio.model) studio.setModel(value); });
     watch(() => props.xml, (value) => {
       if (value && value !== studio.exportXml(props.engine)) studio.importXml(value, props.engine);
@@ -196,19 +220,47 @@ export const BpmnStudio = defineComponent({
       if (mode) shell.setMode(mode);
     }, { deep: true });
     watch(() => props.projection, (value) => { if (value) shell?.setProjection(value); });
+    watch(() => props.config, (value) => {
+      if (!shell) return;
+      shell.setConfig(value);
+      Object.assign(actualUi, shell.ui);
+    }, { deep: true });
     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;
+      if (timeline === undefined && runtimeDetails === undefined && runtimeTraceOptions === undefined) return;
       shell.rendererOptions.timeline = timeline;
       shell.rendererOptions.runtimeDetails = runtimeDetails;
       shell.rendererOptions.runtimeTraceOptions = runtimeTraceOptions;
       shell.viewer?.setDisplayOptions({ timeline, runtimeDetails, runtimeTraceOptions });
     });
-    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) });
+    onBeforeUnmount(() => { offMode?.(); offValidation?.(); offSidebar?.(); offPanelSelection?.(); off?.(); shell?.destroy(); if (owned) studio.destroy(); });
+    expose({
+      getStudio: () => studio,
+      getShell: () => shell,
+      getActions: () => shell?.actions || null,
+      getConfig: () => shell?.getConfig(),
+      setConfig: (value) => { const result = shell?.setConfig(value); if (shell) Object.assign(actualUi, shell.ui); return result; },
+      getMode: () => shell?.getMode(),
+      getAllowedModes: () => shell?.getAllowedModes() || [],
+      setMode: (value) => shell?.setMode(value) || false,
+      setAllowedModes: (value) => shell?.setAllowedModes(value) || [],
+      getSidebarState: () => shell?.getSidebarState(),
+      setSidebarCollapsed: (side, collapsed) => shell?.setSidebarCollapsed(side, collapsed) || false,
+      subscribeSidebarChange: (listener) => shell?.subscribeSidebarChange(listener) || (() => {}),
+      getPanelSelection: () => shell?.getPanelSelection(),
+      subscribePanelSelection: (listener) => shell?.subscribePanelSelection(listener) || (() => {}),
+      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]({
@@ -217,6 +269,8 @@ export const BpmnStudio = defineComponent({
         actions: contextRef.value.actions,
         state,
         mode: actualMode.value,
+        ui: readonlyUi,
+        panelSelection: panelSelection.value,
       }));
     };
     return () => h(Fragment, null, [
@@ -224,6 +278,7 @@ export const BpmnStudio = defineComponent({
       renderSlot('header', headerTarget, headerContext),
       renderSlot('header-start', headerStartTarget, headerStartContext),
       renderSlot('header-actions', headerActionsTarget, headerActionsContext),
+      renderSlot('right', rightTarget, rightContext),
     ]);
   },
 });