From 0a71ce795325572750fb4e2f0f2fb6a82eed1236 Mon Sep 17 00:00:00 2001
From: MrCoder <eagle.xiao@gmail.com>
Date: Thu, 10 Apr 2025 19:46:35 +1000
Subject: [PATCH 01/10] It can show and close color picker.

---
 package.json                                  |   1 +
 pnpm-lock.yaml                                |  32 ++++-
 .../SeqDiagram/LifeLineLayer/ColorPicker.vue  | 121 ++++++++++++++++++
 .../SeqDiagram/LifeLineLayer/Participant.vue  |  36 +++++-
 src/store/Store.ts                            |  56 ++++++++
 5 files changed, 241 insertions(+), 5 deletions(-)
 create mode 100644 src/components/DiagramFrame/SeqDiagram/LifeLineLayer/ColorPicker.vue

diff --git a/package.json b/package.json
index 814e9efde..1736148c4 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
     "@types/ramda": "^0.28.20",
     "@vue/compat": "^3.2.45",
     "antlr4": "~4.11.0",
+    "click-outside-vue3": "^4.0.1",
     "color-string": "^1.5.5",
     "dom-to-image-more": "^2.13.0",
     "dompurify": "^3.1.5",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7c31ce90d..372e64828 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -28,6 +28,9 @@ importers:
       antlr4:
         specifier: ~4.11.0
         version: 4.11.0
+      click-outside-vue3:
+        specifier: ^4.0.1
+        version: 4.0.1
       color-string:
         specifier: ^1.5.5
         version: 1.5.5
@@ -2564,6 +2567,12 @@ packages:
         integrity: sha512-V09KvXxFiutGp6B7XkpaDXlNadZxrzajcY50EuoLIpQ6WWYCSvf19lVIazzfIzQvhUN2HjX12spLojTnhuKlGg==,
       }
 
+  "@types/node@22.14.0":
+    resolution:
+      {
+        integrity: sha512-Kmpl+z84ILoG+3T/zQFyAJsU6EPTmOCj8/2+83fSN6djd6I4o7uOuGIH6vq3PrjY5BGitSbFuMN18j3iknubbA==,
+      }
+
   "@types/ramda@0.28.20":
     resolution:
       {
@@ -3688,6 +3697,13 @@ packages:
       }
     engines: { node: ^12.20.0 || ^14.13.1 || >=16.0.0 }
 
+  click-outside-vue3@4.0.1:
+    resolution:
+      {
+        integrity: sha512-sbplNecrup5oGqA3o4bo8XmvHRT6q9fvw21Z67aDbTqB9M6LF7CuYLTlLvNtOgKU6W3zst5H5zJuEh4auqA34g==,
+      }
+    engines: { node: ">=6" }
+
   cliui@8.0.1:
     resolution:
       {
@@ -7756,6 +7772,12 @@ packages:
         integrity: sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==,
       }
 
+  undici-types@6.21.0:
+    resolution:
+      {
+        integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==,
+      }
+
   unicode-canonical-property-names-ecmascript@2.0.0:
     resolution:
       {
@@ -9953,6 +9975,10 @@ snapshots:
     dependencies:
       undici-types: 6.20.0
 
+  "@types/node@22.14.0":
+    dependencies:
+      undici-types: 6.21.0
+
   "@types/ramda@0.28.20":
     dependencies:
       ts-toolbelt: 6.15.5
@@ -10680,6 +10706,8 @@ snapshots:
       slice-ansi: 5.0.0
       string-width: 5.1.2
 
+  click-outside-vue3@4.0.1: {}
+
   cliui@8.0.1:
     dependencies:
       string-width: 4.2.3
@@ -11813,7 +11841,7 @@ snapshots:
 
   jest-worker@27.5.1:
     dependencies:
-      "@types/node": 22.10.7
+      "@types/node": 22.14.0
       merge-stream: 2.0.0
       supports-color: 8.1.1
 
@@ -13114,6 +13142,8 @@ snapshots:
 
   undici-types@6.20.0: {}
 
+  undici-types@6.21.0: {}
+
   unicode-canonical-property-names-ecmascript@2.0.0: {}
 
   unicode-match-property-ecmascript@2.0.0:
diff --git a/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/ColorPicker.vue b/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/ColorPicker.vue
new file mode 100644
index 000000000..499db64b7
--- /dev/null
+++ b/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/ColorPicker.vue
@@ -0,0 +1,121 @@
+<template>
+  <div class="relative inline-block">
+    <button
+      @click.stop="togglePicker"
+      class="w-6 h-6 rounded border border-gray-300 flex items-center justify-center hover:ring-2 hover:ring-blue-200 transition-all"
+      :style="{ backgroundColor: modelValue }"
+    >
+      <svg
+        v-if="!modelValue"
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-4 w-4 text-gray-500"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M4 2a2 2 0 00-2 2v11a3 3 0 106 0V4a2 2 0 00-2-2H4zm1 14a1 1 0 100-2 1 1 0 000 2zm5-1.757l4.9-4.9a2 2 0 000-2.828L13.485 5.1a2 2 0 00-2.828 0L10 5.757v8.486zM16 18H9.071l6-6H16a2 2 0 012 2v2a2 2 0 01-2 2z"
+          clip-rule="evenodd"
+        />
+      </svg>
+    </button>
+    <div
+      v-if="isOpen"
+      v-click-outside="closePicker"
+      class="absolute z-50 mt-1 p-2 bg-white rounded-lg shadow-lg border border-gray-200 w-40"
+    >
+      <div class="grid grid-cols-4 gap-2">
+        <button
+          v-for="color in colors"
+          :key="color"
+          @click.stop="selectColor(color)"
+          class="w-8 h-8 rounded hover:scale-110 transition-transform focus:outline-none focus:ring-2 focus:ring-blue-500"
+          :style="{ backgroundColor: color }"
+          :title="color"
+        ></button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref } from "vue";
+import vClickOutside from "click-outside-vue3";
+
+export default {
+  name: "ColorPicker",
+  directives: {
+    clickOutside: vClickOutside.directive,
+  },
+  props: {
+    modelValue: {
+      type: String,
+      default: "",
+    },
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const isOpen = ref(false);
+    const colors = [
+      "#006837",
+      "#00A651",
+      "#BFB41B",
+      "#FFC20E",
+      "#F15A24",
+      "#FBB3B1",
+      "#F26D7D",
+      "#B71F3A",
+      "#E31C79",
+      "#FF66C4",
+      "#FFA3E1",
+      "#9E4F9E",
+      "#662D91",
+      "#4B0082",
+      "#2E3192",
+      "#0071BC",
+      "#1B75BC",
+      "#29ABE2",
+      "#00BFB3",
+      "#4DC7EC",
+      "#A7C6ED",
+      "#B3B3B3",
+      "#666666",
+      "#000000",
+      "#8B4513",
+      "#FF69B4",
+      "#DEB887",
+      "#B0E0E6",
+      "#CD853F",
+      "#0000FF",
+      "#004B49",
+      "#E6E6FA",
+      "#D8BFD8",
+      "#4A2F24",
+    ];
+
+    const togglePicker = () => {
+      isOpen.value = !isOpen.value;
+    };
+
+    const closePicker = () => {
+      isOpen.value = false;
+    };
+
+    const selectColor = (color) => {
+      console.log("Selected color:", color);
+      emit("update:modelValue", color);
+      closePicker();
+    };
+
+    return {
+      isOpen,
+      colors,
+      togglePicker,
+      closePicker,
+      selectColor,
+    };
+  },
+};
+</script>
+
+<style scoped></style>
diff --git a/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/Participant.vue b/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/Participant.vue
index 8635c1bd0..d37fd70ee 100644
--- a/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/Participant.vue
+++ b/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/Participant.vue
@@ -22,6 +22,10 @@
         v-if="!isDefaultStarter"
         class="h-5 group flex flex-col justify-center"
       >
+        <ColorPicker
+          v-model="participantColor"
+          class="absolute -left-8 top-1/2 transform -translate-y-1/2"
+        />
         <!-- TODO: create a better solution for participant comments -->
         <!--      <span-->
         <!--        v-if="!!comment"-->
@@ -46,7 +50,7 @@
 <script>
 import { brightnessIgnoreAlpha, removeAlpha } from "@/utils/Color";
 import iconPath from "../../Tutorial/Icons";
-import { computed, ref } from "vue";
+import { computed, ref, watch } from "vue";
 import useDocumentScroll from "@/functions/useDocumentScroll";
 import useIntersectionTop from "@/functions/useIntersectionTop";
 import { useStore } from "vuex";
@@ -55,6 +59,7 @@ import { PARTICIPANT_HEIGHT } from "@/positioning/Constants";
 import { RenderMode } from "@/store/Store";
 import ParticipantLabel from "./ParticipantLabel.vue";
 import { _STARTER_ } from "@/parser/OrderedParticipants";
+import ColorPicker from "./ColorPicker.vue";
 
 const INTERSECTION_ERROR_MARGIN = 10; // a threshold for judging whether the participant is intersecting with the viewport
 
@@ -62,10 +67,21 @@ export default {
   name: "Participant",
   components: {
     ParticipantLabel,
+    ColorPicker,
   },
   setup(props) {
     const store = useStore();
     const participant = ref(null);
+    const participantColor = computed({
+      get: () => props.entity.color,
+      set: (value) => {
+        store.commit("updateParticipantColor", {
+          name: props.entity.name,
+          color: value,
+        });
+      },
+    });
+
     if (store.state.mode === RenderMode.Static) {
       return { translate: 0, participant };
     }
@@ -106,7 +122,19 @@ export default {
         participantOffsetTop
       );
     });
-    return { translate, participant, labelPositions, assigneePositions };
+    watch(
+      () => participantColor.value,
+      (newColor) => {
+        this.updateFontColor(newColor);
+      },
+    );
+    return {
+      translate,
+      participant,
+      labelPositions,
+      assigneePositions,
+      participantColor,
+    };
   },
   props: {
     entity: {
@@ -173,8 +201,8 @@ export default {
     onSelect() {
       this.$store.commit("onSelect", this.entity.name);
     },
-    updateFontColor() {
-      if (!this.entity.color) {
+    updateFontColor(newColor) {
+      if (!newColor) {
         this.color = undefined;
         return;
       }
diff --git a/src/store/Store.ts b/src/store/Store.ts
index 1260f9cf7..c44c8f2b4 100644
--- a/src/store/Store.ts
+++ b/src/store/Store.ts
@@ -167,6 +167,52 @@ const Store = (): StoreOptions<StoreState> => {
       diagramElement: function (state: any, payload: any) {
         state.diagramElement = payload;
       },
+      updateParticipantColor: function (
+        state,
+        { name, color }: { name: string; color: string },
+      ) {
+        console.log("updateParticipantColor mutation called", { name, color });
+        // Get the participant from the store
+        const participant = state.getters.participants.Get(name);
+        console.log("participant:", participant);
+
+        // Only update color if the participant was explicitly declared
+        if (!participant?.explicit) {
+          console.warn(`Cannot update color for implicit participant: ${name}`);
+          return;
+        }
+
+        // Get the position of the explicit declaration
+        const position = participant.position;
+        console.log("position:", position);
+        if (!position || !Array.isArray(position)) {
+          console.warn(`No valid position found for participant: ${name}`);
+          return;
+        }
+
+        // Extract the start and end positions
+        const [start, end] = position;
+
+        // Get the participant declaration text
+        const declarationText = state.code.substring(start, end);
+        console.log("declarationText:", declarationText);
+
+        // Create updated text with color
+        const updatedText = updateParticipantColorInText(
+          declarationText,
+          color,
+        );
+        console.log("updatedText:", updatedText);
+
+        // Replace the declaration in the code
+        state.code =
+          state.code.substring(0, start) +
+          updatedText +
+          state.code.substring(end);
+
+        // Notify of content change
+        state.onContentChange?.();
+      },
     },
     actions: {
       // Why debounce is here instead of mutation 'code'?
@@ -186,4 +232,14 @@ const Store = (): StoreOptions<StoreState> => {
     strict: false,
   };
 };
+
+// Helper function to update color in participant declaration text
+function updateParticipantColorInText(text: string, color?: string): string {
+  // Remove any existing color (format: #RRGGBB)
+  const baseText = text.replace(/\s+#[0-9a-fA-F]{6}\b/, "");
+
+  // Add new color if provided
+  return color ? `${baseText} ${color}` : baseText;
+}
+
 export default Store;

From a1c35e4557a3dc189750a958f81e6e0f4ac65915 Mon Sep 17 00:00:00 2001
From: MrCoder <eagle.xiao@gmail.com>
Date: Thu, 10 Apr 2025 20:49:30 +1000
Subject: [PATCH 02/10] It triggers updateParticipantColor now.

---
 .../SeqDiagram/LifeLineLayer/ColorPicker.vue             | 3 ++-
 .../SeqDiagram/LifeLineLayer/Participant.vue             | 1 +
 src/store/Store.ts                                       | 9 ++++++---
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/ColorPicker.vue b/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/ColorPicker.vue
index 499db64b7..a9ed9fc8b 100644
--- a/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/ColorPicker.vue
+++ b/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/ColorPicker.vue
@@ -53,7 +53,7 @@ export default {
       default: "",
     },
   },
-  emits: ["update:modelValue"],
+  emits: ["update:modelValue", "input"],
   setup(props, { emit }) {
     const isOpen = ref(false);
     const colors = [
@@ -104,6 +104,7 @@ export default {
     const selectColor = (color) => {
       console.log("Selected color:", color);
       emit("update:modelValue", color);
+      emit("input", color);
       closePicker();
     };
 
diff --git a/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/Participant.vue b/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/Participant.vue
index d37fd70ee..a345b7860 100644
--- a/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/Participant.vue
+++ b/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/Participant.vue
@@ -78,6 +78,7 @@ export default {
         store.commit("updateParticipantColor", {
           name: props.entity.name,
           color: value,
+          participant: store.getters.participants.Get(props.entity.name),
         });
       },
     });
diff --git a/src/store/Store.ts b/src/store/Store.ts
index c44c8f2b4..ea3c08985 100644
--- a/src/store/Store.ts
+++ b/src/store/Store.ts
@@ -169,11 +169,14 @@ const Store = (): StoreOptions<StoreState> => {
       },
       updateParticipantColor: function (
         state,
-        { name, color }: { name: string; color: string },
+        {
+          name,
+          color,
+          participant,
+        }: { name: string; color: string; participant: any },
       ) {
         console.log("updateParticipantColor mutation called", { name, color });
-        // Get the participant from the store
-        const participant = state.getters.participants.Get(name);
+
         console.log("participant:", participant);
 
         // Only update color if the participant was explicitly declared

From d70d5d595e9d90bac5e42cdafb70bc2b173ff20b Mon Sep 17 00:00:00 2001
From: MrCoder <eagle.xiao@gmail.com>
Date: Thu, 10 Apr 2025 21:13:10 +1000
Subject: [PATCH 03/10] It sets colors for explicitly declared participants.

---
 .../SeqDiagram/LifeLineLayer/Participant.vue       | 14 +++++++-------
 src/store/Store.ts                                 | 13 ++++++++++---
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/Participant.vue b/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/Participant.vue
index a345b7860..9940b558e 100644
--- a/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/Participant.vue
+++ b/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/Participant.vue
@@ -50,7 +50,7 @@
 <script>
 import { brightnessIgnoreAlpha, removeAlpha } from "@/utils/Color";
 import iconPath from "../../Tutorial/Icons";
-import { computed, ref, watch } from "vue";
+import { computed, ref } from "vue";
 import useDocumentScroll from "@/functions/useDocumentScroll";
 import useIntersectionTop from "@/functions/useIntersectionTop";
 import { useStore } from "vuex";
@@ -123,12 +123,12 @@ export default {
         participantOffsetTop
       );
     });
-    watch(
-      () => participantColor.value,
-      (newColor) => {
-        this.updateFontColor(newColor);
-      },
-    );
+    // watch(
+    //   () => participantColor.value,
+    //   (newColor) => {
+    //     this.updateFontColor(newColor);
+    //   },
+    // );
     return {
       translate,
       participant,
diff --git a/src/store/Store.ts b/src/store/Store.ts
index ea3c08985..c7f71f848 100644
--- a/src/store/Store.ts
+++ b/src/store/Store.ts
@@ -9,6 +9,7 @@ import WidthProviderOnBrowser from "../positioning/WidthProviderFunc";
 import { Coordinates } from "@/positioning/Coordinates";
 import { CodeRange } from "@/parser/CodeRange";
 import { StoreOptions } from "vuex";
+import { Participant } from "@/parser/Participants";
 
 /*
  * RenderMode
@@ -173,7 +174,7 @@ const Store = (): StoreOptions<StoreState> => {
           name,
           color,
           participant,
-        }: { name: string; color: string; participant: any },
+        }: { name: string; color: string; participant: Participant },
       ) {
         console.log("updateParticipantColor mutation called", { name, color });
 
@@ -186,7 +187,13 @@ const Store = (): StoreOptions<StoreState> => {
         }
 
         // Get the position of the explicit declaration
-        const position = participant.position;
+        const positions = Array.from(participant.positions);
+        const position =
+          positions.length > 0
+            ? positions.reduce((prev, current) =>
+                prev[0] < current[0] ? prev : current,
+              )
+            : undefined;
         console.log("position:", position);
         if (!position || !Array.isArray(position)) {
           console.warn(`No valid position found for participant: ${name}`);
@@ -214,7 +221,7 @@ const Store = (): StoreOptions<StoreState> => {
           state.code.substring(end);
 
         // Notify of content change
-        state.onContentChange?.();
+        state.onContentChange?.(state.code);
       },
     },
     actions: {

From 7056eb52208868e5f592d9bee886ea9adb02433e Mon Sep 17 00:00:00 2001
From: MrCoder <eagle.xiao@gmail.com>
Date: Fri, 11 Apr 2025 08:33:15 +1000
Subject: [PATCH 04/10] It renders correctly but not updating the code editor.

---
 .../SeqDiagram/LifeLineLayer/ColorPicker.vue  |  2 +-
 .../LifeLineLayer/LifeLineLayer.vue           |  1 +
 src/parser/Participants.ts                    | 21 ++++
 src/parser/ToCollector.js                     | 73 ++++++++++----
 src/parser/index.js                           |  7 +-
 src/store/Store.ts                            | 72 +++++++++-----
 test/unit/parser/to-collector.spec.js         | 97 +++++++++++++++----
 7 files changed, 211 insertions(+), 62 deletions(-)

diff --git a/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/ColorPicker.vue b/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/ColorPicker.vue
index a9ed9fc8b..7037a21d0 100644
--- a/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/ColorPicker.vue
+++ b/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/ColorPicker.vue
@@ -58,7 +58,7 @@ export default {
     const isOpen = ref(false);
     const colors = [
       "#006837",
-      "#00A651",
+      "#00c875",
       "#BFB41B",
       "#FFC20E",
       "#F15A24",
diff --git a/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/LifeLineLayer.vue b/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/LifeLineLayer.vue
index c7b59c6b4..7d66dff9c 100644
--- a/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/LifeLineLayer.vue
+++ b/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/LifeLineLayer.vue
@@ -34,6 +34,7 @@
         <life-line
           :key="index"
           v-if="child instanceof ParticipantContext"
+          :context="child"
           :entity="getParticipantEntity(child)"
           :renderParticipants="renderParticipants"
           :renderLifeLine="renderLifeLine"
diff --git a/src/parser/Participants.ts b/src/parser/Participants.ts
index d361348fa..33fd3d0a5 100644
--- a/src/parser/Participants.ts
+++ b/src/parser/Participants.ts
@@ -1,5 +1,19 @@
 export type Position = [number, number];
 
+interface FieldDeclaration {
+  rawText: string;
+  position?: Position;
+}
+
+interface ParticipantDeclaration {
+  participantType?: FieldDeclaration;
+  stereotype?: FieldDeclaration;
+  name: FieldDeclaration;
+  width?: FieldDeclaration;
+  label?: FieldDeclaration;
+  color?: FieldDeclaration;
+}
+
 interface ParticipantOptions {
   isStarter?: boolean;
   stereotype?: string;
@@ -13,6 +27,7 @@ interface ParticipantOptions {
   assignee?: string;
   position?: Position;
   assigneePosition?: Position;
+  declaration?: ParticipantDeclaration;
 }
 
 export const blankParticipant = {
@@ -29,6 +44,7 @@ export const blankParticipant = {
   assignee: undefined,
   positions: new Set(),
   assigneePositions: new Set(),
+  declaration: undefined,
 };
 
 export class Participant {
@@ -45,6 +61,7 @@ export class Participant {
   private assignee: string | undefined;
   positions: Set<Position> = new Set();
   assigneePositions: Set<Position> = new Set();
+  declaration?: ParticipantDeclaration;
 
   constructor(name: string, options: ParticipantOptions) {
     this.name = name;
@@ -63,6 +80,7 @@ export class Participant {
       color,
       comment,
       assignee,
+      declaration,
     } = options;
     this.stereotype ||= stereotype;
     this.width ||= width;
@@ -74,7 +92,9 @@ export class Participant {
     this.color ||= color;
     this.comment ||= comment;
     this.assignee ||= assignee;
+    this.declaration ||= declaration;
   }
+
   public AddPosition(position: Position) {
     this.positions.add(position);
   }
@@ -94,6 +114,7 @@ export class Participant {
       assignee: this.assignee,
       positions: this.positions,
       assigneePositions: this.assigneePositions,
+      declaration: this.declaration,
     };
   }
 }
diff --git a/src/parser/ToCollector.js b/src/parser/ToCollector.js
index 571973c81..2989b0342 100644
--- a/src/parser/ToCollector.js
+++ b/src/parser/ToCollector.js
@@ -11,33 +11,69 @@ const ToCollector = new sequenceParserListener();
 // 1. Later declaration win
 // 2. Participant declaration overwrite cannot be overwritten by To or Starter
 const onParticipant = function (ctx) {
-  // if(!(ctx?.name())) return;
   if (isBlind) return;
-  const type = ctx?.participantType()?.getFormattedText().replace("@", "");
-  const participant =
-    ctx?.name()?.getFormattedText() || "Missing `Participant`";
-  const stereotype = ctx.stereotype()?.name()?.getFormattedText();
-  const width =
-    (ctx.width && ctx.width() && Number.parseInt(ctx.width().getText())) ||
-    undefined;
+  const typeCtx = ctx?.participantType();
+  const type = typeCtx?.getFormattedText().replace("@", "");
+  const nameCtx = ctx?.name();
+  const participant = nameCtx?.getFormattedText() || "Missing `Participant`";
+  const stereotypeCtx = ctx.stereotype()?.name();
+  const stereotype = stereotypeCtx?.getFormattedText();
+  const widthCtx = ctx.width && ctx.width();
+  const width = widthCtx && Number.parseInt(widthCtx.getText());
   const labelCtx = ctx.label && ctx.label();
   const label = labelCtx?.name()?.getFormattedText();
   const explicit = true;
   const color = ctx.COLOR()?.getText();
   const comment = ctx.getComment();
-  const nameCtx = ctx.name();
-  let start, end;
 
-  // When label is present, it means we edit label in diagram and update its code regardless of the occurrence of the participant name
+  const declaration = {
+    name: {
+      rawText: nameCtx?.getText() || "Missing `Participant`",
+      position: nameCtx
+        ? [nameCtx.start.start, nameCtx.stop.stop + 1]
+        : undefined,
+    },
+  };
+
+  if (typeCtx) {
+    declaration.participantType = {
+      rawText: typeCtx.getText(),
+      position: [typeCtx.start.start, typeCtx.stop.stop + 1],
+    };
+  }
+
+  if (stereotypeCtx) {
+    declaration.stereotype = {
+      rawText: stereotypeCtx.getText(),
+      position: [stereotypeCtx.start.start, stereotypeCtx.stop.stop + 1],
+    };
+  }
+
+  if (widthCtx) {
+    declaration.width = {
+      rawText: widthCtx.getText(),
+      position: [widthCtx.start.start, widthCtx.stop.stop + 1],
+    };
+  }
+
   if (labelCtx) {
     const labelNameCtx = labelCtx.name();
     if (labelNameCtx) {
-      start = labelNameCtx.start.start;
-      end = labelNameCtx.stop.stop + 1;
+      declaration.label = {
+        rawText: labelNameCtx.getText(),
+        position: [labelNameCtx.start.start, labelNameCtx.stop.stop + 1],
+      };
     }
-  } else if (nameCtx) {
-    start = nameCtx.start.start;
-    end = nameCtx.stop.stop + 1;
+  }
+
+  if (color) {
+    declaration.color = {
+      rawText: color,
+      position: [
+        ctx.COLOR().symbol.start.start,
+        ctx.COLOR().symbol.stop.stop + 1,
+      ],
+    };
   }
 
   participants.Add(participant, {
@@ -50,7 +86,10 @@ const onParticipant = function (ctx) {
     explicit,
     color,
     comment,
-    position: [start, end],
+    declaration,
+    position: declaration.label
+      ? declaration.label.position
+      : declaration.name.position,
   });
 };
 ToCollector.enterParticipant = onParticipant;
diff --git a/src/parser/index.js b/src/parser/index.js
index 4f2a10536..f3b86027f 100644
--- a/src/parser/index.js
+++ b/src/parser/index.js
@@ -35,10 +35,13 @@ function rootContext(code) {
   return parser._syntaxErrors ? null : parser.prog();
 }
 
+antlr4.ParserRuleContext.prototype.getRawText = function () {
+  return this.parser.getTokenStream().getText(this.getSourceInterval());
+};
+
 antlr4.ParserRuleContext.prototype.getFormattedText = function () {
-  const code = this.parser.getTokenStream().getText(this.getSourceInterval());
   // remove extra quotes, spaces and new lines
-  return formatText(code);
+  return formatText(this.getRawText());
 };
 
 // Comment is where users have the most flexibility. The parser should make minimal assumptions about
diff --git a/src/store/Store.ts b/src/store/Store.ts
index c7f71f848..fcbffa5b5 100644
--- a/src/store/Store.ts
+++ b/src/store/Store.ts
@@ -150,6 +150,25 @@ const Store = (): StoreOptions<StoreState> => {
           scoped: payload,
         });
       },
+      updateParticipant: function (
+        state: any,
+        payload: { participant: Participant; color?: string },
+      ) {
+        const { participant, color } = payload;
+        // Get the original text range
+        const range = participant.getRange();
+        if (!range) return;
+
+        // Get the text content and update it with the new color
+        const originalText = state.code.substring(range.start, range.end);
+        const updatedText = updateParticipantColorInText(originalText, color);
+
+        // Replace the text in the code
+        state.code =
+          state.code.substring(0, range.start) +
+          updatedText +
+          state.code.substring(range.end);
+      },
       eventEmit: function (state: any, payload: any) {
         state.onEventEmit?.(payload.event, payload.data);
       },
@@ -174,7 +193,7 @@ const Store = (): StoreOptions<StoreState> => {
           name,
           color,
           participant,
-        }: { name: string; color: string; participant: Participant },
+        }: { name: string; color?: string; participant: Participant },
       ) {
         console.log("updateParticipantColor mutation called", { name, color });
 
@@ -186,42 +205,49 @@ const Store = (): StoreOptions<StoreState> => {
           return;
         }
 
-        // Get the position of the explicit declaration
-        const positions = Array.from(participant.positions);
-        const position =
-          positions.length > 0
-            ? positions.reduce((prev, current) =>
-                prev[0] < current[0] ? prev : current,
-              )
-            : undefined;
-        console.log("position:", position);
-        if (!position || !Array.isArray(position)) {
-          console.warn(`No valid position found for participant: ${name}`);
+        // Get the declaration and its position
+        const declaration = participant.declaration;
+        if (!declaration?.name?.position) {
+          console.warn(`No valid declaration found for participant: ${name}`);
           return;
         }
 
-        // Extract the start and end positions
+        // Extract the start and end positions from the declaration
+        const position =
+          declaration.label?.position || declaration.name.position;
         const [start, end] = position;
 
         // Get the participant declaration text
         const declarationText = state.code.substring(start, end);
         console.log("declarationText:", declarationText);
 
-        // Create updated text with color
-        const updatedText = updateParticipantColorInText(
+        // Update the color in the code
+        const beforeCode = state.code.substring(0, start);
+        const afterCode = state.code.substring(end);
+        const updatedDeclarationText = updateParticipantColorInText(
           declarationText,
           color,
         );
-        console.log("updatedText:", updatedText);
+        state.code = beforeCode + updatedDeclarationText + afterCode;
 
-        // Replace the declaration in the code
-        state.code =
-          state.code.substring(0, start) +
-          updatedText +
-          state.code.substring(end);
+        // Update the participant's color property
+        participant.mergeOptions({ color });
 
-        // Notify of content change
-        state.onContentChange?.(state.code);
+        // Update the declaration's color field
+        if (color) {
+          participant.declaration = {
+            ...declaration,
+            color: {
+              rawText: color,
+              position: [end, end + color.length],
+            },
+          };
+        } else {
+          // Remove color from declaration if color is being removed
+          const { color: color, ...rest } = declaration;
+          console.debug("Removing color from declaration:", color);
+          participant.declaration = rest;
+        }
       },
     },
     actions: {
diff --git a/test/unit/parser/to-collector.spec.js b/test/unit/parser/to-collector.spec.js
index 9093e1a1a..bfa5f24bb 100644
--- a/test/unit/parser/to-collector.spec.js
+++ b/test/unit/parser/to-collector.spec.js
@@ -40,6 +40,20 @@ test("smoke test2", () => {
       [32, 37],
       [56, 61],
     ]),
+    declaration: {
+      name: {
+        rawText: '"B 1"',
+        position: [32, 37],
+      },
+      stereotype: {
+        rawText: "A",
+        position: [28, 29],
+      },
+      width: {
+        rawText: "1024",
+        position: [38, 42],
+      },
+    },
   });
 });
 
@@ -50,11 +64,29 @@ describe("Plain participants", () => {
       // `A` will be parsed as a participant which matches `participant EOF`
       let participants = getParticipants(code);
       expect(participants.Size()).toBe(1);
-      expect(participants.Get("A").width).toBeUndefined();
+      expect(participants.Get("A").width).toBeNull();
       expect(participants.Get("A").stereotype).toBeUndefined();
     },
   );
 });
+
+describe("With color", () => {
+  test.each(["A #000000", "A   #000000", "<<s>> A #000000"])(
+    "get participant with color and declaration",
+    (code) => {
+      let participants = getParticipants(code);
+      const participant = participants.Get("A");
+      expect(participant.color).toBe("#000000");
+      expect(participant.declaration).toBeDefined();
+      expect(participant.declaration.name.rawText).toBe("A");
+      expect(participant.declaration.color.rawText).toBe("#000000");
+      if (code.includes("<<s>>")) {
+        expect(participant.declaration.stereotype.rawText).toBe("s");
+      }
+    },
+  );
+});
+
 describe("with width", () => {
   test.each([
     ["A 1024", 1024],
@@ -133,32 +165,38 @@ describe("with participantType", () => {
     ["@actor A\nA", "actor"],
     ["@Actor A", "Actor"],
     ["@database A", "database"],
-  ])("code:%s => participantType:%s", (code, participantType) => {
+  ])("code:%s => type:%s", (code, type) => {
     let participants = getParticipants(code);
     expect(participants.Size()).toBe(1);
     expect(participants.Get("A").name).toBe("A");
-    expect(participants.Get("A").type).toBe(participantType);
+    expect(participants.Get("A").type).toBe(type);
   });
 });
 
-function getParticipants(code) {
-  let rootContext = RootContext(code);
-  return ToCollector.getParticipants(rootContext);
-}
-
-describe("Add Starter to participants", () => {
-  test("Empty context", () => {
-    let rootContext = RootContext("");
-    const participants = ToCollector.getParticipants(rootContext);
-    expect(participants.Size()).toBe(0);
+describe("with participantType and declaration", () => {
+  test.each([
+    ["@actor A", "actor"],
+    ["@actor A\nA", "actor"],
+    ["@Actor A", "Actor"],
+  ])("code:%s => type:%s", (code, type) => {
+    let participants = getParticipants(code);
+    const participant = participants.Get("A");
+    expect(participant.type).toBe(type);
+    expect(participant.declaration).toBeDefined();
+    expect(participant.declaration.participantType.rawText).toBe("@" + type);
+    expect(participant.declaration.name.rawText).toBe("A");
   });
+});
 
-  test("A B->A.m", () => {
-    let rootContext = RootContext("A B B->A.m");
-    const participants = ToCollector.getParticipants(rootContext);
-    expect(participants.Size()).toBe(2);
-    expect(participants.Get("B").isStarter).toBeFalsy();
-    expect(participants.Names()).toStrictEqual(["A", "B"]);
+describe("without starter", () => {
+  test.each([
+    ["A.method", "A", 1],
+    ["@Starter(A)", "A", 1],
+  ])("code:%s => participant:%s", (code, participant, numberOfParticipants) => {
+    // `A` will be parsed as a participant which matches `participant EOF`
+    let participants = getParticipants(code);
+    expect(participants.Size()).toBe(numberOfParticipants);
+    expect(participants.Get("A").name).toBe(participant);
   });
 });
 
@@ -359,3 +397,24 @@ describe("enterRef", () => {
     expect(participants.GetPositions("C")).toEqual(new Set([[12, 13]]));
   });
 });
+
+function getParticipants(code) {
+  let rootContext = RootContext(code);
+  return ToCollector.getParticipants(rootContext);
+}
+
+describe("Add Starter to participants", () => {
+  test("Empty context", () => {
+    let rootContext = RootContext("");
+    const participants = ToCollector.getParticipants(rootContext);
+    expect(participants.Size()).toBe(0);
+  });
+
+  test("A B->A.m", () => {
+    let rootContext = RootContext("A B B->A.m");
+    const participants = ToCollector.getParticipants(rootContext);
+    expect(participants.Size()).toBe(2);
+    expect(participants.Get("B").isStarter).toBeFalsy();
+    expect(participants.Names()).toStrictEqual(["A", "B"]);
+  });
+});

From 3094e606ac853d4a4fd807bf23d7b484399fe407 Mon Sep 17 00:00:00 2001
From: MrCoder <eagle.xiao@gmail.com>
Date: Fri, 11 Apr 2025 10:47:25 +1000
Subject: [PATCH 05/10] It updates the code editor now.

---
 src/parser/Participants.ts |   2 +-
 src/parser/ToCollector.js  |   5 +-
 src/store/Store.spec.ts    | 183 ++++++++++++++++++++++++++++++++++++-
 src/store/Store.ts         |  44 +++++----
 4 files changed, 209 insertions(+), 25 deletions(-)

diff --git a/src/parser/Participants.ts b/src/parser/Participants.ts
index 33fd3d0a5..95d1c7848 100644
--- a/src/parser/Participants.ts
+++ b/src/parser/Participants.ts
@@ -56,7 +56,7 @@ export class Participant {
   isStarter: boolean | undefined;
   label: string | undefined;
   private type: string | undefined;
-  private color: string | undefined;
+  color: string | undefined;
   private comment: string | undefined;
   private assignee: string | undefined;
   positions: Set<Position> = new Set();
diff --git a/src/parser/ToCollector.js b/src/parser/ToCollector.js
index 2989b0342..d42d2f8c8 100644
--- a/src/parser/ToCollector.js
+++ b/src/parser/ToCollector.js
@@ -69,10 +69,7 @@ const onParticipant = function (ctx) {
   if (color) {
     declaration.color = {
       rawText: color,
-      position: [
-        ctx.COLOR().symbol.start.start,
-        ctx.COLOR().symbol.stop.stop + 1,
-      ],
+      position: [ctx.COLOR().symbol.start, ctx.COLOR().symbol.stop + 1],
     };
   }
 
diff --git a/src/store/Store.spec.ts b/src/store/Store.spec.ts
index 63b4968b4..9180eab3c 100644
--- a/src/store/Store.spec.ts
+++ b/src/store/Store.spec.ts
@@ -1,8 +1,183 @@
-import Store from "./Store";
+import { describe, expect, test, vi } from "vitest";
+import Store, { RenderMode, updateParticipantColorInText } from "./Store";
+import { RootContext } from "@/parser";
+import ToCollector from "@/parser/ToCollector";
 
 describe("Store", () => {
-  it("should create an instance", () => {
-    expect(Store().state.showTips).toBeDefined();
-    expect(Store().state.showTips).toBeFalsy();
+  describe("updateParticipantColor", () => {
+    test("should update color for explicitly declared participant", () => {
+      // Setup initial state
+      const code = "A #000000";
+      const rootContext = RootContext(code);
+      // @ts-ignore
+      const participants = ToCollector.getParticipants(rootContext);
+      const participant = participants.Get("A");
+      const state = {
+        code,
+        participants,
+        mode: RenderMode.Static,
+        scale: 1,
+        selected: [],
+        cursor: null,
+        showTips: false,
+        numbering: false,
+        onElementClick: vi.fn(),
+      };
+
+      // Get the store mutations
+      const { mutations } = Store();
+
+      // Update color
+      mutations.updateParticipantColor(state, {
+        name: "A",
+        color: "#111111",
+        participant,
+      });
+
+      // Check code was updated
+      expect(state.code).toBe("A #111111");
+
+      // Check participant properties were updated
+      expect(participant.color).toBe("#111111");
+
+      // Check declaration structure was updated
+      expect(participant.declaration).toBeDefined();
+      expect(participant.declaration.name.rawText).toBe("A");
+      expect(participant.declaration.color.rawText).toBe("#111111");
+      expect(participant.declaration.color.position).toEqual([2, 9]);
+    });
+
+    test("should remove color when color parameter is undefined", () => {
+      // Setup initial state with colored participant
+      const code = "A #000000";
+      const rootContext = RootContext(code);
+      const participants = ToCollector.getParticipants(rootContext);
+      const participant = participants.Get("A");
+      const state = {
+        code,
+        participants,
+        mode: RenderMode.FULL,
+        scale: 1,
+        selected: [],
+        cursor: null,
+        showTips: false,
+        numbering: false,
+        onElementClick: vi.fn(),
+      };
+
+      // Get the store mutations
+      const { mutations } = Store();
+
+      // Remove color
+      mutations.updateParticipantColor(state, {
+        name: "A",
+        color: undefined,
+        participant,
+      });
+
+      // Check code was updated
+      expect(state.code).toBe("A");
+
+      // Check participant properties were updated
+      expect(participant.color).toBeUndefined();
+
+      // Check declaration structure was updated
+      expect(participant.declaration).toBeDefined();
+      expect(participant.declaration.name.rawText).toBe("A");
+      expect(participant.declaration.color).toBeUndefined();
+    });
+
+    test("should not update color for implicit participant", () => {
+      // Setup initial state with implicit participant
+      const code = "A->B"; // B is implicit
+      const rootContext = RootContext(code);
+      const participants = ToCollector.getParticipants(rootContext);
+      const participant = participants.Get("B");
+      const state = {
+        code,
+        participants,
+        mode: RenderMode.FULL,
+        scale: 1,
+        selected: [],
+        cursor: null,
+        showTips: false,
+        numbering: false,
+        onElementClick: vi.fn(),
+      };
+
+      // Get the store mutations
+      const { mutations } = Store();
+
+      // Try to update color of implicit participant
+      mutations.updateParticipantColor(state, {
+        name: "B",
+        color: "#111111",
+        participant,
+      });
+
+      // Check code wasn't modified
+      expect(state.code).toBe("A->B");
+
+      // Check participant wasn't modified
+      expect(participant.color).toBeUndefined();
+      expect(participant.explicit).toBeFalsy();
+    });
+
+    test("should handle participant with label", () => {
+      // Setup initial state with labeled participant
+      const code = '"User A" #000000';
+      const rootContext = RootContext(code);
+      const participants = ToCollector.getParticipants(rootContext);
+      const participant = participants.Get("User A");
+      const state = {
+        code,
+        participants,
+        mode: RenderMode.FULL,
+        scale: 1,
+        selected: [],
+        cursor: null,
+        showTips: false,
+        numbering: false,
+        onElementClick: vi.fn(),
+      };
+
+      // Get the store mutations
+      const { mutations } = Store();
+
+      // Update color
+      mutations.updateParticipantColor(state, {
+        name: "User A",
+        color: "#111111",
+        participant,
+      });
+
+      // Check code was updated
+      expect(state.code).toBe('"User A" #111111');
+
+      // Check participant properties were updated
+      expect(participant.color).toBe("#111111");
+
+      // Check declaration structure was updated
+      expect(participant.declaration).toBeDefined();
+      expect(participant.declaration.name.rawText).toBe('"User A"');
+      expect(participant.declaration.color.rawText).toBe("#111111");
+    });
+  });
+
+  describe("updateParticipantColorInText", () => {
+    test.each([
+      ["A", "#000000", "A #000000"],
+      ["B #000000", "#111111", "B #111111"],
+      ["C #000000", undefined, "C"],
+      ['"D"', "#000000", '"D" #000000'],
+      ['"E" #000000', "#111111", '"E" #111111'],
+      ["<<interface>> F #000000", "#111111", "<<interface>> F #111111"],
+      ["G   #000000", "#111111", "G #111111"], // Multiple spaces
+      ["H #000000 ", "#111111", "H #111111"], // Trailing space
+      ["I #000000\n", "#111111", "I #111111"], // Trailing newline
+      ["J #abcdef", "#111111", "J #111111"], // Different color format
+    ])("should update color in '%s' to '%s'", (text, color, expected) => {
+      expect(updateParticipantColorInText(text, color)).toBe(expected);
+    });
   });
 });
diff --git a/src/store/Store.ts b/src/store/Store.ts
index fcbffa5b5..17521ccb0 100644
--- a/src/store/Store.ts
+++ b/src/store/Store.ts
@@ -187,7 +187,7 @@ const Store = (): StoreOptions<StoreState> => {
       diagramElement: function (state: any, payload: any) {
         state.diagramElement = payload;
       },
-      updateParticipantColor: function (
+      updateParticipantColor(
         state,
         {
           name,
@@ -196,7 +196,6 @@ const Store = (): StoreOptions<StoreState> => {
         }: { name: string; color?: string; participant: Participant },
       ) {
         console.log("updateParticipantColor mutation called", { name, color });
-
         console.log("participant:", participant);
 
         // Only update color if the participant was explicitly declared
@@ -212,18 +211,25 @@ const Store = (): StoreOptions<StoreState> => {
           return;
         }
 
-        // Extract the start and end positions from the declaration
-        const position =
+        // Find the end of the declaration (either current color position or name position)
+        const currentColorPos = declaration.color?.position;
+        const namePos =
           declaration.label?.position || declaration.name.position;
-        const [start, end] = position;
+        const declarationEnd = currentColorPos
+          ? currentColorPos[1]
+          : namePos[1];
+        const declarationStart = namePos[0];
 
-        // Get the participant declaration text
-        const declarationText = state.code.substring(start, end);
+        // Get the full declaration text including any existing color
+        const declarationText = state.code.substring(
+          declarationStart,
+          declarationEnd,
+        );
         console.log("declarationText:", declarationText);
 
         // Update the color in the code
-        const beforeCode = state.code.substring(0, start);
-        const afterCode = state.code.substring(end);
+        const beforeCode = state.code.substring(0, declarationStart);
+        const afterCode = state.code.substring(declarationEnd);
         const updatedDeclarationText = updateParticipantColorInText(
           declarationText,
           color,
@@ -231,23 +237,26 @@ const Store = (): StoreOptions<StoreState> => {
         state.code = beforeCode + updatedDeclarationText + afterCode;
 
         // Update the participant's color property
-        participant.mergeOptions({ color });
+        participant.color = color;
 
         // Update the declaration's color field
         if (color) {
+          const newColorStart =
+            declarationStart + updatedDeclarationText.lastIndexOf(color);
           participant.declaration = {
             ...declaration,
             color: {
               rawText: color,
-              position: [end, end + color.length],
+              position: [newColorStart, newColorStart + color.length],
             },
           };
         } else {
           // Remove color from declaration if color is being removed
-          const { color: color, ...rest } = declaration;
-          console.debug("Removing color from declaration:", color);
+          const { color: _, ...rest } = declaration;
+          console.debug("Removing color from declaration:", _);
           participant.declaration = rest;
         }
+        state.onContentChange?.(state.code);
       },
     },
     actions: {
@@ -270,9 +279,12 @@ const Store = (): StoreOptions<StoreState> => {
 };
 
 // Helper function to update color in participant declaration text
-function updateParticipantColorInText(text: string, color?: string): string {
-  // Remove any existing color (format: #RRGGBB)
-  const baseText = text.replace(/\s+#[0-9a-fA-F]{6}\b/, "");
+export function updateParticipantColorInText(
+  text: string,
+  color?: string,
+): string {
+  // Remove any existing color (format: #RRGGBB) and trailing whitespace/newlines
+  const baseText = text.replace(/#[0-9a-fA-F]{6}/g, "").trim();
 
   // Add new color if provided
   return color ? `${baseText} ${color}` : baseText;

From 6b5070e893ec0624b2fc3ac0d1a005db80f006fb Mon Sep 17 00:00:00 2001
From: MrCoder <eagle.xiao@gmail.com>
Date: Fri, 11 Apr 2025 17:52:36 +1000
Subject: [PATCH 06/10] Refactored how to update participant color.

---
 .../SeqDiagram/LifeLineLayer/Participant.vue  |  3 +-
 src/parser/Participants.ts                    |  2 +
 src/parser/ToCollector.js                     |  8 +-
 src/store/Store.spec.ts                       | 91 ++++++++++---------
 src/store/Store.ts                            | 55 +++--------
 5 files changed, 66 insertions(+), 93 deletions(-)

diff --git a/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/Participant.vue b/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/Participant.vue
index 9940b558e..861588a47 100644
--- a/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/Participant.vue
+++ b/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/Participant.vue
@@ -75,8 +75,7 @@ export default {
     const participantColor = computed({
       get: () => props.entity.color,
       set: (value) => {
-        store.commit("updateParticipantColor", {
-          name: props.entity.name,
+        store.dispatch("updateParticipantColor", {
           color: value,
           participant: store.getters.participants.Get(props.entity.name),
         });
diff --git a/src/parser/Participants.ts b/src/parser/Participants.ts
index 95d1c7848..1132fd465 100644
--- a/src/parser/Participants.ts
+++ b/src/parser/Participants.ts
@@ -12,6 +12,8 @@ interface ParticipantDeclaration {
   width?: FieldDeclaration;
   label?: FieldDeclaration;
   color?: FieldDeclaration;
+  start?: number;
+  stop?: number;
 }
 
 interface ParticipantOptions {
diff --git a/src/parser/ToCollector.js b/src/parser/ToCollector.js
index d42d2f8c8..9f5bea4ed 100644
--- a/src/parser/ToCollector.js
+++ b/src/parser/ToCollector.js
@@ -29,9 +29,7 @@ const onParticipant = function (ctx) {
   const declaration = {
     name: {
       rawText: nameCtx?.getText() || "Missing `Participant`",
-      position: nameCtx
-        ? [nameCtx.start.start, nameCtx.stop.stop + 1]
-        : undefined,
+      position: [nameCtx?.start.start, nameCtx?.stop.stop + 1],
     },
   };
 
@@ -73,6 +71,10 @@ const onParticipant = function (ctx) {
     };
   }
 
+  declaration.start = ctx.start.start;
+
+  declaration.stop = ctx.stop.stop + 1;
+
   participants.Add(participant, {
     isStarter: false,
     type,
diff --git a/src/store/Store.spec.ts b/src/store/Store.spec.ts
index 9180eab3c..fea53866a 100644
--- a/src/store/Store.spec.ts
+++ b/src/store/Store.spec.ts
@@ -24,27 +24,26 @@ describe("Store", () => {
         onElementClick: vi.fn(),
       };
 
-      // Get the store mutations
-      const { mutations } = Store();
+      // Get the store actions
+      const { actions } = Store();
+      const context = {
+        state,
+        commit: (type: string, payload: any) => {
+          if (type === "code") {
+            state.code = payload;
+          }
+        },
+      };
 
       // Update color
-      mutations.updateParticipantColor(state, {
+      actions.updateParticipantColor(context, {
         name: "A",
         color: "#111111",
         participant,
       });
 
-      // Check code was updated
+      // Only check code was updated - participant updates happen through re-parsing
       expect(state.code).toBe("A #111111");
-
-      // Check participant properties were updated
-      expect(participant.color).toBe("#111111");
-
-      // Check declaration structure was updated
-      expect(participant.declaration).toBeDefined();
-      expect(participant.declaration.name.rawText).toBe("A");
-      expect(participant.declaration.color.rawText).toBe("#111111");
-      expect(participant.declaration.color.position).toEqual([2, 9]);
     });
 
     test("should remove color when color parameter is undefined", () => {
@@ -65,26 +64,26 @@ describe("Store", () => {
         onElementClick: vi.fn(),
       };
 
-      // Get the store mutations
-      const { mutations } = Store();
+      // Get the store actions
+      const { actions } = Store();
+      const context = {
+        state,
+        commit: (type: string, payload: any) => {
+          if (type === "code") {
+            state.code = payload;
+          }
+        },
+      };
 
       // Remove color
-      mutations.updateParticipantColor(state, {
+      actions.updateParticipantColor(context, {
         name: "A",
         color: undefined,
         participant,
       });
 
-      // Check code was updated
+      // Only check code was updated - participant updates happen through re-parsing
       expect(state.code).toBe("A");
-
-      // Check participant properties were updated
-      expect(participant.color).toBeUndefined();
-
-      // Check declaration structure was updated
-      expect(participant.declaration).toBeDefined();
-      expect(participant.declaration.name.rawText).toBe("A");
-      expect(participant.declaration.color).toBeUndefined();
     });
 
     test("should not update color for implicit participant", () => {
@@ -105,11 +104,19 @@ describe("Store", () => {
         onElementClick: vi.fn(),
       };
 
-      // Get the store mutations
-      const { mutations } = Store();
+      // Get the store actions
+      const { actions } = Store();
+      const context = {
+        state,
+        commit: (type: string, payload: any) => {
+          if (type === "code") {
+            state.code = payload;
+          }
+        },
+      };
 
       // Try to update color of implicit participant
-      mutations.updateParticipantColor(state, {
+      actions.updateParticipantColor(context, {
         name: "B",
         color: "#111111",
         participant,
@@ -117,10 +124,6 @@ describe("Store", () => {
 
       // Check code wasn't modified
       expect(state.code).toBe("A->B");
-
-      // Check participant wasn't modified
-      expect(participant.color).toBeUndefined();
-      expect(participant.explicit).toBeFalsy();
     });
 
     test("should handle participant with label", () => {
@@ -141,26 +144,26 @@ describe("Store", () => {
         onElementClick: vi.fn(),
       };
 
-      // Get the store mutations
-      const { mutations } = Store();
+      // Get the store actions
+      const { actions } = Store();
+      const context = {
+        state,
+        commit: (type: string, payload: any) => {
+          if (type === "code") {
+            state.code = payload;
+          }
+        },
+      };
 
       // Update color
-      mutations.updateParticipantColor(state, {
+      actions.updateParticipantColor(context, {
         name: "User A",
         color: "#111111",
         participant,
       });
 
-      // Check code was updated
+      // Only check code was updated - participant updates happen through re-parsing
       expect(state.code).toBe('"User A" #111111');
-
-      // Check participant properties were updated
-      expect(participant.color).toBe("#111111");
-
-      // Check declaration structure was updated
-      expect(participant.declaration).toBeDefined();
-      expect(participant.declaration.name.rawText).toBe('"User A"');
-      expect(participant.declaration.color.rawText).toBe("#111111");
     });
   });
 
diff --git a/src/store/Store.ts b/src/store/Store.ts
index 17521ccb0..e79f98de7 100644
--- a/src/store/Store.ts
+++ b/src/store/Store.ts
@@ -187,38 +187,25 @@ const Store = (): StoreOptions<StoreState> => {
       diagramElement: function (state: any, payload: any) {
         state.diagramElement = payload;
       },
+    },
+    actions: {
       updateParticipantColor(
-        state,
-        {
-          name,
-          color,
-          participant,
-        }: { name: string; color?: string; participant: Participant },
+        { commit, state },
+        { color, participant }: { color?: string; participant: Participant },
       ) {
-        console.log("updateParticipantColor mutation called", { name, color });
         console.log("participant:", participant);
 
         // Only update color if the participant was explicitly declared
-        if (!participant?.explicit) {
-          console.warn(`Cannot update color for implicit participant: ${name}`);
+        if (!participant?.explicit || !participant?.declaration) {
           return;
         }
 
         // Get the declaration and its position
         const declaration = participant.declaration;
-        if (!declaration?.name?.position) {
-          console.warn(`No valid declaration found for participant: ${name}`);
-          return;
-        }
 
         // Find the end of the declaration (either current color position or name position)
-        const currentColorPos = declaration.color?.position;
-        const namePos =
-          declaration.label?.position || declaration.name.position;
-        const declarationEnd = currentColorPos
-          ? currentColorPos[1]
-          : namePos[1];
-        const declarationStart = namePos[0];
+        const declarationStart = declaration.start;
+        const declarationEnd = declaration.stop;
 
         // Get the full declaration text including any existing color
         const declarationText = state.code.substring(
@@ -234,32 +221,12 @@ const Store = (): StoreOptions<StoreState> => {
           declarationText,
           color,
         );
-        state.code = beforeCode + updatedDeclarationText + afterCode;
+        const newCode = beforeCode + updatedDeclarationText + afterCode;
 
-        // Update the participant's color property
-        participant.color = color;
-
-        // Update the declaration's color field
-        if (color) {
-          const newColorStart =
-            declarationStart + updatedDeclarationText.lastIndexOf(color);
-          participant.declaration = {
-            ...declaration,
-            color: {
-              rawText: color,
-              position: [newColorStart, newColorStart + color.length],
-            },
-          };
-        } else {
-          // Remove color from declaration if color is being removed
-          const { color: _, ...rest } = declaration;
-          console.debug("Removing color from declaration:", _);
-          participant.declaration = rest;
-        }
-        state.onContentChange?.(state.code);
+        // Update code through mutation
+        commit("code", newCode);
+        state.onContentChange?.(newCode);
       },
-    },
-    actions: {
       // Why debounce is here instead of mutation 'code'?
       // Both code and cursor must be mutated together, especially during typing.
       updateCode: function ({ commit }: any, payload: any) {

From 112aaefe97e8ccb0beb615988ef1416520ec71f4 Mon Sep 17 00:00:00 2001
From: MrCoder <eagle.xiao@gmail.com>
Date: Fri, 11 Apr 2025 19:33:07 +1000
Subject: [PATCH 07/10] Adjust ColorPicker positioning and visibility behavior

---
 .../SeqDiagram/LifeLineLayer/Participant.vue          | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/Participant.vue b/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/Participant.vue
index 861588a47..38fff4960 100644
--- a/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/Participant.vue
+++ b/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/Participant.vue
@@ -14,7 +14,7 @@
       <div
         v-if="!!icon"
         v-html="icon"
-        class="h-6 w-6 mr-1 flex-shrink-0 [&>svg]:w-full [&>svg]:h-full"
+        class="h-6 w-6 flex-shrink-0 [&>svg]:w-full [&>svg]:h-full"
         :aria-description="`icon for ${entity.name}`"
       ></div>
 
@@ -22,10 +22,6 @@
         v-if="!isDefaultStarter"
         class="h-5 group flex flex-col justify-center"
       >
-        <ColorPicker
-          v-model="participantColor"
-          class="absolute -left-8 top-1/2 transform -translate-y-1/2"
-        />
         <!-- TODO: create a better solution for participant comments -->
         <!--      <span-->
         <!--        v-if="!!comment"-->
@@ -43,6 +39,11 @@
           :assigneePositions="assigneePositions"
         />
       </div>
+      <ColorPicker
+        v-if="!isDefaultStarter"
+        v-model="participantColor"
+        class="absolute top-full transform -translate-y-1/2"
+      />
     </div>
   </div>
 </template>

From c8b3a00d0a43d047832f3b677be8688a4be356e0 Mon Sep 17 00:00:00 2001
From: MrCoder <eagle.xiao@gmail.com>
Date: Fri, 11 Apr 2025 19:35:26 +1000
Subject: [PATCH 08/10] Update participant configuration

---
 .../DiagramFrame/SeqDiagram/LifeLineLayer/ColorPicker.vue       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/ColorPicker.vue b/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/ColorPicker.vue
index 7037a21d0..862a8168d 100644
--- a/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/ColorPicker.vue
+++ b/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/ColorPicker.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="relative inline-block">
+  <div class="inline-block">
     <button
       @click.stop="togglePicker"
       class="w-6 h-6 rounded border border-gray-300 flex items-center justify-center hover:ring-2 hover:ring-blue-200 transition-all"

From fa42813c1396adf1ca8ad363ae5d8d1df2644cce Mon Sep 17 00:00:00 2001
From: MrCoder <eagle.xiao@gmail.com>
Date: Fri, 11 Apr 2025 20:45:13 +1000
Subject: [PATCH 09/10] Improve ColorPicker positioning and visibility on hover

---
 .../DiagramFrame/SeqDiagram/LifeLineLayer/ColorPicker.vue     | 2 +-
 .../DiagramFrame/SeqDiagram/LifeLineLayer/Participant.vue     | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/ColorPicker.vue b/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/ColorPicker.vue
index 862a8168d..ff44556ee 100644
--- a/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/ColorPicker.vue
+++ b/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/ColorPicker.vue
@@ -22,7 +22,7 @@
     <div
       v-if="isOpen"
       v-click-outside="closePicker"
-      class="absolute z-50 mt-1 p-2 bg-white rounded-lg shadow-lg border border-gray-200 w-40"
+      class="absolute z-50 transform left-1/2 -translate-x-1/2 p-2 bg-white rounded-lg shadow-lg border border-gray-200 w-40"
     >
       <div class="grid grid-cols-4 gap-2">
         <button
diff --git a/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/Participant.vue b/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/Participant.vue
index 38fff4960..ad5754f6b 100644
--- a/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/Participant.vue
+++ b/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/Participant.vue
@@ -10,7 +10,7 @@
     }"
     @click="onSelect"
   >
-    <div class="flex items-center justify-center">
+    <div class="flex items-center justify-center group">
       <div
         v-if="!!icon"
         v-html="icon"
@@ -42,7 +42,7 @@
       <ColorPicker
         v-if="!isDefaultStarter"
         v-model="participantColor"
-        class="absolute top-full transform -translate-y-1/2"
+        class="absolute top-full transform -translate-y-1/2 invisible group-hover:visible"
       />
     </div>
   </div>

From 987d70434d45085b73f929b5ef7da0d9f882907b Mon Sep 17 00:00:00 2001
From: MrCoder <eagle.xiao@gmail.com>
Date: Fri, 11 Apr 2025 21:12:24 +1000
Subject: [PATCH 10/10] Enhance ColorPicker and Participant styles for improved
 visibility and interaction

---
 .../SeqDiagram/LifeLineLayer/ColorPicker.vue   | 18 ++++++++++++------
 .../SeqDiagram/LifeLineLayer/Participant.vue   | 15 ++++++++-------
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/ColorPicker.vue b/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/ColorPicker.vue
index ff44556ee..97bfb1d63 100644
--- a/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/ColorPicker.vue
+++ b/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/ColorPicker.vue
@@ -2,34 +2,40 @@
   <div class="inline-block">
     <button
       @click.stop="togglePicker"
-      class="w-6 h-6 rounded border border-gray-300 flex items-center justify-center hover:ring-2 hover:ring-blue-200 transition-all"
-      :style="{ backgroundColor: modelValue }"
+      class="w-6 h-6 rounded border border-gray-300 flex items-center justify-center"
+      :style="{ backgroundColor: modelValue, color: white }"
     >
       <svg
         v-if="!modelValue"
         xmlns="http://www.w3.org/2000/svg"
         class="h-4 w-4 text-gray-500"
-        viewBox="0 0 20 20"
+        viewBox="-4 -4 24 24"
         fill="currentColor"
+        role="presentation"
       >
         <path
+          fill="white"
           fill-rule="evenodd"
-          d="M4 2a2 2 0 00-2 2v11a3 3 0 106 0V4a2 2 0 00-2-2H4zm1 14a1 1 0 100-2 1 1 0 000 2zm5-1.757l4.9-4.9a2 2 0 000-2.828L13.485 5.1a2 2 0 00-2.828 0L10 5.757v8.486zM16 18H9.071l6-6H16a2 2 0 012 2v2a2 2 0 01-2 2z"
+          d="M5.655.095 13.78 8.22a.75.75 0 0 1 0 1.06l-5.616 5.617a2 2 0 0 1-2.828 0L.604 10.164a2 2 0 0 1 0-2.828L5.689 2.25 4.595 1.155zM6.75 3.31 2.06 8h9.38zm4.69 6.19H2.06l4.336 4.335a.5.5 0 0 0 .708 0z"
           clip-rule="evenodd"
         />
+        <path
+          fill="white"
+          d="M14.5 12a.75.75 0 0 0-.654.383v.002l-.003.003-.007.013-.026.046a16 16 0 0 0-.36.695 8 8 0 0 0-.283.642c-.068.176-.167.457-.167.716a1.5 1.5 0 0 0 3 0c0-.259-.1-.54-.167-.716a8 8 0 0 0-.284-.642 16 16 0 0 0-.36-.695l-.025-.046-.007-.013-.002-.004-.001-.001A.75.75 0 0 0 14.5 12"
+        />
       </svg>
     </button>
     <div
       v-if="isOpen"
       v-click-outside="closePicker"
-      class="absolute z-50 transform left-1/2 -translate-x-1/2 p-2 bg-white rounded-lg shadow-lg border border-gray-200 w-40"
+      class="absolute z-50 transform left-1/2 -translate-x-1/2 p-2 bg-white rounded border border-gray-200 w-40"
     >
       <div class="grid grid-cols-4 gap-2">
         <button
           v-for="color in colors"
           :key="color"
           @click.stop="selectColor(color)"
-          class="w-8 h-8 rounded hover:scale-110 transition-transform focus:outline-none focus:ring-2 focus:ring-blue-500"
+          class="w-8 h-8 rounded"
           :style="{ backgroundColor: color }"
           :title="color"
         ></button>
diff --git a/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/Participant.vue b/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/Participant.vue
index ad5754f6b..15b09edfc 100644
--- a/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/Participant.vue
+++ b/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/Participant.vue
@@ -1,16 +1,17 @@
 <template>
   <div
-    class="participant bg-skin-participant shadow-participant border-skin-participant text-skin-participant rounded text-base leading-4 flex flex-col justify-center z-10 h-10 top-8"
+    class="participant flex items-center bg-skin-participant shadow-participant border-skin-participant text-skin-participant rounded text-base leading-4 flex-col justify-center z-10 h-10 top-8 group"
     :class="{ selected: selected }"
     ref="participant"
     :style="{
       backgroundColor: isDefaultStarter ? undefined : backgroundColor,
+      borderColor: backgroundColor,
       color: isDefaultStarter ? undefined : color,
       transform: `translateY(${translate}px)`,
     }"
     @click="onSelect"
   >
-    <div class="flex items-center justify-center group">
+    <div class="flex items-center justify-center">
       <div
         v-if="!!icon"
         v-html="icon"
@@ -39,12 +40,12 @@
           :assigneePositions="assigneePositions"
         />
       </div>
-      <ColorPicker
-        v-if="!isDefaultStarter"
-        v-model="participantColor"
-        class="absolute top-full transform -translate-y-1/2 invisible group-hover:visible"
-      />
     </div>
+    <ColorPicker
+      v-if="!isDefaultStarter"
+      v-model="participantColor"
+      class="absolute rounded top-full transform -translate-y-1/2 invisible group-hover:visible bg-inherit"
+    />
   </div>
 </template>