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

package/dist/modules/properties-core/index.d.ts

@@ -0,0 +1,124 @@
+import type { BpmnEdge, BpmnNode, ElementSelection, EngineId, ProcessModel } from '../core/index.js'
+
+export type PropertyEntryType =
+  | 'text' | 'textarea' | 'code' | 'expression' | 'number' | 'select' | 'switch' | 'range' | 'readonly' | 'action' | 'tags'
+  | 'table' | 'branchList' | 'flow-list' | 'node-list' | 'user-select' | 'form-select' | 'process-select' | 'resource-select' | 'node-select'
+  | (string & {})
+export interface PropertiesStudio {
+  model: ProcessModel
+  selection: ElementSelection | null
+  propertiesProfile?: 'business' | 'developer'
+  getSelectedElement(): ProcessModel | BpmnNode | BpmnEdge | Array<BpmnNode | BpmnEdge> | null
+  updateProcess?(patch: Partial<ProcessModel>): unknown
+  updateNode?(id: string, patch: Partial<BpmnNode>): unknown
+  updateEdge?(id: string, patch: Partial<BpmnEdge>): unknown
+  commands?: Record<string, Function>
+}
+export interface PropertiesContext {
+  registry: PropertiesRegistry
+  studio: PropertiesStudio
+  designer: PropertiesStudio
+  model: ProcessModel
+  selection: ElementSelection | null
+  element: ProcessModel | BpmnNode | BpmnEdge
+  kind: 'none' | 'process' | 'node' | 'edge' | 'multi'
+  profile: 'business' | 'developer'
+  definition?: { bpmnType: string; label: string; kind: string; [key: string]: unknown } | null
+  engine: EngineId
+  is(value: string | ((context: PropertiesContext) => boolean)): boolean
+  get(path: string, fallback?: unknown): unknown
+  set(path: string, value: unknown): void
+  extensions: { get(name: string, fallback?: unknown): unknown; set(name: string, value: unknown): void }
+  data(name: string): unknown
+}
+export interface PropertyOption { value: unknown; label: string; disabled?: boolean }
+export interface PropertyEntry {
+  id: string
+  type?: PropertyEntryType
+  label?: string
+  iconId?: string
+  fields?: Array<'name' | 'condition' | 'default'>
+  relation?: 'source' | 'target'
+  emptyText?: string
+  path?: string
+  component?: string
+  placeholder?: string
+  note?: string
+  required?: boolean
+  readonly?: boolean
+  level?: 'business' | 'developer'
+  visible?: (context: PropertiesContext) => boolean
+  appliesTo?: AppliesTo
+  getValue?: (context: PropertiesContext) => unknown
+  setValue?: (context: PropertiesContext, value: unknown) => void
+  validate?: (value: unknown, context: PropertiesContext) => string | null
+  parse?: (value: unknown, context: PropertiesContext) => unknown
+  options?: Array<PropertyOption | [unknown, string] | string> | ((context: PropertiesContext) => Array<PropertyOption | [unknown, string] | string>)
+  [key: string]: unknown
+}
+export interface PropertyPosition { prepend?: boolean; append?: boolean; before?: string; after?: string; replace?: string; remove?: string }
+export interface PropertyGroup {
+  id: string
+  label: string
+  entries: PropertyEntry[]
+  description?: string
+  collapsed?: boolean
+  collapsible?: boolean
+  level?: 'business' | 'developer'
+  position?: PropertyPosition
+  appliesTo?: AppliesTo
+  [key: string]: unknown
+}
+export interface AppliesTo {
+  kind?: 'none' | 'process' | 'node' | 'edge' | 'multi' | Array<'none' | 'process' | 'node' | 'edge' | 'multi'>
+  nodeType?: string | string[]
+  bpmnType?: string | string[]
+  engine?: EngineId
+  engines?: EngineId[]
+  predicate?: (context: PropertiesContext) => boolean
+  [key: string]: unknown
+}
+export interface PropertiesProvider {
+  id: string
+  priority?: number
+  appliesTo?: AppliesTo | ((context: PropertiesContext) => boolean)
+  getGroups?: (context: PropertiesContext) => PropertyGroup[] | ((groups: PropertyGroup[], context: PropertiesContext) => PropertyGroup[])
+  groups?: PropertyGroup[] | ((context: PropertiesContext) => PropertyGroup[])
+}
+export type PropertyComponentRenderer = (context: {
+  container: HTMLElement
+  entry: PropertyEntry
+  context: PropertiesContext
+  value: unknown
+  commit(value: unknown): void
+}) => void | (() => void)
+export interface PropertiesRegistryOptions {
+  studio?: PropertiesStudio | null
+  designer?: PropertiesStudio | null
+  components?: Record<string, PropertyComponentRenderer>
+  dataProviders?: Record<string, unknown>
+}
+
+export function getPath(object: unknown, path: string, fallback?: unknown): unknown
+export function setPath<T extends object>(object: T, path: string, value: unknown): T
+export function normalizeOptions(options?: Array<PropertyOption | [unknown, string] | string>): PropertyOption[]
+export function matchesAppliesTo(appliesTo: AppliesTo | ((context: PropertiesContext) => boolean) | undefined, context: PropertiesContext): boolean
+export function propertyEntry(config: PropertyEntry): PropertyEntry
+export function propertyGroup(config: PropertyGroup): PropertyGroup
+export class PropertiesRegistry {
+  constructor(options?: PropertiesRegistryOptions)
+  studio: PropertiesStudio | null
+  designer: PropertiesStudio | null
+  setStudio(studio: PropertiesStudio): this
+  setDesigner(designer: PropertiesStudio): this
+  registerProvider(priority: number, provider: PropertiesProvider): () => void
+  registerProvider(provider: PropertiesProvider): () => void
+  registerComponent(name: string, renderer: PropertyComponentRenderer): () => void
+  registerDataProvider(name: string, provider: unknown): () => void
+  getDataProvider(name: string): unknown
+  createContext(selection?: ElementSelection | null, element?: BpmnNode | BpmnEdge | null): PropertiesContext
+  getGroups(selection?: ElementSelection | null, element?: BpmnNode | BpmnEdge | null): { groups: PropertyGroup[]; context: PropertiesContext }
+  getValue(entry: PropertyEntry, context: PropertiesContext): unknown
+  setValue(entry: PropertyEntry, value: unknown, context: PropertiesContext): unknown
+}
+export function createPropertiesRegistry(options?: PropertiesRegistryOptions): PropertiesRegistry

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

@@ -0,0 +1,312 @@
+import { NODE_DEFINITIONS } from '../core/index.js';
+
+function isBlank(value) {
+  if (value === undefined || value === null || value === '') return true;
+  if (Array.isArray(value)) return value.length === 0;
+  if (typeof value === 'object') return Object.keys(value).length === 0;
+  return false;
+}
+
+export function getPath(object, path, fallback) {
+  if (!path) return object ?? fallback;
+  const value = String(path).split('.').reduce((current, part) => current == null ? undefined : current[part], object);
+  return value === undefined ? fallback : value;
+}
+
+export function setPath(object, path, value) {
+  const parts = String(path).split('.');
+  const root = { ...(object || {}) };
+  let target = root;
+  let source = object || {};
+  parts.forEach((part, index) => {
+    if (index === parts.length - 1) {
+      target[part] = value;
+      return;
+    }
+    const sourceValue = source?.[part];
+    target[part] = Array.isArray(sourceValue) ? [...sourceValue] : { ...(sourceValue || {}) };
+    target = target[part];
+    source = sourceValue || {};
+  });
+  return root;
+}
+
+export function normalizeOptions(options = []) {
+  return (options || []).map((option) => {
+    if (Array.isArray(option)) return { value: option[0], label: option[1] };
+    if (typeof option === 'string') return { value: option, label: option };
+    return option;
+  });
+}
+
+function matchList(value, list) {
+  if (!list || !list.length) return true;
+  return list.includes(value);
+}
+
+export function matchesAppliesTo(appliesTo, context) {
+  if (!appliesTo) return true;
+  if (typeof appliesTo === 'function') return !!appliesTo(context);
+  const { selection, element, definition, model } = context;
+  if (appliesTo.kind && appliesTo.kind !== context.kind) return false;
+  if (appliesTo.kinds && !matchList(context.kind, appliesTo.kinds)) return false;
+  if (appliesTo.engine && appliesTo.engine !== model.engine) return false;
+  if (appliesTo.engines && !matchList(model.engine, appliesTo.engines)) return false;
+  if (appliesTo.nodeType && element?.type !== appliesTo.nodeType) return false;
+  if (appliesTo.nodeTypes && !matchList(element?.type, appliesTo.nodeTypes)) return false;
+  if (appliesTo.bpmnType && element?.bpmnType !== appliesTo.bpmnType) return false;
+  if (appliesTo.bpmnTypes && !matchList(element?.bpmnType, appliesTo.bpmnTypes)) return false;
+  if (appliesTo.elementKind && definition?.kind !== appliesTo.elementKind) return false;
+  if (appliesTo.elementKinds && !matchList(definition?.kind, appliesTo.elementKinds)) return false;
+  if (appliesTo.eventDefinition && definition?.eventDefinition !== appliesTo.eventDefinition) return false;
+  if (appliesTo.eventDefinitions && !matchList(definition?.eventDefinition, appliesTo.eventDefinitions)) return false;
+  if (appliesTo.selectionKind && selection?.kind !== appliesTo.selectionKind) return false;
+  return true;
+}
+
+function insertGroup(groups, group) {
+  if (!group || !group.id) return groups;
+  const position = group.position || {};
+  if (position.remove) return groups.filter((item) => item.id !== position.remove && item.id !== group.id);
+
+  let next = [...groups];
+  let index = next.length;
+  const existingIndex = next.findIndex((item) => item.id === group.id);
+  if (existingIndex >= 0) {
+    index = existingIndex;
+    next.splice(existingIndex, 1);
+  }
+
+  if (position.replace) {
+    const found = next.findIndex((item) => item.id === position.replace);
+    if (found >= 0) {
+      index = found;
+      next.splice(found, 1);
+    }
+  } else if (position.prepend) index = 0;
+  else if (position.before) {
+    const found = next.findIndex((item) => item.id === position.before);
+    if (found >= 0) index = found;
+  } else if (position.after) {
+    const found = next.findIndex((item) => item.id === position.after);
+    if (found >= 0) index = found + 1;
+  } else if (position.append) index = next.length;
+
+  index = Math.max(0, Math.min(index, next.length));
+  next.splice(index, 0, group);
+  return next;
+}
+
+export function propertyEntry(config) {
+  return {
+    type: 'text',
+    ...config,
+  };
+}
+
+export function propertyGroup(config) {
+  return {
+    entries: [],
+    collapsible: true,
+    ...config,
+  };
+}
+
+const DEVELOPER_GROUPS = new Set([
+  'namespaces', 'extension-elements', 'extension-attributes', 'flowable-process-execution', 'activiti-process-execution',
+  'engine-execution', 'execution-listeners', 'task-listeners', 'field-injection', 'edge-listeners',
+]);
+
+function profileAllows(item, profile) {
+  const level = item.level || (DEVELOPER_GROUPS.has(item.id) ? 'developer' : 'business');
+  if (profile === 'developer') return true;
+  return level !== 'developer';
+}
+
+export class PropertiesRegistry {
+  constructor({ studio = null, designer = null, components = {}, dataProviders = {} } = {}) {
+    this.studio = studio || designer;
+    this.designer = this.studio;
+    this._providers = [];
+    this.components = new Map(Object.entries(components));
+    this.dataProviders = new Map(Object.entries(dataProviders));
+  }
+
+  setDesigner(designer) {
+    this.studio = designer;
+    this.designer = designer;
+    return this;
+  }
+
+  setStudio(studio) {
+    this.studio = studio;
+    this.designer = studio;
+    return this;
+  }
+
+  registerProvider(priority = 500, provider) {
+    if (typeof priority === 'object' && provider === undefined) {
+      provider = priority;
+      priority = provider.priority ?? 500;
+    }
+    const record = { priority, provider, order: this._providers.length };
+    this._providers.push(record);
+    this._providers.sort((a, b) => b.priority - a.priority || a.order - b.order);
+    return () => { this._providers = this._providers.filter((item) => item !== record); };
+  }
+
+  registerComponent(name, renderer) {
+    this.components.set(name, renderer);
+    return () => this.components.delete(name);
+  }
+
+  registerDataProvider(name, provider) {
+    this.dataProviders.set(name, provider);
+    return () => this.dataProviders.delete(name);
+  }
+
+  getDataProvider(name) {
+    return this.dataProviders.get(name) || null;
+  }
+
+  createContext(selection, element) {
+    const studio = this.studio;
+    if (selection === undefined) selection = studio?.selection ?? null;
+    if (element === undefined) element = selection ? studio?.getSelectedElement?.() : null;
+    const designer = studio;
+    const model = studio?.model || null;
+    let kind = selection?.kind || 'none';
+    if (kind !== 'process' && !element) kind = 'none';
+    const definition = kind === 'node' ? (NODE_DEFINITIONS[element.type] || NODE_DEFINITIONS.generic) : null;
+    const context = {
+      registry: this,
+      studio,
+      designer,
+      model,
+      selection,
+      element: kind === 'process' ? model : kind === 'none' ? null : element,
+      kind,
+      definition,
+      engine: model?.engine,
+      profile: studio?.propertiesProfile || 'business',
+      is(value) {
+        if (typeof value === 'function') return !!value(context);
+        if (value === kind) return true;
+        if (kind === 'node') return value === element?.type || value === element?.bpmnType || value === definition?.kind;
+        return false;
+      },
+      get(path, fallback) {
+        const root = kind === 'process' ? model : element;
+        return getPath(root, path, fallback);
+      },
+      set(path, value) {
+        if (!studio || !model || kind === 'none') return;
+        const parts = String(path).split('.');
+        if (kind === 'process') {
+          if (path === 'id') { studio.commands?.changeElementId('process', model.id, value); return; }
+          if (parts[0] === 'properties') {
+            const next = setPath(model.properties || {}, parts.slice(1).join('.'), value);
+            studio.commands?.updateProcess({ properties: next });
+          } else if (parts[0] === 'settings') {
+            const next = setPath(model.settings || {}, parts.slice(1).join('.'), value);
+            studio.commands?.updateProcess({ settings: next });
+          } else if (parts[0] === 'resources') {
+            const next = setPath(model.resources || {}, parts.slice(1).join('.'), value);
+            studio.commands?.updateProcess({ resources: next });
+          } else {
+            studio.commands?.updateProcess(setPath({}, path, value));
+          }
+          return;
+        }
+        if (kind === 'node') {
+          if (path === 'id') studio.commands?.changeElementId('node', element.id, value);
+          else if (parts[0] === 'properties') {
+            const next = setPath(element.properties || {}, parts.slice(1).join('.'), value);
+            studio.commands?.updateNode(element.id, { properties: next });
+          } else studio.commands?.updateNode(element.id, setPath({}, path, value));
+          return;
+        }
+        if (kind === 'edge') {
+          if (path === 'id') studio.commands?.changeElementId('edge', element.id, value);
+          else if (parts[0] === 'properties') {
+            const next = setPath(element.properties || {}, parts.slice(1).join('.'), value);
+            studio.commands?.updateEdge(element.id, { properties: next });
+          } else studio.commands?.updateEdge(element.id, setPath({}, path, value));
+        }
+      },
+      extensions: {
+        get(name, fallback = '') {
+          return getPath(kind === 'process' ? model?.properties?.extensionAttributes : element?.properties?.extensionAttributes, name, fallback);
+        },
+        set(name, value) {
+          const current = kind === 'process' ? (model?.properties?.extensionAttributes || {}) : (element?.properties?.extensionAttributes || {});
+          const next = { ...current, [name]: value };
+          context.set('properties.extensionAttributes', next);
+        },
+      },
+      data(name) { return context.registry.getDataProvider(name); },
+    };
+    return context;
+  }
+
+  getGroups(selection, element) {
+    const context = this.createContext(selection, element);
+    if (context.kind === 'none' || context.kind === 'multi') return { groups: [], context };
+    let groups = [];
+    for (const { provider } of this._providers) {
+      if (!provider || !matchesAppliesTo(provider.appliesTo, context)) continue;
+      let output;
+      if (typeof provider.getGroups === 'function') output = provider.getGroups(context);
+      else if (typeof provider.groups === 'function') output = provider.groups(context);
+      else output = provider.groups;
+      if (typeof output === 'function') {
+        const result = output(groups, context);
+        if (Array.isArray(result)) groups = result;
+        continue;
+      }
+      const providerGroups = Array.isArray(output) ? output : output ? [output] : [];
+      for (const group of providerGroups) {
+        if (!group || !matchesAppliesTo(group.appliesTo, context) || !profileAllows(group, context.profile)) continue;
+        const resolved = {
+          ...group,
+          entries: (group.entries || []).filter((entry) => entry && profileAllows(entry, context.profile) && matchesAppliesTo(entry.appliesTo, context) && (typeof entry.visible !== 'function' || entry.visible(context))),
+        };
+        if (!resolved.entries.length && !resolved.alwaysShow) continue;
+        groups = insertGroup(groups, resolved);
+      }
+    }
+    return { groups, context };
+  }
+
+  getValue(entry, context) {
+    if (typeof entry.getValue === 'function') return entry.getValue(context);
+    if (entry.path) return context.get(entry.path, entry.defaultValue);
+    return entry.value ?? entry.defaultValue;
+  }
+
+  setValue(entry, value, context) {
+    if (typeof entry.parse === 'function') value = entry.parse(value, context);
+    if (typeof entry.setValue === 'function') return entry.setValue(context, value);
+    if (entry.path) return context.set(entry.path, value);
+  }
+
+  validateEntry(entry, context) {
+    if (typeof entry.validate !== 'function') return null;
+    return entry.validate(this.getValue(entry, context), context);
+  }
+
+  configuredCount(group, context) {
+    return (group.entries || []).reduce((count, entry) => {
+      if (['readonly', 'action'].includes(entry.type)) return count;
+      const value = this.getValue(entry, context);
+      if (typeof entry.isConfigured === 'function') return count + (entry.isConfigured(value, context) ? 1 : 0);
+      if (Object.prototype.hasOwnProperty.call(entry, 'defaultValue') && value === entry.defaultValue) return count;
+      if (value === false || isBlank(value)) return count;
+      return count + 1;
+    }, 0);
+  }
+}
+
+export function createPropertiesRegistry(options) {
+  return new PropertiesRegistry(options);
+}

package/dist/modules/properties-flowable/index.d.ts

@@ -0,0 +1,3 @@
+import type { PropertiesProvider, PropertiesRegistry } from '../properties-core/index.js'
+export const flowablePropertiesProviders: PropertiesProvider[]
+export function registerFlowableProperties(registry: PropertiesRegistry): () => void

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

@@ -0,0 +1,114 @@
+import { propertyEntry, propertyGroup } from '../properties-core/index.js';
+
+const activityTypes = new Set(['task', 'userTask', 'manualTask', 'serviceTask', 'scriptTask', 'businessRuleTask', 'sendTask', 'receiveTask', 'callActivity', 'subProcess', 'eventSubProcess', 'transaction', 'adHocSubProcess']);
+const implementationTypes = [['class', 'Java Class'], ['delegateExpression', 'Delegate Expression'], ['expression', 'Expression']];
+const implementationColumns = [
+  { key: 'event', label: 'Event', type: 'select', options: [['start', 'start'], ['end', 'end'], ['take', 'take']] },
+  { key: 'implementationType', label: '类型', type: 'select', options: implementationTypes },
+  { key: 'implementation', label: '实现' },
+];
+const taskListenerColumns = [
+  { key: 'event', label: 'Event', type: 'select', options: [['create', 'create'], ['assignment', 'assignment'], ['complete', 'complete'], ['delete', 'delete'], ['all', 'all']] },
+  { key: 'implementationType', label: '类型', type: 'select', options: implementationTypes },
+  { key: 'implementation', label: '实现' },
+];
+
+const flowableProcessProvider = {
+  id: 'flowable-process', priority: 640, appliesTo: { kind: 'process', engine: 'flowable' },
+  getGroups() {
+    return [propertyGroup({
+      id: 'flowable-process-execution', label: 'Flowable 执行监听器', collapsed: true, position: { after: 'global-resources' },
+      entries: [propertyEntry({ id: 'process-listeners', type: 'table', label: 'Execution Listeners', path: 'properties.executionListeners', rowLabel: '监听器', defaultRow: () => ({ event: 'start', implementationType: 'class', implementation: '' }), columns: implementationColumns.filter((c) => c.key !== 'event' || true) })],
+    })];
+  },
+};
+
+const flowableUserTaskProvider = {
+  id: 'flowable-user-task', priority: 660, appliesTo: { kind: 'node', nodeType: 'userTask', engine: 'flowable' },
+  getGroups() {
+    return [
+      propertyGroup({
+        id: 'assignment', label: '人员分配 · Flowable', position: { after: 'basic' },
+        entries: [
+          propertyEntry({ id: 'assignee', type: 'user-select', label: '负责人 Assignee', path: 'properties.assignee', dataProvider: 'identity', allowExpression: true, placeholder: '${manager}' }),
+          propertyEntry({ id: 'owner', type: 'user-select', label: 'Owner', path: 'properties.owner', dataProvider: 'identity', allowExpression: true }),
+          propertyEntry({ id: 'candidate-users', type: 'tags', label: '候选用户', path: 'properties.candidateUsers', dataProvider: 'identity', placeholder: 'user1,user2' }),
+          propertyEntry({ id: 'candidate-groups', type: 'tags', label: '候选组', path: 'properties.candidateGroups', dataProvider: 'identity', placeholder: 'manager,finance' }),
+        ],
+      }),
+      propertyGroup({
+        id: 'task-config', label: '任务属性', position: { after: 'assignment' },
+        entries: [
+          propertyEntry({ id: 'form-key', type: 'form-select', label: 'Form Key', path: 'properties.formKey', dataProvider: 'forms', allowCustom: true }),
+          propertyEntry({ id: 'due-date', type: 'expression', label: 'Due Date', path: 'properties.dueDate', placeholder: '${now().plusDays(1)}' }),
+          propertyEntry({ id: 'priority', type: 'number', label: 'Priority', path: 'properties.priority', min: 0, max: 100 }),
+          propertyEntry({ id: 'category', label: 'Category', path: 'properties.category' }),
+          propertyEntry({ id: 'skip-expression', type: 'expression', label: 'Skip Expression', path: 'properties.skipExpression', placeholder: '${skipApproval}' }),
+        ],
+      }),
+      propertyGroup({
+        id: 'task-listeners', label: 'Task Listeners', collapsed: true, position: { after: 'multi-instance' },
+        entries: [propertyEntry({ id: 'task-listener-table', type: 'table', label: '任务监听器', path: 'properties.taskListeners', rowLabel: 'Task Listener', defaultRow: () => ({ event: 'create', implementationType: 'class', implementation: '' }), columns: taskListenerColumns })],
+      }),
+    ];
+  },
+};
+
+const flowableImplementationProvider = {
+  id: 'flowable-implementation', priority: 660,
+  appliesTo: (ctx) => ctx.kind === 'node' && ctx.model.engine === 'flowable' && ['serviceTask', 'sendTask', 'businessRuleTask'].includes(ctx.element.type),
+  getGroups(context) {
+    const label = context.element.type === 'businessRuleTask' ? '业务规则实现 · Flowable' : context.element.type === 'sendTask' ? '发送实现 · Flowable' : '服务实现 · Flowable';
+    return [
+      propertyGroup({ id: 'engine-implementation', label, position: { after: 'basic' }, entries: [
+        propertyEntry({ id: 'implementation-type', type: 'select', label: '实现方式', path: 'properties.implementationType', options: implementationTypes }),
+        propertyEntry({ id: 'implementation', type: 'expression', label: '实现值', path: 'properties.implementation', placeholder: 'com.example.MyDelegate / ${delegateBean}' }),
+        propertyEntry({ id: 'result-variable', label: 'Result Variable', path: 'properties.resultVariable', placeholder: 'result' }),
+      ] }),
+      propertyGroup({ id: 'field-injection', label: 'Field Injection', collapsed: true, position: { after: 'engine-implementation' }, entries: [
+        propertyEntry({ id: 'fields', type: 'table', label: '字段注入', path: 'properties.fields', rowLabel: 'Field', defaultRow: () => ({ name: '', type: 'string', value: '' }), columns: [{ key: 'name', label: 'Name' }, { key: 'type', label: '类型', type: 'select', options: [['string', 'String'], ['expression', 'Expression']] }, { key: 'value', label: 'Value' }] }),
+      ] }),
+    ];
+  },
+};
+
+const flowableActivityExecutionProvider = {
+  id: 'flowable-activity-execution', priority: 610,
+  appliesTo: (ctx) => ctx.kind === 'node' && ctx.model.engine === 'flowable' && activityTypes.has(ctx.element.type),
+  getGroups() {
+    return [
+      propertyGroup({ id: 'engine-execution', label: '执行配置 · Flowable', collapsed: true, position: { after: 'multi-instance' }, entries: [
+        propertyEntry({ id: 'async', type: 'switch', label: 'Async', path: 'properties.async' }),
+        propertyEntry({ id: 'exclusive', type: 'switch', label: 'Exclusive Job', path: 'properties.exclusive' }),
+        propertyEntry({ id: 'async-leave', type: 'switch', label: 'Async Leave', path: 'properties.asyncLeave' }),
+        propertyEntry({ id: 'failed-retry', type: 'expression', label: 'Failed Job Retry Cycle', path: 'properties.failedJobRetryTimeCycle', placeholder: 'R3/PT5M' }),
+      ] }),
+      propertyGroup({ id: 'execution-listeners', label: 'Execution Listeners', collapsed: true, position: { after: 'engine-execution' }, entries: [
+        propertyEntry({ id: 'execution-listener-table', type: 'table', label: '执行监听器', path: 'properties.executionListeners', rowLabel: 'Execution Listener', defaultRow: () => ({ event: 'start', implementationType: 'class', implementation: '' }), columns: implementationColumns.filter((column) => column.key !== 'event' || true).map((column) => column.key === 'event' ? { ...column, options: [['start', 'start'], ['end', 'end']] } : column) }),
+      ] }),
+    ];
+  },
+};
+
+const flowableCallActivityProvider = {
+  id: 'flowable-call-activity', priority: 650, appliesTo: { kind: 'node', nodeType: 'callActivity', engine: 'flowable' },
+  getGroups() { return [propertyGroup({ id: 'flowable-call', label: 'Flowable 调用选项', collapsed: true, position: { after: 'call-activity' }, entries: [
+    propertyEntry({ id: 'same-deployment', type: 'switch', label: 'Same Deployment', path: 'properties.sameDeployment' }),
+    propertyEntry({ id: 'process-instance-name', type: 'expression', label: 'Process Instance Name', path: 'properties.processInstanceName' }),
+  ] })]; },
+};
+
+const flowableEdgeProvider = {
+  id: 'flowable-edge-listeners', priority: 620,
+  appliesTo: (ctx) => ctx.kind === 'edge' && ctx.model.engine === 'flowable' && (ctx.element.type || 'sequenceFlow') === 'sequenceFlow',
+  getGroups() { return [propertyGroup({ id: 'edge-listeners', label: 'Take Listener · Flowable', collapsed: true, position: { after: 'condition' }, entries: [
+    propertyEntry({ id: 'edge-execution-listeners', type: 'table', label: 'Execution Listeners', path: 'properties.executionListeners', rowLabel: 'Take Listener', defaultRow: () => ({ event: 'take', implementationType: 'class', implementation: '' }), columns: implementationColumns.map((column) => column.key === 'event' ? { ...column, options: [['take', 'take']] } : column) }),
+  ] })]; },
+};
+
+export const flowablePropertiesProviders = [flowableProcessProvider, flowableUserTaskProvider, flowableImplementationProvider, flowableActivityExecutionProvider, flowableCallActivityProvider, flowableEdgeProvider];
+
+export function registerFlowableProperties(registry) {
+  const disposers = flowablePropertiesProviders.map((provider) => registry.registerProvider(provider.priority ?? 500, provider));
+  return () => disposers.forEach((dispose) => dispose());
+}

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

@@ -0,0 +1,25 @@
+import type { BpmnEdge, BpmnNode, ElementSelection } from '../core/index.js'
+import type { IconRegistry } from '../icons/index.js'
+import type { PropertiesContext, PropertiesRegistry, PropertiesStudio, PropertyGroup } from '../properties-core/index.js'
+import type { NovaThemeInput, NovaThemeMode, NovaThemeState, ThemeController } from '../theme/index.js'
+
+export interface PropertiesPanelOptions {
+  container: HTMLElement
+  registry: PropertiesRegistry
+  studio?: PropertiesStudio | null
+  designer?: PropertiesStudio | null
+  canvas?: unknown
+  iconRegistry?: IconRegistry
+  emptyText?: string
+  themeController?: ThemeController | null
+  theme?: NovaThemeInput | null
+  onThemeChange?: ((state: NovaThemeState) => void) | null
+}
+export class PropertiesPanel {
+  constructor(options: PropertiesPanelOptions)
+  render(selection?: ElementSelection | null, element?: BpmnNode | BpmnEdge | null): { groups: PropertyGroup[]; context: PropertiesContext }
+  setTheme(theme: NovaThemeInput): NovaThemeState
+  setThemeMode(mode: NovaThemeMode): NovaThemeState
+  getThemeState(): NovaThemeState
+  destroy(): void
+}