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/Common/Timing/BatchedDebounce.ts

@@ -0,0 +1,27 @@
+import { PlatformTimer } from './PlatformTimer';
+import { TimeoutType, Timer } from './Timer';
+
+export function batchedDebounce<T>(
+  callback: (batches: readonly T[]) => void,
+  waitInMs: number,
+  timer: Timer = PlatformTimer,
+): (arg: T) => void {
+  let lastTimeoutId: TimeoutType | undefined;
+  let batches: Array<T> = [];
+
+  return (arg: T) => {
+    batches.push(arg);
+
+    const later = () => {
+      callback(batches);
+      batches = [];
+      lastTimeoutId = undefined;
+    };
+
+    if (lastTimeoutId !== undefined) {
+      timer.clearTimeout(lastTimeoutId);
+    }
+
+    lastTimeoutId = timer.setTimeout(later, waitInMs);
+  };
+}

src/application/Common/Timing/PlatformTimer.ts

@@ -0,0 +1,7 @@
+import { Timer } from './Timer';
+
+export const PlatformTimer: Timer = {
+  setTimeout: (callback, ms) => setTimeout(callback, ms),
+  clearTimeout: (timeoutId) => clearTimeout(timeoutId),
+  dateNow: () => Date.now(),
+};

src/application/Common/Timing/Throttle.ts

@@ -1,40 +1,24 @@
+import { Timer, TimeoutType } from './Timer';
+import { PlatformTimer } from './PlatformTimer';
+
 export type CallbackType = (..._: unknown[]) => void;
 
 export function throttle(
   callback: CallbackType,
   waitInMs: number,
-  timer: ITimer = NodeTimer,
+  timer: Timer = PlatformTimer,
 ): CallbackType {
   const throttler = new Throttler(timer, waitInMs, callback);
   return (...args: unknown[]) => throttler.invoke(...args);
 }
 
-// Allows aligning with both NodeJs (NodeJs.Timeout) and Window type (number)
-export type Timeout = ReturnType<typeof setTimeout>;
-
-export interface ITimer {
-  setTimeout: (callback: () => void, ms: number) => Timeout;
-  clearTimeout: (timeoutId: Timeout) => void;
-  dateNow(): number;
-}
-
-const NodeTimer: ITimer = {
-  setTimeout: (callback, ms) => setTimeout(callback, ms),
-  clearTimeout: (timeoutId) => clearTimeout(timeoutId),
-  dateNow: () => Date.now(),
-};
-
-interface IThrottler {
-  invoke: CallbackType;
-}
-
-class Throttler implements IThrottler {
-  private queuedExecutionId: Timeout | undefined;
+class Throttler {
+  private queuedExecutionId: TimeoutType | undefined;
 
   private previouslyRun: number;
 
   constructor(
-    private readonly timer: ITimer,
+    private readonly timer: Timer,
     private readonly waitInMs: number,
     private readonly callback: CallbackType,
   ) {

src/application/Common/Timing/Timer.ts

@@ -0,0 +1,8 @@
+// Allows aligning with both NodeJs (NodeJs.Timeout) and Window type (number)
+export type TimeoutType = ReturnType<typeof setTimeout>;
+
+export interface Timer {
+  setTimeout: (callback: () => void, ms: number) => TimeoutType;
+  clearTimeout: (timeoutId: TimeoutType) => void;
+  dateNow(): number;
+}

src/application/Context/State/CategoryCollectionState.ts

@@ -4,23 +4,48 @@ import { UserFilter } from './Filter/UserFilter';
 import { IUserFilter } from './Filter/IUserFilter';
 import { ApplicationCode } from './Code/ApplicationCode';
 import { UserSelection } from './Selection/UserSelection';
-import { IUserSelection } from './Selection/IUserSelection';
 import { ICategoryCollectionState } from './ICategoryCollectionState';
 import { IApplicationCode } from './Code/IApplicationCode';
+import { UserSelectionFacade } from './Selection/UserSelectionFacade';
 
 export class CategoryCollectionState implements ICategoryCollectionState {
   public readonly os: OperatingSystem;
 
   public readonly code: IApplicationCode;
 
-  public readonly selection: IUserSelection;
+  public readonly selection: UserSelection;
 
   public readonly filter: IUserFilter;
 
-  public constructor(readonly collection: ICategoryCollection) {
-    this.selection = new UserSelection(collection, []);
-    this.code = new ApplicationCode(this.selection, collection.scripting);
-    this.filter = new UserFilter(collection);
+  public constructor(
+    public readonly collection: ICategoryCollection,
+    selectionFactory = DefaultSelectionFactory,
+    codeFactory = DefaultCodeFactory,
+    filterFactory = DefaultFilterFactory,
+  ) {
+    this.selection = selectionFactory(collection, []);
+    this.code = codeFactory(this.selection.scripts, collection.scripting);
+    this.filter = filterFactory(collection);
     this.os = collection.os;
   }
 }
+
+export type CodeFactory = (
+  ...params: ConstructorParameters<typeof ApplicationCode>
+) => IApplicationCode;
+
+const DefaultCodeFactory: CodeFactory = (...params) => new ApplicationCode(...params);
+
+export type SelectionFactory = (
+  ...params: ConstructorParameters<typeof UserSelectionFacade>
+) => UserSelection;
+
+const DefaultSelectionFactory: SelectionFactory = (
+  ...params
+) => new UserSelectionFacade(...params);
+
+export type FilterFactory = (
+  ...params: ConstructorParameters<typeof UserFilter>
+) => IUserFilter;
+
+const DefaultFilterFactory: FilterFactory = (...params) => new UserFilter(...params);

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';

src/application/Context/State/ICategoryCollectionState.ts

@@ -1,18 +1,18 @@
 import { ICategoryCollection } from '@/domain/ICategoryCollection';
 import { OperatingSystem } from '@/domain/OperatingSystem';
 import { IReadOnlyUserFilter, IUserFilter } from './Filter/IUserFilter';
-import { IReadOnlyUserSelection, IUserSelection } from './Selection/IUserSelection';
+import { ReadonlyUserSelection, UserSelection } from './Selection/UserSelection';
 import { IApplicationCode } from './Code/IApplicationCode';
 
 export interface IReadOnlyCategoryCollectionState {
   readonly code: IApplicationCode;
   readonly os: OperatingSystem;
   readonly filter: IReadOnlyUserFilter;
-  readonly selection: IReadOnlyUserSelection;
+  readonly selection: ReadonlyUserSelection;
   readonly collection: ICategoryCollection;
 }
 
 export interface ICategoryCollectionState extends IReadOnlyCategoryCollectionState {
   readonly filter: IUserFilter;
-  readonly selection: IUserSelection;
+  readonly selection: UserSelection;
 }

src/application/Context/State/Selection/Category/CategorySelection.ts

@@ -0,0 +1,11 @@
+import { ICategory } from '@/domain/ICategory';
+import { CategorySelectionChangeCommand } from './CategorySelectionChange';
+
+export interface ReadonlyCategorySelection {
+  areAllScriptsSelected(category: ICategory): boolean;
+  isAnyScriptSelected(category: ICategory): boolean;
+}
+
+export interface CategorySelection extends ReadonlyCategorySelection {
+  processChanges(action: CategorySelectionChangeCommand): void;
+}

src/application/Context/State/Selection/Category/CategorySelectionChange.ts

@@ -0,0 +1,15 @@
+type CategorySelectionStatus = {
+  readonly isSelected: true;
+  readonly isReverted: boolean;
+} | {
+  readonly isSelected: false;
+};
+
+export interface CategorySelectionChange {
+  readonly categoryId: number;
+  readonly newStatus: CategorySelectionStatus;
+}
+
+export interface CategorySelectionChangeCommand {
+  readonly changes: readonly CategorySelectionChange[];
+}

src/application/Context/State/Selection/Category/ScriptToCategorySelectionMapper.ts

@@ -0,0 +1,60 @@
+import { ICategory } from '@/domain/ICategory';
+import { ICategoryCollection } from '@/domain/ICategoryCollection';
+import { ScriptSelection } from '../Script/ScriptSelection';
+import { ScriptSelectionChange } from '../Script/ScriptSelectionChange';
+import { CategorySelection } from './CategorySelection';
+import { CategorySelectionChange, CategorySelectionChangeCommand } from './CategorySelectionChange';
+
+export class ScriptToCategorySelectionMapper implements CategorySelection {
+  constructor(
+    private readonly scriptSelection: ScriptSelection,
+    private readonly collection: ICategoryCollection,
+  ) {
+
+  }
+
+  public areAllScriptsSelected(category: ICategory): boolean {
+    const { selectedScripts } = this.scriptSelection;
+    if (selectedScripts.length === 0) {
+      return false;
+    }
+    const scripts = category.getAllScriptsRecursively();
+    if (selectedScripts.length < scripts.length) {
+      return false;
+    }
+    return scripts.every(
+      (script) => selectedScripts.some((selected) => selected.id === script.id),
+    );
+  }
+
+  public isAnyScriptSelected(category: ICategory): boolean {
+    const { selectedScripts } = this.scriptSelection;
+    if (selectedScripts.length === 0) {
+      return false;
+    }
+    return selectedScripts.some((s) => category.includes(s.script));
+  }
+
+  public processChanges(action: CategorySelectionChangeCommand): void {
+    const scriptChanges = action.changes.reduce((changes, change) => {
+      changes.push(...this.collectScriptChanges(change));
+      return changes;
+    }, new Array<ScriptSelectionChange>());
+    this.scriptSelection.processChanges({
+      changes: scriptChanges,
+    });
+  }
+
+  private collectScriptChanges(change: CategorySelectionChange): ScriptSelectionChange[] {
+    const category = this.collection.getCategory(change.categoryId);
+    const scripts = category.getAllScriptsRecursively();
+    const scriptsChangesInCategory = scripts
+      .map((script): ScriptSelectionChange => ({
+        scriptId: script.id,
+        newStatus: {
+          ...change.newStatus,
+        },
+      }));
+    return scriptsChangesInCategory;
+  }
+}

src/application/Context/State/Selection/IUserSelection.ts

@@ -1,23 +0,0 @@
-import { IScript } from '@/domain/IScript';
-import { ICategory } from '@/domain/ICategory';
-import { IEventSource } from '@/infrastructure/Events/IEventSource';
-import { SelectedScript } from './SelectedScript';
-
-export interface IReadOnlyUserSelection {
-  readonly changed: IEventSource<ReadonlyArray<SelectedScript>>;
-  readonly selectedScripts: ReadonlyArray<SelectedScript>;
-  isSelected(scriptId: string): boolean;
-  areAllSelected(category: ICategory): boolean;
-  isAnySelected(category: ICategory): boolean;
-}
-
-export interface IUserSelection extends IReadOnlyUserSelection {
-  removeAllInCategory(categoryId: number): void;
-  addOrUpdateAllInCategory(categoryId: number, revert: boolean): void;
-  addSelectedScript(scriptId: string, revert: boolean): void;
-  addOrUpdateSelectedScript(scriptId: string, revert: boolean): void;
-  removeSelectedScript(scriptId: string): void;
-  selectOnly(scripts: ReadonlyArray<IScript>): void;
-  selectAll(): void;
-  deselectAll(): void;
-}

src/application/Context/State/Selection/Script/DebouncedScriptSelection.ts

@@ -0,0 +1,171 @@
+import { InMemoryRepository } from '@/infrastructure/Repository/InMemoryRepository';
+import { IScript } from '@/domain/IScript';
+import { EventSource } from '@/infrastructure/Events/EventSource';
+import { ReadonlyRepository, Repository } from '@/application/Repository/Repository';
+import { ICategoryCollection } from '@/domain/ICategoryCollection';
+import { batchedDebounce } from '@/application/Common/Timing/BatchedDebounce';
+import { ScriptSelection } from './ScriptSelection';
+import { ScriptSelectionChange, ScriptSelectionChangeCommand } from './ScriptSelectionChange';
+import { SelectedScript } from './SelectedScript';
+import { UserSelectedScript } from './UserSelectedScript';
+
+const DEBOUNCE_DELAY_IN_MS = 100;
+
+export type DebounceFunction = typeof batchedDebounce<ScriptSelectionChangeCommand>;
+
+export class DebouncedScriptSelection implements ScriptSelection {
+  public readonly changed = new EventSource<ReadonlyArray<SelectedScript>>();
+
+  private readonly scripts: Repository<string, SelectedScript>;
+
+  public readonly processChanges: ScriptSelection['processChanges'];
+
+  constructor(
+    private readonly collection: ICategoryCollection,
+    selectedScripts: ReadonlyArray<SelectedScript>,
+    debounce: DebounceFunction = batchedDebounce,
+  ) {
+    this.scripts = new InMemoryRepository<string, SelectedScript>();
+    for (const script of selectedScripts) {
+      this.scripts.addItem(script);
+    }
+    this.processChanges = debounce(
+      (batchedRequests: readonly ScriptSelectionChangeCommand[]) => {
+        const consolidatedChanges = batchedRequests.flatMap((request) => request.changes);
+        this.processScriptChanges(consolidatedChanges);
+      },
+      DEBOUNCE_DELAY_IN_MS,
+    );
+  }
+
+  public isSelected(scriptId: string): boolean {
+    return this.scripts.exists(scriptId);
+  }
+
+  public get selectedScripts(): readonly SelectedScript[] {
+    return this.scripts.getItems();
+  }
+
+  public selectAll(): void {
+    const scriptsToSelect = this.collection
+      .getAllScripts()
+      .filter((script) => !this.scripts.exists(script.id))
+      .map((script) => new UserSelectedScript(script, false));
+    if (scriptsToSelect.length === 0) {
+      return;
+    }
+    this.processChanges({
+      changes: scriptsToSelect.map((script): ScriptSelectionChange => ({
+        scriptId: script.id,
+        newStatus: {
+          isSelected: true,
+          isReverted: false,
+        },
+      })),
+    });
+  }
+
+  public deselectAll(): void {
+    if (this.scripts.length === 0) {
+      return;
+    }
+    const selectedScriptIds = this.scripts.getItems().map((script) => script.id);
+    this.processChanges({
+      changes: selectedScriptIds.map((scriptId): ScriptSelectionChange => ({
+        scriptId,
+        newStatus: {
+          isSelected: false,
+        },
+      })),
+    });
+  }
+
+  public selectOnly(scripts: readonly IScript[]): void {
+    if (scripts.length === 0) {
+      throw new Error('Provided script array is empty. To deselect all scripts, please use the deselectAll() method instead.');
+    }
+    this.processChanges({
+      changes: [
+        ...getScriptIdsToBeDeselected(this.scripts, scripts)
+          .map((scriptId): ScriptSelectionChange => ({
+            scriptId,
+            newStatus: {
+              isSelected: false,
+            },
+          })),
+        ...getScriptIdsToBeSelected(this.scripts, scripts)
+          .map((scriptId): ScriptSelectionChange => ({
+            scriptId,
+            newStatus: {
+              isSelected: true,
+              isReverted: false,
+            },
+          })),
+      ],
+    });
+  }
+
+  private processScriptChanges(changes: readonly ScriptSelectionChange[]): void {
+    let totalChanged = 0;
+    for (const change of changes) {
+      totalChanged += this.applyChange(change);
+    }
+    if (totalChanged > 0) {
+      this.changed.notify(this.scripts.getItems());
+    }
+  }
+
+  private applyChange(change: ScriptSelectionChange): number {
+    const script = this.collection.getScript(change.scriptId);
+    if (change.newStatus.isSelected) {
+      return this.addOrUpdateScript(script.id, change.newStatus.isReverted);
+    }
+    return this.removeScript(script.id);
+  }
+
+  private addOrUpdateScript(scriptId: string, revert: boolean): number {
+    const script = this.collection.getScript(scriptId);
+    const selectedScript = new UserSelectedScript(script, revert);
+    if (!this.scripts.exists(selectedScript.id)) {
+      this.scripts.addItem(selectedScript);
+      return 1;
+    }
+    const existingSelectedScript = this.scripts.getById(selectedScript.id);
+    if (equals(selectedScript, existingSelectedScript)) {
+      return 0;
+    }
+    this.scripts.addOrUpdateItem(selectedScript);
+    return 1;
+  }
+
+  private removeScript(scriptId: string): number {
+    if (!this.scripts.exists(scriptId)) {
+      return 0;
+    }
+    this.scripts.removeItem(scriptId);
+    return 1;
+  }
+}
+
+function getScriptIdsToBeSelected(
+  existingItems: ReadonlyRepository<string, SelectedScript>,
+  desiredScripts: readonly IScript[],
+): string[] {
+  return desiredScripts
+    .filter((script) => !existingItems.exists(script.id))
+    .map((script) => script.id);
+}
+
+function getScriptIdsToBeDeselected(
+  existingItems: ReadonlyRepository<string, SelectedScript>,
+  desiredScripts: readonly IScript[],
+): string[] {
+  return existingItems
+    .getItems()
+    .filter((existing) => !desiredScripts.some((script) => existing.id === script.id))
+    .map((script) => script.id);
+}
+
+function equals(a: SelectedScript, b: SelectedScript): boolean {
+  return a.script.equals(b.script.id) && a.revert === b.revert;
+}

src/application/Context/State/Selection/Script/ScriptSelection.ts

@@ -0,0 +1,17 @@
+import { IEventSource } from '@/infrastructure/Events/IEventSource';
+import { IScript } from '@/domain/IScript';
+import { SelectedScript } from './SelectedScript';
+import { ScriptSelectionChangeCommand } from './ScriptSelectionChange';
+
+export interface ReadonlyScriptSelection {
+  readonly changed: IEventSource<readonly SelectedScript[]>;
+  readonly selectedScripts: readonly SelectedScript[];
+  isSelected(scriptId: string): boolean;
+}
+
+export interface ScriptSelection extends ReadonlyScriptSelection {
+  selectOnly(scripts: readonly IScript[]): void;
+  selectAll(): void;
+  deselectAll(): void;
+  processChanges(action: ScriptSelectionChangeCommand): void;
+}

src/application/Context/State/Selection/Script/ScriptSelectionChange.ts

@@ -0,0 +1,15 @@
+export type ScriptSelectionStatus = {
+  readonly isSelected: true;
+  readonly isReverted: boolean;
+} | {
+  readonly isSelected: false;
+};
+
+export interface ScriptSelectionChange {
+  readonly scriptId: string;
+  readonly newStatus: ScriptSelectionStatus;
+}
+
+export interface ScriptSelectionChangeCommand {
+  readonly changes: ReadonlyArray<ScriptSelectionChange>;
+}

src/application/Context/State/Selection/Script/SelectedScript.ts

@@ -0,0 +1,9 @@
+import { IEntity } from '@/infrastructure/Entity/IEntity';
+import { IScript } from '@/domain/IScript';
+
+type ScriptId = IScript['id'];
+
+export interface SelectedScript extends IEntity<ScriptId> {
+  readonly script: IScript;
+  readonly revert: boolean;
+}

src/application/Context/State/Selection/Script/UserSelectedScript.ts

@@ -1,14 +1,17 @@
 import { BaseEntity } from '@/infrastructure/Entity/BaseEntity';
 import { IScript } from '@/domain/IScript';
+import { SelectedScript } from './SelectedScript';
 
-export class SelectedScript extends BaseEntity<string> {
+type SelectedScriptId = SelectedScript['id'];
+
+export class UserSelectedScript extends BaseEntity<SelectedScriptId> {
   constructor(
     public readonly script: IScript,
     public readonly revert: boolean,
   ) {
     super(script.id);
     if (revert && !script.canRevert()) {
-      throw new Error('cannot revert an irreversible script');
+      throw new Error(`The script with ID '${script.id}' is not reversible and cannot be reverted.`);
     }
   }
 }

src/application/Context/State/Selection/UserSelection.ts

@@ -1,164 +1,12 @@
-import { InMemoryRepository } from '@/infrastructure/Repository/InMemoryRepository';
-import { IScript } from '@/domain/IScript';
-import { EventSource } from '@/infrastructure/Events/EventSource';
-import { IRepository } from '@/infrastructure/Repository/IRepository';
-import { ICategory } from '@/domain/ICategory';
-import { ICategoryCollection } from '@/domain/ICategoryCollection';
-import { IUserSelection } from './IUserSelection';
-import { SelectedScript } from './SelectedScript';
+import { CategorySelection, ReadonlyCategorySelection } from './Category/CategorySelection';
+import { ReadonlyScriptSelection, ScriptSelection } from './Script/ScriptSelection';
 
-export class UserSelection implements IUserSelection {
-  public readonly changed = new EventSource<ReadonlyArray<SelectedScript>>();
-
-  private readonly scripts: IRepository<string, SelectedScript>;
-
-  constructor(
-    private readonly collection: ICategoryCollection,
-    selectedScripts: ReadonlyArray<SelectedScript>,
-  ) {
-    this.scripts = new InMemoryRepository<string, SelectedScript>();
-    for (const script of selectedScripts) {
-      this.scripts.addItem(script);
-    }
-  }
-
-  public areAllSelected(category: ICategory): boolean {
-    if (this.selectedScripts.length === 0) {
-      return false;
-    }
-    const scripts = category.getAllScriptsRecursively();
-    if (this.selectedScripts.length < scripts.length) {
-      return false;
-    }
-    return scripts.every(
-      (script) => this.selectedScripts.some((selected) => selected.id === script.id),
-    );
-  }
-
-  public isAnySelected(category: ICategory): boolean {
-    if (this.selectedScripts.length === 0) {
-      return false;
-    }
-    return this.selectedScripts.some((s) => category.includes(s.script));
-  }
-
-  public removeAllInCategory(categoryId: number): void {
-    const category = this.collection.getCategory(categoryId);
-    const scriptsToRemove = category.getAllScriptsRecursively()
-      .filter((script) => this.scripts.exists(script.id));
-    if (!scriptsToRemove.length) {
-      return;
-    }
-    for (const script of scriptsToRemove) {
-      this.scripts.removeItem(script.id);
-    }
-    this.changed.notify(this.scripts.getItems());
-  }
-
-  public addOrUpdateAllInCategory(categoryId: number, revert = false): void {
-    const scriptsToAddOrUpdate = this.collection
-      .getCategory(categoryId)
-      .getAllScriptsRecursively()
-      .filter(
-        (script) => !this.scripts.exists(script.id)
-          || this.scripts.getById(script.id).revert !== revert,
-      )
-      .map((script) => new SelectedScript(script, revert));
-    if (!scriptsToAddOrUpdate.length) {
-      return;
-    }
-    for (const script of scriptsToAddOrUpdate) {
-      this.scripts.addOrUpdateItem(script);
-    }
-    this.changed.notify(this.scripts.getItems());
-  }
-
-  public addSelectedScript(scriptId: string, revert: boolean): void {
-    const script = this.collection.getScript(scriptId);
-    const selectedScript = new SelectedScript(script, revert);
-    this.scripts.addItem(selectedScript);
-    this.changed.notify(this.scripts.getItems());
-  }
-
-  public addOrUpdateSelectedScript(scriptId: string, revert: boolean): void {
-    const script = this.collection.getScript(scriptId);
-    const selectedScript = new SelectedScript(script, revert);
-    this.scripts.addOrUpdateItem(selectedScript);
-    this.changed.notify(this.scripts.getItems());
-  }
-
-  public removeSelectedScript(scriptId: string): void {
-    this.scripts.removeItem(scriptId);
-    this.changed.notify(this.scripts.getItems());
-  }
-
-  public isSelected(scriptId: string): boolean {
-    return this.scripts.exists(scriptId);
-  }
-
-  /** Get users scripts based on his/her selections */
-  public get selectedScripts(): ReadonlyArray<SelectedScript> {
-    return this.scripts.getItems();
-  }
-
-  public selectAll(): void {
-    const scriptsToSelect = this.collection
-      .getAllScripts()
-      .filter((script) => !this.scripts.exists(script.id))
-      .map((script) => new SelectedScript(script, false));
-    if (scriptsToSelect.length === 0) {
-      return;
-    }
-    for (const script of scriptsToSelect) {
-      this.scripts.addItem(script);
-    }
-    this.changed.notify(this.scripts.getItems());
-  }
-
-  public deselectAll(): void {
-    if (this.scripts.length === 0) {
-      return;
-    }
-    const selectedScriptIds = this.scripts.getItems().map((script) => script.id);
-    for (const scriptId of selectedScriptIds) {
-      this.scripts.removeItem(scriptId);
-    }
-    this.changed.notify([]);
-  }
-
-  public selectOnly(scripts: readonly IScript[]): void {
-    if (!scripts.length) {
-      throw new Error('Scripts are empty. Use deselectAll() if you want to deselect everything');
-    }
-    let totalChanged = 0;
-    totalChanged += this.unselectMissingWithoutNotifying(scripts);
-    totalChanged += this.selectNewWithoutNotifying(scripts);
-    if (totalChanged > 0) {
-      this.changed.notify(this.scripts.getItems());
-    }
-  }
-
-  private unselectMissingWithoutNotifying(scripts: readonly IScript[]): number {
-    if (this.scripts.length === 0 || scripts.length === 0) {
-      return 0;
-    }
-    const existingItems = this.scripts.getItems();
-    const missingIds = existingItems
-      .filter((existing) => !scripts.some((script) => existing.id === script.id))
-      .map((script) => script.id);
-    for (const id of missingIds) {
-      this.scripts.removeItem(id);
-    }
-    return missingIds.length;
-  }
-
-  private selectNewWithoutNotifying(scripts: readonly IScript[]): number {
-    const unselectedScripts = scripts
-      .filter((script) => !this.scripts.exists(script.id))
-      .map((script) => new SelectedScript(script, false));
-    for (const newScript of unselectedScripts) {
-      this.scripts.addItem(newScript);
-    }
-    return unselectedScripts.length;
-  }
+export interface ReadonlyUserSelection {
+  readonly categories: ReadonlyCategorySelection;
+  readonly scripts: ReadonlyScriptSelection;
+}
+
+export interface UserSelection extends ReadonlyUserSelection {
+  readonly categories: CategorySelection;
+  readonly scripts: ScriptSelection;
 }

src/application/Context/State/Selection/UserSelectionFacade.ts

@@ -0,0 +1,39 @@
+import { ICategoryCollection } from '@/domain/ICategoryCollection';
+import { CategorySelection } from './Category/CategorySelection';
+import { ScriptToCategorySelectionMapper } from './Category/ScriptToCategorySelectionMapper';
+import { DebouncedScriptSelection } from './Script/DebouncedScriptSelection';
+import { ScriptSelection } from './Script/ScriptSelection';
+import { UserSelection } from './UserSelection';
+import { SelectedScript } from './Script/SelectedScript';
+
+export class UserSelectionFacade implements UserSelection {
+  public readonly categories: CategorySelection;
+
+  public readonly scripts: ScriptSelection;
+
+  constructor(
+    collection: ICategoryCollection,
+    selectedScripts: readonly SelectedScript[],
+    scriptsFactory = DefaultScriptsFactory,
+    categoriesFactory = DefaultCategoriesFactory,
+  ) {
+    this.scripts = scriptsFactory(collection, selectedScripts);
+    this.categories = categoriesFactory(this.scripts, collection);
+  }
+}
+
+export type ScriptsFactory = (
+  ...params: ConstructorParameters<typeof DebouncedScriptSelection>
+) => ScriptSelection;
+
+const DefaultScriptsFactory: ScriptsFactory = (
+  ...params
+) => new DebouncedScriptSelection(...params);
+
+export type CategoriesFactory = (
+  ...params: ConstructorParameters<typeof ScriptToCategorySelectionMapper>
+) => CategorySelection;
+
+const DefaultCategoriesFactory: CategoriesFactory = (
+  ...params
+) => new ScriptToCategorySelectionMapper(...params);

src/application/Repository/Repository.ts

@@ -0,0 +1,17 @@
+import { IEntity } from '@/infrastructure/Entity/IEntity';
+
+export interface ReadonlyRepository<TKey, TEntity extends IEntity<TKey>> {
+  readonly length: number;
+  getItems(predicate?: (entity: TEntity) => boolean): readonly TEntity[];
+  getById(id: TKey): TEntity;
+  exists(id: TKey): boolean;
+}
+
+export interface MutableRepository<TKey, TEntity extends IEntity<TKey>> {
+  addItem(item: TEntity): void;
+  addOrUpdateItem(item: TEntity): void;
+  removeItem(id: TKey): void;
+}
+
+export interface Repository<TKey, TEntity extends IEntity<TKey>>
+  extends ReadonlyRepository<TKey, TEntity>, MutableRepository<TKey, TEntity> { }

src/infrastructure/Repository/IRepository.ts

@@ -1,11 +0,0 @@
-import { IEntity } from '../Entity/IEntity';
-
-export interface IRepository<TKey, TEntity extends IEntity<TKey>> {
-  readonly length: number;
-  getItems(predicate?: (entity: TEntity) => boolean): TEntity[];
-  getById(id: TKey): TEntity;
-  addItem(item: TEntity): void;
-  addOrUpdateItem(item: TEntity): void;
-  removeItem(id: TKey): void;
-  exists(id: TKey): boolean;
-}

src/infrastructure/Repository/InMemoryRepository.ts

@@ -1,8 +1,8 @@
 import { IEntity } from '../Entity/IEntity';
-import { IRepository } from './IRepository';
+import { Repository } from '../../application/Repository/Repository';
 
 export class InMemoryRepository<TKey, TEntity extends IEntity<TKey>>
-implements IRepository<TKey, TEntity> {
+implements Repository<TKey, TEntity> {
   private readonly items: TEntity[];
 
   constructor(items?: TEntity[]) {

src/presentation/components/Code/TheCodeArea.vue

@@ -3,8 +3,10 @@
     v-non-collapsing
     @size-changed="sizeChanged()"
   >
+    <!-- `data-test-highlighted-range` is a test hook for assessing highlighted text range -->
     <div
       :id="editorId"
+      :data-test-highlighted-range="highlightedRange"
       class="code-area"
     />
   </SizeObserver>
@@ -12,7 +14,7 @@
 
 <script lang="ts">
 import {
-  defineComponent, onUnmounted, onMounted,
+  defineComponent, onUnmounted, onMounted, ref,
 } from 'vue';
 import { injectKey } from '@/presentation/injectionSymbols';
 import { ICodeChangedEvent } from '@/application/Context/State/Code/Event/ICodeChangedEvent';
@@ -42,6 +44,8 @@ export default defineComponent({
     const { events } = injectKey((keys) => keys.useAutoUnsubscribedEvents);
 
     const editorId = 'codeEditor';
+    const highlightedRange = ref(0);
+
     let editor: ace.Ace.Editor | undefined;
     let currentMarkerId: number | undefined;
 
@@ -99,6 +103,7 @@ export default defineComponent({
       }
       editor?.session.removeMarker(currentMarkerId);
       currentMarkerId = undefined;
+      highlightedRange.value = 0;
     }
 
     function reactToChanges(event: ICodeChangedEvent, scripts: ReadonlyArray<IScript>) {
@@ -121,6 +126,7 @@ export default defineComponent({
         'code-area__highlight',
         'fullLine',
       );
+      highlightedRange.value = endRow - startRow;
     }
 
     function scrollToLine(row: number) {
@@ -133,6 +139,7 @@ export default defineComponent({
 
     return {
       editorId,
+      highlightedRange,
       sizeChanged,
     };
   },

src/presentation/components/Scripts/Menu/Selector/SelectionTypeHandler.ts

@@ -1,9 +1,9 @@
 import { IScript } from '@/domain/IScript';
-import { SelectedScript } from '@/application/Context/State/Selection/SelectedScript';
 import { RecommendationLevel } from '@/domain/RecommendationLevel';
 import { scrambledEqual } from '@/application/Common/Array';
-import { IReadOnlyUserSelection, IUserSelection } from '@/application/Context/State/Selection/IUserSelection';
 import { ICategoryCollection } from '@/domain/ICategoryCollection';
+import { ReadonlyScriptSelection, ScriptSelection } from '@/application/Context/State/Selection/Script/ScriptSelection';
+import { SelectedScript } from '@/application/Context/State/Selection/Script/SelectedScript';
 
 export enum SelectionType {
   Standard,
@@ -34,12 +34,12 @@ export function getCurrentSelectionType(context: SelectionCheckContext): Selecti
 }
 
 export interface SelectionCheckContext {
-  readonly selection: IReadOnlyUserSelection;
+  readonly selection: ReadonlyScriptSelection;
   readonly collection: ICategoryCollection;
 }
 
 export interface SelectionMutationContext {
-  readonly selection: IUserSelection,
+  readonly selection: ScriptSelection,
   readonly collection: ICategoryCollection,
 }
 

src/presentation/components/Scripts/Menu/Selector/TheSelector.vue

@@ -91,7 +91,7 @@ export default defineComponent({
 
     const currentSelectionType = computed<SelectionType>({
       get: () => getCurrentSelectionType({
-        selection: currentSelection.value,
+        selection: currentSelection.value.scripts,
         collection: currentCollection.value,
       }),
       set: (type: SelectionType) => {
@@ -105,7 +105,7 @@ export default defineComponent({
       }
       modifyCurrentSelection((mutableSelection) => {
         setCurrentSelectionType(type, {
-          selection: mutableSelection,
+          selection: mutableSelection.scripts,
           collection: currentCollection.value,
         });
       });

src/presentation/components/Scripts/View/Cards/CardSelectionIndicator.vue

@@ -38,11 +38,11 @@ export default defineComponent({
     );
 
     const isAnyChildSelected = computed<boolean>(
-      () => currentSelection.value.isAnySelected(currentCategory.value),
+      () => currentSelection.value.categories.isAnyScriptSelected(currentCategory.value),
     );
 
     const areAllChildrenSelected = computed<boolean>(
-      () => currentSelection.value.areAllSelected(currentCategory.value),
+      () => currentSelection.value.categories.areAllScriptsSelected(currentCategory.value),
     );
 
     return {

src/presentation/components/Scripts/View/Tree/NodeContent/RevertToggle.vue

@@ -41,7 +41,7 @@ export default defineComponent({
 
     const isReverted = computed<boolean>({
       get() {
-        const { selectedScripts } = currentSelection.value;
+        const { selectedScripts } = currentSelection.value.scripts;
         return revertHandler.value.getState(selectedScripts);
       },
       set: (value: boolean) => {

src/presentation/components/Scripts/View/Tree/NodeContent/Reverter/CategoryReverter.ts

@@ -1,6 +1,6 @@
-import { SelectedScript } from '@/application/Context/State/Selection/SelectedScript';
-import { IUserSelection } from '@/application/Context/State/Selection/IUserSelection';
+import { UserSelection } from '@/application/Context/State/Selection/UserSelection';
 import { ICategoryCollection } from '@/domain/ICategoryCollection';
+import { SelectedScript } from '@/application/Context/State/Selection/Script/SelectedScript';
 import { getCategoryId } from '../../TreeViewAdapter/CategoryNodeMetadataConverter';
 import { IReverter } from './IReverter';
 import { ScriptReverter } from './ScriptReverter';
@@ -19,8 +19,16 @@ export class CategoryReverter implements IReverter {
     return this.scriptReverters.every((script) => script.getState(selectedScripts));
   }
 
-  public selectWithRevertState(newState: boolean, selection: IUserSelection): void {
-    selection.addOrUpdateAllInCategory(this.categoryId, newState);
+  public selectWithRevertState(newState: boolean, selection: UserSelection): void {
+    selection.categories.processChanges({
+      changes: [{
+        categoryId: this.categoryId,
+        newStatus: {
+          isSelected: true,
+          isReverted: newState,
+        },
+      }],
+    });
   }
 }
 

src/presentation/components/Scripts/View/Tree/NodeContent/Reverter/IReverter.ts

@@ -1,7 +1,7 @@
-import { IUserSelection } from '@/application/Context/State/Selection/IUserSelection';
-import { SelectedScript } from '@/application/Context/State/Selection/SelectedScript';
+import { UserSelection } from '@/application/Context/State/Selection/UserSelection';
+import { SelectedScript } from '@/application/Context/State/Selection/Script/SelectedScript';
 
 export interface IReverter {
   getState(selectedScripts: ReadonlyArray<SelectedScript>): boolean;
-  selectWithRevertState(newState: boolean, selection: IUserSelection): void;
+  selectWithRevertState(newState: boolean, selection: UserSelection): void;
 }

src/presentation/components/Scripts/View/Tree/NodeContent/Reverter/ScriptReverter.ts

@@ -1,5 +1,5 @@
-import { SelectedScript } from '@/application/Context/State/Selection/SelectedScript';
-import { IUserSelection } from '@/application/Context/State/Selection/IUserSelection';
+import { UserSelection } from '@/application/Context/State/Selection/UserSelection';
+import { SelectedScript } from '@/application/Context/State/Selection/Script/SelectedScript';
 import { getScriptId } from '../../TreeViewAdapter/CategoryNodeMetadataConverter';
 import { IReverter } from './IReverter';
 
@@ -18,7 +18,15 @@ export class ScriptReverter implements IReverter {
     return selectedScript.revert;
   }
 
-  public selectWithRevertState(newState: boolean, selection: IUserSelection): void {
-    selection.addOrUpdateSelectedScript(this.scriptId, newState);
+  public selectWithRevertState(newState: boolean, selection: UserSelection): void {
+    selection.scripts.processChanges({
+      changes: [{
+        scriptId: this.scriptId,
+        newStatus: {
+          isSelected: true,
+          isReverted: newState,
+        },
+      }],
+    });
   }
 }

src/presentation/components/Scripts/View/Tree/TreeViewAdapter/UseCollectionSelectionStateUpdater.ts

@@ -16,19 +16,38 @@ export function useCollectionSelectionStateUpdater(
       return;
     }
     if (node.state.current.checkState === TreeNodeCheckState.Checked) {
-      if (currentSelection.value.isSelected(node.id)) {
+      if (currentSelection.value.scripts.isSelected(node.id)) {
         return;
       }
       modifyCurrentSelection((selection) => {
-        selection.addSelectedScript(node.id, false);
+        selection.scripts.processChanges({
+          changes: [
+            {
+              scriptId: node.id,
+              newStatus: {
+                isSelected: true,
+                isReverted: false,
+              },
+            },
+          ],
+        });
       });
     }
     if (node.state.current.checkState === TreeNodeCheckState.Unchecked) {
-      if (!currentSelection.value.isSelected(node.id)) {
+      if (!currentSelection.value.scripts.isSelected(node.id)) {
         return;
       }
       modifyCurrentSelection((selection) => {
-        selection.removeSelectedScript(node.id);
+        selection.scripts.processChanges({
+          changes: [
+            {
+              scriptId: node.id,
+              newStatus: {
+                isSelected: false,
+              },
+            },
+          ],
+        });
       });
     }
   }

src/presentation/components/Scripts/View/Tree/TreeViewAdapter/UseSelectedScriptNodeIds.ts

@@ -13,6 +13,7 @@ export function useSelectedScriptNodeIds(
   const selectedNodeIds = computed<readonly string[]>(() => {
     return currentSelection
       .value
+      .scripts
       .selectedScripts
       .map((selected) => scriptNodeIdParser(selected.script));
   });

src/presentation/components/Shared/Hooks/UseUserSelectionState.ts

@@ -1,5 +1,5 @@
 import { shallowReadonly, shallowRef, triggerRef } from 'vue';
-import { IReadOnlyUserSelection, IUserSelection } from '@/application/Context/State/Selection/IUserSelection';
+import type { ReadonlyUserSelection, UserSelection } from '@/application/Context/State/Selection/UserSelection';
 import type { useAutoUnsubscribedEvents } from './UseAutoUnsubscribedEvents';
 import type { useCollectionState } from './UseCollectionState';
 
@@ -10,12 +10,12 @@ export function useUserSelectionState(
   const { events } = autoUnsubscribedEvents;
   const { onStateChange, modifyCurrentState, currentState } = collectionState;
 
-  const currentSelection = shallowRef<IReadOnlyUserSelection>(currentState.value.selection);
+  const currentSelection = shallowRef<ReadonlyUserSelection>(currentState.value.selection);
 
   onStateChange((state) => {
     updateSelection(state.selection);
     events.unsubscribeAllAndRegister([
-      state.selection.changed.on(() => {
+      state.selection.scripts.changed.on(() => {
         updateSelection(state.selection);
       }),
     ]);
@@ -27,7 +27,7 @@ export function useUserSelectionState(
     });
   }
 
-  function updateSelection(newSelection: IReadOnlyUserSelection) {
+  function updateSelection(newSelection: ReadonlyUserSelection) {
     if (currentSelection.value === newSelection) {
       // Do not trust Vue tracking, the changed selection object
       // reference may stay same for same collection.
@@ -44,5 +44,5 @@ export function useUserSelectionState(
 }
 
 export type SelectionModifier = (
-  state: IUserSelection,
+  state: UserSelection,
 ) => void;

src/presentation/components/Shared/SizeObserver.vue

@@ -9,7 +9,7 @@ import {
   defineComponent, shallowRef, onMounted, onBeforeUnmount, watch,
 } from 'vue';
 import { useResizeObserverPolyfill } from '@/presentation/components/Shared/Hooks/UseResizeObserverPolyfill';
-import { throttle } from '@/presentation/components/Shared/Throttle';
+import { throttle } from '@/application/Common/Timing/Throttle';
 
 export default defineComponent({
   emits: {