@bpmn-nova/studio 0.3.0-preview

package/dist/shell.js

@@ -0,0 +1,608 @@
+import { createDefaultIconRegistry, hydrateIcons } from '@bpmn-nova/icons';
+import { createDefaultPaletteRegistry, PalettePanel } from '@bpmn-nova/palette';
+import { createDefaultPropertiesRegistry, PropertiesPanel } from '@bpmn-nova/properties';
+import { demoRuntime } from '@bpmn-nova/runtime';
+import { BpmnViewer } from '@bpmn-nova/viewer';
+import { ThemeController } from '@bpmn-nova/theme';
+import { BpmnCanvas } from './canvas.js';
+import { createDefaultContextMenuRegistry } from './context-menu.js';
+import { createInteractionController, createTemplateRegistry } from './interactions.js';
+
+function node(tag, className, text) {
+  const item = document.createElement(tag);
+  if (className) item.className = className;
+  if (text !== undefined) item.textContent = text;
+  return item;
+}
+
+function iconNode(id, className = 'nova-icon nova-icon-sm') {
+  const item = node('span', className);
+  item.dataset.icon = id;
+  return item;
+}
+
+function mountSlot(slot, container, context) {
+  if (!slot) return null;
+  if (slot instanceof HTMLElement) { container.appendChild(slot); return null; }
+  if (typeof slot === 'function') return slot({ container, ...context });
+  return null;
+}
+
+export class BpmnStudioShell {
+  constructor({
+    container,
+    studio,
+    iconRegistry = createDefaultIconRegistry(),
+    paletteRegistry = createDefaultPaletteRegistry(),
+    propertiesRegistry = null,
+    templateRegistry = createTemplateRegistry(),
+    contextMenuRegistry = createDefaultContextMenuRegistry(),
+    rendererOptions = {},
+    slots = {},
+    layout = null,
+    runtime = demoRuntime(),
+    mode = 'design',
+    projection = undefined,
+    responsive = false,
+    projectionOptions = null,
+    leftWidth = 244,
+    rightWidth = 360,
+    theme = null,
+    runtimeAppearance = null,
+    onThemeChange = null,
+  } = {}) {
+    if (!container || !studio) throw new Error('BpmnStudioShell requires container and studio.');
+    const instanceProjection = projection || (responsive ? 'auto' : 'approval');
+    const activeProjection = mode === 'instance' ? instanceProjection : 'standard';
+    Object.assign(this, {
+      container,
+      studio,
+      iconRegistry,
+      paletteRegistry,
+      templateRegistry,
+      contextMenuRegistry,
+      rendererOptions,
+      slots,
+      runtime,
+      mode,
+      projection: activeProjection,
+      _instanceProjection: instanceProjection,
+      responsive,
+      projectionOptions,
+      runtimeAppearance,
+    });
+    this.propertiesRegistry = propertiesRegistry || createDefaultPropertiesRegistry({ studio });
+    this.interactions = createInteractionController({ studio, templates: templateRegistry });
+    this._cleanups = [];
+    this._instances = [];
+    this.container.classList.add('nova-studio-shell');
+    this.themeController = new ThemeController({ root: this.container, theme, onChange: onThemeChange });
+    this.container.style.setProperty('--nova-left-width', `${leftWidth}px`);
+    this.container.style.setProperty('--nova-right-width', `${rightWidth}px`);
+    const context = { studio, iconRegistry, paletteRegistry, propertiesRegistry: this.propertiesRegistry, templateRegistry, contextMenuRegistry, interactions: this.interactions };
+    const mount = {
+      canvas: (host, options = {}) => this._mountCanvas(host, options),
+      palette: (host, options = {}) => this._mountPalette(host, options),
+      properties: (host, options = {}) => this._mountProperties(host, options),
+    };
+    if (typeof layout === 'function') {
+      const cleanup = layout({ container, ...context, mount });
+      if (typeof cleanup === 'function') this._cleanups.push(cleanup);
+    } else this._buildDefault(context, mount);
+  }
+
+  _buildDefault(context, mount) {
+    this.container.innerHTML = '';
+    const header = node('header', 'nova-studio-header');
+    const brand = node('div', 'nova-studio-brand');
+    const brandMark = node('span', 'nova-studio-brand-mark', 'N');
+    const brandCopy = node('div', 'nova-studio-brand-copy');
+    brandCopy.append(node('strong', '', 'BPMN Nova'), node('span', '', this.studio.model.name));
+    brand.append(brandMark, brandCopy);
+    const modeSwitch = node('nav', 'nova-studio-mode-switch');
+    const modeButtons = new Map();
+    for (const item of [
+      { value: 'design', label: '流程设计', iconId: 'ui.design' },
+      { value: 'viewer', label: '流程展示', iconId: 'ui.preview' },
+      { value: 'instance', label: '审批轨迹', iconId: 'ui.trace' },
+    ]) {
+      const button = node('button');
+      button.type = 'button';
+      button.setAttribute('data-mode', item.value);
+      button.append(iconNode(item.iconId, 'nova-icon nova-icon-xs'), node('span', '', item.label));
+      button.addEventListener('click', () => this._setMode(item.value));
+      modeButtons.set(item.value, button);
+      modeSwitch.appendChild(button);
+    }
+    const projectionSwitch = node('nav', 'nova-studio-projection-switch is-hidden');
+    projectionSwitch.setAttribute('aria-label', '审批轨迹视图');
+    const projectionButtons = new Map();
+    const projectionOptions = this.projectionOptions || [
+      { value: this.responsive ? 'auto' : 'approval', label: '实际路径' },
+      { value: 'standard', label: '完整 BPMN' },
+    ];
+    for (const item of projectionOptions) {
+      const button = node('button', '', item.label);
+      button.type = 'button';
+      button.dataset.projection = item.value;
+      button.addEventListener('click', () => this.setProjection(item.value));
+      projectionButtons.set(item.value, button);
+      projectionSwitch.appendChild(button);
+    }
+    const centerControls = node('div', 'nova-studio-center-controls');
+    centerControls.append(modeSwitch, projectionSwitch);
+    const tools = node('div', 'nova-studio-tools');
+    const tool = (label, title, action, className = '', iconId = null) => {
+      const button = node('button', `nova-studio-tool ${className}`.trim()); button.type = 'button'; button.title = title;
+      if (iconId) button.appendChild(iconNode(iconId));
+      if (label) button.appendChild(node('span', '', label));
+      button.addEventListener('click', action); tools.appendChild(button); return button;
+    };
+
+    const divider = () => tools.appendChild(node('span', 'nova-studio-tool-divider'));
+    const undo = tool('', '撤销 Ctrl/⌘+Z', () => this.studio.undo(), 'is-icon', 'ui.undo');
+    const redo = tool('', '重做 Ctrl/⌘+Y', () => this.studio.redo(), 'is-icon', 'ui.redo');
+    divider();
+    const beautifySplit = node('div', 'nova-studio-beautify-split');
+    const beautifyButton = node('button', 'nova-studio-tool nova-studio-beautify is-magic');
+    beautifyButton.type = 'button';
+    beautifyButton.title = '按当前设置整理节点与连线';
+    beautifyButton.append(iconNode('ui.magic'), node('span', '', '一键美化'));
+    beautifyButton.addEventListener('click', () => this._runBeautify());
+    const beautifyCaret = node('button', 'nova-studio-tool nova-studio-beautify-caret is-magic');
+    beautifyCaret.type = 'button';
+    beautifyCaret.title = '选择布局策略';
+    beautifyCaret.appendChild(iconNode('ui.chevron', 'nova-icon nova-icon-xs'));
+    const beautifyMenu = node('div', 'nova-studio-beautify-menu is-hidden');
+    beautifyMenu.append(node('div', 'nova-studio-beautify-title', '布局策略'));
+    const density = node('div', 'nova-studio-density');
+    for (const item of [
+      { value: 'compact', label: '紧凑' },
+      { value: 'balanced', label: '标准' },
+      { value: 'spacious', label: '舒展' },
+    ]) {
+      const button = node('button', '', item.label);
+      button.type = 'button';
+      button.setAttribute('data-density', item.value);
+      button.addEventListener('click', () => {
+        this.studio.commands.updateProcess({ settings: { layoutDensity: item.value } });
+        this._syncDensityButtons();
+      });
+      density.appendChild(button);
+    }
+    beautifyMenu.appendChild(density);
+    const actionList = node('div', 'nova-studio-beautify-actions');
+    for (const item of [
+      { value: 'horizontal', iconId: 'ui.layoutHorizontal', label: '横向智能布局', hint: '按审批流方向重新排版' },
+      { value: 'vertical', iconId: 'ui.layoutVertical', label: '纵向智能布局', hint: '按审批层级纵向排版' },
+      { value: 'routing', iconId: 'ui.routeRounded', label: '重算圆角连线', hint: '保留节点位置，仅重算线路' },
+      { value: 'smooth', iconId: 'ui.routeSmooth', label: '柔和曲线连线', hint: '保留节点位置，增强连线弧度' },
+    ]) {
+      const button = node('button', 'nova-studio-beautify-action');
+      button.type = 'button';
+      button.setAttribute('data-beautify', item.value);
+      button.append(iconNode(item.iconId, 'nova-icon nova-studio-beautify-action-icon'), node('strong', '', item.label), node('small', '', item.hint));
+      button.addEventListener('click', () => {
+        this._runBeautify(item.value);
+        beautifyMenu.classList.add('is-hidden');
+      });
+      actionList.appendChild(button);
+    }
+    beautifyMenu.appendChild(actionList);
+    beautifyCaret.addEventListener('click', (event) => {
+      event.stopPropagation();
+      beautifyMenu.classList.toggle('is-hidden');
+      this._syncDensityButtons();
+    });
+    beautifySplit.append(beautifyButton, beautifyCaret, beautifyMenu);
+    tools.appendChild(beautifySplit);
+    const fit = tool('最佳视图', '适应画布内容', () => this._fitActive(), '', 'ui.fitView');
+
+    const importInput = node('input', 'nova-studio-import-input');
+    importInput.type = 'file';
+    importInput.accept = '.bpmn,.xml,.bpmn20.xml,text/xml,application/xml';
+    importInput.hidden = true;
+    const validateButton = tool('校验', '校验流程结构', () => this._showValidationStatus(), 'nova-studio-validate');
+    const importButton = tool('导入', '导入 BPMN XML', () => importInput.click(), 'nova-studio-import');
+    const exportButton = tool('导出 BPMN', '导出当前流程 XML', () => this._exportBpmn(), 'nova-studio-export is-primary');
+    importInput.addEventListener('change', async () => {
+      const file = importInput.files?.[0];
+      if (!file) return;
+      try {
+        this.studio.importXml(await file.text(), this.studio.model.engine);
+        this._setStatus('已导入 BPMN 文件', 'ok');
+        requestAnimationFrame(() => this._fitActive());
+      } catch (error) {
+        this._setStatus(`导入失败：${error.message}`, 'error');
+      } finally {
+        importInput.value = '';
+      }
+    });
+    tools.appendChild(importInput);
+    header.append(brand, centerControls, tools);
+
+    const body = node('div', 'nova-studio-body');
+    const left = node('aside', 'nova-studio-left');
+    const canvasColumn = node('section', 'nova-studio-canvas-column');
+    const canvasStage = node('div', 'nova-studio-canvas-stage');
+    const canvasHost = node('main', 'nova-studio-canvas');
+    const floatingHead = node('div', 'nova-studio-canvas-floating-head');
+    const editingMode = node('strong', 'nova-studio-editing-mode');
+    editingMode.append(iconNode('ui.design', 'nova-icon nova-icon-xs'), node('span', 'nova-studio-editing-mode-label', '编辑模式'));
+    const scopeBack = node('button', 'nova-studio-scope-back');
+    scopeBack.type = 'button';
+    scopeBack.hidden = true;
+    scopeBack.append(iconNode('ui.leaveScope', 'nova-icon nova-icon-sm'), node('span', '', '返回上一级'));
+    scopeBack.addEventListener('click', () => this.studio.leaveScope());
+    const scopeNav = node('nav', 'nova-studio-scope-nav');
+    scopeNav.setAttribute('aria-label', '流程层级');
+    floatingHead.append(editingMode, scopeBack, scopeNav);
+    canvasStage.append(canvasHost, floatingHead);
+    const statusbar = node('footer', 'nova-studio-statusbar');
+    const statusLeft = node('div', 'nova-studio-status-left');
+    this._statusDot = node('i', 'is-ok');
+    this._statusText = node('span', '', '就绪');
+    statusLeft.append(this._statusDot, this._statusText);
+    const viewportTools = node('div', 'nova-studio-viewport-tools');
+    const viewportTool = (label, title, action, className = '', iconId = null) => {
+      const button = node('button', className); button.type = 'button'; button.title = title;
+      if (iconId) button.appendChild(iconNode(iconId));
+      if (label) button.appendChild(node('span', '', label));
+      button.addEventListener('click', action); viewportTools.appendChild(button); return button;
+    };
+    viewportTool('', '缩小', () => this._zoomActive(0.9), '', 'ui.zoomOut');
+    this._zoomText = node('span', 'nova-studio-zoom-text', '100%');
+    viewportTools.appendChild(this._zoomText);
+    viewportTool('', '放大', () => this._zoomActive(1.1), '', 'ui.zoomIn');
+    viewportTools.appendChild(node('span', 'nova-studio-status-divider'));
+    viewportTool('1:1', '100% 实际大小', () => this._actualSize(), 'is-text');
+    viewportTool('', '最佳视图', () => this._fitActive(), 'is-fit', 'ui.fitView');
+    statusbar.append(statusLeft, viewportTools);
+    canvasColumn.append(canvasStage, statusbar);
+    const right = node('aside', 'nova-studio-right');
+    body.append(left, canvasColumn, right);
+    this.container.append(header, body);
+    hydrateIcons(this.container, this.iconRegistry);
+    Object.assign(this, {
+      _body: body,
+      _left: left,
+      _right: right,
+      _canvasHost: canvasHost,
+      _floatingHead: floatingHead,
+      _scopeBack: scopeBack,
+      _scopeNav: scopeNav,
+      _modeButtons: modeButtons,
+      _projectionSwitch: projectionSwitch,
+      _projectionButtons: projectionButtons,
+      _viewportTools: viewportTools,
+      _designControls: [undo, redo, beautifySplit, validateButton, importButton, exportButton],
+      _defaultContext: context,
+      _defaultMount: mount,
+      _usesDefaultProperties: !this.slots.right,
+    });
+    this.canvas = mount.canvas(canvasHost, {
+      rendererOptions: {
+        ...this.rendererOptions,
+        onViewportChange: (viewport) => {
+          this._zoomText.textContent = `${Math.round(viewport.zoom * 100)}%`;
+          this.rendererOptions.onViewportChange?.(viewport);
+        },
+      },
+    });
+    this._renderScopePath();
+    if (this.slots.left) this._recordCleanup(mountSlot(this.slots.left, left, { ...context, canvas: this.canvas }));
+    else this.palette = mount.palette(left, { canvas: this.canvas });
+    if (this.slots.right) this._recordCleanup(mountSlot(this.slots.right, right, { ...context, canvas: this.canvas }));
+    else this.properties = mount.properties(right, { canvas: this.canvas });
+    if (this.slots.header) { header.innerHTML = ''; this._recordCleanup(mountSlot(this.slots.header, header, { ...context, canvas: this.canvas })); }
+    if (this.slots.footer) { statusbar.innerHTML = ''; this._recordCleanup(mountSlot(this.slots.footer, statusbar, { ...context, canvas: this.canvas })); }
+    this._offState = this.studio.subscribe((event) => {
+      if (event.type === 'historyChanged' || event.type === 'modelChanged') {
+        undo.disabled = !this.studio.history.canUndo;
+        redo.disabled = !this.studio.history.canRedo;
+        brandCopy.querySelector('span').textContent = this.studio.model.name;
+        if (this.viewer) this.viewer.setModel(this.studio.model);
+        this._syncDensityButtons();
+        const graph = this.studio.getActiveGraph();
+        this._setStatus(`${graph.nodes.length} 节点 · ${graph.edges.length} 连线`, 'ok');
+      }
+      if (event.type === 'scopeChanged' || event.type === 'modelChanged') this._renderScopePath();
+      if (event.type === 'scopeChanged') {
+        const graph = this.studio.getActiveGraph();
+        this._setStatus(`${graph.nodes.length} 节点 · ${graph.edges.length} 连线`, 'ok');
+      }
+    });
+    this._cleanups.push(this._offState);
+    undo.disabled = !this.studio.history.canUndo;
+    redo.disabled = !this.studio.history.canRedo;
+    const initialGraph = this.studio.getActiveGraph();
+    this._setStatus(`${initialGraph.nodes.length} 节点 · ${initialGraph.edges.length} 连线`, 'ok');
+    const closeBeautify = (event) => {
+      if (!beautifySplit.contains(event.target)) beautifyMenu.classList.add('is-hidden');
+    };
+    document.addEventListener('click', closeBeautify);
+    this._cleanups.push(() => document.removeEventListener('click', closeBeautify));
+    this._syncDensityButtons();
+    this._setMode(this.mode, { force: true });
+    requestAnimationFrame(() => fit.click());
+  }
+
+  _renderScopePath() {
+    if (!this._scopeNav) return;
+    this._scopeNav.replaceChildren();
+    const path = this.studio.getState().scopePath || [];
+    const parent = path.length > 1 ? path[path.length - 2] : null;
+    this._scopeBack.hidden = !parent;
+    if (parent) {
+      this._scopeBack.title = `返回上一级：${parent.name}`;
+      this._scopeBack.setAttribute('aria-label', `返回上一级：${parent.name}`);
+    } else {
+      this._scopeBack.removeAttribute('title');
+      this._scopeBack.removeAttribute('aria-label');
+    }
+    path.forEach((item, index) => {
+      if (index) {
+        const separator = iconNode('ui.chevron', 'nova-icon nova-icon-xs nova-studio-scope-separator');
+        separator.setAttribute('aria-hidden', 'true');
+        this._scopeNav.appendChild(separator);
+      }
+      if (index === path.length - 1) {
+        const current = node('span', 'nova-studio-scope-current', item.name);
+        current.title = item.name;
+        current.setAttribute('aria-current', 'page');
+        this._scopeNav.appendChild(current);
+        return;
+      }
+      const button = node('button', `nova-studio-scope-ancestor${index === 0 ? ' is-root' : ''}`, item.name);
+      button.type = 'button';
+      button.title = `返回 ${item.name}`;
+      button.addEventListener('click', () => this.studio.navigateToScope(item.id));
+      this._scopeNav.appendChild(button);
+    });
+    hydrateIcons(this._scopeNav, this.iconRegistry);
+  }
+
+  _runBeautify(action = null) {
+    const settings = this.studio.model.settings || {};
+    if (action === 'routing') this.studio.commands.rerouteEdges({ edgeStyle: 'rounded' });
+    else if (action === 'smooth') this.studio.commands.rerouteEdges({ edgeStyle: 'smooth' });
+    else this.studio.commands.beautify({
+      direction: action || settings.direction || 'horizontal',
+      density: settings.layoutDensity || 'balanced',
+      edgeStyle: settings.edgeStyle || 'rounded',
+    });
+    requestAnimationFrame(() => this._fitActive());
+  }
+
+  _syncDensityButtons() {
+    if (!this.container?.querySelectorAll) return;
+    const value = this.studio.model.settings?.layoutDensity || 'balanced';
+    this.container.querySelectorAll('[data-density]').forEach((button) => button.classList.toggle('is-active', button.dataset.density === value));
+  }
+
+  _setMode(mode, { force = false } = {}) {
+    if (!['design', 'viewer', 'instance'].includes(mode)) return;
+    if (!force && this.mode === mode) return;
+    this.mode = mode;
+    this.projection = mode === 'instance' ? this._instanceProjection : 'standard';
+    this._modeButtons?.forEach((button, value) => button.classList.toggle('is-active', value === mode));
+    const readonly = mode !== 'design';
+    this._body?.classList.toggle('is-readonly', readonly);
+    this._floatingHead?.classList.toggle('is-hidden', readonly);
+    this._designControls?.forEach((control) => control.classList.toggle('is-hidden-by-mode', readonly));
+    this._projectionSwitch?.classList.toggle('is-hidden', mode !== 'instance');
+    this._syncProjectionButtons();
+    this._body?.classList.remove('is-timeline');
+
+    if (!this._canvasHost) return;
+    if (readonly) {
+      this.canvas?.destroy?.();
+      this.canvas = null;
+      this.viewer?.destroy?.();
+      this._canvasHost.innerHTML = '';
+      if (this._usesDefaultProperties) this.properties?.destroy?.();
+      this.viewer = new BpmnViewer({
+        container: this._canvasHost,
+        themeController: this.themeController,
+        runtimeAppearance: this.runtimeAppearance,
+        model: this.studio.model,
+        iconRegistry: this.iconRegistry,
+        nodeRenderers: this.rendererOptions.nodeRenderers,
+        nodeRenderer: this.rendererOptions.nodeRenderer,
+        runtime: mode === 'instance' ? this.runtime : null,
+        projection: this.projection,
+        responsive: this.responsive,
+        runtimeTraceOptions: this.rendererOptions.runtimeTraceOptions,
+        timeline: this.rendererOptions.timeline,
+        runtimeDetails: this.rendererOptions.runtimeDetails,
+        runtimePresenter: this.rendererOptions.runtimePresenter,
+        runtimeTraceProjector: this.rendererOptions.runtimeTraceProjector,
+        runtimeAssetResolver: this.rendererOptions.runtimeAssetResolver,
+        runtimeTimelineRenderer: this.slots.runtimeTimeline
+          ? (timeline) => mountSlot(this.slots.runtimeTimeline, timeline.container, { ...timeline, studio: this.studio, shell: this })
+          : this.rendererOptions.runtimeTimelineRenderer,
+        onRuntimeTraceItemClick: this.rendererOptions.onRuntimeTraceItemClick,
+        runtimeDetailsRenderer: this.slots.runtimeDetails
+          ? (details) => mountSlot(this.slots.runtimeDetails, details.container, { ...details, studio: this.studio, shell: this })
+          : this.rendererOptions.runtimeDetailsRenderer,
+        onRuntimeDetailsOpen: this.rendererOptions.onRuntimeDetailsOpen,
+        runtimeTransitionDetailsRenderer: this.slots.runtimeTransitionDetails
+          ? (details) => mountSlot(this.slots.runtimeTransitionDetails, details.container, { ...details, studio: this.studio, shell: this })
+          : this.rendererOptions.runtimeTransitionDetailsRenderer,
+        onRuntimeTransitionDetailsOpen: this.rendererOptions.onRuntimeTransitionDetailsOpen,
+        onTraceClick: (payload) => {
+          const kind = payload.targetType === 'visit' ? 'node' : payload.targetType === 'transition' ? 'node' : payload.targetType;
+          this._renderReadonlyDetails({ kind, element: payload.element, presentation: payload.presentation, transition: payload.transition });
+          this.rendererOptions.onTraceClick?.(payload);
+        },
+        onProjectionChange: ({ active }) => {
+          const timeline = active === 'compact';
+          this._body?.classList.toggle('is-timeline', timeline);
+          this._viewportTools?.classList.toggle('is-hidden', timeline);
+          const status = timeline ? '审批轨迹 · 移动时间线' : active === 'standard' ? '审批轨迹 · 完整 BPMN' : '审批轨迹 · 实际路径';
+          this._setStatus(status, 'ok');
+        },
+        onViewportChange: (viewport) => this._handleViewport(viewport),
+        onElementClick: (selection) => {
+          if (!selection) this._renderReadonlyDetails(null);
+          this.rendererOptions.onElementClick?.(selection);
+        },
+      });
+      this._renderReadonlyDetails(null);
+      this._setStatus(mode === 'instance' ? '审批轨迹 · 运行实例' : '流程展示 · 只读预览', 'ok');
+    } else if (!this.canvas) {
+      this.viewer?.destroy?.();
+      this.viewer = null;
+      this._canvasHost.innerHTML = '';
+      this.canvas = this._defaultMount.canvas(this._canvasHost, {
+        rendererOptions: {
+          ...this.rendererOptions,
+          onViewportChange: (viewport) => this._handleViewport(viewport),
+        },
+      });
+      if (this.palette) this.palette.canvas = this.canvas;
+      if (this._usesDefaultProperties) this.properties = this._defaultMount.properties(this._right, { canvas: this.canvas });
+      this._setStatus(`${this.studio.model.nodes.length} 节点 · ${this.studio.model.edges.length} 连线`, 'ok');
+    }
+    requestAnimationFrame(() => this._fitActive());
+  }
+
+  _handleViewport(viewport) {
+    if (this._zoomText) this._zoomText.textContent = `${Math.round(viewport.zoom * 100)}%`;
+    this.rendererOptions.onViewportChange?.(viewport);
+  }
+
+  _renderReadonlyDetails(selection) {
+    if (!this._usesDefaultProperties || !this._right) return;
+    const model = this.studio.model;
+    const element = selection?.element;
+    this._right.innerHTML = '';
+    const panel = node('div', 'nova-studio-readonly-panel');
+    const header = node('header', 'nova-studio-readonly-header');
+    header.append(node('strong', '', element?.name || (selection?.kind === 'edge' ? '流程连线' : model.name)), node('span', '', element?.id || model.id));
+    const badge = node('em', '', this.mode === 'instance' ? '运行轨迹' : '只读');
+    header.appendChild(badge);
+    panel.appendChild(header);
+    const runtimeRows = this.mode === 'instance' && selection?.presentation
+      ? [
+        ['当前状态', selection.presentation.statusLabel],
+        ['处理人员', selection.presentation.fullSummary || selection.presentation.summary || '-'],
+        ['处理轮次', selection.presentation.round ? `第 ${selection.presentation.round} 次` : '-'],
+        ...(selection.presentation.actionSummary ? [['最近操作', selection.presentation.actionSummary]] : []),
+      ]
+      : [];
+    const rows = selection?.kind === 'node'
+      ? [...runtimeRows, ['元素类型', element.type], ['BPMN 类型', element.bpmnType || '-'], ['名称', element.name || '-'], ['Element ID', element.id]]
+      : selection?.kind === 'edge'
+        ? [['来源', element.source], ['目标', element.target], ['条件', element.condition || '-'], ['Element ID', element.id]]
+        : [['流程名称', model.name], ['流程引擎', model.engine], ['节点数量', String(model.nodes.length)], ['连线数量', String(model.edges.length)]];
+    const body = node('div', 'nova-studio-readonly-body');
+    for (const [label, value] of rows) {
+      const row = node('div', 'nova-studio-readonly-row');
+      row.append(node('span', '', label), node('strong', '', value));
+      body.appendChild(row);
+    }
+    panel.appendChild(body);
+    this._right.appendChild(panel);
+  }
+
+  _zoomActive(factor) { (this.canvas || this.viewer)?.zoomBy?.(factor); }
+  _actualSize() {
+    if (this.canvas) this.canvas.actualSize();
+    else this.viewer?.renderer?.actualSize?.();
+  }
+  _fitActive() {
+    if (this.canvas) this.canvas.fitView(72);
+    else this.viewer?.fitView?.();
+  }
+  setMode(mode) { this._setMode(mode); }
+  setRuntime(runtime) {
+    this.runtime = runtime;
+    if (this.mode === 'instance') this.viewer?.setRuntime(runtime);
+  }
+  setProjection(projection) {
+    this._instanceProjection = projection;
+    if (this.mode === 'instance') this.projection = projection;
+    this._syncProjectionButtons();
+    if (this.mode === 'instance') this.viewer?.setProjection?.(projection);
+  }
+  setTheme(theme) { return this.themeController.setTheme(theme); }
+  setThemeMode(mode) { return this.themeController.setMode(mode); }
+  getThemeState() { return this.themeController.getState(); }
+  subscribeTheme(listener) { return this.themeController.subscribe(listener); }
+  setRuntimeAppearance(runtimeAppearance) {
+    this.runtimeAppearance = runtimeAppearance || null;
+    this.viewer?.setRuntimeAppearance?.(this.runtimeAppearance);
+  }
+
+  _syncProjectionButtons() {
+    this._projectionButtons?.forEach((button, value) => {
+      const active = value === this._instanceProjection;
+      button.classList.toggle('is-active', active);
+      button.setAttribute('aria-pressed', String(active));
+    });
+  }
+  fitView() { this._fitActive(); }
+  zoomBy(factor) { this._zoomActive(factor); }
+
+  _setStatus(message, tone = 'ok') {
+    if (!this._statusText || !this._statusDot) return;
+    this._statusText.textContent = message;
+    this._statusDot.className = `is-${tone}`;
+  }
+
+  _showValidationStatus() {
+    const issues = this.studio.validate();
+    if (!issues.length) this._setStatus('校验通过：流程结构正常', 'ok');
+    else {
+      const errors = issues.filter((issue) => issue.level === 'error').length;
+      this._setStatus(`校验完成：${errors ? `${errors} 个错误 · ` : ''}${issues.length} 个提示`, errors ? 'error' : 'warning');
+    }
+    return issues;
+  }
+
+  _exportBpmn() {
+    const blob = new Blob([this.studio.exportXml()], { type: 'application/xml;charset=utf-8' });
+    const url = URL.createObjectURL(blob);
+    const anchor = node('a');
+    anchor.href = url;
+    anchor.download = `${this.studio.model.id || 'process'}.bpmn20.xml`;
+    document.body.appendChild(anchor);
+    anchor.click();
+    anchor.remove();
+    setTimeout(() => URL.revokeObjectURL(url), 0);
+    this._setStatus('BPMN 文件已导出', 'ok');
+  }
+
+  _recordCleanup(cleanup) { if (typeof cleanup === 'function') this._cleanups.push(cleanup); }
+  _mountCanvas(container, options = {}) {
+    const instance = new BpmnCanvas({
+      container,
+      studio: this.studio,
+      interactions: this.interactions,
+      selectionToolbar: options.selectionToolbar ?? this.slots.selectionToolbar ?? null,
+      contextMenu: options.contextMenu ?? this.slots.contextMenu ?? null,
+      contextMenuRegistry: options.contextMenuRegistry ?? this.contextMenuRegistry,
+      rendererOptions: { iconRegistry: this.iconRegistry, ...this.rendererOptions, ...(options.rendererOptions || {}) },
+      themeController: this.themeController,
+    });
+    this._instances.push(instance); return instance;
+  }
+  _mountPalette(container, options = {}) {
+    const instance = new PalettePanel({ container, studio: this.studio, registry: this.paletteRegistry, interactions: this.interactions, iconRegistry: this.iconRegistry, themeController: this.themeController, ...options });
+    this._instances.push(instance); return instance;
+  }
+  _mountProperties(container, options = {}) {
+    const instance = new PropertiesPanel({ container, studio: this.studio, registry: this.propertiesRegistry, iconRegistry: this.iconRegistry, themeController: this.themeController, ...options });
+    instance.render(); this._instances.push(instance); return instance;
+  }
+  destroy() {
+    this._cleanups.splice(0).reverse().forEach((cleanup) => cleanup?.());
+    this._instances.splice(0).reverse().forEach((instance) => instance.destroy?.());
+    this.container.innerHTML = '';
+    this.container.classList.remove('nova-studio-shell');
+    this.themeController.destroy();
+  }
+}
+
+export function createStudioShell(options) { return new BpmnStudioShell(options); }