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

package/dist/modules/icons/index.d.ts

@@ -0,0 +1,24 @@
+import type { BpmnNode, NodeDefinition, NodeType, ProcessModel } from '../core/index.js'
+
+export interface IconPathDescriptor { d: string; [attribute: string]: string }
+export interface IconDescriptor {
+  id: string
+  viewBox: string
+  paths: IconPathDescriptor[]
+  fill?: string
+}
+export type NodeVisualSurface = 'palette' | 'canvas' | 'viewer' | 'timeline'
+export interface NodeVisualResolution { iconId: string | null; activityMarkerIds: string[] }
+
+export const DEFAULT_ICONS: readonly IconDescriptor[]
+export function resolveNodeVisual(input: NodeType | BpmnNode, options?: { surface?: NodeVisualSurface; model?: ProcessModel | null }): NodeVisualResolution
+export function iconIdForNode(type: NodeType, definition?: NodeDefinition): string | null
+export class IconRegistry {
+  constructor(icons?: IconDescriptor[])
+  register(icon: IconDescriptor): () => void
+  resolve(id: string, fallback?: string | null): IconDescriptor | null
+  has(id: string): boolean
+}
+export function createIconElement(descriptor: IconDescriptor | null, options?: { className?: string; title?: string }): SVGSVGElement | null
+export function hydrateIcons(root: ParentNode, registry: IconRegistry): void
+export function createDefaultIconRegistry(extraIcons?: IconDescriptor[]): IconRegistry

package/dist/modules/icons/index.js

@@ -0,0 +1,264 @@
+import { NODE_DEFINITIONS } from '../core/index.js';
+
+const icon = (id, d, options = {}) => ({
+  id,
+  viewBox: '0 0 24 24',
+  paths: (Array.isArray(d) ? d : [d]).map((path) => typeof path === 'string' ? { d: path } : path),
+  ...options,
+});
+
+const uiIcon = (id, d) => ({
+  id,
+  viewBox: '0 0 24 24',
+  paths: (Array.isArray(d) ? d : [d]).map((path) => ({
+    d: path,
+    fill: 'none',
+    stroke: 'currentColor',
+    'stroke-width': '1.8',
+    'stroke-linecap': 'round',
+    'stroke-linejoin': 'round',
+  })),
+});
+
+export const DEFAULT_ICONS = Object.freeze([
+  uiIcon('ui.chevron', 'm7 9.5 5 5 5-5'),
+  uiIcon('ui.check', 'm5.5 12.5 4 4 9-9'),
+  uiIcon('ui.undo', ['M9 7H5v4', 'M5.5 10.5c2.2-3.4 5.1-5.1 8.6-4.5 3.1.5 5.4 3 5.4 6.2 0 3.4-2.8 6.3-6.3 6.3H9.5']),
+  uiIcon('ui.redo', ['M15 7h4v4', 'M18.5 10.5c-2.2-3.4-5.1-5.1-8.6-4.5-3.1.5-5.4 3-5.4 6.2 0 3.4 2.8 6.3 6.3 6.3h3.7']),
+  uiIcon('ui.magic', ['m12 3 1.1 3.3L16.5 7.5l-3.4 1.2L12 12l-1.1-3.3-3.4-1.2 3.4-1.2z', 'm18.5 13 .7 2.1 2.1.7-2.1.7-.7 2.1-.7-2.1-2.1-.7 2.1-.7z', 'M5 14v5M2.5 16.5h5']),
+  uiIcon('ui.layoutHorizontal', ['M4 7h5v5H4zM15 12h5v5h-5z', 'M9 9.5h4a4 4 0 0 1 4 4v.5', 'm14 11 3 3 3-3']),
+  uiIcon('ui.layoutVertical', ['M7 4h5v5H7zM12 15h5v5h-5z', 'M9.5 9v2a4 4 0 0 0 4 4h.5', 'm11 12 3 3-3 3']),
+  uiIcon('ui.parallelDiverging', ['M2 12h6', 'm8 12 4-4 4 4-4 4z', 'M10 12h4M12 10v4', 'M16 12h1c3 0 3-4 5-4', 'M16 12h1c3 0 3 4 5 4', 'm20 6 2 2-2 2', 'm20 14 2 2-2 2']),
+  uiIcon('ui.parallelConverging', ['M2 8c3 0 3 4 6 4M2 16c3 0 3-4 6-4', 'm2 6-2 2 2 2M2 14l-2 2 2 2', 'm8 12 4-4 4 4-4 4z', 'M10 12h4M12 10v4', 'M16 12h6', 'm20 10 2 2-2 2']),
+  uiIcon('ui.routeRounded', ['M4 7h8a5 5 0 0 1 5 5v5h3', 'm17 14 3 3-3 3']),
+  uiIcon('ui.routeSmooth', ['M4 17c4.5 0 4.5-10 9-10s4.5 10 7 10', 'm17 14 3 3-3 3']),
+  uiIcon('ui.zoomIn', ['M10.5 5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11Z', 'm15 15 4 4M10.5 8v5M8 10.5h5']),
+  uiIcon('ui.zoomOut', ['M10.5 5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11Z', 'm15 15 4 4M8 10.5h5']),
+  uiIcon('ui.fitView', ['M9 4H4v5M15 4h5v5M9 20H4v-5M15 20h5v-5']),
+  uiIcon('ui.alignLeft', ['M5 4v16', 'M8 7h10M8 12h7M8 17h11']),
+  uiIcon('ui.alignCenterHorizontal', ['M12 4v16', 'M7 7h10M8.5 12h7M6.5 17h11']),
+  uiIcon('ui.alignRight', ['M19 4v16', 'M6 7h10M9 12h7M5 17h11']),
+  uiIcon('ui.alignTop', ['M4 5h16', 'M7 8v10M12 8v7M17 8v11']),
+  uiIcon('ui.alignCenterVertical', ['M4 12h16', 'M7 7v10M12 8.5v7M17 6.5v11']),
+  uiIcon('ui.alignBottom', ['M4 19h16', 'M7 6v10M12 9v7M17 5v11']),
+  uiIcon('ui.distributeHorizontal', ['M4 5v14M20 5v14', 'M8 8h3v8H8zM14 8h3v8h-3z']),
+  uiIcon('ui.distributeVertical', ['M5 4h14M5 20h14', 'M8 8h8v3H8zM8 14h8v3H8z']),
+  uiIcon('ui.layoutSelection', ['M4 5h6v5H4zM14 5h6v5h-6zM4 14h6v5H4zM14 14h6v5h-6z', 'm11 7.5 2 0M11 16.5h2M7 11v2M17 11v2']),
+  uiIcon('ui.rerouteSelection', ['M4 7h7a3 3 0 0 1 3 3v4a3 3 0 0 0 3 3h3', 'm17 14 3 3-3 3']),
+  uiIcon('ui.fitSelection', ['M8 4H4v4M16 4h4v4M8 20H4v-4M16 20h4v-4', 'M8 9h8v6H8z']),
+  uiIcon('ui.pointer', ['M6 3.5 18 12l-5.6 1.2-2.6 5.3z']),
+  uiIcon('ui.marquee', ['M5 4h4M15 4h4v4M19 14v5h-4M9 19H5v-5M5 9V4', 'm9 9 6 6M15 9v6H9']),
+  uiIcon('ui.hand', ['M7.5 11V7.5a1.5 1.5 0 0 1 3 0V10 6a1.5 1.5 0 0 1 3 0v4-3a1.5 1.5 0 0 1 3 0v3-1.8a1.5 1.5 0 0 1 3 0v4.3c0 4-2.5 6.5-6.5 6.5h-1.2c-2.3 0-3.8-1.1-5.1-3L4 14.8a1.6 1.6 0 0 1 2.4-2z']),
+  uiIcon('ui.locate', ['M8 16 17 7M10 7h7v7']),
+  uiIcon('ui.edit', ['M5 19h4L19 9l-4-4L5 15z', 'm13.5 6.5 4 4']),
+  uiIcon('ui.locateSource', ['M19 12H6', 'm10 8-4 4 4 4', 'M5 7v10']),
+  uiIcon('ui.locateTarget', ['M5 12h13', 'm14 8 4 4-4 4', 'M19 7v10']),
+  uiIcon('ui.add', ['M12 5v14M5 12h14']),
+  uiIcon('ui.connect', ['M5 12h14', 'm15 8 4 4-4 4']),
+  uiIcon('ui.enterScope', ['M5 5h6v2H7v10h4v2H5z', 'M10 12h9', 'm15 8 4 4-4 4']),
+  uiIcon('ui.leaveScope', ['M19 12H5', 'm9 8-4 4 4 4']),
+  uiIcon('ui.close', ['M7 7l10 10M17 7 7 17']),
+  uiIcon('ui.delete', ['M5 7h14M9 7V5h6v2M7 7l1 13h8l1-13M10 10v6M14 10v6']),
+  uiIcon('ui.design', ['m12 3 1.1 3.3L16.5 7.5l-3.4 1.2L12 12l-1.1-3.3-3.4-1.2 3.4-1.2z', 'M5 15v4M3 17h4M18 14v5M15.5 16.5h5']),
+  uiIcon('ui.preview', ['M3.5 12s3.2-5 8.5-5 8.5 5 8.5 5-3.2 5-8.5 5-8.5-5-8.5-5Z', 'M12 9.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5Z']),
+  uiIcon('ui.trace', ['M6 6h.01M18 18h.01', 'M6 6c7 0 1 12 12 12', 'm15 15 3 3-3 3']),
+  uiIcon('ui.statusCompleted', ['M12 3.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17Z', 'm8 12 2.5 2.5 5.5-6']),
+  uiIcon('ui.statusActive', ['M12 3.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17Z', 'M12 7.5V12l3 2']),
+  uiIcon('ui.statusFailed', ['M12 3.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17Z', 'm9 9 6 6M15 9l-6 6']),
+  uiIcon('ui.statusRejected', ['M8 8H4v4', 'M4.5 11.5C6.2 7.8 9 6 12.5 6a6 6 0 1 1-5.2 9', 'm5 15 2.5.2L7.2 18']),
+  uiIcon('ui.statusSkipped', ['M12 3.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17Z', 'M8 12h8']),
+  uiIcon('ui.statusIdle', 'M12 3.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17Z'),
+  icon('node.generic', 'M5 5h14v14H5z'),
+  icon('node.task', 'M4 5.5h16v13H4z'),
+  icon('node.userTask', ['M12 4.2a3 3 0 1 1 0 6 3 3 0 0 1 0-6Z', 'M6.5 19.5c.4-4 2.2-6.1 5.5-6.1s5.1 2.1 5.5 6.1']),
+  icon('node.manualTask', ['M5.2 12.4c1.1-1 2.1-.5 2.8.1V7.2c0-1.4 2-1.4 2 0v3.2-4.6c0-1.4 2-1.4 2 0v4.4-3.7c0-1.4 2-1.4 2 0v4-2.8c0-1.4 2-1.4 2 0v5.8c0 4.2-2 6.2-5.5 6.2-2.8 0-4.1-1.7-5.7-4.4-.6-1-.5-2.1.4-2.9Z']),
+  icon('node.serviceTask', ['M10.2 6.2a4.3 4.3 0 1 0 0 8.6 4.3 4.3 0 0 0 0-8.6Z', 'M10.2 3v1.5M10.2 17.9v1.5M2.7 10.5h1.5M16.2 10.5h1.5M4.9 5.2 6 6.3M14.5 14.6l1.1 1.1M15.6 5.2l-1.1 1.1M6 14.6l-1.1 1.1', 'M17.2 13.7a2.9 2.9 0 1 0 0 5.8 2.9 2.9 0 0 0 0-5.8Z', 'M17.2 11.6v.9M17.2 19.2v.9M13.4 15.4h.9M20.1 15.4h.9']),
+  icon('node.scriptTask', ['M6 4.5h9.5l2.5 2.7v12.3H6z', 'M15.5 4.5v3h2.5', 'M8.5 10h7M8.5 13h7M8.5 16h4.5']),
+  icon('node.businessRuleTask', ['M4 5h16v14H4z', 'M4 10h16M10 5v14M14 10v9']),
+  icon('node.sendTask', [
+    { d: 'M3.5 6.5h17v11h-17z', fill: 'currentColor', stroke: 'none' },
+    { d: 'm4.5 7.8 7.5 5.5 7.5-5.5', fill: 'none', stroke: '#fff', 'stroke-width': '1.6' },
+  ]),
+  icon('node.receiveTask', ['M3.5 6.5h17v11h-17z', 'm4.5 7.8 7.5 5.5 7.5-5.5']),
+  icon('node.receiveTask.instantiate', ['M12 2.8a9.2 9.2 0 1 0 0 18.4 9.2 9.2 0 0 0 0-18.4Z', 'M6 8.2h12v7.6H6z', 'm6.5 9 5.5 4 5.5-4']),
+  icon('node.subProcess', ['M5 5h14v14H5z', 'M8 12h8M12 8v8']),
+  icon('node.eventSubProcess', [
+    { d: 'M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16Z', dash: '2 2' },
+    'M12 8.5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7Z',
+  ]),
+  icon('node.callActivity', { d: 'M4 5.5h16v13H4z', 'stroke-width': '3' }),
+  icon('node.gateway.exclusive', ['M5 5l14 14M19 5 5 19']),
+  icon('node.gateway.parallel', ['M12 4v16M4 12h16']),
+  icon('node.gateway.inclusive', 'M12 5.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13Z'),
+  icon('node.gateway.eventBased', ['M12 4.5 18.5 9v7L12 19.5 5.5 16V9z', 'M12 7.5a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9Z']),
+  icon('node.gateway.eventBased.exclusive', ['M12 4.5a7.5 7.5 0 1 0 0 15 7.5 7.5 0 0 0 0-15Z', 'M12 6.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11Z', 'm12 8 3.8 2.8-1.4 4.4h-4.8l-1.4-4.4z']),
+  icon('node.gateway.eventBased.exclusiveInstantiate', ['M12 4.5a7.5 7.5 0 1 0 0 15 7.5 7.5 0 0 0 0-15Z', 'm12 8 3.8 2.8-1.4 4.4h-4.8l-1.4-4.4z']),
+  icon('node.gateway.eventBased.parallelInstantiate', ['M12 4.5a7.5 7.5 0 1 0 0 15 7.5 7.5 0 0 0 0-15Z', 'M12 8v8M8 12h8']),
+  icon('node.gateway.complex', ['M12 4v16M4 12h16M6.3 6.3l11.4 11.4M17.7 6.3 6.3 17.7']),
+  icon('event.none', 'M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16Z'),
+  icon('event.none.catch', 'M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16Z'),
+  icon('event.none.throw', { d: 'M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16Z', 'stroke-width': '3' }),
+  icon('event.message', ['M5 7h14v10H5z', 'm5 8 7 5 7-5']),
+  icon('event.message.catch', ['M5 7h14v10H5z', 'm5 8 7 5 7-5']),
+  icon('event.message.throw', [
+    { d: 'M5 7h14v10H5z', fill: 'currentColor', stroke: 'none' },
+    { d: 'm5.7 8 6.3 4.7L18.3 8', fill: 'none', stroke: '#fff', 'stroke-width': '1.5' },
+  ]),
+  icon('event.timer', ['M12 5a7 7 0 1 0 0 14 7 7 0 0 0 0-14Z', 'M12 8v4l3 2']),
+  icon('event.timer.catch', ['M12 5a7 7 0 1 0 0 14 7 7 0 0 0 0-14Z', 'M12 8v4l3 2']),
+  icon('event.conditional', ['M7 6h10v12H7z', 'M9 9h6M9 12h6M9 15h4']),
+  icon('event.conditional.catch', ['M7 6h10v12H7z', 'M9 9h6M9 12h6M9 15h4']),
+  icon('event.signal', 'M12 5 19 18H5z'),
+  icon('event.signal.catch', 'M12 5 19 18H5z'),
+  icon('event.signal.throw', { d: 'M12 5 19 18H5z', fill: 'currentColor', stroke: 'none' }),
+  icon('event.error', 'm13 4-7 9h5l-1 7 8-10h-5z'),
+  icon('event.error.catch', 'm13 4-7 9h5l-1 7 8-10h-5z'),
+  icon('event.error.throw', { d: 'm13 4-7 9h5l-1 7 8-10h-5z', fill: 'currentColor', stroke: 'none' }),
+  icon('event.escalation', 'm12 5 6 13-6-5-6 5z'),
+  icon('event.escalation.catch', 'm12 5 6 13-6-5-6 5z'),
+  icon('event.escalation.throw', { d: 'm12 5 6 13-6-5-6 5z', fill: 'currentColor', stroke: 'none' }),
+  icon('event.compensate', ['M12 7 6 12l6 5z', 'm18 7-6 5 6 5z']),
+  icon('event.compensate.catch', ['M12 7 6 12l6 5z', 'm18 7-6 5 6 5z']),
+  icon('event.compensate.throw', [
+    { d: 'M12 7 6 12l6 5z', fill: 'currentColor', stroke: 'none' },
+    { d: 'm18 7-6 5 6 5z', fill: 'currentColor', stroke: 'none' },
+  ]),
+  icon('event.link', ['M5 12h13', 'm14 8 4 4-4 4']),
+  icon('event.link.catch', ['M19 12H6', 'm10 8-4 4 4 4']),
+  icon('event.link.throw', [{ d: 'M5 10h9V7l5 5-5 5v-3H5z', fill: 'currentColor', stroke: 'none' }]),
+  icon('event.cancel', ['M7 7l10 10M17 7 7 17']),
+  icon('event.cancel.throw', ['M7 7l10 10M17 7 7 17']),
+  icon('event.terminate', 'M12 6a6 6 0 1 0 0 12 6 6 0 0 0 0-12Z', { fill: 'currentColor' }),
+  icon('event.terminate.throw', { d: 'M12 6a6 6 0 1 0 0 12 6 6 0 0 0 0-12Z', fill: 'currentColor', stroke: 'none' }),
+  icon('marker.loop', ['M17.5 8.5A6.5 6.5 0 1 0 18 15', 'm17.5 4v4.5H13']),
+  icon('marker.multiInstance.parallel', ['M7 5v14M12 5v14M17 5v14']),
+  icon('marker.multiInstance.sequential', ['M5 7h14M5 12h14M5 17h14']),
+  icon('marker.compensation', ['M12 6 5 12l7 6z', 'm19 6-7 6 7 6z']),
+  icon('marker.subProcess', ['M5 5h14v14H5z', 'M8 12h8M12 8v8']),
+  icon('marker.adHoc', 'M5 13c2-5 4 5 7 0s5 5 7 0'),
+  icon('node.data', ['M6 4h9l3 3v13H6z', 'M15 4v4h4']),
+  icon('node.dataStore', ['M5 6c0-2 14-2 14 0v12c0 2-14 2-14 0z', 'M5 6c0 2 14 2 14 0M5 12c0 2 14 2 14 0']),
+  icon('node.annotation', ['M7 5H4v14h3M9 8h11M9 12h9M9 16h7']),
+  icon('node.group', ['M5 5h14v14H5z'], { dash: '3 2' }),
+  icon('node.participant', ['M3 5h18v14H3z', 'M7 5v14']),
+  icon('node.lane', ['M3 7h18v10H3z', 'M8 7v10']),
+]);
+
+export function resolveNodeVisual(input, { surface = 'canvas', model = null } = {}) {
+  const type = typeof input === 'string' ? input : input?.type;
+  const properties = typeof input === 'string' ? {} : (input?.properties || {});
+  const activityMarkerIds = [];
+  if (properties.loopType === 'standard') activityMarkerIds.push('marker.loop');
+  if (properties.loopType === 'parallel') activityMarkerIds.push('marker.multiInstance.parallel');
+  if (properties.loopType === 'sequential') activityMarkerIds.push('marker.multiInstance.sequential');
+  if (properties.isForCompensation) activityMarkerIds.push('marker.compensation');
+  if (['subProcess', 'eventSubProcess', 'transaction', 'adHocSubProcess'].includes(type)) activityMarkerIds.push('marker.subProcess');
+  if (type === 'adHocSubProcess') activityMarkerIds.push('marker.adHoc');
+  const taskIds = {
+    userTask: 'node.userTask',
+    manualTask: 'node.manualTask',
+    serviceTask: 'node.serviceTask',
+    scriptTask: 'node.scriptTask',
+    businessRuleTask: 'node.businessRuleTask',
+    sendTask: 'node.sendTask',
+    receiveTask: properties.instantiate ? 'node.receiveTask.instantiate' : 'node.receiveTask',
+  };
+  if (type === 'task') return { iconId: surface === 'palette' ? 'node.task' : null, activityMarkerIds };
+  if (type === 'callActivity') return { iconId: surface === 'palette' ? 'node.callActivity' : null, activityMarkerIds };
+  if (taskIds[type]) return { iconId: taskIds[type], activityMarkerIds };
+  if (type === 'eventSubProcess') {
+    const startEvent = model?.nodes?.find((node) => node.scopeId === input?.id && NODE_DEFINITIONS[node.type]?.eventStage === 'start');
+    const startVisual = startEvent ? resolveNodeVisual(startEvent, { surface, model }) : null;
+    return { iconId: startVisual?.iconId || 'node.eventSubProcess', activityMarkerIds };
+  }
+  const definition = NODE_DEFINITIONS[type];
+  if (definition?.eventDefinition || definition?.kind === 'event' || definition?.kind === 'boundary') {
+    const role = definition.eventRole || (definition.eventStage === 'end' ? 'throw' : 'catch');
+    if (!definition.eventDefinition) return { iconId: surface === 'palette' ? `event.none.${role}` : null, activityMarkerIds };
+    return { iconId: `event.${definition.eventDefinition}.${role}`, activityMarkerIds };
+  }
+  if (type === 'eventBasedGateway') {
+    const variant = properties.instantiate
+      ? (properties.eventGatewayType === 'Parallel' ? 'parallelInstantiate' : 'exclusiveInstantiate')
+      : 'exclusive';
+    return { iconId: `node.gateway.eventBased.${variant}`, activityMarkerIds };
+  }
+  return { iconId: iconIdForNode(type), activityMarkerIds };
+}
+
+export function iconIdForNode(type, definition = NODE_DEFINITIONS[type]) {
+  if (definition?.eventDefinition) return `event.${definition.eventDefinition}`;
+  if (definition?.kind === 'event' || definition?.kind === 'boundary') return 'event.none';
+  const ids = {
+    task: 'node.task', userTask: 'node.userTask', manualTask: 'node.manualTask', serviceTask: 'node.serviceTask',
+    scriptTask: 'node.scriptTask', businessRuleTask: 'node.businessRuleTask', sendTask: 'node.sendTask', receiveTask: 'node.receiveTask',
+    subProcess: 'node.subProcess', eventSubProcess: 'node.subProcess', transaction: 'node.subProcess', adHocSubProcess: 'node.subProcess', callActivity: 'node.callActivity',
+    exclusiveGateway: 'node.gateway.exclusive', parallelGateway: 'node.gateway.parallel', inclusiveGateway: 'node.gateway.inclusive',
+    eventBasedGateway: 'node.gateway.eventBased', complexGateway: 'node.gateway.complex', dataObjectReference: 'node.data', dataStoreReference: 'node.dataStore',
+    textAnnotation: 'node.annotation', group: 'node.group', participant: 'node.participant', lane: 'node.lane',
+  };
+  return ids[type] || 'node.generic';
+}
+
+export class IconRegistry {
+  constructor(icons = []) {
+    this._icons = new Map();
+    for (const descriptor of icons) this.register(descriptor);
+  }
+
+  register(descriptor) {
+    if (!descriptor?.id || !descriptor?.viewBox || !Array.isArray(descriptor.paths)) throw new Error('Icon descriptor requires id, viewBox and paths.');
+    this._icons.set(descriptor.id, Object.freeze({ ...descriptor, paths: descriptor.paths.map((path) => Object.freeze({ ...path })) }));
+    return () => this._icons.delete(descriptor.id);
+  }
+
+  resolve(id, fallback = 'node.generic') { return this._icons.get(id) || this._icons.get(fallback) || null; }
+  has(id) { return this._icons.has(id); }
+}
+
+export function createIconElement(descriptor, { className = '', title = '' } = {}) {
+  if (!descriptor || typeof document === 'undefined') return null;
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  svg.setAttribute('viewBox', descriptor.viewBox);
+  svg.setAttribute('aria-hidden', title ? 'false' : 'true');
+  svg.setAttribute('focusable', 'false');
+  if (className) svg.setAttribute('class', className);
+  if (title) {
+    const titleNode = document.createElementNS(svg.namespaceURI, 'title');
+    titleNode.textContent = title;
+    svg.appendChild(titleNode);
+  }
+  for (const path of descriptor.paths) {
+    const node = document.createElementNS(svg.namespaceURI, 'path');
+    for (const [key, value] of Object.entries(path)) {
+      const attribute = key === 'dash' ? 'stroke-dasharray' : key;
+      node.setAttribute(attribute, String(value));
+    }
+    svg.appendChild(node);
+  }
+  if (descriptor.fill) svg.style.fill = descriptor.fill;
+  return svg;
+}
+
+export function hydrateIcons(root, registry) {
+  if (!root?.querySelectorAll || !registry || typeof document === 'undefined') return;
+  for (const host of root.querySelectorAll('[data-icon]')) {
+    const id = host.dataset.icon;
+    if (!id) continue;
+    if (host.dataset.iconHydrated === id && host.querySelector?.('svg')) continue;
+    host.replaceChildren?.();
+    const descriptor = registry.resolve(id, null);
+    if (!descriptor) {
+      host.dataset.iconMissing = 'true';
+      delete host.dataset.iconHydrated;
+      continue;
+    }
+    delete host.dataset.iconMissing;
+    const svg = createIconElement(descriptor, { className: 'nova-icon-svg', title: host.dataset.iconTitle || '' });
+    if (!svg) continue;
+    host.appendChild(svg);
+    host.dataset.iconHydrated = id;
+  }
+}
+
+export function createDefaultIconRegistry(extraIcons = []) { return new IconRegistry([...DEFAULT_ICONS, ...extraIcons]); }

package/dist/modules/palette/index.d.ts

@@ -0,0 +1,74 @@
+import type { NodeType } from '../core/index.js'
+import type { IconRegistry } from '../icons/index.js'
+import type { NovaThemeInput, NovaThemeMode, NovaThemeState, ThemeController } from '../theme/index.js'
+
+export interface PalettePosition { before?: string; after?: string; replace?: string; remove?: string; prepend?: boolean; append?: boolean }
+export type PaletteCreateIntent =
+  | { kind: 'node'; nodeType: NodeType; preset?: Record<string, unknown> }
+  | { kind: 'template'; templateId: string; [key: string]: unknown }
+  | { kind: 'action'; [key: string]: unknown }
+export interface PaletteItem {
+  id: string
+  label: string
+  description?: string
+  iconId?: string
+  create?: PaletteCreateIntent
+  position?: PalettePosition
+  visible?: (context: unknown) => boolean
+}
+export interface PaletteSection {
+  id: string
+  label: string
+  items: PaletteItem[]
+  collapsed?: boolean
+  position?: PalettePosition
+  visible?: (context: unknown) => boolean
+}
+export interface PaletteProvider {
+  id: string
+  priority?: number
+  getSections?(context: unknown): PaletteSection[]
+  sections?: PaletteSection[]
+}
+export class PaletteRegistry {
+  registerProvider(priority: number, provider: PaletteProvider): () => void
+  registerProvider(provider: PaletteProvider): () => void
+  resolve(context?: unknown): PaletteSection[]
+}
+export const defaultBpmnPaletteProvider: PaletteProvider
+export function createPaletteRegistry(): PaletteRegistry
+export function createDefaultPaletteRegistry(options?: { providers?: PaletteProvider[] }): PaletteRegistry
+
+export type PaletteItemRenderer = (context: {
+  container: HTMLElement
+  item: PaletteItem
+  panel: PalettePanel
+  beginCreate(): unknown
+}) => void | (() => void)
+export type PaletteSectionRenderer = (context: {
+  container: HTMLElement
+  section: PaletteSection
+  panel: PalettePanel
+}) => void | (() => void)
+
+export interface PalettePanelOptions {
+  container: HTMLElement
+  registry: PaletteRegistry
+  studio: { getState(): unknown }
+  interactions: { beginCreate(intent: PaletteCreateIntent): unknown; serialize(session: unknown): string }
+  canvas?: unknown
+  iconRegistry?: IconRegistry
+  renderItem?: PaletteItemRenderer | null
+  renderSection?: PaletteSectionRenderer | null
+  themeController?: ThemeController | null
+  theme?: NovaThemeInput | null
+  onThemeChange?: ((state: NovaThemeState) => void) | null
+}
+export class PalettePanel {
+  constructor(options: PalettePanelOptions)
+  render(): void
+  setTheme(theme: NovaThemeInput): NovaThemeState
+  setThemeMode(mode: NovaThemeMode): NovaThemeState
+  getThemeState(): NovaThemeState
+  destroy(): void
+}

package/dist/modules/palette/index.js

@@ -0,0 +1,99 @@
+import { NODE_DEFINITIONS, PALETTE_GROUPS, PARALLEL_GATEWAY_PRESETS } from '../core/index.js';
+import { resolveNodeVisual } from '../icons/index.js';
+
+function insert(records, record) {
+  if (!record?.id) return records;
+  const position = record.position || {};
+  if (position.remove) return records.filter((item) => item.id !== position.remove && item.id !== record.id);
+  const next = [...records];
+  let index = next.length;
+  const existing = next.findIndex((item) => item.id === record.id);
+  if (existing >= 0) { index = existing; next.splice(existing, 1); }
+  if (position.replace) {
+    const target = next.findIndex((item) => item.id === position.replace);
+    if (target >= 0) { index = target; next.splice(target, 1); }
+  } else if (position.prepend) index = 0;
+  else if (position.before) { const target = next.findIndex((item) => item.id === position.before); if (target >= 0) index = target; }
+  else if (position.after) { const target = next.findIndex((item) => item.id === position.after); if (target >= 0) index = target + 1; }
+  index = Math.max(0, Math.min(index, next.length));
+  next.splice(index, 0, record);
+  return next;
+}
+
+export class PaletteRegistry {
+  constructor() { this._providers = []; }
+
+  registerProvider(priority = 500, provider) {
+    if (typeof priority === 'object') { provider = priority; priority = provider.priority ?? 500; }
+    if (!provider?.id) throw new Error('Palette provider requires an id.');
+    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); };
+  }
+
+  resolve(context = {}) {
+    let sections = [];
+    // Resolve low priority first so higher-priority providers can intentionally
+    // replace or reposition default sections/items.
+    for (const { provider } of [...this._providers].reverse()) {
+      const output = typeof provider.getSections === 'function' ? provider.getSections(context) : provider.sections;
+      for (const rawSection of output || []) {
+        if (!rawSection || (typeof rawSection.visible === 'function' && !rawSection.visible(context))) continue;
+        const previous = sections.find((section) => section.id === rawSection.id);
+        let items = previous?.items || [];
+        for (const item of rawSection.items || []) {
+          if (!item || (typeof item.visible === 'function' && !item.visible(context))) continue;
+          items = insert(items, item);
+        }
+        sections = insert(sections, { ...previous, ...rawSection, items });
+      }
+    }
+    return sections;
+  }
+}
+
+export const defaultBpmnPaletteProvider = {
+  id: 'bpmn-default-palette',
+  priority: 100,
+  getSections(context = {}) {
+    return PALETTE_GROUPS.map((group) => {
+      const items = [];
+      for (const nodeType of group.types.filter((type) => context.studio?.allowsNodeType?.(type) !== false)) {
+        if (nodeType === 'parallelGateway') {
+          items.push({
+            id: 'node-parallelGateway',
+            label: PARALLEL_GATEWAY_PRESETS.diverging.label,
+            description: '并行启动多条后续线路',
+            iconId: PARALLEL_GATEWAY_PRESETS.diverging.iconId,
+            create: { kind: 'node', nodeType, preset: PARALLEL_GATEWAY_PRESETS.diverging.preset },
+          }, {
+            id: 'node-parallelGateway-converging',
+            label: PARALLEL_GATEWAY_PRESETS.converging.label,
+            description: '等待所有并行入口到达',
+            iconId: PARALLEL_GATEWAY_PRESETS.converging.iconId,
+            create: { kind: 'node', nodeType, preset: PARALLEL_GATEWAY_PRESETS.converging.preset },
+          });
+          continue;
+        }
+        items.push({
+          id: `node-${nodeType}`,
+          label: NODE_DEFINITIONS[nodeType].label,
+          description: NODE_DEFINITIONS[nodeType].bpmnType,
+          iconId: resolveNodeVisual(nodeType, { surface: 'palette' }).iconId,
+          create: { kind: 'node', nodeType },
+        });
+      }
+      return { id: group.id, label: group.label, collapsed: group.id !== 'favorites', items };
+    }).filter((section) => section.items.length);
+  },
+};
+
+export function createPaletteRegistry() { return new PaletteRegistry(); }
+export function createDefaultPaletteRegistry({ providers = [] } = {}) {
+  const registry = createPaletteRegistry();
+  registry.registerProvider(defaultBpmnPaletteProvider.priority, defaultBpmnPaletteProvider);
+  for (const provider of providers) registry.registerProvider(provider.priority ?? 500, provider);
+  return registry;
+}
+export * from './panel.js';

package/dist/modules/palette/panel.js

@@ -0,0 +1,99 @@
+import { createDefaultIconRegistry, createIconElement, hydrateIcons } from '../icons/index.js';
+import { ThemeController } from '../theme/index.js';
+
+// Kept identical to the interaction protocol without importing Studio back into
+// Palette; this prevents a Palette -> Studio -> Palette module cycle.
+const CREATE_INTENT_MIME = 'application/x-bpmn-nova-create-intent+json';
+
+function element(tag, className, text) {
+  const node = document.createElement(tag);
+  if (className) node.className = className;
+  if (text !== undefined) node.textContent = text;
+  return node;
+}
+
+export class PalettePanel {
+  constructor({ container, registry, studio, interactions, canvas = null, iconRegistry = createDefaultIconRegistry(), renderItem = null, renderSection = null, themeController = null, theme = null, onThemeChange = null } = {}) {
+    if (!container || !registry || !studio || !interactions) throw new Error('PalettePanel requires container, registry, studio and interactions.');
+    Object.assign(this, { container, registry, studio, interactions, canvas, iconRegistry, renderItem, renderSection });
+    this.themeController = themeController || new ThemeController({ root: container, theme, onChange: onThemeChange });
+    this._ownsThemeController = !themeController;
+    this._cleanups = [];
+    this.render();
+  }
+
+  render() {
+    this._cleanups.splice(0).forEach((cleanup) => cleanup?.());
+    this.container.innerHTML = '';
+    this.container.classList.add('nova-palette');
+    const sections = this.registry.resolve({ studio: this.studio, model: this.studio.model });
+    for (const section of sections) {
+      if (this.renderSection) {
+        const cleanup = this.renderSection({ container: this.container, section, panel: this });
+        if (typeof cleanup === 'function') this._cleanups.push(cleanup);
+        continue;
+      }
+      const wrapper = element('section', `nova-palette-section${section.collapsed ? ' is-collapsed' : ''}`);
+      wrapper.dataset.sectionId = section.id;
+      const toggle = element('button', 'nova-palette-section-toggle');
+      toggle.type = 'button';
+      toggle.setAttribute('aria-expanded', section.collapsed ? 'false' : 'true');
+      const chevron = element('span', 'nova-icon nova-icon-sm nova-palette-chevron');
+      chevron.dataset.icon = 'ui.chevron';
+      toggle.append(chevron, element('strong', '', section.label), element('small', '', String(section.items.length)));
+      toggle.addEventListener('click', () => {
+        wrapper.classList.toggle('is-collapsed');
+        toggle.setAttribute('aria-expanded', wrapper.classList.contains('is-collapsed') ? 'false' : 'true');
+      });
+      const items = element('div', 'nova-palette-items');
+      for (const item of section.items) items.appendChild(this._item(item));
+      wrapper.append(toggle, items);
+      this.container.appendChild(wrapper);
+    }
+    hydrateIcons(this.container, this.iconRegistry);
+  }
+
+  _item(item) {
+    const host = element('div', 'nova-palette-item-host');
+    if (this.renderItem) {
+      const cleanup = this.renderItem({ container: host, item, panel: this, beginCreate: () => this.interactions.beginCreate(item.create) });
+      if (typeof cleanup === 'function') this._cleanups.push(cleanup);
+      return host;
+    }
+    const button = element('button', 'nova-palette-item');
+    button.type = 'button';
+    button.draggable = Boolean(item.create && item.create.kind !== 'action');
+    button.title = item.description || item.label;
+    const iconHost = element('span', 'nova-palette-item-icon');
+    const icon = createIconElement(this.iconRegistry.resolve(item.iconId), { title: item.label });
+    if (icon) iconHost.appendChild(icon);
+    const text = element('span', 'nova-palette-item-copy');
+    text.append(element('strong', '', item.label), element('small', '', item.description || ''));
+    button.append(iconHost, text);
+    button.addEventListener('dragstart', (event) => {
+      const session = this.interactions.beginCreate(item.create);
+      const value = this.interactions.serialize(session);
+      event.dataTransfer.effectAllowed = 'copy';
+      event.dataTransfer.setData(CREATE_INTENT_MIME, value);
+      event.dataTransfer.setData('text/plain', value);
+    });
+    button.addEventListener('click', () => {
+      if (!this.canvas || !item.create) return;
+      const point = this.canvas.getViewportCenterWorld();
+      this.interactions.drop(this.interactions.beginCreate(item.create), { clientX: 0, clientY: 0 }, { clientToWorld: () => point });
+    });
+    host.appendChild(button);
+    return host;
+  }
+
+  destroy() {
+    this._cleanups.splice(0).forEach((cleanup) => cleanup?.());
+    this.container.innerHTML = '';
+    this.container.classList.remove('nova-palette');
+    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(); }
+}

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

@@ -0,0 +1,20 @@
+export * from '../properties-core/index.js'
+export * from '../properties-bpmn/index.js'
+export * from '../properties-flowable/index.js'
+export * from '../properties-activiti/index.js'
+export * from '../properties-renderer/index.js'
+
+import type {
+  PropertiesProvider,
+  PropertiesRegistry,
+  PropertiesStudio,
+  PropertyComponentRenderer,
+} from '../properties-core/index.js'
+
+export function createDefaultPropertiesRegistry(options?: {
+  studio?: PropertiesStudio | null
+  designer?: PropertiesStudio | null
+  components?: Record<string, PropertyComponentRenderer>
+  dataProviders?: Record<string, unknown>
+  providers?: PropertiesProvider[]
+}): PropertiesRegistry

package/dist/modules/properties/index.js

@@ -0,0 +1,19 @@
+export * from '../properties-core/index.js';
+export * from '../properties-bpmn/index.js';
+export * from '../properties-flowable/index.js';
+export * from '../properties-activiti/index.js';
+export * from '../properties-renderer/index.js';
+
+import { createPropertiesRegistry } from '../properties-core/index.js';
+import { registerBpmnProperties } from '../properties-bpmn/index.js';
+import { registerFlowableProperties } from '../properties-flowable/index.js';
+import { registerActivitiProperties } from '../properties-activiti/index.js';
+
+export function createDefaultPropertiesRegistry({ studio = null, designer = null, components = {}, dataProviders = {}, providers = [] } = {}) {
+  const registry = createPropertiesRegistry({ studio: studio || designer, components, dataProviders });
+  registerBpmnProperties(registry);
+  registerFlowableProperties(registry);
+  registerActivitiProperties(registry);
+  for (const provider of providers) registry.registerProvider(provider.priority ?? 500, provider);
+  return registry;
+}

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

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