vue-bpmn-designer: Instructions file for Codex

vue-bpmn-designer Collaboration Rules

1. Project Scope and Stack

This project is a client-side BPMN designer for Flowable. Its core features include process modeling, a properties panel, BPMN linting, token simulation, CodeMirror script editing, and English/Chinese localization.

• Vue 3.5, TypeScript, and Vite 6
• Pinia 3 and pinia-plugin-persistedstate
• Element Plus and SCSS
• bpmn-js, diagram-js, bpmnlint, and related plugins
• CodeMirror 6
• vue-i18n and VueUse
• Use pnpm exclusively. Do not use npm or yarn.

The project currently has no routing layer, server API layer, or automated test suite. Do not scaffold them without an explicit requirement.

2. Commands

pnpm dev          # Start the development server
pnpm type-check   # Run Vue and TypeScript checks
pnpm build-only   # Run the Vite production build
pnpm build        # Run type checking and the production build
pnpm lint         # Run ESLint with automatic fixes; modifies files
pnpm format       # Format all files under src; modifies files

• Run checks proportional to the change. For build, configuration, or cross-module changes, run both pnpm type-check and pnpm build-only.
• lint and format write to many files. If the worktree contains unrelated changes, run ESLint or Prettier only on files changed by the current task.
• There is no test script. Never claim that tests passed; report the checks that actually ran and any remaining failures.

3. Directory Responsibilities

• src/views/ProcessDesigner/BpmnModeler.tsx: creates the Modeler and registers additionalModules, the Flowable moddle descriptor, linting, and plugins.
• src/views/ProcessDesigner/BpmnPanel.vue: selects and renders properties-panel components for the current BPMN element.
• src/views/ProcessDesigner/Panel/: properties-panel UI for individual BPMN element types.
• src/hooks/useService.ts: stores the current element and didi injector, exposes bpmn-js services, and updates Moddle properties.
• src/views/ProcessDesigner/utils/: shared element, event-definition, extension-element, and validation helpers. Reuse these before adding new logic.
• src/views/ProcessDesigner/Modeling/, Renderer/, Replace/, Palette/, ContextPad/, and PopupMenu/: bpmn-js extension modules.
• src/views/ProcessDesigner/Lint/: static resolver, lint configuration, and custom lint rules.
• src/views/ProcessDesigner/flowable.json: Flowable moddle descriptor.
• src/languages/: UI and bpmn-js localization resources.
• src/stores/: Pinia Setup Stores and persisted-state plugin registration.
• src/types/: business types and supplemental third-party declarations.
• src/typings/auto-imports.d.ts and src/typings/components.d.ts: generated files; never maintain them manually.