@bpmn-nova/vue 0.3.1-preview

package/LICENSE

@@ -0,0 +1,17 @@
+Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+Copyright 2026 BPMN Nova contributors
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1,192 @@
+# @bpmn-nova/vue
+
+BPMN Nova 的 Vue 3.3+ Adapter，提供 Studio、Designer、Viewer、审批轨迹、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 由宿主工程提供，本包不会替应用选择或升级框架版本。
+
+![BPMN Nova Vue 流程工作台](https://raw.githubusercontent.com/daxiangme/bpmn-nova/dev/docs/assets/bpmn-nova-designer.jpg)
+
+## 安装
+
+```bash
+npm install @bpmn-nova/vue@preview
+```
+
+```js
+import '@bpmn-nova/vue/styles.css'
+```
+
+只安装本包；`@bpmn-nova/studio` 会作为内部依赖自动解析。容器必须有明确高度。
+
+## 流程设计
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import { BpmnStudio } from '@bpmn-nova/vue'
+import '@bpmn-nova/vue/styles.css'
+
+defineProps({ xml: String })
+const studioRef = ref(null)
+
+function handleChange(model, reason, nextXml) {
+  console.log(reason, nextXml)
+}
+</script>
+
+<template>
+  <div style="height: 720px">
+    <BpmnStudio
+      ref="studioRef"
+      :xml="xml"
+      engine="flowable"
+      mode="design"
+      theme="auto"
+      @change="handleChange"
+    />
+  </div>
+</template>
+```
+
+Expose 提供 `exportXml()`、`fitView()`、`setTheme()`、`exportSvg()` 和 `openSvgExportPreview()`。
+
+## 只读展示与审批轨迹
+
+```vue
+<script setup>
+import { BpmnViewer } from '@bpmn-nova/vue'
+import '@bpmn-nova/vue/styles.css'
+
+defineProps({
+  xml: String,
+  runtime: Object,
+  runtimeAssetResolver: Function,
+})
+</script>
+
+<template>
+  <div style="height: 720px">
+    <BpmnViewer
+      :xml="xml"
+      engine="flowable"
+      :runtime="runtime"
+      projection="compact"
+      responsive
+      theme="auto"
+      :runtime-asset-resolver="runtimeAssetResolver"
+      @trace-click="event => console.log(event)"
+    />
+  </div>
+</template>
+```
+
+- `approval`：实际发生的有效路径。
+- `compact`：移动时间线、审批动作、图片和附件。
+- `standard`：完整 BPMN 叠加运行状态。
+
+![BPMN Nova Vue 移动审批时间线](https://raw.githubusercontent.com/daxiangme/bpmn-nova/dev/docs/assets/bpmn-nova-approval-mobile-timeline.jpg)
+
+## Runtime Action 与附件
+
+```js
+const runtime = {
+  processInstanceId: 'purchase-20260824',
+  status: 'running',
+  activities: [{
+    id: 'activity-manager-1',
+    elementId: 'UserTask_Manager',
+    visitId: 'visit-manager-1',
+    status: 'completed',
+    assignee: '李经理',
+  }],
+  actions: [{
+    id: 'approve-manager-1',
+    type: 'approve',
+    elementId: 'UserTask_Manager',
+    visitId: 'visit-manager-1',
+    occurredAt: '2026-08-24T10:12:00+08:00',
+    actor: { id: 'manager-li', name: '李经理' },
+    content: {
+      plainText: '资料完整，同意提交总经理审批。',
+      blocks: [{ type: 'file', assetId: 'purchase-checklist' }],
+      assets: [{
+        id: 'purchase-checklist',
+        name: '采购核验清单.txt',
+        mediaType: 'text/plain',
+        size: 248,
+      }],
+    },
+  }],
+  visitedEdges: [],
+}
+
+const runtimeAssetResolver = async (asset, { purpose, signal }) => {
+  const response = await fetch(
+    `/api/runtime-assets/${encodeURIComponent(asset.id)}?purpose=${purpose}`,
+    { signal },
+  )
+  return response.ok ? response.url : null
+}
+```
+
+Runtime Snapshot 只保存资源引用；上传、存储和权限签发由宿主负责。
+
+## 主题和 SVG 导出
+
+```vue
+<BpmnStudio
+  ref="studioRef"
+  :xml="xml"
+  :theme="{
+    mode: 'auto',
+    dark: {
+      colors: {
+        canvas: '#0b1018',
+        surface: '#18202b',
+      },
+    },
+  }"
+/>
+```
+
+```js
+studioRef.value?.openSvgExportPreview({
+  theme: 'current',
+  filename: '采购申请审批流程.svg',
+})
+```
+
+主题属性变化会更新现有实例，不会重新挂载画布、清除选择或关闭详情。
+
+## Properties 与自定义 Renderer
+
+本包还导出：
+
+- `BpmnDesigner`、`BpmnCanvas`、`BpmnPropertiesPanel`
+- `useBpmnStudio`
+- `createVuePropertyComponent`
+- `createVueRuntimeDetailsComponent`
+- `createVueRuntimeTransitionDetailsComponent`
+- `createVueRuntimeTimelineComponent`
+
+## 常见问题
+
+- **无高度：** 为外层容器设置明确高度。
+- **无样式：** 导入一次 `@bpmn-nova/vue/styles.css`。
+- **Vue 重复：** Vue 应由宿主提供并保持单实例。
+- **SSR：** 将可视组件放到客户端挂载阶段。
+- **包选择：** Vue 项目只直接安装 `@bpmn-nova/vue`。
+
+## 文档与 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
+
+Apache-2.0. See [LICENSE](LICENSE).

package/dist/index.d.ts

@@ -0,0 +1,167 @@
+import type { Component, DefineComponent } from 'vue'
+import type { BpmnEdge, BpmnNode, ElementSelection, EngineId, LayoutOptions, 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 { 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'
+import type {
+  BpmnCanvas as CanvasInstance,
+  BpmnStudioController,
+  BpmnStudioShell,
+  InteractionController,
+  StudioCommands,
+  StudioShellOptions,
+  StudioShellSlots,
+  StudioState,
+  TemplateRegistry,
+} from '@bpmn-nova/studio'
+import type { NovaThemeInput, NovaThemeState, RuntimeAppearanceOptions } from '@bpmn-nova/studio/theme'
+import type {
+  BpmnViewer as ViewerInstance,
+  RuntimeDetailsRenderer,
+  RuntimeTimelineRenderer,
+  RuntimeTraceClickEvent,
+  RuntimeTransitionDetailsRenderer,
+  ViewerOptions,
+  ViewerProjection,
+} from '@bpmn-nova/studio/viewer'
+
+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 UseBpmnStudioResult { studio: BpmnStudioController; state: StudioState; commands: StudioCommands }
+export function useBpmnStudio(options?: UseBpmnStudioOptions): UseBpmnStudioResult
+
+export interface BpmnCanvasProps extends BpmnNovaVisualProps {
+  studio: BpmnStudioController
+  interactions?: InteractionController
+  templates?: TemplateRegistry
+  iconRegistry?: IconRegistry
+  nodeRenderers?: Record<string, Function>
+  nodeRenderer?: Function
+  svgExport?: ViewerOptions['svgExport']
+}
+export interface BpmnCanvasExposed {
+  getCanvas(): CanvasInstance | null
+  fitView(): 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 BpmnStudioProps extends BpmnNovaVisualProps, BpmnModelProps {
+  studio?: BpmnStudioController
+  propertiesProfile?: 'business' | 'developer'
+  iconRegistry?: IconRegistry
+  paletteRegistry?: PaletteRegistry
+  propertiesRegistry?: PropertiesRegistry
+  templateRegistry?: TemplateRegistry
+  nodeRenderers?: Record<string, Function>
+  nodeRenderer?: Function
+  slotsConfig?: StudioShellSlots
+  layout?: StudioShellOptions['layout']
+  leftWidth?: number
+  rightWidth?: number
+  runtime?: ProcessInstanceSnapshot | null
+  runtimePresenter?: ViewerOptions['runtimePresenter']
+  runtimeTraceProjector?: ViewerOptions['runtimeTraceProjector']
+  runtimeAssetResolver?: ViewerOptions['runtimeAssetResolver']
+  runtimeTimelineRenderer?: RuntimeTimelineRenderer
+  svgExport?: ViewerOptions['svgExport']
+  onRuntimeTraceItemClick?: ViewerOptions['onRuntimeTraceItemClick']
+  runtimeDetailsRenderer?: RuntimeDetailsRenderer | null
+  onRuntimeDetailsOpen?: ViewerOptions['onRuntimeDetailsOpen']
+  runtimeTransitionDetailsRenderer?: RuntimeTransitionDetailsRenderer | null
+  onRuntimeTransitionDetailsOpen?: ViewerOptions['onRuntimeTransitionDetailsOpen']
+  timeline?: ViewerOptions['timeline']
+  runtimeDetails?: ViewerOptions['runtimeDetails']
+  runtimeTraceOptions?: ViewerOptions['runtimeTraceOptions']
+  onTraceClick?: (event: RuntimeTraceClickEvent) => void
+  onElementClick?: ViewerOptions['onElementClick']
+  mode?: 'design' | 'viewer' | 'instance'
+  projection?: ViewerProjection
+  responsive?: boolean
+  projectionOptions?: Array<{ value: ViewerProjection; label: string }>
+}
+export interface BpmnStudioExposed {
+  getStudio(): BpmnStudioController
+  getShell(): BpmnStudioShell | 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 BpmnDesignerProps extends BpmnNovaVisualProps, BpmnModelProps { svgExport?: ViewerOptions['svgExport'] }
+export interface BpmnDesignerExposed {
+  getInstance(): DesignerInstance | null
+  exportXml(engine?: EngineId): string
+  fitView(): void
+  beautify(options?: LayoutOptions): void
+  rerouteEdges(options?: LayoutOptions): void
+  validate(): Array<{ level: 'error' | 'warning'; elementId?: string; message: string }>
+  setTheme(theme: NovaThemeInput): NovaThemeState | undefined
+  exportSvg(options?: SvgExportOptions): Promise<SvgExportArtifact> | undefined
+  openSvgExportPreview(options?: SvgExportOptions & { previewTitle?: string; onDownload?: (artifact: SvgExportArtifact) => void }): SvgExportPreviewController | undefined
+}
+export const BpmnDesigner: DefineComponent<BpmnDesignerProps>
+
+export interface BpmnViewerProps extends BpmnNovaVisualProps, BpmnModelProps, Omit<ViewerOptions, 'container' | 'model' | 'theme' | 'runtimeAppearance' | 'onThemeChange'> {}
+export interface BpmnViewerExposed {
+  getInstance(): ViewerInstance | null
+  fitView(): void
+  setProjection(projection: ViewerProjection): void
+  setDisplayOptions(options: Parameters<ViewerInstance['setDisplayOptions']>[0]): 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 BpmnViewer: DefineComponent<BpmnViewerProps>
+
+export interface VuePropertyComponentProps {
+  entry: PropertyEntry
+  context: PropertiesContext
+  value: unknown
+  onChange(value: unknown): void
+}
+export function createVuePropertyComponent(component: Component<VuePropertyComponentProps>): (context: Record<string, unknown>) => void | (() => void)
+export interface BpmnPropertiesPanelProps extends BpmnNovaVisualProps {
+  studio?: BpmnStudioController
+  designer?: BpmnStudioController | DesignerInstance
+  registry?: PropertiesRegistry
+  providers?: PropertiesProvider[]
+  dataProviders?: Record<string, unknown>
+  components?: Record<string, Component<VuePropertyComponentProps>>
+}
+export interface BpmnPropertiesPanelExposed {
+  getPanel(): unknown
+  getRegistry(): PropertiesRegistry | null
+  render(): void
+  setTheme(theme: NovaThemeInput): NovaThemeState | undefined
+}
+export const BpmnPropertiesPanel: DefineComponent<BpmnPropertiesPanelProps>
+
+export function createVueRuntimeDetailsComponent(component: Component<Omit<Parameters<RuntimeDetailsRenderer>[0], 'container'>>): RuntimeDetailsRenderer
+export function createVueRuntimeTransitionDetailsComponent(component: Component<Omit<Parameters<RuntimeTransitionDetailsRenderer>[0], 'container'>>): RuntimeTransitionDetailsRenderer
+export function createVueRuntimeTimelineComponent(component: Component<Omit<Parameters<RuntimeTimelineRenderer>[0], 'container'>>): RuntimeTimelineRenderer
+
+export interface BpmnStudioEmits {
+  change: [model: ProcessModel, reason: string, xml: string]
+  'selection-change': [selection: ElementSelection | null, element: StudioState['selectedElement']]
+  'scope-change': [activeScopeId: string, scopePath: StudioState['scopePath'], state: StudioState]
+  'element-click': [payload: Parameters<NonNullable<ViewerOptions['onElementClick']>>[0]]
+  'trace-click': [payload: RuntimeTraceClickEvent]
+}
+export interface BpmnDesignerEmits {
+  change: [model: ProcessModel, reason: string, xml: string]
+  'selection-change': [selection: ElementSelection | null, element: BpmnNode | BpmnEdge | null]
+}

package/dist/index.js

@@ -0,0 +1,287 @@
+import { 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';
+
+export function createVueRuntimeDetailsComponent(Component) {
+  return ({ container, ...context }) => {
+    const app = createApp(Component, context);
+    app.mount(container);
+    return () => app.unmount();
+  };
+}
+
+export function createVueRuntimeTransitionDetailsComponent(Component) {
+  return createVueRuntimeDetailsComponent(Component);
+}
+
+export function createVueRuntimeTimelineComponent(Component) {
+  return createVueRuntimeDetailsComponent(Component);
+}
+
+function resolveModel(props) {
+  if (props.model) return props.model;
+  if (props.xml) return importBpmn(props.xml, props.engine);
+  return createEmptyProcess(props.engine || 'flowable');
+}
+
+export function useBpmnStudio(options = {}) {
+  const studio = options.studio || createStudioController({ model: resolveModel(options), propertiesProfile: options.propertiesProfile });
+  const state = reactive(studio.getState());
+  const off = studio.subscribe((event) => Object.assign(state, event.state));
+  onBeforeUnmount(() => { off(); if (!options.studio) studio.destroy(); });
+  return { studio, state, commands: studio.commands };
+}
+
+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 },
+  setup(props, { expose, attrs }) {
+    const host = ref(null);
+    let canvas = null;
+    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 } });
+      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) });
+    return () => h('div', { ...attrs, ref: host, style: { width: '100%', height: '100%', minHeight: '320px', ...(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,
+    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,
+    theme: [Object, String], runtimeAppearance: Object, svgExport: Object, onThemeChange: Function,
+  },
+  emits: ['change', 'selection-change', 'scope-change', 'element-click', 'trace-click'],
+  setup(props, { emit, expose, attrs }) {
+    const host = ref(null);
+    const owned = !props.studio;
+    const studio = props.studio || createStudioController({ model: resolveModel(props), propertiesProfile: props.propertiesProfile });
+    let shell = null;
+    let off = 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 });
+      off = studio.subscribe((event) => {
+        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.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.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]) => {
+      if (!shell) return;
+      shell.rendererOptions.timeline = timeline;
+      shell.rendererOptions.runtimeDetails = runtimeDetails;
+      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 || {}) } });
+  },
+});
+
+export const BpmnDesigner = defineComponent({
+  name: 'ModernBpmnDesigner',
+  props: {
+    xml: String,
+    model: Object,
+    engine: { type: String, default: 'flowable' },
+    theme: [Object, String],
+    svgExport: Object,
+    onThemeChange: Function,
+  },
+  emits: ['change', 'selection-change'],
+  setup(props, { emit, expose, attrs }) {
+    const host = ref(null);
+    let instance = null;
+
+    onMounted(() => {
+      instance = new CoreDesigner({
+        container: host.value,
+        model: resolveModel(props),
+        onChange(model, reason) { emit('change', model, reason, exportBpmn(model, model.engine)); },
+        onSelectionChange(selection, element) { emit('selection-change', selection, element); },
+      theme: props.theme,
+      svgExport: props.svgExport,
+        onThemeChange: props.onThemeChange,
+      });
+      requestAnimationFrame(() => instance.renderer.fitView());
+    });
+    onBeforeUnmount(() => instance?.destroy());
+
+    watch(() => props.engine, (value) => {
+      if (instance && value && value !== instance.model.engine) instance.setEngine(value);
+    });
+    watch(() => props.model, (value) => { if (instance && value && value !== instance.model) instance.setModel(value); });
+    watch(() => props.xml, (value) => { if (instance && value) instance.setModel(importBpmn(value, props.engine)); });
+    watch(() => props.theme, (value) => { if (value !== undefined) instance?.setTheme(value); });
+
+    expose({
+      getInstance: () => instance,
+      exportXml: (engine) => instance?.exportXml(engine) || '',
+      fitView: () => instance?.renderer.fitView(),
+      beautify: (options) => instance?.beautify(options),
+      rerouteEdges: (options) => instance?.rerouteEdges(options),
+      validate: () => instance?.validate() || [],
+      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: '320px', ...(attrs.style || {}) } });
+  },
+});
+
+export const BpmnViewer = defineComponent({
+  name: 'ModernBpmnViewer',
+  props: {
+    xml: String,
+    model: Object,
+    engine: { type: String, default: 'flowable' },
+    runtime: Object,
+    iconRegistry: Object,
+    nodeRenderers: Object,
+    nodeRenderer: Function,
+    timeline: Object,
+    runtimeDetails: Object,
+    runtimePresenter: Function,
+    runtimeTraceProjector: Function,
+    runtimeAssetResolver: Function,
+    runtimeTraceOptions: Object,
+    runtimeTimelineRenderer: Function,
+    onRuntimeTraceItemClick: Function,
+    onProjectionChange: Function,
+    runtimeDetailsRenderer: Function,
+    onRuntimeDetailsOpen: Function,
+    runtimeTransitionDetailsRenderer: Function,
+    onRuntimeTransitionDetailsOpen: Function,
+    onTraceClick: Function,
+    responsive: { type: Boolean, default: false },
+    projection: { type: String, default: undefined },
+    theme: [Object, String],
+    runtimeAppearance: Object,
+    svgExport: Object,
+    onThemeChange: Function,
+  },
+  emits: ['element-click', 'trace-click'],
+  setup(props, { emit, expose, attrs }) {
+    const host = ref(null);
+    let instance = null;
+    onMounted(() => {
+      instance = new CoreViewer({
+        container: host.value,
+        model: resolveModel(props),
+        runtime: props.runtime,
+        iconRegistry: props.iconRegistry,
+        nodeRenderers: props.nodeRenderers,
+        nodeRenderer: props.nodeRenderer,
+        timeline: props.timeline,
+        runtimeDetails: props.runtimeDetails,
+        runtimePresenter: props.runtimePresenter,
+        runtimeTraceProjector: props.runtimeTraceProjector,
+        runtimeAssetResolver: props.runtimeAssetResolver,
+        runtimeTraceOptions: props.runtimeTraceOptions,
+        runtimeTimelineRenderer: props.runtimeTimelineRenderer,
+        onRuntimeTraceItemClick: (payload) => props.onRuntimeTraceItemClick?.(payload),
+        onProjectionChange: (payload) => props.onProjectionChange?.(payload),
+        runtimeDetailsRenderer: props.runtimeDetailsRenderer,
+        onRuntimeDetailsOpen: (payload) => props.onRuntimeDetailsOpen?.(payload),
+        runtimeTransitionDetailsRenderer: props.runtimeTransitionDetailsRenderer,
+        onRuntimeTransitionDetailsOpen: (payload) => props.onRuntimeTransitionDetailsOpen?.(payload),
+        projection: props.projection,
+        responsive: props.responsive,
+        onElementClick(payload) { emit('element-click', payload); },
+        onTraceClick(payload) { emit('trace-click', payload); },
+        theme: props.theme,
+        runtimeAppearance: props.runtimeAppearance,
+        svgExport: props.svgExport,
+        onThemeChange: props.onThemeChange,
+      });
+      requestAnimationFrame(() => instance.fitView());
+    });
+    onBeforeUnmount(() => instance?.destroy());
+    watch(() => props.runtime, (value) => instance?.setRuntime(value));
+    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.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) });
+    return () => h('div', { ...attrs, ref: host, style: { width: '100%', height: '100%', minHeight: '260px', ...(attrs.style || {}) } });
+  },
+});
+
+
+// Properties Panel -----------------------------------------------------------
+import { createDefaultPropertiesRegistry, PropertiesPanel as CorePropertiesPanel } from '@bpmn-nova/studio';
+
+export function createVuePropertyComponent(Component) {
+  return ({ container, entry, context, value, commit }) => {
+    const app = createApp(Component, { entry, context, value, onChange: commit });
+    app.mount(container);
+    return () => app.unmount();
+  };
+}
+
+export const BpmnPropertiesPanel = defineComponent({
+  name: 'BpmnNovaPropertiesPanel',
+  props: {
+    studio: Object,
+    designer: Object,
+    registry: Object,
+    providers: Array,
+    dataProviders: Object,
+    components: Object,
+    theme: [Object, String],
+    onThemeChange: Function,
+  },
+  setup(props, { expose, attrs }) {
+    const host = ref(null);
+    let panel = null;
+    let registry = null;
+    let offSelection = null;
+    let offChange = null;
+
+    const mountPanel = () => {
+      const studio = props.studio || props.designer;
+      if (!host.value || !studio) return;
+      panel?.destroy();
+      offSelection?.();
+      offChange?.();
+      registry = props.registry || createDefaultPropertiesRegistry({ studio, dataProviders: props.dataProviders || {} });
+      for (const provider of props.providers || []) registry.registerProvider(provider.priority ?? 500, provider);
+      for (const [name, Component] of Object.entries(props.components || {})) registry.registerComponent(name, createVuePropertyComponent(Component));
+      panel = new CorePropertiesPanel({ container: host.value, registry, studio, theme: props.theme, onThemeChange: props.onThemeChange });
+      panel.render();
+    };
+
+    onMounted(mountPanel);
+    watch(() => props.designer, mountPanel);
+    watch(() => props.studio, mountPanel);
+    watch(() => props.theme, (value) => { if (value !== undefined) panel?.setTheme(value); });
+    onBeforeUnmount(() => { offSelection?.(); offChange?.(); panel?.destroy(); });
+    expose({ getPanel: () => panel, getRegistry: () => registry, render: () => panel?.render(), setTheme: (value) => panel?.setTheme(value) });
+    return () => h('div', { ...attrs, ref: host, style: { width: '100%', height: '100%', overflow: 'auto', ...(attrs.style || {}) } });
+  },
+});