From 0e693145da147a6c0dc5e2d479ffa8508bb0e76d Mon Sep 17 00:00:00 2001
From: phranck <phranck@phranck.dev>
Date: Mon, 9 Feb 2026 00:09:32 +0100
Subject: [PATCH] Fix: Correct syntax highlighter match group indices

The regex groups were misaligned:
- match[3] is KeyPath (\.self), not modifier
- match[4] is modifier (.bold), not keyword
- match[5] is keyword, not type
- match[6] is type (was missing)
---
 docs/src/components/react/CodePreview.tsx | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/docs/src/components/react/CodePreview.tsx b/docs/src/components/react/CodePreview.tsx
index cc79880..a0e611a 100644
--- a/docs/src/components/react/CodePreview.tsx
+++ b/docs/src/components/react/CodePreview.tsx
@@ -162,25 +162,32 @@ function tokenizeSegment(segment: string) {
         </span>
       );
     } else if (match[3]) {
-      // Modifier (.bold, .foregroundColor): add dot+name, then the ( back
+      // KeyPath (\.self)
       parts.push(
         <span key={match.index} style={{ color: HIGHLIGHT.modifier }}>
           {match[3]}
         </span>
       );
-      parts.push("(");
     } else if (match[4]) {
-      // Keyword
+      // Modifier (.bold, .foregroundColor): add dot+name, then the ( back
       parts.push(
-        <span key={match.index} style={{ color: HIGHLIGHT.keyword }}>
+        <span key={match.index} style={{ color: HIGHLIGHT.modifier }}>
           {match[4]}
         </span>
       );
+      parts.push("(");
     } else if (match[5]) {
+      // Keyword
+      parts.push(
+        <span key={match.index} style={{ color: HIGHLIGHT.keyword }}>
+          {match[5]}
+        </span>
+      );
+    } else if (match[6]) {
       // Type
       parts.push(
         <span key={match.index} style={{ color: HIGHLIGHT.type }}>
-          {match[5]}
+          {match[6]}
         </span>
       );
     }