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

package/dist/modules/properties-renderer/index.js

@@ -0,0 +1,491 @@
+import { NODE_DEFINITIONS } from '../core/index.js';
+import { normalizeOptions } from '../properties-core/index.js';
+import { createDefaultIconRegistry, hydrateIcons, iconIdForNode } from '../icons/index.js';
+import { ThemeController } from '../theme/index.js';
+
+const escapeHtml = (value = '') => String(value)
+  .replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;')
+  .replaceAll('"', '&quot;').replaceAll("'", '&#039;');
+
+function valueText(value) {
+  if (Array.isArray(value)) return value.join(', ');
+  if (value === true) return 'true';
+  if (value === false) return 'false';
+  return value ?? '';
+}
+
+function optionHtml(options, value) {
+  return normalizeOptions(options).map((option) => `<option value="${escapeHtml(option.value)}" ${String(option.value) === String(value ?? '') ? 'selected' : ''}>${escapeHtml(option.label)}</option>`).join('');
+}
+
+let selectSeed = 0;
+function customSelectHtml(options, value, nativeAttrs, { label = '选择', compact = false, disabled = false } = {}) {
+  const normalized = normalizeOptions(options);
+  const selectedValue = String(value ?? '');
+  const selected = normalized.find((option) => String(option.value) === selectedValue);
+  const selectedLabel = selected?.label ?? normalized[0]?.label ?? '请选择';
+  const listboxId = `nova-property-select-${++selectSeed}`;
+  const optionList = normalized.map((option, index) => {
+    const isSelected = String(option.value) === selectedValue;
+    return `<button type="button" class="property-select-option ${isSelected ? 'is-selected' : ''}" role="option" aria-selected="${isSelected ? 'true' : 'false'}" tabindex="-1" data-property-select-option data-option-index="${index}" data-value="${escapeHtml(option.value)}"><span>${escapeHtml(option.label)}</span><span class="nova-icon nova-icon-sm property-select-check" data-icon="ui.check"></span></button>`;
+  }).join('');
+  return `<div class="property-select ${compact ? 'property-select-compact' : ''}" data-property-select>
+    <button type="button" class="property-select-trigger" data-property-select-trigger aria-label="${escapeHtml(`${label}：${selectedLabel}`)}" aria-haspopup="listbox" aria-expanded="false" aria-controls="${listboxId}" ${disabled ? 'disabled' : ''}><span class="property-select-value">${escapeHtml(selectedLabel)}</span><span class="nova-icon nova-icon-sm property-select-chevron" data-icon="ui.chevron"></span></button>
+    <div class="property-select-popover" id="${listboxId}" role="listbox" aria-label="${escapeHtml(label)}" hidden>${optionList || '<div class="property-select-empty">暂无选项</div>'}</div>
+    <select class="property-select-native" data-property-select-native tabindex="-1" aria-hidden="true" hidden ${nativeAttrs}>${optionHtml(normalized, value)}</select>
+  </div>`;
+}
+
+function resolveMaybe(value, context) {
+  return typeof value === 'function' ? value(context) : value;
+}
+
+function fieldShell(entry, control, error = null) {
+  const required = entry.required ? '<span class="property-required">*</span>' : '';
+  const note = entry.note ? `<div class="property-note">${escapeHtml(entry.note)}</div>` : '';
+  const validation = error ? `<div class="property-error">${escapeHtml(error)}</div>` : '';
+  const label = entry.label ? `<label class="property-label">${escapeHtml(entry.label)}${required}</label>` : '';
+  const variant = entry.variant ? ` property-variant-${escapeHtml(entry.variant)}` : '';
+  return `<div class="property-field property-type-${escapeHtml(entry.type || 'text')}${variant}" data-entry-id="${escapeHtml(entry.id)}">${label}${control}${note}${validation}</div>`;
+}
+
+function renderBasicEntry(entry, value, context) {
+  const attrs = `data-property-input="${escapeHtml(entry.id)}" ${entry.readonly ? 'disabled' : ''}`;
+  const placeholder = entry.placeholder ? `placeholder="${escapeHtml(entry.placeholder)}"` : '';
+  if (entry.type === 'readonly') return fieldShell(entry, `<div class="property-readonly">${escapeHtml(resolveMaybe(entry.getValue ? value : (entry.value ?? value), context) || '—')}</div>`);
+  if (entry.type === 'textarea' || entry.type === 'code' || entry.type === 'expression') {
+    const cls = entry.type === 'code' ? ' property-code' : entry.type === 'expression' ? ' property-expression' : '';
+    return fieldShell(entry, `<textarea class="property-control${cls}" rows="${entry.rows || (entry.type === 'code' ? 8 : 4)}" ${attrs} ${placeholder}>${escapeHtml(valueText(value))}</textarea>`);
+  }
+  if (entry.type === 'select') {
+    const options = resolveMaybe(entry.options, context) || [];
+    return fieldShell(entry, customSelectHtml(options, value, attrs, { label: entry.label, disabled: entry.readonly }));
+  }
+  if (entry.type === 'switch') {
+    return fieldShell(entry, `<button type="button" class="property-switch ${value ? 'is-on' : ''}" data-property-switch="${escapeHtml(entry.id)}" aria-pressed="${value ? 'true' : 'false'}"><span></span><strong>${value ? '开启' : '关闭'}</strong></button>`);
+  }
+  if (entry.type === 'range') {
+    return fieldShell(entry, `<div class="property-range"><input type="range" min="${entry.min ?? 0}" max="${entry.max ?? 100}" step="${entry.step ?? 1}" value="${Number(value ?? entry.min ?? 0)}" ${attrs}/><span data-range-value="${escapeHtml(entry.id)}">${escapeHtml(valueText(value))}${escapeHtml(entry.unit || '')}</span></div>`);
+  }
+  if (entry.type === 'action') {
+    const actionIcon = entry.iconId ? `<span class="nova-icon nova-icon-sm" data-icon="${escapeHtml(entry.iconId)}"></span>` : '';
+    return fieldShell(entry, `<button type="button" class="property-action ${entry.variant === 'danger' ? 'is-danger' : ''}" data-property-action="${escapeHtml(entry.id)}">${actionIcon}<span>${escapeHtml(entry.actionLabel || entry.label || '执行')}</span></button>`);
+  }
+  if (entry.type === 'tags') {
+    return fieldShell(entry, `<input class="property-control" type="text" value="${escapeHtml(valueText(value))}" ${attrs} ${placeholder}/><div class="property-inline-hint">使用逗号分隔多个值；也可填写表达式。</div>`);
+  }
+  if (entry.type === 'number') {
+    return fieldShell(entry, `<input class="property-control" type="number" value="${escapeHtml(valueText(value))}" min="${entry.min ?? ''}" max="${entry.max ?? ''}" step="${entry.step ?? 1}" ${attrs} ${placeholder}/>`);
+  }
+  return fieldShell(entry, `<input class="property-control" type="text" value="${escapeHtml(valueText(value))}" ${attrs} ${placeholder}/>`);
+}
+
+function renderSmartSelect(entry, value, context, panelId) {
+  const options = smartOptions(entry, context);
+  const listId = `${panelId}-${entry.id}-list`;
+  const optionList = Array.isArray(options) ? options : [];
+  const datalist = `<datalist id="${escapeHtml(listId)}">${normalizeOptions(optionList).map((option) => `<option value="${escapeHtml(option.value)}">${escapeHtml(option.label)}</option>`).join('')}</datalist>`;
+  return fieldShell(entry, `<div class="property-smart-select"><input class="property-control" list="${escapeHtml(listId)}" type="text" value="${escapeHtml(valueText(value))}" data-property-input="${escapeHtml(entry.id)}" placeholder="${escapeHtml(entry.placeholder || '选择或输入值')}"/><span class="nova-icon nova-icon-sm property-smart-icon" data-icon="ui.chevron"></span></div>${datalist}`);
+}
+
+function smartOptions(entry, context) {
+  if (entry.type === 'resource-select') return resolveMaybe(entry.options, context) || [];
+  if (entry.type === 'node-select') {
+    return context.model.nodes.filter((node) => !entry.nodeFilter || entry.nodeFilter(node, context)).map((node) => ({ value: node.id, label: `${node.name} · ${node.id}` }));
+  }
+  const provider = entry.dataProvider ? context.data(entry.dataProvider) : null;
+  if (!provider) return [];
+  if (entry.type === 'user-select') {
+    const method = provider.searchUsers || provider.listUsers || provider.list;
+    return typeof method === 'function' ? method.call(provider, '') : [];
+  }
+  if (entry.type === 'form-select') {
+    const method = provider.listForms || provider.list;
+    return typeof method === 'function' ? method.call(provider) : [];
+  }
+  if (entry.type === 'process-select') {
+    const method = provider.listProcesses || provider.list;
+    return typeof method === 'function' ? method.call(provider) : [];
+  }
+  return [];
+}
+
+function renderNodeList(entry, value, context) {
+  const rows = (value || []).map((id) => context.model.nodes.find((node) => node.id === id)).filter(Boolean);
+  const content = rows.length ? rows.map((node) => {
+    const definition = NODE_DEFINITIONS[node.type] || NODE_DEFINITIONS.generic;
+    const label = node.name || definition?.label || node.id;
+    const typeLabel = definition?.label || node.type || '流程节点';
+    return `<button type="button" class="property-node-ref" data-node-ref="${escapeHtml(node.id)}" aria-label="${escapeHtml(`定位到节点：${label}`)}">
+      <span class="property-node-ref-icon"><span class="nova-icon nova-icon-sm" data-icon="${escapeHtml(iconIdForNode(node.type, definition))}"></span></span>
+      <span class="property-node-ref-copy"><strong title="${escapeHtml(label)}">${escapeHtml(label)}</strong><small title="${escapeHtml(`${typeLabel} · ${node.id}`)}">${escapeHtml(typeLabel)} · ${escapeHtml(node.id)}</small></span>
+      <span class="property-node-ref-locate nova-icon nova-icon-xs" data-icon="ui.locate"></span>
+    </button>`;
+  }).join('') : '<div class="property-empty-row">暂无节点引用</div>';
+  return fieldShell(entry, `<div class="property-node-list">${content}</div>`);
+}
+
+function renderFlowList(entry, value, context) {
+  const rows = Array.isArray(value) ? value : [];
+  const content = rows.length ? rows.map((edge, index) => {
+    const relation = entry.relation === 'target' ? 'target' : 'source';
+    const related = context.model.nodes.find((node) => node.id === edge[relation]);
+    return `<button type="button" class="property-flow-ref" data-flow-ref="${escapeHtml(edge.id)}">
+      <span class="property-flow-index">${index + 1}</span>
+      <span class="property-flow-copy"><strong>${escapeHtml(related?.name || edge[relation] || '未连接')}</strong><small>${escapeHtml(edge.name || edge.id)}</small></span>
+      <span class="nova-icon nova-icon-xs" data-icon="ui.locate"></span>
+    </button>`;
+  }).join('') : `<div class="property-empty-row">${escapeHtml(entry.emptyText || '暂无线路')}</div>`;
+  return fieldShell(entry, `<div class="property-flow-list">${content}</div>`);
+}
+
+function renderTable(entry, value) {
+  const rows = Array.isArray(value) ? value : [];
+  const columns = entry.columns || [];
+  const head = columns.map((column) => `<span>${escapeHtml(column.label)}</span>`).join('') + '<span></span>';
+  const rowHtml = rows.map((row, rowIndex) => {
+    const cells = columns.map((column) => {
+      const cellValue = row?.[column.key] ?? '';
+      if (column.type === 'select') return customSelectHtml(column.options || [], cellValue, `data-table-input data-table-entry="${escapeHtml(entry.id)}" data-row="${rowIndex}" data-key="${escapeHtml(column.key)}"`, { label: column.label, compact: true });
+      return `<input class="property-table-input" type="text" value="${escapeHtml(cellValue)}" data-table-entry="${escapeHtml(entry.id)}" data-row="${rowIndex}" data-key="${escapeHtml(column.key)}" placeholder="${escapeHtml(column.placeholder || '')}"/>`;
+    }).join('');
+    return `<div class="property-table-row" style="--property-columns:${Math.max(1, columns.length)}">${cells}<button type="button" class="property-row-remove" data-table-remove="${escapeHtml(entry.id)}" data-row="${rowIndex}" title="删除" aria-label="删除"><span class="nova-icon nova-icon-sm" data-icon="ui.delete"></span></button></div>`;
+  }).join('');
+  return fieldShell(entry, `<div class="property-table"><div class="property-table-head" style="--property-columns:${Math.max(1, columns.length)}">${head}</div>${rowHtml || '<div class="property-empty-row">暂无配置</div>'}<button type="button" class="property-row-add" data-table-add="${escapeHtml(entry.id)}"><span class="nova-icon nova-icon-sm" data-icon="ui.add"></span><span>添加${escapeHtml(entry.rowLabel || '一项')}</span></button></div>`);
+}
+
+function renderBranchList(entry, value, context) {
+  const rows = Array.isArray(value) ? value : [];
+  const fields = new Set(entry.fields || ['name', 'condition', 'default']);
+  const html = rows.length ? rows.map((row, index) => {
+    const target = context.model.nodes.find((node) => node.id === row.target);
+    return `<div class="property-branch-card ${row.isDefault ? 'is-default' : ''}" data-branch-index="${index}">
+      <div class="property-branch-head">
+        <div class="property-branch-identity"><span>${index + 1}</span><div><strong>分支 ${index + 1}</strong><small>Sequence Flow</small></div></div>
+        <button type="button" class="property-branch-locate" data-branch-select="${index}"><span>定位</span><span class="nova-icon nova-icon-xs" data-icon="ui.locate"></span></button>
+      </div>
+      <div class="property-branch-condition ${fields.size === 1 ? 'is-single-field' : ''}">
+        ${fields.has('name') ? `<label><span>出口名称</span><input class="property-control" type="text" value="${escapeHtml(row.name || '')}" data-branch-field="name" data-row="${index}" placeholder="例如：采购审批"/></label>` : ''}
+        ${fields.has('condition') ? `<label><span>条件表达式</span><textarea class="property-control property-expression" rows="2" data-branch-field="condition" data-row="${index}" placeholder="${escapeHtml('${condition}')}">${escapeHtml(row.condition || '')}</textarea></label>` : ''}
+      </div>
+      <div class="property-branch-foot ${fields.has('default') ? '' : 'is-target-only'}">
+        ${fields.has('default') ? `<label class="property-branch-default ${row.isDefault ? 'is-active' : ''}"><input type="radio" name="default-branch-${escapeHtml(context.element.id)}" data-branch-default="${index}" ${row.isDefault ? 'checked' : ''}/><i></i><span>默认线路</span></label>` : ''}
+        <div class="property-branch-target"><small>流向</small><strong>${escapeHtml(target?.name || row.target || '未连接')}</strong><span>→</span></div>
+      </div>
+    </div>`;
+  }).join('') : '<div class="property-empty-row">当前网关没有出口分支</div>';
+  return fieldShell(entry, `<div class="property-branch-list">${html}</div>`);
+}
+
+let panelSeed = 0;
+export class PropertiesPanel {
+  constructor({ container, registry, studio = registry?.studio, designer = null, canvas = null, iconRegistry = createDefaultIconRegistry(), emptyText = '请选择元素查看属性', themeController = null, theme = null, onThemeChange = null } = {}) {
+    if (!container) throw new Error('PropertiesPanel requires a container.');
+    if (!registry) throw new Error('PropertiesPanel requires a PropertiesRegistry.');
+    this.container = container;
+    this.registry = registry;
+    this.studio = studio || designer;
+    this.designer = this.studio;
+    this.canvas = canvas;
+    this.iconRegistry = iconRegistry;
+    this.registry.setStudio(this.studio);
+    this.emptyText = emptyText;
+    this.collapseState = new Map();
+    this.id = `nova-properties-${++panelSeed}`;
+    this.container.classList.add('nova-properties');
+    this.themeController = themeController || new ThemeController({ root: container, theme, onChange: onThemeChange });
+    this._ownsThemeController = !themeController;
+    this._customCleanups = [];
+    this._offStudio = this.studio?.subscribe?.((event) => {
+      if (['selectionChanged', 'modelChanged', 'propertiesProfileChanged'].includes(event.type)) this.render();
+    });
+  }
+
+  destroy() {
+    this._customCleanups.forEach((cleanup) => cleanup?.());
+    this._customCleanups = [];
+    this._offStudio?.();
+    this.container.innerHTML = '';
+    this.container.classList.remove('nova-properties');
+    if (this._ownsThemeController) this.themeController.destroy();
+  }
+
+  setTheme(theme) { return this.themeController.setTheme(theme); }
+  setThemeMode(mode) { return this.themeController.setMode(mode); }
+  getThemeState() { return this.themeController.getState(); }
+
+  render(selection, element) {
+    this._customCleanups.forEach((cleanup) => cleanup?.());
+    this._customCleanups = [];
+    const { groups, context } = this.registry.getGroups(selection, element);
+    const header = this._header(context);
+    const groupHtml = groups.map((group) => this._group(group, context)).join('');
+    const emptyContent = context.kind === 'multi' ? this._multiSummary(context) : `<div class="properties-empty">${escapeHtml(this.emptyText)}</div>`;
+    this.container.innerHTML = `${header}<div class="properties-body">${groupHtml || emptyContent}</div>`;
+    hydrateIcons(this.container, this.iconRegistry);
+    this._bind(groups, context);
+    this._renderCustomEntries(groups, context);
+    return { groups, context };
+  }
+
+  _multiSummary(context) {
+    const labels = { task: '任务', event: '事件', gateway: '网关', container: '子流程', boundary: '边界事件' };
+    const counts = new Map();
+    for (const element of context.element || []) {
+      const definition = element?.type ? NODE_DEFINITIONS[element.type] : null;
+      if (!definition) continue;
+      const label = labels[definition.kind] || '其他';
+      counts.set(label, (counts.get(label) || 0) + 1);
+    }
+    const chips = [...counts].map(([label, count]) => `<span>${escapeHtml(label)} <strong>${count}</strong></span>`).join('');
+    return `<section class="properties-multi-summary">
+      <div class="properties-multi-icon"><span class="nova-icon" data-icon="ui.layoutSelection"></span></div>
+      <strong>批量布局选区</strong>
+      <p>在画布上使用悬浮工具栏进行对齐、分布和局部美化。</p>
+      <div class="properties-multi-counts">${chips}</div>
+      ${this.canvas ? '<button type="button" data-fit-selection><span class="nova-icon nova-icon-sm" data-icon="ui.fitSelection"></span><span>适应选区</span></button>' : ''}
+    </section>`;
+  }
+
+  _header(context) {
+    const profile = context.profile || 'business';
+    const profileSwitch = `<div class="properties-profile-switch" aria-label="属性视图"><button type="button" data-properties-profile="business" class="${profile === 'business' ? 'is-active' : ''}">业务</button><button type="button" data-properties-profile="developer" class="${profile === 'developer' ? 'is-active' : ''}">开发者</button></div>`;
+    const renderHeader = (title, className = '') => `<div class="properties-head ${className}"><div class="properties-title-row"><div class="properties-title">${escapeHtml(title)}</div>${profileSwitch}</div></div>`;
+    if (context.kind === 'none') return renderHeader('未选择元素');
+    if (context.kind === 'multi') return renderHeader(`已选择 ${context.element.length} 个元素`);
+    if (context.kind === 'process') return renderHeader('流程与画布', 'properties-head-process');
+    if (context.kind === 'edge') {
+      return renderHeader(context.element.name || (context.element.type === 'association' ? '关联' : '流程分支'));
+    }
+    return renderHeader(context.element.name || context.definition?.label || '未命名元素');
+  }
+
+  _group(group, context) {
+    const key = `${context.kind}:${context.element?.id || context.model.id}:${group.id}`;
+    const collapsed = this.collapseState.has(key) ? this.collapseState.get(key) : !!group.collapsed;
+    const count = this.registry.configuredCount(group, context);
+    const description = group.description ? `<div class="properties-group-description">${escapeHtml(group.description)}</div>` : '';
+    const entries = group.entries.map((entry) => this._entry(entry, context)).join('');
+    return `<section class="properties-group ${collapsed ? 'is-collapsed' : ''}" data-group-id="${escapeHtml(group.id)}" data-group-key="${escapeHtml(key)}">
+      <button type="button" class="properties-group-toggle" data-group-toggle="${escapeHtml(group.id)}" aria-expanded="${collapsed ? 'false' : 'true'}"><span class="nova-icon nova-icon-sm properties-chevron" data-icon="ui.chevron"></span><strong>${escapeHtml(group.label)}</strong>${count ? `<span class="properties-count">${count}</span>` : ''}</button>
+      <div class="properties-group-content">${description}${entries}</div>
+    </section>`;
+  }
+
+  _entry(entry, context) {
+    const value = this.registry.getValue(entry, context);
+    const error = this.registry.validateEntry(entry, context);
+    const custom = this.registry.components.get(entry.component || entry.type);
+    if (custom) return fieldShell(entry, `<div class="property-custom-host" data-custom-entry="${escapeHtml(entry.id)}"></div>`, error);
+    if (entry.type === 'table') return renderTable(entry, value);
+    if (entry.type === 'branchList') return renderBranchList(entry, value, context);
+    if (entry.type === 'flow-list') return renderFlowList(entry, value, context);
+    if (entry.type === 'node-list') return renderNodeList(entry, value, context);
+    if (['user-select', 'form-select', 'process-select', 'resource-select', 'node-select'].includes(entry.type)) return renderSmartSelect(entry, value, context, this.id);
+    const basic = renderBasicEntry(entry, value, context);
+    return error ? basic.replace(/<\/div>$/, `<div class="property-error">${escapeHtml(error)}</div></div>`) : basic;
+  }
+
+  _bind(groups, context) {
+    const entryMap = new Map(groups.flatMap((group) => group.entries.map((entry) => [entry.id, entry])));
+    this.container.querySelectorAll('[data-properties-profile]').forEach((button) => button.addEventListener('click', () => this.studio?.setPropertiesProfile(button.dataset.propertiesProfile)));
+    this.container.querySelector('[data-fit-selection]')?.addEventListener('click', () => this.canvas?.fitSelection());
+    this.container.querySelectorAll('[data-group-toggle]').forEach((button) => button.addEventListener('click', () => {
+      const section = button.closest('.properties-group');
+      section.classList.toggle('is-collapsed');
+      const collapsed = section.classList.contains('is-collapsed');
+      button.setAttribute('aria-expanded', collapsed ? 'false' : 'true');
+      this.collapseState.set(section.dataset.groupKey, collapsed);
+    }));
+
+    this.container.querySelectorAll('[data-property-input]').forEach((input) => {
+      const entry = entryMap.get(input.dataset.propertyInput);
+      const commit = () => {
+        let value = input.value;
+        if (entry.type === 'number' || entry.type === 'range') value = input.value === '' ? '' : Number(input.value);
+        this.registry.setValue(entry, value, context);
+      };
+      input.addEventListener('change', commit);
+      if (input.type === 'range') input.addEventListener('input', () => {
+        const label = this.container.querySelector(`[data-range-value="${CSS.escape(entry.id)}"]`);
+        if (label) label.textContent = `${input.value}${entry.unit || ''}`;
+      });
+    });
+
+    this.container.querySelectorAll('[data-property-switch]').forEach((button) => button.addEventListener('click', () => {
+      const entry = entryMap.get(button.dataset.propertySwitch);
+      const value = !button.classList.contains('is-on');
+      this.registry.setValue(entry, value, context);
+    }));
+
+    this.container.querySelectorAll('[data-property-action]').forEach((button) => button.addEventListener('click', () => {
+      const entry = entryMap.get(button.dataset.propertyAction);
+      entry?.action?.(context);
+    }));
+
+    this.container.querySelectorAll('[data-table-input]').forEach((input) => input.addEventListener('change', () => {
+      const entry = entryMap.get(input.dataset.tableEntry);
+      const rows = JSON.parse(JSON.stringify(this.registry.getValue(entry, context) || []));
+      const row = rows[Number(input.dataset.row)] || {};
+      row[input.dataset.key] = input.value;
+      rows[Number(input.dataset.row)] = row;
+      this.registry.setValue(entry, rows, context);
+    }));
+    this.container.querySelectorAll('[data-table-add]').forEach((button) => button.addEventListener('click', () => {
+      const entry = entryMap.get(button.dataset.tableAdd);
+      const rows = JSON.parse(JSON.stringify(this.registry.getValue(entry, context) || []));
+      rows.push(typeof entry.defaultRow === 'function' ? entry.defaultRow(context) : { ...(entry.defaultRow || {}) });
+      this.registry.setValue(entry, rows, context);
+    }));
+    this.container.querySelectorAll('[data-table-remove]').forEach((button) => button.addEventListener('click', () => {
+      const entry = entryMap.get(button.dataset.tableRemove);
+      const rows = JSON.parse(JSON.stringify(this.registry.getValue(entry, context) || []));
+      rows.splice(Number(button.dataset.row), 1);
+      this.registry.setValue(entry, rows, context);
+    }));
+
+    this._bindCustomSelects();
+
+    const branchEntry = groups.flatMap((group) => group.entries).find((entry) => entry.type === 'branchList');
+    if (branchEntry) {
+      const commitBranches = () => {
+        const rows = JSON.parse(JSON.stringify(this.registry.getValue(branchEntry, context) || []));
+        this.container.querySelectorAll('[data-branch-field]').forEach((input) => { rows[Number(input.dataset.row)][input.dataset.branchField] = input.value; });
+        if (!branchEntry.fields || branchEntry.fields.includes('default')) {
+          const checked = this.container.querySelector('[data-branch-default]:checked');
+          rows.forEach((row, index) => { row.isDefault = !!checked && Number(checked.dataset.branchDefault) === index; });
+        }
+        this.registry.setValue(branchEntry, rows, context);
+      };
+      this.container.querySelectorAll('[data-branch-field]').forEach((input) => input.addEventListener('change', commitBranches));
+      this.container.querySelectorAll('[data-branch-default]').forEach((input) => input.addEventListener('change', commitBranches));
+      this.container.querySelectorAll('[data-branch-select]').forEach((button) => button.addEventListener('click', () => {
+        const rows = this.registry.getValue(branchEntry, context) || [];
+        branchEntry.selectRow?.(context, rows[Number(button.dataset.branchSelect)]);
+      }));
+    }
+
+    this.container.querySelectorAll('[data-node-ref]').forEach((button) => button.addEventListener('click', () => context.studio.select({ kind: 'node', id: button.dataset.nodeRef })));
+    this.container.querySelectorAll('[data-flow-ref]').forEach((button) => button.addEventListener('click', () => context.studio.select({ kind: 'edge', id: button.dataset.flowRef })));
+  }
+
+  _bindCustomSelects() {
+    const ownerDocument = this.container.ownerDocument;
+    const wrappers = [...this.container.querySelectorAll('[data-property-select]')];
+    if (!wrappers.length) return;
+
+    const optionNodes = (wrapper) => [...wrapper.querySelectorAll('[data-property-select-option]')];
+    const close = (wrapper, restoreFocus = false) => {
+      const trigger = wrapper.querySelector('[data-property-select-trigger]');
+      const popover = wrapper.querySelector('.property-select-popover');
+      wrapper.classList.remove('is-open', 'is-above');
+      trigger?.setAttribute('aria-expanded', 'false');
+      if (popover) popover.hidden = true;
+      optionNodes(wrapper).forEach((option) => option.classList.remove('is-active'));
+      if (restoreFocus) trigger?.focus({ preventScroll: true });
+    };
+    const closeOthers = (current) => wrappers.forEach((wrapper) => {
+      if (wrapper !== current) close(wrapper);
+    });
+    const activate = (wrapper, index, focus = true) => {
+      const options = optionNodes(wrapper);
+      if (!options.length) return;
+      const nextIndex = Math.max(0, Math.min(index, options.length - 1));
+      options.forEach((option, optionIndex) => option.classList.toggle('is-active', optionIndex === nextIndex));
+      if (focus) options[nextIndex].focus({ preventScroll: true });
+      options[nextIndex].scrollIntoView({ block: 'nearest' });
+    };
+    const open = (wrapper, direction = 1) => {
+      const trigger = wrapper.querySelector('[data-property-select-trigger]');
+      if (trigger?.disabled) return;
+      closeOthers(wrapper);
+      const popover = wrapper.querySelector('.property-select-popover');
+      wrapper.classList.add('is-open');
+      trigger?.setAttribute('aria-expanded', 'true');
+      if (popover) popover.hidden = false;
+      const rect = popover?.getBoundingClientRect();
+      if (rect && rect.bottom > (ownerDocument.defaultView?.innerHeight ?? Infinity) - 8 && wrapper.getBoundingClientRect().top > rect.height + 8) wrapper.classList.add('is-above');
+      const options = optionNodes(wrapper);
+      const selectedIndex = options.findIndex((option) => option.classList.contains('is-selected'));
+      const startIndex = selectedIndex < 0 ? 0 : Math.max(0, Math.min(selectedIndex + (direction < 0 ? -1 : 0), options.length - 1));
+      activate(wrapper, startIndex);
+    };
+    const choose = (wrapper, option) => {
+      const nativeSelect = wrapper.querySelector('[data-property-select-native]');
+      if (!nativeSelect || !option) return;
+      nativeSelect.value = option.dataset.value;
+      nativeSelect.dispatchEvent(new ownerDocument.defaultView.Event('change', { bubbles: true }));
+    };
+    const move = (wrapper, delta) => {
+      const options = optionNodes(wrapper);
+      const current = options.findIndex((option) => option.classList.contains('is-active'));
+      activate(wrapper, current < 0 ? 0 : (current + delta + options.length) % options.length);
+    };
+
+    wrappers.forEach((wrapper) => {
+      const trigger = wrapper.querySelector('[data-property-select-trigger]');
+      const options = optionNodes(wrapper);
+      trigger?.addEventListener('click', () => wrapper.classList.contains('is-open') ? close(wrapper) : open(wrapper));
+      trigger?.addEventListener('keydown', (event) => {
+        if (!['ArrowDown', 'ArrowUp', 'Home', 'End', 'Enter', ' '].includes(event.key)) return;
+        event.preventDefault();
+        if (!wrapper.classList.contains('is-open')) open(wrapper, event.key === 'ArrowUp' ? -1 : 1);
+        else if (event.key === 'ArrowDown') move(wrapper, 1);
+        else if (event.key === 'ArrowUp') move(wrapper, -1);
+        else if (event.key === 'Home') activate(wrapper, 0);
+        else if (event.key === 'End') activate(wrapper, options.length - 1);
+      });
+      options.forEach((option) => {
+        option.addEventListener('pointermove', () => activate(wrapper, Number(option.dataset.optionIndex), false));
+        option.addEventListener('click', () => choose(wrapper, option));
+        option.addEventListener('keydown', (event) => {
+          if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            event.preventDefault();
+            move(wrapper, event.key === 'ArrowDown' ? 1 : -1);
+          } else if (event.key === 'Home' || event.key === 'End') {
+            event.preventDefault();
+            activate(wrapper, event.key === 'Home' ? 0 : options.length - 1);
+          } else if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            choose(wrapper, option);
+          } else if (event.key === 'Escape') {
+            event.preventDefault();
+            close(wrapper, true);
+          } else if (event.key === 'Tab') close(wrapper);
+        });
+      });
+    });
+
+    const onPointerDown = (event) => wrappers.forEach((wrapper) => {
+      if (!wrapper.contains(event.target)) close(wrapper);
+    });
+    const onKeyDown = (event) => {
+      if (event.key !== 'Escape') return;
+      const openWrapper = wrappers.find((wrapper) => wrapper.classList.contains('is-open'));
+      if (openWrapper) close(openWrapper, true);
+    };
+    ownerDocument.addEventListener('pointerdown', onPointerDown);
+    ownerDocument.addEventListener('keydown', onKeyDown);
+    this._customCleanups.push(() => {
+      ownerDocument.removeEventListener('pointerdown', onPointerDown);
+      ownerDocument.removeEventListener('keydown', onKeyDown);
+    });
+  }
+
+  _renderCustomEntries(groups, context) {
+    for (const entry of groups.flatMap((group) => group.entries)) {
+      const renderer = this.registry.components.get(entry.component || entry.type);
+      if (!renderer) continue;
+      const host = this.container.querySelector(`[data-custom-entry="${CSS.escape(entry.id)}"]`);
+      if (!host) continue;
+      const cleanup = renderer({
+        container: host,
+        entry,
+        context,
+        value: this.registry.getValue(entry, context),
+        commit: (value) => this.registry.setValue(entry, value, context),
+      });
+      if (typeof cleanup === 'function') this._customCleanups.push(cleanup);
+    }
+  }
+}

package/dist/modules/renderer-svg/index.d.ts

@@ -0,0 +1,118 @@
+import type { AlignmentGuide, BpmnEdge, BpmnNode, ElementSelection, Point, ProcessModel, SelectionRect } from '../core/index.js'
+import type { IconRegistry, NodeVisualResolution } from '../icons/index.js'
+import type { NodeRuntimePresentation, ProcessInstanceSnapshot, RuntimePresentation } from '../runtime/index.js'
+import type { NovaThemeInput, NovaThemeMode, NovaThemeState, RuntimeAppearanceResolver, ThemeController } from '../theme/index.js'
+import type { SvgExportArtifact, SvgExportOptions, SvgExportPreviewController, SvgNodeRenderer } from '../export-svg/index.js'
+
+export interface SceneBounds {
+  left: number
+  top: number
+  right: number
+  bottom: number
+  width: number
+  height: number
+}
+export type ViewportBounds = Pick<SceneBounds, 'left' | 'top' | 'right' | 'bottom'>
+export function computeSceneBounds(model: ProcessModel, viewportBounds?: ViewportBounds | null, margin?: number): SceneBounds
+export interface EdgeLabelMetrics {
+  width: number
+  height: number
+  paddingX: number
+  paddingY: number
+  maxWidth: number
+  lineHeight: number
+  radius: number
+  lines: string[]
+}
+export interface EdgeLabelBounds extends SelectionRect {
+  left: number
+  top: number
+  right: number
+  bottom: number
+}
+export interface EdgeLabelPlacement {
+  x: number
+  y: number
+  bounds: EdgeLabelBounds
+  strategy: 'inline' | 'offset' | 'fallback'
+  segmentIndex: number
+}
+export function edgeLabelMetrics(value: string, options?: Partial<Pick<EdgeLabelMetrics, 'paddingX' | 'paddingY' | 'maxWidth' | 'lineHeight' | 'radius'>>): EdgeLabelMetrics
+export function edgeLabelPlacement(points: Point[], metrics: EdgeLabelMetrics, options?: {
+  startClearance?: number
+  endClearance?: number
+  innerClearance?: number
+  obstaclePadding?: number
+  labelGap?: number
+  offsetStep?: number
+  maxOffset?: number
+  obstacles?: Array<SelectionRect | ViewportBounds>
+}): EdgeLabelPlacement
+
+export interface DiagramNodeRendererContext {
+  container: HTMLElement
+  node: BpmnNode
+  definition: Record<string, unknown>
+  runtimeState: NodeRuntimePresentation
+  runtimePresentation: NodeRuntimePresentation
+  visual: NodeVisualResolution
+  semanticIconId: string | null
+  mode: 'design' | 'viewer' | 'instance'
+  model: ProcessModel
+  themeState: NovaThemeState
+  runtimeAppearance: RuntimeAppearanceResolver | null
+  select(): void
+  openRuntimeDetails(anchor?: Element): void
+  renderSemanticIcon(target?: Element, options?: { className?: string; title?: string }): SVGSVGElement | null
+}
+export type DiagramNodeRenderer = (context: DiagramNodeRendererContext) => void | (() => void)
+export interface DiagramRendererOptions {
+  model?: ProcessModel
+  mode?: 'design' | 'viewer' | 'instance'
+  runtime?: ProcessInstanceSnapshot | null
+  iconRegistry?: IconRegistry
+  nodeRenderers?: Record<string, DiagramNodeRenderer>
+  nodeRenderer?: DiagramNodeRenderer
+  runtimePresenter?: (context: { model: ProcessModel; runtime: ProcessInstanceSnapshot | null; appearance: RuntimeAppearanceResolver | null }) => RuntimePresentation
+  runtimeAppearance?: RuntimeAppearanceResolver | null
+  svgExport?: SvgExportOptions & { label?: string; nodeRenderers?: Record<string, SvgNodeRenderer> }
+  themeController?: ThemeController
+  theme?: NovaThemeInput
+  onThemeChange?: (state: NovaThemeState) => void
+  onNodeClick?: (node: BpmnNode, event: Event) => void
+  onNodePointerDown?: (node: BpmnNode, event: PointerEvent) => void
+  onEdgeClick?: (edge: BpmnEdge, event: Event) => void
+  onCanvasClick?: (event: Event) => void
+  onViewportChange?: (state: { zoom: number; pan: Point }) => void
+  canCreateNodeType?: (nodeType: string) => boolean
+  [key: string]: unknown
+}
+export class DiagramRenderer {
+  constructor(container: HTMLElement, options?: DiagramRendererOptions)
+  model: ProcessModel
+  screenToWorld(clientX: number, clientY: number): Point
+  openQuickMenu(nodeId: string): void
+  editEdgeName(edgeId: string): void
+  closeTransientOverlays(): void
+  setAlignmentGuides(guides?: AlignmentGuide[]): void
+  setModel(model: ProcessModel): void
+  setMode(mode: 'design' | 'viewer' | 'instance'): void
+  setRuntime(runtime: ProcessInstanceSnapshot | null): void
+  setSelection(selection: ElementSelection | null): void
+  setConnectingSource(nodeId: string | null): void
+  setSpacePressed(active: boolean): void
+  setInteractionMode(mode: string): void
+  getViewportState(): { zoom: number; pan: Point }
+  setViewportState(state: { zoom?: number; pan?: Point }): void
+  setTheme(theme: NovaThemeInput): NovaThemeState
+  setThemeMode(mode: NovaThemeMode): NovaThemeState
+  getThemeState(): NovaThemeState
+  exportSvg(options?: SvgExportOptions): Promise<SvgExportArtifact>
+  openSvgExportPreview(options?: SvgExportOptions & { previewTitle?: string; onDownload?: (artifact: SvgExportArtifact) => void }): SvgExportPreviewController
+  zoomBy(delta: number): void
+  fitView(padding?: number, options?: Record<string, unknown>): void
+  fitReadable(padding?: number): void
+  actualSize(padding?: number): void
+  render(): void
+  destroy(): void
+}