Fix code highlighting and optimize category select

This commit introduces a batched debounce mechanism for managing user
selection state changes. It effectively reduces unnecessary processing
during rapid script checking, preventing multiple triggers for code
compilation and UI rendering.

Key improvements include:

- Enhanced performance, especially noticeable when selecting large
  categories. This update resolves minor UI freezes experienced when
  selecting categories with numerous scripts.
- Correction of a bug where the code area only highlighted the last
  selected script when multiple scripts were chosen.

Other changes include:

- Timing functions:
  - Create a `Timing` folder for `throttle` and the new
    `batchedDebounce` functions.
  - Move these functions to the application layer from the presentation
    layer, reflecting their application-wide use.
  - Refactor existing code for improved clarity, naming consistency, and
    adherence to new naming conventions.
  - Add missing unit tests.
- `UserSelection`:
  - State modifications in `UserSelection` now utilize a singular object
    inspired by the CQRS pattern, enabling batch updates and flexible
    change configurations, thereby simplifying change management.
- Remove the `I` prefix from related interfaces to align with new coding
  standards.
- Refactor related code for better testability in isolation with
  dependency injection.
- Repository:
  - Move repository abstractions to the application layer.
  - Improve repository abstraction to combine `ReadonlyRepository` and
    `MutableRepository` interfaces.
- E2E testing:
  - Introduce E2E tests to validate the correct batch selection
    behavior.
  - Add a specialized data attribute in `TheCodeArea.vue` for improved
    testability.
  - Reorganize shared Cypress functions for a more idiomatic Cypress
    approach.
  - Improve test documentation with related information.
- `SelectedScript`:
  - Create an abstraction for simplified testability.
  - Introduce `SelectedScriptStub` in tests as a substitute for the
    actual object.

src/application/Context/State/Code/ApplicationCode.ts

@@ -1,7 +1,7 @@
-import { SelectedScript } from '@/application/Context/State/Selection/SelectedScript';
-import { IReadOnlyUserSelection } from '@/application/Context/State/Selection/IUserSelection';
 import { EventSource } from '@/infrastructure/Events/EventSource';
 import { IScriptingDefinition } from '@/domain/IScriptingDefinition';
+import { SelectedScript } from '@/application/Context/State/Selection/Script/SelectedScript';
+import { ReadonlyScriptSelection } from '@/application/Context/State/Selection/Script/ScriptSelection';
 import { CodeChangedEvent } from './Event/CodeChangedEvent';
 import { CodePosition } from './Position/CodePosition';
 import { ICodeChangedEvent } from './Event/ICodeChangedEvent';
@@ -17,12 +17,12 @@ export class ApplicationCode implements IApplicationCode {
   private scriptPositions = new Map<SelectedScript, CodePosition>();
 
   constructor(
-    userSelection: IReadOnlyUserSelection,
+    selection: ReadonlyScriptSelection,
     private readonly scriptingDefinition: IScriptingDefinition,
     private readonly generator: IUserScriptGenerator = new UserScriptGenerator(),
   ) {
-    this.setCode(userSelection.selectedScripts);
-    userSelection.changed.on((scripts) => {
+    this.setCode(selection.selectedScripts);
+    selection.changed.on((scripts) => {
       this.setCode(scripts);
     });
   }

src/application/Context/State/Code/Event/CodeChangedEvent.ts

@@ -1,6 +1,6 @@
 import { IScript } from '@/domain/IScript';
 import { ICodePosition } from '@/application/Context/State/Code/Position/ICodePosition';
-import { SelectedScript } from '../../Selection/SelectedScript';
+import { SelectedScript } from '@/application/Context/State/Selection/Script/SelectedScript';
 import { ICodeChangedEvent } from './ICodeChangedEvent';
 
 export class CodeChangedEvent implements ICodeChangedEvent {
@@ -36,7 +36,14 @@ export class CodeChangedEvent implements ICodeChangedEvent {
   }
 
   public getScriptPositionInCode(script: IScript): ICodePosition {
-    const position = this.scripts.get(script);
+    return this.getPositionById(script.id);
+  }
+
+  private getPositionById(scriptId: string): ICodePosition {
+    const position = [...this.scripts.entries()]
+      .filter(([s]) => s.id === scriptId)
+      .map(([, pos]) => pos)
+      .at(0);
     if (!position) {
       throw new Error('Unknown script: Position could not be found for the script');
     }

src/application/Context/State/Code/Event/ICodeChangedEvent.ts

@@ -3,9 +3,9 @@ import { ICodePosition } from '@/application/Context/State/Code/Position/ICodePo
 
 export interface ICodeChangedEvent {
   readonly code: string;
-  addedScripts: ReadonlyArray<IScript>;
-  removedScripts: ReadonlyArray<IScript>;
-  changedScripts: ReadonlyArray<IScript>;
+  readonly addedScripts: ReadonlyArray<IScript>;
+  readonly removedScripts: ReadonlyArray<IScript>;
+  readonly changedScripts: ReadonlyArray<IScript>;
   isEmpty(): boolean;
   getScriptPositionInCode(script: IScript): ICodePosition;
 }

src/application/Context/State/Code/Generation/IUserScript.ts

@@ -1,7 +1,7 @@
-import { SelectedScript } from '@/application/Context/State/Selection/SelectedScript';
 import { ICodePosition } from '@/application/Context/State/Code/Position/ICodePosition';
+import { SelectedScript } from '@/application/Context/State/Selection/Script/SelectedScript';
 
 export interface IUserScript {
-  code: string;
-  scriptPositions: Map<SelectedScript, ICodePosition>;
+  readonly code: string;
+  readonly scriptPositions: Map<SelectedScript, ICodePosition>;
 }

src/application/Context/State/Code/Generation/IUserScriptGenerator.ts

@@ -1,9 +1,10 @@
-import { SelectedScript } from '@/application/Context/State/Selection/SelectedScript';
 import { IScriptingDefinition } from '@/domain/IScriptingDefinition';
+import { SelectedScript } from '@/application/Context/State/Selection/Script/SelectedScript';
 import { IUserScript } from './IUserScript';
 
 export interface IUserScriptGenerator {
   buildCode(
     selectedScripts: ReadonlyArray<SelectedScript>,
-    scriptingDefinition: IScriptingDefinition): IUserScript;
+    scriptingDefinition: IScriptingDefinition,
+  ): IUserScript;
 }

src/application/Context/State/Code/Generation/UserScriptGenerator.ts

@@ -1,6 +1,6 @@
-import { SelectedScript } from '@/application/Context/State/Selection/SelectedScript';
 import { ICodePosition } from '@/application/Context/State/Code/Position/ICodePosition';
 import { IScriptingDefinition } from '@/domain/IScriptingDefinition';
+import { SelectedScript } from '@/application/Context/State/Selection/Script/SelectedScript';
 import { CodePosition } from '../Position/CodePosition';
 import { IUserScriptGenerator } from './IUserScriptGenerator';
 import { IUserScript } from './IUserScript';