@bpmn-nova/studio 0.3.0-preview → 0.3.2-preview

package/dist/shell.js

@@ -1,9 +1,9 @@
-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 { createDefaultIconRegistry, hydrateIcons } from './modules/icons/index.js';
+import { createDefaultPaletteRegistry, PalettePanel } from './modules/palette/index.js';
+import { createDefaultPropertiesRegistry, PropertiesPanel } from './modules/properties/index.js';
+import { BpmnViewer } from './modules/viewer/index.js';
+import { ThemeController } from './modules/theme/index.js';
+import { openSvgExportPreview } from './modules/export-svg/index.js';
 import { BpmnCanvas } from './canvas.js';
 import { createDefaultContextMenuRegistry } from './context-menu.js';
 import { createInteractionController, createTemplateRegistry } from './interactions.js';
@@ -28,6 +28,39 @@ function mountSlot(slot, container, context) {
   return null;
 }
 
+const STUDIO_MODES = ['design', 'viewer', 'instance'];
+const STUDIO_SHELL_REGIONS = ['header', 'left', 'right', 'footer'];
+const DEFAULT_STUDIO_SHELL_REGIONS = Object.freeze({
+  header: 'default',
+  left: 'default',
+  right: 'default',
+  footer: 'default',
+});
+
+function normalizeAllowedModes(allowedModes) {
+  if (allowedModes === undefined || allowedModes === null) return [...STUDIO_MODES];
+  if (!Array.isArray(allowedModes)) throw new Error('allowedModes must be an array of Studio modes.');
+  const normalized = [...new Set(allowedModes.filter((mode) => STUDIO_MODES.includes(mode)))];
+  if (!normalized.length || normalized.length !== allowedModes.length) {
+    throw new Error('allowedModes must contain one or more unique design, viewer, or instance modes.');
+  }
+  return normalized;
+}
+
+function normalizeRegions(regions, current = DEFAULT_STUDIO_SHELL_REGIONS) {
+  if (regions === undefined || regions === null) return { ...current };
+  if (!regions || typeof regions !== 'object' || Array.isArray(regions)) {
+    throw new Error('regions must be an object containing header, left, right, or footer modes.');
+  }
+  for (const name of Object.keys(regions)) {
+    if (!STUDIO_SHELL_REGIONS.includes(name)) throw new Error(`Unknown Studio Shell region: ${name}.`);
+    if (!['default', 'hidden'].includes(regions[name])) {
+      throw new Error(`Studio Shell region "${name}" must be "default" or "hidden".`);
+    }
+  }
+  return { ...current, ...regions };
+}
+
 export class BpmnStudioShell {
   constructor({
     container,
@@ -40,8 +73,10 @@ export class BpmnStudioShell {
     rendererOptions = {},
     slots = {},
     layout = null,
-    runtime = demoRuntime(),
+    regions = null,
+    runtime = null,
     mode = 'design',
+    allowedModes = null,
     projection = undefined,
     responsive = false,
     projectionOptions = null,
@@ -49,11 +84,17 @@ export class BpmnStudioShell {
     rightWidth = 360,
     theme = null,
     runtimeAppearance = null,
+    svgExport = null,
     onThemeChange = null,
   } = {}) {
     if (!container || !studio) throw new Error('BpmnStudioShell requires container and studio.');
+    if (typeof layout === 'function' && regions !== null && regions !== undefined) {
+      throw new Error('BpmnStudioShell options "layout" and "regions" cannot be used together.');
+    }
+    const resolvedAllowedModes = normalizeAllowedModes(allowedModes);
+    const resolvedMode = resolvedAllowedModes.includes(mode) ? mode : resolvedAllowedModes[0];
     const instanceProjection = projection || (responsive ? 'auto' : 'approval');
-    const activeProjection = mode === 'instance' ? instanceProjection : 'standard';
+    const activeProjection = resolvedMode === 'instance' ? instanceProjection : 'standard';
     Object.assign(this, {
       container,
       studio,
@@ -64,22 +105,57 @@ export class BpmnStudioShell {
       rendererOptions,
       slots,
       runtime,
-      mode,
+      mode: resolvedMode,
+      allowedModes: resolvedAllowedModes,
       projection: activeProjection,
       _instanceProjection: instanceProjection,
       responsive,
       projectionOptions,
       runtimeAppearance,
+      svgExport: svgExport || rendererOptions.svgExport || null,
+      _usesCustomLayout: typeof layout === 'function',
+      _regions: normalizeRegions(regions),
     });
     this.propertiesRegistry = propertiesRegistry || createDefaultPropertiesRegistry({ studio });
     this.interactions = createInteractionController({ studio, templates: templateRegistry });
     this._cleanups = [];
     this._instances = [];
+    this._svgExportPreview = null;
+    this.actions = Object.freeze({
+      undo: () => this.studio.undo(),
+      redo: () => this.studio.redo(),
+      beautify: (options) => {
+        this.studio.commands.beautify(options);
+        requestAnimationFrame(() => this._fitActive());
+      },
+      rerouteEdges: (options) => {
+        this.studio.commands.rerouteEdges(options);
+        requestAnimationFrame(() => this._fitActive());
+      },
+      fitView: () => this.fitView(),
+      validate: () => this.studio.validate(),
+      importXml: (xml, engine) => this.studio.importXml(xml, engine),
+      exportXml: (engine) => this.studio.exportXml(engine),
+      exportSvg: (options) => this.exportSvg(options),
+      openSvgExportPreview: (options) => this.openSvgExportPreview(options),
+    });
     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 context = {
+      studio,
+      shell: this,
+      actions: this.actions,
+      getState: () => this.studio.getState(),
+      subscribe: (listener) => this.studio.subscribe(listener),
+      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),
@@ -105,7 +181,7 @@ export class BpmnStudioShell {
       { value: 'design', label: '流程设计', iconId: 'ui.design' },
       { value: 'viewer', label: '流程展示', iconId: 'ui.preview' },
       { value: 'instance', label: '审批轨迹', iconId: 'ui.trace' },
-    ]) {
+    ].filter((item) => this.allowedModes.includes(item.value))) {
       const button = node('button');
       button.type = 'button';
       button.setAttribute('data-mode', item.value);
@@ -140,8 +216,8 @@ export class BpmnStudioShell {
     };
 
     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');
+    const undo = tool('', '撤销 Ctrl/⌘+Z', () => this.actions.undo(), 'is-icon', 'ui.undo');
+    const redo = tool('', '重做 Ctrl/⌘+Y', () => this.actions.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');
@@ -196,7 +272,7 @@ export class BpmnStudioShell {
     });
     beautifySplit.append(beautifyButton, beautifyCaret, beautifyMenu);
     tools.appendChild(beautifySplit);
-    const fit = tool('最佳视图', '适应画布内容', () => this._fitActive(), '', 'ui.fitView');
+    const fit = tool('最佳视图', '适应画布内容', () => this.actions.fitView(), '', 'ui.fitView');
 
     const importInput = node('input', 'nova-studio-import-input');
     importInput.type = 'file';
@@ -204,12 +280,39 @@ export class BpmnStudioShell {
     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');
+    const exportMenu = node('div', 'nova-studio-export-menu');
+    const exportButton = node('button', 'nova-studio-tool nova-studio-export is-primary');
+    exportButton.type = 'button';
+    exportButton.title = '导出当前内容';
+    exportButton.append(node('span', '', '导出'), iconNode('ui.chevron', 'nova-icon nova-icon-xs'));
+    const exportPopover = node('div', 'nova-studio-export-popover is-hidden');
+    const exportSvgButton = node('button', 'nova-studio-export-option');
+    exportSvgButton.type = 'button';
+    exportSvgButton.append(iconNode('ui.preview'), node('strong', '', '导出 SVG'), node('small', '', '预览确认后下载'));
+    exportSvgButton.addEventListener('click', () => {
+      exportPopover.classList.add('is-hidden');
+      exportButton.focus({ preventScroll: true });
+      this.actions.openSvgExportPreview();
+    });
+    const exportBpmnButton = node('button', 'nova-studio-export-option');
+    exportBpmnButton.type = 'button';
+    exportBpmnButton.append(iconNode('ui.design'), node('strong', '', '导出 BPMN'), node('small', '', '下载流程 XML'));
+    exportBpmnButton.addEventListener('click', () => {
+      exportPopover.classList.add('is-hidden');
+      this._exportBpmn();
+    });
+    exportPopover.append(exportSvgButton, exportBpmnButton);
+    exportButton.addEventListener('click', (event) => {
+      event.stopPropagation();
+      exportPopover.classList.toggle('is-hidden');
+    });
+    exportMenu.append(exportButton, exportPopover);
+    tools.appendChild(exportMenu);
     importInput.addEventListener('change', async () => {
       const file = importInput.files?.[0];
       if (!file) return;
       try {
-        this.studio.importXml(await file.text(), this.studio.model.engine);
+        this.actions.importXml(await file.text(), this.studio.model.engine);
         this._setStatus('已导入 BPMN 文件', 'ok');
         requestAnimationFrame(() => this._fitActive());
       } catch (error) {
@@ -264,9 +367,13 @@ export class BpmnStudioShell {
     this.container.append(header, body);
     hydrateIcons(this.container, this.iconRegistry);
     Object.assign(this, {
+      _header: header,
+      _headerStart: brand,
       _body: body,
       _left: left,
       _right: right,
+      _canvasColumn: canvasColumn,
+      _footer: statusbar,
       _canvasHost: canvasHost,
       _floatingHead: floatingHead,
       _scopeBack: scopeBack,
@@ -275,7 +382,10 @@ export class BpmnStudioShell {
       _projectionSwitch: projectionSwitch,
       _projectionButtons: projectionButtons,
       _viewportTools: viewportTools,
-      _designControls: [undo, redo, beautifySplit, validateButton, importButton, exportButton],
+      _designControls: [undo, redo, beautifySplit, validateButton, importButton],
+      _exportMenu: exportMenu,
+      _exportPopover: exportPopover,
+      _exportBpmnButton: exportBpmnButton,
       _defaultContext: context,
       _defaultMount: mount,
       _usesDefaultProperties: !this.slots.right,
@@ -294,8 +404,15 @@ export class BpmnStudioShell {
     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.header) {
+      header.innerHTML = '';
+      this._recordCleanup(mountSlot(this.slots.header, header, { ...context, canvas: this.canvas }));
+    } else if (this.slots.headerStart) {
+      brand.innerHTML = '';
+      this._recordCleanup(mountSlot(this.slots.headerStart, brand, { ...context, canvas: this.canvas }));
+    }
     if (this.slots.footer) { statusbar.innerHTML = ''; this._recordCleanup(mountSlot(this.slots.footer, statusbar, { ...context, canvas: this.canvas })); }
+    hydrateIcons(this.container, this.iconRegistry);
     this._offState = this.studio.subscribe((event) => {
       if (event.type === 'historyChanged' || event.type === 'modelChanged') {
         undo.disabled = !this.studio.history.canUndo;
@@ -319,6 +436,7 @@ export class BpmnStudioShell {
     this._setStatus(`${initialGraph.nodes.length} 节点 · ${initialGraph.edges.length} 连线`, 'ok');
     const closeBeautify = (event) => {
       if (!beautifySplit.contains(event.target)) beautifyMenu.classList.add('is-hidden');
+      if (!exportMenu.contains(event.target)) exportPopover.classList.add('is-hidden');
     };
     document.addEventListener('click', closeBeautify);
     this._cleanups.push(() => document.removeEventListener('click', closeBeautify));
@@ -364,14 +482,13 @@ export class BpmnStudioShell {
 
   _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({
+    if (action === 'routing') this.actions.rerouteEdges({ edgeStyle: 'rounded' });
+    else if (action === 'smooth') this.actions.rerouteEdges({ edgeStyle: 'smooth' });
+    else this.actions.beautify({
       direction: action || settings.direction || 'horizontal',
       density: settings.layoutDensity || 'balanced',
       edgeStyle: settings.edgeStyle || 'rounded',
     });
-    requestAnimationFrame(() => this._fitActive());
   }
 
   _syncDensityButtons() {
@@ -381,16 +498,18 @@ export class BpmnStudioShell {
   }
 
   _setMode(mode, { force = false } = {}) {
-    if (!['design', 'viewer', 'instance'].includes(mode)) return;
+    if (!this.allowedModes.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._applyRegions({ fit: false });
     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._exportBpmnButton?.classList.toggle('is-hidden', mode !== 'design');
     this._syncProjectionButtons();
     this._body?.classList.remove('is-timeline');
 
@@ -418,6 +537,7 @@ export class BpmnStudioShell {
         runtimePresenter: this.rendererOptions.runtimePresenter,
         runtimeTraceProjector: this.rendererOptions.runtimeTraceProjector,
         runtimeAssetResolver: this.rendererOptions.runtimeAssetResolver,
+        svgExport: this.svgExport,
         runtimeTimelineRenderer: this.slots.runtimeTimeline
           ? (timeline) => mountSlot(this.slots.runtimeTimeline, timeline.container, { ...timeline, studio: this.studio, shell: this })
           : this.rendererOptions.runtimeTimelineRenderer,
@@ -526,6 +646,34 @@ export class BpmnStudioShell {
     this._syncProjectionButtons();
     if (this.mode === 'instance') this.viewer?.setProjection?.(projection);
   }
+  getRegions() { return Object.freeze({ ...this._regions }); }
+  setRegions(regions) {
+    if (this._usesCustomLayout) {
+      throw new Error('BpmnStudioShell setRegions() is unavailable when a custom layout is active.');
+    }
+    const next = normalizeRegions(regions, this._regions);
+    const changed = STUDIO_SHELL_REGIONS.some((name) => next[name] !== this._regions[name]);
+    this._regions = next;
+    if (changed) this._applyRegions();
+    return this.getRegions();
+  }
+  _applyRegions({ fit = true } = {}) {
+    if (this._usesCustomLayout || !this._body) return;
+    const readonly = this.mode !== 'design';
+    const headerHidden = this._regions.header === 'hidden';
+    const leftHidden = readonly || this._regions.left === 'hidden';
+    const rightHidden = this._regions.right === 'hidden';
+    const footerHidden = this._regions.footer === 'hidden';
+    this.container.classList.toggle('is-header-hidden', headerHidden);
+    this._body.classList.toggle('is-left-hidden', leftHidden);
+    this._body.classList.toggle('is-right-hidden', rightHidden);
+    this._canvasColumn?.classList.toggle('is-footer-hidden', footerHidden);
+    if (this._header) this._header.hidden = headerHidden;
+    if (this._left) this._left.hidden = leftHidden;
+    if (this._right) this._right.hidden = rightHidden;
+    if (this._footer) this._footer.hidden = footerHidden;
+    if (fit) requestAnimationFrame(() => this._fitActive());
+  }
   setTheme(theme) { return this.themeController.setTheme(theme); }
   setThemeMode(mode) { return this.themeController.setMode(mode); }
   getThemeState() { return this.themeController.getState(); }
@@ -544,6 +692,35 @@ export class BpmnStudioShell {
   }
   fitView() { this._fitActive(); }
   zoomBy(factor) { this._zoomActive(factor); }
+  exportSvg(options) {
+    const active = this.canvas || this.viewer;
+    if (!active?.exportSvg) return Promise.reject(new Error('当前视图不支持 SVG 导出。'));
+    const label = this.mode === 'design' ? '流程设计' : this.mode === 'viewer' ? '流程展示' : this.viewer?.activeProjection === 'compact' ? '移动时间线' : this.viewer?.activeProjection === 'approval' ? '实际路径' : '完整 BPMN';
+    const filename = options?.filename || this.svgExport?.filename || `${this.studio.model.name || this.studio.model.id}-${label}`;
+    return active.exportSvg({ label, ...(options || {}), filename });
+  }
+  openSvgExportPreview(options = {}) {
+    if (this._svgExportPreview && !this._svgExportPreview.closed) {
+      this._svgExportPreview.focus();
+      return this._svgExportPreview;
+    }
+    const active = this.canvas || this.viewer;
+    if (!active?.exportSvg) return null;
+    const label = this.mode === 'design' ? '流程设计' : this.mode === 'viewer' ? '流程展示' : this.viewer?.activeProjection === 'compact' ? '移动时间线' : this.viewer?.activeProjection === 'approval' ? '实际路径' : '完整 BPMN';
+    const filename = options.filename || this.svgExport?.filename || `${this.studio.model.name || this.studio.model.id}-${label}`;
+    this._svgExportPreview = openSvgExportPreview({
+      container: this.container,
+      title: options.previewTitle || `导出 ${label} SVG`,
+      initialTheme: options.theme || 'current',
+      createArtifact: (previewOptions) => this.exportSvg({ label, ...options, ...previewOptions, filename }),
+      onClose: () => { this._svgExportPreview = null; },
+      onDownload: (artifact) => {
+        this._setStatus(`SVG 已导出：${artifact.filename}`, 'ok');
+        options.onDownload?.(artifact);
+      },
+    });
+    return this._svgExportPreview;
+  }
 
   _setStatus(message, tone = 'ok') {
     if (!this._statusText || !this._statusDot) return;
@@ -552,7 +729,7 @@ export class BpmnStudioShell {
   }
 
   _showValidationStatus() {
-    const issues = this.studio.validate();
+    const issues = this.actions.validate();
     if (!issues.length) this._setStatus('校验通过：流程结构正常', 'ok');
     else {
       const errors = issues.filter((issue) => issue.level === 'error').length;
@@ -562,7 +739,7 @@ export class BpmnStudioShell {
   }
 
   _exportBpmn() {
-    const blob = new Blob([this.studio.exportXml()], { type: 'application/xml;charset=utf-8' });
+    const blob = new Blob([this.actions.exportXml()], { type: 'application/xml;charset=utf-8' });
     const url = URL.createObjectURL(blob);
     const anchor = node('a');
     anchor.href = url;
@@ -583,7 +760,12 @@ export class BpmnStudioShell {
       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 || {}) },
+      rendererOptions: {
+        iconRegistry: this.iconRegistry,
+        ...this.rendererOptions,
+        svgExport: this.svgExport,
+        ...(options.rendererOptions || {}),
+      },
       themeController: this.themeController,
     });
     this._instances.push(instance); return instance;
@@ -597,6 +779,8 @@ export class BpmnStudioShell {
     instance.render(); this._instances.push(instance); return instance;
   }
   destroy() {
+    this._svgExportPreview?.close?.({ immediate: true });
+    this._svgExportPreview = null;
     this._cleanups.splice(0).reverse().forEach((cleanup) => cleanup?.());
     this._instances.splice(0).reverse().forEach((instance) => instance.destroy?.());
     this.container.innerHTML = '';

package/dist/styles.css

@@ -1,4 +1,4 @@
-/* @bpmn-nova/theme */
+/* @bpmn-nova/internal/theme */
 [data-nova-theme] {
   accent-color: var(--nova-color-primary);
 }
@@ -149,7 +149,7 @@
   --nova-tone-manual-task-strong: #dc876f;
 }
 
-/* @bpmn-nova/icons */
+/* @bpmn-nova/internal/icons */
 .nova-icon { width: 16px; height: 16px; display: inline-grid; place-items: center; flex: none; color: currentColor; line-height: 0; transform-origin: 50% 50%; }
 .nova-icon.nova-icon-xs { width: 12px; height: 12px; }
 .nova-icon.nova-icon-sm { width: 14px; height: 14px; }
@@ -157,7 +157,97 @@
 .nova-icon > .nova-icon-svg { width: 100%; height: 100%; display: block; overflow: visible; fill: none; stroke: currentColor; vector-effect: non-scaling-stroke; }
 .nova-icon[data-icon-missing="true"] { visibility: hidden; }
 
-/* @bpmn-nova/renderer-svg */
+/* @bpmn-nova/internal/export-svg */
+.nova-svg-export-preview {
+  position: absolute;
+  inset: 0;
+  z-index: 140;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+  box-sizing: border-box;
+  background: var(--nova-color-backdrop, rgba(20, 26, 39, .38));
+  color: var(--nova-color-text, #1f2430);
+  font-family: var(--nova-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif);
+  opacity: 1;
+  transition: opacity .18s ease;
+}
+.nova-svg-export-preview.is-entering,
+.nova-svg-export-preview.is-closing { opacity: 0; }
+.nova-svg-export-dialog {
+  width: min(1120px, 100%);
+  height: min(820px, 100%);
+  min-height: 420px;
+  display: grid;
+  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
+  overflow: hidden;
+  border: 1px solid var(--nova-color-border, #e1e5ec);
+  border-radius: 16px;
+  background: var(--nova-color-surface, #fff);
+  box-shadow: var(--nova-shadow-lg, 0 18px 52px rgba(22, 29, 48, .2));
+  transform: translateY(0) scale(1);
+  transition: transform .2s cubic-bezier(.2, .8, .2, 1);
+}
+.nova-svg-export-preview.is-entering .nova-svg-export-dialog,
+.nova-svg-export-preview.is-closing .nova-svg-export-dialog { transform: translateY(10px) scale(.985); }
+.nova-svg-export-header,
+.nova-svg-export-toolbar,
+.nova-svg-export-footer { display: flex; align-items: center; gap: 12px; padding: 14px 18px; }
+.nova-svg-export-header { justify-content: space-between; border-bottom: 1px solid var(--nova-color-divider, #e9ecf2); }
+.nova-svg-export-heading { display: grid; gap: 3px; }
+.nova-svg-export-heading strong { font-size: 17px; }
+.nova-svg-export-heading span { color: var(--nova-color-text-muted); font-size: 12px; }
+.nova-svg-export-close { width: 34px; height: 34px; border: 0; border-radius: 9px; background: transparent; color: var(--nova-color-text-muted); font-size: 24px; line-height: 1; cursor: pointer; }
+.nova-svg-export-close:hover { background: var(--nova-color-surface-muted); color: var(--nova-color-text); }
+.nova-svg-export-toolbar { justify-content: space-between; flex-wrap: wrap; background: var(--nova-color-surface-subtle); border-bottom: 1px solid var(--nova-color-divider); }
+.nova-svg-export-theme,
+.nova-svg-export-viewport-tools { display: inline-flex; align-items: center; gap: 3px; padding: 3px; border-radius: 9px; background: var(--nova-color-surface); border: 1px solid var(--nova-color-border); }
+.nova-svg-export-theme button,
+.nova-svg-export-viewport-tools button { min-height: 28px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--nova-color-text-secondary); cursor: pointer; }
+.nova-svg-export-theme button.is-active { background: var(--nova-color-primary-soft); color: var(--nova-color-primary); font-weight: 650; }
+.nova-svg-export-theme button:focus-visible,
+.nova-svg-export-viewport-tools button:focus-visible,
+.nova-svg-export-actions button:focus-visible,
+.nova-svg-export-close:focus-visible,
+.nova-svg-export-viewport:focus-visible { outline: 2px solid var(--nova-color-focus-ring); outline-offset: 2px; }
+.nova-svg-export-transparent { display: inline-flex; align-items: center; gap: 7px; color: var(--nova-color-text-secondary); font-size: 12px; cursor: pointer; }
+.nova-svg-export-viewport-tools span { min-width: 46px; text-align: center; color: var(--nova-color-text-muted); font-size: 11px; }
+.nova-svg-export-body { position: relative; min-height: 0; overflow: hidden; background: var(--nova-color-canvas); }
+.nova-svg-export-viewport { position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: none; background-color: var(--nova-color-canvas); background-image: linear-gradient(45deg, color-mix(in srgb, var(--nova-color-border) 35%, transparent) 25%, transparent 25%), linear-gradient(-45deg, color-mix(in srgb, var(--nova-color-border) 35%, transparent) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, color-mix(in srgb, var(--nova-color-border) 35%, transparent) 75%), linear-gradient(-45deg, transparent 75%, color-mix(in srgb, var(--nova-color-border) 35%, transparent) 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0; }
+.nova-svg-export-viewport.is-dragging { cursor: grabbing; }
+.nova-svg-export-stage { position: absolute; left: 0; top: 0; width: 1px; height: 1px; transform-origin: 0 0; will-change: transform; }
+.nova-svg-export-image { display: block; max-width: none; user-select: none; pointer-events: none; box-shadow: 0 6px 24px rgba(0, 0, 0, .14); }
+.nova-svg-export-state { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; background: color-mix(in srgb, var(--nova-color-surface) 88%, transparent); color: var(--nova-color-text-secondary); }
+.nova-svg-export-state[hidden] { display: none; }
+.nova-svg-export-state.is-error { color: var(--nova-tone-danger-foreground); }
+.nova-svg-export-spinner { width: 24px; height: 24px; border: 2px solid var(--nova-color-border); border-top-color: var(--nova-color-primary); border-radius: 50%; animation: nova-svg-export-spin .8s linear infinite; }
+.nova-svg-export-state.is-error .nova-svg-export-spinner { display: none; }
+@keyframes nova-svg-export-spin { to { transform: rotate(360deg); } }
+.nova-svg-export-warnings { max-height: 110px; overflow: auto; padding: 10px 18px; border-top: 1px solid var(--nova-tone-warning-border); background: var(--nova-tone-warning-background); color: var(--nova-tone-warning-foreground); font-size: 11px; }
+.nova-svg-export-warnings[hidden] { display: none; }
+.nova-svg-export-warnings strong { display: block; margin-bottom: 4px; }
+.nova-svg-export-warnings ul { margin: 0; padding-left: 18px; }
+.nova-svg-export-footer { justify-content: space-between; border-top: 1px solid var(--nova-color-divider); }
+.nova-svg-export-summary { min-width: 0; overflow: hidden; color: var(--nova-color-text-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
+.nova-svg-export-actions { display: flex; gap: 8px; }
+.nova-svg-export-actions button { min-height: 34px; padding: 0 14px; border: 1px solid var(--nova-color-border); border-radius: 9px; background: var(--nova-color-surface); color: var(--nova-color-text-secondary); cursor: pointer; }
+.nova-svg-export-actions button.is-primary { border-color: var(--nova-color-primary); background: var(--nova-color-primary); color: var(--nova-color-text-inverse, #fff); }
+.nova-svg-export-actions button:disabled { opacity: .48; cursor: not-allowed; }
+@media (max-width: 720px) {
+  .nova-svg-export-preview { padding: 10px; }
+  .nova-svg-export-dialog { width: 100%; height: 100%; min-height: 0; border-radius: 12px; }
+  .nova-svg-export-toolbar { align-items: flex-start; }
+  .nova-svg-export-viewport-tools { order: 3; width: 100%; justify-content: center; }
+  .nova-svg-export-summary { display: none; }
+  .nova-svg-export-footer { justify-content: flex-end; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .nova-svg-export-preview,
+  .nova-svg-export-dialog { transition: none; }
+  .nova-svg-export-spinner { animation: none; }
+}
+
+/* @bpmn-nova/internal/renderer-svg */
 .mb-diagram-host,
 .mb-runtime-timeline-host {
   --mb-primary: var(--nova-color-primary, #635bff);
@@ -898,7 +988,7 @@ button.mb-runtime-action-summary:hover, button.mb-runtime-action-summary:focus-v
   height: 100%;
 }
 
-/* @bpmn-nova/palette */
+/* @bpmn-nova/internal/palette */
 .nova-palette { height: 100%; overflow: auto; padding: 10px; color: var(--nova-color-text, #243047); background: var(--nova-color-surface, #fff); }
 .nova-palette-section { border-bottom: 1px solid var(--nova-color-divider, #edf0f5); padding: 3px 0 8px; }
 .nova-palette-section-toggle { width: 100%; min-height: 34px; border: 0; background: transparent; display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 6px; color: inherit; cursor: pointer; text-align: left; }
@@ -917,7 +1007,7 @@ button.mb-runtime-action-summary:hover, button.mb-runtime-action-summary:focus-v
 .nova-palette-item-copy strong { font-size: var(--nova-font-size-sm, 12px); line-height: 18px; font-weight: var(--nova-font-weight-semibold, 600); }
 .nova-palette-item-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--nova-color-text-muted, #919aad); font-size: var(--nova-font-size-xs, 10px); line-height: 14px; }
 
-/* @bpmn-nova/properties-renderer */
+/* @bpmn-nova/internal/properties-renderer */
 .nova-properties { min-height: 100%; color: var(--nova-color-text); background: var(--nova-color-surface); color-scheme: inherit; }
 .properties-head { position: sticky; top: 0; z-index: 5; padding: 15px 16px 12px; border-bottom: 1px solid var(--nova-color-divider, #e7eaf1); background: color-mix(in srgb, var(--nova-color-surface) 97%, transparent); backdrop-filter: blur(10px); }
 .properties-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
@@ -1049,8 +1139,10 @@ textarea.property-control { resize: vertical; }
 .property-branch-target { min-width: 0; flex: 1; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 5px; }
 .property-branch-target small { color: var(--nova-color-text-muted); font-size: var(--nova-font-size-xs, 10px); line-height: 14px; }.property-branch-target strong { overflow: hidden; color: var(--nova-color-text-secondary); font-size: var(--nova-font-size-sm, 12px); line-height: 18px; font-weight: var(--nova-font-weight-semibold, 600); text-overflow: ellipsis; white-space: nowrap; }.property-branch-target > span { color: var(--nova-color-primary); font-size: var(--nova-font-size-sm, 12px); }
 
-/* @bpmn-nova/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; 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); }
+/* @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); }
@@ -1076,6 +1168,17 @@ textarea.property-control { resize: vertical; }
 .nova-studio-tool.is-primary { border-color: var(--nova-color-primary); color: var(--nova-color-text-inverse, #fff); background: var(--nova-color-primary, #5361d6); }
 .nova-studio-tool.is-primary:hover { border-color: var(--nova-color-primary-hover); color: var(--nova-color-text-inverse, #fff); background: var(--nova-color-primary-hover); }
 .nova-studio-tool:disabled { opacity: .4; cursor: default; }
+.nova-studio-export-menu { position: relative; flex: none; }
+.nova-studio-export-menu > .nova-studio-tool { display: inline-flex; align-items: center; gap: 7px; }
+.nova-studio-export-popover { position: absolute; z-index: 90; top: calc(100% + 8px); right: 0; width: 220px; padding: 6px; border: 1px solid var(--nova-color-border); border-radius: 11px; background: var(--nova-color-surface-raised); box-shadow: var(--nova-shadow-md); }
+.nova-studio-export-popover.is-hidden { display: none; }
+.nova-studio-export-option { width: 100%; display: grid; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 9px; padding: 9px; border: 0; border-radius: 8px; background: transparent; color: var(--nova-color-text); text-align: left; cursor: pointer; }
+.nova-studio-export-option:hover { background: var(--nova-color-surface-muted); }
+.nova-studio-export-option:focus-visible { outline: 2px solid var(--nova-color-focus-ring); outline-offset: -2px; }
+.nova-studio-export-option > .nova-icon { grid-row: 1 / span 2; align-self: center; color: var(--nova-color-primary); }
+.nova-studio-export-option strong { font-size: var(--nova-font-size-sm, 12px); }
+.nova-studio-export-option small { color: var(--nova-color-text-muted); font-size: var(--nova-font-size-xs, 10px); }
+.nova-studio-export-option.is-hidden { display: none; }
 .nova-studio-import-input { display: none; }
 .nova-studio-beautify-split { position: relative; flex: none; display: flex; }
 .nova-studio-beautify-split .nova-studio-beautify { border-radius: 7px 0 0 7px; }
@@ -1093,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; }
@@ -1105,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%; }
@@ -1321,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; }