From 14664e2c96947e659dfef8a61939307ab9d0c63c Mon Sep 17 00:00:00 2001
From: Tim Bradgate <timbradgate@hotmail.co.uk>
Date: Fri, 8 May 2026 23:26:05 +0100
Subject: [PATCH 1/9] Fix Reset/Submit buttons always enabled in system
 settings (#1004)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Fix Reset/Submit buttons always enabled in system settings (#1003)

Both buttons now disable when no settings differ from their stored values,
and re-enable as soon as any value changes — reverting a setting back to
its original value correctly disables them again.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Fix Prettier formatting in ConfigSettings.vue

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 client/src/vue_components/config/ConfigSettings.vue | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/client/src/vue_components/config/ConfigSettings.vue b/client/src/vue_components/config/ConfigSettings.vue
index b8b917e7..194faa72 100644
--- a/client/src/vue_components/config/ConfigSettings.vue
+++ b/client/src/vue_components/config/ConfigSettings.vue
@@ -99,8 +99,10 @@
                 size="md"
                 style="float: right; padding-top: 1rem; padding-bottom: 0.5rem"
               >
-                <b-button type="reset" variant="danger"> Reset </b-button>
-                <b-button type="submit" variant="primary"> Submit </b-button>
+                <b-button type="reset" variant="danger" :disabled="!hasChanges"> Reset </b-button>
+                <b-button type="submit" variant="primary" :disabled="!hasChanges">
+                  Submit
+                </b-button>
               </b-button-group>
             </div>
           </b-form>
@@ -153,6 +155,11 @@ export default {
       });
       return settingsByCategory;
     },
+    hasChanges() {
+      return Object.keys(this.editSettings).some(
+        (key) => this.editSettings[key] !== this.RAW_SETTINGS[key]?.value
+      );
+    },
     dirtySettingsByCategory() {
       const dirtySettingsByCategory = {};
       Object.keys(this.SETTINGS_CATEGORIES).forEach((category) => {

From 41d8418255d9a2b9d47610ded7c730699abdb28a Mon Sep 17 00:00:00 2001
From: Tim Bradgate <timbradgate@hotmail.co.uk>
Date: Tue, 12 May 2026 18:06:51 +0100
Subject: [PATCH 2/9] Update development.md to reflect TypeScript migration

- Update store.js reference to store.ts
- Add npm run typecheck to the contributing linting checklist

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 documentation/development.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/documentation/development.md b/documentation/development.md
index b1b317d3..9908e23e 100644
--- a/documentation/development.md
+++ b/documentation/development.md
@@ -99,9 +99,10 @@ The `BUILD_TARGET` environment variable controls how the Vue client is built:
 Contributions are welcome! Please ensure all client and server code passes linting checks before submitting pull requests:
 
 ```shell
-# Client linting
+# Client linting and type checking
 cd client
 npm run lint
+npm run typecheck
 
 # Server linting
 cd server
@@ -131,7 +132,7 @@ Messages should be structured with the following data format:
 }
 ```
 
-On the client side, the messages are handled in 2 places (in the [Vuex store](client/src/store/store.js)):
+On the client side, the messages are handled in 2 places (in the [Vuex store](client/src/store/store.ts)):
 
 1. Vuex mutation `SOCKET_ONMESSAGE` is called for every message, and should handle each OP code as needed
 2. Vuex action `SOME_ACTION` needs to be defined, and is called only if the data contains an `ACTION` key/value pair

From 189d7e03316ab4c0c2b508859caec56e62e242da Mon Sep 17 00:00:00 2001
From: Tim Bradgate <timbradgate@hotmail.co.uk>
Date: Tue, 12 May 2026 18:10:58 +0100
Subject: [PATCH 3/9] Revert "Update development.md to reflect TypeScript
 migration"

This reverts commit 41d8418255d9a2b9d47610ded7c730699abdb28a.
---
 documentation/development.md | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/documentation/development.md b/documentation/development.md
index 9908e23e..b1b317d3 100644
--- a/documentation/development.md
+++ b/documentation/development.md
@@ -99,10 +99,9 @@ The `BUILD_TARGET` environment variable controls how the Vue client is built:
 Contributions are welcome! Please ensure all client and server code passes linting checks before submitting pull requests:
 
 ```shell
-# Client linting and type checking
+# Client linting
 cd client
 npm run lint
-npm run typecheck
 
 # Server linting
 cd server
@@ -132,7 +131,7 @@ Messages should be structured with the following data format:
 }
 ```
 
-On the client side, the messages are handled in 2 places (in the [Vuex store](client/src/store/store.ts)):
+On the client side, the messages are handled in 2 places (in the [Vuex store](client/src/store/store.js)):
 
 1. Vuex mutation `SOCKET_ONMESSAGE` is called for every message, and should handle each OP code as needed
 2. Vuex action `SOME_ACTION` needs to be defined, and is called only if the data contains an `ACTION` key/value pair

From ddbf74e68e0058a5c641ba11ade3d761ff95e37a Mon Sep 17 00:00:00 2001
From: Tim Bradgate <timbradgate@hotmail.co.uk>
Date: Tue, 12 May 2026 18:26:31 +0100
Subject: [PATCH 4/9] Frontend TypeScript migration (#1006)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* TypeScript migration: Stage 1 — infrastructure (#1005)

* Add TypeScript infrastructure (Stage 1 of TS migration)

Installs TypeScript tooling and wires it into the build/lint/CI pipeline
without renaming any existing files. All current tests remain green.

- Add tsconfig.json with allowJs/checkJs:false for incremental migration,
  useDefineForClassFields:false for Vue 2 reactivity compatibility
- Install typescript ~5.4.5, @typescript-eslint parser/plugin, @types/node,
  @types/lodash
- Add eslint.config.mjs block for **/*.ts files using @typescript-eslint
- Add .ts to vite resolve.extensions
- Add typecheck script (tsc --noEmit); extend ci-lint to include it
- Add run-typecheck CI job to nodelint.yml
- Add src/types/index.ts placeholder (populated in Stage 2)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Remove typecheck from ci-lint to avoid duplicate runs in CI

The dedicated run-typecheck CI job in nodelint.yml already covers type
checking. Running it inside ci-lint as well would execute it twice on
every push.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

* Stage 2: Type definitions + utility file migration to TypeScript (#1007)

- Create src/types/api/ with interfaces for all API shapes (show, script,
  cues, stage, microphones, session, user, settings, websocket)
- Create src/types/shims/ with vendor.d.ts (deep-object-diff) and
  vue-shims.d.ts (Vue socket/toast plugin augmentations)
- Rename all utility .js → .ts with explicit parameter and return types:
  utils, logger, http-interceptor, customValidators, scriptUtils,
  blockOrphanUtils, micConflictUtils, platform/{browser,electron,index}
- Rename constants to .ts with 'as const' and derived type exports
- Rename .test.js → .test.ts for Vitest test files
- Update tsconfig: add vite/client types, exclude test files from typecheck
- 106 tests passing, typecheck clean, lint clean, build succeeds

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

* TypeScript migration Stage 3: type all Vuex store modules (#1008)

Renames all 10 store modules from .js to .ts and adds typed state
interfaces, mutation payloads, and action parameters throughout.

Key changes:
- New src/types/store.ts with RootState interface
- src/types/api/settings.ts: add SystemSettings interface
- src/types/api/user.ts: add CueColourOverride interface
- All 10 modules: Module<ModuleState, RootState> wrapper, named state
  interfaces, typed mutation params, typed action payloads
- websocket.ts: fix router.currentRoute → .path comparisons and add
  missing $toast.info to VueToast cast

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

* TypeScript migration Stage 4: mixins and router (#1009)

Converts all 7 mixin files and the Vue Router index from .js to .ts
using defineComponent wrappers and explicit parameter/return types.

Also fixes a type correctness bug discovered during migration: the
ScriptCut API type was modelled as an object (line_part_id, revision_id)
but the server endpoint returns a plain array of number IDs. Changed
ScriptCut to a number type alias and updated all usages accordingly.

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

* TypeScript migration Stage 5A: leaf components and simple views (#1010)

Converts 17 Vue SFCs to <script lang="ts"> with defineComponent wrappers:
views/404View, AboutView, HomeView, HelpDocView, ForcePasswordChangeView,
LoginView, Settings; vue_components/MarkdownRenderer, ConfigLogs,
ConfigSettings, ConfigShows, ConfigSystem, ConfigUsers, ConfigRbac,
CreateUser, RbacResource, ResetPassword.

Also updates eslint.config.mjs to use tsParser as the <script lang="ts">
sub-parser inside .vue files, enabling TypeScript-aware linting for SFCs.

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

* TypeScript migration Stage 5B: views and user settings SFCs (#1011)

Convert 11 Vue SFCs to <script lang="ts"> with defineComponent wrapper:
- views/HelpView.vue, config/ConfigView.vue, electron/ServerSelector.vue
- views/show/ShowConfigView.vue, ShowLiveView.vue
- vue_components/user/settings: AboutUser, ApiToken, ChangePassword,
  CueColourPreferences, Settings, StageDirectionStyles

Key changes: typed timer fields as ReturnType<typeof setInterval>|null,
fixed Date arithmetic to use .getTime() instead of implicit coercion,
added SavedConnection/ServerStatus/DiscoveredServer interfaces in
ServerSelector, removed verbose JSDoc comments now captured by types.

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

* Stage 5C TypeScript migration: show config acts/scenes, cast, characters, sessions SFCs (#1012)

Convert 13 Vue SFCs to <script lang="ts"> with defineComponent wrapper covering
ConfigActsAndScenes, ConfigSessions, ConfigCast, ConfigCharacters, ConfigShow,
ConfigActs, ConfigScenes, CastLineStats, CharacterLineStats, CharacterGroups,
SessionList, SessionTagDropdown, and SessionTagList.

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

* TypeScript migration Stage 5D: script, live, App, main.ts + tsconfig improvements (#1014)

* TypeScript migration Stage 5D: script, live, App, main.ts + tsconfig improvements (#1013)

Completes the full TypeScript migration (issue #906). This is the final PR.

Changes:
- All script config SFCs: ScriptEditor, ScriptLineEditor, ScriptLinePart,
  ScriptLineViewer, ScriptRevisions, RevisionGraph, RevisionDetailModal,
  BulkActSceneModal, CompiledScripts, StageDirectionStyles
- All live view SFCs: ScriptViewPane, StageManagerPane, ScriptLineViewer,
  ScriptLineViewerCompact
- All stage config SFCs: StageManager, StageTimeline, CrewTimeline, TimelineSidePanel,
  PropsList, SceneryList, CrewList
- All mics config SFCs: MicTimeline, MicAllocations, MicList, ResourceAvailability,
  SceneDensityHeatmap, MicAutoPopulateModal
- All cues config SFCs: CueEditor, ScriptLineCueEditor, CueCountStats, JumpToCueModal
- Config views: ConfigCues, ConfigMics, ConfigScript, ConfigScriptRevisions, ConfigStage
- App.vue
- src/main.js renamed to src/main.ts (index.html entry point updated)
- tsconfig.json: enabled strictNullChecks, strictFunctionTypes, noImplicitReturns,
  noFallthroughCasesInSwitch, forceConsistentCasingInFileNames; added .vue to include;
  added comments documenting deferred strict settings and their rationale
- Fixed strictNullChecks errors in logger.ts and micConflictUtils.ts

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Convert scriptConfig.test.js to TypeScript; fix tsconfig allowJs comment

Renames scriptConfig.test.js → scriptConfig.test.ts, adding ScriptLine
import and typing the makeLine helper. All 7 tests pass unchanged.

Updates the allowJs tsconfig comment — the .js test file was the only reason
cited for the flag, but allowJs is still needed for tooling config files
(vite.config.js etc.) outside src/.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Convert all remaining JS tooling files to TypeScript; remove Babel

All JavaScript files in the client package are now TypeScript:
- vite.config.js → vite.config.ts
- vitest.config.js → vitest.config.ts
- prettier.config.mjs → prettier.config.ts (adds Config type annotation)
- eslint.config.mjs → eslint.config.ts (removes Babel parser; now uses
  @typescript-eslint/parser for both .ts and .vue files since all SFCs
  have <script lang="ts">; requires jiti for ESLint TypeScript config loading)
- scripts/generate-doc-manifest.js → generate-doc-manifest.ts (converts
  CommonJS require() to ESM imports; adds types; runs via node --strip-types)
- babel.config.js → deleted

Package changes:
- Remove @babel/core, @babel/eslint-parser, @babel/preset-env
- Add jiti (required by ESLint 9.39+ for TypeScript config file loading)
- Add "type": "module" to eliminate Node ESM detection warnings
- Update lint/format globs to drop .js (no .js files remain)
- Update prebuild script to use node --strip-types for the .ts manifest script

tsconfig.json: remove allowJs / checkJs (no .js source files remain)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

* Update development.md to reflect TypeScript migration

- Update store.js reference to store.ts
- Add npm run typecheck to the contributing linting checklist

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .github/workflows/nodelint.yml                |   12 +
 client/babel.config.js                        |    5 -
 client/eslint.config.mjs                      |   81 -
 client/eslint.config.ts                       |  100 +
 client/index.html                             |    2 +-
 client/package-lock.json                      | 2695 ++++-------------
 client/package.json                           |   21 +-
 ...prettier.config.mjs => prettier.config.ts} |   14 +-
 client/scripts/generate-doc-manifest.js       |  199 --
 client/scripts/generate-doc-manifest.ts       |  135 +
 client/src/App.vue                            |  145 +-
 .../constants/{lineTypes.js => lineTypes.ts}  |    4 +-
 .../{textAlignment.js => textAlignment.ts}    |    9 +-
 ...Utils.test.js => blockOrphanUtils.test.ts} |    0
 ...lockOrphanUtils.js => blockOrphanUtils.ts} |   63 +-
 client/src/js/customValidators.js             |    2 -
 client/src/js/customValidators.ts             |    3 +
 ...ttp-interceptor.js => http-interceptor.ts} |   12 +-
 client/src/js/{logger.js => logger.ts}        |   22 +-
 ...Utils.test.js => micConflictUtils.test.ts} |    0
 ...icConflictUtils.js => micConflictUtils.ts} |  113 +-
 .../{browser.test.js => browser.test.ts}      |    0
 .../js/platform/{browser.js => browser.ts}    |   28 +-
 client/src/js/platform/electron.js            |   88 -
 .../{electron.test.js => electron.test.ts}    |    0
 client/src/js/platform/electron.ts            |   70 +
 client/src/js/platform/index.js               |   38 -
 client/src/js/platform/index.ts               |   15 +
 .../src/js/{scriptUtils.js => scriptUtils.ts} |   10 +-
 client/src/js/{utils.js => utils.ts}          |   18 +-
 client/src/{main.js => main.ts}               |   27 +-
 client/src/mixins/cueDisplayMixin.js          |   35 -
 client/src/mixins/cueDisplayMixin.ts          |   37 +
 client/src/mixins/formValidationMixin.js      |   77 -
 client/src/mixins/formValidationMixin.ts      |   24 +
 client/src/mixins/passwordValidation.js       |   42 -
 client/src/mixins/passwordValidation.ts       |   25 +
 client/src/mixins/scriptDisplayMixin.js       |  157 -
 client/src/mixins/scriptDisplayMixin.ts       |  157 +
 ...ationMixin.js => scriptNavigationMixin.ts} |   46 +-
 client/src/mixins/statsTableMixin.js          |  102 -
 client/src/mixins/statsTableMixin.ts          |   60 +
 client/src/mixins/timelineMixin.js            |  232 --
 client/src/mixins/timelineMixin.ts            |  204 ++
 client/src/router/{index.js => index.ts}      |  130 +-
 client/src/store/modules/{help.js => help.ts} |   61 +-
 .../store/modules/{script.js => script.ts}    |  238 +-
 ...iptConfig.test.js => scriptConfig.test.ts} |    3 +-
 .../{scriptConfig.js => scriptConfig.ts}      |  114 +-
 client/src/store/modules/{show.js => show.ts} |  525 ++--
 .../src/store/modules/{stage.js => stage.ts}  |  359 +--
 .../store/modules/{system.js => system.ts}    |   40 +-
 .../modules/user/{settings.js => settings.ts} |  110 +-
 .../store/modules/user/{user.js => user.ts}   |   95 +-
 .../modules/{websocket.js => websocket.ts}    |   77 +-
 client/src/store/{store.js => store.ts}       |  112 +-
 client/src/types/api/cues.ts                  |   13 +
 client/src/types/api/microphones.ts           |   12 +
 client/src/types/api/script.ts                |   58 +
 client/src/types/api/session.ts               |   28 +
 client/src/types/api/settings.ts              |   11 +
 client/src/types/api/show.ts                  |   54 +
 client/src/types/api/stage.ts                 |   57 +
 client/src/types/api/user.ts                  |   23 +
 client/src/types/api/websocket.ts             |    5 +
 client/src/types/index.ts                     |    9 +
 client/src/types/shims/shims-vue.d.ts         |    4 +
 client/src/types/shims/vendor.d.ts            |   11 +
 client/src/types/shims/vue-shims.d.ts         |   24 +
 client/src/types/store.ts                     |    5 +
 client/src/views/404View.vue                  |    8 +-
 client/src/views/AboutView.vue                |    8 +
 client/src/views/HelpView.vue                 |   31 +-
 client/src/views/HomeView.vue                 |    9 +-
 client/src/views/config/ConfigView.vue        |    7 +-
 client/src/views/electron/ServerSelector.vue  |  456 +--
 client/src/views/help/HelpDocView.vue         |   24 +-
 client/src/views/show/ShowConfigView.vue      |   47 +-
 client/src/views/show/ShowLiveView.vue        |   98 +-
 .../views/show/config/ConfigActsAndScenes.vue |    7 +-
 client/src/views/show/config/ConfigCast.vue   |   75 +-
 .../views/show/config/ConfigCharacters.vue    |   76 +-
 client/src/views/show/config/ConfigCues.vue   |   81 +-
 client/src/views/show/config/ConfigMics.vue   |   21 +-
 client/src/views/show/config/ConfigScript.vue |    7 +-
 .../show/config/ConfigScriptRevisions.vue     |   11 +-
 .../src/views/show/config/ConfigSessions.vue  |   15 +-
 client/src/views/show/config/ConfigShow.vue   |   67 +-
 client/src/views/show/config/ConfigStage.vue  |    7 +-
 .../views/user/ForcePasswordChangeView.vue    |   40 +-
 client/src/views/user/LoginView.vue           |   31 +-
 client/src/views/user/Settings.vue            |    7 +-
 .../src/vue_components/MarkdownRenderer.vue   |   40 +-
 .../src/vue_components/config/ConfigLogs.vue  |  110 +-
 .../vue_components/config/ConfigSettings.vue  |  137 +-
 .../src/vue_components/config/ConfigShows.vue |   78 +-
 .../vue_components/config/ConfigSystem.vue    |   93 +-
 .../src/vue_components/config/ConfigUsers.vue |   47 +-
 .../config/acts_and_scenes/ConfigActs.vue     |   98 +-
 .../config/acts_and_scenes/ConfigScenes.vue   |  205 +-
 .../show/config/cast/CastLineStats.vue        |   26 +-
 .../config/characters/CharacterGroups.vue     |   89 +-
 .../config/characters/CharacterLineStats.vue  |   26 +-
 .../show/config/cues/CueCountStats.vue        |   28 +-
 .../show/config/cues/CueEditor.vue            |   97 +-
 .../show/config/cues/JumpToCueModal.vue       |   67 +-
 .../show/config/cues/ScriptLineCueEditor.vue  |  148 +-
 .../show/config/mics/MicAllocations.vue       |  267 +-
 .../show/config/mics/MicAutoPopulateModal.vue |   51 +-
 .../show/config/mics/MicList.vue              |   63 +-
 .../show/config/mics/MicTimeline.vue          |  197 +-
 .../show/config/mics/ResourceAvailability.vue |   69 +-
 .../show/config/mics/SceneDensityHeatmap.vue  |   75 +-
 .../show/config/script/BulkActSceneModal.vue  |    8 +-
 .../show/config/script/CompiledScripts.vue    |   41 +-
 .../config/script/RevisionDetailModal.vue     |    8 +-
 .../show/config/script/RevisionGraph.vue      |  134 +-
 .../show/config/script/ScriptEditor.vue       |  455 +--
 .../show/config/script/ScriptLineEditor.vue   |  157 +-
 .../show/config/script/ScriptLinePart.vue     |   42 +-
 .../show/config/script/ScriptLineViewer.vue   |   85 +-
 .../show/config/script/ScriptRevisions.vue    |  122 +-
 .../config/script/StageDirectionStyles.vue    |  136 +-
 .../show/config/sessions/SessionList.vue      |   31 +-
 .../config/sessions/SessionTagDropdown.vue    |   31 +-
 .../show/config/sessions/SessionTagList.vue   |  130 +-
 .../show/config/stage/CrewList.vue            |   49 +-
 .../show/config/stage/CrewTimeline.vue        |  140 +-
 .../show/config/stage/PropsList.vue           |  114 +-
 .../show/config/stage/SceneryList.vue         |  111 +-
 .../show/config/stage/StageManager.vue        |  324 +-
 .../show/config/stage/StageTimeline.vue       |  136 +-
 .../show/config/stage/TimelineSidePanel.vue   |  139 +-
 .../show/live/ScriptLineViewer.vue            |   25 +-
 .../show/live/ScriptLineViewerCompact.vue     |   23 +-
 .../show/live/ScriptViewPane.vue              |  249 +-
 .../show/live/StageManagerPane.vue            |  236 +-
 client/src/vue_components/user/ConfigRbac.vue |   13 +-
 client/src/vue_components/user/CreateUser.vue |   46 +-
 .../src/vue_components/user/RbacResource.vue  |   70 +-
 .../src/vue_components/user/ResetPassword.vue |   27 +-
 .../user/settings/AboutUser.vue               |   23 +-
 .../vue_components/user/settings/ApiToken.vue |   39 +-
 .../user/settings/ChangePassword.vue          |   34 +-
 .../user/settings/CueColourPreferences.vue    |  115 +-
 .../vue_components/user/settings/Settings.vue |   29 +-
 .../user/settings/StageDirectionStyles.vue    |  218 +-
 client/tsconfig.json                          |   51 +
 client/{vite.config.js => vite.config.ts}     |    2 +-
 client/{vitest.config.js => vitest.config.ts} |    0
 documentation/development.md                  |    5 +-
 151 files changed, 6211 insertions(+), 7838 deletions(-)
 delete mode 100644 client/babel.config.js
 delete mode 100644 client/eslint.config.mjs
 create mode 100644 client/eslint.config.ts
 rename client/{prettier.config.mjs => prettier.config.ts} (76%)
 delete mode 100644 client/scripts/generate-doc-manifest.js
 create mode 100644 client/scripts/generate-doc-manifest.ts
 rename client/src/constants/{lineTypes.js => lineTypes.ts} (79%)
 rename client/src/constants/{textAlignment.js => textAlignment.ts} (61%)
 rename client/src/js/{blockOrphanUtils.test.js => blockOrphanUtils.test.ts} (100%)
 rename client/src/js/{blockOrphanUtils.js => blockOrphanUtils.ts} (71%)
 delete mode 100644 client/src/js/customValidators.js
 create mode 100644 client/src/js/customValidators.ts
 rename client/src/js/{http-interceptor.js => http-interceptor.ts} (89%)
 rename client/src/js/{logger.js => logger.ts} (86%)
 rename client/src/js/{micConflictUtils.test.js => micConflictUtils.test.ts} (100%)
 rename client/src/js/{micConflictUtils.js => micConflictUtils.ts} (73%)
 rename client/src/js/platform/{browser.test.js => browser.test.ts} (100%)
 rename client/src/js/platform/{browser.js => browser.ts} (51%)
 delete mode 100644 client/src/js/platform/electron.js
 rename client/src/js/platform/{electron.test.js => electron.test.ts} (100%)
 create mode 100644 client/src/js/platform/electron.ts
 delete mode 100644 client/src/js/platform/index.js
 create mode 100644 client/src/js/platform/index.ts
 rename client/src/js/{scriptUtils.js => scriptUtils.ts} (64%)
 rename client/src/js/{utils.js => utils.ts} (77%)
 rename client/src/{main.js => main.ts} (82%)
 delete mode 100644 client/src/mixins/cueDisplayMixin.js
 create mode 100644 client/src/mixins/cueDisplayMixin.ts
 delete mode 100644 client/src/mixins/formValidationMixin.js
 create mode 100644 client/src/mixins/formValidationMixin.ts
 delete mode 100644 client/src/mixins/passwordValidation.js
 create mode 100644 client/src/mixins/passwordValidation.ts
 delete mode 100644 client/src/mixins/scriptDisplayMixin.js
 create mode 100644 client/src/mixins/scriptDisplayMixin.ts
 rename client/src/mixins/{scriptNavigationMixin.js => scriptNavigationMixin.ts} (54%)
 delete mode 100644 client/src/mixins/statsTableMixin.js
 create mode 100644 client/src/mixins/statsTableMixin.ts
 delete mode 100644 client/src/mixins/timelineMixin.js
 create mode 100644 client/src/mixins/timelineMixin.ts
 rename client/src/router/{index.js => index.ts} (62%)
 rename client/src/store/modules/{help.js => help.ts} (66%)
 rename client/src/store/modules/{script.js => script.ts} (58%)
 rename client/src/store/modules/{scriptConfig.test.js => scriptConfig.test.ts} (96%)
 rename client/src/store/modules/{scriptConfig.js => scriptConfig.ts} (66%)
 rename client/src/store/modules/{show.js => show.ts} (60%)
 rename client/src/store/modules/{stage.js => stage.ts} (60%)
 rename client/src/store/modules/{system.js => system.ts} (72%)
 rename client/src/store/modules/user/{settings.js => settings.ts} (59%)
 rename client/src/store/modules/user/{user.js => user.ts} (76%)
 rename client/src/store/modules/{websocket.js => websocket.ts} (74%)
 rename client/src/store/{store.js => store.ts} (61%)
 create mode 100644 client/src/types/api/cues.ts
 create mode 100644 client/src/types/api/microphones.ts
 create mode 100644 client/src/types/api/script.ts
 create mode 100644 client/src/types/api/session.ts
 create mode 100644 client/src/types/api/settings.ts
 create mode 100644 client/src/types/api/show.ts
 create mode 100644 client/src/types/api/stage.ts
 create mode 100644 client/src/types/api/user.ts
 create mode 100644 client/src/types/api/websocket.ts
 create mode 100644 client/src/types/index.ts
 create mode 100644 client/src/types/shims/shims-vue.d.ts
 create mode 100644 client/src/types/shims/vendor.d.ts
 create mode 100644 client/src/types/shims/vue-shims.d.ts
 create mode 100644 client/src/types/store.ts
 create mode 100644 client/tsconfig.json
 rename client/{vite.config.js => vite.config.ts} (98%)
 rename client/{vitest.config.js => vitest.config.ts} (100%)

diff --git a/.github/workflows/nodelint.yml b/.github/workflows/nodelint.yml
index 786f9fea..a5d61413 100644
--- a/.github/workflows/nodelint.yml
+++ b/.github/workflows/nodelint.yml
@@ -17,6 +17,18 @@ jobs:
         node-version: 24
     - run: npm ci
     - run: npm run ci-lint
+  run-typecheck:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./client
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: 24
+    - run: npm ci
+    - run: npm run typecheck
   run-node-lint-electron:
     runs-on: ubuntu-latest
     defaults:
diff --git a/client/babel.config.js b/client/babel.config.js
deleted file mode 100644
index d97bc1ad..00000000
--- a/client/babel.config.js
+++ /dev/null
@@ -1,5 +0,0 @@
-module.exports = {
-  presets: [
-    '@babel/preset-env',
-  ],
-};
diff --git a/client/eslint.config.mjs b/client/eslint.config.mjs
deleted file mode 100644
index 7c58db9d..00000000
--- a/client/eslint.config.mjs
+++ /dev/null
@@ -1,81 +0,0 @@
-import js from '@eslint/js';
-import pluginVue from 'eslint-plugin-vue';
-import globals from 'globals';
-import babelParser from '@babel/eslint-parser';
-import prettierConfig from 'eslint-config-prettier';
-import prettierPlugin from 'eslint-plugin-prettier';
-
-export default [
-  {
-    ignores: [
-      '**/node_modules/**',
-      '**/dist/**',
-      '../server/static/**',
-      'junit/**',
-      '*.backup',
-      'src/docs/**',
-    ],
-  },
-  js.configs.recommended,
-  ...pluginVue.configs['flat/vue2-recommended'],
-  {
-    files: ['**/*.{js,vue}'],
-    plugins: {
-      prettier: prettierPlugin,
-    },
-    languageOptions: {
-      ecmaVersion: 2022,
-      sourceType: 'module',
-      parser: pluginVue.processors['.vue'].parser,
-      parserOptions: {
-        parser: babelParser,
-        requireConfigFile: false,
-        ecmaVersion: 13,
-        sourceType: 'module',
-        babelOptions: {
-          presets: ['@babel/preset-env'],
-        },
-      },
-      globals: {
-        ...globals.browser,
-        ...globals.node,
-        ...globals.es2021,
-      },
-    },
-    rules: {
-      // Prettier integration - runs Prettier as an ESLint rule
-      'prettier/prettier': 'error',
-
-      // Disable formatting rules that conflict with Prettier
-      ...prettierConfig.rules,
-
-      // Let Prettier handle line length (via printWidth config)
-      'max-len': 'off',
-
-      // Custom linting rules (non-formatting)
-      'no-unused-vars': 'off',
-      'vue/no-unused-vars': 'off',
-      'no-plusplus': 'off',
-      'no-param-reassign': [
-        'error',
-        {
-          props: true,
-          ignorePropertyModificationsFor: ['state', 'acc', 'e'],
-        },
-      ],
-    },
-  },
-  {
-    files: ['**/*.test.js'],
-    languageOptions: {
-      globals: {
-        describe: 'readonly',
-        it: 'readonly',
-        expect: 'readonly',
-        vi: 'readonly',
-        beforeEach: 'readonly',
-        afterEach: 'readonly',
-      },
-    },
-  },
-];
\ No newline at end of file
diff --git a/client/eslint.config.ts b/client/eslint.config.ts
new file mode 100644
index 00000000..3e26e78e
--- /dev/null
+++ b/client/eslint.config.ts
@@ -0,0 +1,100 @@
+import js from '@eslint/js';
+import pluginVue from 'eslint-plugin-vue';
+import globals from 'globals';
+import tsParser from '@typescript-eslint/parser';
+import tsPlugin from '@typescript-eslint/eslint-plugin';
+import prettierConfig from 'eslint-config-prettier';
+import prettierPlugin from 'eslint-plugin-prettier';
+
+const sharedRules = {
+  'prettier/prettier': 'error',
+  ...prettierConfig.rules,
+  'max-len': 'off',
+  'no-unused-vars': 'off',
+  'vue/no-unused-vars': 'off',
+  'no-plusplus': 'off',
+  'no-param-reassign': [
+    'error',
+    {
+      props: true,
+      ignorePropertyModificationsFor: ['state', 'acc', 'e'],
+    },
+  ],
+};
+
+const tsRules = {
+  ...tsPlugin.configs.recommended.rules,
+  '@typescript-eslint/no-explicit-any': 'off',
+  '@typescript-eslint/no-unused-vars': 'off',
+  // Vue 2 Options API patterns that are valid in this codebase
+  '@typescript-eslint/no-this-alias': 'off',
+  '@typescript-eslint/ban-types': 'off',
+};
+
+const sharedGlobals = {
+  ...globals.browser,
+  ...globals.node,
+  ...globals.es2021,
+};
+
+export default [
+  {
+    ignores: [
+      '**/node_modules/**',
+      '**/dist/**',
+      '../server/static/**',
+      'junit/**',
+      '*.backup',
+      'src/docs/**',
+    ],
+  },
+  js.configs.recommended,
+  ...pluginVue.configs['flat/vue2-recommended'],
+  // TypeScript source files
+  {
+    files: ['**/*.ts'],
+    plugins: {
+      '@typescript-eslint': tsPlugin,
+      prettier: prettierPlugin,
+    },
+    languageOptions: {
+      parser: tsParser,
+      parserOptions: { ecmaVersion: 2022, sourceType: 'module' },
+      globals: sharedGlobals,
+    },
+    rules: { ...tsRules, ...sharedRules },
+  },
+  // Vue SFCs — all use <script lang="ts">
+  {
+    files: ['**/*.vue'],
+    plugins: {
+      '@typescript-eslint': tsPlugin,
+      prettier: prettierPlugin,
+    },
+    languageOptions: {
+      // eslint-plugin-vue ships vue-eslint-parser as its script block parser
+      parser: (pluginVue.processors as any)['.vue'].parser,
+      parserOptions: {
+        parser: tsParser,
+        ecmaVersion: 2022,
+        sourceType: 'module',
+      },
+      globals: sharedGlobals,
+    },
+    rules: { ...tsRules, ...sharedRules },
+  },
+  // Test files — declare vitest globals
+  {
+    files: ['**/*.test.ts'],
+    languageOptions: {
+      globals: {
+        describe: 'readonly',
+        it: 'readonly',
+        expect: 'readonly',
+        vi: 'readonly',
+        beforeEach: 'readonly',
+        afterEach: 'readonly',
+      },
+    },
+  },
+];
diff --git a/client/index.html b/client/index.html
index 54df7393..46dab65c 100644
--- a/client/index.html
+++ b/client/index.html
@@ -12,7 +12,7 @@
       <strong>We're sorry but DigiScript doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
 
diff --git a/client/package-lock.json b/client/package-lock.json
index e5fdfe3f..c61a6ee7 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -34,11 +34,12 @@
         "vuex-persistedstate": "3.2.1"
       },
       "devDependencies": {
-        "@babel/core": "7.29.0",
-        "@babel/eslint-parser": "7.28.6",
-        "@babel/preset-env": "7.29.5",
         "@eslint/js": "^9.39.2",
+        "@types/lodash": "~4.17.7",
+        "@types/node": "~20.14.0",
         "@types/vuelidate": "^0.7.22",
+        "@typescript-eslint/eslint-plugin": "~7.18.0",
+        "@typescript-eslint/parser": "~7.18.0",
         "@vitejs/plugin-vue2": "2.3.4",
         "@vitest/ui": "^4.1.5",
         "@vue/test-utils": "^2.4.10",
@@ -47,9 +48,11 @@
         "eslint-plugin-prettier": "^5.5.5",
         "eslint-plugin-vue": "^9.33.0",
         "globals": "^15.14.0",
+        "jiti": "^2.7.0",
         "jsdom": "^27.4.0",
         "prettier": "^3.8.3",
         "sass": "1.99.0",
+        "typescript": "~5.4.5",
         "vite": "^7.3.3",
         "vitest": "^4.1.5"
       },
@@ -120,1538 +123,37 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@babel/code-frame": {
-      "version": "7.29.0",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz",
-      "integrity": "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.28.5",
-        "js-tokens": "^4.0.0",
-        "picocolors": "^1.1.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/compat-data": {
-      "version": "7.29.3",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.3.tgz",
-      "integrity": "sha512-LIVqM46zQWZhj17qA8wb4nW/ixr2y1Nw+r1etiAWgRM6U1IqP+LNhL1yg440jYZR72jCWcWbLWzIosH+uP1fqg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/core": {
-      "version": "7.29.0",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.0.tgz",
-      "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/code-frame": "^7.29.0",
-        "@babel/generator": "^7.29.0",
-        "@babel/helper-compilation-targets": "^7.28.6",
-        "@babel/helper-module-transforms": "^7.28.6",
-        "@babel/helpers": "^7.28.6",
-        "@babel/parser": "^7.29.0",
-        "@babel/template": "^7.28.6",
-        "@babel/traverse": "^7.29.0",
-        "@babel/types": "^7.29.0",
-        "@jridgewell/remapping": "^2.3.5",
-        "convert-source-map": "^2.0.0",
-        "debug": "^4.1.0",
-        "gensync": "^1.0.0-beta.2",
-        "json5": "^2.2.3",
-        "semver": "^6.3.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/babel"
-      }
-    },
-    "node_modules/@babel/eslint-parser": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.28.6.tgz",
-      "integrity": "sha512-QGmsKi2PBO/MHSQk+AAgA9R6OHQr+VqnniFE0eMWZcVcfBZoA2dKn2hUsl3Csg/Plt9opRUWdY7//VXsrIlEiA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@nicolo-ribaudo/eslint-scope-5-internals": "5.1.1-v1",
-        "eslint-visitor-keys": "^2.1.0",
-        "semver": "^6.3.1"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || >=14.0.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.11.0",
-        "eslint": "^7.5.0 || ^8.0.0 || ^9.0.0"
-      }
-    },
-    "node_modules/@babel/generator": {
-      "version": "7.29.1",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.1.tgz",
-      "integrity": "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/parser": "^7.29.0",
-        "@babel/types": "^7.29.0",
-        "@jridgewell/gen-mapping": "^0.3.12",
-        "@jridgewell/trace-mapping": "^0.3.28",
-        "jsesc": "^3.0.2"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-annotate-as-pure": {
-      "version": "7.27.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.27.3.tgz",
-      "integrity": "sha512-fXSwMQqitTGeHLBC08Eq5yXz2m37E4pJX1qAU1+2cNedz/ifv/bVXft90VeSav5nFO61EcNgwr0aJxbyPaWBPg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/types": "^7.27.3"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-compilation-targets": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.28.6.tgz",
-      "integrity": "sha512-JYtls3hqi15fcx5GaSNL7SCTJ2MNmjrkHXg4FSpOA/grxK8KwyZ5bubHsCq8FXCkua6xhuaaBit+3b7+VZRfcA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/compat-data": "^7.28.6",
-        "@babel/helper-validator-option": "^7.27.1",
-        "browserslist": "^4.24.0",
-        "lru-cache": "^5.1.1",
-        "semver": "^6.3.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-create-class-features-plugin": {
-      "version": "7.29.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.29.3.tgz",
-      "integrity": "sha512-RpLYy2sb51oNLjuu1iD3bwBqCBWUzjO0ocp+iaCP/lJtb2CPLcnC2Fftw+4sAzaMELGeWTgExSKADbdo0GFVzA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.27.3",
-        "@babel/helper-member-expression-to-functions": "^7.28.5",
-        "@babel/helper-optimise-call-expression": "^7.27.1",
-        "@babel/helper-replace-supers": "^7.28.6",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1",
-        "@babel/traverse": "^7.29.0",
-        "semver": "^6.3.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
-      }
-    },
-    "node_modules/@babel/helper-create-regexp-features-plugin": {
-      "version": "7.28.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.28.5.tgz",
-      "integrity": "sha512-N1EhvLtHzOvj7QQOUCCS3NrPJP8c5W6ZXCHDn7Yialuy1iu4r5EmIYkXlKNqT99Ciw+W0mDqWoR6HWMZlFP3hw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.27.3",
-        "regexpu-core": "^6.3.1",
-        "semver": "^6.3.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
-      }
-    },
-    "node_modules/@babel/helper-define-polyfill-provider": {
-      "version": "0.6.8",
-      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.6.8.tgz",
-      "integrity": "sha512-47UwBLPpQi1NoWzLuHNjRoHlYXMwIJoBf7MFou6viC/sIHWYygpvr0B6IAyh5sBdA2nr2LPIRww8lfaUVQINBA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-compilation-targets": "^7.28.6",
-        "@babel/helper-plugin-utils": "^7.28.6",
-        "debug": "^4.4.3",
-        "lodash.debounce": "^4.0.8",
-        "resolve": "^1.22.11"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
-      }
-    },
-    "node_modules/@babel/helper-globals": {
-      "version": "7.28.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
-      "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-member-expression-to-functions": {
-      "version": "7.28.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.28.5.tgz",
-      "integrity": "sha512-cwM7SBRZcPCLgl8a7cY0soT1SptSzAlMH39vwiRpOQkJlh53r5hdHwLSCZpQdVLT39sZt+CRpNwYG4Y2v77atg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/traverse": "^7.28.5",
-        "@babel/types": "^7.28.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-module-imports": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.28.6.tgz",
-      "integrity": "sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/traverse": "^7.28.6",
-        "@babel/types": "^7.28.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-module-transforms": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.28.6.tgz",
-      "integrity": "sha512-67oXFAYr2cDLDVGLXTEABjdBJZ6drElUSI7WKp70NrpyISso3plG9SAGEF6y7zbha/wOzUByWWTJvEDVNIUGcA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-module-imports": "^7.28.6",
-        "@babel/helper-validator-identifier": "^7.28.5",
-        "@babel/traverse": "^7.28.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
-      }
-    },
-    "node_modules/@babel/helper-optimise-call-expression": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.27.1.tgz",
-      "integrity": "sha512-URMGH08NzYFhubNSGJrpUEphGKQwMQYBySzat5cAByY1/YgIRkULnIy3tAMeszlL/so2HbeilYloUmSpd7GdVw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/types": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-plugin-utils": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.28.6.tgz",
-      "integrity": "sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-remap-async-to-generator": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.27.1.tgz",
-      "integrity": "sha512-7fiA521aVw8lSPeI4ZOD3vRFkoqkJcS+z4hFo82bFSH/2tNd6eJ5qCVMS5OzDmZh/kaHQeBaeyxK6wljcPtveA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.27.1",
-        "@babel/helper-wrap-function": "^7.27.1",
-        "@babel/traverse": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
-      }
-    },
-    "node_modules/@babel/helper-replace-supers": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.28.6.tgz",
-      "integrity": "sha512-mq8e+laIk94/yFec3DxSjCRD2Z0TAjhVbEJY3UQrlwVo15Lmt7C2wAUbK4bjnTs4APkwsYLTahXRraQXhb1WCg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-member-expression-to-functions": "^7.28.5",
-        "@babel/helper-optimise-call-expression": "^7.27.1",
-        "@babel/traverse": "^7.28.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
-      }
-    },
-    "node_modules/@babel/helper-skip-transparent-expression-wrappers": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.27.1.tgz",
-      "integrity": "sha512-Tub4ZKEXqbPjXgWLl2+3JpQAYBJ8+ikpQ2Ocj/q/r0LwE3UhENh7EUabyHjz2kCEsrRY83ew2DQdHluuiDQFzg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/traverse": "^7.27.1",
-        "@babel/types": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-string-parser": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
-      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.28.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
-      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-validator-option": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz",
-      "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-wrap-function": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.28.6.tgz",
-      "integrity": "sha512-z+PwLziMNBeSQJonizz2AGnndLsP2DeGHIxDAn+wdHOGuo4Fo1x1HBPPXeE9TAOPHNNWQKCSlA2VZyYyyibDnQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/template": "^7.28.6",
-        "@babel/traverse": "^7.28.6",
-        "@babel/types": "^7.28.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helpers": {
-      "version": "7.29.2",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.29.2.tgz",
-      "integrity": "sha512-HoGuUs4sCZNezVEKdVcwqmZN8GoHirLUcLaYVNBK2J0DadGtdcqgr3BCbvH8+XUo4NGjNl3VOtSjEKNzqfFgKw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/template": "^7.28.6",
-        "@babel/types": "^7.29.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/parser": {
-      "version": "7.29.3",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.3.tgz",
-      "integrity": "sha512-b3ctpQwp+PROvU/cttc4OYl4MzfJUWy6FZg+PMXfzmt/+39iHVF0sDfqay8TQM3JA2EUOyKcFZt75jWriQijsA==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/types": "^7.29.0"
-      },
-      "bin": {
-        "parser": "bin/babel-parser.js"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/@babel/plugin-bugfix-firefox-class-in-computed-class-key": {
-      "version": "7.28.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-firefox-class-in-computed-class-key/-/plugin-bugfix-firefox-class-in-computed-class-key-7.28.5.tgz",
-      "integrity": "sha512-87GDMS3tsmMSi/3bWOte1UblL+YUTFMV8SZPZ2eSEL17s74Cw/l63rR6NmGVKMYW2GYi85nE+/d6Hw5N0bEk2Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1",
-        "@babel/traverse": "^7.28.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
-      }
-    },
-    "node_modules/@babel/plugin-bugfix-safari-class-field-initializer-scope": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-class-field-initializer-scope/-/plugin-bugfix-safari-class-field-initializer-scope-7.27.1.tgz",
-      "integrity": "sha512-qNeq3bCKnGgLkEXUuFry6dPlGfCdQNZbn7yUAPCInwAJHMU7THJfrBSozkcWq5sNM6RcF3S8XyQL2A52KNR9IA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
-      }
-    },
-    "node_modules/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.27.1.tgz",
-      "integrity": "sha512-g4L7OYun04N1WyqMNjldFwlfPCLVkgB54A/YCXICZYBsvJJE3kByKv9c9+R/nAfmIfjl2rKYLNyMHboYbZaWaA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
-      }
-    },
-    "node_modules/@babel/plugin-bugfix-safari-rest-destructuring-rhs-array": {
-      "version": "7.29.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-rest-destructuring-rhs-array/-/plugin-bugfix-safari-rest-destructuring-rhs-array-7.29.3.tgz",
-      "integrity": "sha512-SRS46DFR4HqzUzCVgi90/xMoL+zeBDBvWdKYXSEzh79kXswNFEglUpMKxR04//dPqwYXWUBJ3mpUd933ru9Kmg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.28.6",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
-      }
-    },
-    "node_modules/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.27.1.tgz",
-      "integrity": "sha512-oO02gcONcD5O1iTLi/6frMJBIwWEHceWGSGqrpCmEL8nogiS6J9PBlE48CaK20/Jx1LuRml9aDftLgdjXT8+Cw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1",
-        "@babel/plugin-transform-optional-chaining": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.13.0"
-      }
-    },
-    "node_modules/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.28.6.tgz",
-      "integrity": "sha512-a0aBScVTlNaiUe35UtfxAN7A/tehvvG4/ByO6+46VPKTRSlfnAFsgKy0FUh+qAkQrDTmhDkT+IBOKlOoMUxQ0g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.28.6",
-        "@babel/traverse": "^7.28.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
-      }
-    },
-    "node_modules/@babel/plugin-proposal-private-property-in-object": {
-      "version": "7.21.0-placeholder-for-preset-env.2",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
-      "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-import-assertions": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.28.6.tgz",
-      "integrity": "sha512-pSJUpFHdx9z5nqTSirOCMtYVP2wFgoWhP0p3g8ONK/4IHhLIBd0B9NYqAvIUAhq+OkhO4VM1tENCt0cjlsNShw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.28.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-import-attributes": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.28.6.tgz",
-      "integrity": "sha512-jiLC0ma9XkQT3TKJ9uYvlakm66Pamywo+qwL+oL8HJOvc6TWdZXVfhqJr8CCzbSGUAbDOzlGHJC1U+vRfLQDvw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.28.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-unicode-sets-regex": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz",
-      "integrity": "sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-arrow-functions": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.27.1.tgz",
-      "integrity": "sha512-8Z4TGic6xW70FKThA5HYEKKyBpOOsucTOD1DjU3fZxDg+K3zBJcXMFnt/4yQiZnf5+MiOMSXQ9PaEK/Ilh1DeA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-async-generator-functions": {
-      "version": "7.29.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.29.0.tgz",
-      "integrity": "sha512-va0VdWro4zlBr2JsXC+ofCPB2iG12wPtVGTWFx2WLDOM3nYQZZIGP82qku2eW/JR83sD+k2k+CsNtyEbUqhU6w==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.28.6",
-        "@babel/helper-remap-async-to-generator": "^7.27.1",
-        "@babel/traverse": "^7.29.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-async-to-generator": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.28.6.tgz",
-      "integrity": "sha512-ilTRcmbuXjsMmcZ3HASTe4caH5Tpo93PkTxF9oG2VZsSWsahydmcEHhix9Ik122RcTnZnUzPbmux4wh1swfv7g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-module-imports": "^7.28.6",
-        "@babel/helper-plugin-utils": "^7.28.6",
-        "@babel/helper-remap-async-to-generator": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-block-scoped-functions": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.27.1.tgz",
-      "integrity": "sha512-cnqkuOtZLapWYZUYM5rVIdv1nXYuFVIltZ6ZJ7nIj585QsjKM5dhL2Fu/lICXZ1OyIAFc7Qy+bvDAtTXqGrlhg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-block-scoping": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.28.6.tgz",
-      "integrity": "sha512-tt/7wOtBmwHPNMPu7ax4pdPz6shjFrmHDghvNC+FG9Qvj7D6mJcoRQIF5dy4njmxR941l6rgtvfSB2zX3VlUIw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.28.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-class-properties": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.28.6.tgz",
-      "integrity": "sha512-dY2wS3I2G7D697VHndN91TJr8/AAfXQNt5ynCTI/MpxMsSzHp+52uNivYT5wCPax3whc47DR8Ba7cmlQMg24bw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-create-class-features-plugin": "^7.28.6",
-        "@babel/helper-plugin-utils": "^7.28.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-class-static-block": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.28.6.tgz",
-      "integrity": "sha512-rfQ++ghVwTWTqQ7w8qyDxL1XGihjBss4CmTgGRCTAC9RIbhVpyp4fOeZtta0Lbf+dTNIVJer6ych2ibHwkZqsQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-create-class-features-plugin": "^7.28.6",
-        "@babel/helper-plugin-utils": "^7.28.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.12.0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-classes": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.28.6.tgz",
-      "integrity": "sha512-EF5KONAqC5zAqT783iMGuM2ZtmEBy+mJMOKl2BCvPZ2lVrwvXnB6o+OBWCS+CoeCCpVRF2sA2RBKUxvT8tQT5Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.27.3",
-        "@babel/helper-compilation-targets": "^7.28.6",
-        "@babel/helper-globals": "^7.28.0",
-        "@babel/helper-plugin-utils": "^7.28.6",
-        "@babel/helper-replace-supers": "^7.28.6",
-        "@babel/traverse": "^7.28.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-computed-properties": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.28.6.tgz",
-      "integrity": "sha512-bcc3k0ijhHbc2lEfpFHgx7eYw9KNXqOerKWfzbxEHUGKnS3sz9C4CNL9OiFN1297bDNfUiSO7DaLzbvHQQQ1BQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.28.6",
-        "@babel/template": "^7.28.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-destructuring": {
-      "version": "7.28.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.28.5.tgz",
-      "integrity": "sha512-Kl9Bc6D0zTUcFUvkNuQh4eGXPKKNDOJQXVyyM4ZAQPMveniJdxi8XMJwLo+xSoW3MIq81bD33lcUe9kZpl0MCw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1",
-        "@babel/traverse": "^7.28.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-dotall-regex": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.28.6.tgz",
-      "integrity": "sha512-SljjowuNKB7q5Oayv4FoPzeB74g3QgLt8IVJw9ADvWy3QnUb/01aw8I4AVv8wYnPvQz2GDDZ/g3GhcNyDBI4Bg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.28.5",
-        "@babel/helper-plugin-utils": "^7.28.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-duplicate-keys": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.27.1.tgz",
-      "integrity": "sha512-MTyJk98sHvSs+cvZ4nOauwTTG1JeonDjSGvGGUNHreGQns+Mpt6WX/dVzWBHgg+dYZhkC4X+zTDfkTU+Vy9y7Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-duplicate-named-capturing-groups-regex": {
-      "version": "7.29.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-named-capturing-groups-regex/-/plugin-transform-duplicate-named-capturing-groups-regex-7.29.0.tgz",
-      "integrity": "sha512-zBPcW2lFGxdiD8PUnPwJjag2J9otbcLQzvbiOzDxpYXyCuYX9agOwMPGn1prVH0a4qzhCKu24rlH4c1f7yA8rw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.28.5",
-        "@babel/helper-plugin-utils": "^7.28.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-dynamic-import": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.27.1.tgz",
-      "integrity": "sha512-MHzkWQcEmjzzVW9j2q8LGjwGWpG2mjwaaB0BNQwst3FIjqsg8Ct/mIZlvSPJvfi9y2AC8mi/ktxbFVL9pZ1I4A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-explicit-resource-management": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-explicit-resource-management/-/plugin-transform-explicit-resource-management-7.28.6.tgz",
-      "integrity": "sha512-Iao5Konzx2b6g7EPqTy40UZbcdXE126tTxVFr/nAIj+WItNxjKSYTEw3RC+A2/ZetmdJsgueL1KhaMCQHkLPIg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.28.6",
-        "@babel/plugin-transform-destructuring": "^7.28.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-exponentiation-operator": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.28.6.tgz",
-      "integrity": "sha512-WitabqiGjV/vJ0aPOLSFfNY1u9U3R7W36B03r5I2KoNix+a3sOhJ3pKFB3R5It9/UiK78NiO0KE9P21cMhlPkw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.28.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-export-namespace-from": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.27.1.tgz",
-      "integrity": "sha512-tQvHWSZ3/jH2xuq/vZDy0jNn+ZdXJeM8gHvX4lnJmsc3+50yPlWdZXIc5ay+umX+2/tJIqHqiEqcJvxlmIvRvQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-for-of": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.27.1.tgz",
-      "integrity": "sha512-BfbWFFEJFQzLCQ5N8VocnCtA8J1CLkNTe2Ms2wocj75dd6VpiqS5Z5quTYcUoo4Yq+DN0rtikODccuv7RU81sw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-function-name": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.27.1.tgz",
-      "integrity": "sha512-1bQeydJF9Nr1eBCMMbC+hdwmRlsv5XYOMu03YSWFwNs0HsAmtSxxF1fyuYPqemVldVyFmlCU7w8UE14LupUSZQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-compilation-targets": "^7.27.1",
-        "@babel/helper-plugin-utils": "^7.27.1",
-        "@babel/traverse": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-json-strings": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.28.6.tgz",
-      "integrity": "sha512-Nr+hEN+0geQkzhbdgQVPoqr47lZbm+5fCUmO70722xJZd0Mvb59+33QLImGj6F+DkK3xgDi1YVysP8whD6FQAw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.28.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-literals": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.27.1.tgz",
-      "integrity": "sha512-0HCFSepIpLTkLcsi86GG3mTUzxV5jpmbv97hTETW3yzrAij8aqlD36toB1D0daVFJM8NK6GvKO0gslVQmm+zZA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-logical-assignment-operators": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.28.6.tgz",
-      "integrity": "sha512-+anKKair6gpi8VsM/95kmomGNMD0eLz1NQ8+Pfw5sAwWH9fGYXT50E55ZpV0pHUHWf6IUTWPM+f/7AAff+wr9A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.28.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-member-expression-literals": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.27.1.tgz",
-      "integrity": "sha512-hqoBX4dcZ1I33jCSWcXrP+1Ku7kdqXf1oeah7ooKOIiAdKQ+uqftgCFNOSzA5AMS2XIHEYeGFg4cKRCdpxzVOQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-modules-amd": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.27.1.tgz",
-      "integrity": "sha512-iCsytMg/N9/oFq6n+gFTvUYDZQOMK5kEdeYxmxt91fcJGycfxVP9CnrxoliM0oumFERba2i8ZtwRUCMhvP1LnA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-module-transforms": "^7.27.1",
-        "@babel/helper-plugin-utils": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-modules-commonjs": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.28.6.tgz",
-      "integrity": "sha512-jppVbf8IV9iWWwWTQIxJMAJCWBuuKx71475wHwYytrRGQ2CWiDvYlADQno3tcYpS/T2UUWFQp3nVtYfK/YBQrA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-module-transforms": "^7.28.6",
-        "@babel/helper-plugin-utils": "^7.28.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-modules-systemjs": {
-      "version": "7.29.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.29.4.tgz",
-      "integrity": "sha512-N7QmZ0xRZfjHOfZeQLJjwgX2zS9pdGHSVl/cjSGlo4dXMqvurfxXDMKY4RqEKzPozV78VMcd0lxyG13mlbKc4w==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-module-transforms": "^7.28.6",
-        "@babel/helper-plugin-utils": "^7.28.6",
-        "@babel/helper-validator-identifier": "^7.28.5",
-        "@babel/traverse": "^7.29.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-modules-umd": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.27.1.tgz",
-      "integrity": "sha512-iQBE/xC5BV1OxJbp6WG7jq9IWiD+xxlZhLrdwpPkTX3ydmXdvoCpyfJN7acaIBZaOqTfr76pgzqBJflNbeRK+w==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-module-transforms": "^7.27.1",
-        "@babel/helper-plugin-utils": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-named-capturing-groups-regex": {
-      "version": "7.29.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.29.0.tgz",
-      "integrity": "sha512-1CZQA5KNAD6ZYQLPw7oi5ewtDNxH/2vuCh+6SmvgDfhumForvs8a1o9n0UrEoBD8HU4djO2yWngTQlXl1NDVEQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.28.5",
-        "@babel/helper-plugin-utils": "^7.28.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-new-target": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.27.1.tgz",
-      "integrity": "sha512-f6PiYeqXQ05lYq3TIfIDu/MtliKUbNwkGApPUvyo6+tc7uaR4cPjPe7DFPr15Uyycg2lZU6btZ575CuQoYh7MQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-nullish-coalescing-operator": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.28.6.tgz",
-      "integrity": "sha512-3wKbRgmzYbw24mDJXT7N+ADXw8BC/imU9yo9c9X9NKaLF1fW+e5H1U5QjMUBe4Qo4Ox/o++IyUkl1sVCLgevKg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.28.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-numeric-separator": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.28.6.tgz",
-      "integrity": "sha512-SJR8hPynj8outz+SlStQSwvziMN4+Bq99it4tMIf5/Caq+3iOc0JtKyse8puvyXkk3eFRIA5ID/XfunGgO5i6w==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.28.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-object-rest-spread": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.28.6.tgz",
-      "integrity": "sha512-5rh+JR4JBC4pGkXLAcYdLHZjXudVxWMXbB6u6+E9lRL5TrGVbHt1TjxGbZ8CkmYw9zjkB7jutzOROArsqtncEA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-compilation-targets": "^7.28.6",
-        "@babel/helper-plugin-utils": "^7.28.6",
-        "@babel/plugin-transform-destructuring": "^7.28.5",
-        "@babel/plugin-transform-parameters": "^7.27.7",
-        "@babel/traverse": "^7.28.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-object-super": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.27.1.tgz",
-      "integrity": "sha512-SFy8S9plRPbIcxlJ8A6mT/CxFdJx/c04JEctz4jf8YZaVS2px34j7NXRrlGlHkN/M2gnpL37ZpGRGVFLd3l8Ng==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1",
-        "@babel/helper-replace-supers": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-optional-catch-binding": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.28.6.tgz",
-      "integrity": "sha512-R8ja/Pyrv0OGAvAXQhSTmWyPJPml+0TMqXlO5w+AsMEiwb2fg3WkOvob7UxFSL3OIttFSGSRFKQsOhJ/X6HQdQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.28.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-optional-chaining": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.28.6.tgz",
-      "integrity": "sha512-A4zobikRGJTsX9uqVFdafzGkqD30t26ck2LmOzAuLL8b2x6k3TIqRiT2xVvA9fNmFeTX484VpsdgmKNA0bS23w==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.28.6",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-parameters": {
-      "version": "7.27.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.27.7.tgz",
-      "integrity": "sha512-qBkYTYCb76RRxUM6CcZA5KRu8K4SM8ajzVeUgVdMVO9NN9uI/GaVmBg/WKJJGnNokV9SY8FxNOVWGXzqzUidBg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-private-methods": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.28.6.tgz",
-      "integrity": "sha512-piiuapX9CRv7+0st8lmuUlRSmX6mBcVeNQ1b4AYzJxfCMuBfB0vBXDiGSmm03pKJw1v6cZ8KSeM+oUnM6yAExg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-create-class-features-plugin": "^7.28.6",
-        "@babel/helper-plugin-utils": "^7.28.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-private-property-in-object": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.28.6.tgz",
-      "integrity": "sha512-b97jvNSOb5+ehyQmBpmhOCiUC5oVK4PMnpRvO7+ymFBoqYjeDHIU9jnrNUuwHOiL9RpGDoKBpSViarV+BU+eVA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.27.3",
-        "@babel/helper-create-class-features-plugin": "^7.28.6",
-        "@babel/helper-plugin-utils": "^7.28.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-property-literals": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.27.1.tgz",
-      "integrity": "sha512-oThy3BCuCha8kDZ8ZkgOg2exvPYUlprMukKQXI1r1pJ47NCvxfkEy8vK+r/hT9nF0Aa4H1WUPZZjHTFtAhGfmQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-regenerator": {
-      "version": "7.29.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.29.0.tgz",
-      "integrity": "sha512-FijqlqMA7DmRdg/aINBSs04y8XNTYw/lr1gJ2WsmBnnaNw1iS43EPkJW+zK7z65auG3AWRFXWj+NcTQwYptUog==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.28.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-regexp-modifiers": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regexp-modifiers/-/plugin-transform-regexp-modifiers-7.28.6.tgz",
-      "integrity": "sha512-QGWAepm9qxpaIs7UM9FvUSnCGlb8Ua1RhyM4/veAxLwt3gMat/LSGrZixyuj4I6+Kn9iwvqCyPTtbdxanYoWYg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.28.5",
-        "@babel/helper-plugin-utils": "^7.28.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-reserved-words": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.27.1.tgz",
-      "integrity": "sha512-V2ABPHIJX4kC7HegLkYoDpfg9PVmuWy/i6vUM5eGK22bx4YVFD3M5F0QQnWQoDs6AGsUWTVOopBiMFQgHaSkVw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-shorthand-properties": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.27.1.tgz",
-      "integrity": "sha512-N/wH1vcn4oYawbJ13Y/FxcQrWk63jhfNa7jef0ih7PHSIHX2LB7GWE1rkPrOnka9kwMxb6hMl19p7lidA+EHmQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-spread": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.28.6.tgz",
-      "integrity": "sha512-9U4QObUC0FtJl05AsUcodau/RWDytrU6uKgkxu09mLR9HLDAtUMoPuuskm5huQsoktmsYpI+bGmq+iapDcriKA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.28.6",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-sticky-regex": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.27.1.tgz",
-      "integrity": "sha512-lhInBO5bi/Kowe2/aLdBAawijx+q1pQzicSgnkB6dUPc1+RC8QmJHKf2OjvU+NZWitguJHEaEmbV6VWEouT58g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-template-literals": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.27.1.tgz",
-      "integrity": "sha512-fBJKiV7F2DxZUkg5EtHKXQdbsbURW3DZKQUWphDum0uRP6eHGGa/He9mc0mypL680pb+e/lDIthRohlv8NCHkg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-typeof-symbol": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.27.1.tgz",
-      "integrity": "sha512-RiSILC+nRJM7FY5srIyc4/fGIwUhyDuuBSdWn4y6yT6gm652DpCHZjIipgn6B7MQ1ITOUnAKWixEUjQRIBIcLw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-unicode-escapes": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.27.1.tgz",
-      "integrity": "sha512-Ysg4v6AmF26k9vpfFuTZg8HRfVWzsh1kVfowA23y9j/Gu6dOuahdUVhkLqpObp3JIv27MLSii6noRnuKN8H0Mg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-unicode-property-regex": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.28.6.tgz",
-      "integrity": "sha512-4Wlbdl/sIZjzi/8St0evF0gEZrgOswVO6aOzqxh1kDZOl9WmLrHq2HtGhnOJZmHZYKP8WZ1MDLCt5DAWwRo57A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.28.5",
-        "@babel/helper-plugin-utils": "^7.28.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-unicode-regex": {
+    "node_modules/@babel/helper-string-parser": {
       "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.27.1.tgz",
-      "integrity": "sha512-xvINq24TRojDuyt6JGtHmkVkrfVV3FPT16uytxImLeBZqW3/H52yN+kM1MGuyPkIQxrzKwPHs5U/MP3qKyzkGw==",
-      "dev": true,
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
       "license": "MIT",
-      "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.27.1",
-        "@babel/helper-plugin-utils": "^7.27.1"
-      },
       "engines": {
         "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-unicode-sets-regex": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.28.6.tgz",
-      "integrity": "sha512-/wHc/paTUmsDYN7SZkpWxogTOBNnlx7nBQYfy6JJlCT7G3mVhltk3e++N7zV0XfgGsrqBxd4rJQt9H16I21Y1Q==",
-      "dev": true,
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
+      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
       "license": "MIT",
-      "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.28.5",
-        "@babel/helper-plugin-utils": "^7.28.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
-      }
-    },
-    "node_modules/@babel/preset-env": {
-      "version": "7.29.5",
-      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.29.5.tgz",
-      "integrity": "sha512-/69t2aEzGKHD76DyLbHysF/QH2LJOB8iFnYO37unDTKBTubzcMRv0f3H5EiN1Q6ajOd/eB7dAInF0qdFVS06kA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/compat-data": "^7.29.3",
-        "@babel/helper-compilation-targets": "^7.28.6",
-        "@babel/helper-plugin-utils": "^7.28.6",
-        "@babel/helper-validator-option": "^7.27.1",
-        "@babel/plugin-bugfix-firefox-class-in-computed-class-key": "^7.28.5",
-        "@babel/plugin-bugfix-safari-class-field-initializer-scope": "^7.27.1",
-        "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.27.1",
-        "@babel/plugin-bugfix-safari-rest-destructuring-rhs-array": "^7.29.3",
-        "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.27.1",
-        "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "^7.28.6",
-        "@babel/plugin-proposal-private-property-in-object": "7.21.0-placeholder-for-preset-env.2",
-        "@babel/plugin-syntax-import-assertions": "^7.28.6",
-        "@babel/plugin-syntax-import-attributes": "^7.28.6",
-        "@babel/plugin-syntax-unicode-sets-regex": "^7.18.6",
-        "@babel/plugin-transform-arrow-functions": "^7.27.1",
-        "@babel/plugin-transform-async-generator-functions": "^7.29.0",
-        "@babel/plugin-transform-async-to-generator": "^7.28.6",
-        "@babel/plugin-transform-block-scoped-functions": "^7.27.1",
-        "@babel/plugin-transform-block-scoping": "^7.28.6",
-        "@babel/plugin-transform-class-properties": "^7.28.6",
-        "@babel/plugin-transform-class-static-block": "^7.28.6",
-        "@babel/plugin-transform-classes": "^7.28.6",
-        "@babel/plugin-transform-computed-properties": "^7.28.6",
-        "@babel/plugin-transform-destructuring": "^7.28.5",
-        "@babel/plugin-transform-dotall-regex": "^7.28.6",
-        "@babel/plugin-transform-duplicate-keys": "^7.27.1",
-        "@babel/plugin-transform-duplicate-named-capturing-groups-regex": "^7.29.0",
-        "@babel/plugin-transform-dynamic-import": "^7.27.1",
-        "@babel/plugin-transform-explicit-resource-management": "^7.28.6",
-        "@babel/plugin-transform-exponentiation-operator": "^7.28.6",
-        "@babel/plugin-transform-export-namespace-from": "^7.27.1",
-        "@babel/plugin-transform-for-of": "^7.27.1",
-        "@babel/plugin-transform-function-name": "^7.27.1",
-        "@babel/plugin-transform-json-strings": "^7.28.6",
-        "@babel/plugin-transform-literals": "^7.27.1",
-        "@babel/plugin-transform-logical-assignment-operators": "^7.28.6",
-        "@babel/plugin-transform-member-expression-literals": "^7.27.1",
-        "@babel/plugin-transform-modules-amd": "^7.27.1",
-        "@babel/plugin-transform-modules-commonjs": "^7.28.6",
-        "@babel/plugin-transform-modules-systemjs": "^7.29.4",
-        "@babel/plugin-transform-modules-umd": "^7.27.1",
-        "@babel/plugin-transform-named-capturing-groups-regex": "^7.29.0",
-        "@babel/plugin-transform-new-target": "^7.27.1",
-        "@babel/plugin-transform-nullish-coalescing-operator": "^7.28.6",
-        "@babel/plugin-transform-numeric-separator": "^7.28.6",
-        "@babel/plugin-transform-object-rest-spread": "^7.28.6",
-        "@babel/plugin-transform-object-super": "^7.27.1",
-        "@babel/plugin-transform-optional-catch-binding": "^7.28.6",
-        "@babel/plugin-transform-optional-chaining": "^7.28.6",
-        "@babel/plugin-transform-parameters": "^7.27.7",
-        "@babel/plugin-transform-private-methods": "^7.28.6",
-        "@babel/plugin-transform-private-property-in-object": "^7.28.6",
-        "@babel/plugin-transform-property-literals": "^7.27.1",
-        "@babel/plugin-transform-regenerator": "^7.29.0",
-        "@babel/plugin-transform-regexp-modifiers": "^7.28.6",
-        "@babel/plugin-transform-reserved-words": "^7.27.1",
-        "@babel/plugin-transform-shorthand-properties": "^7.27.1",
-        "@babel/plugin-transform-spread": "^7.28.6",
-        "@babel/plugin-transform-sticky-regex": "^7.27.1",
-        "@babel/plugin-transform-template-literals": "^7.27.1",
-        "@babel/plugin-transform-typeof-symbol": "^7.27.1",
-        "@babel/plugin-transform-unicode-escapes": "^7.27.1",
-        "@babel/plugin-transform-unicode-property-regex": "^7.28.6",
-        "@babel/plugin-transform-unicode-regex": "^7.27.1",
-        "@babel/plugin-transform-unicode-sets-regex": "^7.28.6",
-        "@babel/preset-modules": "0.1.6-no-external-plugins",
-        "babel-plugin-polyfill-corejs2": "^0.4.15",
-        "babel-plugin-polyfill-corejs3": "^0.14.0",
-        "babel-plugin-polyfill-regenerator": "^0.6.6",
-        "core-js-compat": "^3.48.0",
-        "semver": "^6.3.1"
-      },
       "engines": {
         "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/preset-modules": {
-      "version": "0.1.6-no-external-plugins",
-      "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.6-no-external-plugins.tgz",
-      "integrity": "sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.0.0",
-        "@babel/types": "^7.4.4",
-        "esutils": "^2.0.2"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0 || ^8.0.0-0 <8.0.0"
       }
     },
-    "node_modules/@babel/template": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.28.6.tgz",
-      "integrity": "sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==",
-      "dev": true,
+    "node_modules/@babel/parser": {
+      "version": "7.29.3",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.3.tgz",
+      "integrity": "sha512-b3ctpQwp+PROvU/cttc4OYl4MzfJUWy6FZg+PMXfzmt/+39iHVF0sDfqay8TQM3JA2EUOyKcFZt75jWriQijsA==",
       "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.28.6",
-        "@babel/parser": "^7.28.6",
-        "@babel/types": "^7.28.6"
+        "@babel/types": "^7.29.0"
       },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/traverse": {
-      "version": "7.29.0",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.0.tgz",
-      "integrity": "sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/code-frame": "^7.29.0",
-        "@babel/generator": "^7.29.0",
-        "@babel/helper-globals": "^7.28.0",
-        "@babel/parser": "^7.29.0",
-        "@babel/template": "^7.28.6",
-        "@babel/types": "^7.29.0",
-        "debug": "^4.3.1"
+      "bin": {
+        "parser": "bin/babel-parser.js"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=6.0.0"
       }
     },
     "node_modules/@babel/types": {
@@ -2508,38 +1010,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/@jridgewell/gen-mapping": {
-      "version": "0.3.13",
-      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
-      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.5.0",
-        "@jridgewell/trace-mapping": "^0.3.24"
-      }
-    },
-    "node_modules/@jridgewell/remapping": {
-      "version": "2.3.5",
-      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
-      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.5",
-        "@jridgewell/trace-mapping": "^0.3.24"
-      }
-    },
-    "node_modules/@jridgewell/resolve-uri": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
-      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
@@ -2547,25 +1017,42 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.31",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
-      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@jridgewell/resolve-uri": "^3.1.0",
-        "@jridgewell/sourcemap-codec": "^1.4.14"
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
       }
     },
-    "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
-      "version": "5.1.1-v1",
-      "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
-      "integrity": "sha512-54/JRvkLIzzDWshCWfuhadfrfZVPiElY8Fcgmg1HroEly/EDSszzhBAsarCux+D/kOslTRquNzuyGSmUSTTHGg==",
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "eslint-scope": "5.1.1"
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
       }
     },
     "node_modules/@nuxt/opencollective": {
@@ -3323,6 +1810,23 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/lodash": {
+      "version": "4.17.24",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.24.tgz",
+      "integrity": "sha512-gIW7lQLZbue7lRSWEFql49QJJWThrTFFeIMJdp3eH4tKoxm1OvEPg02rm4wCCSHS0cL3/Fizimb35b7k8atwsQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/node": {
+      "version": "20.14.15",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.15.tgz",
+      "integrity": "sha512-Fz1xDMCF/B00/tYSVMlmK7hVeLh7jE5f3B7X1/hmV0MJBwE27KlS7EvD/Yp+z1lm8mVhwV5w+n8jOZG8AfTlKw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~5.26.4"
+      }
+    },
     "node_modules/@types/trusted-types": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
@@ -3340,47 +1844,292 @@
         "vue": "^2.7.15"
       }
     },
-    "node_modules/@types/vuelidate/node_modules/@vue/compiler-sfc": {
-      "version": "2.7.16",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.16.tgz",
-      "integrity": "sha512-KWhJ9k5nXuNtygPU7+t1rX6baZeqOYLEforUPjgNDBnLicfHCoi48H87Q8XyLZOrNNsmhuwKqtpDQWjEFe6Ekg==",
+    "node_modules/@types/vuelidate/node_modules/@vue/compiler-sfc": {
+      "version": "2.7.16",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.16.tgz",
+      "integrity": "sha512-KWhJ9k5nXuNtygPU7+t1rX6baZeqOYLEforUPjgNDBnLicfHCoi48H87Q8XyLZOrNNsmhuwKqtpDQWjEFe6Ekg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/parser": "^7.23.5",
+        "postcss": "^8.4.14",
+        "source-map": "^0.6.1"
+      },
+      "optionalDependencies": {
+        "prettier": "^1.18.2 || ^2.0.0"
+      }
+    },
+    "node_modules/@types/vuelidate/node_modules/prettier": {
+      "version": "2.8.8",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
+      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/@types/vuelidate/node_modules/vue": {
+      "version": "2.7.16",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-2.7.16.tgz",
+      "integrity": "sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw==",
+      "deprecated": "Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-sfc": "2.7.16",
+        "csstype": "^3.1.0"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.18.0.tgz",
+      "integrity": "sha512-94EQTWZ40mzBc42ATNIBimBEDltSJ9RQHCC8vc/PDbxi4k8dVwUAv4o98dk50M1zB+JGFxp43FP7f8+FP8R6Sw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/regexpp": "^4.10.0",
+        "@typescript-eslint/scope-manager": "7.18.0",
+        "@typescript-eslint/type-utils": "7.18.0",
+        "@typescript-eslint/utils": "7.18.0",
+        "@typescript-eslint/visitor-keys": "7.18.0",
+        "graphemer": "^1.4.0",
+        "ignore": "^5.3.1",
+        "natural-compare": "^1.4.0",
+        "ts-api-utils": "^1.3.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || >=20.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^7.0.0",
+        "eslint": "^8.56.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/parser": {
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.18.0.tgz",
+      "integrity": "sha512-4Z+L8I2OqhZV8qA132M4wNL30ypZGYOQVBfMgxDH/K5UX0PNqTu1c6za9ST5r9+tavvHiTWmBnKzpCJ/GlVFtg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "7.18.0",
+        "@typescript-eslint/types": "7.18.0",
+        "@typescript-eslint/typescript-estree": "7.18.0",
+        "@typescript-eslint/visitor-keys": "7.18.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^18.18.0 || >=20.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.56.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.18.0.tgz",
+      "integrity": "sha512-jjhdIE/FPF2B7Z1uzc6i3oWKbGcHb87Qw7AWj6jmEqNOfDFbJWtjt/XfwCpvNkpGWlcJaog5vTR+VV8+w9JflA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "7.18.0",
+        "@typescript-eslint/visitor-keys": "7.18.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || >=20.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils": {
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.18.0.tgz",
+      "integrity": "sha512-XL0FJXuCLaDuX2sYqZUUSOJ2sG5/i1AAze+axqmLnSkNEVMVYLF+cbwlB2w8D1tinFuSikHmFta+P+HOofrLeA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/typescript-estree": "7.18.0",
+        "@typescript-eslint/utils": "7.18.0",
+        "debug": "^4.3.4",
+        "ts-api-utils": "^1.3.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || >=20.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.56.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/types": {
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.18.0.tgz",
+      "integrity": "sha512-iZqi+Ds1y4EDYUtlOOC+aUmxnE9xS/yCigkjA7XpTKV6nCBd3Hp/PRGGmdwnfkV2ThMyYldP1wRpm/id99spTQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || >=20.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.18.0.tgz",
+      "integrity": "sha512-aP1v/BSPnnyhMHts8cf1qQ6Q1IFwwRvAQGRvBFkWlo3/lH29OXA3Pts+c10nxRxIBrDnoMqzhgdwVe5f2D6OzA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "@typescript-eslint/types": "7.18.0",
+        "@typescript-eslint/visitor-keys": "7.18.0",
+        "debug": "^4.3.4",
+        "globby": "^11.1.0",
+        "is-glob": "^4.0.3",
+        "minimatch": "^9.0.4",
+        "semver": "^7.6.0",
+        "ts-api-utils": "^1.3.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || >=20.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.0.tgz",
+      "integrity": "sha512-TN1kCZAgdgweJhWWpgKYrQaMNHcDULHkWwQIspdtjV4Y5aurRdZpjAqn6yX3FPqTA9ngHCc4hJxMAMgGfve85w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
+      "version": "9.0.9",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.9.tgz",
+      "integrity": "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": {
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.0.tgz",
+      "integrity": "sha512-AcM7dV/5ul4EekoQ29Agm5vri8JNqRyj39o0qpX6vDF2GZrtutZl5RwgD1XnZjiTAfncsJhMI48QQH3sN87YNA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@typescript-eslint/utils": {
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.18.0.tgz",
+      "integrity": "sha512-kK0/rNa2j74XuHVcoCZxdFBMF+aq/vH83CXAOHieC+2Gis4mF8jJXT5eAfyD3K0sAxtPuwxaIOIOvhwzVDt/kw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.23.5",
-        "postcss": "^8.4.14",
-        "source-map": "^0.6.1"
+        "@eslint-community/eslint-utils": "^4.4.0",
+        "@typescript-eslint/scope-manager": "7.18.0",
+        "@typescript-eslint/types": "7.18.0",
+        "@typescript-eslint/typescript-estree": "7.18.0"
       },
-      "optionalDependencies": {
-        "prettier": "^1.18.2 || ^2.0.0"
+      "engines": {
+        "node": "^18.18.0 || >=20.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.56.0"
       }
     },
-    "node_modules/@types/vuelidate/node_modules/prettier": {
-      "version": "2.8.8",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
-      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.18.0.tgz",
+      "integrity": "sha512-cDF0/Gf81QpY3xYyJKDV14Zwdmid5+uuENhjH2EqFaF0ni+yAyq/LzMaIJdhNJXZI7uLzwIlA+V7oWoyn6Curg==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "bin": {
-        "prettier": "bin-prettier.js"
+      "dependencies": {
+        "@typescript-eslint/types": "7.18.0",
+        "eslint-visitor-keys": "^3.4.3"
       },
       "engines": {
-        "node": ">=10.13.0"
+        "node": "^18.18.0 || >=20.0.0"
       },
       "funding": {
-        "url": "https://github.com/prettier/prettier?sponsor=1"
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
       }
     },
-    "node_modules/@types/vuelidate/node_modules/vue": {
-      "version": "2.7.16",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-2.7.16.tgz",
-      "integrity": "sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw==",
-      "deprecated": "Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.",
+    "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
       "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@vue/compiler-sfc": "2.7.16",
-        "csstype": "^3.1.0"
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
       }
     },
     "node_modules/@vitejs/plugin-vue2": {
@@ -3658,6 +2407,16 @@
       "dev": true,
       "license": "Python-2.0"
     },
+    "node_modules/array-union": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/assertion-error": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
@@ -3668,48 +2427,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/babel-plugin-polyfill-corejs2": {
-      "version": "0.4.17",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.17.tgz",
-      "integrity": "sha512-aTyf30K/rqAsNwN76zYrdtx8obu0E4KoUME29B1xj+B3WxgvWkp943vYQ+z8Mv3lw9xHXMHpvSPOBxzAkIa94w==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/compat-data": "^7.28.6",
-        "@babel/helper-define-polyfill-provider": "^0.6.8",
-        "semver": "^6.3.1"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
-      }
-    },
-    "node_modules/babel-plugin-polyfill-corejs3": {
-      "version": "0.14.2",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.14.2.tgz",
-      "integrity": "sha512-coWpDLJ410R781Npmn/SIBZEsAetR4xVi0SxLMXPaMO4lSf1MwnkGYMtkFxew0Dn8B3/CpbpYxN0JCgg8mn67g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-define-polyfill-provider": "^0.6.8",
-        "core-js-compat": "^3.48.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
-      }
-    },
-    "node_modules/babel-plugin-polyfill-regenerator": {
-      "version": "0.6.8",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.6.8.tgz",
-      "integrity": "sha512-M762rNHfSF1EV3SLtnCJXFoQbbIIz0OyRwnCmV0KPC7qosSfCO0QLTSuJX3ayAebubhE6oYBAYPrBA5ljowaZg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-define-polyfill-provider": "^0.6.8"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
-      }
-    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -3717,19 +2434,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/baseline-browser-mapping": {
-      "version": "2.10.27",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.27.tgz",
-      "integrity": "sha512-zEs/ufmZoUd7WftKpKyXaT6RFxpQ5Qm9xytKRHvJfxFV9DFJkZph9RvJ1LcOUi0Z1ZVijMte65JbILeV+8QQEA==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "bin": {
-        "baseline-browser-mapping": "dist/cli.cjs"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
     "node_modules/bidi-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz",
@@ -3799,38 +2503,17 @@
         "concat-map": "0.0.1"
       }
     },
-    "node_modules/browserslist": {
-      "version": "4.28.2",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.2.tgz",
-      "integrity": "sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg==",
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/browserslist"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
       "license": "MIT",
       "dependencies": {
-        "baseline-browser-mapping": "^2.10.12",
-        "caniuse-lite": "^1.0.30001782",
-        "electron-to-chromium": "^1.5.328",
-        "node-releases": "^2.0.36",
-        "update-browserslist-db": "^1.2.3"
-      },
-      "bin": {
-        "browserslist": "cli.js"
+        "fill-range": "^7.1.1"
       },
       "engines": {
-        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+        "node": ">=8"
       }
     },
     "node_modules/callsites": {
@@ -3843,27 +2526,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/caniuse-lite": {
-      "version": "1.0.30001792",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001792.tgz",
-      "integrity": "sha512-hVLMUZFgR4JJ6ACt1uEESvQN1/dBVqPAKY0hgrV70eN3391K6juAfTjKZLKvOMsx8PxA7gsY1/tLMMTcfFLLpw==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "CC-BY-4.0"
-    },
     "node_modules/chai": {
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/chai/-/chai-6.2.2.tgz",
@@ -3985,20 +2647,6 @@
         "url": "https://opencollective.com/core-js"
       }
     },
-    "node_modules/core-js-compat": {
-      "version": "3.49.0",
-      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.49.0.tgz",
-      "integrity": "sha512-VQXt1jr9cBz03b331DFDCCP90b3fanciLkgiOoy8SBHy06gNf+vQ1A3WFLqG7I8TipYIKeYK9wxd0tUrvHcOZA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "browserslist": "^4.28.1"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/core-js"
-      }
-    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -4269,6 +2917,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/dir-glob": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-type": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/dompurify": {
       "version": "3.4.2",
       "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.2.tgz",
@@ -4343,13 +3004,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/electron-to-chromium": {
-      "version": "1.5.351",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.351.tgz",
-      "integrity": "sha512-9D7Iqx8RImSvCnOsj86rCH6eQjZFQoM04Jn6HnZVM0Nu/G58/gmKYQ1d12MZTbjQbQSTGI8nwEy07ErsA2slLA==",
-      "dev": true,
-      "license": "ISC"
-    },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
@@ -4370,16 +3024,6 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
-    "node_modules/es-errors": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
-      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
     "node_modules/es-module-lexer": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.1.0.tgz",
@@ -4429,16 +3073,6 @@
         "@esbuild/win32-x64": "0.27.7"
       }
     },
-    "node_modules/escalade": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
-      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/escape-string-regexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -4611,30 +3245,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/eslint-scope": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
-      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
-      "dev": true,
-      "license": "BSD-2-Clause",
-      "dependencies": {
-        "esrecurse": "^4.3.0",
-        "estraverse": "^4.1.1"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      }
-    },
-    "node_modules/eslint-visitor-keys": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
-      "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/eslint/node_modules/eslint-scope": {
       "version": "8.4.0",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz",
@@ -4752,16 +3362,6 @@
         "node": ">=4.0"
       }
     },
-    "node_modules/estraverse": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
-      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
-      "dev": true,
-      "license": "BSD-2-Clause",
-      "engines": {
-        "node": ">=4.0"
-      }
-    },
     "node_modules/estree-walker": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
@@ -4806,6 +3406,36 @@
       "dev": true,
       "license": "Apache-2.0"
     },
+    "node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
@@ -4820,6 +3450,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fastq": {
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
+      "integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
     "node_modules/fdir": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
@@ -4858,6 +3498,19 @@
         "node": ">=16.0.0"
       }
     },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -4928,16 +3581,6 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
-    "node_modules/function-bind": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
-      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/fuse.js": {
       "version": "7.3.0",
       "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-7.3.0.tgz",
@@ -4951,16 +3594,6 @@
         "url": "https://github.com/sponsors/krisk"
       }
     },
-    "node_modules/gensync": {
-      "version": "1.0.0-beta.2",
-      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
-      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/glob": {
       "version": "10.5.0",
       "resolved": "https://registry.npmjs.org/glob/-/glob-10.5.0.tgz",
@@ -5035,26 +3668,41 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+    "node_modules/globby": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+      "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+      "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "array-union": "^2.1.0",
+        "dir-glob": "^3.0.1",
+        "fast-glob": "^3.2.9",
+        "ignore": "^5.2.0",
+        "merge2": "^1.4.1",
+        "slash": "^3.0.0"
+      },
       "engines": {
-        "node": ">=8"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/hasown": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.3.tgz",
-      "integrity": "sha512-ej4AhfhfL2Q2zpMmLo7U1Uv9+PyhIZpgQLGT1F9miIGmiCJIoCgSmczFdrc97mWT4kVY72KA+WnnhJ5pghSvSg==",
+    "node_modules/graphemer": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
+      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
       "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
       "license": "MIT",
-      "dependencies": {
-        "function-bind": "^1.1.2"
-      },
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=8"
       }
     },
     "node_modules/html-encoding-sniffer": {
@@ -5139,32 +3787,16 @@
       "dev": true,
       "license": "MIT",
       "engines": {
-        "node": ">=0.8.19"
-      }
-    },
-    "node_modules/ini": {
-      "version": "1.3.8",
-      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
-      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
-      "dev": true,
-      "license": "ISC"
-    },
-    "node_modules/is-core-module": {
-      "version": "2.16.2",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.2.tgz",
-      "integrity": "sha512-evOr8xfXKxE6qSR0hSXL2r3sd7ALj8+7jQEUvPYcm5sgZFdJ+AYzT6yNmJenvIYQBgIGwfwz08sL8zoL7yq2BA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "hasown": "^2.0.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "node": ">=0.8.19"
       }
     },
+    "node_modules/ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -5198,6 +3830,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
     "node_modules/is-potential-custom-element-name": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
@@ -5228,6 +3870,16 @@
         "@pkgjs/parseargs": "^0.11.0"
       }
     },
+    "node_modules/jiti": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz",
+      "integrity": "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
     "node_modules/jquery": {
       "version": "3.7.1",
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
@@ -5266,13 +3918,6 @@
         "node": ">=14"
       }
     },
-    "node_modules/js-tokens": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/js-yaml": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
@@ -5336,19 +3981,6 @@
         "node": ">=18"
       }
     },
-    "node_modules/jsesc": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
-      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "jsesc": "bin/jsesc"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/json-buffer": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
@@ -5370,19 +4002,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/json5": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
-      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "json5": "lib/cli.js"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -5429,13 +4048,6 @@
       "integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==",
       "license": "MIT"
     },
-    "node_modules/lodash.debounce": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -5456,16 +4068,6 @@
         "url": "https://tidelift.com/funding/github/npm/loglevel"
       }
     },
-    "node_modules/lru-cache": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
-      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "yallist": "^3.0.2"
-      }
-    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
@@ -5495,6 +4097,43 @@
       "dev": true,
       "license": "CC0-1.0"
     },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/micromatch/node_modules/picomatch": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
@@ -5610,13 +4249,6 @@
         "webidl-conversions": "^3.0.0"
       }
     },
-    "node_modules/node-releases": {
-      "version": "2.0.38",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.38.tgz",
-      "integrity": "sha512-3qT/88Y3FbH/Kx4szpQQ4HzUbVrHPKTLVpVocKiLfoYvw9XSGOX2FmD2d6DrXbVYyAQTF2HeF6My8jmzx7/CRw==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/nopt": {
       "version": "7.2.1",
       "resolved": "https://registry.npmjs.org/nopt/-/nopt-7.2.1.tgz",
@@ -5760,13 +4392,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/path-parse": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/path-scurry": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
@@ -5791,6 +4416,16 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/pathe": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
@@ -5935,6 +4570,27 @@
         "node": ">=6"
       }
     },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/readdirp": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
@@ -5949,64 +4605,6 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
-    "node_modules/regenerate": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
-      "integrity": "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/regenerate-unicode-properties": {
-      "version": "10.2.2",
-      "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.2.2.tgz",
-      "integrity": "sha512-m03P+zhBeQd1RGnYxrGyDAPpWX/epKirLrp8e3qevZdVkKtnCrjjWczIbYc8+xd6vcTStVlqfycTx1KR4LOr0g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "regenerate": "^1.4.2"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/regexpu-core": {
-      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-6.4.0.tgz",
-      "integrity": "sha512-0ghuzq67LI9bLXpOX/ISfve/Mq33a4aFRzoQYhnnok1JOFpmE/A2TBGkNVenOGEeSBCjIiWcc6MVOG5HEQv0sA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "regenerate": "^1.4.2",
-        "regenerate-unicode-properties": "^10.2.2",
-        "regjsgen": "^0.8.0",
-        "regjsparser": "^0.13.0",
-        "unicode-match-property-ecmascript": "^2.0.0",
-        "unicode-match-property-value-ecmascript": "^2.2.1"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/regjsgen": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.8.0.tgz",
-      "integrity": "sha512-RvwtGe3d7LvWiDQXeQw8p5asZUmfU1G/l6WbUXeHta7Y2PEIvBTwH6E2EfmYUK8pxcxEdEmaomqyp0vZZ7C+3Q==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/regjsparser": {
-      "version": "0.13.1",
-      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.13.1.tgz",
-      "integrity": "sha512-dLsljMd9sqwRkby8zhO1gSg3PnJIBFid8f4CQj/sXx+7cKx+E7u0PKhZ+U4wmhx7EfmtvnA318oVaIkAB1lRJw==",
-      "dev": true,
-      "license": "BSD-2-Clause",
-      "dependencies": {
-        "jsesc": "~3.1.0"
-      },
-      "bin": {
-        "regjsparser": "bin/parser"
-      }
-    },
     "node_modules/require-from-string": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
@@ -6017,28 +4615,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/resolve": {
-      "version": "1.22.12",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz",
-      "integrity": "sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "es-errors": "^1.3.0",
-        "is-core-module": "^2.16.1",
-        "path-parse": "^1.0.7",
-        "supports-preserve-symlinks-flag": "^1.0.0"
-      },
-      "bin": {
-        "resolve": "bin/resolve"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -6049,6 +4625,17 @@
         "node": ">=4"
       }
     },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/rollup": {
       "version": "4.60.3",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.60.3.tgz",
@@ -6094,6 +4681,30 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
     "node_modules/sass": {
       "version": "1.99.0",
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.99.0.tgz",
@@ -6128,16 +4739,6 @@
         "node": ">=v12.22.7"
       }
     },
-    "node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -6203,6 +4804,16 @@
         "node": ">=18"
       }
     },
+    "node_modules/slash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -6370,19 +4981,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/supports-preserve-symlinks-flag": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
-      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -6470,6 +5068,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
     "node_modules/totalist": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
@@ -6506,6 +5117,19 @@
         "node": ">=20"
       }
     },
+    "node_modules/ts-api-utils": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.4.3.tgz",
+      "integrity": "sha512-i3eMG77UTMD0hZhgRS562pv83RC6ukSAC2GMNWc+9dieh/+jDM5u5YG+NHX6VNDRHQcHwmsTHctP9LhbC3WxVw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=16"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.2.0"
+      }
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -6532,80 +5156,26 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/unicode-canonical-property-names-ecmascript": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.1.tgz",
-      "integrity": "sha512-dA8WbNeb2a6oQzAQ55YlT5vQAWGV9WXOsi3SskE3bcCdM0P4SDd+24zS/OCacdRq5BkdsRj9q3Pg6YyQoxIGqg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/unicode-match-property-ecmascript": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz",
-      "integrity": "sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==",
+    "node_modules/typescript": {
+      "version": "5.4.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
+      "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
       "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "unicode-canonical-property-names-ecmascript": "^2.0.0",
-        "unicode-property-aliases-ecmascript": "^2.0.0"
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
       },
       "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/unicode-match-property-value-ecmascript": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.2.1.tgz",
-      "integrity": "sha512-JQ84qTuMg4nVkx8ga4A16a1epI9H6uTXAknqxkGF/aFfRLw1xC/Bp24HNLaZhHSkWd3+84t8iXnp1J0kYcZHhg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/unicode-property-aliases-ecmascript": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.2.0.tgz",
-      "integrity": "sha512-hpbDzxUY9BFwX+UeBnxv3Sh1q7HFxj48DTmXchNgRa46lO8uj3/1iEn3MiNUYTg1g9ctIqXCCERn8gYZhHC5lQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=4"
+        "node": ">=14.17"
       }
     },
-    "node_modules/update-browserslist-db": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
-      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
+    "node_modules/undici-types": {
+      "version": "5.26.5",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
       "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/browserslist"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "escalade": "^3.2.0",
-        "picocolors": "^1.1.1"
-      },
-      "bin": {
-        "update-browserslist-db": "cli.js"
-      },
-      "peerDependencies": {
-        "browserslist": ">= 4.21.0"
-      }
+      "license": "MIT"
     },
     "node_modules/uri-js": {
       "version": "4.4.1",
@@ -14953,13 +13523,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/yallist": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
-      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
-      "dev": true,
-      "license": "ISC"
-    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
diff --git a/client/package.json b/client/package.json
index 516e05c9..75adc7b1 100644
--- a/client/package.json
+++ b/client/package.json
@@ -4,17 +4,19 @@
   "description": "DigiScript front end",
   "author": "DreamTeamProd",
   "private": true,
+  "type": "module",
   "scripts": {
-    "prebuild": "scripts/copy-docs.sh && node scripts/generate-doc-manifest.js",
+    "prebuild": "scripts/copy-docs.sh && node --strip-types scripts/generate-doc-manifest.ts",
     "build": "vite build",
     "build:analyze": "vite build --mode analyze",
     "lint": "npm run format && npm run lint:eslint",
-    "lint:eslint": "eslint 'src/**/*.{js,vue}' --fix",
+    "lint:eslint": "eslint 'src/**/*.{ts,vue}' --fix",
     "ci-lint": "npm run format:check && npm run lint:eslint-check",
-    "lint:eslint-check": "eslint 'src/**/*.{js,vue}'",
+    "lint:eslint-check": "eslint 'src/**/*.{ts,vue}'",
     "lint:filter": "./scripts/eslint-filter.sh",
-    "format": "prettier --write 'src/**/*.{js,vue,json,css,scss}'",
-    "format:check": "prettier --check 'src/**/*.{js,vue,json,css,scss}'",
+    "format": "prettier --write 'src/**/*.{ts,vue,json,css,scss}'",
+    "format:check": "prettier --check 'src/**/*.{ts,vue,json,css,scss}'",
+    "typecheck": "tsc --noEmit -p tsconfig.json",
     "test": "vitest",
     "test:ui": "vitest --ui",
     "test:run": "vitest run",
@@ -52,11 +54,12 @@
     "vuex-persistedstate": "3.2.1"
   },
   "devDependencies": {
-    "@babel/core": "7.29.0",
-    "@babel/eslint-parser": "7.28.6",
-    "@babel/preset-env": "7.29.5",
     "@eslint/js": "^9.39.2",
+    "@types/lodash": "~4.17.7",
+    "@types/node": "~20.14.0",
     "@types/vuelidate": "^0.7.22",
+    "@typescript-eslint/eslint-plugin": "~7.18.0",
+    "@typescript-eslint/parser": "~7.18.0",
     "@vitejs/plugin-vue2": "2.3.4",
     "@vitest/ui": "^4.1.5",
     "@vue/test-utils": "^2.4.10",
@@ -65,9 +68,11 @@
     "eslint-plugin-prettier": "^5.5.5",
     "eslint-plugin-vue": "^9.33.0",
     "globals": "^15.14.0",
+    "jiti": "^2.7.0",
     "jsdom": "^27.4.0",
     "prettier": "^3.8.3",
     "sass": "1.99.0",
+    "typescript": "~5.4.5",
     "vite": "^7.3.3",
     "vitest": "^4.1.5"
   },
diff --git a/client/prettier.config.mjs b/client/prettier.config.ts
similarity index 76%
rename from client/prettier.config.mjs
rename to client/prettier.config.ts
index 67b1fa21..f9dbeef4 100644
--- a/client/prettier.config.mjs
+++ b/client/prettier.config.ts
@@ -1,10 +1,6 @@
-/**
- * Prettier configuration for DigiScript frontend
- * Based on Vue.js community recommendations
- * @see https://prettier.io/docs/en/configuration.html
- * @see https://vuejs.org/style-guide/
- */
-export default {
+import type { Config } from 'prettier';
+
+const config: Config = {
   // Standard Prettier defaults with Vue community preferences
   printWidth: 100,
   tabWidth: 2,
@@ -37,4 +33,6 @@ export default {
       },
     },
   ],
-};
\ No newline at end of file
+};
+
+export default config;
diff --git a/client/scripts/generate-doc-manifest.js b/client/scripts/generate-doc-manifest.js
deleted file mode 100644
index 1b783d05..00000000
--- a/client/scripts/generate-doc-manifest.js
+++ /dev/null
@@ -1,199 +0,0 @@
-#!/usr/bin/env node
-const fs = require('fs');
-const path = require('path');
-
-const DOCS_DIR = path.join(__dirname, '../../docs');
-const OUTPUT_DIR = path.join(__dirname, '../public/docs');
-const MANIFEST_PATH = path.join(OUTPUT_DIR, 'manifest.json');
-
-function generateSlug(filepath) {
-  // pages/getting_started.md → getting-started
-  // pages/show_config/acts_and_scenes.md → show-config/acts-and-scenes
-  const withoutExt = filepath.replace(/\.md$/, '');
-  // Remove 'pages/' prefix if present
-  const withoutPages = withoutExt.replace(/^pages\//, '');
-  return withoutPages.replace(/_/g, '-');
-}
-
-function extractTitle(content, filepath) {
-  // For nested docs (e.g., show_config/*), extract H3 title
-  // For root docs, extract H1/H2 title
-  const parts = filepath.split('/');
-
-  if (parts.length > 2) {
-    // Nested document - try to extract H3 first
-    const h3Match = content.match(/^###\s+(.+)$/m);
-    if (h3Match) {
-      return h3Match[1];
-    }
-  }
-
-  // Fall back to H1/H2
-  const match = content.match(/^##?\s+(.+)$/m);
-  if (match) {
-    return match[1];
-  }
-
-  // Last resort: generate from filename
-  const filename = parts[parts.length - 1].replace(/\.md$/, '');
-  return filename
-    .replace(/_/g, ' ')
-    .replace(/\b\w/g, (c) => c.toUpperCase());
-}
-
-function extractCategory(relativePath) {
-  // pages/getting_started.md → root
-  // pages/show_config/acts_and_scenes.md → show_config
-  const parts = relativePath.split('/');
-  if (parts.length > 2) {
-    return parts[1]; // Return subdirectory name
-  }
-  return 'root';
-}
-
-function extractMarkdownLinks(content) {
-  // Extract all markdown links: [text](./path.md) or [text](path.md)
-  const linkRegex = /\[([^\]]+)\]\(([^)]+\.md)\)/g;
-  const links = [];
-  let match;
-
-  while ((match = linkRegex.exec(content)) !== null) {
-    links.push(match[2]); // The URL part
-  }
-
-  return links;
-}
-
-function normalizeLink(currentFile, link) {
-  // Convert relative link to absolute path within docs
-  // currentFile: 'index.md' or 'pages/getting_started.md'
-  // link: './pages/getting_started.md' or '../pages/show_config.md'
-
-  const currentDir = path.dirname(currentFile);
-  const absolutePath = path.join(currentDir, link);
-
-  // Normalize path (resolve .. and .)
-  const normalized = path.normalize(absolutePath);
-
-  // Convert backslashes to forward slashes for consistency
-  return normalized.replace(/\\/g, '/');
-}
-
-function buildOrderFromLinks(docsDir) {
-  const visited = new Set();
-  const order = [];
-
-  function traverse(relativePath) {
-    // Skip if already visited
-    if (visited.has(relativePath)) {
-      return;
-    }
-
-    // Check if file exists
-    const fullPath = path.join(docsDir, relativePath);
-    if (!fs.existsSync(fullPath) || !fs.statSync(fullPath).isFile()) {
-      return;
-    }
-
-    visited.add(relativePath);
-    order.push(relativePath);
-
-    // Read file and extract links
-    const content = fs.readFileSync(fullPath, 'utf8');
-    const links = extractMarkdownLinks(content);
-
-    // Recursively traverse each link
-    for (const link of links) {
-      const normalizedLink = normalizeLink(relativePath, link);
-      traverse(normalizedLink);
-    }
-  }
-
-  // Start traversal from index.md
-  traverse('index.md');
-
-  return order;
-}
-
-function walkDocs(dir, basePath = '') {
-  const manifest = [];
-
-  // Check if directory exists
-  if (!fs.existsSync(dir)) {
-    console.warn(`Warning: Directory ${dir} does not exist`);
-    return manifest;
-  }
-
-  const entries = fs.readdirSync(dir, { withFileTypes: true });
-
-  for (const entry of entries) {
-    const fullPath = path.join(dir, entry.name);
-    const relativePath = path.join(basePath, entry.name);
-
-    if (entry.isDirectory() && entry.name !== 'images') {
-      // Recursively walk subdirectories
-      manifest.push(...walkDocs(fullPath, relativePath));
-    } else if (entry.isFile() && entry.name.endsWith('.md')) {
-      const content = fs.readFileSync(fullPath, 'utf8');
-      const title = extractTitle(content, relativePath);
-      const slug = generateSlug(relativePath);
-      const category = extractCategory(relativePath);
-
-      manifest.push({
-        title,
-        slug,
-        path: relativePath.replace(/\\/g, '/'),
-        category,
-      });
-    }
-  }
-
-  return manifest;
-}
-
-// Ensure output directory exists
-if (!fs.existsSync(OUTPUT_DIR)) {
-  fs.mkdirSync(OUTPUT_DIR, { recursive: true });
-}
-
-console.log('Generating documentation manifest...');
-
-// Build link order by traversing from index.md
-const linkOrder = buildOrderFromLinks(DOCS_DIR);
-console.log(`📊 Discovered ${linkOrder.length} documents via link traversal`);
-
-// Walk all docs to get complete manifest
-const manifest = walkDocs(DOCS_DIR);
-
-// Create order map from link traversal
-const orderMap = new Map();
-linkOrder.forEach((path, index) => {
-  orderMap.set(path, index);
-});
-
-// Add order to each manifest entry
-manifest.forEach((entry) => {
-  const order = orderMap.get(entry.path);
-  entry.order = order !== undefined ? order : 999;
-});
-
-// Filter out index.md since we have a navigation sidebar instead
-const filteredManifest = manifest.filter((entry) => entry.path !== 'index.md');
-
-// Sort manifest by order, then by category and title
-filteredManifest.sort((a, b) => {
-  // First, sort by link order
-  if (a.order !== b.order) {
-    return a.order - b.order;
-  }
-  // Then by category
-  if (a.category !== b.category) {
-    return a.category.localeCompare(b.category);
-  }
-  // Finally by title
-  return a.title.localeCompare(b.title);
-});
-
-fs.writeFileSync(MANIFEST_PATH, JSON.stringify(filteredManifest, null, 2));
-console.log(`✅ Generated manifest with ${filteredManifest.length} documents (excluded index.md)`);
-console.log(`📄 Manifest saved to: ${MANIFEST_PATH}`);
diff --git a/client/scripts/generate-doc-manifest.ts b/client/scripts/generate-doc-manifest.ts
new file mode 100644
index 00000000..fb2b41a5
--- /dev/null
+++ b/client/scripts/generate-doc-manifest.ts
@@ -0,0 +1,135 @@
+#!/usr/bin/env node
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+const DOCS_DIR = path.join(__dirname, '../../docs');
+const OUTPUT_DIR = path.join(__dirname, '../public/docs');
+const MANIFEST_PATH = path.join(OUTPUT_DIR, 'manifest.json');
+
+interface ManifestEntry {
+  title: string;
+  slug: string;
+  path: string;
+  category: string;
+  order: number;
+}
+
+function generateSlug(filepath: string): string {
+  // pages/getting_started.md → getting-started
+  // pages/show_config/acts_and_scenes.md → show-config/acts-and-scenes
+  const withoutExt = filepath.replace(/\.md$/, '');
+  const withoutPages = withoutExt.replace(/^pages\//, '');
+  return withoutPages.replace(/_/g, '-');
+}
+
+function extractTitle(content: string, filepath: string): string {
+  const parts = filepath.split('/');
+
+  if (parts.length > 2) {
+    const h3Match = content.match(/^###\s+(.+)$/m);
+    if (h3Match) return h3Match[1];
+  }
+
+  const match = content.match(/^##?\s+(.+)$/m);
+  if (match) return match[1];
+
+  const filename = parts[parts.length - 1].replace(/\.md$/, '');
+  return filename.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
+function extractCategory(relativePath: string): string {
+  const parts = relativePath.split('/');
+  return parts.length > 2 ? parts[1] : 'root';
+}
+
+function extractMarkdownLinks(content: string): string[] {
+  // Extract all markdown links: [text](./path.md) or [text](path.md)
+  return [...content.matchAll(/\[([^\]]+)\]\(([^)]+\.md)\)/g)].map((m) => m[2]);
+}
+
+function normalizeLink(currentFile: string, link: string): string {
+  const currentDir = path.dirname(currentFile);
+  return path.normalize(path.join(currentDir, link)).replace(/\\/g, '/');
+}
+
+function buildOrderFromLinks(docsDir: string): string[] {
+  const visited = new Set<string>();
+  const order: string[] = [];
+
+  function traverse(relativePath: string): void {
+    if (visited.has(relativePath)) return;
+
+    const fullPath = path.join(docsDir, relativePath);
+    if (!fs.existsSync(fullPath) || !fs.statSync(fullPath).isFile()) return;
+
+    visited.add(relativePath);
+    order.push(relativePath);
+
+    const content = fs.readFileSync(fullPath, 'utf8');
+    for (const link of extractMarkdownLinks(content)) {
+      traverse(normalizeLink(relativePath, link));
+    }
+  }
+
+  traverse('index.md');
+  return order;
+}
+
+function walkDocs(dir: string, basePath = ''): Omit<ManifestEntry, 'order'>[] {
+  const manifest: Omit<ManifestEntry, 'order'>[] = [];
+
+  if (!fs.existsSync(dir)) {
+    console.warn(`Warning: Directory ${dir} does not exist`);
+    return manifest;
+  }
+
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const fullPath = path.join(dir, entry.name);
+    const relativePath = path.join(basePath, entry.name);
+
+    if (entry.isDirectory() && entry.name !== 'images') {
+      manifest.push(...walkDocs(fullPath, relativePath));
+    } else if (entry.isFile() && entry.name.endsWith('.md')) {
+      const content = fs.readFileSync(fullPath, 'utf8');
+      manifest.push({
+        title: extractTitle(content, relativePath),
+        slug: generateSlug(relativePath),
+        path: relativePath.replace(/\\/g, '/'),
+        category: extractCategory(relativePath),
+      });
+    }
+  }
+
+  return manifest;
+}
+
+if (!fs.existsSync(OUTPUT_DIR)) {
+  fs.mkdirSync(OUTPUT_DIR, { recursive: true });
+}
+
+console.log('Generating documentation manifest...');
+
+const linkOrder = buildOrderFromLinks(DOCS_DIR);
+console.log(`📊 Discovered ${linkOrder.length} documents via link traversal`);
+
+const orderMap = new Map<string, number>(linkOrder.map((filePath, i) => [filePath, i]));
+
+const manifest: ManifestEntry[] = walkDocs(DOCS_DIR).map((entry) => ({
+  ...entry,
+  order: orderMap.get(entry.path) ?? 999,
+}));
+
+const filteredManifest = manifest
+  .filter((entry) => entry.path !== 'index.md')
+  .sort((a, b) => {
+    if (a.order !== b.order) return a.order - b.order;
+    if (a.category !== b.category) return a.category.localeCompare(b.category);
+    return a.title.localeCompare(b.title);
+  });
+
+fs.writeFileSync(MANIFEST_PATH, JSON.stringify(filteredManifest, null, 2));
+console.log(`✅ Generated manifest with ${filteredManifest.length} documents (excluded index.md)`);
+console.log(`📄 Manifest saved to: ${MANIFEST_PATH}`);
diff --git a/client/src/App.vue b/client/src/App.vue
index 8c243c9b..e4067e9e 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -172,7 +172,8 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { mapGetters, mapActions, mapMutations } from 'vuex';
 import log from 'loglevel';
 import CreateUser from '@/vue_components/user/CreateUser.vue';
@@ -181,15 +182,15 @@ import { notNull, notNullAndGreaterThanZero } from '@/js/customValidators';
 import { required, minValue } from 'vuelidate/lib/validators';
 import { isElectron } from '@/js/platform';
 
-export default {
+export default defineComponent({
   components: { CreateUser },
   data() {
     return {
       loaded: false,
-      loadTimer: null,
+      loadTimer: null as ReturnType<typeof setTimeout> | null,
       stoppingSession: false,
       startingSession: false,
-      wsStateCheckInterval: null,
+      wsStateCheckInterval: null as ReturnType<typeof setInterval> | null,
       changingPage: false,
       pageInputFormState: {
         pageNo: 1,
@@ -208,16 +209,16 @@ export default {
     },
   },
   computed: {
-    isAllowedScriptConfig() {
+    isAllowedScriptConfig(): boolean {
       return (
-        this.IS_ADMIN_USER ||
-        this.IS_SHOW_EDITOR ||
-        this.IS_SHOW_READER ||
-        this.IS_SHOW_EXECUTOR ||
-        this.IS_SCRIPT_READER ||
-        this.IS_SCRIPT_EDITOR ||
-        this.IS_CUE_READER ||
-        this.IS_CUE_EDITOR
+        (this as any).IS_ADMIN_USER ||
+        (this as any).IS_SHOW_EDITOR ||
+        (this as any).IS_SHOW_READER ||
+        (this as any).IS_SHOW_EXECUTOR ||
+        (this as any).IS_SCRIPT_READER ||
+        (this as any).IS_SCRIPT_EDITOR ||
+        (this as any).IS_CUE_READER ||
+        (this as any).IS_CUE_EDITOR
       );
     },
     ...mapGetters([
@@ -241,45 +242,38 @@ export default {
       'STAGE_MANAGER_MODE',
     ]),
   },
-  async created() {
-    // Check if we're in Electron without an active connection
-    // If so, skip all initialization - the router will redirect to ServerSelector
+  async created(): Promise<void> {
     if (isElectron()) {
       try {
-        const activeConnection = await window.electronAPI.getActiveConnection();
+        const activeConnection = await (window as any).electronAPI.getActiveConnection();
         if (!activeConnection) {
           console.log('No active connection in Electron - skipping App initialization');
-          this.loaded = true; // Set loaded so router-view renders
-          return; // Skip all initialization
+          this.loaded = true;
+          return;
         }
-        // Set the server connection name for the navbar
         this.serverConnectionName = activeConnection.nickname || activeConnection.url;
       } catch (error) {
         console.error('Error checking active connection:', error);
-        this.loaded = true; // Set loaded so router-view renders
-        return; // Skip initialization on error
+        this.loaded = true;
+        return;
       }
     }
 
-    // If we have a stored auth token, refresh the token to validate we are still logged in,
-    // and then set up token refresh
-    if (this.AUTH_TOKEN) {
-      await this.REFRESH_TOKEN();
-      await this.SETUP_TOKEN_REFRESH();
+    if ((this as any).AUTH_TOKEN) {
+      await (this as any).REFRESH_TOKEN();
+      await (this as any).SETUP_TOKEN_REFRESH();
     }
 
-    await this.GET_SETTINGS();
+    await (this as any).GET_SETTINGS();
     await this.awaitWSConnect();
 
-    // Set up an interval to check WebSocket state
     this.wsStateCheckInterval = setInterval(() => {
-      if (this.WEBSOCKET_HEALTHY && this.WEBSOCKET_HAS_PENDING_OPERATIONS) {
-        this.CHECK_WEBSOCKET_STATE();
+      if ((this as any).WEBSOCKET_HEALTHY && (this as any).WEBSOCKET_HAS_PENDING_OPERATIONS) {
+        (this as any).CHECK_WEBSOCKET_STATE();
       }
     }, 500);
   },
-  beforeDestroy() {
-    // Clean up interval
+  beforeDestroy(): void {
     if (this.wsStateCheckInterval) {
       clearInterval(this.wsStateCheckInterval);
     }
@@ -299,21 +293,15 @@ export default {
     ]),
     ...mapMutations(['SET_STAGE_MANAGER_MODE']),
     isElectron,
-    async switchServer() {
-      // Clear the active connection and disconnect WebSocket
+    async switchServer(): Promise<void> {
       if (isElectron()) {
-        // Close WebSocket connection if it exists
-        if (this.$socket) {
-          this.$socket.close();
+        if ((this as any).$socket) {
+          (this as any).$socket.close();
         }
 
-        // Clear the active connection
-        await window.electronAPI.clearActiveConnection();
+        await (window as any).electronAPI.clearActiveConnection();
 
-        // Navigate to ServerSelector and reload to clean up state
-        // In history mode (dev), use router to navigate before reload
-        // In hash mode (prod), set hash before reload
-        if (this.$router.mode === 'history') {
+        if ((this.$router as any).mode === 'history') {
           await this.$router.push('/electron/server-selector');
         } else {
           window.location.hash = '/electron/server-selector';
@@ -321,24 +309,29 @@ export default {
         window.location.reload();
       }
     },
-    async awaitWSConnect() {
-      if (this.WEBSOCKET_HEALTHY) {
-        clearTimeout(this.loadTimer);
+    async awaitWSConnect(): Promise<void> {
+      if ((this as any).WEBSOCKET_HEALTHY) {
+        clearTimeout(this.loadTimer!);
 
         await Promise.all([
-          this.GET_RBAC_ROLES(),
-          this.WEBSOCKET_HAS_PENDING_OPERATIONS ? this.CHECK_WEBSOCKET_STATE() : Promise.resolve(),
+          (this as any).GET_RBAC_ROLES(),
+          (this as any).WEBSOCKET_HAS_PENDING_OPERATIONS
+            ? (this as any).CHECK_WEBSOCKET_STATE()
+            : Promise.resolve(),
         ]);
 
-        if (this.AUTH_TOKEN) {
-          await this.GET_CURRENT_USER();
-          await Promise.all([this.GET_CURRENT_RBAC(), this.GET_USER_SETTINGS()]);
+        if ((this as any).AUTH_TOKEN) {
+          await (this as any).GET_CURRENT_USER();
+          await Promise.all([(this as any).GET_CURRENT_RBAC(), (this as any).GET_USER_SETTINGS()]);
         }
 
-        if (this.SETTINGS.current_show != null) {
-          await this.GET_SHOW_SESSION_DATA();
+        if ((this as any).SETTINGS.current_show != null) {
+          await (this as any).GET_SHOW_SESSION_DATA();
           this.loaded = true;
-          if (this.CURRENT_SHOW_SESSION != null && this.$router.currentRoute.fullPath !== '/live') {
+          if (
+            (this as any).CURRENT_SHOW_SESSION != null &&
+            this.$router.currentRoute.fullPath !== '/live'
+          ) {
             this.$router.push('/live');
           }
         } else {
@@ -348,10 +341,10 @@ export default {
         this.loadTimer = setTimeout(this.awaitWSConnect, 150);
       }
     },
-    async stopShowSession() {
+    async stopShowSession(): Promise<void> {
       this.stoppingSession = true;
       const msg = 'Are you sure you want to stop the show?';
-      const action = await this.$bvModal.msgBoxConfirm(msg, {});
+      const action = await (this as any).$bvModal.msgBoxConfirm(msg, {});
       if (action === true) {
         const response = await fetch(makeURL('/api/v1/show/sessions/stop'), {
           method: 'POST',
@@ -359,61 +352,61 @@ export default {
         });
 
         if (response.ok) {
-          this.$toast.success('Stopped show session');
+          (this as any).$toast.success('Stopped show session');
         } else {
           log.error('Unable to stop show session');
-          this.$toast.error('Unable to stop show session');
+          (this as any).$toast.error('Unable to stop show session');
         }
       }
       this.stoppingSession = false;
     },
-    async startShowSession() {
-      if (this.INTERNAL_UUID == null) {
-        this.$toast.error('Unable to start new show session');
+    async startShowSession(): Promise<void> {
+      if ((this as any).INTERNAL_UUID == null) {
+        (this as any).$toast.error('Unable to start new show session');
         return;
       }
       this.startingSession = true;
       const msg = 'Are you sure you want to start a show?';
-      const action = await this.$bvModal.msgBoxConfirm(msg, {});
+      const action = await (this as any).$bvModal.msgBoxConfirm(msg, {});
       if (action === true) {
         const response = await fetch(makeURL('/api/v1/show/sessions/start'), {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({
-            session_id: this.INTERNAL_UUID,
+            session_id: (this as any).INTERNAL_UUID,
           }),
         });
 
         if (response.ok) {
-          this.$toast.success('Started new show session');
+          (this as any).$toast.success('Started new show session');
         } else {
           log.error('Unable to start new show session');
-          this.$toast.error('Unable to start new show session');
+          (this as any).$toast.error('Unable to start new show session');
         }
       }
       this.startingSession = false;
     },
-    async reloadClients() {
-      if (this.INTERNAL_UUID == null) {
-        this.$toast.error('Unable to start new show session');
+    async reloadClients(): Promise<void> {
+      if ((this as any).INTERNAL_UUID == null) {
+        (this as any).$toast.error('Unable to start new show session');
         return;
       }
       this.startingSession = true;
       const msg = 'Are you sure you want to reload all connected clients?';
-      const action = await this.$bvModal.msgBoxConfirm(msg, {});
+      const action = await (this as any).$bvModal.msgBoxConfirm(msg, {});
       if (action === true) {
-        this.$socket.sendObj({
+        (this as any).$socket.sendObj({
           OP: 'RELOAD_CLIENTS',
           DATA: {},
         });
       }
     },
-    validatePageState(name) {
-      const { $dirty, $error } = this.$v.pageInputFormState[name];
+    validatePageState(name: string): boolean | null {
+      const { $dirty, $error } = (this as any).$v.pageInputFormState[name];
       return $dirty ? !$error : null;
     },
-    async goToLivePage() {
-      this.$socket.sendObj({
+    async goToLivePage(): Promise<void> {
+      (this as any).$socket.sendObj({
         OP: 'LIVE_SHOW_JUMP_TO_PAGE',
         DATA: {
           page: this.pageInputFormState.pageNo,
@@ -421,7 +414,7 @@ export default {
       });
     },
   },
-};
+});
 </script>
 
 <style scoped>
diff --git a/client/src/constants/lineTypes.js b/client/src/constants/lineTypes.ts
similarity index 79%
rename from client/src/constants/lineTypes.js
rename to client/src/constants/lineTypes.ts
index 8c14736b..daf113fe 100644
--- a/client/src/constants/lineTypes.js
+++ b/client/src/constants/lineTypes.ts
@@ -10,6 +10,8 @@ export const LINE_TYPES = {
   STAGE_DIRECTION: 2,
   CUE_LINE: 3,
   SPACING: 4,
-};
+} as const;
+
+export type LineType = (typeof LINE_TYPES)[keyof typeof LINE_TYPES];
 
 export default LINE_TYPES;
diff --git a/client/src/constants/textAlignment.js b/client/src/constants/textAlignment.ts
similarity index 61%
rename from client/src/constants/textAlignment.js
rename to client/src/constants/textAlignment.ts
index 56fafc64..7fab4f3d 100644
--- a/client/src/constants/textAlignment.js
+++ b/client/src/constants/textAlignment.ts
@@ -5,12 +5,11 @@ export const TEXT_ALIGNMENT = {
   LEFT: 1,
   CENTER: 2,
   RIGHT: 3,
-};
+} as const;
 
-/**
- * Map TEXT_ALIGNMENT enum values to CSS text-align values
- */
-export const TEXT_ALIGNMENT_CSS = {
+export type TextAlignment = (typeof TEXT_ALIGNMENT)[keyof typeof TEXT_ALIGNMENT];
+
+export const TEXT_ALIGNMENT_CSS: Record<TextAlignment, string> = {
   [TEXT_ALIGNMENT.LEFT]: 'left',
   [TEXT_ALIGNMENT.CENTER]: 'center',
   [TEXT_ALIGNMENT.RIGHT]: 'right',
diff --git a/client/src/js/blockOrphanUtils.test.js b/client/src/js/blockOrphanUtils.test.ts
similarity index 100%
rename from client/src/js/blockOrphanUtils.test.js
rename to client/src/js/blockOrphanUtils.test.ts
diff --git a/client/src/js/blockOrphanUtils.js b/client/src/js/blockOrphanUtils.ts
similarity index 71%
rename from client/src/js/blockOrphanUtils.js
rename to client/src/js/blockOrphanUtils.ts
index bc018759..1f65a4c8 100644
--- a/client/src/js/blockOrphanUtils.js
+++ b/client/src/js/blockOrphanUtils.ts
@@ -7,16 +7,37 @@
  * server/utils/show/block_computation.py.
  */
 
-/**
- * Compute allocation blocks from ordered scenes and a set of allocated scene IDs.
- *
- * Blocks break at act boundaries and allocation gaps.
- *
- * @param {Array<{id: number, act: number}>} orderedScenes - Scenes in display order
- * @param {Set<number>} allocatedSceneIds - Scene IDs where the item is allocated
- * @returns {Array<{actId: number, sceneIds: number[], setSceneId: number, strikeSceneId: number}>}
- */
-export function computeBlocks(orderedScenes, allocatedSceneIds) {
+export interface OrderedScene {
+  id: number;
+  act: number;
+}
+
+export interface AllocationBlock {
+  actId: number;
+  sceneIds: number[];
+  setSceneId: number;
+  strikeSceneId: number;
+}
+
+export interface CrewAssignmentRecord {
+  id: number;
+  scene_id: number;
+  assignment_type: string;
+  crew_id: number;
+}
+
+export interface FindOrphanedParams {
+  orderedScenes: OrderedScene[];
+  currentAllocations: Array<{ scene_id: number }>;
+  crewAssignments: CrewAssignmentRecord[];
+  changeType: 'add' | 'remove';
+  changeSceneId: number;
+}
+
+export function computeBlocks(
+  orderedScenes: OrderedScene[] | null | undefined,
+  allocatedSceneIds: Set<number> | null | undefined
+): AllocationBlock[] {
   if (
     !orderedScenes ||
     orderedScenes.length === 0 ||
@@ -26,9 +47,9 @@ export function computeBlocks(orderedScenes, allocatedSceneIds) {
     return [];
   }
 
-  const blocks = [];
-  let currentBlockScenes = [];
-  let currentActId = null;
+  const blocks: AllocationBlock[] = [];
+  let currentBlockScenes: number[] = [];
+  let currentActId: number | null = null;
 
   for (const scene of orderedScenes) {
     // Act boundary breaks the current block
@@ -61,7 +82,7 @@ export function computeBlocks(orderedScenes, allocatedSceneIds) {
   // Flush last block
   if (currentBlockScenes.length > 0) {
     blocks.push({
-      actId: currentActId,
+      actId: currentActId as number,
       sceneIds: [...currentBlockScenes],
       setSceneId: currentBlockScenes[0],
       strikeSceneId: currentBlockScenes[currentBlockScenes.length - 1],
@@ -71,25 +92,13 @@ export function computeBlocks(orderedScenes, allocatedSceneIds) {
   return blocks;
 }
 
-/**
- * Find crew assignments that would become orphaned by adding or removing
- * a scene allocation.
- *
- * @param {Object} params
- * @param {Array<{id: number, act: number}>} params.orderedScenes - All scenes in order
- * @param {Array<{scene_id: number}>} params.currentAllocations - Current allocations for the item
- * @param {Array<{id: number, scene_id: number, assignment_type: string, crew_id: number}>} params.crewAssignments - Current crew assignments for the item
- * @param {'add'|'remove'} params.changeType - Whether a scene allocation is being added or removed
- * @param {number} params.changeSceneId - The scene ID being added/removed
- * @returns {Array<{id: number, scene_id: number, assignment_type: string, crew_id: number}>} Orphaned assignments
- */
 export function findOrphanedAssignments({
   orderedScenes,
   currentAllocations,
   crewAssignments,
   changeType,
   changeSceneId,
-}) {
+}: FindOrphanedParams): CrewAssignmentRecord[] {
   if (!crewAssignments || crewAssignments.length === 0) {
     return [];
   }
diff --git a/client/src/js/customValidators.js b/client/src/js/customValidators.js
deleted file mode 100644
index 4d80a781..00000000
--- a/client/src/js/customValidators.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export const notNull = (value) => value != null;
-export const notNullAndGreaterThanZero = (value) => value != null && value > 0;
diff --git a/client/src/js/customValidators.ts b/client/src/js/customValidators.ts
new file mode 100644
index 00000000..a30a944c
--- /dev/null
+++ b/client/src/js/customValidators.ts
@@ -0,0 +1,3 @@
+export const notNull = (value: unknown): boolean => value != null;
+export const notNullAndGreaterThanZero = (value: unknown): boolean =>
+  value != null && (value as number) > 0;
diff --git a/client/src/js/http-interceptor.js b/client/src/js/http-interceptor.ts
similarity index 89%
rename from client/src/js/http-interceptor.js
rename to client/src/js/http-interceptor.ts
index 02283631..913abd9e 100644
--- a/client/src/js/http-interceptor.js
+++ b/client/src/js/http-interceptor.ts
@@ -3,7 +3,11 @@ import Vue from 'vue';
 import log from 'loglevel';
 import { makeURL } from '@/js/utils';
 
-export default function setupHttpInterceptor() {
+const VueToast = Vue as typeof Vue & {
+  $toast: { warning: (m: string) => void; error: (m: string) => void };
+};
+
+export default function setupHttpInterceptor(): void {
   // Store the original fetch function
   const originalFetch = window.fetch;
 
@@ -51,7 +55,7 @@ export default function setupHttpInterceptor() {
 
           if (isRefreshRequest || isRefreshingToken) {
             log.warn('Token refresh failed with 401 or already refreshing, logging out');
-            Vue.$toast.warning('Your session has expired. Please log in again.');
+            VueToast.$toast.warning('Your session has expired. Please log in again.');
             await store.dispatch('USER_LOGOUT');
             return response;
           }
@@ -78,7 +82,7 @@ export default function setupHttpInterceptor() {
               }
               // If refresh fails, handle unauthorized state
               log.warn('Token refresh failed, logging out');
-              Vue.$toast.warning('Your session has expired. Please log in again.');
+              VueToast.$toast.warning('Your session has expired. Please log in again.');
               await store.dispatch('USER_LOGOUT');
 
               // Return the original 401 response
@@ -86,7 +90,7 @@ export default function setupHttpInterceptor() {
             } catch (refreshError) {
               isRefreshingToken = false;
               log.error('Error during token refresh:', refreshError);
-              Vue.$toast.error('Authentication error - please log in again');
+              VueToast.$toast.error('Authentication error - please log in again');
               await store.dispatch('USER_LOGOUT');
               return response;
             }
diff --git a/client/src/js/logger.js b/client/src/js/logger.ts
similarity index 86%
rename from client/src/js/logger.js
rename to client/src/js/logger.ts
index 5cfbf58f..6f369bf5 100644
--- a/client/src/js/logger.js
+++ b/client/src/js/logger.ts
@@ -7,20 +7,26 @@ let isInitialized = false;
 const FLUSH_INTERVAL_MS = 1000;
 const MAX_QUEUE_SIZE = 50;
 
-let logQueue = [];
-let flushTimer = null;
+interface LogEntry {
+  level: string;
+  message: string;
+  extra: Record<string, unknown>;
+}
+
+let logQueue: LogEntry[] = [];
+let flushTimer: ReturnType<typeof setTimeout> | null = null;
 
 /**
  * Buffer a log entry and schedule a debounced flush.
  * Flushes immediately if the queue reaches MAX_QUEUE_SIZE.
  */
-function enqueueLog(level, message, extra) {
+function enqueueLog(level: string, message: string, extra: Record<string, unknown>): void {
   logQueue.push({ level, message, extra });
   if (logQueue.length >= MAX_QUEUE_SIZE) {
     flushQueue();
     return;
   }
-  clearTimeout(flushTimer);
+  clearTimeout(flushTimer ?? undefined);
   flushTimer = setTimeout(flushQueue, FLUSH_INTERVAL_MS);
 }
 
@@ -29,14 +35,14 @@ function enqueueLog(level, message, extra) {
  * Uses fetch directly to avoid potential infinite loops with HTTP interceptors.
  */
 function flushQueue() {
-  clearTimeout(flushTimer);
+  clearTimeout(flushTimer ?? undefined);
   flushTimer = null;
   if (logQueue.length === 0) return;
 
   const batch = logQueue.splice(0);
 
   const token = store.getters.AUTH_TOKEN;
-  const headers = { 'Content-Type': 'application/json' };
+  const headers: Record<string, string> = { 'Content-Type': 'application/json' };
   if (token) headers['Authorization'] = `Bearer ${token}`;
 
   fetch(makeURL('/api/v1/logs/batch'), {
@@ -52,7 +58,7 @@ function flushQueue() {
  * Initialize remote logging.
  * This hooks into the loglevel library to send logs to the server.
  */
-export function initRemoteLogging() {
+export function initRemoteLogging(): void {
   if (isInitialized) return;
   isInitialized = true;
 
@@ -84,7 +90,7 @@ export function initRemoteLogging() {
         }
       }
 
-      const extra = {};
+      const extra: Record<string, unknown> = {};
       if (args.length > 0) {
         extra.args = args.map((arg) =>
           arg instanceof Error ? { message: arg.message, stack: arg.stack, name: arg.name } : arg
diff --git a/client/src/js/micConflictUtils.test.js b/client/src/js/micConflictUtils.test.ts
similarity index 100%
rename from client/src/js/micConflictUtils.test.js
rename to client/src/js/micConflictUtils.test.ts
diff --git a/client/src/js/micConflictUtils.js b/client/src/js/micConflictUtils.ts
similarity index 73%
rename from client/src/js/micConflictUtils.js
rename to client/src/js/micConflictUtils.ts
index 5dcaaee0..496e24b3 100644
--- a/client/src/js/micConflictUtils.js
+++ b/client/src/js/micConflictUtils.ts
@@ -1,39 +1,90 @@
-export function buildSceneGraph(scenes, acts, currentShow) {
+import type { Act, Character, Scene, Show } from '@/types/api/show';
+
+export interface SceneGraphNode {
+  sceneId: number;
+  actId: number;
+  sceneName: string;
+  actName: string;
+  globalPosition: number;
+  scenePositionInAct: number;
+  previousSceneInAct: number | null;
+  nextSceneInAct: number | null;
+  previousSceneInShow: number | null;
+  nextSceneInShow: number | null;
+}
+
+export interface AdjacentScenes {
+  sameActPrev: number | null;
+  sameActNext: number | null;
+  crossActPrev: number | null;
+  crossActNext: number | null;
+}
+
+export interface MicConflict {
+  micId: number;
+  sceneId: number;
+  sceneName: string;
+  actName: string;
+  characterId: number;
+  characterName: string;
+  adjacentSceneId: number;
+  adjacentSceneName: string;
+  adjacentActName: string;
+  adjacentCharacterId: number;
+  adjacentCharacterName: string;
+  severity: 'WARNING' | 'INFO';
+  message: string;
+}
+
+export interface MicConflictResult {
+  conflicts: MicConflict[];
+  conflictsByScene: Record<number, MicConflict[]>;
+  conflictsByMic: Record<number, MicConflict[]>;
+}
+
+// Nested dict: { micId: { sceneId: characterId | null } }
+type MicAllocations = Record<string, Record<string, number | null> | null>;
+
+export function buildSceneGraph(
+  scenes: Scene[],
+  acts: Act[],
+  currentShow: Pick<Show, 'first_act_id'> | null
+): SceneGraphNode[] {
   if (!currentShow?.first_act_id || !scenes?.length || !acts?.length) {
     return [];
   }
 
-  const sceneById = {};
+  const sceneById: Record<number, Scene> = {};
   scenes.forEach((scene) => {
     sceneById[scene.id] = scene;
   });
 
-  const actById = {};
+  const actById: Record<number, Act> = {};
   acts.forEach((act) => {
     actById[act.id] = act;
   });
 
-  const graph = [];
-  const graphById = {}; // Lookup object to avoid .find() in loops
+  const graph: SceneGraphNode[] = [];
+  const graphById: Record<number, SceneGraphNode> = {}; // Lookup object to avoid .find() in loops
   let globalPosition = 0;
 
   // Traverse acts in linked list order
-  let currentAct = actById[currentShow.first_act_id];
-  let previousActLastSceneId = null;
+  let currentAct: Act | null = actById[currentShow.first_act_id];
+  let previousActLastSceneId: number | null = null;
 
   while (currentAct != null) {
     let scenePosition = 0;
-    let previousSceneId = null;
+    let previousSceneId: number | null = null;
 
     // Traverse scenes within this act
     let currentScene = currentAct.first_scene ? sceneById[currentAct.first_scene] : null;
 
     while (currentScene != null) {
-      const node = {
+      const node: SceneGraphNode = {
         sceneId: currentScene.id,
-        actId: currentScene.act,
-        sceneName: currentScene.name,
-        actName: currentAct.name,
+        actId: currentScene.act!, // scenes within an act always have act set
+        sceneName: currentScene.name!, // name is required when a scene exists
+        actName: currentAct.name!, // same for acts
         globalPosition,
         scenePositionInAct: scenePosition,
         // Within-act adjacency
@@ -82,7 +133,7 @@ export function buildSceneGraph(scenes, acts, currentShow) {
   return graph;
 }
 
-export function getAdjacentScenes(sceneId, sceneGraph) {
+export function getAdjacentScenes(sceneId: number, sceneGraph: SceneGraphNode[]): AdjacentScenes {
   const node = sceneGraph.find((n) => n.sceneId === sceneId);
 
   if (!node) {
@@ -111,7 +162,11 @@ export function getAdjacentScenes(sceneId, sceneGraph) {
   };
 }
 
-export function areScenesInSameAct(sceneId1, sceneId2, sceneGraph) {
+export function areScenesInSameAct(
+  sceneId1: number,
+  sceneId2: number,
+  sceneGraph: SceneGraphNode[]
+): boolean {
   const node1 = sceneGraph.find((n) => n.sceneId === sceneId1);
   const node2 = sceneGraph.find((n) => n.sceneId === sceneId2);
 
@@ -122,7 +177,12 @@ export function areScenesInSameAct(sceneId1, sceneId2, sceneGraph) {
   return node1.actId === node2.actId;
 }
 
-export function isSameCastMember(characterId1, characterId2, characters, castList) {
+export function isSameCastMember(
+  characterId1: number,
+  characterId2: number,
+  characters: Character[],
+  castList: unknown[]
+): boolean {
   if (characterId1 === characterId2) {
     return true; // Same character, trivially same cast member
   }
@@ -146,12 +206,23 @@ export function isSameCastMember(characterId1, characterId2, characters, castLis
   return castId1 === castId2;
 }
 
-export function getConflictSeverity(sceneId1, sceneId2, sceneGraph) {
+export function getConflictSeverity(
+  sceneId1: number,
+  sceneId2: number,
+  sceneGraph: SceneGraphNode[]
+): 'WARNING' | 'INFO' {
   const sameAct = areScenesInSameAct(sceneId1, sceneId2, sceneGraph);
   return sameAct ? 'WARNING' : 'INFO';
 }
 
-export function detectMicConflicts(allocations, scenes, acts, currentShow, characters, castList) {
+export function detectMicConflicts(
+  allocations: MicAllocations,
+  scenes: Scene[],
+  acts: Act[],
+  currentShow: Pick<Show, 'first_act_id'> | null,
+  characters: Character[],
+  castList: unknown[]
+): MicConflictResult {
   if (!allocations || !scenes?.length || !acts?.length || !currentShow) {
     return {
       conflicts: [],
@@ -170,7 +241,7 @@ export function detectMicConflicts(allocations, scenes, acts, currentShow, chara
     };
   }
 
-  const conflicts = [];
+  const conflicts: MicConflict[] = [];
 
   // For each microphone
   Object.keys(allocations).forEach((micId) => {
@@ -197,7 +268,7 @@ export function detectMicConflicts(allocations, scenes, acts, currentShow, chara
         adjacentScenes.sameActNext,
         adjacentScenes.crossActPrev,
         adjacentScenes.crossActNext,
-      ].filter((id) => id != null);
+      ].filter((id): id is number => id != null);
 
       adjacentSceneIds.forEach((adjacentSceneId) => {
         const adjacentCharacterId = micAllocations[adjacentSceneId];
@@ -265,8 +336,8 @@ export function detectMicConflicts(allocations, scenes, acts, currentShow, chara
   });
 
   // Build indexed lookups
-  const conflictsByScene = {};
-  const conflictsByMic = {};
+  const conflictsByScene: Record<number, MicConflict[]> = {};
+  const conflictsByMic: Record<number, MicConflict[]> = {};
 
   conflicts.forEach((conflict) => {
     // Index by scene
diff --git a/client/src/js/platform/browser.test.js b/client/src/js/platform/browser.test.ts
similarity index 100%
rename from client/src/js/platform/browser.test.js
rename to client/src/js/platform/browser.test.ts
diff --git a/client/src/js/platform/browser.js b/client/src/js/platform/browser.ts
similarity index 51%
rename from client/src/js/platform/browser.js
rename to client/src/js/platform/browser.ts
index dc0a505b..1ac2a2ea 100644
--- a/client/src/js/platform/browser.js
+++ b/client/src/js/platform/browser.ts
@@ -9,41 +9,23 @@
  * Get the base server URL from the current browser location
  * @returns {string} Base URL (e.g., "http://localhost:8080")
  */
-export function baseURL() {
+export function baseURL(): string {
   return `${window.location.protocol}//${window.location.hostname}:${window.location.port}`;
 }
 
-/**
- * Construct a full URL from a path
- * @param {string} path - Path to append (e.g., "/api/v1/show")
- * @returns {string} Full URL
- */
-export function makeURL(path) {
+export function makeURL(path: string): string {
   return `${baseURL()}${path}`;
 }
 
-/**
- * Get the application version
- * @returns {string} Version from environment
- */
-export function getVersion() {
+export function getVersion(): string {
   return import.meta.env.VITE_APP_VERSION || '0.23.0';
 }
 
-/**
- * Get storage adapter for browser environment
- * @param {string} type - Storage type ('local' or 'session')
- * @returns {Storage} localStorage or sessionStorage
- */
-export function getStorageAdapter(type = 'local') {
+export function getStorageAdapter(type = 'local'): Storage {
   return type === 'session' ? window.sessionStorage : window.localStorage;
 }
 
-/**
- * Get WebSocket URL for the current server
- * @returns {string} WebSocket URL (e.g., "ws://localhost:8080/api/v1/ws")
- */
-export function getWebSocketURL() {
+export function getWebSocketURL(): string {
   const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
   return `${protocol}://${window.location.hostname}:${window.location.port}/api/v1/ws`;
 }
diff --git a/client/src/js/platform/electron.js b/client/src/js/platform/electron.js
deleted file mode 100644
index 81eab114..00000000
--- a/client/src/js/platform/electron.js
+++ /dev/null
@@ -1,88 +0,0 @@
-/**
- * Electron Platform Implementation
- *
- * Provides URL resolution and storage for Electron environments.
- * Uses IPC to communicate with main process for server URL and storage.
- */
-
-/**
- * Get the base server URL from Electron store
- * @returns {string} Base URL configured by user (e.g., "http://192.168.1.100:8080")
- */
-export function baseURL() {
-  // Check if electronAPI is available
-  if (!window.electronAPI) {
-    throw new Error(
-      'Electron API not available. This should only be called in Electron environment.'
-    );
-  }
-
-  // Get server URL from Electron store via synchronous IPC
-  const serverURL = window.electronAPI.getServerURLSync?.() || null;
-
-  if (!serverURL) {
-    throw new Error('No server URL configured. Please select a server in the connection manager.');
-  }
-
-  return serverURL;
-}
-
-/**
- * Construct a full URL from a path
- * @param {string} path - Path to append (e.g., "/api/v1/show")
- * @returns {string} Full URL
- */
-export function makeURL(path) {
-  return `${baseURL()}${path}`;
-}
-
-/**
- * Get the application version
- * @returns {string} Version from Electron app
- */
-export function getVersion() {
-  if (window.electronAPI?.getAppVersion) {
-    return window.electronAPI.getAppVersion();
-  }
-  return '0.23.0';
-}
-
-/**
- * Get storage adapter for Electron environment
- * Uses electron-store via IPC instead of browser storage
- * @param {string} type - Storage type ('local' or 'session')
- * @returns {Object} Storage adapter with getItem/setItem/removeItem/clear
- */
-export function getStorageAdapter(type = 'local') {
-  if (!window.electronAPI) {
-    throw new Error('Electron API not available');
-  }
-
-  // For Electron, we use electron-store for both local and session storage
-  // Session storage in Electron should persist across restarts (unlike browser)
-  return {
-    getItem(key) {
-      return window.electronAPI.storageGet?.(key) || null;
-    },
-    setItem(key, value) {
-      window.electronAPI.storageSet?.(key, value);
-    },
-    removeItem(key) {
-      window.electronAPI.storageDelete?.(key);
-    },
-    clear() {
-      window.electronAPI.storageClear?.();
-    },
-  };
-}
-
-/**
- * Get WebSocket URL for the configured server
- * @returns {string} WebSocket URL (e.g., "ws://192.168.1.100:8080/api/v1/ws")
- */
-export function getWebSocketURL() {
-  const base = baseURL();
-  const url = new URL(base);
-  const protocol = url.protocol === 'https:' ? 'wss' : 'ws';
-  return `${protocol}://${url.host}/api/v1/ws`;
-}
diff --git a/client/src/js/platform/electron.test.js b/client/src/js/platform/electron.test.ts
similarity index 100%
rename from client/src/js/platform/electron.test.js
rename to client/src/js/platform/electron.test.ts
diff --git a/client/src/js/platform/electron.ts b/client/src/js/platform/electron.ts
new file mode 100644
index 00000000..0ea18f0f
--- /dev/null
+++ b/client/src/js/platform/electron.ts
@@ -0,0 +1,70 @@
+declare global {
+  interface Window {
+    electronAPI?: {
+      getServerURLSync?: () => string | null;
+      getAppVersion?: () => string;
+      getActiveConnection?: () => Promise<boolean>;
+      storageGet?: (key: string) => string | null;
+      storageSet?: (key: string, value: string) => void;
+      storageDelete?: (key: string) => void;
+      storageClear?: () => void;
+    };
+  }
+}
+
+export function baseURL(): string {
+  if (!window.electronAPI) {
+    throw new Error(
+      'Electron API not available. This should only be called in Electron environment.'
+    );
+  }
+
+  const serverURL = window.electronAPI.getServerURLSync?.() || null;
+
+  if (!serverURL) {
+    throw new Error('No server URL configured. Please select a server in the connection manager.');
+  }
+
+  return serverURL;
+}
+
+export function makeURL(path: string): string {
+  return `${baseURL()}${path}`;
+}
+
+export function getVersion(): string {
+  if (window.electronAPI?.getAppVersion) {
+    return window.electronAPI.getAppVersion();
+  }
+  return '0.23.0';
+}
+
+export function getStorageAdapter(
+  _type = 'local'
+): Pick<Storage, 'getItem' | 'setItem' | 'removeItem' | 'clear'> {
+  if (!window.electronAPI) {
+    throw new Error('Electron API not available');
+  }
+
+  return {
+    getItem(key: string): string | null {
+      return window.electronAPI!.storageGet?.(key) ?? null;
+    },
+    setItem(key: string, value: string): void {
+      window.electronAPI!.storageSet?.(key, value);
+    },
+    removeItem(key: string): void {
+      window.electronAPI!.storageDelete?.(key);
+    },
+    clear(): void {
+      window.electronAPI!.storageClear?.();
+    },
+  };
+}
+
+export function getWebSocketURL(): string {
+  const base = baseURL();
+  const url = new URL(base);
+  const protocol = url.protocol === 'https:' ? 'wss' : 'ws';
+  return `${protocol}://${url.host}/api/v1/ws`;
+}
diff --git a/client/src/js/platform/index.js b/client/src/js/platform/index.js
deleted file mode 100644
index f98dc16a..00000000
--- a/client/src/js/platform/index.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * Platform Abstraction Layer
- *
- * Detects the runtime environment (browser vs Electron) and exports
- * the appropriate platform implementation.
- *
- * This allows the Vue app to work seamlessly in both web browsers
- * and Electron without conditional logic scattered throughout the codebase.
- */
-
-/**
- * Detect if running in Electron environment
- * @returns {boolean} True if running in Electron
- */
-function isElectron() {
-  // Check if the Electron API is exposed via preload script
-  return typeof window !== 'undefined' && window.electronAPI !== undefined;
-}
-
-// Dynamically import and export the appropriate platform implementation
-let platformModule;
-
-if (isElectron()) {
-  // Running in Electron - use IPC-based implementation
-  platformModule = await import('./electron.js');
-} else {
-  // Running in browser - use window.location-based implementation
-  platformModule = await import('./browser.js');
-}
-
-// Re-export all platform functions
-export const { baseURL, makeURL, getVersion, getStorageAdapter, getWebSocketURL } = platformModule;
-
-/**
- * Check if currently running in Electron
- * @returns {boolean}
- */
-export { isElectron };
diff --git a/client/src/js/platform/index.ts b/client/src/js/platform/index.ts
new file mode 100644
index 00000000..4598ade4
--- /dev/null
+++ b/client/src/js/platform/index.ts
@@ -0,0 +1,15 @@
+function isElectron(): boolean {
+  return typeof window !== 'undefined' && window.electronAPI !== undefined;
+}
+
+let platformModule;
+
+if (isElectron()) {
+  platformModule = await import('./electron');
+} else {
+  platformModule = await import('./browser');
+}
+
+export const { baseURL, makeURL, getVersion, getStorageAdapter, getWebSocketURL } = platformModule;
+
+export { isElectron };
diff --git a/client/src/js/scriptUtils.js b/client/src/js/scriptUtils.ts
similarity index 64%
rename from client/src/js/scriptUtils.js
rename to client/src/js/scriptUtils.ts
index 82c34898..a8349077 100644
--- a/client/src/js/scriptUtils.js
+++ b/client/src/js/scriptUtils.ts
@@ -1,13 +1,7 @@
 import { LINE_TYPES } from '@/constants/lineTypes';
+import type { ScriptLine } from '@/types/api/script';
 
-/**
- * Determines if a script line is completely cut (all parts cut or empty).
- *
- * @param {Object} line - The script line object
- * @param {Array} cuts - Array of cut line part IDs
- * @returns {boolean} - True if the entire line is cut, false otherwise
- */
-export function isWholeLineCut(line, cuts) {
+export function isWholeLineCut(line: ScriptLine, cuts: (number | null)[]): boolean {
   // CUE_LINE can never be completely cut
   if (line.line_type === LINE_TYPES.CUE_LINE) {
     return false;
diff --git a/client/src/js/utils.js b/client/src/js/utils.ts
similarity index 77%
rename from client/src/js/utils.js
rename to client/src/js/utils.ts
index 69e75237..522d7f83 100644
--- a/client/src/js/utils.js
+++ b/client/src/js/utils.ts
@@ -1,14 +1,14 @@
 import { baseURL as platformBaseURL, makeURL as platformMakeURL } from '@/js/platform';
 
-export function baseURL() {
+export function baseURL(): string {
   return platformBaseURL();
 }
 
-export function makeURL(path) {
+export function makeURL(path: string): string {
   return platformMakeURL(path);
 }
 
-export function titleCase(str, sep = ' ') {
+export function titleCase(str: string, sep = ' '): string {
   const splitStr = str.toLowerCase().split(sep);
   for (let i = 0; i < splitStr.length; i++) {
     splitStr[i] = splitStr[i].charAt(0).toUpperCase() + splitStr[i].substring(1);
@@ -16,13 +16,13 @@ export function titleCase(str, sep = ' ') {
   return splitStr.join(' ');
 }
 
-export function randInt(min, max) {
+export function randInt(min: number, max: number): number {
   const minCeil = Math.ceil(min);
   const maxFloor = Math.floor(max);
   return Math.floor(Math.random() * (maxFloor - minCeil) + minCeil);
 }
 
-export function msToTimerString(milliseconds) {
+export function msToTimerString(milliseconds: number): string {
   // Adapted from https://stackoverflow.com/a/33909506
   const hours = milliseconds / (1000 * 60 * 60);
   const absoluteHours = Math.floor(hours);
@@ -37,7 +37,7 @@ export function msToTimerString(milliseconds) {
   return `${h}:${m}:${s}`;
 }
 
-export function msToTimerParts(milliseconds) {
+export function msToTimerParts(milliseconds: number): [number, number, number] {
   // Adapted from https://stackoverflow.com/a/33909506
   const hours = milliseconds / (1000 * 60 * 60);
   const absoluteHours = Math.floor(hours);
@@ -48,7 +48,11 @@ export function msToTimerParts(milliseconds) {
   return [absoluteHours, absoluteMinutes, absoluteSeconds];
 }
 
-export function formatTimerParts(hours, minutes, seconds) {
+export function formatTimerParts(
+  hours: number,
+  minutes: number,
+  seconds: number
+): [string | number, string | number, string | number] {
   const h = hours > 9 ? hours : `0${hours}`;
   const m = minutes > 9 ? minutes : `0${minutes}`;
   const s = seconds > 9 ? seconds : `0${seconds}`;
diff --git a/client/src/main.js b/client/src/main.ts
similarity index 82%
rename from client/src/main.js
rename to client/src/main.ts
index 091e524d..c322f39a 100644
--- a/client/src/main.js
+++ b/client/src/main.ts
@@ -32,7 +32,7 @@ Vue.component('SplitPanes', Splitpanes);
 Vue.component('SplitPane', Pane);
 
 Vue.use(Vuex);
-Vue.use(Vuelidate);
+Vue.use(Vuelidate as any); // @types/vuelidate bundles its own Vue copy that conflicts with main package
 Vue.use(ToastPlugin, {
   position: 'top-right',
 });
@@ -49,7 +49,7 @@ async function shouldInitializeWebSocket() {
 
   // Electron mode: check if there's an active connection
   try {
-    const activeConnection = await window.electronAPI.getActiveConnection();
+    const activeConnection = await (window as any).electronAPI.getActiveConnection();
     return activeConnection !== null;
   } catch (error) {
     console.warn('Could not check active connection, skipping WebSocket initialization:', error);
@@ -68,7 +68,12 @@ function initializeWebSocket() {
       reconnection: true,
       format: 'json',
       store,
-      passToStoreHandler(eventName, event, next) {
+      passToStoreHandler(
+        this: any,
+        eventName: string,
+        event: any,
+        next: (eventName: string, event: any) => void
+      ) {
         // Ignore anything that doesn't start with SOCKET_ as per
         // https://www.npmjs.com/package/vue-native-websocket
         if (!eventName.startsWith('SOCKET_')) {
@@ -116,25 +121,23 @@ shouldInitializeWebSocket().then((shouldInit) => {
 Vue.config.productionTip = false;
 Vue.config.devtools = import.meta.env.MODE === 'development';
 
-Vue.filter('capitalize', (value) => {
+Vue.filter('capitalize', (value: any) => {
   if (!value) return '';
   return value
     .toString()
     .split(' ')
-    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .map((word: string) => word.charAt(0).toUpperCase() + word.slice(1))
     .join(' ');
 });
-Vue.filter('uppercase', (value) => {
+Vue.filter('uppercase', (value: any) => {
   if (!value) return '';
   return value.toString().toUpperCase();
 });
-Vue.filter('lowercase', (value) => {
+Vue.filter('lowercase', (value: any) => {
   if (!value) return '';
   return value.toString().toLowerCase();
 });
 
-new Vue({
-  router,
-  store,
-  render: (h) => h(App),
-}).$mount('#app');
+// vue-router's ComponentOptions augmentation is shadowed by @types/vuelidate's bundled
+// Vue copy; cast away the conflict until vuelidate is upgraded to vuelidate-next.
+new (Vue as any)({ router, store, render: (h: any) => h(App) }).$mount('#app');
diff --git a/client/src/mixins/cueDisplayMixin.js b/client/src/mixins/cueDisplayMixin.js
deleted file mode 100644
index 1934d97e..00000000
--- a/client/src/mixins/cueDisplayMixin.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import { mapGetters } from 'vuex';
-import { contrastColor } from 'contrast-color';
-
-/**
- * Shared mixin for cue display logic across live view components.
- * Provides methods for cue color handling with user override support.
- */
-export default {
-  computed: {
-    ...mapGetters(['CUE_COLOUR_OVERRIDES']),
-  },
-  methods: {
-    contrastColor,
-    cuePrefix(cue) {
-      const cueType = this.cueTypes.find((cT) => cT.id === cue.cue_type_id);
-      return cueType.prefix;
-    },
-    cueLabel(cue) {
-      const cueType = this.cueTypes.find((cT) => cT.id === cue.cue_type_id);
-      return `${cueType.prefix} ${cue.ident}`;
-    },
-    cueBackgroundColour(cue) {
-      const cueType = this.cueTypes.find((ct) => ct.id === cue.cue_type_id);
-      if (!cueType) return '#000000'; // Fallback
-
-      // Check if user has an override for this cue type
-      const override = this.CUE_COLOUR_OVERRIDES.find((o) => o.settings.id === cueType.id);
-      if (override) {
-        return override.settings.colour;
-      }
-
-      return cueType.colour;
-    },
-  },
-};
diff --git a/client/src/mixins/cueDisplayMixin.ts b/client/src/mixins/cueDisplayMixin.ts
new file mode 100644
index 00000000..f53cba34
--- /dev/null
+++ b/client/src/mixins/cueDisplayMixin.ts
@@ -0,0 +1,37 @@
+import { defineComponent } from 'vue';
+import { mapGetters } from 'vuex';
+import { contrastColor } from 'contrast-color';
+import type { Cue, CueType } from '@/types/api/cues';
+import type { CueColourOverride } from '@/types/api/user';
+
+export default defineComponent({
+  computed: {
+    ...mapGetters(['CUE_COLOUR_OVERRIDES']),
+  },
+  methods: {
+    contrastColor,
+    cuePrefix(cue: Cue): string | null {
+      const cueType: CueType | undefined = (this as any).cueTypes?.find(
+        (cT: CueType) => cT.id === cue.cue_type_id
+      );
+      return cueType?.prefix ?? null;
+    },
+    cueLabel(cue: Cue): string {
+      const cueType: CueType | undefined = (this as any).cueTypes?.find(
+        (cT: CueType) => cT.id === cue.cue_type_id
+      );
+      return `${cueType?.prefix} ${cue.ident}`;
+    },
+    cueBackgroundColour(cue: Cue): string {
+      const cueType: CueType | undefined = (this as any).cueTypes?.find(
+        (ct: CueType) => ct.id === cue.cue_type_id
+      );
+      if (!cueType) return '#000000';
+      const override: CueColourOverride | undefined = this.CUE_COLOUR_OVERRIDES?.find(
+        (o: any) => o.settings?.id === cueType.id
+      );
+      if (override) return (override as any).settings.colour;
+      return cueType.colour ?? '#000000';
+    },
+  },
+});
diff --git a/client/src/mixins/formValidationMixin.js b/client/src/mixins/formValidationMixin.js
deleted file mode 100644
index 0f955d25..00000000
--- a/client/src/mixins/formValidationMixin.js
+++ /dev/null
@@ -1,77 +0,0 @@
-/**
- * Mixin providing common form validation helper methods for Vuelidate.
- *
- * This mixin centralizes the repeated validation and form reset patterns used
- * across multiple components that handle new/edit forms.
- *
- * Usage:
- * 1. Import and include in your component's mixins array
- * 2. Define your form state properties (e.g., newFormState, editFormState)
- * 3. Define your validations object as usual
- * 4. Use the helper methods in your template and component logic
- *
- * Example:
- *   import formValidationMixin from '@/mixins/formValidationMixin';
- *
- *   export default {
- *     mixins: [formValidationMixin],
- *     data() {
- *       return {
- *         newFormState: { name: '' },
- *         editFormState: { id: null, name: '' },
- *       };
- *     },
- *     validations: {
- *       newFormState: { name: { required } },
- *       editFormState: { name: { required } },
- *     },
- *     methods: {
- *       resetNewForm() {
- *         this.resetForm('newFormState', { name: '' });
- *       },
- *     },
- *   };
- */
-export default {
-  methods: {
-    /**
-     * Get Bootstrap validation state for a form field.
-     *
-     * @param {string} formStateKey - The validation group key (e.g., 'newFormState', 'editFormState')
-     * @param {string} fieldName - The field name within the validation group
-     * @returns {boolean|null} - true if valid, false if invalid, null if pristine
-     */
-    getValidationState(formStateKey, fieldName) {
-      const field = this.$v[formStateKey][fieldName];
-      if (!field) {
-        return null;
-      }
-      const { $dirty, $error } = field;
-      return $dirty ? !$error : null;
-    },
-
-    /**
-     * Reset a form to its initial state and reset validation.
-     *
-     * @param {string} formStateKey - The data property key (e.g., 'newFormState')
-     * @param {Object} initialState - The initial state object to reset to
-     */
-    resetForm(formStateKey, initialState) {
-      this[formStateKey] = { ...initialState };
-      this.$nextTick(() => {
-        this.$v.$reset();
-      });
-    },
-
-    /**
-     * Check if a form has validation errors after touching all fields.
-     *
-     * @param {string} formStateKey - The validation group key
-     * @returns {boolean} - true if the form has any validation errors
-     */
-    hasFormErrors(formStateKey) {
-      this.$v[formStateKey].$touch();
-      return this.$v[formStateKey].$anyError;
-    },
-  },
-};
diff --git a/client/src/mixins/formValidationMixin.ts b/client/src/mixins/formValidationMixin.ts
new file mode 100644
index 00000000..59085303
--- /dev/null
+++ b/client/src/mixins/formValidationMixin.ts
@@ -0,0 +1,24 @@
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  methods: {
+    getValidationState(formStateKey: string, fieldName: string): boolean | null {
+      const field = (this as any).$v?.[formStateKey]?.[fieldName];
+      if (!field) return null;
+      const { $dirty, $error } = field;
+      return $dirty ? !$error : null;
+    },
+
+    resetForm(formStateKey: string, initialState: Record<string, unknown>): void {
+      (this as any)[formStateKey] = { ...initialState };
+      this.$nextTick(() => {
+        (this as any).$v.$reset();
+      });
+    },
+
+    hasFormErrors(formStateKey: string): boolean {
+      (this as any).$v[formStateKey].$touch();
+      return (this as any).$v[formStateKey].$anyError;
+    },
+  },
+});
diff --git a/client/src/mixins/passwordValidation.js b/client/src/mixins/passwordValidation.js
deleted file mode 100644
index 98291141..00000000
--- a/client/src/mixins/passwordValidation.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import { required, minLength, sameAs } from 'vuelidate/lib/validators';
-
-/**
- * Mixin for password validation logic used across multiple components
- * Provides consistent validation rules for password fields
- */
-export default {
-  methods: {
-    /**
-     * Validate form field state for Bootstrap Vue feedback
-     * @param {string} name - Field name to validate
-     * @returns {boolean|null} - true if valid, false if invalid, null if untouched
-     */
-    validateState(name) {
-      const { $dirty, $error } = this.$v.state[name];
-      return $dirty ? !$error : null;
-    },
-
-    /**
-     * Get validation rules for new password field
-     * @returns {Object} Vuelidate validation rules
-     */
-    getPasswordValidations() {
-      return {
-        required,
-        minLength: minLength(6),
-      };
-    },
-
-    /**
-     * Get validation rules for confirm password field
-     * @param {string} passwordFieldName - Name of password field to match against
-     * @returns {Object} Vuelidate validation rules
-     */
-    getConfirmPasswordValidations(passwordFieldName = 'newPassword') {
-      return {
-        required,
-        sameAsPassword: sameAs(passwordFieldName),
-      };
-    },
-  },
-};
diff --git a/client/src/mixins/passwordValidation.ts b/client/src/mixins/passwordValidation.ts
new file mode 100644
index 00000000..8f9f3d5e
--- /dev/null
+++ b/client/src/mixins/passwordValidation.ts
@@ -0,0 +1,25 @@
+import { defineComponent } from 'vue';
+import { required, minLength, sameAs } from 'vuelidate/lib/validators';
+
+export default defineComponent({
+  methods: {
+    validateState(name: string): boolean | null {
+      const { $dirty, $error } = (this as any).$v.state[name];
+      return $dirty ? !$error : null;
+    },
+
+    getPasswordValidations() {
+      return {
+        required,
+        minLength: minLength(6),
+      };
+    },
+
+    getConfirmPasswordValidations(passwordFieldName = 'newPassword') {
+      return {
+        required,
+        sameAsPassword: sameAs(passwordFieldName),
+      };
+    },
+  },
+});
diff --git a/client/src/mixins/scriptDisplayMixin.js b/client/src/mixins/scriptDisplayMixin.js
deleted file mode 100644
index 8b6a7f08..00000000
--- a/client/src/mixins/scriptDisplayMixin.js
+++ /dev/null
@@ -1,157 +0,0 @@
-import { mapGetters } from 'vuex';
-import { LINE_TYPES } from '@/constants/lineTypes';
-import { TEXT_ALIGNMENT_CSS } from '@/constants/textAlignment';
-
-/**
- * Shared mixin for script display presentation logic.
- * Handles stage directions, act/scene labels, intervals, and viewport tracking.
- *
- * This mixin assumes the component has:
- * - Props: line, lineIndex, previousLine, acts, scenes,
- *          stageDirectionStyles, stageDirectionStyleOverrides
- * - Optional props: previousLineIndex (required for interval/cut-aware features)
- * - Optional refs: lineContainer (required for viewport tracking in live view)
- * - Optional methods: isWholeLineCut, getPreviousLineForIndex (from scriptNavigationMixin,
- *                     required for interval/cut-aware features)
- *
- * Components using only the alignment/styling features (headingStyle, dialogueStyle,
- * scriptTextAlign, stageDirectionStyling) do not need the optional dependencies.
- */
-export default {
-  data() {
-    return {
-      observer: null,
-    };
-  },
-  computed: {
-    needsActSceneLabel() {
-      let { previousLine } = this;
-      let lineIndex = this.previousLineIndex;
-      while (previousLine != null && this.isWholeLineCut(previousLine)) {
-        [lineIndex, previousLine] = this.getPreviousLineForIndex(previousLine.page, lineIndex);
-      }
-      if (previousLine == null) {
-        return true;
-      }
-      return !(
-        previousLine.act_id === this.line.act_id && previousLine.scene_id === this.line.scene_id
-      );
-    },
-    needsIntervalBanner() {
-      let { previousLine, lineIndex } = this;
-      while (previousLine != null && this.isWholeLineCut(previousLine)) {
-        [lineIndex, previousLine] = this.getPreviousLineForIndex(previousLine.page, lineIndex);
-      }
-      if (previousLine == null) {
-        return false;
-      }
-      return previousLine.act_id !== this.line.act_id;
-    },
-    previousActLabel() {
-      return this.acts.find((act) => act.id === this.previousLine.act_id).name;
-    },
-    actLabel() {
-      return this.acts.find((act) => act.id === this.line.act_id).name;
-    },
-    sceneLabel() {
-      return this.scenes.find((scene) => scene.id === this.line.scene_id).name;
-    },
-    stageDirectionStyle() {
-      const sdStyle = this.stageDirectionStyles.find(
-        (style) => style.id === this.line.stage_direction_style_id
-      );
-      const override = this.stageDirectionStyleOverrides.find(
-        (elem) => elem.settings.id === sdStyle.id
-      );
-      if (this.line.line_type === LINE_TYPES.STAGE_DIRECTION) {
-        return override ? override.settings : sdStyle;
-      }
-      return null;
-    },
-    stageDirectionStyling() {
-      if (this.line.stage_direction_style_id == null || this.stageDirectionStyle == null) {
-        return {
-          'background-color': 'darkslateblue',
-          'font-style': 'italic',
-        };
-      }
-      const style = {
-        'font-weight': this.stageDirectionStyle.bold ? 'bold' : 'normal',
-        'font-style': this.stageDirectionStyle.italic ? 'italic' : 'normal',
-        'text-decoration-line': this.stageDirectionStyle.underline ? 'underline' : 'none',
-        color: this.stageDirectionStyle.text_colour,
-      };
-      if (this.stageDirectionStyle.enable_background_colour) {
-        style['background-color'] = this.stageDirectionStyle.background_colour;
-      }
-      return style;
-    },
-    scriptTextAlign() {
-      const alignment = this.USER_SETTINGS.script_text_alignment || 2;
-      return TEXT_ALIGNMENT_CSS[alignment] || 'center';
-    },
-    headingStyle() {
-      return { textAlign: this.scriptTextAlign };
-    },
-    dialogueStyle() {
-      return { textAlign: this.scriptTextAlign };
-    },
-    needsHeadingsAny() {
-      return this.needsHeadings.some((x) => x === true);
-    },
-    needsHeadingsAll() {
-      return this.needsHeadings.every((x) => x === true);
-    },
-    ...mapGetters(['USER_SETTINGS']),
-  },
-  mounted() {
-    // Only set up viewport observer if lineContainer ref exists
-    // (e.g., live view needs this, but editor view does not)
-    if (this.$refs.lineContainer) {
-      this.observer = new MutationObserver((mutations) => {
-        for (const m of mutations) {
-          const newValue = m.target.getAttribute(m.attributeName);
-          this.$nextTick(() => {
-            this.onClassChange(newValue, m.oldValue);
-          });
-        }
-      });
-
-      this.observer.observe(this.$refs.lineContainer, {
-        attributes: true,
-        attributeOldValue: true,
-        attributeFilter: ['class'],
-      });
-    }
-  },
-  destroyed() {
-    if (this.observer) {
-      this.observer.disconnect();
-    }
-  },
-  methods: {
-    onClassChange(classAttrValue, oldClassAttrValue) {
-      const classList = classAttrValue.split(' ');
-      const oldClassList = oldClassAttrValue.split(' ');
-      if (
-        classList.includes('last-script-element') &&
-        !oldClassList.includes('last-script-element')
-      ) {
-        this.$emit('last-line-change', this.line.page, this.lineIndex);
-      }
-      if (
-        classList.includes('first-script-element') &&
-        !oldClassList.includes('first-script-element')
-      ) {
-        let previousLine = null;
-        if (this.previousLine != null) {
-          previousLine = `page_${this.previousLine.page}_line_${this.previousLineIndex}`;
-        }
-        this.$emit('first-line-change', this.line.page, this.lineIndex, previousLine);
-      }
-    },
-    startInterval() {
-      this.$emit('start-interval', this.acts.find((act) => act.id === this.previousLine.act_id).id);
-    },
-  },
-};
diff --git a/client/src/mixins/scriptDisplayMixin.ts b/client/src/mixins/scriptDisplayMixin.ts
new file mode 100644
index 00000000..4b9c0b1d
--- /dev/null
+++ b/client/src/mixins/scriptDisplayMixin.ts
@@ -0,0 +1,157 @@
+import { defineComponent } from 'vue';
+import { mapGetters } from 'vuex';
+import { LINE_TYPES } from '@/constants/lineTypes';
+import { TEXT_ALIGNMENT_CSS } from '@/constants/textAlignment';
+import type { ScriptLine, StageDirectionStyle } from '@/types/api/script';
+import type { Act, Scene } from '@/types/api/show';
+
+export default defineComponent({
+  data() {
+    return {
+      observer: null as MutationObserver | null,
+    };
+  },
+  computed: {
+    needsActSceneLabel(): boolean {
+      let previousLine: ScriptLine | null = (this as any).previousLine;
+      let lineIndex: number | null = (this as any).previousLineIndex;
+      while (previousLine != null && (this as any).isWholeLineCut(previousLine)) {
+        [lineIndex, previousLine] = (this as any).getPreviousLineForIndex(
+          previousLine.page,
+          lineIndex
+        );
+      }
+      if (previousLine == null) return true;
+      const line: ScriptLine = (this as any).line;
+      return !(previousLine.act_id === line.act_id && previousLine.scene_id === line.scene_id);
+    },
+    needsIntervalBanner(): boolean {
+      let previousLine: ScriptLine | null = (this as any).previousLine;
+      let lineIndex: number | null = (this as any).lineIndex;
+      while (previousLine != null && (this as any).isWholeLineCut(previousLine)) {
+        [lineIndex, previousLine] = (this as any).getPreviousLineForIndex(
+          previousLine.page,
+          lineIndex
+        );
+      }
+      if (previousLine == null) return false;
+      return previousLine.act_id !== (this as any).line.act_id;
+    },
+    previousActLabel(): string | null {
+      const previousLine: ScriptLine = (this as any).previousLine;
+      return (this as any).acts?.find((act: Act) => act.id === previousLine.act_id)?.name ?? null;
+    },
+    actLabel(): string | null {
+      const line: ScriptLine = (this as any).line;
+      return (this as any).acts?.find((act: Act) => act.id === line.act_id)?.name ?? null;
+    },
+    sceneLabel(): string | null {
+      const line: ScriptLine = (this as any).line;
+      return (this as any).scenes?.find((scene: Scene) => scene.id === line.scene_id)?.name ?? null;
+    },
+    stageDirectionStyle(): StageDirectionStyle | null {
+      const line: ScriptLine = (this as any).line;
+      const sdStyle: StageDirectionStyle | undefined = (this as any).stageDirectionStyles?.find(
+        (style: StageDirectionStyle) => style.id === line.stage_direction_style_id
+      );
+      if (!sdStyle) return null;
+      const override = (this as any).stageDirectionStyleOverrides?.find(
+        (elem: any) => elem.settings?.id === sdStyle.id
+      );
+      if (line.line_type === LINE_TYPES.STAGE_DIRECTION) {
+        return override ? override.settings : sdStyle;
+      }
+      return null;
+    },
+    stageDirectionStyling(): Record<string, string> {
+      const line: ScriptLine = (this as any).line;
+      if (line.stage_direction_style_id == null || (this as any).stageDirectionStyle == null) {
+        return { 'background-color': 'darkslateblue', 'font-style': 'italic' };
+      }
+      const style: StageDirectionStyle = (this as any).stageDirectionStyle;
+      const result: Record<string, string> = {
+        'font-weight': style.bold ? 'bold' : 'normal',
+        'font-style': style.italic ? 'italic' : 'normal',
+        'text-decoration-line': style.underline ? 'underline' : 'none',
+        color: style.text_colour ?? '',
+      };
+      if (style.enable_background_colour) {
+        result['background-color'] = style.background_colour ?? '';
+      }
+      return result;
+    },
+    scriptTextAlign(): string {
+      const alignment = (this as any).USER_SETTINGS?.script_text_alignment ?? 2;
+      return TEXT_ALIGNMENT_CSS[alignment] || 'center';
+    },
+    headingStyle(): Record<string, string> {
+      return { textAlign: (this as any).scriptTextAlign };
+    },
+    dialogueStyle(): Record<string, string> {
+      return { textAlign: (this as any).scriptTextAlign };
+    },
+    needsHeadingsAny(): boolean {
+      return (this as any).needsHeadings.some((x: boolean) => x === true);
+    },
+    needsHeadingsAll(): boolean {
+      return (this as any).needsHeadings.every((x: boolean) => x === true);
+    },
+    ...mapGetters(['USER_SETTINGS']),
+  },
+  mounted() {
+    if (this.$refs.lineContainer) {
+      this.observer = new MutationObserver((mutations) => {
+        for (const m of mutations) {
+          const newValue = (m.target as Element).getAttribute(m.attributeName!);
+          this.$nextTick(() => {
+            (this as any).onClassChange(newValue, m.oldValue);
+          });
+        }
+      });
+
+      this.observer.observe(this.$refs.lineContainer as Element, {
+        attributes: true,
+        attributeOldValue: true,
+        attributeFilter: ['class'],
+      });
+    }
+  },
+  destroyed() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  },
+  methods: {
+    onClassChange(classAttrValue: string | null, oldClassAttrValue: string | null): void {
+      const classList = classAttrValue?.split(' ') ?? [];
+      const oldClassList = oldClassAttrValue?.split(' ') ?? [];
+      const line: ScriptLine = (this as any).line;
+      const lineIndex: number = (this as any).lineIndex;
+      if (
+        classList.includes('last-script-element') &&
+        !oldClassList.includes('last-script-element')
+      ) {
+        this.$emit('last-line-change', line.page, lineIndex);
+      }
+      if (
+        classList.includes('first-script-element') &&
+        !oldClassList.includes('first-script-element')
+      ) {
+        const previousLine: ScriptLine | null = (this as any).previousLine;
+        const previousLineIndex: number | null = (this as any).previousLineIndex;
+        let previousLineRef: string | null = null;
+        if (previousLine != null) {
+          previousLineRef = `page_${previousLine.page}_line_${previousLineIndex}`;
+        }
+        this.$emit('first-line-change', line.page, lineIndex, previousLineRef);
+      }
+    },
+    startInterval(): void {
+      const previousLine: ScriptLine = (this as any).previousLine;
+      this.$emit(
+        'start-interval',
+        (this as any).acts?.find((act: Act) => act.id === previousLine.act_id)?.id
+      );
+    },
+  },
+});
diff --git a/client/src/mixins/scriptNavigationMixin.js b/client/src/mixins/scriptNavigationMixin.ts
similarity index 54%
rename from client/src/mixins/scriptNavigationMixin.js
rename to client/src/mixins/scriptNavigationMixin.ts
index d9f1200f..618c3940 100644
--- a/client/src/mixins/scriptNavigationMixin.js
+++ b/client/src/mixins/scriptNavigationMixin.ts
@@ -1,34 +1,27 @@
+import { defineComponent } from 'vue';
 import { mapGetters } from 'vuex';
 import { LINE_TYPES } from '@/constants/lineTypes';
 import { isWholeLineCut as isWholeLineCutUtil } from '@/js/scriptUtils';
+import type { ScriptLine, ScriptLinePart } from '@/types/api/script';
 
-/**
- * Shared mixin for script navigation and filtering logic.
- * Provides utilities for navigating through script lines and determining visibility.
- */
-export default {
+export default defineComponent({
   computed: {
-    needsHeadings() {
-      let { previousLine } = this;
-      let lineIndex = this.previousLineIndex;
+    needsHeadings(): boolean[] {
+      let previousLine: ScriptLine | null = (this as any).previousLine;
+      let lineIndex: number | null = (this as any).previousLineIndex;
       while (
         previousLine != null &&
         (previousLine.line_type === LINE_TYPES.STAGE_DIRECTION || this.isWholeLineCut(previousLine))
       ) {
-        [lineIndex, previousLine] = this.getPreviousLineForIndex(previousLine.page, lineIndex);
+        [lineIndex, previousLine] = this.getPreviousLineForIndex(previousLine.page, lineIndex!);
       }
 
-      const ret = [];
-      this.line.line_parts.forEach(function checkLinePartNeedsHeading(part) {
-        if (
-          previousLine == null ||
-          previousLine.line_parts.length !== this.line.line_parts.length
-        ) {
+      const line: ScriptLine = (this as any).line;
+      const ret: boolean[] = [];
+      line.line_parts.forEach(function checkLinePartNeedsHeading(this: any, part: ScriptLinePart) {
+        if (previousLine == null || previousLine.line_parts.length !== line.line_parts.length) {
           ret.push(true);
-        } else if (
-          previousLine.act_id !== this.line.act_id ||
-          previousLine.scene_id !== this.line.scene_id
-        ) {
+        } else if (previousLine.act_id !== line.act_id || previousLine.scene_id !== line.scene_id) {
           ret.push(true);
         } else {
           const matchingIndex = previousLine.line_parts.find(
@@ -51,13 +44,16 @@ export default {
     ...mapGetters(['GET_SCRIPT_PAGE', 'SCRIPT_CUTS']),
   },
   methods: {
-    getPreviousLineForIndex(pageIndex, lineIndex) {
+    getPreviousLineForIndex(
+      pageIndex: number,
+      lineIndex: number
+    ): [number | null, ScriptLine | null] {
       if (lineIndex > 0) {
-        return [lineIndex - 1, this.GET_SCRIPT_PAGE(pageIndex)[lineIndex - 1]];
+        return [lineIndex - 1, (this as any).GET_SCRIPT_PAGE(pageIndex)[lineIndex - 1]];
       }
       let loopPageNo = pageIndex - 1;
       while (loopPageNo >= 1) {
-        const loopPage = this.GET_SCRIPT_PAGE(loopPageNo);
+        const loopPage: ScriptLine[] = (this as any).GET_SCRIPT_PAGE(loopPageNo);
         if (loopPage.length > 0) {
           return [loopPage.length - 1, loopPage[loopPage.length - 1]];
         }
@@ -65,8 +61,8 @@ export default {
       }
       return [null, null];
     },
-    isWholeLineCut(line) {
-      return isWholeLineCutUtil(line, this.SCRIPT_CUTS);
+    isWholeLineCut(line: ScriptLine): boolean {
+      return isWholeLineCutUtil(line, (this as any).SCRIPT_CUTS);
     },
   },
-};
+});
diff --git a/client/src/mixins/statsTableMixin.js b/client/src/mixins/statsTableMixin.js
deleted file mode 100644
index 225c5673..00000000
--- a/client/src/mixins/statsTableMixin.js
+++ /dev/null
@@ -1,102 +0,0 @@
-import { mapActions, mapGetters } from 'vuex';
-
-/**
- * Shared mixin for stats table components that display data organized by acts and scenes.
- * Provides common logic for traversing and displaying act/scene hierarchies in table format.
- *
- * This mixin assumes the component has:
- * - A Vuex store with ACT_BY_ID, SCENE_BY_ID, and CURRENT_SHOW getters
- * - A Vuex store with GET_ACT_LIST and GET_SCENE_LIST actions
- * - A `loaded` boolean in the component's data (for loading state)
- * - A `getStats()` method that fetches component-specific statistics
- *
- * Components using this mixin should implement:
- * - data() with `loaded: false` and component-specific stats object
- * - methods.getStats() - async method to fetch stats from API
- * - computed.tableData - component-specific data formatting
- * - computed.tableFields - component-specific field names (can use this.sortedScenes)
- */
-export default {
-  computed: {
-    /**
-     * Returns acts in order by following the linked list structure.
-     * Starts from first_act_id and follows next_act references.
-     */
-    sortedActs() {
-      if (this.CURRENT_SHOW.first_act_id == null) {
-        return [];
-      }
-      let currentAct = this.ACT_BY_ID(this.CURRENT_SHOW.first_act_id);
-      if (currentAct == null) {
-        return [];
-      }
-      const acts = [];
-      while (currentAct != null) {
-        acts.push(currentAct);
-        currentAct = this.ACT_BY_ID(currentAct.next_act);
-      }
-      return acts;
-    },
-
-    /**
-     * Returns scenes in order by following the linked list structure.
-     * Iterates through acts, then through scenes within each act.
-     */
-    sortedScenes() {
-      if (this.CURRENT_SHOW.first_act_id == null) {
-        return [];
-      }
-
-      let currentAct = this.ACT_BY_ID(this.CURRENT_SHOW.first_act_id);
-      if (currentAct == null || currentAct.first_scene == null) {
-        return [];
-      }
-
-      const scenes = [];
-      while (currentAct != null) {
-        let currentScene = this.SCENE_BY_ID(currentAct.first_scene);
-        while (currentScene != null) {
-          scenes.push(currentScene);
-          currentScene = this.SCENE_BY_ID(currentScene.next_scene);
-        }
-        currentAct = this.ACT_BY_ID(currentAct.next_act);
-      }
-      return scenes;
-    },
-    ...mapGetters(['ACT_BY_ID', 'SCENE_BY_ID', 'CURRENT_SHOW']),
-  },
-
-  async mounted() {
-    await this.GET_ACT_LIST();
-    await this.GET_SCENE_LIST();
-    await this.getStats();
-    this.loaded = true;
-  },
-
-  methods: {
-    /**
-     * Counts how many scenes belong to a given act.
-     * Used for table header colspan calculations.
-     */
-    numScenesPerAct(actId) {
-      return this.sortedScenes.filter((scene) => scene.act === actId).length;
-    },
-
-    /**
-     * Generates the slot name for a scene's table header.
-     * Used in template #[getHeaderName(scene.id)] syntax.
-     */
-    getHeaderName(sceneId) {
-      return `head(${sceneId})`;
-    },
-
-    /**
-     * Generates the slot name for a scene's table cell.
-     * Used in template #[getCellName(scene.id)] syntax.
-     */
-    getCellName(sceneId) {
-      return `cell(${sceneId})`;
-    },
-    ...mapActions(['GET_ACT_LIST', 'GET_SCENE_LIST']),
-  },
-};
diff --git a/client/src/mixins/statsTableMixin.ts b/client/src/mixins/statsTableMixin.ts
new file mode 100644
index 00000000..e5c0496a
--- /dev/null
+++ b/client/src/mixins/statsTableMixin.ts
@@ -0,0 +1,60 @@
+import { defineComponent } from 'vue';
+import { mapActions, mapGetters } from 'vuex';
+import type { Act, Scene } from '@/types/api/show';
+
+export default defineComponent({
+  computed: {
+    sortedActs(): Act[] {
+      const show = (this as any).CURRENT_SHOW;
+      if (show?.first_act_id == null) return [];
+      let currentAct: Act | null = (this as any).ACT_BY_ID(show.first_act_id);
+      if (currentAct == null) return [];
+      const acts: Act[] = [];
+      while (currentAct != null) {
+        acts.push(currentAct);
+        currentAct = (this as any).ACT_BY_ID(currentAct.next_act);
+      }
+      return acts;
+    },
+
+    sortedScenes(): Scene[] {
+      const show = (this as any).CURRENT_SHOW;
+      if (show?.first_act_id == null) return [];
+      let currentAct: Act | null = (this as any).ACT_BY_ID(show.first_act_id);
+      if (currentAct == null || currentAct.first_scene == null) return [];
+      const scenes: Scene[] = [];
+      while (currentAct != null) {
+        let currentScene: Scene | null = (this as any).SCENE_BY_ID(currentAct.first_scene);
+        while (currentScene != null) {
+          scenes.push(currentScene);
+          currentScene = (this as any).SCENE_BY_ID(currentScene.next_scene);
+        }
+        currentAct = (this as any).ACT_BY_ID(currentAct.next_act);
+      }
+      return scenes;
+    },
+    ...mapGetters(['ACT_BY_ID', 'SCENE_BY_ID', 'CURRENT_SHOW']),
+  },
+
+  async mounted() {
+    await (this as any).GET_ACT_LIST();
+    await (this as any).GET_SCENE_LIST();
+    await (this as any).getStats();
+    (this as any).loaded = true;
+  },
+
+  methods: {
+    numScenesPerAct(actId: number): number {
+      return (this as any).sortedScenes.filter((scene: Scene) => scene.act === actId).length;
+    },
+
+    getHeaderName(sceneId: number): string {
+      return `head(${sceneId})`;
+    },
+
+    getCellName(sceneId: number): string {
+      return `cell(${sceneId})`;
+    },
+    ...mapActions(['GET_ACT_LIST', 'GET_SCENE_LIST']),
+  },
+});
diff --git a/client/src/mixins/timelineMixin.js b/client/src/mixins/timelineMixin.js
deleted file mode 100644
index 3a25a812..00000000
--- a/client/src/mixins/timelineMixin.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { mapGetters } from 'vuex';
-
-/**
- * Shared mixin for timeline visualization components (MicTimeline, StageTimeline).
- * Provides common SVG rendering utilities, layout calculations, and export functionality.
- *
- * This mixin assumes the component has:
- * - A Vuex store with ACT_BY_ID and ORDERED_SCENES getters
- * - A `scenes` computed property returning the ordered list of scenes
- * - A `rows` computed property returning items to display as rows
- * - A `$refs.svg` reference to the SVG element
- *
- * Components using this mixin should implement:
- * - computed.scenes - array of scene objects in order
- * - computed.rows - array of row items (e.g., mics, props, scenery)
- * - methods for generating bars specific to their domain
- */
-export default {
-  data() {
-    return {
-      margin: {
-        top: 75,
-        right: 20,
-        bottom: 20,
-        left: 150,
-      },
-      sceneWidth: 100,
-      rowHeight: 50,
-      barPadding: 6,
-    };
-  },
-
-  computed: {
-    ...mapGetters(['ACT_BY_ID']),
-    contentWidth() {
-      return this.scenes.length * this.sceneWidth;
-    },
-    contentHeight() {
-      return this.rows.length * this.rowHeight;
-    },
-    totalWidth() {
-      return this.margin.left + this.contentWidth + this.margin.right;
-    },
-    totalHeight() {
-      return this.margin.top + this.contentHeight + this.margin.bottom;
-    },
-    actGroups() {
-      const groups = [];
-      let currentAct = null;
-      let startIndex = 0;
-
-      this.scenes.forEach((scene, index) => {
-        const act = this.ACT_BY_ID(scene.act);
-        if (!act) return;
-
-        if (currentAct !== act.id) {
-          if (currentAct !== null) {
-            groups.push({
-              actId: currentAct,
-              actName: this.ACT_BY_ID(currentAct)?.name || 'Unknown',
-              startX: this.getSceneX(startIndex),
-              width: this.getSceneX(index) - this.getSceneX(startIndex),
-            });
-          }
-          currentAct = act.id;
-          startIndex = index;
-        }
-      });
-
-      // Push final group
-      if (currentAct !== null) {
-        groups.push({
-          actId: currentAct,
-          actName: this.ACT_BY_ID(currentAct)?.name || 'Unknown',
-          startX: this.getSceneX(startIndex),
-          width: this.getSceneX(this.scenes.length) - this.getSceneX(startIndex),
-        });
-      }
-
-      return groups;
-    },
-  },
-
-  methods: {
-    getSceneX(sceneIndex) {
-      return sceneIndex * this.sceneWidth;
-    },
-    getRowY(rowIndex) {
-      return rowIndex * this.rowHeight;
-    },
-    getColorForEntity(entityId, entityType) {
-      // Golden ratio angle provides optimal distribution across hue spectrum
-      const GOLDEN_RATIO_CONJUGATE = 137.508;
-
-      // Different offsets for different entity types to avoid collisions
-      const typeOffsets = {
-        mic: 0,
-        character: 120,
-        cast: 240,
-        prop: 60,
-        scenery: 180,
-      };
-
-      const offset = typeOffsets[entityType] || 0;
-      const hue = (entityId * GOLDEN_RATIO_CONJUGATE + offset) % 360;
-
-      // Use high saturation and medium lightness for vibrant, visible colors
-      return `hsl(${hue}, 70%, 50%)`;
-    },
-    groupConsecutiveScenes(allocations, sceneIdField = 'scene_id') {
-      if (!allocations || allocations.length === 0) {
-        return [];
-      }
-
-      const segments = [];
-      let currentSegment = null;
-
-      this.scenes.forEach((scene, sceneIndex) => {
-        const hasAllocation = allocations.some((a) => a[sceneIdField] === scene.id);
-
-        if (hasAllocation) {
-          const sameAct = currentSegment
-            ? scene.act === this.scenes[currentSegment.startIndex].act
-            : true;
-
-          if (currentSegment && sameAct) {
-            // Extend current segment within same act
-            currentSegment.endIndex = sceneIndex;
-            currentSegment.endScene = scene.name;
-          } else {
-            // Close previous segment if act boundary crossed
-            if (currentSegment) {
-              segments.push(currentSegment);
-            }
-            // Start new segment
-            currentSegment = {
-              startIndex: sceneIndex,
-              endIndex: sceneIndex,
-              startScene: scene.name,
-              endScene: scene.name,
-            };
-          }
-        } else if (currentSegment) {
-          // End current segment
-          segments.push(currentSegment);
-          currentSegment = null;
-        }
-      });
-
-      // Push final segment
-      if (currentSegment) {
-        segments.push(currentSegment);
-      }
-
-      return segments;
-    },
-    exportTimeline(filenamePrefix = 'timeline', viewModeName = '') {
-      const svgElement = this.$refs.svg;
-      if (!svgElement) return;
-
-      // Create a clone of the SVG to avoid modifying the original
-      const svgClone = svgElement.cloneNode(true);
-
-      // Inline critical styles for export (for print-friendly output)
-      this.applyExportStyles(svgClone);
-
-      // Serialize the SVG to a string
-      const serializer = new XMLSerializer();
-      const svgString = serializer.serializeToString(svgClone);
-
-      // Create a blob and download link
-      const canvas = document.createElement('canvas');
-      const ctx = canvas.getContext('2d');
-      const img = new Image();
-
-      // Set canvas size to SVG size
-      canvas.width = this.totalWidth;
-      canvas.height = this.totalHeight;
-
-      img.onload = () => {
-        // Draw white background for print-friendly output
-        ctx.fillStyle = '#ffffff';
-        ctx.fillRect(0, 0, canvas.width, canvas.height);
-
-        // Draw the SVG image
-        ctx.drawImage(img, 0, 0);
-
-        // Convert canvas to blob and download
-        canvas.toBlob((blob) => {
-          const url = URL.createObjectURL(blob);
-          const link = document.createElement('a');
-          const dateSuffix = new Date().toISOString().slice(0, 10);
-          const modeSuffix = viewModeName ? `-${viewModeName}` : '';
-          link.download = `${filenamePrefix}${modeSuffix}-${dateSuffix}.png`;
-          link.href = url;
-          link.click();
-          URL.revokeObjectURL(url);
-        });
-      };
-
-      // Create a data URL from the SVG string
-      const svgBlob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });
-      const svgUrl = URL.createObjectURL(svgBlob);
-      img.src = svgUrl;
-    },
-    applyExportStyles(svgClone) {
-      // Define export styles for print-friendly output
-      const exportStyles = {
-        '.scene-divider': { stroke: '#495057', 'stroke-width': '1', opacity: '0.4' },
-        '.row-separator': { stroke: '#495057', 'stroke-width': '1', opacity: '0.3' },
-        '.act-header': { fill: '#e9ecef', stroke: '#495057', 'stroke-width': '1' },
-        '.act-label': { fill: '#212529', 'font-size': '14', 'font-weight': '600' },
-        '.scene-label': { fill: '#495057', 'font-size': '11' },
-        '.row-label': { fill: '#212529', 'font-size': '12', 'font-weight': '500' },
-        '.allocation-bar': { stroke: '#212529', 'stroke-width': '1' },
-        '.bar-label': {
-          fill: '#ffffff',
-          'font-weight': '600',
-          style: 'text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8)',
-        },
-      };
-
-      Object.entries(exportStyles).forEach(([selector, attrs]) => {
-        svgClone.querySelectorAll(selector).forEach((el) => {
-          Object.entries(attrs).forEach(([attr, value]) => {
-            el.setAttribute(attr, value);
-          });
-        });
-      });
-    },
-  },
-};
diff --git a/client/src/mixins/timelineMixin.ts b/client/src/mixins/timelineMixin.ts
new file mode 100644
index 00000000..b9e80a74
--- /dev/null
+++ b/client/src/mixins/timelineMixin.ts
@@ -0,0 +1,204 @@
+import { defineComponent } from 'vue';
+import { mapGetters } from 'vuex';
+import type { Scene } from '@/types/api/show';
+
+interface ActGroup {
+  actId: number;
+  actName: string;
+  startX: number;
+  width: number;
+}
+
+interface TimelineSegment {
+  startIndex: number;
+  endIndex: number;
+  startScene: string;
+  endScene: string;
+}
+
+type EntityType = 'mic' | 'character' | 'cast' | 'prop' | 'scenery';
+
+export default defineComponent({
+  data() {
+    return {
+      margin: { top: 75, right: 20, bottom: 20, left: 150 },
+      sceneWidth: 100,
+      rowHeight: 50,
+      barPadding: 6,
+    };
+  },
+
+  computed: {
+    ...mapGetters(['ACT_BY_ID']),
+    contentWidth(): number {
+      return (this as any).scenes.length * this.sceneWidth;
+    },
+    contentHeight(): number {
+      return (this as any).rows.length * this.rowHeight;
+    },
+    totalWidth(): number {
+      return this.margin.left + (this as any).contentWidth + this.margin.right;
+    },
+    totalHeight(): number {
+      return this.margin.top + (this as any).contentHeight + this.margin.bottom;
+    },
+    actGroups(): ActGroup[] {
+      const groups: ActGroup[] = [];
+      let currentActId: number | null = null;
+      let startIndex = 0;
+
+      (this as any).scenes.forEach((scene: Scene, index: number) => {
+        const act = (this as any).ACT_BY_ID(scene.act);
+        if (!act) return;
+
+        if (currentActId !== act.id) {
+          if (currentActId !== null) {
+            groups.push({
+              actId: currentActId,
+              actName: (this as any).ACT_BY_ID(currentActId)?.name || 'Unknown',
+              startX: this.getSceneX(startIndex),
+              width: this.getSceneX(index) - this.getSceneX(startIndex),
+            });
+          }
+          currentActId = act.id;
+          startIndex = index;
+        }
+      });
+
+      if (currentActId !== null) {
+        const scenes: Scene[] = (this as any).scenes;
+        groups.push({
+          actId: currentActId,
+          actName: (this as any).ACT_BY_ID(currentActId)?.name || 'Unknown',
+          startX: this.getSceneX(startIndex),
+          width: this.getSceneX(scenes.length) - this.getSceneX(startIndex),
+        });
+      }
+
+      return groups;
+    },
+  },
+
+  methods: {
+    getSceneX(sceneIndex: number): number {
+      return sceneIndex * this.sceneWidth;
+    },
+    getRowY(rowIndex: number): number {
+      return rowIndex * this.rowHeight;
+    },
+    getColorForEntity(entityId: number, entityType: EntityType | string): string {
+      const GOLDEN_RATIO_CONJUGATE = 137.508;
+      const typeOffsets: Record<string, number> = {
+        mic: 0,
+        character: 120,
+        cast: 240,
+        prop: 60,
+        scenery: 180,
+      };
+      const offset = typeOffsets[entityType] ?? 0;
+      const hue = (entityId * GOLDEN_RATIO_CONJUGATE + offset) % 360;
+      return `hsl(${hue}, 70%, 50%)`;
+    },
+    groupConsecutiveScenes(
+      allocations: Array<Record<string, unknown>>,
+      sceneIdField = 'scene_id'
+    ): TimelineSegment[] {
+      if (!allocations || allocations.length === 0) return [];
+
+      const segments: TimelineSegment[] = [];
+      let currentSegment: TimelineSegment | null = null;
+      const scenes: Scene[] = (this as any).scenes;
+
+      scenes.forEach((scene, sceneIndex) => {
+        const hasAllocation = allocations.some((a) => a[sceneIdField] === scene.id);
+
+        if (hasAllocation) {
+          const sameAct = currentSegment
+            ? scene.act === scenes[currentSegment.startIndex].act
+            : true;
+
+          if (currentSegment && sameAct) {
+            currentSegment.endIndex = sceneIndex;
+            currentSegment.endScene = scene.name ?? '';
+          } else {
+            if (currentSegment) segments.push(currentSegment);
+            currentSegment = {
+              startIndex: sceneIndex,
+              endIndex: sceneIndex,
+              startScene: scene.name ?? '',
+              endScene: scene.name ?? '',
+            };
+          }
+        } else if (currentSegment) {
+          segments.push(currentSegment);
+          currentSegment = null;
+        }
+      });
+
+      if (currentSegment) segments.push(currentSegment);
+      return segments;
+    },
+    exportTimeline(filenamePrefix = 'timeline', viewModeName = ''): void {
+      const svgElement = this.$refs.svg as SVGSVGElement | undefined;
+      if (!svgElement) return;
+
+      const svgClone = svgElement.cloneNode(true) as SVGSVGElement;
+      this.applyExportStyles(svgClone);
+
+      const serializer = new XMLSerializer();
+      const svgString = serializer.serializeToString(svgClone);
+
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d')!;
+      const img = new Image();
+
+      canvas.width = (this as any).totalWidth;
+      canvas.height = (this as any).totalHeight;
+
+      img.onload = () => {
+        ctx.fillStyle = '#ffffff';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        ctx.drawImage(img, 0, 0);
+
+        canvas.toBlob((blob) => {
+          if (!blob) return;
+          const url = URL.createObjectURL(blob);
+          const link = document.createElement('a');
+          const dateSuffix = new Date().toISOString().slice(0, 10);
+          const modeSuffix = viewModeName ? `-${viewModeName}` : '';
+          link.download = `${filenamePrefix}${modeSuffix}-${dateSuffix}.png`;
+          link.href = url;
+          link.click();
+          URL.revokeObjectURL(url);
+        });
+      };
+
+      const svgBlob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });
+      img.src = URL.createObjectURL(svgBlob);
+    },
+    applyExportStyles(svgClone: SVGSVGElement): void {
+      const exportStyles: Record<string, Record<string, string>> = {
+        '.scene-divider': { stroke: '#495057', 'stroke-width': '1', opacity: '0.4' },
+        '.row-separator': { stroke: '#495057', 'stroke-width': '1', opacity: '0.3' },
+        '.act-header': { fill: '#e9ecef', stroke: '#495057', 'stroke-width': '1' },
+        '.act-label': { fill: '#212529', 'font-size': '14', 'font-weight': '600' },
+        '.scene-label': { fill: '#495057', 'font-size': '11' },
+        '.row-label': { fill: '#212529', 'font-size': '12', 'font-weight': '500' },
+        '.allocation-bar': { stroke: '#212529', 'stroke-width': '1' },
+        '.bar-label': {
+          fill: '#ffffff',
+          'font-weight': '600',
+          style: 'text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8)',
+        },
+      };
+
+      Object.entries(exportStyles).forEach(([selector, attrs]) => {
+        svgClone.querySelectorAll(selector).forEach((el) => {
+          Object.entries(attrs).forEach(([attr, value]) => {
+            el.setAttribute(attr, value);
+          });
+        });
+      });
+    },
+  },
+});
diff --git a/client/src/router/index.js b/client/src/router/index.ts
similarity index 62%
rename from client/src/router/index.js
rename to client/src/router/index.ts
index 6f2db926..3a32210c 100644
--- a/client/src/router/index.js
+++ b/client/src/router/index.ts
@@ -1,10 +1,20 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
+import type { RouteConfig } from 'vue-router';
 import { isElectron } from '@/js/platform';
 
 Vue.use(VueRouter);
 
-const routes = [
+const VueToast = Vue as typeof Vue & {
+  $toast: {
+    success: (m: string) => void;
+    error: (m: string) => void;
+    info: (m: string) => void;
+    warning: (m: string) => void;
+  };
+};
+
+const routes: RouteConfig[] = [
   {
     path: '/electron/server-selector',
     name: 'electron-server-selector',
@@ -146,66 +156,59 @@ const routes = [
 ];
 
 const router = new VueRouter({
-  // Use hash mode for Electron (file:// protocol), history mode for web
   mode: window.location.protocol === 'file:' ? 'hash' : 'history',
   base: import.meta.env.BASE_URL,
   routes,
 });
 
 router.beforeEach(async (to, from, next) => {
-  // Silly code needed for... reasons... this seems to correctly set the correct state
-  // on the router and do the fetch needed for anything else. Shrug...
+  // router.app is typed as Vue but lacks $store/$toast augmentations at the router level
+  const app = router.app as any;
+
   let requiresSettingsFetch = false;
-  if (router.app.$store === undefined) {
-    await router.app.$nextTick();
+  if (app.$store === undefined) {
+    await app.$nextTick();
     requiresSettingsFetch = true;
   } else {
-    // Also fetch if RBAC roles haven't been loaded yet (e.g., fresh page load)
-    const rbacRoles = router.app.$store.getters.RBAC_ROLES;
+    const rbacRoles = app.$store.getters.RBAC_ROLES;
     if (!rbacRoles || rbacRoles.length === 0) {
       requiresSettingsFetch = true;
     }
   }
 
-  // Electron: Check if we need to redirect to server selector
-  // Do this BEFORE fetching settings since we need a server connection first
   if (isElectron() && to.path !== '/electron/server-selector') {
     try {
-      const activeConnection = await window.electronAPI.getActiveConnection();
+      const activeConnection = await window.electronAPI?.getActiveConnection?.();
       if (!activeConnection) {
-        // No active connection, redirect to server selector
-        if (router.app.$toast) {
-          router.app.$toast.warning('Please select a server to connect to');
+        if (app.$toast) {
+          app.$toast.warning('Please select a server to connect to');
         }
         return next('/electron/server-selector');
       }
     } catch (error) {
-      // Error checking connection, redirect to selector
       console.error('Error checking active connection:', error);
       return next('/electron/server-selector');
     }
   }
 
-  // Prevent non-Electron users from accessing Electron-only routes
   const isElectronOnly = to.matched.some((record) => record.meta.isElectronOnly);
   if (isElectronOnly && !isElectron()) {
-    if (router.app.$toast) {
-      router.app.$toast.error('This page is only available in the desktop app');
+    if (app.$toast) {
+      app.$toast.error('This page is only available in the desktop app');
     }
     return next('/');
   }
 
-  // Skip all settings fetch and auth checks for Electron server selector (no connection yet)
   if (to.path === '/electron/server-selector') {
     return next();
   }
 
   if (requiresSettingsFetch) {
-    await router.app.$store.dispatch('GET_RBAC_ROLES');
-    await router.app.$store.dispatch('GET_SETTINGS');
-    await router.app.$store.dispatch('GET_CURRENT_USER');
-    if (router.app.$store.getters.CURRENT_USER) {
-      await router.app.$store.dispatch('GET_CURRENT_RBAC');
+    await app.$store.dispatch('GET_RBAC_ROLES');
+    await app.$store.dispatch('GET_SETTINGS');
+    await app.$store.dispatch('GET_CURRENT_USER');
+    if (app.$store.getters.CURRENT_USER) {
+      await app.$store.dispatch('GET_CURRENT_RBAC');
     }
   }
 
@@ -213,29 +216,24 @@ router.beforeEach(async (to, from, next) => {
   const requiresAdmin = to.matched.some((record) => record.meta.requiresAdmin);
   const requiresShowAccess = to.matched.some((record) => record.meta.requiresShowAccess);
 
-  // Check if the system has admin user set up
-  if (router.app.$store.getters.SETTINGS && !router.app.$store.getters.SETTINGS.has_admin_user) {
+  if (app.$store.getters.SETTINGS && !app.$store.getters.SETTINGS.has_admin_user) {
     if (to.path !== '/') {
-      Vue.$toast.error('Please create an admin user before continuing');
+      VueToast.$toast.error('Please create an admin user before continuing');
       return next('/');
     }
     return next();
   }
 
-  const currentUser = router.app.$store.getters.CURRENT_USER;
+  const currentUser = app.$store.getters.CURRENT_USER;
   const isAuthenticated = currentUser !== null;
   const isAdmin = currentUser?.is_admin === true;
 
-  // Helper function to check show access
-  const hasShowAccess = () => {
-    if (!router.app.$store.getters.CURRENT_SHOW) return false;
-
-    // Admin always has access
+  const hasShowAccess = (): boolean => {
+    if (!app.$store.getters.CURRENT_SHOW) return false;
     if (isAdmin) return true;
 
-    // Check RBAC permissions for show edit/execute
-    const rbacRoles = router.app.$store.getters.RBAC_ROLES;
-    const userRbac = router.app.$store.getters.CURRENT_USER_RBAC;
+    const rbacRoles = app.$store.getters.RBAC_ROLES;
+    const userRbac = app.$store.getters.CURRENT_USER_RBAC;
 
     if (
       !rbacRoles.length ||
@@ -247,88 +245,68 @@ router.beforeEach(async (to, from, next) => {
       return false;
     }
 
-    const writeMask = rbacRoles.find((x) => x.key === 'WRITE')?.value || 0;
-    const readMask = rbacRoles.find((x) => x.key === 'READ')?.value || 0;
-    const executeMask = rbacRoles.find((x) => x.key === 'EXECUTE')?.value || 0;
+    const writeMask: number = rbacRoles.find((x: { key: string }) => x.key === 'WRITE')?.value ?? 0;
+    const readMask: number = rbacRoles.find((x: { key: string }) => x.key === 'READ')?.value ?? 0;
+    const executeMask: number =
+      rbacRoles.find((x: { key: string }) => x.key === 'EXECUTE')?.value ?? 0;
 
-    // Bitwise check if user has READ, WRITE or EXECUTE permission for shows
     const showAllowed =
-      userRbac.shows &&
-      userRbac.shows[0] &&
-      (userRbac.shows[0][1] & (writeMask | executeMask | readMask)) !== 0;
-
-    // Bitwise check if user has READ or WRITE permission for script
+      userRbac.shows?.[0] && (userRbac.shows[0][1] & (writeMask | executeMask | readMask)) !== 0;
     const scriptAllowed =
-      userRbac.script &&
-      userRbac.script[0] &&
-      (userRbac.script[0][1] & (writeMask | readMask)) !== 0;
-
-    // Bitwise check if user has READ or WRITE permission for any cue types
+      userRbac.script?.[0] && (userRbac.script[0][1] & (writeMask | readMask)) !== 0;
     const cueTypesAllowed =
       userRbac.cuetypes &&
-      userRbac.cuetypes.filter((x) => (x[1] & (writeMask | readMask)) !== 0).length > 0;
+      userRbac.cuetypes.filter((x: [number, number]) => (x[1] & (writeMask | readMask)) !== 0)
+        .length > 0;
 
-    return showAllowed || scriptAllowed || cueTypesAllowed;
+    return !!(showAllowed || scriptAllowed || cueTypesAllowed);
   };
 
-  // Check if we are navigating to the login page while already authenticated
-  // If so, redirect to where the user just was
   if (to.path === '/login' && isAuthenticated) {
-    Vue.$toast.info('You are already logged in');
+    VueToast.$toast.info('You are already logged in');
     return next(from.fullPath);
   }
 
-  // Check authentication requirements
   if (requiresAuth && !isAuthenticated) {
-    Vue.$toast.error('Please log in to access this page');
+    VueToast.$toast.error('Please log in to access this page');
     return next('/login');
   }
 
-  // Check if user requires password change
   const requiresPasswordChange = currentUser?.requires_password_change === true;
   const isPasswordChangePage = to.path === '/force-password-change';
 
   if (isAuthenticated && requiresPasswordChange && !isPasswordChangePage) {
-    // User needs to change password, redirect to force password change page
-    Vue.$toast.warning('You must change your password before continuing');
+    VueToast.$toast.warning('You must change your password before continuing');
     return next('/force-password-change');
   }
 
   if (isPasswordChangePage && !requiresPasswordChange) {
-    // User is trying to access password change page but doesn't need to
-    // Redirect to home page
     return next('/');
   }
 
-  // Check admin requirements
   if (requiresAdmin && !isAdmin) {
-    Vue.$toast.error('Admin access required');
+    VueToast.$toast.error('Admin access required');
     return next('/');
   }
 
-  // Check show access requirements
   if (requiresShowAccess) {
-    // First check if there's a current show
-    if (!router.app.$store.getters.CURRENT_SHOW) {
-      Vue.$toast.error('No show is currently selected');
+    if (!app.$store.getters.CURRENT_SHOW) {
+      VueToast.$toast.error('No show is currently selected');
       return next('/');
     }
-
-    // Then check permissions
     if (!hasShowAccess()) {
-      Vue.$toast.error('You do not have permission to access show configuration');
+      VueToast.$toast.error('You do not have permission to access show configuration');
       return next('/');
     }
   }
 
-  // Handle special case for live route
   if (to.path === '/live') {
-    await router.app.$store.dispatch('GET_SHOW_SESSION_DATA');
-    const showSession = router.app.$store.getters.CURRENT_SHOW_SESSION;
-    const websocketHealthy = router.app.$store.getters.WEBSOCKET_HEALTHY;
+    await app.$store.dispatch('GET_SHOW_SESSION_DATA');
+    const showSession = app.$store.getters.CURRENT_SHOW_SESSION;
+    const websocketHealthy = app.$store.getters.WEBSOCKET_HEALTHY;
 
     if (!showSession || !websocketHealthy) {
-      Vue.$toast.error('No active show session or connection issue');
+      VueToast.$toast.error('No active show session or connection issue');
       return next('/');
     }
   }
diff --git a/client/src/store/modules/help.js b/client/src/store/modules/help.ts
similarity index 66%
rename from client/src/store/modules/help.js
rename to client/src/store/modules/help.ts
index 98941055..1cab6fec 100644
--- a/client/src/store/modules/help.js
+++ b/client/src/store/modules/help.ts
@@ -1,36 +1,55 @@
 import log from 'loglevel';
 import Fuse from 'fuse.js';
+import type { Module } from 'vuex';
+import type { RootState } from '@/types/store';
 
-export default {
+interface HelpManifestEntry {
+  title: string;
+  slug: string;
+  path: string;
+  category: string;
+}
+
+interface HelpState {
+  manifest: HelpManifestEntry[];
+  documents: Record<string, string>;
+  currentDocument: string | null;
+  loading: boolean;
+  error: string | null;
+  searchIndex: Fuse<HelpManifestEntry> | null;
+  searchResults: HelpManifestEntry[];
+}
+
+const module: Module<HelpState, RootState> = {
   state: {
-    manifest: [], // Array of { title, slug, path, category }
-    documents: {}, // Cache: { slug: markdownContent }
-    currentDocument: null, // Currently viewed doc slug
+    manifest: [],
+    documents: {},
+    currentDocument: null,
     loading: false,
     error: null,
-    searchIndex: null, // Fuse.js instance
+    searchIndex: null,
     searchResults: [],
   },
   mutations: {
-    SET_MANIFEST(state, manifest) {
+    SET_MANIFEST(state: HelpState, manifest: HelpManifestEntry[]) {
       state.manifest = manifest;
     },
-    SET_DOCUMENT(state, { slug, content }) {
+    SET_DOCUMENT(state: HelpState, { slug, content }: { slug: string; content: string }) {
       state.documents[slug] = content;
     },
-    SET_LOADING(state, loading) {
+    SET_LOADING(state: HelpState, loading: boolean) {
       state.loading = loading;
     },
-    SET_ERROR(state, error) {
+    SET_ERROR(state: HelpState, error: string | null) {
       state.error = error;
     },
-    SET_CURRENT_DOCUMENT(state, slug) {
+    SET_CURRENT_DOCUMENT(state: HelpState, slug: string) {
       state.currentDocument = slug;
     },
-    SET_SEARCH_INDEX(state, fuseInstance) {
+    SET_SEARCH_INDEX(state: HelpState, fuseInstance: Fuse<HelpManifestEntry>) {
       state.searchIndex = fuseInstance;
     },
-    SET_SEARCH_RESULTS(state, results) {
+    SET_SEARCH_RESULTS(state: HelpState, results: HelpManifestEntry[]) {
       state.searchResults = results;
     },
   },
@@ -45,7 +64,6 @@ export default {
         const manifest = await response.json();
         context.commit('SET_MANIFEST', manifest);
 
-        // Initialize Fuse.js search
         const fuse = new Fuse(manifest, {
           keys: ['title', 'path'],
           threshold: 0.3,
@@ -60,8 +78,7 @@ export default {
       }
     },
 
-    async LOAD_DOCUMENT(context, slug) {
-      // Check cache first
+    async LOAD_DOCUMENT(context, slug: string) {
       if (context.state.documents[slug]) {
         context.commit('SET_CURRENT_DOCUMENT', slug);
         context.commit('SET_ERROR', null);
@@ -95,7 +112,7 @@ export default {
       }
     },
 
-    SEARCH_DOCUMENTS(context, query) {
+    SEARCH_DOCUMENTS(context, query: string) {
       if (!context.state.searchIndex) {
         log.warn('Search index not initialized');
         return;
@@ -118,11 +135,13 @@ export default {
     },
   },
   getters: {
-    DOCUMENTATION_MANIFEST: (state) => state.manifest,
-    CURRENT_DOCUMENT_CONTENT: (state) =>
+    DOCUMENTATION_MANIFEST: (state: HelpState) => state.manifest,
+    CURRENT_DOCUMENT_CONTENT: (state: HelpState) =>
       state.currentDocument ? state.documents[state.currentDocument] : null,
-    IS_LOADING: (state) => state.loading,
-    ERROR: (state) => state.error,
-    SEARCH_RESULTS: (state) => state.searchResults,
+    IS_LOADING: (state: HelpState) => state.loading,
+    ERROR: (state: HelpState) => state.error,
+    SEARCH_RESULTS: (state: HelpState) => state.searchResults,
   },
 };
+
+export default module;
diff --git a/client/src/store/modules/script.js b/client/src/store/modules/script.ts
similarity index 58%
rename from client/src/store/modules/script.js
rename to client/src/store/modules/script.ts
index 3ac468a5..cb7e453d 100644
--- a/client/src/store/modules/script.js
+++ b/client/src/store/modules/script.ts
@@ -1,9 +1,33 @@
 import Vue from 'vue';
 import log from 'loglevel';
+import type { Module } from 'vuex';
 
 import { makeURL } from '@/js/utils';
+import type { RootState } from '@/types/store';
+import type {
+  ScriptLine,
+  ScriptRevision,
+  StageDirectionStyle,
+  ScriptCut,
+  CompiledScript,
+} from '@/types/api/script';
+import type { Cue } from '@/types/api/cues';
 
-export default {
+interface ScriptState {
+  currentRevision: number | null;
+  revisions: ScriptRevision[];
+  script: Record<string, ScriptLine[]>;
+  cues: Record<string, Cue[]>;
+  cuts: ScriptCut[];
+  stageDirectionStyles: StageDirectionStyle[];
+  compiledScripts: CompiledScript[];
+}
+
+const VueToast = Vue as typeof Vue & {
+  $toast: { success: (m: string) => void; error: (m: string) => void };
+};
+
+const module: Module<ScriptState, RootState> = {
   state: {
     currentRevision: null,
     revisions: [],
@@ -14,25 +38,28 @@ export default {
     compiledScripts: [],
   },
   mutations: {
-    SET_REVISIONS(state, revisions) {
+    SET_REVISIONS(state: ScriptState, revisions: ScriptRevision[]) {
       state.revisions = revisions;
     },
-    SET_CURRENT_REVISION(state, currentRevision) {
+    SET_CURRENT_REVISION(state: ScriptState, currentRevision: number | null) {
       state.currentRevision = currentRevision;
     },
-    SET_SCRIPT_PAGE(state, { pageNumber, page }) {
+    SET_SCRIPT_PAGE(
+      state: ScriptState,
+      { pageNumber, page }: { pageNumber: string; page: ScriptLine[] }
+    ) {
       Vue.set(state.script, pageNumber, page);
     },
-    SET_CUES(state, cues) {
+    SET_CUES(state: ScriptState, cues: Record<string, Cue[]>) {
       state.cues = cues;
     },
-    SET_CUTS(state, cuts) {
+    SET_CUTS(state: ScriptState, cuts: ScriptCut[]) {
       state.cuts = cuts;
     },
-    SET_STAGE_DIRECTION_STYLES(state, styles) {
+    SET_STAGE_DIRECTION_STYLES(state: ScriptState, styles: StageDirectionStyle[]) {
       state.stageDirectionStyles = styles;
     },
-    SET_COMPILED_SCRIPTS(state, compiledScripts) {
+    SET_COMPILED_SCRIPTS(state: ScriptState, compiledScripts: CompiledScript[]) {
       state.compiledScripts = compiledScripts;
     },
   },
@@ -47,70 +74,65 @@ export default {
         log.error('Unable to get script revisions');
       }
     },
-    async ADD_SCRIPT_REVISION(context, scriptRevision) {
-      const payload = {
+    async ADD_SCRIPT_REVISION(
+      context,
+      scriptRevision: {
+        description: string;
+        parent_revision_id?: number | null;
+        set_as_current?: boolean | null;
+      }
+    ) {
+      const payload: Record<string, unknown> = {
         description: scriptRevision.description,
       };
 
-      // Add optional parent_revision_id if provided
       if (scriptRevision.parent_revision_id != null) {
         payload.parent_revision_id = scriptRevision.parent_revision_id;
       }
 
-      // Add optional set_as_current if provided (defaults to true on backend)
       if (scriptRevision.set_as_current != null) {
         payload.set_as_current = scriptRevision.set_as_current;
       }
 
       const response = await fetch(`${makeURL('/api/v1/show/script/revisions')}`, {
         method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(payload),
       });
       if (response.ok) {
         context.dispatch('GET_SCRIPT_REVISIONS');
-        Vue.$toast.success('Added new script revision!');
+        VueToast.$toast.success('Added new script revision!');
       } else {
         log.error('Unable to add new script revision');
-        Vue.$toast.error('Unable to add new script revision');
+        VueToast.$toast.error('Unable to add new script revision');
       }
     },
-    async DELETE_SCRIPT_REVISION(context, revisionID) {
-      const searchParams = new URLSearchParams({
-        rev_id: revisionID,
-      });
+    async DELETE_SCRIPT_REVISION(context, revisionID: number) {
+      const searchParams = new URLSearchParams({ rev_id: String(revisionID) });
       const response = await fetch(`${makeURL('/api/v1/show/script/revisions')}?${searchParams}`, {
         method: 'DELETE',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
       });
       if (response.ok) {
         context.dispatch('GET_SCRIPT_REVISIONS');
-        Vue.$toast.success('Deleted script revision!');
+        VueToast.$toast.success('Deleted script revision!');
       } else {
         log.error('Unable to delete script revision');
-        Vue.$toast.error('Unable to delete script revision');
+        VueToast.$toast.error('Unable to delete script revision');
       }
     },
-    async LOAD_SCRIPT_REVISION(context, revisionID) {
+    async LOAD_SCRIPT_REVISION(context, revisionID: number) {
       const response = await fetch(`${makeURL('/api/v1/show/script/revisions/current')}`, {
         method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          new_rev_id: revisionID,
-        }),
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ new_rev_id: revisionID }),
       });
       if (response.ok) {
         context.dispatch('GET_SCRIPT_REVISIONS');
-        Vue.$toast.success('Loaded script revision!');
+        VueToast.$toast.success('Loaded script revision!');
       } else {
         log.error('Unable to load script revision');
-        Vue.$toast.error('Unable to load script revision');
+        VueToast.$toast.error('Unable to load script revision');
       }
     },
     async SCRIPT_REVISION_CHANGED(context) {
@@ -123,22 +145,15 @@ export default {
       await context.dispatch('LOAD_CUES');
       await context.dispatch('GET_CUTS');
     },
-    async LOAD_SCRIPT_PAGE(context, page) {
-      const searchParams = new URLSearchParams({
-        page,
-      });
+    async LOAD_SCRIPT_PAGE(context, page: string | number) {
+      const searchParams = new URLSearchParams({ page: String(page) });
       const response = await fetch(`${makeURL('/api/v1/show/script')}?${searchParams}`, {
         method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
       });
       if (response.ok) {
         const respJson = await response.json();
-        context.commit('SET_SCRIPT_PAGE', {
-          pageNumber: respJson.page,
-          page: respJson.lines,
-        });
+        context.commit('SET_SCRIPT_PAGE', { pageNumber: respJson.page, page: respJson.lines });
       } else {
         log.error('Unable to load script page');
       }
@@ -146,9 +161,7 @@ export default {
     async LOAD_CUES(context) {
       const response = await fetch(`${makeURL('/api/v1/show/cues')}`, {
         method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
       });
       if (response.ok) {
         const respJson = await response.json();
@@ -157,72 +170,66 @@ export default {
         log.error('Unable to load cues');
       }
     },
-    async ADD_NEW_CUE(context, cue) {
+    async ADD_NEW_CUE(context, cue: Partial<Cue>) {
       const response = await fetch(`${makeURL('/api/v1/show/cues')}`, {
         method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(cue),
       });
       if (response.ok) {
         context.dispatch('LOAD_CUES');
-        Vue.$toast.success('Added new cue!');
+        VueToast.$toast.success('Added new cue!');
       } else {
         log.error('Unable to add new cue');
-        Vue.$toast.error('Unable to add new cue');
+        VueToast.$toast.error('Unable to add new cue');
       }
     },
-    async EDIT_CUE(context, cue) {
+    async EDIT_CUE(context, cue: Partial<Cue>) {
       const response = await fetch(`${makeURL('/api/v1/show/cues')}`, {
         method: 'PATCH',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(cue),
       });
       if (response.ok) {
         context.dispatch('LOAD_CUES');
-        Vue.$toast.success('Edited cue!');
+        VueToast.$toast.success('Edited cue!');
       } else {
         log.error('Unable to edit cue');
-        Vue.$toast.error('Unable to edit cue');
+        VueToast.$toast.error('Unable to edit cue');
       }
     },
-    async DELETE_CUE(context, cue) {
+    async DELETE_CUE(context, cue: { cueId: number; lineId: number }) {
       const searchParams = new URLSearchParams({
-        cueId: cue.cueId,
-        lineId: cue.lineId,
+        cueId: String(cue.cueId),
+        lineId: String(cue.lineId),
       });
       const response = await fetch(`${makeURL('/api/v1/show/cues')}?${searchParams}`, {
         method: 'DELETE',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
       });
       if (response.ok) {
         context.dispatch('LOAD_CUES');
-        Vue.$toast.success('Deleted cue!');
+        VueToast.$toast.success('Deleted cue!');
       } else {
         log.error('Unable to delete cue');
-        Vue.$toast.error('Unable to delete cue');
+        VueToast.$toast.error('Unable to delete cue');
       }
     },
-    async SEARCH_CUES(context, { identifier, cueTypeId }) {
+    async SEARCH_CUES(
+      _context,
+      { identifier, cueTypeId }: { identifier: string; cueTypeId: number }
+    ) {
       const params = new URLSearchParams();
       params.append('identifier', identifier);
-      params.append('cue_type_id', cueTypeId);
+      params.append('cue_type_id', String(cueTypeId));
 
       const response = await fetch(`${makeURL('/api/v1/show/cues/search')}?${params}`, {
         method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
       });
 
       if (response.ok) {
-        const result = await response.json();
-        return result;
+        return response.json();
       }
       log.error('Unable to search for cue');
       throw new Error('Cue search failed');
@@ -230,9 +237,7 @@ export default {
     async GET_CUTS(context) {
       const response = await fetch(`${makeURL('/api/v1/show/script/cuts')}`, {
         method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
       });
       if (response.ok) {
         const respJson = await response.json();
@@ -241,30 +246,24 @@ export default {
         log.error('Unable to load script cuts');
       }
     },
-    async SAVE_SCRIPT_CUTS(context, cuts) {
+    async SAVE_SCRIPT_CUTS(context, cuts: ScriptCut[]) {
       const response = await fetch(`${makeURL('/api/v1/show/script/cuts')}`, {
         method: 'PUT',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          cuts,
-        }),
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ cuts }),
       });
       if (response.ok) {
         await context.dispatch('GET_CUTS');
-        Vue.$toast.success('Saved script cuts!');
+        VueToast.$toast.success('Saved script cuts!');
       } else {
         log.error('Unable to save script cuts');
-        Vue.$toast.error('Unable to save script cuts');
+        VueToast.$toast.error('Unable to save script cuts');
       }
     },
     async GET_STAGE_DIRECTION_STYLES(context) {
       const response = await fetch(`${makeURL('/api/v1/show/script/stage_direction_styles')}`, {
         method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
       });
       if (response.ok) {
         const respJson = await response.json();
@@ -273,57 +272,46 @@ export default {
         log.error('Unable to load stage direction styles');
       }
     },
-    async ADD_STAGE_DIRECTION_STYLE(context, style) {
+    async ADD_STAGE_DIRECTION_STYLE(context, style: Partial<StageDirectionStyle>) {
       const response = await fetch(`${makeURL('/api/v1/show/script/stage_direction_styles')}`, {
         method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(style),
       });
       if (response.ok) {
         context.dispatch('GET_STAGE_DIRECTION_STYLES');
-        Vue.$toast.success('Added new stage direction style!');
+        VueToast.$toast.success('Added new stage direction style!');
       } else {
         log.error('Unable to add new stage direction style');
-        Vue.$toast.error('Unable to add new stage direction style');
+        VueToast.$toast.error('Unable to add new stage direction style');
       }
     },
-    async DELETE_STAGE_DIRECTION_STYLE(context, styleId) {
-      const searchParams = new URLSearchParams({
-        id: styleId,
-      });
+    async DELETE_STAGE_DIRECTION_STYLE(context, styleId: number) {
+      const searchParams = new URLSearchParams({ id: String(styleId) });
       const response = await fetch(
         `${makeURL('/api/v1/show/script/stage_direction_styles')}?${searchParams}`,
-        {
-          method: 'DELETE',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-        }
+        { method: 'DELETE', headers: { 'Content-Type': 'application/json' } }
       );
       if (response.ok) {
         context.dispatch('GET_STAGE_DIRECTION_STYLES');
-        Vue.$toast.success('Deleted stage direction style!');
+        VueToast.$toast.success('Deleted stage direction style!');
       } else {
         log.error('Unable to delete stage direction style');
-        Vue.$toast.error('Unable to delete stage direction style');
+        VueToast.$toast.error('Unable to delete stage direction style');
       }
     },
-    async UPDATE_STAGE_DIRECTION_STYLE(context, style) {
+    async UPDATE_STAGE_DIRECTION_STYLE(context, style: Partial<StageDirectionStyle>) {
       const response = await fetch(`${makeURL('/api/v1/show/script/stage_direction_styles')}`, {
         method: 'PATCH',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(style),
       });
       if (response.ok) {
         context.dispatch('GET_STAGE_DIRECTION_STYLES');
-        Vue.$toast.success('Updated stage direction style!');
+        VueToast.$toast.success('Updated stage direction style!');
       } else {
         log.error('Unable to edit stage direction style');
-        Vue.$toast.error('Unable to edit stage direction style');
+        VueToast.$toast.error('Unable to edit stage direction style');
       }
     },
     async GET_IMPORTABLE_STAGE_DIRECTION_STYLES() {
@@ -340,9 +328,7 @@ export default {
     async GET_COMPILED_SCRIPTS(context) {
       const response = await fetch(`${makeURL('/api/v1/show/script/compiled_scripts')}`, {
         method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
       });
       if (response.ok) {
         const respJson = await response.json();
@@ -353,30 +339,32 @@ export default {
     },
   },
   getters: {
-    SCRIPT_REVISIONS(state) {
+    SCRIPT_REVISIONS(state: ScriptState) {
       return state.revisions;
     },
-    CURRENT_REVISION(state) {
+    CURRENT_REVISION(state: ScriptState) {
       return state.currentRevision;
     },
-    GET_SCRIPT_PAGE: (state) => (page) => {
+    GET_SCRIPT_PAGE: (state: ScriptState) => (page: string | number) => {
       const pageStr = page.toString();
       if (Object.keys(state.script).includes(pageStr)) {
         return state.script[pageStr];
       }
       return [];
     },
-    SCRIPT_CUES(state) {
+    SCRIPT_CUES(state: ScriptState) {
       return state.cues;
     },
-    SCRIPT_CUTS(state) {
+    SCRIPT_CUTS(state: ScriptState) {
       return state.cuts;
     },
-    STAGE_DIRECTION_STYLES(state) {
+    STAGE_DIRECTION_STYLES(state: ScriptState) {
       return state.stageDirectionStyles;
     },
-    COMPILED_SCRIPTS(state) {
+    COMPILED_SCRIPTS(state: ScriptState) {
       return state.compiledScripts;
     },
   },
 };
+
+export default module;
diff --git a/client/src/store/modules/scriptConfig.test.js b/client/src/store/modules/scriptConfig.test.ts
similarity index 96%
rename from client/src/store/modules/scriptConfig.test.js
rename to client/src/store/modules/scriptConfig.test.ts
index 0b0eb6f1..fdb047e6 100644
--- a/client/src/store/modules/scriptConfig.test.js
+++ b/client/src/store/modules/scriptConfig.test.ts
@@ -1,7 +1,8 @@
 import { describe, it, expect } from 'vitest';
+import type { ScriptLine } from '@/types/api/script';
 import { computePageStatus } from './scriptConfig';
 
-function makeLine(id, numParts) {
+function makeLine(id: number | null, numParts: number): ScriptLine {
   return {
     id,
     act_id: 1,
diff --git a/client/src/store/modules/scriptConfig.js b/client/src/store/modules/scriptConfig.ts
similarity index 66%
rename from client/src/store/modules/scriptConfig.js
rename to client/src/store/modules/scriptConfig.ts
index 4bcdf303..3e91409c 100644
--- a/client/src/store/modules/scriptConfig.js
+++ b/client/src/store/modules/scriptConfig.ts
@@ -1,8 +1,24 @@
 import Vue from 'vue';
 import { detailedDiff } from 'deep-object-diff';
 import log from 'loglevel';
+import type { Module } from 'vuex';
 
 import { makeURL } from '@/js/utils';
+import type { RootState } from '@/types/store';
+import type { ScriptLine, PageStatus } from '@/types/api/script';
+
+interface EditStatus {
+  canRequestEdit: boolean;
+  currentEditor: string | null;
+}
+
+interface ScriptConfigState {
+  tmpScript: Record<string, ScriptLine[]>;
+  deletedLines: Record<string, number[]>;
+  editStatus: EditStatus;
+  cutMode: boolean;
+  insertedLines: Record<string, number[]>;
+}
 
 /**
  * Computes the page status object (added/updated/deleted/inserted) to send to the PATCH endpoint.
@@ -10,18 +26,17 @@ import { makeURL } from '@/js/utils';
  * deepDiff.added fires on a line index whenever *any* nested property is new — including a new
  * element in line_parts. Only lines with id == null are truly new; lines with an existing id that
  * have nested additions must be treated as updates instead.
- *
- * :param actualScriptPage: The current saved page from the store (will be cloned internally).
- * :param tmpScriptPage: The edited in-progress page.
- * :param deletedLines: Array of line indices marked for deletion.
- * :param insertedLines: Array of line indices that were inserted mid-page.
- * :returns: { added, updated, deleted, inserted }
  */
-export function computePageStatus(actualScriptPage, tmpScriptPage, deletedLines, insertedLines) {
-  const augmented = JSON.parse(JSON.stringify(actualScriptPage));
+export function computePageStatus(
+  actualScriptPage: ScriptLine[],
+  tmpScriptPage: ScriptLine[],
+  deletedLines: number[],
+  insertedLines: number[]
+): PageStatus {
+  const augmented: ScriptLine[] = JSON.parse(JSON.stringify(actualScriptPage));
   JSON.parse(JSON.stringify(insertedLines))
-    .sort((a, b) => a - b)
-    .forEach((lineIndex) => {
+    .sort((a: number, b: number) => a - b)
+    .forEach((lineIndex: number) => {
       augmented.splice(lineIndex, 0, JSON.parse(JSON.stringify(tmpScriptPage[lineIndex])));
     });
 
@@ -38,7 +53,9 @@ export function computePageStatus(actualScriptPage, tmpScriptPage, deletedLines,
   };
 }
 
-export default {
+const VueToast = Vue as typeof Vue & { $toast: { error: (m: string) => void } };
+
+const module: Module<ScriptConfigState, RootState> = {
   state: {
     tmpScript: {},
     deletedLines: {},
@@ -50,21 +67,30 @@ export default {
     insertedLines: {},
   },
   mutations: {
-    SET_EDIT_STATUS(state, editStatus) {
+    SET_EDIT_STATUS(state: ScriptConfigState, editStatus: EditStatus) {
       state.editStatus = editStatus;
     },
-    ADD_PAGE(state, { pageNo, pageContents }) {
+    ADD_PAGE(
+      state: ScriptConfigState,
+      { pageNo, pageContents }: { pageNo: number; pageContents: ScriptLine[] }
+    ) {
       Vue.set(state.tmpScript, pageNo, pageContents);
     },
-    REMOVE_PAGE(state, pageNo) {
+    REMOVE_PAGE(state: ScriptConfigState, pageNo: number) {
       Vue.delete(state.tmpScript, pageNo);
     },
-    ADD_BLANK_LINE(state, { pageNo, lineObj }) {
-      const line = JSON.parse(JSON.stringify(lineObj));
+    ADD_BLANK_LINE(
+      state: ScriptConfigState,
+      { pageNo, lineObj }: { pageNo: number; lineObj: ScriptLine }
+    ) {
+      const line: ScriptLine = JSON.parse(JSON.stringify(lineObj));
       line.page = pageNo;
       state.tmpScript[pageNo].push(line);
     },
-    INSERT_BLANK_LINE(state, { pageNo, lineIndex, lineObj }) {
+    INSERT_BLANK_LINE(
+      state: ScriptConfigState,
+      { pageNo, lineIndex, lineObj }: { pageNo: number; lineIndex: number; lineObj: ScriptLine }
+    ) {
       const pageNoStr = pageNo.toString();
 
       if (
@@ -72,13 +98,13 @@ export default {
         state.deletedLines[pageNoStr].includes(lineIndex)
       ) {
         const lineId = state.tmpScript[pageNoStr][lineIndex].id;
-        const line = JSON.parse(JSON.stringify(lineObj));
+        const line: ScriptLine = JSON.parse(JSON.stringify(lineObj));
         line.page = pageNo;
         line.id = lineId;
         state.tmpScript[pageNo].splice(lineIndex, 1, line);
         state.deletedLines[pageNoStr].splice(state.deletedLines[pageNoStr].indexOf(lineIndex), 1);
       } else {
-        const line = JSON.parse(JSON.stringify(lineObj));
+        const line: ScriptLine = JSON.parse(JSON.stringify(lineObj));
         line.page = pageNo;
         state.tmpScript[pageNo].splice(lineIndex, 0, line);
         if (!Object.keys(state.insertedLines).includes(pageNoStr)) {
@@ -87,10 +113,16 @@ export default {
         state.insertedLines[pageNoStr].push(lineIndex);
       }
     },
-    SET_LINE(state, { pageNo, lineIndex, lineObj }) {
+    SET_LINE(
+      state: ScriptConfigState,
+      { pageNo, lineIndex, lineObj }: { pageNo: number; lineIndex: number; lineObj: ScriptLine }
+    ) {
       Vue.set(state.tmpScript[pageNo], lineIndex, lineObj);
     },
-    DELETE_LINE(state, { pageNo, lineIndex }) {
+    DELETE_LINE(
+      state: ScriptConfigState,
+      { pageNo, lineIndex }: { pageNo: number; lineIndex: number }
+    ) {
       const pageNoStr = pageNo.toString();
       if (state.tmpScript[pageNoStr][lineIndex].id !== null) {
         if (!Object.keys(state.deletedLines).includes(pageNoStr)) {
@@ -107,28 +139,28 @@ export default {
         state.insertedLines[pageNoStr].splice(lineIndex, 1);
       }
     },
-    RESET_DELETED(state, pageNo) {
+    RESET_DELETED(state: ScriptConfigState, pageNo: number) {
       const pageNoStr = pageNo.toString();
       if (Object.keys(state.deletedLines).includes(pageNoStr)) {
         Vue.set(state.deletedLines, pageNoStr, []);
       }
     },
-    RESET_INSERTED(state, pageNo) {
+    RESET_INSERTED(state: ScriptConfigState, pageNo: number) {
       const pageNoStr = pageNo.toString();
       if (Object.keys(state.insertedLines).includes(pageNoStr)) {
         Vue.set(state.insertedLines, pageNoStr, []);
       }
     },
-    EMPTY_SCRIPT(state) {
+    EMPTY_SCRIPT(state: ScriptConfigState) {
       state.tmpScript = {};
     },
-    SET_CUT_MODE(state, cutMode) {
+    SET_CUT_MODE(state: ScriptConfigState, cutMode: boolean) {
       state.cutMode = cutMode;
     },
   },
   actions: {
     REQUEST_EDIT_FAILURE(context) {
-      Vue.$toast.error('Unable to edit script');
+      VueToast.$toast.error('Unable to edit script');
       context.dispatch('GET_SCRIPT_CONFIG_STATUS');
       context.commit('SET_CUT_MODE', false);
     },
@@ -141,7 +173,7 @@ export default {
         log.error('Unable to get script config status');
       }
     },
-    ADD_BLANK_PAGE(context, pageNo) {
+    ADD_BLANK_PAGE(context, pageNo: number) {
       const pageNoStr = pageNo.toString();
       const pageContents = JSON.parse(JSON.stringify(context.getters.GET_SCRIPT_PAGE(pageNoStr)));
       context.commit('ADD_PAGE', {
@@ -149,13 +181,13 @@ export default {
         pageContents,
       });
     },
-    RESET_TO_SAVED(context, pageNo) {
+    RESET_TO_SAVED(context, pageNo: number) {
       context.commit('EMPTY_SCRIPT');
       context.dispatch('ADD_BLANK_PAGE', pageNo);
     },
-    async SAVE_NEW_PAGE(context, pageNo) {
+    async SAVE_NEW_PAGE(context, pageNo: number) {
       const searchParams = new URLSearchParams({
-        page: pageNo,
+        page: String(pageNo),
       });
       const response = await fetch(`${makeURL('/api/v1/show/script')}?${searchParams}`, {
         method: 'POST',
@@ -170,8 +202,8 @@ export default {
       }
       return true;
     },
-    async SAVE_CHANGED_PAGE(context, pageNo) {
-      const tmpScriptPage = context.getters.TMP_SCRIPT[pageNo.toString()];
+    async SAVE_CHANGED_PAGE(context, pageNo: number) {
+      const tmpScriptPage: ScriptLine[] = context.getters.TMP_SCRIPT[pageNo.toString()];
       const pageStatus = computePageStatus(
         context.getters.GET_SCRIPT_PAGE(pageNo),
         tmpScriptPage,
@@ -179,7 +211,7 @@ export default {
         context.getters.INSERTED_LINES(pageNo)
       );
       const searchParams = new URLSearchParams({
-        page: pageNo,
+        page: String(pageNo),
       });
       const response = await fetch(`${makeURL('/api/v1/show/script')}?${searchParams}`, {
         method: 'PATCH',
@@ -199,29 +231,29 @@ export default {
     },
   },
   getters: {
-    TMP_SCRIPT(state) {
+    TMP_SCRIPT(state: ScriptConfigState) {
       return state.tmpScript;
     },
-    DELETED_LINES: (state) => (page) => {
+    DELETED_LINES: (state: ScriptConfigState) => (page: number | string) => {
       const pageStr = page.toString();
       if (Object.keys(state.deletedLines).includes(pageStr)) {
         return state.deletedLines[pageStr];
       }
       return [];
     },
-    ALL_DELETED_LINES(state) {
+    ALL_DELETED_LINES(state: ScriptConfigState) {
       return state.deletedLines;
     },
-    CAN_REQUEST_EDIT(state) {
+    CAN_REQUEST_EDIT(state: ScriptConfigState) {
       return state.editStatus.canRequestEdit;
     },
-    CURRENT_EDITOR(state) {
+    CURRENT_EDITOR(state: ScriptConfigState) {
       return state.editStatus.currentEditor;
     },
-    IS_CUT_MODE(state) {
+    IS_CUT_MODE(state: ScriptConfigState) {
       return state.cutMode;
     },
-    INSERTED_LINES: (state) => (page) => {
+    INSERTED_LINES: (state: ScriptConfigState) => (page: number | string) => {
       const pageStr = page.toString();
       if (Object.keys(state.insertedLines).includes(pageStr)) {
         return state.insertedLines[pageStr];
@@ -230,3 +262,5 @@ export default {
     },
   },
 };
+
+export default module;
diff --git a/client/src/store/modules/show.js b/client/src/store/modules/show.ts
similarity index 60%
rename from client/src/store/modules/show.js
rename to client/src/store/modules/show.ts
index 6db9517e..462b1a2a 100644
--- a/client/src/store/modules/show.js
+++ b/client/src/store/modules/show.ts
@@ -1,10 +1,53 @@
 import Vue from 'vue';
 import log from 'loglevel';
+import type { Module } from 'vuex';
 
 import { makeURL } from '@/js/utils';
-import { buildSceneGraph, detectMicConflicts } from '@/js/micConflictUtils';
+import { detectMicConflicts } from '@/js/micConflictUtils';
+import type { RootState } from '@/types/store';
+import type { Cast, Character, CharacterGroup, Act, Scene } from '@/types/api/show';
+import type { CueType } from '@/types/api/cues';
+import type { ShowSession, Interval, SessionTag } from '@/types/api/session';
+import type { Microphone, MicrophoneAllocation } from '@/types/api/microphones';
 
-export default {
+interface ToastInstance {
+  dismiss: () => void;
+}
+
+interface ScriptMode {
+  key: string;
+  value: number;
+}
+
+interface ShowState {
+  castList: Cast[];
+  characterList: Character[];
+  characterGroupList: CharacterGroup[];
+  actList: Act[];
+  sceneList: Scene[];
+  cueTypes: CueType[];
+  sessions: ShowSession[];
+  currentSession: ShowSession | null;
+  currentInterval: Interval | null;
+  sessionFollowData: Record<string, unknown>;
+  microphones: Microphone[];
+  micAllocations: MicrophoneAllocation[];
+  noLeaderToast: ToastInstance | null;
+  scriptModes: ScriptMode[];
+  sessionTags: SessionTag[];
+  stageManagerMode: boolean;
+}
+
+const VueToast = Vue as typeof Vue & {
+  $toast: {
+    success: (m: string) => void;
+    error: (m: string, opts?: { duration: number }) => void;
+    info: (m: string, opts?: { duration: number }) => void;
+    warning: (m: string, opts?: { duration: number }) => ToastInstance;
+  };
+};
+
+const module: Module<ShowState, RootState> = {
   state: {
     castList: [],
     characterList: [],
@@ -24,59 +67,59 @@ export default {
     stageManagerMode: false,
   },
   mutations: {
-    SET_CAST_LIST(state, castList) {
+    SET_CAST_LIST(state: ShowState, castList: Cast[]) {
       state.castList = castList;
     },
-    SET_CHARACTER_LIST(state, characterList) {
+    SET_CHARACTER_LIST(state: ShowState, characterList: Character[]) {
       state.characterList = characterList;
     },
-    SET_CHARACTER_GROUP_LIST(state, characterGroupList) {
+    SET_CHARACTER_GROUP_LIST(state: ShowState, characterGroupList: CharacterGroup[]) {
       state.characterGroupList = characterGroupList;
     },
-    SET_ACT_LIST(state, actList) {
+    SET_ACT_LIST(state: ShowState, actList: Act[]) {
       state.actList = actList;
     },
-    SET_SCENE_LIST(state, sceneList) {
+    SET_SCENE_LIST(state: ShowState, sceneList: Scene[]) {
       state.sceneList = sceneList;
     },
-    SET_CUE_TYPES(state, cueTypes) {
+    SET_CUE_TYPES(state: ShowState, cueTypes: CueType[]) {
       state.cueTypes = cueTypes;
     },
-    CLEAR_CURRENT_SHOW(state) {
+    CLEAR_CURRENT_SHOW(state: ShowState) {
       state.castList = [];
       state.characterList = [];
       state.actList = [];
       state.sceneList = [];
       state.sessionTags = [];
     },
-    SET_SESSIONS_LIST(state, sessions) {
+    SET_SESSIONS_LIST(state: ShowState, sessions: ShowSession[]) {
       state.sessions = sessions;
     },
-    SET_CURRENT_SESSION(state, session) {
+    SET_CURRENT_SESSION(state: ShowState, session: ShowSession | null) {
       state.currentSession = session;
     },
-    SET_CURRENT_INTERVAL(state, interval) {
+    SET_CURRENT_INTERVAL(state: ShowState, interval: Interval | null) {
       state.currentInterval = interval;
     },
-    SET_SESSION_FOLLOW_DATA(state, data) {
+    SET_SESSION_FOLLOW_DATA(state: ShowState, data: Record<string, unknown>) {
       state.sessionFollowData = data;
     },
-    SET_MIC_LIST(state, micList) {
+    SET_MIC_LIST(state: ShowState, micList: Microphone[]) {
       state.microphones = micList;
     },
-    SET_MIC_ALLOCATIONS_LIST(state, micAllocations) {
+    SET_MIC_ALLOCATIONS_LIST(state: ShowState, micAllocations: MicrophoneAllocation[]) {
       state.micAllocations = micAllocations;
     },
-    SET_TOAST_INSTANCE(state, toast) {
+    SET_TOAST_INSTANCE(state: ShowState, toast: ToastInstance | null) {
       state.noLeaderToast = toast;
     },
-    UPDATE_SCRIPT_MODES(state, modes) {
+    UPDATE_SCRIPT_MODES(state: ShowState, modes: ScriptMode[]) {
       state.scriptModes = modes;
     },
-    SET_SESSION_TAGS(state, tags) {
+    SET_SESSION_TAGS(state: ShowState, tags: SessionTag[]) {
       state.sessionTags = tags;
     },
-    SET_STAGE_MANAGER_MODE(state, enabled) {
+    SET_STAGE_MANAGER_MODE(state: ShowState, enabled: boolean) {
       state.stageManagerMode = enabled;
     },
   },
@@ -90,54 +133,46 @@ export default {
         log.error('Unable to get cast list');
       }
     },
-    async ADD_CAST_MEMBER(context, castMember) {
+    async ADD_CAST_MEMBER(context, castMember: Partial<Cast>) {
       const response = await fetch(`${makeURL('/api/v1/show/cast')}`, {
         method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(castMember),
       });
       if (response.ok) {
         context.dispatch('GET_CAST_LIST');
-        Vue.$toast.success('Added new cast member!');
+        VueToast.$toast.success('Added new cast member!');
       } else {
         log.error('Unable to add new cast member');
-        Vue.$toast.error('Unable to add new cast member');
+        VueToast.$toast.error('Unable to add new cast member');
       }
     },
-    async DELETE_CAST_MEMBER(context, castID) {
-      const searchParams = new URLSearchParams({
-        id: castID,
-      });
+    async DELETE_CAST_MEMBER(context, castID: number) {
+      const searchParams = new URLSearchParams({ id: String(castID) });
       const response = await fetch(`${makeURL('/api/v1/show/cast')}?${searchParams}`, {
         method: 'DELETE',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
       });
       if (response.ok) {
         context.dispatch('GET_CAST_LIST');
-        Vue.$toast.success('Deleted cast member!');
+        VueToast.$toast.success('Deleted cast member!');
       } else {
         log.error('Unable to delete cast member');
-        Vue.$toast.error('Unable to delete cast member');
+        VueToast.$toast.error('Unable to delete cast member');
       }
     },
-    async UPDATE_CAST_MEMBER(context, castMember) {
+    async UPDATE_CAST_MEMBER(context, castMember: Partial<Cast>) {
       const response = await fetch(`${makeURL('/api/v1/show/cast')}`, {
         method: 'PATCH',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(castMember),
       });
       if (response.ok) {
         context.dispatch('GET_CAST_LIST');
-        Vue.$toast.success('Updated cast member!');
+        VueToast.$toast.success('Updated cast member!');
       } else {
         log.error('Unable to edit cast member');
-        Vue.$toast.error('Unable to edit cast member');
+        VueToast.$toast.error('Unable to edit cast member');
       }
     },
     async GET_CHARACTER_LIST(context) {
@@ -149,54 +184,46 @@ export default {
         log.error('Unable to get characters list');
       }
     },
-    async ADD_CHARACTER(context, character) {
+    async ADD_CHARACTER(context, character: Partial<Character>) {
       const response = await fetch(`${makeURL('/api/v1/show/character')}`, {
         method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(character),
       });
       if (response.ok) {
         context.dispatch('GET_CHARACTER_LIST');
-        Vue.$toast.success('Added new character!');
+        VueToast.$toast.success('Added new character!');
       } else {
         log.error('Unable to add new character');
-        Vue.$toast.error('Unable to add new character');
+        VueToast.$toast.error('Unable to add new character');
       }
     },
-    async DELETE_CHARACTER(context, characterID) {
-      const searchParams = new URLSearchParams({
-        id: characterID,
-      });
+    async DELETE_CHARACTER(context, characterID: number) {
+      const searchParams = new URLSearchParams({ id: String(characterID) });
       const response = await fetch(`${makeURL('/api/v1/show/character')}?${searchParams}`, {
         method: 'DELETE',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
       });
       if (response.ok) {
         context.dispatch('GET_CHARACTER_LIST');
-        Vue.$toast.success('Deleted character!');
+        VueToast.$toast.success('Deleted character!');
       } else {
         log.error('Unable to delete character');
-        Vue.$toast.error('Unable to delete character');
+        VueToast.$toast.error('Unable to delete character');
       }
     },
-    async UPDATE_CHARACTER(context, character) {
+    async UPDATE_CHARACTER(context, character: Partial<Character>) {
       const response = await fetch(`${makeURL('/api/v1/show/character')}`, {
         method: 'PATCH',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(character),
       });
       if (response.ok) {
         context.dispatch('GET_CHARACTER_LIST');
-        Vue.$toast.success('Updated character!');
+        VueToast.$toast.success('Updated character!');
       } else {
         log.error('Unable to edit character');
-        Vue.$toast.error('Unable to edit character');
+        VueToast.$toast.error('Unable to edit character');
       }
     },
     async GET_CHARACTER_GROUP_LIST(context) {
@@ -209,54 +236,46 @@ export default {
         log.error('Unable to get characters list');
       }
     },
-    async ADD_CHARACTER_GROUP(context, act) {
+    async ADD_CHARACTER_GROUP(context, act: Partial<CharacterGroup>) {
       const response = await fetch(`${makeURL('/api/v1/show/character/group')}`, {
         method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(act),
       });
       if (response.ok) {
         context.dispatch('GET_CHARACTER_GROUP_LIST');
-        Vue.$toast.success('Added new character group!');
+        VueToast.$toast.success('Added new character group!');
       } else {
         log.error('Unable to add new character group');
-        Vue.$toast.error('Unable to add new character group');
+        VueToast.$toast.error('Unable to add new character group');
       }
     },
-    async DELETE_CHARACTER_GROUP(context, characterGroupID) {
-      const searchParams = new URLSearchParams({
-        id: characterGroupID,
-      });
+    async DELETE_CHARACTER_GROUP(context, characterGroupID: number) {
+      const searchParams = new URLSearchParams({ id: String(characterGroupID) });
       const response = await fetch(`${makeURL('/api/v1/show/character/group')}?${searchParams}`, {
         method: 'DELETE',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
       });
       if (response.ok) {
         context.dispatch('GET_CHARACTER_GROUP_LIST');
-        Vue.$toast.success('Deleted character group!');
+        VueToast.$toast.success('Deleted character group!');
       } else {
         log.error('Unable to delete character group');
-        Vue.$toast.error('Unable to delete character group');
+        VueToast.$toast.error('Unable to delete character group');
       }
     },
-    async UPDATE_CHARACTER_GROUP(context, characterGroup) {
+    async UPDATE_CHARACTER_GROUP(context, characterGroup: Partial<CharacterGroup>) {
       const response = await fetch(`${makeURL('/api/v1/show/character/group')}`, {
         method: 'PATCH',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(characterGroup),
       });
       if (response.ok) {
         context.dispatch('GET_CHARACTER_GROUP_LIST');
-        Vue.$toast.success('Updated character group!');
+        VueToast.$toast.success('Updated character group!');
       } else {
         log.error('Unable to edit character group');
-        Vue.$toast.error('Unable to edit character group');
+        VueToast.$toast.error('Unable to edit character group');
       }
     },
     async GET_ACT_LIST(context) {
@@ -268,70 +287,60 @@ export default {
         log.error('Unable to get acts list');
       }
     },
-    async ADD_ACT(context, act) {
+    async ADD_ACT(context, act: Partial<Act>) {
       const response = await fetch(`${makeURL('/api/v1/show/act')}`, {
         method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(act),
       });
       if (response.ok) {
         context.dispatch('GET_ACT_LIST');
-        Vue.$toast.success('Added new act!');
+        VueToast.$toast.success('Added new act!');
       } else {
         log.error('Unable to add new act');
-        Vue.$toast.error('Unable to add new act');
+        VueToast.$toast.error('Unable to add new act');
       }
     },
-    async DELETE_ACT(context, actID) {
-      const searchParams = new URLSearchParams({
-        id: actID,
-      });
+    async DELETE_ACT(context, actID: number) {
+      const searchParams = new URLSearchParams({ id: String(actID) });
       const response = await fetch(`${makeURL('/api/v1/show/act')}?${searchParams}`, {
         method: 'DELETE',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
       });
       if (response.ok) {
         context.dispatch('GET_ACT_LIST');
-        Vue.$toast.success('Deleted act!');
+        VueToast.$toast.success('Deleted act!');
       } else {
         log.error('Unable to delete act');
-        Vue.$toast.error('Unable to delete act');
+        VueToast.$toast.error('Unable to delete act');
       }
     },
-    async UPDATE_ACT(context, act) {
+    async UPDATE_ACT(context, act: Partial<Act>) {
       const response = await fetch(`${makeURL('/api/v1/show/act')}`, {
         method: 'PATCH',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(act),
       });
       if (response.ok) {
         context.dispatch('GET_ACT_LIST');
-        Vue.$toast.success('Updated act!');
+        VueToast.$toast.success('Updated act!');
       } else {
         log.error('Unable to edit act');
-        Vue.$toast.error('Unable to edit act');
+        VueToast.$toast.error('Unable to edit act');
       }
     },
-    async SET_ACT_FIRST_SCENE(context, act) {
+    async SET_ACT_FIRST_SCENE(context, act: Partial<Act>) {
       const response = await fetch(`${makeURL('/api/v1/show/act/first_scene')}`, {
         method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(act),
       });
       if (response.ok) {
         context.dispatch('GET_ACT_LIST');
-        Vue.$toast.success('Updated act!');
+        VueToast.$toast.success('Updated act!');
       } else {
         log.error('Unable to edit act');
-        Vue.$toast.error('Unable to edit act');
+        VueToast.$toast.error('Unable to edit act');
       }
     },
     async GET_SCENE_LIST(context) {
@@ -343,57 +352,49 @@ export default {
         log.error('Unable to get scenes list');
       }
     },
-    async ADD_SCENE(context, scene) {
+    async ADD_SCENE(context, scene: Partial<Scene>) {
       const response = await fetch(`${makeURL('/api/v1/show/scene')}`, {
         method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(scene),
       });
       if (response.ok) {
         context.dispatch('GET_SCENE_LIST');
         context.dispatch('GET_ACT_LIST');
-        Vue.$toast.success('Added new scene!');
+        VueToast.$toast.success('Added new scene!');
       } else {
         log.error('Unable to add new scene');
-        Vue.$toast.error('Unable to add new scene');
+        VueToast.$toast.error('Unable to add new scene');
       }
     },
-    async DELETE_SCENE(context, sceneID) {
-      const searchParams = new URLSearchParams({
-        id: sceneID,
-      });
+    async DELETE_SCENE(context, sceneID: number) {
+      const searchParams = new URLSearchParams({ id: String(sceneID) });
       const response = await fetch(`${makeURL('/api/v1/show/scene')}?${searchParams}`, {
         method: 'DELETE',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
       });
       if (response.ok) {
         context.dispatch('GET_SCENE_LIST');
         context.dispatch('GET_ACT_LIST');
-        Vue.$toast.success('Deleted scene!');
+        VueToast.$toast.success('Deleted scene!');
       } else {
         log.error('Unable to delete scene');
-        Vue.$toast.error('Unable to delete scene');
+        VueToast.$toast.error('Unable to delete scene');
       }
     },
-    async UPDATE_SCENE(context, scene) {
+    async UPDATE_SCENE(context, scene: Partial<Scene>) {
       const response = await fetch(`${makeURL('/api/v1/show/scene')}`, {
         method: 'PATCH',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(scene),
       });
       if (response.ok) {
         context.dispatch('GET_SCENE_LIST');
         context.dispatch('GET_ACT_LIST');
-        Vue.$toast.success('Updated scene!');
+        VueToast.$toast.success('Updated scene!');
       } else {
         log.error('Unable to edit scene');
-        Vue.$toast.error('Unable to edit scene');
+        VueToast.$toast.error('Unable to edit scene');
       }
     },
     async GET_CUE_TYPES(context) {
@@ -405,54 +406,46 @@ export default {
         log.error('Unable to get cue types');
       }
     },
-    async ADD_CUE_TYPE(context, cueType) {
+    async ADD_CUE_TYPE(context, cueType: Partial<CueType>) {
       const response = await fetch(`${makeURL('/api/v1/show/cues/types')}`, {
         method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(cueType),
       });
       if (response.ok) {
         context.dispatch('GET_CUE_TYPES');
-        Vue.$toast.success('Added new cue type!');
+        VueToast.$toast.success('Added new cue type!');
       } else {
         log.error('Unable to add new cue type');
-        Vue.$toast.error('Unable to add new cue type');
+        VueToast.$toast.error('Unable to add new cue type');
       }
     },
-    async DELETE_CUE_TYPE(context, cueTypeID) {
-      const searchParams = new URLSearchParams({
-        id: cueTypeID,
-      });
+    async DELETE_CUE_TYPE(context, cueTypeID: number) {
+      const searchParams = new URLSearchParams({ id: String(cueTypeID) });
       const response = await fetch(`${makeURL('/api/v1/show/cues/types')}?${searchParams}`, {
         method: 'DELETE',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
       });
       if (response.ok) {
         context.dispatch('GET_CUE_TYPES');
-        Vue.$toast.success('Deleted cue type!');
+        VueToast.$toast.success('Deleted cue type!');
       } else {
         log.error('Unable to delete cue type');
-        Vue.$toast.error('Unable to delete cue type');
+        VueToast.$toast.error('Unable to delete cue type');
       }
     },
-    async UPDATE_CUE_TYPE(context, cueType) {
+    async UPDATE_CUE_TYPE(context, cueType: Partial<CueType>) {
       const response = await fetch(`${makeURL('/api/v1/show/cues/types')}`, {
         method: 'PATCH',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(cueType),
       });
       if (response.ok) {
         context.dispatch('GET_CUE_TYPES');
-        Vue.$toast.success('Updated cue type!');
+        VueToast.$toast.success('Updated cue type!');
       } else {
         log.error('Unable to edit cue type');
-        Vue.$toast.error('Unable to edit cue type');
+        VueToast.$toast.error('Unable to edit cue type');
       }
     },
     async GET_IMPORTABLE_CUE_TYPES() {
@@ -483,24 +476,23 @@ export default {
         log.error('Unable to get show sessions');
       }
     },
-    async ELECTED_LEADER(context, payload) {
-      Vue.$toast.info('You are now leader of the script - other clients will follow your view', {
-        duration: 0,
-      });
+    async ELECTED_LEADER(_context, _payload: unknown) {
+      VueToast.$toast.info(
+        'You are now leader of the script - other clients will follow your view',
+        { duration: 0 }
+      );
     },
-    async NO_LEADER(context, payload) {
+    async NO_LEADER(context, _payload: unknown) {
       await context.dispatch('GET_SHOW_SESSION_DATA');
       if (context.getters.NO_LEADER_TOAST == null) {
-        const instance = Vue.$toast.warning(
+        const instance = VueToast.$toast.warning(
           'There is no script leader. Please scroll your own script!',
-          {
-            duration: 0,
-          }
+          { duration: 0 }
         );
         context.commit('SET_TOAST_INSTANCE', instance);
       }
     },
-    SCRIPT_SCROLL(context, payload) {
+    SCRIPT_SCROLL(context, payload: { DATA: Record<string, unknown> }) {
       context.commit('SET_SESSION_FOLLOW_DATA', payload.DATA);
     },
     async GET_MICROPHONE_LIST(context) {
@@ -512,54 +504,46 @@ export default {
         log.error('Unable to get microphone list');
       }
     },
-    async ADD_MICROPHONE(context, microphone) {
+    async ADD_MICROPHONE(context, microphone: Partial<Microphone>) {
       const response = await fetch(`${makeURL('/api/v1/show/microphones')}`, {
         method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(microphone),
       });
       if (response.ok) {
         context.dispatch('GET_MICROPHONE_LIST');
-        Vue.$toast.success('Added new microphone!');
+        VueToast.$toast.success('Added new microphone!');
       } else {
         log.error('Unable to add new microphone');
-        Vue.$toast.error('Unable to add new microphone');
+        VueToast.$toast.error('Unable to add new microphone');
       }
     },
-    async DELETE_MICROPHONE(context, microphoneId) {
-      const searchParams = new URLSearchParams({
-        id: microphoneId,
-      });
+    async DELETE_MICROPHONE(context, microphoneId: number) {
+      const searchParams = new URLSearchParams({ id: String(microphoneId) });
       const response = await fetch(`${makeURL('/api/v1/show/microphones')}?${searchParams}`, {
         method: 'DELETE',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
       });
       if (response.ok) {
         context.dispatch('GET_MICROPHONE_LIST');
-        Vue.$toast.success('Deleted microphone!');
+        VueToast.$toast.success('Deleted microphone!');
       } else {
         log.error('Unable to delete microphone');
-        Vue.$toast.error('Unable to delete microphone');
+        VueToast.$toast.error('Unable to delete microphone');
       }
     },
-    async UPDATE_MICROPHONE(context, microphone) {
+    async UPDATE_MICROPHONE(context, microphone: Partial<Microphone>) {
       const response = await fetch(`${makeURL('/api/v1/show/microphones')}`, {
         method: 'PATCH',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(microphone),
       });
       if (response.ok) {
         context.dispatch('GET_MICROPHONE_LIST');
-        Vue.$toast.success('Updated microphone!');
+        VueToast.$toast.success('Updated microphone!');
       } else {
         log.error('Unable to edit microphone');
-        Vue.$toast.error('Unable to edit microphone');
+        VueToast.$toast.error('Unable to edit microphone');
       }
     },
     async GET_MIC_ALLOCATIONS(context) {
@@ -571,20 +555,18 @@ export default {
         log.error('Unable to get microphone allocations');
       }
     },
-    async UPDATE_MIC_ALLOCATIONS(context, allocations) {
+    async UPDATE_MIC_ALLOCATIONS(context, allocations: unknown) {
       const response = await fetch(`${makeURL('/api/v1/show/microphones/allocations')}`, {
         method: 'PATCH',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(allocations),
       });
       if (response.ok) {
         context.dispatch('GET_MIC_ALLOCATIONS');
-        Vue.$toast.success('Updated microphone allocations!');
+        VueToast.$toast.success('Updated microphone allocations!');
       } else {
         log.error('Unable to edit microphone allocations');
-        Vue.$toast.error('Unable to edit microphone allocations');
+        VueToast.$toast.error('Unable to edit microphone allocations');
       }
     },
     async GET_SCRIPT_MODES(context) {
@@ -605,51 +587,45 @@ export default {
         log.error('Unable to get session tags');
       }
     },
-    async ADD_SESSION_TAG(context, tag) {
+    async ADD_SESSION_TAG(context, tag: Partial<SessionTag>) {
       const response = await fetch(`${makeURL('/api/v1/show/session/tags')}`, {
         method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(tag),
       });
       if (response.ok) {
         context.dispatch('GET_SESSION_TAGS');
-        Vue.$toast.success('Added new session tag!');
+        VueToast.$toast.success('Added new session tag!');
       } else {
         log.error('Unable to add session tag');
-        Vue.$toast.error('Unable to add session tag');
+        VueToast.$toast.error('Unable to add session tag');
       }
     },
-    async UPDATE_SESSION_TAG(context, tag) {
+    async UPDATE_SESSION_TAG(context, tag: Partial<SessionTag>) {
       const response = await fetch(`${makeURL('/api/v1/show/session/tags')}`, {
         method: 'PATCH',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(tag),
       });
       if (response.ok) {
         context.dispatch('GET_SESSION_TAGS');
-        Vue.$toast.success('Updated session tag!');
+        VueToast.$toast.success('Updated session tag!');
       } else {
         log.error('Unable to edit session tag');
-        Vue.$toast.error('Unable to edit session tag');
+        VueToast.$toast.error('Unable to edit session tag');
       }
     },
-    async DELETE_SESSION_TAG(context, tagId) {
+    async DELETE_SESSION_TAG(context, tagId: number) {
       const response = await fetch(`${makeURL('/api/v1/show/session/tags')}?id=${tagId}`, {
         method: 'DELETE',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
       });
       if (response.ok) {
         context.dispatch('GET_SESSION_TAGS');
-        Vue.$toast.success('Deleted session tag!');
+        VueToast.$toast.success('Deleted session tag!');
       } else {
         log.error('Unable to delete session tag');
-        Vue.$toast.error('Unable to delete session tag');
+        VueToast.$toast.error('Unable to delete session tag');
       }
     },
     async GET_IMPORTABLE_SESSION_TAGS() {
@@ -662,144 +638,130 @@ export default {
       }
       return response.json();
     },
-    async UPDATE_SESSION_TAGS(context, { sessionId, tagIds }) {
+    async UPDATE_SESSION_TAGS(
+      context,
+      { sessionId, tagIds }: { sessionId: number; tagIds: number[] }
+    ) {
       const response = await fetch(`${makeURL('/api/v1/show/sessions/assign-tags')}`, {
         method: 'PATCH',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          session_id: sessionId,
-          tag_ids: tagIds,
-        }),
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ session_id: sessionId, tag_ids: tagIds }),
       });
       if (response.ok) {
         await context.dispatch('GET_SHOW_SESSION_DATA');
-        Vue.$toast.success('Updated session tags!');
+        VueToast.$toast.success('Updated session tags!');
       } else {
         const errorData = await response.json().catch(() => ({}));
         log.error('Unable to update session tags:', errorData);
-        Vue.$toast.error(errorData.message || 'Unable to update session tags');
+        VueToast.$toast.error(errorData.message || 'Unable to update session tags');
         throw new Error('Failed to update session tags');
       }
     },
   },
   getters: {
-    CAST_LIST(state) {
+    CAST_LIST(state: ShowState) {
       return state.castList;
     },
-    CAST_DICT(state) {
+    CAST_DICT(state: ShowState) {
       return Object.fromEntries(state.castList.map((cast) => [cast.id, cast]));
     },
-    CAST_BY_ID: (state, getters) => (castId) => {
-      if (castId == null) {
-        return null;
-      }
+    CAST_BY_ID: (_state: ShowState, getters) => (castId: number | null) => {
+      if (castId == null) return null;
       const castStr = castId.toString();
       if (Object.keys(getters.CAST_DICT).includes(castStr)) {
         return getters.CAST_DICT[castStr];
       }
       return null;
     },
-    CHARACTER_LIST(state) {
+    CHARACTER_LIST(state: ShowState) {
       return state.characterList;
     },
-    CHARACTER_DICT(state) {
+    CHARACTER_DICT(state: ShowState) {
       return Object.fromEntries(state.characterList.map((character) => [character.id, character]));
     },
-    CHARACTER_BY_ID: (state, getters) => (characterId) => {
-      if (characterId == null) {
-        return null;
-      }
+    CHARACTER_BY_ID: (_state: ShowState, getters) => (characterId: number | null) => {
+      if (characterId == null) return null;
       const characterStr = characterId.toString();
       if (Object.keys(getters.CHARACTER_DICT).includes(characterStr)) {
         return getters.CHARACTER_DICT[characterStr];
       }
       return null;
     },
-    CHARACTER_GROUP_LIST(state) {
+    CHARACTER_GROUP_LIST(state: ShowState) {
       return state.characterGroupList;
     },
-    ACT_LIST(state) {
+    ACT_LIST(state: ShowState) {
       return state.actList;
     },
-    ACT_DICT(state) {
+    ACT_DICT(state: ShowState) {
       return Object.fromEntries(state.actList.map((act) => [act.id, act]));
     },
-    ACT_BY_ID: (state, getters) => (actId) => {
-      if (actId == null) {
-        return null;
-      }
+    ACT_BY_ID: (_state: ShowState, getters) => (actId: number | null) => {
+      if (actId == null) return null;
       const actStr = actId.toString();
       if (Object.keys(getters.ACT_DICT).includes(actStr)) {
         return getters.ACT_DICT[actStr];
       }
       return null;
     },
-    SCENE_LIST(state) {
+    SCENE_LIST(state: ShowState) {
       return state.sceneList;
     },
-    SCENE_DICT(state) {
+    SCENE_DICT(state: ShowState) {
       return Object.fromEntries(state.sceneList.map((scene) => [scene.id, scene]));
     },
-    SCENE_BY_ID: (state, getters) => (sceneId) => {
-      if (sceneId == null) {
-        return null;
-      }
+    SCENE_BY_ID: (_state: ShowState, getters) => (sceneId: number | null) => {
+      if (sceneId == null) return null;
       const sceneStr = sceneId.toString();
       if (Object.keys(getters.SCENE_DICT).includes(sceneStr)) {
         return getters.SCENE_DICT[sceneStr];
       }
       return null;
     },
-    CUE_TYPES(state) {
+    CUE_TYPES(state: ShowState) {
       return state.cueTypes;
     },
-    CUE_TYPES_DICT(state) {
+    CUE_TYPES_DICT(state: ShowState) {
       return Object.fromEntries(state.cueTypes.map((cueType) => [cueType.id, cueType]));
     },
-    CUE_TYPE_BY_ID: (state, getters) => (cueTypeId) => {
-      if (cueTypeId == null) {
-        return null;
-      }
+    CUE_TYPE_BY_ID: (_state: ShowState, getters) => (cueTypeId: number | null) => {
+      if (cueTypeId == null) return null;
       const cueTypeStr = cueTypeId.toString();
       if (Object.keys(getters.CUE_TYPES_DICT).includes(cueTypeStr)) {
         return getters.CUE_TYPES_DICT[cueTypeStr];
       }
       return null;
     },
-    SHOW_SESSIONS_LIST(state) {
+    SHOW_SESSIONS_LIST(state: ShowState) {
       return state.sessions;
     },
-    CURRENT_SHOW_SESSION(state) {
+    CURRENT_SHOW_SESSION(state: ShowState) {
       return state.currentSession;
     },
-    CURRENT_SHOW_INTERVAL(state) {
+    CURRENT_SHOW_INTERVAL(state: ShowState) {
       return state.currentInterval;
     },
-    SESSION_FOLLOW_DATA(state) {
+    SESSION_FOLLOW_DATA(state: ShowState) {
       return state.sessionFollowData;
     },
-    MICROPHONES(state) {
+    MICROPHONES(state: ShowState) {
       return state.microphones;
     },
-    MICROPHONE_DICT(state) {
+    MICROPHONE_DICT(state: ShowState) {
       return Object.fromEntries(state.microphones.map((mic) => [mic.id, mic]));
     },
-    MICROPHONE_BY_ID: (state, getters) => (micId) => {
-      if (micId == null) {
-        return null;
-      }
+    MICROPHONE_BY_ID: (_state: ShowState, getters) => (micId: number | null) => {
+      if (micId == null) return null;
       const micStr = micId.toString();
       if (Object.keys(getters.MICROPHONE_DICT).includes(micStr)) {
         return getters.MICROPHONE_DICT[micStr];
       }
       return null;
     },
-    MIC_ALLOCATIONS(state) {
+    MIC_ALLOCATIONS(state: ShowState) {
       return state.micAllocations;
     },
-    ORDERED_SCENES(state, getters) {
+    ORDERED_SCENES(_state: ShowState, getters) {
       if (
         !getters.CURRENT_SHOW?.first_act_id ||
         !getters.SCENE_LIST?.length ||
@@ -808,7 +770,7 @@ export default {
         return [];
       }
 
-      const scenes = [];
+      const scenes: Scene[] = [];
       let currentAct = getters.ACT_BY_ID(getters.CURRENT_SHOW.first_act_id);
 
       while (currentAct != null) {
@@ -822,14 +784,13 @@ export default {
 
       return scenes;
     },
-    MIC_CONFLICTS(state, getters) {
-      // Transform MIC_ALLOCATIONS from array format to object format
-      const allocationsObj = {};
+    MIC_CONFLICTS(_state: ShowState, getters) {
+      const allocationsObj: Record<string, Record<number, number>> = {};
       Object.keys(getters.MIC_ALLOCATIONS).forEach((micId) => {
         const allocs = getters.MIC_ALLOCATIONS[micId];
-        const sceneData = {};
+        const sceneData: Record<number, number> = {};
         if (Array.isArray(allocs)) {
-          allocs.forEach((alloc) => {
+          allocs.forEach((alloc: { scene_id: number; character_id: number }) => {
             sceneData[alloc.scene_id] = alloc.character_id;
           });
         }
@@ -845,49 +806,45 @@ export default {
         getters.CAST_LIST
       );
     },
-    CONFLICTS_BY_SCENE(state, getters) {
+    CONFLICTS_BY_SCENE(_state: ShowState, getters) {
       return getters.MIC_CONFLICTS.conflictsByScene || {};
     },
-    CONFLICTS_BY_MIC(state, getters) {
+    CONFLICTS_BY_MIC(_state: ShowState, getters) {
       return getters.MIC_CONFLICTS.conflictsByMic || {};
     },
-    MIC_TIMELINE_DATA(state, getters) {
-      const scenes = getters.ORDERED_SCENES;
-      const allocations = getters.MIC_ALLOCATIONS;
-      const conflicts = getters.MIC_CONFLICTS.conflicts || [];
-
+    MIC_TIMELINE_DATA(_state: ShowState, getters) {
       return {
-        scenes,
-        allocations,
-        conflicts,
+        scenes: getters.ORDERED_SCENES,
+        allocations: getters.MIC_ALLOCATIONS,
+        conflicts: getters.MIC_CONFLICTS.conflicts || [],
         microphones: getters.MICROPHONES,
         characters: getters.CHARACTER_LIST,
       };
     },
-    NO_LEADER_TOAST(state) {
+    NO_LEADER_TOAST(state: ShowState) {
       return state.noLeaderToast;
     },
-    SCRIPT_MODES(state) {
+    SCRIPT_MODES(state: ShowState) {
       return state.scriptModes;
     },
-    SESSION_TAGS(state) {
+    SESSION_TAGS(state: ShowState) {
       return state.sessionTags;
     },
-    SESSION_TAGS_DICT(state) {
+    SESSION_TAGS_DICT(state: ShowState) {
       return Object.fromEntries(state.sessionTags.map((tag) => [tag.id, tag]));
     },
-    SESSION_TAG_BY_ID: (state, getters) => (tagId) => {
-      if (tagId == null) {
-        return null;
-      }
+    SESSION_TAG_BY_ID: (_state: ShowState, getters) => (tagId: number | null) => {
+      if (tagId == null) return null;
       const tagStr = tagId.toString();
       if (Object.keys(getters.SESSION_TAGS_DICT).includes(tagStr)) {
         return getters.SESSION_TAGS_DICT[tagStr];
       }
       return null;
     },
-    STAGE_MANAGER_MODE(state) {
+    STAGE_MANAGER_MODE(state: ShowState) {
       return state.stageManagerMode;
     },
   },
 };
+
+export default module;
diff --git a/client/src/store/modules/stage.js b/client/src/store/modules/stage.ts
similarity index 60%
rename from client/src/store/modules/stage.js
rename to client/src/store/modules/stage.ts
index 3b531ec6..e3585156 100644
--- a/client/src/store/modules/stage.js
+++ b/client/src/store/modules/stage.ts
@@ -1,9 +1,36 @@
 import Vue from 'vue';
 import log from 'loglevel';
+import type { Module } from 'vuex';
 
 import { makeURL } from '@/js/utils';
+import type { RootState } from '@/types/store';
+import type {
+  Crew,
+  CrewAssignment,
+  SceneryType,
+  Scenery,
+  SceneryAllocation,
+  PropType,
+  Props,
+  PropsAllocation,
+} from '@/types/api/stage';
 
-export default {
+interface StageState {
+  crewList: Crew[];
+  crewAssignments: CrewAssignment[];
+  sceneryTypes: SceneryType[];
+  sceneryList: Scenery[];
+  sceneryAllocations: SceneryAllocation[];
+  propTypes: PropType[];
+  propsList: Props[];
+  propsAllocations: PropsAllocation[];
+}
+
+const VueToast = Vue as typeof Vue & {
+  $toast: { success: (m: string) => void; error: (m: string) => void };
+};
+
+const module: Module<StageState, RootState> = {
   state: {
     crewList: [],
     crewAssignments: [],
@@ -15,28 +42,28 @@ export default {
     propsAllocations: [],
   },
   mutations: {
-    SET_CREW_LIST(state, crewList) {
+    SET_CREW_LIST(state: StageState, crewList: Crew[]) {
       state.crewList = crewList;
     },
-    SET_CREW_ASSIGNMENTS(state, assignments) {
+    SET_CREW_ASSIGNMENTS(state: StageState, assignments: CrewAssignment[]) {
       state.crewAssignments = assignments;
     },
-    SET_SCENERY_TYPES(state, sceneryTypes) {
+    SET_SCENERY_TYPES(state: StageState, sceneryTypes: SceneryType[]) {
       state.sceneryTypes = sceneryTypes;
     },
-    SET_SCENERY_LIST(state, sceneryList) {
+    SET_SCENERY_LIST(state: StageState, sceneryList: Scenery[]) {
       state.sceneryList = sceneryList;
     },
-    SET_PROP_TYPES(state, propTypes) {
+    SET_PROP_TYPES(state: StageState, propTypes: PropType[]) {
       state.propTypes = propTypes;
     },
-    SET_PROPS_LIST(state, propsList) {
+    SET_PROPS_LIST(state: StageState, propsList: Props[]) {
       state.propsList = propsList;
     },
-    SET_PROPS_ALLOCATIONS(state, allocations) {
+    SET_PROPS_ALLOCATIONS(state: StageState, allocations: PropsAllocation[]) {
       state.propsAllocations = allocations;
     },
-    SET_SCENERY_ALLOCATIONS(state, allocations) {
+    SET_SCENERY_ALLOCATIONS(state: StageState, allocations: SceneryAllocation[]) {
       state.sceneryAllocations = allocations;
     },
   },
@@ -50,52 +77,46 @@ export default {
         log.error('Unable to get crew list');
       }
     },
-    async ADD_CREW_MEMBER(context, crewMember) {
+    async ADD_CREW_MEMBER(context, crewMember: Partial<Crew>) {
       const response = await fetch(`${makeURL('/api/v1/show/stage/crew')}`, {
         method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(crewMember),
       });
       if (response.ok) {
         context.dispatch('GET_CREW_LIST');
-        Vue.$toast.success('Added new crew member!');
+        VueToast.$toast.success('Added new crew member!');
       } else {
         log.error('Unable to add new crew member');
-        Vue.$toast.error('Unable to add new crew member');
+        VueToast.$toast.error('Unable to add new crew member');
       }
     },
-    async DELETE_CREW_MEMBER(context, crewId) {
-      const searchParams = new URLSearchParams({ id: crewId });
+    async DELETE_CREW_MEMBER(context, crewId: number) {
+      const searchParams = new URLSearchParams({ id: String(crewId) });
       const response = await fetch(`${makeURL('/api/v1/show/stage/crew')}?${searchParams}`, {
         method: 'DELETE',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
       });
       if (response.ok) {
         context.dispatch('GET_CREW_LIST');
-        Vue.$toast.success('Deleted crew member!');
+        VueToast.$toast.success('Deleted crew member!');
       } else {
         log.error('Unable to delete crew member');
-        Vue.$toast.error('Unable to delete crew member');
+        VueToast.$toast.error('Unable to delete crew member');
       }
     },
-    async UPDATE_CREW_MEMBER(context, crewMember) {
+    async UPDATE_CREW_MEMBER(context, crewMember: Partial<Crew>) {
       const response = await fetch(`${makeURL('/api/v1/show/stage/crew')}`, {
         method: 'PATCH',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(crewMember),
       });
       if (response.ok) {
         context.dispatch('GET_CREW_LIST');
-        Vue.$toast.success('Updated crew member!');
+        VueToast.$toast.success('Updated crew member!');
       } else {
         log.error('Unable to edit crew member');
-        Vue.$toast.error('Unable to edit crew member');
+        VueToast.$toast.error('Unable to edit crew member');
       }
     },
     async GET_SCENERY_TYPES(context) {
@@ -107,58 +128,47 @@ export default {
         log.error('Unable to get scenery types list');
       }
     },
-    async ADD_SCENERY_TYPE(context, sceneryType) {
+    async ADD_SCENERY_TYPE(context, sceneryType: Partial<SceneryType>) {
       const response = await fetch(`${makeURL('/api/v1/show/stage/scenery/types')}`, {
         method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(sceneryType),
       });
       if (response.ok) {
         context.dispatch('GET_SCENERY_TYPES');
-        Vue.$toast.success('Added new scenery type!');
+        VueToast.$toast.success('Added new scenery type!');
       } else {
         log.error('Unable to add new scenery type');
-        Vue.$toast.error('Unable to add new scenery type');
+        VueToast.$toast.error('Unable to add new scenery type');
       }
     },
-    async DELETE_SCENERY_TYPE(context, sceneryTypeId) {
-      const searchParams = new URLSearchParams({
-        id: sceneryTypeId,
-      });
+    async DELETE_SCENERY_TYPE(context, sceneryTypeId: number) {
+      const searchParams = new URLSearchParams({ id: String(sceneryTypeId) });
       const response = await fetch(
         `${makeURL('/api/v1/show/stage/scenery/types')}?${searchParams}`,
-        {
-          method: 'DELETE',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-        }
+        { method: 'DELETE', headers: { 'Content-Type': 'application/json' } }
       );
       if (response.ok) {
         context.dispatch('GET_SCENERY_TYPES');
         context.dispatch('GET_SCENERY_LIST');
-        Vue.$toast.success('Deleted scenery type!');
+        VueToast.$toast.success('Deleted scenery type!');
       } else {
         log.error('Unable to delete scenery type');
-        Vue.$toast.error('Unable to delete scenery type');
+        VueToast.$toast.error('Unable to delete scenery type');
       }
     },
-    async UPDATE_SCENERY_TYPE(context, sceneryType) {
+    async UPDATE_SCENERY_TYPE(context, sceneryType: Partial<SceneryType>) {
       const response = await fetch(`${makeURL('/api/v1/show/stage/scenery/types')}`, {
         method: 'PATCH',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(sceneryType),
       });
       if (response.ok) {
         context.dispatch('GET_SCENERY_TYPES');
-        Vue.$toast.success('Updated scenery type!');
+        VueToast.$toast.success('Updated scenery type!');
       } else {
         log.error('Unable to edit scenery type');
-        Vue.$toast.error('Unable to edit scenery type');
+        VueToast.$toast.error('Unable to edit scenery type');
       }
     },
     async GET_SCENERY_LIST(context) {
@@ -170,54 +180,46 @@ export default {
         log.error('Unable to get scenery list');
       }
     },
-    async ADD_SCENERY(context, sceneryMember) {
+    async ADD_SCENERY(context, sceneryMember: Partial<Scenery>) {
       const response = await fetch(`${makeURL('/api/v1/show/stage/scenery')}`, {
         method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(sceneryMember),
       });
       if (response.ok) {
         context.dispatch('GET_SCENERY_LIST');
-        Vue.$toast.success('Added new scenery member!');
+        VueToast.$toast.success('Added new scenery member!');
       } else {
         log.error('Unable to add new scenery member');
-        Vue.$toast.error('Unable to add new scenery member');
+        VueToast.$toast.error('Unable to add new scenery member');
       }
     },
-    async DELETE_SCENERY(context, sceneryId) {
-      const searchParams = new URLSearchParams({
-        id: sceneryId,
-      });
+    async DELETE_SCENERY(context, sceneryId: number) {
+      const searchParams = new URLSearchParams({ id: String(sceneryId) });
       const response = await fetch(`${makeURL('/api/v1/show/stage/scenery')}?${searchParams}`, {
         method: 'DELETE',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
       });
       if (response.ok) {
         context.dispatch('GET_SCENERY_LIST');
-        Vue.$toast.success('Deleted scenery member!');
+        VueToast.$toast.success('Deleted scenery member!');
       } else {
         log.error('Unable to delete scenery member');
-        Vue.$toast.error('Unable to delete scenery member');
+        VueToast.$toast.error('Unable to delete scenery member');
       }
     },
-    async UPDATE_SCENERY(context, sceneryMember) {
+    async UPDATE_SCENERY(context, sceneryMember: Partial<Scenery>) {
       const response = await fetch(`${makeURL('/api/v1/show/stage/scenery')}`, {
         method: 'PATCH',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(sceneryMember),
       });
       if (response.ok) {
         context.dispatch('GET_SCENERY_LIST');
-        Vue.$toast.success('Updated scenery member!');
+        VueToast.$toast.success('Updated scenery member!');
       } else {
         log.error('Unable to edit scenery member');
-        Vue.$toast.error('Unable to edit scenery member');
+        VueToast.$toast.error('Unable to edit scenery member');
       }
     },
     async GET_PROP_TYPES(context) {
@@ -229,55 +231,47 @@ export default {
         log.error('Unable to get prop types list');
       }
     },
-    async ADD_PROP_TYPE(context, propType) {
+    async ADD_PROP_TYPE(context, propType: Partial<PropType>) {
       const response = await fetch(`${makeURL('/api/v1/show/stage/props/types')}`, {
         method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(propType),
       });
       if (response.ok) {
         context.dispatch('GET_PROP_TYPES');
-        Vue.$toast.success('Added new prop type!');
+        VueToast.$toast.success('Added new prop type!');
       } else {
         log.error('Unable to add new prop type');
-        Vue.$toast.error('Unable to add new prop type');
+        VueToast.$toast.error('Unable to add new prop type');
       }
     },
-    async DELETE_PROP_TYPE(context, propTypeId) {
-      const searchParams = new URLSearchParams({
-        id: propTypeId,
-      });
+    async DELETE_PROP_TYPE(context, propTypeId: number) {
+      const searchParams = new URLSearchParams({ id: String(propTypeId) });
       const response = await fetch(`${makeURL('/api/v1/show/stage/props/types')}?${searchParams}`, {
         method: 'DELETE',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
       });
       if (response.ok) {
         context.dispatch('GET_PROP_TYPES');
         context.dispatch('GET_PROPS_LIST');
-        Vue.$toast.success('Deleted prop type!');
+        VueToast.$toast.success('Deleted prop type!');
       } else {
         log.error('Unable to delete prop type');
-        Vue.$toast.error('Unable to delete prop type');
+        VueToast.$toast.error('Unable to delete prop type');
       }
     },
-    async UPDATE_PROP_TYPE(context, propType) {
+    async UPDATE_PROP_TYPE(context, propType: Partial<PropType>) {
       const response = await fetch(`${makeURL('/api/v1/show/stage/props/types')}`, {
         method: 'PATCH',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(propType),
       });
       if (response.ok) {
         context.dispatch('GET_PROP_TYPES');
-        Vue.$toast.success('Updated prop type!');
+        VueToast.$toast.success('Updated prop type!');
       } else {
         log.error('Unable to edit prop type');
-        Vue.$toast.error('Unable to edit prop type');
+        VueToast.$toast.error('Unable to edit prop type');
       }
     },
     async GET_PROPS_LIST(context) {
@@ -289,54 +283,46 @@ export default {
         log.error('Unable to get props list');
       }
     },
-    async ADD_PROP(context, propsMember) {
+    async ADD_PROP(context, propsMember: Partial<Props>) {
       const response = await fetch(`${makeURL('/api/v1/show/stage/props')}`, {
         method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(propsMember),
       });
       if (response.ok) {
         context.dispatch('GET_PROPS_LIST');
-        Vue.$toast.success('Added new props member!');
+        VueToast.$toast.success('Added new props member!');
       } else {
         log.error('Unable to add new props member');
-        Vue.$toast.error('Unable to add new props member');
+        VueToast.$toast.error('Unable to add new props member');
       }
     },
-    async DELETE_PROP(context, propsId) {
-      const searchParams = new URLSearchParams({
-        id: propsId,
-      });
+    async DELETE_PROP(context, propsId: number) {
+      const searchParams = new URLSearchParams({ id: String(propsId) });
       const response = await fetch(`${makeURL('/api/v1/show/stage/props')}?${searchParams}`, {
         method: 'DELETE',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
       });
       if (response.ok) {
         context.dispatch('GET_PROPS_LIST');
-        Vue.$toast.success('Deleted props member!');
+        VueToast.$toast.success('Deleted props member!');
       } else {
         log.error('Unable to delete props member');
-        Vue.$toast.error('Unable to delete props member');
+        VueToast.$toast.error('Unable to delete props member');
       }
     },
-    async UPDATE_PROP(context, propsMember) {
+    async UPDATE_PROP(context, propsMember: Partial<Props>) {
       const response = await fetch(`${makeURL('/api/v1/show/stage/props')}`, {
         method: 'PATCH',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(propsMember),
       });
       if (response.ok) {
         context.dispatch('GET_PROPS_LIST');
-        Vue.$toast.success('Updated props member!');
+        VueToast.$toast.success('Updated props member!');
       } else {
         log.error('Unable to edit props member');
-        Vue.$toast.error('Unable to edit props member');
+        VueToast.$toast.error('Unable to edit props member');
       }
     },
     async GET_PROPS_ALLOCATIONS(context) {
@@ -348,41 +334,32 @@ export default {
         log.error('Unable to get props allocations');
       }
     },
-    async ADD_PROPS_ALLOCATION(context, allocation) {
+    async ADD_PROPS_ALLOCATION(context, allocation: Partial<PropsAllocation>) {
       const response = await fetch(`${makeURL('/api/v1/show/stage/props/allocations')}`, {
         method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(allocation),
       });
       if (response.ok) {
         context.dispatch('GET_PROPS_ALLOCATIONS');
-        Vue.$toast.success('Added prop allocation!');
+        VueToast.$toast.success('Added prop allocation!');
       } else {
         log.error('Unable to add prop allocation');
-        Vue.$toast.error('Unable to add prop allocation');
+        VueToast.$toast.error('Unable to add prop allocation');
       }
     },
-    async DELETE_PROPS_ALLOCATION(context, allocationId) {
-      const searchParams = new URLSearchParams({
-        id: allocationId,
-      });
+    async DELETE_PROPS_ALLOCATION(context, allocationId: number) {
+      const searchParams = new URLSearchParams({ id: String(allocationId) });
       const response = await fetch(
         `${makeURL('/api/v1/show/stage/props/allocations')}?${searchParams}`,
-        {
-          method: 'DELETE',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-        }
+        { method: 'DELETE', headers: { 'Content-Type': 'application/json' } }
       );
       if (response.ok) {
         context.dispatch('GET_PROPS_ALLOCATIONS');
-        Vue.$toast.success('Deleted prop allocation!');
+        VueToast.$toast.success('Deleted prop allocation!');
       } else {
         log.error('Unable to delete prop allocation');
-        Vue.$toast.error('Unable to delete prop allocation');
+        VueToast.$toast.error('Unable to delete prop allocation');
       }
     },
     async GET_SCENERY_ALLOCATIONS(context) {
@@ -394,41 +371,32 @@ export default {
         log.error('Unable to get scenery allocations');
       }
     },
-    async ADD_SCENERY_ALLOCATION(context, allocation) {
+    async ADD_SCENERY_ALLOCATION(context, allocation: Partial<SceneryAllocation>) {
       const response = await fetch(`${makeURL('/api/v1/show/stage/scenery/allocations')}`, {
         method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(allocation),
       });
       if (response.ok) {
         context.dispatch('GET_SCENERY_ALLOCATIONS');
-        Vue.$toast.success('Added scenery allocation!');
+        VueToast.$toast.success('Added scenery allocation!');
       } else {
         log.error('Unable to add scenery allocation');
-        Vue.$toast.error('Unable to add scenery allocation');
+        VueToast.$toast.error('Unable to add scenery allocation');
       }
     },
-    async DELETE_SCENERY_ALLOCATION(context, allocationId) {
-      const searchParams = new URLSearchParams({
-        id: allocationId,
-      });
+    async DELETE_SCENERY_ALLOCATION(context, allocationId: number) {
+      const searchParams = new URLSearchParams({ id: String(allocationId) });
       const response = await fetch(
         `${makeURL('/api/v1/show/stage/scenery/allocations')}?${searchParams}`,
-        {
-          method: 'DELETE',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-        }
+        { method: 'DELETE', headers: { 'Content-Type': 'application/json' } }
       );
       if (response.ok) {
         context.dispatch('GET_SCENERY_ALLOCATIONS');
-        Vue.$toast.success('Deleted scenery allocation!');
+        VueToast.$toast.success('Deleted scenery allocation!');
       } else {
         log.error('Unable to delete scenery allocation');
-        Vue.$toast.error('Unable to delete scenery allocation');
+        VueToast.$toast.error('Unable to delete scenery allocation');
       }
     },
     async GET_CREW_ASSIGNMENTS(context) {
@@ -440,62 +408,55 @@ export default {
         log.error('Unable to get crew assignments');
       }
     },
-    async ADD_CREW_ASSIGNMENT(context, assignment) {
+    async ADD_CREW_ASSIGNMENT(context, assignment: Partial<CrewAssignment>) {
       const response = await fetch(`${makeURL('/api/v1/show/stage/crew/assignments')}`, {
         method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(assignment),
       });
       if (response.ok) {
         context.dispatch('GET_CREW_ASSIGNMENTS');
-        Vue.$toast.success('Added crew assignment!');
+        VueToast.$toast.success('Added crew assignment!');
         return { success: true };
       } else {
         const errorData = await response.json().catch(() => ({}));
         const errorMsg = errorData.message || 'Unable to add crew assignment';
         log.error(errorMsg);
-        Vue.$toast.error(errorMsg);
+        VueToast.$toast.error(errorMsg);
         return { success: false, error: errorMsg };
       }
     },
-    async DELETE_CREW_ASSIGNMENT(context, assignmentId) {
-      const searchParams = new URLSearchParams({ id: assignmentId });
+    async DELETE_CREW_ASSIGNMENT(context, assignmentId: number) {
+      const searchParams = new URLSearchParams({ id: String(assignmentId) });
       const response = await fetch(
         `${makeURL('/api/v1/show/stage/crew/assignments')}?${searchParams}`,
-        {
-          method: 'DELETE',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-        }
+        { method: 'DELETE', headers: { 'Content-Type': 'application/json' } }
       );
       if (response.ok) {
         context.dispatch('GET_CREW_ASSIGNMENTS');
-        Vue.$toast.success('Deleted crew assignment!');
+        VueToast.$toast.success('Deleted crew assignment!');
       } else {
         const errorData = await response.json().catch(() => ({}));
         const errorMsg = errorData.message || 'Unable to delete crew assignment';
         log.error(errorMsg);
-        Vue.$toast.error(errorMsg);
+        VueToast.$toast.error(errorMsg);
       }
     },
   },
   getters: {
-    CREW_LIST(state) {
+    CREW_LIST(state: StageState) {
       return state.crewList;
     },
-    PROP_BY_ID: (state) => (propId) => {
+    PROP_BY_ID: (state: StageState) => (propId: number | null) => {
       if (propId == null) return null;
       return state.propsList.find((p) => p.id === propId) || null;
     },
-    SCENERY_BY_ID: (state) => (sceneryId) => {
+    SCENERY_BY_ID: (state: StageState) => (sceneryId: number | null) => {
       if (sceneryId == null) return null;
       return state.sceneryList.find((s) => s.id === sceneryId) || null;
     },
-    PROPS_ALLOCATIONS_BY_ITEM(state) {
-      const result = {};
+    PROPS_ALLOCATIONS_BY_ITEM(state: StageState) {
+      const result: Record<number, PropsAllocation[]> = {};
       state.propsAllocations.forEach((alloc) => {
         if (!result[alloc.props_id]) {
           result[alloc.props_id] = [];
@@ -504,8 +465,8 @@ export default {
       });
       return result;
     },
-    SCENERY_ALLOCATIONS_BY_ITEM(state) {
-      const result = {};
+    SCENERY_ALLOCATIONS_BY_ITEM(state: StageState) {
+      const result: Record<number, SceneryAllocation[]> = {};
       state.sceneryAllocations.forEach((alloc) => {
         if (!result[alloc.scenery_id]) {
           result[alloc.scenery_id] = [];
@@ -514,61 +475,57 @@ export default {
       });
       return result;
     },
-    SCENERY_TYPES(state) {
+    SCENERY_TYPES(state: StageState) {
       return state.sceneryTypes;
     },
-    SCENERY_TYPES_DICT(state) {
+    SCENERY_TYPES_DICT(state: StageState) {
       return Object.fromEntries(
         state.sceneryTypes.map((sceneryType) => [sceneryType.id, sceneryType])
       );
     },
-    SCENERY_TYPE_BY_ID: (state, getters) => (sceneryTypeId) => {
-      if (sceneryTypeId == null) {
-        return null;
-      }
+    SCENERY_TYPE_BY_ID: (_state: StageState, getters) => (sceneryTypeId: number | null) => {
+      if (sceneryTypeId == null) return null;
       const sceneryTypeStr = sceneryTypeId.toString();
       if (Object.keys(getters.SCENERY_TYPES_DICT).includes(sceneryTypeStr)) {
         return getters.SCENERY_TYPES_DICT[sceneryTypeStr];
       }
       return null;
     },
-    SCENERY_LIST(state) {
+    SCENERY_LIST(state: StageState) {
       return state.sceneryList;
     },
-    PROP_TYPES(state) {
+    PROP_TYPES(state: StageState) {
       return state.propTypes;
     },
-    PROP_TYPES_DICT(state) {
+    PROP_TYPES_DICT(state: StageState) {
       return Object.fromEntries(state.propTypes.map((propType) => [propType.id, propType]));
     },
-    PROP_TYPE_BY_ID: (state, getters) => (propTypeId) => {
-      if (propTypeId == null) {
-        return null;
-      }
+    PROP_TYPE_BY_ID: (_state: StageState, getters) => (propTypeId: number | null) => {
+      if (propTypeId == null) return null;
       const propTypeStr = propTypeId.toString();
       if (Object.keys(getters.PROP_TYPES_DICT).includes(propTypeStr)) {
         return getters.PROP_TYPES_DICT[propTypeStr];
       }
       return null;
     },
-    PROPS_LIST(state) {
+    PROPS_LIST(state: StageState) {
       return state.propsList;
     },
-    PROPS_ALLOCATIONS(state) {
+    PROPS_ALLOCATIONS(state: StageState) {
       return state.propsAllocations;
     },
-    SCENERY_ALLOCATIONS(state) {
+    SCENERY_ALLOCATIONS(state: StageState) {
       return state.sceneryAllocations;
     },
-    CREW_ASSIGNMENTS(state) {
+    CREW_ASSIGNMENTS(state: StageState) {
       return state.crewAssignments;
     },
-    CREW_MEMBER_BY_ID: (state) => (crewId) => {
+    CREW_MEMBER_BY_ID: (state: StageState) => (crewId: number | null) => {
       if (crewId == null) return null;
       return state.crewList.find((c) => c.id === crewId) || null;
     },
-    CREW_ASSIGNMENTS_BY_PROP(state) {
-      const result = {};
+    CREW_ASSIGNMENTS_BY_PROP(state: StageState) {
+      const result: Record<number, CrewAssignment[]> = {};
       state.crewAssignments.forEach((assignment) => {
         if (assignment.prop_id != null) {
           if (!result[assignment.prop_id]) {
@@ -579,8 +536,8 @@ export default {
       });
       return result;
     },
-    CREW_ASSIGNMENTS_BY_SCENERY(state) {
-      const result = {};
+    CREW_ASSIGNMENTS_BY_SCENERY(state: StageState) {
+      const result: Record<number, CrewAssignment[]> = {};
       state.crewAssignments.forEach((assignment) => {
         if (assignment.scenery_id != null) {
           if (!result[assignment.scenery_id]) {
@@ -591,8 +548,8 @@ export default {
       });
       return result;
     },
-    CREW_ASSIGNMENTS_BY_CREW(state) {
-      const result = {};
+    CREW_ASSIGNMENTS_BY_CREW(state: StageState) {
+      const result: Record<number, CrewAssignment[]> = {};
       state.crewAssignments.forEach((assignment) => {
         if (!result[assignment.crew_id]) {
           result[assignment.crew_id] = [];
@@ -601,8 +558,8 @@ export default {
       });
       return result;
     },
-    CREW_ASSIGNMENTS_BY_SCENE(state) {
-      const result = {};
+    CREW_ASSIGNMENTS_BY_SCENE(state: StageState) {
+      const result: Record<number, CrewAssignment[]> = {};
       state.crewAssignments.forEach((assignment) => {
         if (!result[assignment.scene_id]) {
           result[assignment.scene_id] = [];
@@ -613,3 +570,5 @@ export default {
     },
   },
 };
+
+export default module;
diff --git a/client/src/store/modules/system.js b/client/src/store/modules/system.ts
similarity index 72%
rename from client/src/store/modules/system.js
rename to client/src/store/modules/system.ts
index 2cb19096..991d444d 100644
--- a/client/src/store/modules/system.js
+++ b/client/src/store/modules/system.ts
@@ -1,9 +1,21 @@
 import log from 'loglevel';
+import type { Module } from 'vuex';
 
 import router from '@/router';
 import { makeURL } from '@/js/utils';
+import type { RootState } from '@/types/store';
+import type { Show } from '@/types/api/show';
+import type { SystemSettings } from '@/types/api/settings';
 
-export default {
+interface SystemState {
+  settings: SystemSettings | Record<string, never>;
+  availableShows: Show[];
+  rawSettings: Record<string, unknown>;
+  rbacRoles: Array<{ key: string; value: number }>;
+  settingsCategories: Record<string, unknown>;
+}
+
+const module: Module<SystemState, RootState> = {
   state: {
     settings: {},
     availableShows: [],
@@ -12,19 +24,19 @@ export default {
     settingsCategories: {},
   },
   mutations: {
-    UPDATE_SETTINGS(state, settings) {
+    UPDATE_SETTINGS(state: SystemState, settings: SystemSettings) {
       state.settings = settings;
     },
-    UPDATE_SHOWS(state, shows) {
+    UPDATE_SHOWS(state: SystemState, shows: Show[]) {
       state.availableShows = shows;
     },
-    UPDATE_RAW_SETTINGS(state, settings) {
+    UPDATE_RAW_SETTINGS(state: SystemState, settings: Record<string, unknown>) {
       state.rawSettings = settings;
     },
-    UPDATE_RBAC_ROLES(state, rbac) {
+    UPDATE_RBAC_ROLES(state: SystemState, rbac: Array<{ key: string; value: number }>) {
       state.rbacRoles = rbac;
     },
-    UPDATE_SETTINGS_CATEGORIES(state, categories) {
+    UPDATE_SETTINGS_CATEGORIES(state: SystemState, categories: Record<string, unknown>) {
       state.settingsCategories = categories;
     },
   },
@@ -56,7 +68,7 @@ export default {
         log.error('Unable to fetch settings');
       }
     },
-    async UPDATE_SETTINGS(context, payload) {
+    async UPDATE_SETTINGS(context, payload: SystemSettings) {
       context.commit('UPDATE_SETTINGS', payload);
       await context.dispatch('SETTINGS_CHANGED');
     },
@@ -65,7 +77,7 @@ export default {
 
       if (context.state.settings.current_show) {
         const currShow = context.state.settings.current_show;
-        if (!context.state.currentShow || context.state.currentShow.id !== currShow) {
+        if (!context.rootState.currentShow || context.rootState.currentShow.id !== currShow) {
           const response = await fetch(`${makeURL('/api/v1/show')}`);
           if (response.ok) {
             const show = await response.json();
@@ -103,20 +115,22 @@ export default {
     },
   },
   getters: {
-    AVAILABLE_SHOWS(state) {
+    AVAILABLE_SHOWS(state: SystemState) {
       return state.availableShows;
     },
-    SETTINGS(state) {
+    SETTINGS(state: SystemState) {
       return state.settings;
     },
-    RAW_SETTINGS(state) {
+    RAW_SETTINGS(state: SystemState) {
       return state.rawSettings;
     },
-    RBAC_ROLES(state) {
+    RBAC_ROLES(state: SystemState) {
       return state.rbacRoles;
     },
-    SETTINGS_CATEGORIES(state) {
+    SETTINGS_CATEGORIES(state: SystemState) {
       return state.settingsCategories;
     },
   },
 };
+
+export default module;
diff --git a/client/src/store/modules/user/settings.js b/client/src/store/modules/user/settings.ts
similarity index 59%
rename from client/src/store/modules/user/settings.js
rename to client/src/store/modules/user/settings.ts
index c7289fe8..1b5a5c2c 100644
--- a/client/src/store/modules/user/settings.js
+++ b/client/src/store/modules/user/settings.ts
@@ -1,22 +1,39 @@
 import Vue from 'vue';
 import log from 'loglevel';
+import type { Module } from 'vuex';
 
 import { makeURL } from '@/js/utils';
+import type { RootState } from '@/types/store';
+import type { StageDirectionStyle } from '@/types/api/script';
+import type { CueColourOverride } from '@/types/api/user';
 
-export default {
+interface SettingsState {
+  userSettings: Record<string, unknown>;
+  stageDirectionStyleOverrides: StageDirectionStyle[];
+  cueColourOverrides: CueColourOverride[];
+}
+
+const VueToast = Vue as typeof Vue & {
+  $toast: {
+    success: (m: string) => void;
+    error: (m: string) => void;
+  };
+};
+
+const module: Module<SettingsState, RootState> = {
   state: {
     userSettings: {},
     stageDirectionStyleOverrides: [],
     cueColourOverrides: [],
   },
   mutations: {
-    SET_USER_SETTINGS(state, settings) {
+    SET_USER_SETTINGS(state: SettingsState, settings: Record<string, unknown>) {
       state.userSettings = settings;
     },
-    SET_STAGE_DIRECTION_STYLE_OVERRIDES(state, overrides) {
+    SET_STAGE_DIRECTION_STYLE_OVERRIDES(state: SettingsState, overrides: StageDirectionStyle[]) {
       state.stageDirectionStyleOverrides = overrides;
     },
-    SET_CUE_COLOUR_OVERRIDES(state, overrides) {
+    SET_CUE_COLOUR_OVERRIDES(state: SettingsState, overrides: CueColourOverride[]) {
       state.cueColourOverrides = overrides;
     },
   },
@@ -37,12 +54,7 @@ export default {
     async GET_STAGE_DIRECTION_STYLE_OVERRIDES(context) {
       const response = await fetch(
         `${makeURL('/api/v1/user/settings/stage_direction_overrides')}`,
-        {
-          method: 'GET',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-        }
+        { method: 'GET', headers: { 'Content-Type': 'application/json' } }
       );
       if (response.ok) {
         const respJson = await response.json();
@@ -51,68 +63,57 @@ export default {
         log.error('Unable to load stage direction style overrides');
       }
     },
-    async ADD_STAGE_DIRECTION_STYLE_OVERRIDE(context, style) {
+    async ADD_STAGE_DIRECTION_STYLE_OVERRIDE(context, style: StageDirectionStyle) {
       const response = await fetch(
         `${makeURL('/api/v1/user/settings/stage_direction_overrides')}`,
         {
           method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-          },
+          headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify(style),
         }
       );
       if (response.ok) {
         context.dispatch('GET_STAGE_DIRECTION_STYLE_OVERRIDES');
-        Vue.$toast.success('Added new stage direction style override!');
+        VueToast.$toast.success('Added new stage direction style override!');
       } else {
         log.error('Unable to add new stage direction style override');
-        Vue.$toast.error('Unable to add new stage direction style override');
+        VueToast.$toast.error('Unable to add new stage direction style override');
       }
     },
-    async DELETE_STAGE_DIRECTION_STYLE_OVERRIDE(context, styleId) {
+    async DELETE_STAGE_DIRECTION_STYLE_OVERRIDE(context, styleId: number) {
       const response = await fetch(
         `${makeURL('/api/v1/user/settings/stage_direction_overrides')}?id=${styleId}`,
-        {
-          method: 'DELETE',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-        }
+        { method: 'DELETE', headers: { 'Content-Type': 'application/json' } }
       );
       if (response.ok) {
         context.dispatch('GET_STAGE_DIRECTION_STYLE_OVERRIDES');
-        Vue.$toast.success('Deleted stage direction style override!');
+        VueToast.$toast.success('Deleted stage direction style override!');
       } else {
         log.error('Unable to delete stage direction style override');
-        Vue.$toast.error('Unable to delete stage direction style override');
+        VueToast.$toast.error('Unable to delete stage direction style override');
       }
     },
-    async UPDATE_STAGE_DIRECTION_STYLE_OVERRIDE(context, style) {
+    async UPDATE_STAGE_DIRECTION_STYLE_OVERRIDE(context, style: StageDirectionStyle) {
       const response = await fetch(
         `${makeURL('/api/v1/user/settings/stage_direction_overrides')}`,
         {
           method: 'PATCH',
-          headers: {
-            'Content-Type': 'application/json',
-          },
+          headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify(style),
         }
       );
       if (response.ok) {
         context.dispatch('GET_STAGE_DIRECTION_STYLE_OVERRIDES');
-        Vue.$toast.success('Updated stage direction style override!');
+        VueToast.$toast.success('Updated stage direction style override!');
       } else {
         log.error('Unable to edit stage direction style override');
-        Vue.$toast.error('Unable to edit stage direction style override');
+        VueToast.$toast.error('Unable to edit stage direction style override');
       }
     },
     async GET_CUE_COLOUR_OVERRIDES(context) {
       const response = await fetch(`${makeURL('/api/v1/user/settings/cue_colour_overrides')}`, {
         method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
       });
       if (response.ok) {
         const respJson = await response.json();
@@ -121,66 +122,59 @@ export default {
         log.error('Unable to load cue colour overrides');
       }
     },
-    async ADD_CUE_COLOUR_OVERRIDE(context, override) {
+    async ADD_CUE_COLOUR_OVERRIDE(context, override: CueColourOverride) {
       const response = await fetch(`${makeURL('/api/v1/user/settings/cue_colour_overrides')}`, {
         method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(override),
       });
       if (response.ok) {
         context.dispatch('GET_CUE_COLOUR_OVERRIDES');
-        Vue.$toast.success('Added new cue colour override!');
+        VueToast.$toast.success('Added new cue colour override!');
       } else {
         log.error('Unable to add new cue colour override');
-        Vue.$toast.error('Unable to add new cue colour override');
+        VueToast.$toast.error('Unable to add new cue colour override');
       }
     },
-    async DELETE_CUE_COLOUR_OVERRIDE(context, overrideId) {
+    async DELETE_CUE_COLOUR_OVERRIDE(context, overrideId: number) {
       const response = await fetch(
         `${makeURL(`/api/v1/user/settings/cue_colour_overrides?id=${overrideId}`)}`,
-        {
-          method: 'DELETE',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-        }
+        { method: 'DELETE', headers: { 'Content-Type': 'application/json' } }
       );
       if (response.ok) {
         context.dispatch('GET_CUE_COLOUR_OVERRIDES');
-        Vue.$toast.success('Deleted cue colour override!');
+        VueToast.$toast.success('Deleted cue colour override!');
       } else {
         log.error('Unable to delete cue colour override');
-        Vue.$toast.error('Unable to delete cue colour override');
+        VueToast.$toast.error('Unable to delete cue colour override');
       }
     },
-    async UPDATE_CUE_COLOUR_OVERRIDE(context, override) {
+    async UPDATE_CUE_COLOUR_OVERRIDE(context, override: CueColourOverride) {
       const response = await fetch(`${makeURL('/api/v1/user/settings/cue_colour_overrides')}`, {
         method: 'PATCH',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(override),
       });
       if (response.ok) {
         context.dispatch('GET_CUE_COLOUR_OVERRIDES');
-        Vue.$toast.success('Updated cue colour override!');
+        VueToast.$toast.success('Updated cue colour override!');
       } else {
         log.error('Unable to edit cue colour override');
-        Vue.$toast.error('Unable to edit cue colour override');
+        VueToast.$toast.error('Unable to edit cue colour override');
       }
     },
   },
   getters: {
-    USER_SETTINGS(state) {
+    USER_SETTINGS(state: SettingsState) {
       return state.userSettings;
     },
-    STAGE_DIRECTION_STYLE_OVERRIDES(state) {
+    STAGE_DIRECTION_STYLE_OVERRIDES(state: SettingsState) {
       return state.stageDirectionStyleOverrides;
     },
-    CUE_COLOUR_OVERRIDES(state) {
+    CUE_COLOUR_OVERRIDES(state: SettingsState) {
       return state.cueColourOverrides;
     },
   },
 };
+
+export default module;
diff --git a/client/src/store/modules/user/user.js b/client/src/store/modules/user/user.ts
similarity index 76%
rename from client/src/store/modules/user/user.js
rename to client/src/store/modules/user/user.ts
index 31185fa8..a70089e1 100644
--- a/client/src/store/modules/user/user.js
+++ b/client/src/store/modules/user/user.ts
@@ -1,12 +1,27 @@
 import Vue from 'vue';
 import log from 'loglevel';
 import { isEmpty } from 'lodash';
+import type { Module } from 'vuex';
 
 import router from '@/router';
 import { makeURL } from '@/js/utils';
+import type { RootState } from '@/types/store';
+import type { User } from '@/types/api/user';
 import settings from './settings';
 
-export default {
+interface UserState {
+  currentUser: User | null;
+  currentRbac: Record<string, [number, number][]> | null;
+  users: User[];
+  authToken: string | null;
+  tokenRefreshInterval: ReturnType<typeof setInterval> | null;
+}
+
+const VueToast = Vue as typeof Vue & {
+  $toast: { success: (m: string) => void; error: (m: string) => void };
+};
+
+const module: Module<UserState, RootState> = {
   state: {
     currentUser: null,
     currentRbac: null,
@@ -15,16 +30,16 @@ export default {
     tokenRefreshInterval: null,
   },
   mutations: {
-    SET_CURRENT_USER(state, user) {
+    SET_CURRENT_USER(state: UserState, user: User | null) {
       state.currentUser = user;
     },
-    SET_USERS(state, users) {
+    SET_USERS(state: UserState, users: User[]) {
       state.users = users;
     },
-    SET_CURRENT_RBAC(state, rbac) {
+    SET_CURRENT_RBAC(state: UserState, rbac: Record<string, [number, number][]> | null) {
       state.currentRbac = rbac;
     },
-    SET_AUTH_TOKEN(state, token) {
+    SET_AUTH_TOKEN(state: UserState, token: string | null) {
       state.authToken = token;
       if (token) {
         localStorage.setItem('digiscript_auth_token', token);
@@ -32,7 +47,10 @@ export default {
         localStorage.removeItem('digiscript_auth_token');
       }
     },
-    SET_TOKEN_REFRESH_INTERVAL(state, intervalId) {
+    SET_TOKEN_REFRESH_INTERVAL(
+      state: UserState,
+      intervalId: ReturnType<typeof setInterval> | null
+    ) {
       if (state.tokenRefreshInterval) {
         clearInterval(state.tokenRefreshInterval);
       }
@@ -50,7 +68,7 @@ export default {
         await context.commit('SET_USERS', users.users);
       } else {
         log.error('Unable to get users');
-        Vue.$toast.error('Unable to fetch users!');
+        VueToast.$toast.error('Unable to fetch users!');
       }
     },
     async CREATE_USER(context, user) {
@@ -61,14 +79,14 @@ export default {
       });
       if (response.ok) {
         await context.dispatch('GET_USERS');
-        Vue.$toast.success('User created!');
+        VueToast.$toast.success('User created!');
       } else {
         const responseBody = await response.json();
         log.error('Unable to create user');
-        Vue.$toast.error(`Unable to create user: ${responseBody.message || 'Unknown error'}`);
+        VueToast.$toast.error(`Unable to create user: ${responseBody.message || 'Unknown error'}`);
       }
     },
-    async DELETE_USER(context, userId) {
+    async DELETE_USER(context, userId: number) {
       const response = await fetch(makeURL('/api/v1/auth/delete'), {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
@@ -76,14 +94,14 @@ export default {
       });
       if (response.ok) {
         await context.dispatch('GET_USERS');
-        Vue.$toast.success('User deleted!');
+        VueToast.$toast.success('User deleted!');
       } else {
         const responseBody = await response.json();
         log.error('Unable to delete user');
-        Vue.$toast.error(`Unable to delete user: ${responseBody.message || 'Unknown error'}`);
+        VueToast.$toast.error(`Unable to delete user: ${responseBody.message || 'Unknown error'}`);
       }
     },
-    async USER_LOGIN(context, user) {
+    async USER_LOGIN(context, user: { username: string; password: string }) {
       const response = await fetch(makeURL('/api/v1/auth/login'), {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
@@ -98,23 +116,21 @@ export default {
         if (data.access_token) {
           await context.commit('SET_AUTH_TOKEN', data.access_token);
         }
-
         await context.dispatch('GET_RBAC_ROLES');
         await context.dispatch('GET_CURRENT_USER');
         await context.dispatch('GET_CURRENT_RBAC');
         await context.dispatch('GET_USER_SETTINGS');
-
         await context.dispatch('AUTHENTICATE_WEBSOCKET');
         await context.dispatch('SETUP_TOKEN_REFRESH');
-        Vue.$toast.success('Successfully logged in!');
+        VueToast.$toast.success('Successfully logged in!');
         return true;
       }
       const responseBody = await response.json();
       log.error('Unable to log in');
-      Vue.$toast.error(`Unable to log in! ${responseBody.message}.`);
+      VueToast.$toast.error(`Unable to log in! ${responseBody.message}.`);
       return false;
     },
-    async TOKEN_REFRESH(context, payload) {
+    async TOKEN_REFRESH(context, payload: { DATA: { access_token: string } }) {
       log.info('Received token refresh from server');
       const newToken = payload.DATA.access_token;
       if (newToken) {
@@ -128,16 +144,13 @@ export default {
         clearInterval(context.state.tokenRefreshInterval);
         context.commit('SET_TOKEN_REFRESH_INTERVAL', null);
       }
-
       const token = context.state.authToken;
-
       await context.commit('SET_AUTH_TOKEN', null);
       await context.commit('SET_CURRENT_USER', null);
       await context.commit('SET_CURRENT_RBAC', null);
       await context.commit('SET_USER_SETTINGS', []);
       await context.commit('SET_STAGE_DIRECTION_STYLE_OVERRIDES', []);
       await context.commit('CLEAR_WS_AUTHENTICATION');
-
       if (token) {
         try {
           const response = await fetch(makeURL('/api/v1/auth/logout'), {
@@ -146,9 +159,7 @@ export default {
               'Content-Type': 'application/json',
               Authorization: `Bearer ${token}`,
             },
-            body: JSON.stringify({
-              session_id: context.rootGetters.INTERNAL_UUID,
-            }),
+            body: JSON.stringify({ session_id: context.rootGetters.INTERNAL_UUID }),
           });
           if (!response.ok) {
             log.error('Logout response was not OK, but local state was cleared');
@@ -159,7 +170,7 @@ export default {
       } else {
         log.info('Logout completed without API call - token already invalid');
       }
-      Vue.$toast.success('Successfully logged out!');
+      VueToast.$toast.success('Successfully logged out!');
       if (router.currentRoute.path !== '/') {
         router.push('/');
       }
@@ -215,10 +226,9 @@ export default {
         },
         1000 * 60 * 30
       );
-
       await context.commit('SET_TOKEN_REFRESH_INTERVAL', refreshInterval);
     },
-    async GENERATE_API_TOKEN(context) {
+    async GENERATE_API_TOKEN() {
       const response = await fetch(makeURL('/api/v1/auth/api-token/generate'), {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
@@ -226,53 +236,56 @@ export default {
       });
       if (response.ok) {
         const data = await response.json();
-        Vue.$toast.success('API token generated successfully!');
+        VueToast.$toast.success('API token generated successfully!');
         return data;
       }
       const responseBody = await response.json();
       log.error('Unable to generate API token');
-      Vue.$toast.error(`Unable to generate API token: ${responseBody.message || 'Unknown error'}`);
+      VueToast.$toast.error(
+        `Unable to generate API token: ${responseBody.message || 'Unknown error'}`
+      );
       return null;
     },
-    async REVOKE_API_TOKEN(context) {
+    async REVOKE_API_TOKEN() {
       const response = await fetch(makeURL('/api/v1/auth/api-token/revoke'), {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({}),
       });
       if (response.ok) {
-        Vue.$toast.success('API token revoked successfully!');
+        VueToast.$toast.success('API token revoked successfully!');
         return true;
       }
       const responseBody = await response.json();
       log.error('Unable to revoke API token');
-      Vue.$toast.error(`Unable to revoke API token: ${responseBody.message || 'Unknown error'}`);
+      VueToast.$toast.error(
+        `Unable to revoke API token: ${responseBody.message || 'Unknown error'}`
+      );
       return false;
     },
-    async GET_API_TOKEN(context) {
+    async GET_API_TOKEN() {
       const response = await fetch(makeURL('/api/v1/auth/api-token'), {
         method: 'GET',
       });
       if (response.ok) {
-        const data = await response.json();
-        return data;
+        return response.json();
       }
       log.error('Unable to get API token');
-      Vue.$toast.error('Unable to get API token!');
+      VueToast.$toast.error('Unable to get API token!');
       return null;
     },
   },
   getters: {
-    CURRENT_USER(state) {
+    CURRENT_USER(state: UserState) {
       return state.currentUser;
     },
-    USERS(state) {
+    USERS(state: UserState) {
       return state.users;
     },
-    CURRENT_USER_RBAC(state) {
+    CURRENT_USER_RBAC(state: UserState) {
       return state.currentRbac;
     },
-    AUTH_TOKEN(state) {
+    AUTH_TOKEN(state: UserState) {
       return state.authToken;
     },
   },
@@ -280,3 +293,5 @@ export default {
     settings,
   },
 };
+
+export default module;
diff --git a/client/src/store/modules/websocket.js b/client/src/store/modules/websocket.ts
similarity index 74%
rename from client/src/store/modules/websocket.js
rename to client/src/store/modules/websocket.ts
index 2cb17370..8827132f 100644
--- a/client/src/store/modules/websocket.js
+++ b/client/src/store/modules/websocket.ts
@@ -1,18 +1,42 @@
 import Vue from 'vue';
 import log from 'loglevel';
 import { debounce } from 'lodash';
+import type { Module } from 'vuex';
 
 import router from '@/router';
+import type { RootState } from '@/types/store';
+
+interface WebsocketState {
+  isConnected: boolean;
+  message: string;
+  reconnectError: boolean;
+  internalUUID: string | null;
+  errorCount: number;
+  error: boolean;
+  authenticated: boolean;
+  authenticationInProgress: boolean;
+  pendingAuthentication: boolean;
+  newConnection: boolean;
+  authSucceeded: boolean;
+}
+
+const VueToast = Vue as typeof Vue & {
+  $toast: {
+    success: (m: string) => void;
+    error: (m: string) => void;
+    info: (m: string) => void;
+  };
+};
 
 const settingsToast = debounce(
   () => {
-    Vue.$toast.info('Settings synced from server');
+    VueToast.$toast.info('Settings synced from server');
   },
   1000,
   { leading: true, trailing: false }
 );
 
-export default {
+const module: Module<WebsocketState, RootState> = {
   state: {
     isConnected: false,
     message: '',
@@ -27,29 +51,28 @@ export default {
     authSucceeded: false,
   },
   mutations: {
-    SOCKET_ONOPEN(state, event) {
-      Vue.prototype.$socket = event.currentTarget;
+    SOCKET_ONOPEN(state: WebsocketState, event: Event) {
+      Vue.prototype.$socket = (event as { currentTarget: unknown }).currentTarget;
       state.isConnected = true;
       state.error = false;
       state.reconnectError = false;
       if (state.errorCount !== 0) {
-        Vue.$toast.success(`Websocket reconnected after ${state.errorCount} attempts`);
+        VueToast.$toast.success(`Websocket reconnected after ${state.errorCount} attempts`);
         state.errorCount = 0;
-        if (router.currentRoute !== '/') {
+        if (router.currentRoute.path !== '/') {
           window.location.reload();
         }
       }
     },
-    SOCKET_ONCLOSE(state, event) {
+    SOCKET_ONCLOSE(state: WebsocketState) {
       state.isConnected = false;
       state.authenticated = false;
     },
-    SOCKET_ONERROR(state, event) {
+    SOCKET_ONERROR(state: WebsocketState) {
       state.error = true;
     },
-    // default handler called for all methods
-    SOCKET_ONMESSAGE(state, message) {
-      state.message = message;
+    SOCKET_ONMESSAGE(state: WebsocketState, message: { OP: string; DATA: unknown }) {
+      state.message = JSON.stringify(message);
       switch (message.OP) {
         case 'SET_UUID':
           if (state.internalUUID != null) {
@@ -60,7 +83,7 @@ export default {
             });
           } else {
             log.debug('Connecting to WebSocket as new client, with UUID:', message.DATA);
-            state.internalUUID = message.DATA;
+            state.internalUUID = message.DATA as string;
             state.newConnection = true;
           }
           if (!state.authenticated && !state.authenticationInProgress) {
@@ -88,12 +111,12 @@ export default {
         case 'GET_CAST_LIST':
           break;
         case 'START_SHOW':
-          if (router.currentRoute !== '/live') {
+          if (router.currentRoute.path !== '/live') {
             router.push('/live');
           }
           break;
         case 'STOP_SHOW':
-          if (router.currentRoute !== '/') {
+          if (router.currentRoute.path !== '/') {
             router.push('/');
           }
           break;
@@ -104,32 +127,31 @@ export default {
           log.error(`Unknown OP received from websocket: ${message.OP}`);
       }
     },
-    // mutations for reconnect methods
-    SOCKET_RECONNECT(state, count) {
+    SOCKET_RECONNECT(state: WebsocketState, count: number) {
       if (state.errorCount === 0) {
-        Vue.$toast.error('Websocket connection lost');
+        VueToast.$toast.error('Websocket connection lost');
       }
       state.errorCount = count;
       state.authenticated = false;
     },
-    SOCKET_RECONNECT_ERROR(state) {
+    SOCKET_RECONNECT_ERROR(state: WebsocketState) {
       state.reconnectError = true;
     },
-    CLEAR_WS_AUTHENTICATION(state) {
+    CLEAR_WS_AUTHENTICATION(state: WebsocketState) {
       state.authenticated = false;
       state.authSucceeded = false;
       state.pendingAuthentication = true;
     },
-    SET_WS_AUTHENTICATION_IN_PROGRESS(state, value) {
+    SET_WS_AUTHENTICATION_IN_PROGRESS(state: WebsocketState, value: boolean) {
       state.authenticationInProgress = value;
     },
-    CLEAR_PENDING_AUTHENTICATION(state) {
+    CLEAR_PENDING_AUTHENTICATION(state: WebsocketState) {
       state.pendingAuthentication = false;
     },
-    CLEAR_NEW_CONNECTION(state) {
+    CLEAR_NEW_CONNECTION(state: WebsocketState) {
       state.newConnection = false;
     },
-    CLEAR_AUTH_SUCCEEDED(state) {
+    CLEAR_AUTH_SUCCEEDED(state: WebsocketState) {
       state.authSucceeded = false;
     },
   },
@@ -180,7 +202,6 @@ export default {
       log.debug('Sent WebSocket authentication request');
     },
     async HANDLE_WS_AUTH_SUCCESS(context) {
-      // After successful authentication, register as a new client if this is a new connection
       if (context.state.newConnection) {
         if (Vue.prototype.$socket && Vue.prototype.$socket.readyState === WebSocket.OPEN) {
           Vue.prototype.$socket.sendObj({
@@ -209,14 +230,16 @@ export default {
     },
   },
   getters: {
-    WEBSOCKET_HEALTHY(state) {
+    WEBSOCKET_HEALTHY(state: WebsocketState) {
       return !state.error && state.isConnected && !state.reconnectError && state.errorCount === 0;
     },
-    INTERNAL_UUID(state) {
+    INTERNAL_UUID(state: WebsocketState) {
       return state.internalUUID;
     },
-    WEBSOCKET_HAS_PENDING_OPERATIONS(state) {
+    WEBSOCKET_HAS_PENDING_OPERATIONS(state: WebsocketState) {
       return state.pendingAuthentication || state.newConnection || state.authSucceeded;
     },
   },
 };
+
+export default module;
diff --git a/client/src/store/store.js b/client/src/store/store.ts
similarity index 61%
rename from client/src/store/store.js
rename to client/src/store/store.ts
index 06c40d90..248e9433 100644
--- a/client/src/store/store.js
+++ b/client/src/store/store.ts
@@ -5,6 +5,7 @@ import log from 'loglevel';
 
 import { makeURL } from '@/js/utils';
 import { getStorageAdapter } from '@/js/platform';
+import type { Show } from '@/types/api/show';
 import user from '@/store/modules/user/user';
 import websocket from './modules/websocket';
 import system from './modules/system';
@@ -16,12 +17,16 @@ import stage from './modules/stage';
 
 Vue.use(Vuex);
 
-export default new Vuex.Store({
+const VueToast = Vue as typeof Vue & {
+  $toast: { success: (m: string) => void; error: (m: string) => void };
+};
+
+export default new Vuex.Store<{ currentShow: Show | null }>({
   state: {
     currentShow: null,
   },
   mutations: {
-    SET_CURRENT_SHOW(state, currShow) {
+    SET_CURRENT_SHOW(state, currShow: Show | null) {
       state.currentShow = currShow;
     },
   },
@@ -35,20 +40,18 @@ export default new Vuex.Store({
         log.error('Unable to get show details');
       }
     },
-    async UPDATE_SHOW(context, showDetails) {
+    async UPDATE_SHOW(context, showDetails: Partial<Show>) {
       const response = await fetch(`${makeURL('/api/v1/show')}`, {
         method: 'PATCH',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(showDetails),
       });
       if (response.ok) {
         context.dispatch('GET_SHOW_DETAILS');
-        Vue.$toast.success('Updated show!');
+        VueToast.$toast.success('Updated show!');
       } else {
         log.error('Unable to edit show');
-        Vue.$toast.error('Unable to edit show');
+        VueToast.$toast.error('Unable to edit show');
       }
     },
     async SHOW_CHANGED(context) {
@@ -63,136 +66,109 @@ export default new Vuex.Store({
     CURRENT_SHOW(state) {
       return state.currentShow;
     },
-    IS_ADMIN_USER(state, getters) {
+    IS_ADMIN_USER(_state, getters) {
       return getters.CURRENT_USER != null && getters.CURRENT_USER.is_admin;
     },
-    IS_SHOW_EDITOR(state, getters) {
-      if (getters.IS_ADMIN_USER) {
-        return true;
-      }
-      if (getters.RBAC_ROLES.length === 0) {
-        return false;
-      }
+    IS_SHOW_EDITOR(_state, getters) {
+      if (getters.IS_ADMIN_USER) return true;
+      if (getters.RBAC_ROLES.length === 0) return false;
       if (
         getters.CURRENT_USER_RBAC == null ||
         !Object.keys(getters.CURRENT_USER_RBAC).includes('shows')
       ) {
         return false;
       }
-      const writeMask = getters.RBAC_ROLES.find((x) => x.key === 'WRITE').value;
+      const writeMask = getters.RBAC_ROLES.find((x: { key: string }) => x.key === 'WRITE').value;
       return (
         getters.CURRENT_USER != null && (getters.CURRENT_USER_RBAC.shows[0][1] & writeMask) !== 0
       );
     },
-    IS_SHOW_READER(state, getters) {
-      if (getters.IS_ADMIN_USER) {
-        return true;
-      }
-      if (getters.RBAC_ROLES.length === 0) {
-        return false;
-      }
+    IS_SHOW_READER(_state, getters) {
+      if (getters.IS_ADMIN_USER) return true;
+      if (getters.RBAC_ROLES.length === 0) return false;
       if (
         getters.CURRENT_USER_RBAC == null ||
         !Object.keys(getters.CURRENT_USER_RBAC).includes('shows')
       ) {
         return false;
       }
-      const readMask = getters.RBAC_ROLES.find((x) => x.key === 'READ').value;
+      const readMask = getters.RBAC_ROLES.find((x: { key: string }) => x.key === 'READ').value;
       return (
         getters.CURRENT_USER != null && (getters.CURRENT_USER_RBAC.shows[0][1] & readMask) !== 0
       );
     },
-    IS_SHOW_EXECUTOR(state, getters) {
-      if (getters.IS_ADMIN_USER) {
-        return true;
-      }
-      if (getters.RBAC_ROLES.length === 0) {
-        return false;
-      }
+    IS_SHOW_EXECUTOR(_state, getters) {
+      if (getters.IS_ADMIN_USER) return true;
+      if (getters.RBAC_ROLES.length === 0) return false;
       if (
         getters.CURRENT_USER_RBAC == null ||
         !Object.keys(getters.CURRENT_USER_RBAC).includes('shows')
       ) {
         return false;
       }
-      const execMask = getters.RBAC_ROLES.find((x) => x.key === 'EXECUTE').value;
-
+      const execMask = getters.RBAC_ROLES.find((x: { key: string }) => x.key === 'EXECUTE').value;
       return (
         getters.CURRENT_USER != null && (getters.CURRENT_USER_RBAC.shows[0][1] & execMask) !== 0
       );
     },
-    IS_SCRIPT_EDITOR(state, getters) {
-      if (getters.IS_ADMIN_USER) {
-        return true;
-      }
-      if (getters.RBAC_ROLES.length === 0) {
-        return false;
-      }
+    IS_SCRIPT_EDITOR(_state, getters) {
+      if (getters.IS_ADMIN_USER) return true;
+      if (getters.RBAC_ROLES.length === 0) return false;
       if (
         getters.CURRENT_USER_RBAC == null ||
         !Object.keys(getters.CURRENT_USER_RBAC).includes('script')
       ) {
         return false;
       }
-      const writeMask = getters.RBAC_ROLES.find((x) => x.key === 'WRITE').value;
+      const writeMask = getters.RBAC_ROLES.find((x: { key: string }) => x.key === 'WRITE').value;
       return (
         getters.CURRENT_USER != null && (getters.CURRENT_USER_RBAC.script[0][1] & writeMask) !== 0
       );
     },
-    IS_SCRIPT_READER(state, getters) {
-      if (getters.IS_ADMIN_USER) {
-        return true;
-      }
-      if (getters.RBAC_ROLES.length === 0) {
-        return false;
-      }
+    IS_SCRIPT_READER(_state, getters) {
+      if (getters.IS_ADMIN_USER) return true;
+      if (getters.RBAC_ROLES.length === 0) return false;
       if (
         getters.CURRENT_USER_RBAC == null ||
         !Object.keys(getters.CURRENT_USER_RBAC).includes('script')
       ) {
         return false;
       }
-      const readMask = getters.RBAC_ROLES.find((x) => x.key === 'READ').value;
+      const readMask = getters.RBAC_ROLES.find((x: { key: string }) => x.key === 'READ').value;
       return (
         getters.CURRENT_USER != null && (getters.CURRENT_USER_RBAC.script[0][1] & readMask) !== 0
       );
     },
-    IS_CUE_EDITOR(state, getters) {
-      if (getters.IS_ADMIN_USER) {
-        return true;
-      }
-      if (getters.RBAC_ROLES.length === 0) {
-        return false;
-      }
+    IS_CUE_EDITOR(_state, getters) {
+      if (getters.IS_ADMIN_USER) return true;
+      if (getters.RBAC_ROLES.length === 0) return false;
       if (
         getters.CURRENT_USER_RBAC == null ||
         !Object.keys(getters.CURRENT_USER_RBAC).includes('cuetypes')
       ) {
         return false;
       }
-      const writeMask = getters.RBAC_ROLES.find((x) => x.key === 'WRITE').value;
+      const writeMask = getters.RBAC_ROLES.find((x: { key: string }) => x.key === 'WRITE').value;
       return (
         getters.CURRENT_USER != null &&
-        getters.CURRENT_USER_RBAC.cuetypes.filter((x) => (x[1] & writeMask) !== 0).length > 0
+        getters.CURRENT_USER_RBAC.cuetypes.filter((x: [number, number]) => (x[1] & writeMask) !== 0)
+          .length > 0
       );
     },
-    IS_CUE_READER(state, getters) {
-      if (getters.IS_ADMIN_USER) {
-        return true;
-      }
-      if (getters.RBAC_ROLES.length === 0) {
-        return false;
-      }
+    IS_CUE_READER(_state, getters) {
+      if (getters.IS_ADMIN_USER) return true;
+      if (getters.RBAC_ROLES.length === 0) return false;
       if (
         getters.CURRENT_USER_RBAC == null ||
         !Object.keys(getters.CURRENT_USER_RBAC).includes('cuetypes')
       ) {
         return false;
       }
-      const readMask = getters.RBAC_ROLES.find((x) => x.key === 'READ').value;
+      const readMask = getters.RBAC_ROLES.find((x: { key: string }) => x.key === 'READ').value;
       return (
         getters.CURRENT_USER != null &&
-        getters.CURRENT_USER_RBAC.cuetypes.filter((x) => (x[1] & readMask) !== 0).length > 0
+        getters.CURRENT_USER_RBAC.cuetypes.filter((x: [number, number]) => (x[1] & readMask) !== 0)
+          .length > 0
       );
     },
   },
diff --git a/client/src/types/api/cues.ts b/client/src/types/api/cues.ts
new file mode 100644
index 00000000..5fecb28b
--- /dev/null
+++ b/client/src/types/api/cues.ts
@@ -0,0 +1,13 @@
+export interface CueType {
+  id: number;
+  show_id: number | null;
+  prefix: string | null;
+  description: string | null;
+  colour: string | null;
+}
+
+export interface Cue {
+  id: number;
+  cue_type_id: number | null;
+  ident: string | null;
+}
diff --git a/client/src/types/api/microphones.ts b/client/src/types/api/microphones.ts
new file mode 100644
index 00000000..a02952a7
--- /dev/null
+++ b/client/src/types/api/microphones.ts
@@ -0,0 +1,12 @@
+export interface Microphone {
+  id: number;
+  show_id: number | null;
+  name: string | null;
+  description: string | null;
+}
+
+export interface MicrophoneAllocation {
+  mic_id: number;
+  scene_id: number;
+  character_id: number;
+}
diff --git a/client/src/types/api/script.ts b/client/src/types/api/script.ts
new file mode 100644
index 00000000..0215fe5d
--- /dev/null
+++ b/client/src/types/api/script.ts
@@ -0,0 +1,58 @@
+export interface ScriptLinePart {
+  id: number | null;
+  line_id: number | null;
+  part_index: number | null;
+  character_id: number | null;
+  character_group_id: number | null;
+  line_text: string | null;
+}
+
+export interface ScriptLine {
+  id: number | null;
+  act_id: number | null;
+  scene_id: number | null;
+  page: number | null;
+  line_type: number;
+  stage_direction_style_id: number | null;
+  line_parts: ScriptLinePart[];
+}
+
+export interface ScriptRevision {
+  id: number;
+  script_id: number | null;
+  revision: number | null;
+  created_at: string | null;
+  edited_at: string | null;
+  description: string | null;
+  previous_revision_id: number | null;
+  has_draft?: boolean;
+}
+
+export interface StageDirectionStyle {
+  id: number;
+  script_id: number | null;
+  description: string | null;
+  bold: boolean | null;
+  italic: boolean | null;
+  underline: boolean | null;
+  text_format: string | null;
+  text_colour: string | null;
+  enable_background_colour: boolean | null;
+  background_colour: string | null;
+}
+
+export type ScriptCut = number;
+
+export interface CompiledScript {
+  revision_id: number;
+  created_at: string | null;
+  updated_at: string | null;
+  data_path: string | null;
+}
+
+export interface PageStatus {
+  added: number[];
+  updated: number[];
+  deleted: number[];
+  inserted: number[];
+}
diff --git a/client/src/types/api/session.ts b/client/src/types/api/session.ts
new file mode 100644
index 00000000..6159599d
--- /dev/null
+++ b/client/src/types/api/session.ts
@@ -0,0 +1,28 @@
+export interface ShowSession {
+  id: number;
+  show_id: number;
+  script_revision_id: number;
+  start_date_time: string | null;
+  end_date_time: string | null;
+  user_id: number | null;
+  client_internal_id: string | null;
+  latest_line_ref: string | null;
+  current_interval_id: number | null;
+  tags: SessionTag[];
+}
+
+export interface Interval {
+  id: number;
+  session_id: number | null;
+  act_id: number | null;
+  start_datetime: string | null;
+  end_datetime: string | null;
+  initial_length: number | null;
+}
+
+export interface SessionTag {
+  id: number;
+  show_id: number | null;
+  tag: string;
+  colour: string;
+}
diff --git a/client/src/types/api/settings.ts b/client/src/types/api/settings.ts
new file mode 100644
index 00000000..05d6fa9c
--- /dev/null
+++ b/client/src/types/api/settings.ts
@@ -0,0 +1,11 @@
+export interface SystemSetting {
+  key: string;
+  value: string;
+}
+
+export interface SystemSettings {
+  current_show: number | null;
+  client_log_enabled: boolean | null;
+  client_log_level: string | null;
+  [key: string]: unknown;
+}
diff --git a/client/src/types/api/show.ts b/client/src/types/api/show.ts
new file mode 100644
index 00000000..92fc7f21
--- /dev/null
+++ b/client/src/types/api/show.ts
@@ -0,0 +1,54 @@
+export interface Show {
+  id: number;
+  name: string | null;
+  start_date: string | null;
+  end_date: string | null;
+  created_at: string | null;
+  edited_at: string | null;
+  first_act_id: number | null;
+  current_session_id: number | null;
+  script_mode: number;
+}
+
+export interface Cast {
+  id: number;
+  show_id: number | null;
+  first_name: string | null;
+  last_name: string | null;
+  character_list: Character[];
+}
+
+export interface Character {
+  id: number;
+  show_id: number | null;
+  played_by: number | null;
+  name: string | null;
+  description: string | null;
+  cast_member: { id: number; first_name: string | null; last_name: string | null } | null;
+}
+
+export interface CharacterGroup {
+  id: number;
+  show_id: number | null;
+  name: string | null;
+  description: string | null;
+}
+
+// first_scene and next_act are serialized as IDs by the marshmallow schema
+export interface Act {
+  id: number;
+  show_id: number | null;
+  name: string | null;
+  interval_after: boolean | null;
+  first_scene: number | null;
+  next_act: number | null;
+}
+
+// act and next_scene are serialized as IDs by the marshmallow schema
+export interface Scene {
+  id: number;
+  show_id: number | null;
+  act: number | null;
+  name: string | null;
+  next_scene: number | null;
+}
diff --git a/client/src/types/api/stage.ts b/client/src/types/api/stage.ts
new file mode 100644
index 00000000..e8e38eb8
--- /dev/null
+++ b/client/src/types/api/stage.ts
@@ -0,0 +1,57 @@
+export interface Crew {
+  id: number;
+  show_id: number;
+  first_name: string;
+  last_name: string | null;
+}
+
+export interface CrewAssignment {
+  id: number;
+  crew_id: number;
+  scene_id: number;
+  assignment_type: 'set' | 'strike';
+  prop_id: number | null;
+  scenery_id: number | null;
+}
+
+export interface SceneryType {
+  id: number;
+  show_id: number;
+  name: string;
+  description: string | null;
+}
+
+export interface Scenery {
+  id: number;
+  show_id: number;
+  scenery_type_id: number;
+  name: string;
+  description: string | null;
+}
+
+export interface SceneryAllocation {
+  id: number;
+  scenery_id: number;
+  scene_id: number;
+}
+
+export interface PropType {
+  id: number;
+  show_id: number;
+  name: string;
+  description: string | null;
+}
+
+export interface Props {
+  id: number;
+  show_id: number;
+  prop_type_id: number;
+  name: string;
+  description: string | null;
+}
+
+export interface PropsAllocation {
+  id: number;
+  props_id: number;
+  scene_id: number;
+}
diff --git a/client/src/types/api/user.ts b/client/src/types/api/user.ts
new file mode 100644
index 00000000..b406073c
--- /dev/null
+++ b/client/src/types/api/user.ts
@@ -0,0 +1,23 @@
+export interface User {
+  id: number;
+  username: string | null;
+  is_admin: boolean | null;
+  last_login: string | null;
+  last_seen: string | null;
+  requires_password_change: boolean;
+  token_version: number;
+}
+
+export interface CueColourOverride {
+  id: number;
+  cue_type_id: number | null;
+  colour: string | null;
+}
+
+export interface UserSettings {
+  enable_script_auto_save: boolean | null;
+  script_auto_save_interval: number | null;
+  cue_position_right: boolean | null;
+  script_text_alignment: number;
+  console_log_level: string;
+}
diff --git a/client/src/types/api/websocket.ts b/client/src/types/api/websocket.ts
new file mode 100644
index 00000000..4cc2ab30
--- /dev/null
+++ b/client/src/types/api/websocket.ts
@@ -0,0 +1,5 @@
+export interface WsMessage {
+  OP: string;
+  DATA: Record<string, unknown>;
+  ACTION?: string;
+}
diff --git a/client/src/types/index.ts b/client/src/types/index.ts
new file mode 100644
index 00000000..cf8d175f
--- /dev/null
+++ b/client/src/types/index.ts
@@ -0,0 +1,9 @@
+export type * from './api/show';
+export type * from './api/script';
+export type * from './api/cues';
+export type * from './api/stage';
+export type * from './api/microphones';
+export type * from './api/session';
+export type * from './api/user';
+export type * from './api/settings';
+export type * from './api/websocket';
diff --git a/client/src/types/shims/shims-vue.d.ts b/client/src/types/shims/shims-vue.d.ts
new file mode 100644
index 00000000..8f6f4102
--- /dev/null
+++ b/client/src/types/shims/shims-vue.d.ts
@@ -0,0 +1,4 @@
+declare module '*.vue' {
+  import Vue from 'vue';
+  export default Vue;
+}
diff --git a/client/src/types/shims/vendor.d.ts b/client/src/types/shims/vendor.d.ts
new file mode 100644
index 00000000..f39e8fe0
--- /dev/null
+++ b/client/src/types/shims/vendor.d.ts
@@ -0,0 +1,11 @@
+declare module 'deep-object-diff' {
+  export function detailedDiff(
+    a: unknown,
+    b: unknown
+  ): {
+    added: Record<string, unknown>;
+    updated: Record<string, unknown>;
+    deleted: Record<string, unknown>;
+  };
+  export function diff(a: unknown, b: unknown): Record<string, unknown>;
+}
diff --git a/client/src/types/shims/vue-shims.d.ts b/client/src/types/shims/vue-shims.d.ts
new file mode 100644
index 00000000..a28257de
--- /dev/null
+++ b/client/src/types/shims/vue-shims.d.ts
@@ -0,0 +1,24 @@
+export {};
+
+declare module 'vue/types/vue' {
+  interface VueToastPlugin {
+    open(options: Record<string, unknown>): unknown;
+    success(message: string, options?: Record<string, unknown>): unknown;
+    warning(message: string, options?: Record<string, unknown>): unknown;
+    error(message: string, options?: Record<string, unknown>): unknown;
+    info(message: string, options?: Record<string, unknown>): unknown;
+    clear(): void;
+  }
+  // Instance-level access (this.$toast in Vue components)
+  interface Vue {
+    $socket: WebSocket & { sendObj: (obj: object) => void };
+    $toast: VueToastPlugin;
+  }
+}
+
+declare module 'vue/types/options' {
+  // eslint-disable-next-line no-undef
+  interface ComponentOptions<V extends Vue> {
+    sockets?: Record<string, (data: unknown) => void>;
+  }
+}
diff --git a/client/src/types/store.ts b/client/src/types/store.ts
new file mode 100644
index 00000000..bc1f7a1f
--- /dev/null
+++ b/client/src/types/store.ts
@@ -0,0 +1,5 @@
+import type { Show } from './api/show';
+
+export interface RootState {
+  currentShow: Show | null;
+}
diff --git a/client/src/views/404View.vue b/client/src/views/404View.vue
index 850ede90..85e3366a 100644
--- a/client/src/views/404View.vue
+++ b/client/src/views/404View.vue
@@ -5,10 +5,12 @@
   </div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
   name: '404View',
-};
+});
 </script>
 
 <style scoped>
diff --git a/client/src/views/AboutView.vue b/client/src/views/AboutView.vue
index d0d067ae..90cb98d1 100644
--- a/client/src/views/AboutView.vue
+++ b/client/src/views/AboutView.vue
@@ -11,3 +11,11 @@
     </ul>
   </div>
 </template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'AboutView',
+});
+</script>
diff --git a/client/src/views/HelpView.vue b/client/src/views/HelpView.vue
index d19cf3dc..f7f90f4b 100644
--- a/client/src/views/HelpView.vue
+++ b/client/src/views/HelpView.vue
@@ -35,11 +35,12 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { mapGetters, mapActions } from 'vuex';
 import { debounce } from 'lodash';
 
-export default {
+export default defineComponent({
   name: 'HelpView',
   data() {
     return {
@@ -49,43 +50,43 @@ export default {
   },
   computed: {
     ...mapGetters(['DOCUMENTATION_MANIFEST', 'SEARCH_RESULTS']),
-    displayedDocs() {
-      if (this.searchQuery && this.SEARCH_RESULTS.length > 0) {
-        return this.SEARCH_RESULTS;
+    displayedDocs(): unknown[] {
+      if (this.searchQuery && (this as any).SEARCH_RESULTS.length > 0) {
+        return (this as any).SEARCH_RESULTS;
       }
-      return this.DOCUMENTATION_MANIFEST;
+      return (this as any).DOCUMENTATION_MANIFEST;
     },
   },
   watch: {
-    searchQuery() {
+    searchQuery(): void {
       if (!this.searchQuery || this.searchQuery.trim() === '') {
-        this.CLEAR_SEARCH();
+        (this as any).CLEAR_SEARCH();
       }
     },
   },
-  async mounted() {
-    await this.LOAD_MANIFEST();
+  async mounted(): Promise<void> {
+    await (this as any).LOAD_MANIFEST();
     this.calculateNavbarHeight();
     window.addEventListener('resize', this.calculateNavbarHeight);
   },
-  beforeDestroy() {
+  beforeDestroy(): void {
     window.removeEventListener('resize', this.calculateNavbarHeight);
   },
   methods: {
     ...mapActions(['LOAD_MANIFEST', 'SEARCH_DOCUMENTS', 'CLEAR_SEARCH']),
-    calculateNavbarHeight() {
+    calculateNavbarHeight(): void {
       const navbar = document.querySelector('.navbar');
       if (navbar) {
-        this.navbarHeight = navbar.offsetHeight;
+        this.navbarHeight = (navbar as HTMLElement).offsetHeight;
       } else {
         this.navbarHeight = 56;
       }
     },
-    handleSearch: debounce(function handleSearchDebounced() {
+    handleSearch: debounce(function handleSearchDebounced(this: any) {
       this.SEARCH_DOCUMENTS(this.searchQuery);
     }, 300),
   },
-};
+});
 </script>
 
 <style scoped>
diff --git a/client/src/views/HomeView.vue b/client/src/views/HomeView.vue
index 7b5a54d7..1aed53a2 100644
--- a/client/src/views/HomeView.vue
+++ b/client/src/views/HomeView.vue
@@ -21,16 +21,17 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { mapGetters } from 'vuex';
 
-export default {
+export default defineComponent({
   name: 'HomeView',
   computed: {
-    isAdminUser() {
+    isAdminUser(): boolean {
       return this.CURRENT_USER != null && this.CURRENT_USER.is_admin;
     },
     ...mapGetters(['SETTINGS', 'CURRENT_SHOW_SESSION', 'CURRENT_SHOW', 'CURRENT_USER']),
   },
-};
+});
 </script>
diff --git a/client/src/views/config/ConfigView.vue b/client/src/views/config/ConfigView.vue
index f3a55154..16996aa5 100644
--- a/client/src/views/config/ConfigView.vue
+++ b/client/src/views/config/ConfigView.vue
@@ -25,15 +25,16 @@
   </b-container>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import ConfigSystem from '@/vue_components/config/ConfigSystem.vue';
 import ConfigSettings from '@/vue_components/config/ConfigSettings.vue';
 import ConfigUsers from '@/vue_components/config/ConfigUsers.vue';
 import ConfigShows from '@/vue_components/config/ConfigShows.vue';
 import ConfigLogs from '@/vue_components/config/ConfigLogs.vue';
 
-export default {
+export default defineComponent({
   name: 'ConfigView',
   components: { ConfigShows, ConfigUsers, ConfigSettings, ConfigSystem, ConfigLogs },
-};
+});
 </script>
diff --git a/client/src/views/electron/ServerSelector.vue b/client/src/views/electron/ServerSelector.vue
index 9ba8eb00..2ee16a14 100644
--- a/client/src/views/electron/ServerSelector.vue
+++ b/client/src/views/electron/ServerSelector.vue
@@ -339,103 +339,105 @@
   </b-container>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { required } from 'vuelidate/lib/validators';
 import { isElectron } from '@/js/platform';
 
-// Custom URL validator
-const validUrl = (value) => {
+interface SavedConnection {
+  id: string;
+  nickname: string;
+  url: string;
+  sslEnabled: boolean;
+}
+
+interface ServerStatus {
+  available: boolean;
+  compatible: boolean;
+  serverVersion: string | null;
+  lastSeen: number | null;
+  lastChecked: number;
+}
+
+interface DiscoveredServer {
+  name: string;
+  url: string;
+  compatible: boolean;
+  serverVersion?: string;
+  versionError?: string;
+}
+
+interface TestResult {
+  variant: string;
+  message: string;
+}
+
+const validUrl = (value: string): boolean => {
   if (!value) return false;
   try {
     const url = new URL(value.startsWith('http') ? value : `http://${value}`);
     return url.protocol === 'http:' || url.protocol === 'https:';
   } catch {
-    // Invalid URL syntax - return false for validation
     return false;
   }
 };
 
-export default {
+export default defineComponent({
   name: 'ServerSelector',
   data() {
     return {
-      savedConnections: [],
-      discoveredServers: [],
+      savedConnections: [] as SavedConnection[],
+      discoveredServers: [] as DiscoveredServer[],
       isDiscovering: false,
       discoveryCompleted: false,
       isTestingConnection: false,
       isConnecting: false,
-      testResult: null,
-      clientVersion: null,
+      testResult: null as TestResult | null,
+      clientVersion: null as string | null,
       manualForm: {
         nickname: '',
         url: '',
         sslEnabled: false,
       },
       showDeleteModal: false,
-      connectionToDelete: null,
+      connectionToDelete: null as SavedConnection | null,
       savedConnsCollapsed: true,
       discoverCollapsed: false,
-      discoveryInterval: null,
-      lastDiscoveryTime: null,
+      discoveryInterval: null as ReturnType<typeof setInterval> | null,
+      lastDiscoveryTime: null as number | null,
       autoDiscoveryEnabled: true,
       currentTime: Date.now(),
-      timeUpdateInterval: null,
-      serverStatusPollingInterval: null,
-      serverStatuses: {}, // Map of connectionId -> status object
+      timeUpdateInterval: null as ReturnType<typeof setInterval> | null,
+      serverStatusPollingInterval: null as ReturnType<typeof setInterval> | null,
+      serverStatuses: {} as Record<string, ServerStatus>,
       isCheckingServers: false,
     };
   },
   computed: {
-    /**
-     * Calculate seconds since last discovery
-     * @returns {number|null} Seconds elapsed or null if never run
-     */
-    secondsSinceLastDiscovery() {
+    secondsSinceLastDiscovery(): number | null {
       if (!this.lastDiscoveryTime) return null;
       return Math.floor((this.currentTime - this.lastDiscoveryTime) / 1000);
     },
-
-    /**
-     * Format last update time for display
-     * @returns {string} Human-readable time string
-     */
-    lastDiscoveryTimeFormatted() {
+    lastDiscoveryTimeFormatted(): string {
       if (!this.lastDiscoveryTime) return 'Never';
-      const seconds = this.secondsSinceLastDiscovery;
-
+      const seconds = this.secondsSinceLastDiscovery!;
       if (seconds < 60) return `${seconds} seconds ago`;
       if (seconds < 3600) return `${Math.floor(seconds / 60)} minutes ago`;
       return this.formatDate(this.lastDiscoveryTime);
     },
-
-    /**
-     * Count of available servers with compatible versions
-     * @returns {number} Number of available and compatible servers
-     */
-    availableServersCount() {
+    availableServersCount(): number {
       return this.savedConnections.filter((conn) => {
         const status = this.serverStatuses[conn.id];
         return status?.available && status?.compatible;
       }).length;
     },
-
-    /**
-     * Count of available servers with incompatible versions
-     * @returns {number} Number of available but incompatible servers
-     */
-    incompatibleServersCount() {
+    incompatibleServersCount(): number {
       return this.savedConnections.filter((conn) => {
         const status = this.serverStatuses[conn.id];
         return status?.available && !status?.compatible;
       }).length;
     },
-
-    /**
-     * Count of unavailable servers
-     * @returns {number} Number of unavailable servers
-     */
-    unavailableServersCount() {
+    unavailableServersCount(): number {
       return this.savedConnections.filter((conn) => {
         const status = this.serverStatuses[conn.id];
         return status && !status.available;
@@ -448,97 +450,62 @@ export default {
       url: { required, validUrl },
     },
   },
-  async mounted() {
-    // Redirect to home if not in Electron
+  async mounted(): Promise<void> {
     if (!isElectron()) {
       this.$router.push('/');
       return;
     }
 
-    // Load client version
-    this.clientVersion = await window.electronAPI.getAppVersion();
-
-    // Load saved connections
+    this.clientVersion = await (window as any).electronAPI.getAppVersion();
     await this.loadConnections();
 
-    // Start time update interval for reactive timestamp
     this.timeUpdateInterval = setInterval(() => {
       this.currentTime = Date.now();
     }, 1000);
 
-    // Start auto-discovery
     this.startAutoDiscovery();
-
-    // Start server status polling
     this.startServerStatusPolling();
   },
-  beforeDestroy() {
-    // Clean up auto-discovery interval
+  beforeDestroy(): void {
     this.stopAutoDiscovery();
-
-    // Clean up server status polling
     this.stopServerStatusPolling();
-
-    // Clean up time update interval
     if (this.timeUpdateInterval) {
       clearInterval(this.timeUpdateInterval);
       this.timeUpdateInterval = null;
     }
   },
   methods: {
-    /**
-     * Validate form field state for Vuelidate
-     */
-    validateState(name) {
-      const { $dirty, $error } = this.$v.manualForm[name];
+    validateState(name: string): boolean | null {
+      const { $dirty, $error } = (this as any).$v.manualForm[name];
       return $dirty ? !$error : null;
     },
-
-    /**
-     * Load all saved connections from Electron store
-     */
-    async loadConnections() {
+    async loadConnections(): Promise<void> {
       try {
-        this.savedConnections = await window.electronAPI.getAllConnections();
-      } catch (error) {
-        this.$toast.error(`Failed to load connections: ${error.message}`);
+        this.savedConnections = await (window as any).electronAPI.getAllConnections();
+      } catch (error: any) {
+        (this as any).$toast.error(`Failed to load connections: ${error.message}`);
       }
     },
-
-    /**
-     * Discover servers on local network using mDNS
-     * Runs automatically every 15 seconds
-     */
-    async discoverServers() {
-      // Skip if already discovering or disabled
+    async discoverServers(): Promise<void> {
       if (this.isDiscovering || !this.autoDiscoveryEnabled) {
         return;
       }
-
       this.isDiscovering = true;
-
       try {
-        this.discoveredServers = await window.electronAPI.discoverServersWithVersionCheck(5000);
+        this.discoveredServers = await (window as any).electronAPI.discoverServersWithVersionCheck(
+          5000
+        );
         this.discoveryCompleted = true;
         this.lastDiscoveryTime = Date.now();
-      } catch (error) {
-        // Silent failure - log only
+      } catch (error: any) {
         console.warn('[Auto-Discovery] Failed:', error.message);
       } finally {
         this.isDiscovering = false;
       }
     },
-
-    /**
-     * Check status of a single server
-     * @param {Object} connection - Connection object
-     * @returns {Object} Status object with availability, compatibility, version info
-     */
-    async checkServerStatus(connection) {
+    async checkServerStatus(connection: SavedConnection): Promise<ServerStatus> {
       try {
-        const result = await window.electronAPI.checkVersion(connection.url);
-
-        // If there's an error field or no serverVersion, the server is unreachable
+        const result = await (window as any).electronAPI.checkVersion(connection.url);
         if (result.error || !result.serverVersion) {
           return {
             available: false,
@@ -548,8 +515,6 @@ export default {
             lastChecked: Date.now(),
           };
         }
-
-        // Server is reachable, check compatibility
         return {
           available: true,
           compatible: result.compatible,
@@ -557,8 +522,7 @@ export default {
           lastSeen: Date.now(),
           lastChecked: Date.now(),
         };
-      } catch (error) {
-        // Exception thrown - server unavailable or check failed
+      } catch {
         return {
           available: false,
           compatible: false,
@@ -568,48 +532,31 @@ export default {
         };
       }
     },
-
-    /**
-     * Check status of all saved servers
-     * Runs in parallel using Promise.all()
-     */
-    async checkAllServerStatuses() {
+    async checkAllServerStatuses(): Promise<void> {
       if (this.isCheckingServers || this.savedConnections.length === 0) {
         return;
       }
-
       this.isCheckingServers = true;
-
       try {
-        // Check all servers in parallel
         const statusChecks = this.savedConnections.map(async (conn) => {
           const status = await this.checkServerStatus(conn);
           return { id: conn.id, status };
         });
-
         const results = await Promise.all(statusChecks);
-
-        // Update statuses using $set for reactivity
         results.forEach(({ id, status }) => {
           this.$set(this.serverStatuses, id, status);
         });
-      } catch (error) {
+      } catch (error: any) {
         console.warn('[Server Status] Failed to check servers:', error.message);
       } finally {
         this.isCheckingServers = false;
       }
     },
-
-    /**
-     * Test connection to a server URL
-     */
-    async testConnection(url) {
+    async testConnection(url: string): Promise<void> {
       this.isTestingConnection = true;
       this.testResult = null;
-
       try {
-        const result = await window.electronAPI.checkVersion(url);
-
+        const result = await (window as any).electronAPI.checkVersion(url);
         if (result.compatible) {
           this.testResult = {
             variant: 'success',
@@ -621,7 +568,7 @@ export default {
             message: result.error || 'Version mismatch',
           };
         }
-      } catch (error) {
+      } catch (error: any) {
         this.testResult = {
           variant: 'danger',
           message: `Connection failed: ${error.message}`,
@@ -630,104 +577,64 @@ export default {
         this.isTestingConnection = false;
       }
     },
-
-    /**
-     * Test manual connection entry
-     */
-    async testManualConnection() {
+    async testManualConnection(): Promise<void> {
       const url = this.normalizeUrl(this.manualForm.url);
       await this.testConnection(url);
     },
-
-    /**
-     * Connect to a saved server
-     */
-    async connectToServer(connection) {
+    async connectToServer(connection: SavedConnection): Promise<void> {
       this.isConnecting = true;
-
       try {
-        // Verify version compatibility first
-        const versionCheck = await window.electronAPI.checkVersion(connection.url);
-
+        const versionCheck = await (window as any).electronAPI.checkVersion(connection.url);
         if (!versionCheck.compatible) {
-          this.$toast.error(versionCheck.error || 'Server version incompatible');
+          (this as any).$toast.error(versionCheck.error || 'Server version incompatible');
           return;
         }
-
-        // Set as active connection
-        await window.electronAPI.setActiveConnection(connection.id);
-
-        this.$toast.success(`Connected to ${connection.nickname}`);
-
-        // Force full page reload to reinitialize WebSocket
-        // In history mode (dev), use router to navigate before reload
-        // In hash mode (prod), set hash before reload
-        if (this.$router.mode === 'history') {
+        await (window as any).electronAPI.setActiveConnection(connection.id);
+        (this as any).$toast.success(`Connected to ${connection.nickname}`);
+        if ((this.$router as any).mode === 'history') {
           await this.$router.push('/');
         } else {
           window.location.hash = '/';
         }
         window.location.reload();
-      } catch (error) {
-        this.$toast.error(`Connection failed: ${error.message}`);
+      } catch (error: any) {
+        (this as any).$toast.error(`Connection failed: ${error.message}`);
       } finally {
         this.isConnecting = false;
       }
     },
-
-    /**
-     * Add discovered server as saved connection and connect
-     */
-    async addDiscoveredServer(server) {
+    async addDiscoveredServer(server: DiscoveredServer): Promise<void> {
       this.isConnecting = true;
-
       try {
-        // Add connection
-        const newConnection = await window.electronAPI.addConnection({
+        const newConnection = await (window as any).electronAPI.addConnection({
           nickname: server.name,
           url: server.url,
           sslEnabled: server.url.startsWith('https'),
         });
-
-        // Set as active and connect
-        await window.electronAPI.setActiveConnection(newConnection.id);
-
-        this.$toast.success(`Connected to ${server.name}`);
-
-        // Force full page reload to reinitialize WebSocket
-        // In history mode (dev), use router to navigate before reload
-        // In hash mode (prod), set hash before reload
-        if (this.$router.mode === 'history') {
+        await (window as any).electronAPI.setActiveConnection(newConnection.id);
+        (this as any).$toast.success(`Connected to ${server.name}`);
+        if ((this.$router as any).mode === 'history') {
           await this.$router.push('/');
         } else {
           window.location.hash = '/';
         }
         window.location.reload();
-      } catch (error) {
-        this.$toast.error(`Failed to add server: ${error.message}`);
+      } catch (error: any) {
+        (this as any).$toast.error(`Failed to add server: ${error.message}`);
       } finally {
         this.isConnecting = false;
       }
     },
-
-    /**
-     * Add server without connecting
-     */
-    async addServerOnly() {
-      this.$v.manualForm.$touch();
-      if (this.$v.manualForm.$invalid) {
+    async addServerOnly(): Promise<void> {
+      (this as any).$v.manualForm.$touch();
+      if ((this as any).$v.manualForm.$invalid) {
         return;
       }
-
       try {
         const url = this.normalizeUrl(this.manualForm.url);
-
-        // Verify version compatibility first
-        const versionCheck = await window.electronAPI.checkVersion(url);
-
+        const versionCheck = await (window as any).electronAPI.checkVersion(url);
         if (!versionCheck.compatible) {
-          // Show warning but allow adding anyway
-          const proceed = await this.$bvModal.msgBoxConfirm(
+          const proceed = await (this as any).$bvModal.msgBoxConfirm(
             `Server version (${versionCheck.serverVersion}) does not match client version. Add anyway?`,
             {
               title: 'Version Mismatch',
@@ -736,248 +643,137 @@ export default {
               cancelTitle: 'Cancel',
             }
           );
-
           if (!proceed) {
             return;
           }
         }
-
-        // Add connection (don't set as active)
-        await window.electronAPI.addConnection({
+        await (window as any).electronAPI.addConnection({
           nickname: this.manualForm.nickname,
           url,
           sslEnabled: this.manualForm.sslEnabled,
         });
-
-        this.$toast.success(`Saved ${this.manualForm.nickname}`);
-
-        // Reload connections list
+        (this as any).$toast.success(`Saved ${this.manualForm.nickname}`);
         await this.loadConnections();
-
-        // Close modal
-        this.$bvModal.hide('add-server-modal');
-
-        // Trigger immediate status check for new server
+        (this as any).$bvModal.hide('add-server-modal');
         await this.checkAllServerStatuses();
-      } catch (error) {
-        this.$toast.error(`Failed to add server: ${error.message}`);
+      } catch (error: any) {
+        (this as any).$toast.error(`Failed to add server: ${error.message}`);
       }
     },
-
-    /**
-     * Add manual connection and connect immediately
-     */
-    async addAndConnect() {
-      this.$v.manualForm.$touch();
-      if (this.$v.manualForm.$invalid) {
+    async addAndConnect(): Promise<void> {
+      (this as any).$v.manualForm.$touch();
+      if ((this as any).$v.manualForm.$invalid) {
         return;
       }
-
       this.isConnecting = true;
-
       try {
         const url = this.normalizeUrl(this.manualForm.url);
-
-        // Verify version compatibility first
-        const versionCheck = await window.electronAPI.checkVersion(url);
-
+        const versionCheck = await (window as any).electronAPI.checkVersion(url);
         if (!versionCheck.compatible) {
-          this.$toast.error(versionCheck.error || 'Server version incompatible');
+          (this as any).$toast.error(versionCheck.error || 'Server version incompatible');
           return;
         }
-
-        // Add connection
-        const newConnection = await window.electronAPI.addConnection({
+        const newConnection = await (window as any).electronAPI.addConnection({
           nickname: this.manualForm.nickname,
           url,
           sslEnabled: this.manualForm.sslEnabled,
         });
-
-        // Set as active and connect
-        await window.electronAPI.setActiveConnection(newConnection.id);
-
-        this.$toast.success(`Connected to ${this.manualForm.nickname}`);
-
-        // Force full page reload to reinitialize WebSocket
-        // In history mode (dev), use router to navigate before reload
-        // In hash mode (prod), set hash before reload
-        if (this.$router.mode === 'history') {
+        await (window as any).electronAPI.setActiveConnection(newConnection.id);
+        (this as any).$toast.success(`Connected to ${this.manualForm.nickname}`);
+        if ((this.$router as any).mode === 'history') {
           await this.$router.push('/');
         } else {
           window.location.hash = '/';
         }
         window.location.reload();
-      } catch (error) {
-        this.$toast.error(`Failed to add connection: ${error.message}`);
+      } catch (error: any) {
+        (this as any).$toast.error(`Failed to add connection: ${error.message}`);
       } finally {
         this.isConnecting = false;
       }
     },
-
-    /**
-     * Show delete confirmation modal
-     */
-    confirmDeleteConnection(connection) {
+    confirmDeleteConnection(connection: SavedConnection): void {
       this.connectionToDelete = connection;
       this.showDeleteModal = true;
     },
-
-    /**
-     * Delete a saved connection
-     */
-    async deleteConnection() {
+    async deleteConnection(): Promise<void> {
       if (!this.connectionToDelete) return;
-
       try {
-        await window.electronAPI.deleteConnection(this.connectionToDelete.id);
-        this.$toast.success(`Deleted ${this.connectionToDelete.nickname}`);
-
-        // Reload connections
+        await (window as any).electronAPI.deleteConnection(this.connectionToDelete.id);
+        (this as any).$toast.success(`Deleted ${this.connectionToDelete.nickname}`);
         await this.loadConnections();
-      } catch (error) {
-        this.$toast.error(`Failed to delete connection: ${error.message}`);
+      } catch (error: any) {
+        (this as any).$toast.error(`Failed to delete connection: ${error.message}`);
       } finally {
         this.connectionToDelete = null;
       }
     },
-
-    /**
-     * Normalize URL (add protocol if missing)
-     */
-    normalizeUrl(url) {
+    normalizeUrl(url: string): string {
       if (!url.startsWith('http://') && !url.startsWith('https://')) {
         return this.manualForm.sslEnabled ? `https://${url}` : `http://${url}`;
       }
       return url;
     },
-
-    /**
-     * Format timestamp for display
-     */
-    formatDate(timestamp) {
+    formatDate(timestamp: number | null): string {
       if (!timestamp) return 'Never';
-      const date = new Date(timestamp);
-      return date.toLocaleString();
+      return new Date(timestamp).toLocaleString();
     },
-
-    /**
-     * Format timestamp as "time ago" string
-     * @param {number} timestamp - Timestamp in milliseconds
-     * @returns {string} Human-readable "time ago" string
-     */
-    formatTimeAgo(timestamp) {
+    formatTimeAgo(timestamp: number | null): string {
       if (!timestamp) return 'Never';
-
       const seconds = Math.floor((this.currentTime - timestamp) / 1000);
-
       if (seconds < 10) return 'Just now';
       if (seconds < 60) return `${seconds} seconds ago`;
       if (seconds < 3600) return `${Math.floor(seconds / 60)} minutes ago`;
       if (seconds < 86400) return `${Math.floor(seconds / 3600)} hours ago`;
       return `${Math.floor(seconds / 86400)} days ago`;
     },
-
-    /**
-     * Get badge variant for connection status
-     * @param {string} connectionId - Connection ID
-     * @returns {string} Bootstrap variant (secondary=checking, danger=unavailable, warning=mismatch, success=available)
-     */
-    getStatusVariant(connectionId) {
+    getStatusVariant(connectionId: string): string {
       const status = this.serverStatuses[connectionId];
-
-      // No status yet - still checking
       if (!status) return 'secondary';
-
-      // Server unreachable
       if (!status.available) return 'danger';
-
-      // Server reachable but wrong version
       if (!status.compatible) return 'warning';
-
-      // Server reachable and compatible
       return 'success';
     },
-
-    /**
-     * Get status text for connection
-     * @param {string} connectionId - Connection ID
-     * @returns {string} Status text
-     */
-    getStatusText(connectionId) {
+    getStatusText(connectionId: string): string {
       const status = this.serverStatuses[connectionId];
-
-      // No status yet - still checking
       if (!status) return 'Checking...';
-
-      // Server unreachable
       if (!status.available) return 'Unavailable';
-
-      // Server reachable but wrong version
       if (!status.compatible) return 'Version Mismatch';
-
-      // Server reachable and compatible
       return 'Available';
     },
-
-    /**
-     * Reset manual form when modal is closed
-     */
-    resetManualForm() {
+    resetManualForm(): void {
       this.manualForm.nickname = '';
       this.manualForm.url = '';
       this.manualForm.sslEnabled = false;
       this.testResult = null;
-      this.$v.manualForm.$reset();
+      (this as any).$v.manualForm.$reset();
     },
-
-    /**
-     * Start auto-discovery interval
-     */
-    startAutoDiscovery() {
-      // Run first discovery immediately
+    startAutoDiscovery(): void {
       this.discoverServers();
-
-      // Set up recurring discovery every 15 seconds
       this.discoveryInterval = setInterval(() => {
         this.discoverServers();
       }, 15000);
     },
-
-    /**
-     * Stop auto-discovery interval
-     */
-    stopAutoDiscovery() {
+    stopAutoDiscovery(): void {
       if (this.discoveryInterval) {
         clearInterval(this.discoveryInterval);
         this.discoveryInterval = null;
       }
     },
-
-    /**
-     * Start server status polling
-     * Checks all saved servers every 30 seconds
-     */
-    startServerStatusPolling() {
-      // Run first check immediately
+    startServerStatusPolling(): void {
       this.checkAllServerStatuses();
-
-      // Set up recurring checks every 30 seconds
       this.serverStatusPollingInterval = setInterval(() => {
         this.checkAllServerStatuses();
       }, 30000);
     },
-
-    /**
-     * Stop server status polling
-     */
-    stopServerStatusPolling() {
+    stopServerStatusPolling(): void {
       if (this.serverStatusPollingInterval) {
         clearInterval(this.serverStatusPollingInterval);
         this.serverStatusPollingInterval = null;
       }
     },
   },
-};
+});
 </script>
 
 <style scoped>
diff --git a/client/src/views/help/HelpDocView.vue b/client/src/views/help/HelpDocView.vue
index b245d0b7..399c2270 100644
--- a/client/src/views/help/HelpDocView.vue
+++ b/client/src/views/help/HelpDocView.vue
@@ -10,30 +10,31 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { mapGetters, mapActions } from 'vuex';
 import MarkdownRenderer from '@/vue_components/MarkdownRenderer.vue';
 
-export default {
+export default defineComponent({
   name: 'HelpDocView',
   components: {
     MarkdownRenderer,
   },
   computed: {
     ...mapGetters(['CURRENT_DOCUMENT_CONTENT', 'IS_LOADING', 'ERROR', 'DOCUMENTATION_MANIFEST']),
-    documentContent() {
+    documentContent(): string | null {
       return this.CURRENT_DOCUMENT_CONTENT;
     },
-    loading() {
+    loading(): boolean {
       return this.IS_LOADING;
     },
-    error() {
+    error(): string | null {
       return this.ERROR;
     },
   },
   watch: {
     '$route.params.slug': {
-      handler(newSlug) {
+      handler(newSlug: string) {
         if (newSlug) {
           this.loadDocument(newSlug);
         }
@@ -43,19 +44,18 @@ export default {
   },
   methods: {
     ...mapActions(['LOAD_DOCUMENT', 'LOAD_MANIFEST']),
-    async loadDocument(slug) {
-      // Wait for manifest to load if it hasn't been loaded yet
+    async loadDocument(slug: string): Promise<void> {
       if (!this.DOCUMENTATION_MANIFEST || this.DOCUMENTATION_MANIFEST.length === 0) {
-        await this.LOAD_MANIFEST();
+        await (this as any).LOAD_MANIFEST();
       }
-      await this.LOAD_DOCUMENT(slug);
+      await (this as any).LOAD_DOCUMENT(slug);
     },
-    async retry() {
+    async retry(): Promise<void> {
       const { slug } = this.$route.params;
       if (slug) {
         await this.loadDocument(slug);
       }
     },
   },
-};
+});
 </script>
diff --git a/client/src/views/show/ShowConfigView.vue b/client/src/views/show/ShowConfigView.vue
index 8e80bb2a..b63148fd 100644
--- a/client/src/views/show/ShowConfigView.vue
+++ b/client/src/views/show/ShowConfigView.vue
@@ -105,10 +105,11 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { mapGetters } from 'vuex';
 
-export default {
+export default defineComponent({
   name: 'ShowView',
   data() {
     return {
@@ -125,19 +126,25 @@ export default {
       'IS_SCRIPT_READER',
       'IS_SHOW_EXECUTOR',
     ]),
-    shouldViewShowConfig() {
-      return this.IS_SHOW_EDITOR || this.IS_SHOW_READER;
+    shouldViewShowConfig(): boolean {
+      return (this as any).IS_SHOW_EDITOR || (this as any).IS_SHOW_READER;
     },
-    shouldShowCueConfig() {
-      return this.shouldViewShowConfig || this.IS_CUE_EDITOR || this.IS_CUE_READER;
+    shouldShowCueConfig(): boolean {
+      return (
+        this.shouldViewShowConfig || (this as any).IS_CUE_EDITOR || (this as any).IS_CUE_READER
+      );
     },
-    shouldShowScriptConfig() {
-      return this.shouldViewShowConfig || this.IS_SCRIPT_EDITOR || this.IS_SCRIPT_READER;
+    shouldShowScriptConfig(): boolean {
+      return (
+        this.shouldViewShowConfig ||
+        (this as any).IS_SCRIPT_EDITOR ||
+        (this as any).IS_SCRIPT_READER
+      );
     },
-    shouldShowSessionConfig() {
-      return this.shouldViewShowConfig || this.IS_SHOW_EXECUTOR;
+    shouldShowSessionConfig(): boolean {
+      return this.shouldViewShowConfig || (this as any).IS_SHOW_EXECUTOR;
     },
-    requiresRedirect() {
+    requiresRedirect(): boolean {
       return (
         !this.shouldViewShowConfig &&
         !this.shouldShowCueConfig &&
@@ -147,14 +154,14 @@ export default {
     },
   },
   watch: {
-    requiresRedirect() {
+    requiresRedirect(): void {
       if (this.requiresRedirect) {
-        this.$toast.warning('Something went wrong viewing show config page');
+        (this as any).$toast.warning('Something went wrong viewing show config page');
         this.$router.replace('/');
       }
     },
   },
-  beforeMount() {
+  beforeMount(): void {
     if (!this.shouldViewShowConfig) {
       if (this.shouldShowCueConfig) {
         this.$router.replace({ name: 'show-config-cues' });
@@ -164,29 +171,29 @@ export default {
       } else if (this.shouldShowSessionConfig) {
         this.$router.replace({ name: 'show-sessions' });
       } else {
-        this.$toast.warning('Something went wrong viewing show config page');
+        (this as any).$toast.warning('Something went wrong viewing show config page');
         this.$router.replace('/');
       }
     }
   },
-  mounted() {
+  mounted(): void {
     this.calculateNavbarHeight();
     window.addEventListener('resize', this.calculateNavbarHeight);
   },
-  beforeDestroy() {
+  beforeDestroy(): void {
     window.removeEventListener('resize', this.calculateNavbarHeight);
   },
   methods: {
-    calculateNavbarHeight() {
+    calculateNavbarHeight(): void {
       const navbar = document.querySelector('.navbar');
       if (navbar) {
-        this.navbarHeight = navbar.offsetHeight;
+        this.navbarHeight = (navbar as HTMLElement).offsetHeight;
       } else {
         this.navbarHeight = 56;
       }
     },
   },
-};
+});
 </script>
 
 <style scoped>
diff --git a/client/src/views/show/ShowLiveView.vue b/client/src/views/show/ShowLiveView.vue
index b657fde7..fc8ca79b 100644
--- a/client/src/views/show/ShowLiveView.vue
+++ b/client/src/views/show/ShowLiveView.vue
@@ -77,14 +77,15 @@
   </b-container>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { mapGetters, mapActions } from 'vuex';
 
 import { formatTimerParts, msToTimerParts, msToTimerString } from '@/js/utils';
 import ScriptViewPane from '@/vue_components/show/live/ScriptViewPane.vue';
 import StageManagerPane from '@/vue_components/show/live/StageManagerPane.vue';
 
-export default {
+export default defineComponent({
   name: 'ShowLiveView',
   components: {
     ScriptViewPane,
@@ -92,54 +93,56 @@ export default {
   },
   data() {
     return {
-      // Session timing
       elapsedTime: 0,
-      elapsedTimer: null,
-      startTime: null,
+      elapsedTimer: null as ReturnType<typeof setInterval> | null,
+      startTime: null as Date | null,
       loadedSessionData: false,
-
-      // Page display (updated via event from ScriptViewPane)
       currentPage: 1,
-
-      // Interval display state
-      intervalTimer: null,
-      intervalStartDate: null,
+      intervalTimer: null as ReturnType<typeof setInterval> | null,
+      intervalStartDate: null as Date | null,
       isIntervalLong: false,
-      intervalTimerValues: [0, 0, 0],
+      intervalTimerValues: [0, 0, 0] as (string | number)[],
       intervalRemainingTime: 0,
     };
   },
   computed: {
-    isScriptFollowing() {
+    isScriptFollowing(): boolean {
       if (this.loadedSessionData) {
-        return this.CURRENT_SHOW_SESSION.client_internal_id != null && !this.isScriptLeader;
+        return (
+          (this as any).CURRENT_SHOW_SESSION.client_internal_id != null && !this.isScriptLeader
+        );
       }
       return false;
     },
-    isScriptLeader() {
+    isScriptLeader(): boolean {
       if (this.loadedSessionData) {
-        return this.CURRENT_SHOW_SESSION.client_internal_id === this.INTERNAL_UUID;
+        return (
+          (this as any).CURRENT_SHOW_SESSION.client_internal_id === (this as any).INTERNAL_UUID
+        );
       }
       return false;
     },
-    intervalOverlayHeading() {
-      if (this.CURRENT_SHOW_INTERVAL == null || this.ACT_LIST.length === 0) {
+    intervalOverlayHeading(): string {
+      if ((this as any).CURRENT_SHOW_INTERVAL == null || (this as any).ACT_LIST.length === 0) {
         return '';
       }
-      return this.ACT_LIST.find((act) => act.id === this.CURRENT_SHOW_INTERVAL.act_id).name;
+      return (this as any).ACT_LIST.find(
+        (act: any) => act.id === (this as any).CURRENT_SHOW_INTERVAL.act_id
+      ).name;
     },
-    intervalTimerColour() {
+    intervalTimerColour(): string {
       if (this.isIntervalLong) {
         return '#cc0000';
       }
       const intervalProgress =
-        Math.abs(this.intervalRemainingTime) / (this.CURRENT_SHOW_INTERVAL.initial_length * 1000);
+        Math.abs(this.intervalRemainingTime) /
+        ((this as any).CURRENT_SHOW_INTERVAL.initial_length * 1000);
       if (intervalProgress > 0.25) {
         return '#00cc00';
       }
       return '#d76113';
     },
-    intervalTimerStyle() {
+    intervalTimerStyle(): Record<string, string> {
       return {
         margin: '.5rem',
         'border-radius': '3px',
@@ -161,31 +164,30 @@ export default {
     }),
   },
   watch: {
-    CURRENT_SHOW_INTERVAL() {
+    CURRENT_SHOW_INTERVAL(): void {
       this.setupIntervalTimer();
     },
   },
-  async mounted() {
-    await Promise.all([this.GET_SHOW_SESSION_DATA(), this.GET_ACT_LIST()]);
+  async mounted(): Promise<void> {
+    await Promise.all([(this as any).GET_SHOW_SESSION_DATA(), (this as any).GET_ACT_LIST()]);
     this.loadedSessionData = true;
 
-    if (this.CURRENT_SHOW_INTERVAL != null) {
+    if ((this as any).CURRENT_SHOW_INTERVAL != null) {
       this.setupIntervalTimer();
     }
 
-    // Setup elapsed time tracking
     this.updateElapsedTime();
     this.startTime = this.createDateAsUTC(
-      new Date(this.CURRENT_SHOW_SESSION.start_date_time.replace(' ', 'T'))
+      new Date((this as any).CURRENT_SHOW_SESSION.start_date_time.replace(' ', 'T'))
     );
     this.elapsedTimer = setInterval(this.updateElapsedTime, 1000);
   },
-  destroyed() {
-    clearInterval(this.elapsedTimer);
+  destroyed(): void {
+    if (this.elapsedTimer !== null) clearInterval(this.elapsedTimer);
   },
   methods: {
     msToTimerString,
-    createDateAsUTC(date) {
+    createDateAsUTC(date: Date): Date {
       return new Date(
         Date.UTC(
           date.getFullYear(),
@@ -197,43 +199,43 @@ export default {
         )
       );
     },
-    updateElapsedTime() {
+    updateElapsedTime(): void {
       if (this.startTime != null) {
-        this.elapsedTime = Date.now() - this.startTime;
+        this.elapsedTime = Date.now() - this.startTime.getTime();
       }
     },
-    stopInterval() {
-      this.$socket.sendObj({
+    stopInterval(): void {
+      (this as any).$socket.sendObj({
         OP: 'END_INTERVAL',
         DATA: {},
       });
-      this.$toast.success('Interval stopped!');
+      (this as any).$toast.success('Interval stopped!');
     },
-    onOverlayShown() {
-      this.$refs['interval-overlay'].focus();
+    onOverlayShown(): void {
+      (this.$refs['interval-overlay'] as HTMLElement).focus();
     },
-    onOverlayHidden() {
-      this.$refs.scriptPane?.focusScript();
+    onOverlayHidden(): void {
+      (this.$refs.scriptPane as any)?.focusScript();
     },
-    setupIntervalTimer() {
-      clearInterval(this.intervalTimer);
+    setupIntervalTimer(): void {
+      if (this.intervalTimer !== null) clearInterval(this.intervalTimer);
       this.intervalTimer = null;
       this.intervalTimerValues = [0, 0, 0];
       this.isIntervalLong = false;
       this.intervalRemainingTime = 0;
-      if (this.CURRENT_SHOW_INTERVAL != null) {
+      if ((this as any).CURRENT_SHOW_INTERVAL != null) {
         this.intervalStartDate = this.createDateAsUTC(
-          new Date(this.CURRENT_SHOW_INTERVAL.start_datetime.replace(' ', 'T'))
+          new Date((this as any).CURRENT_SHOW_INTERVAL.start_datetime.replace(' ', 'T'))
         );
         this.updateIntervalTimer();
         this.intervalTimer = setInterval(this.updateIntervalTimer, 500);
       }
     },
-    updateIntervalTimer() {
+    updateIntervalTimer(): void {
       if (this.intervalStartDate != null) {
-        const intervalElapsedTime = Date.now() - this.intervalStartDate;
+        const intervalElapsedTime = Date.now() - this.intervalStartDate.getTime();
         this.intervalRemainingTime =
-          this.CURRENT_SHOW_INTERVAL.initial_length * 1000 - intervalElapsedTime;
+          (this as any).CURRENT_SHOW_INTERVAL.initial_length * 1000 - intervalElapsedTime;
         if (this.intervalRemainingTime < 0) {
           this.isIntervalLong = true;
         }
@@ -244,7 +246,7 @@ export default {
     },
     ...mapActions(['GET_SHOW_SESSION_DATA', 'GET_ACT_LIST']),
   },
-};
+});
 </script>
 
 <style scoped>
diff --git a/client/src/views/show/config/ConfigActsAndScenes.vue b/client/src/views/show/config/ConfigActsAndScenes.vue
index d81b590d..24207b63 100644
--- a/client/src/views/show/config/ConfigActsAndScenes.vue
+++ b/client/src/views/show/config/ConfigActsAndScenes.vue
@@ -15,12 +15,13 @@
   </b-container>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import ConfigActs from '@/vue_components/show/config/acts_and_scenes/ConfigActs.vue';
 import ConfigScenes from '@/vue_components/show/config/acts_and_scenes/ConfigScenes.vue';
 
-export default {
+export default defineComponent({
   name: 'ConfigActsAndScenes',
   components: { ConfigScenes, ConfigActs },
-};
+});
 </script>
diff --git a/client/src/views/show/config/ConfigCast.vue b/client/src/views/show/config/ConfigCast.vue
index ae2de076..b607f361 100644
--- a/client/src/views/show/config/ConfigCast.vue
+++ b/client/src/views/show/config/ConfigCast.vue
@@ -143,14 +143,15 @@
   </b-container>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { required } from 'vuelidate/lib/validators';
 import { mapGetters, mapActions } from 'vuex';
 import CastLineStats from '@/vue_components/show/config/cast/CastLineStats.vue';
 import log from 'loglevel';
 import formValidationMixin from '@/mixins/formValidationMixin';
 
-export default {
+export default defineComponent({
   name: 'ConfigCast',
   components: { CastLineStats },
   mixins: [formValidationMixin],
@@ -164,8 +165,8 @@ export default {
       rowsPerPage: 15,
       currentPage: 1,
       editFormState: {
-        id: null,
-        showID: null,
+        id: null as number | null,
+        showID: null as number | null,
         firstName: '',
         lastName: '',
       },
@@ -176,47 +177,35 @@ export default {
   },
   validations: {
     newFormState: {
-      firstName: {
-        required,
-      },
-      lastName: {
-        required,
-      },
+      firstName: { required },
+      lastName: { required },
     },
     editFormState: {
-      firstName: {
-        required,
-      },
-      lastName: {
-        required,
-      },
+      firstName: { required },
+      lastName: { required },
     },
   },
   computed: {
     ...mapGetters(['CAST_LIST', 'IS_SHOW_EDITOR']),
   },
-  async mounted() {
-    await this.GET_CAST_LIST();
+  async mounted(): Promise<void> {
+    await (this as any).GET_CAST_LIST();
   },
   methods: {
-    resetNewForm() {
-      this.resetForm('newFormState', {
-        firstName: '',
-        lastName: '',
-      });
+    resetNewForm(): void {
+      (this as any).resetForm('newFormState', { firstName: '', lastName: '' });
       this.submittingNewCast = false;
     },
-    async onSubmitNew(event) {
-      this.$v.newFormState.$touch();
-      if (this.$v.newFormState.$anyError || this.submittingNewCast) {
+    async onSubmitNew(event: Event): Promise<void> {
+      (this as any).$v.newFormState.$touch();
+      if ((this as any).$v.newFormState.$anyError || this.submittingNewCast) {
         event.preventDefault();
         return;
       }
-
       this.submittingNewCast = true;
       try {
-        await this.ADD_CAST_MEMBER(this.newFormState);
-        this.$bvModal.hide('new-cast');
+        await (this as any).ADD_CAST_MEMBER(this.newFormState);
+        (this as any).$bvModal.hide('new-cast');
         this.resetNewForm();
       } catch (error) {
         log.error('Error submitting new cast member:', error);
@@ -225,17 +214,17 @@ export default {
         this.submittingNewCast = false;
       }
     },
-    openEditForm(castMember) {
+    openEditForm(castMember: any): void {
       if (castMember != null) {
         this.editFormState.id = castMember.item.id;
         this.editFormState.showID = castMember.item.show_id;
         this.editFormState.firstName = castMember.item.first_name;
         this.editFormState.lastName = castMember.item.last_name;
-        this.$bvModal.show('edit-cast');
+        (this as any).$bvModal.show('edit-cast');
       }
     },
-    resetEditForm() {
-      this.resetForm('editFormState', {
+    resetEditForm(): void {
+      (this as any).resetForm('editFormState', {
         id: null,
         showID: null,
         firstName: '',
@@ -244,17 +233,16 @@ export default {
       this.submittingEditCast = false;
       this.deletingCast = false;
     },
-    async onSubmitEdit(event) {
-      this.$v.editFormState.$touch();
-      if (this.$v.editFormState.$anyError || this.submittingEditCast) {
+    async onSubmitEdit(event: Event): Promise<void> {
+      (this as any).$v.editFormState.$touch();
+      if ((this as any).$v.editFormState.$anyError || this.submittingEditCast) {
         event.preventDefault();
         return;
       }
-
       this.submittingEditCast = true;
       try {
-        await this.UPDATE_CAST_MEMBER(this.editFormState);
-        this.$bvModal.hide('edit-cast');
+        await (this as any).UPDATE_CAST_MEMBER(this.editFormState);
+        (this as any).$bvModal.hide('edit-cast');
         this.resetEditForm();
       } catch (error) {
         log.error('Error submitting edit cast member:', error);
@@ -263,17 +251,16 @@ export default {
         this.submittingEditCast = false;
       }
     },
-    async deleteCastMember(castMember) {
+    async deleteCastMember(castMember: any): Promise<void> {
       if (this.deletingCast) {
         return;
       }
-
       const msg = `Are you sure you want to delete ${castMember.item.first_name} ${castMember.item.last_name}?`;
-      const action = await this.$bvModal.msgBoxConfirm(msg, {});
+      const action = await (this as any).$bvModal.msgBoxConfirm(msg, {});
       if (action === true) {
         this.deletingCast = true;
         try {
-          await this.DELETE_CAST_MEMBER(castMember.item.id);
+          await (this as any).DELETE_CAST_MEMBER(castMember.item.id);
         } catch (error) {
           log.error('Error deleting cast member:', error);
         } finally {
@@ -283,7 +270,7 @@ export default {
     },
     ...mapActions(['GET_CAST_LIST', 'ADD_CAST_MEMBER', 'DELETE_CAST_MEMBER', 'UPDATE_CAST_MEMBER']),
   },
-};
+});
 </script>
 
 <style scoped></style>
diff --git a/client/src/views/show/config/ConfigCharacters.vue b/client/src/views/show/config/ConfigCharacters.vue
index 1ce8c5c1..8d57b93b 100644
--- a/client/src/views/show/config/ConfigCharacters.vue
+++ b/client/src/views/show/config/ConfigCharacters.vue
@@ -162,7 +162,8 @@
   </b-container>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { required } from 'vuelidate/lib/validators';
 import { mapGetters, mapActions } from 'vuex';
 import CharacterLineStats from '@/vue_components/show/config/characters/CharacterLineStats.vue';
@@ -170,7 +171,7 @@ import log from 'loglevel';
 import CharacterGroups from '@/vue_components/show/config/characters/CharacterGroups.vue';
 import formValidationMixin from '@/mixins/formValidationMixin';
 
-export default {
+export default defineComponent({
   name: 'ConfigCharacters',
   components: { CharacterGroups, CharacterLineStats },
   mixins: [formValidationMixin],
@@ -187,14 +188,14 @@ export default {
       newFormState: {
         name: '',
         description: '',
-        played_by: null,
+        played_by: null as number | null,
       },
       editFormState: {
-        id: null,
-        showID: null,
+        id: null as number | null,
+        showID: null as number | null,
         name: '',
         description: '',
-        played_by: null,
+        played_by: null as number | null,
       },
       submittingNewCharacter: false,
       submittingEditCharacter: false,
@@ -203,55 +204,46 @@ export default {
   },
   validations: {
     newFormState: {
-      name: {
-        required,
-      },
+      name: { required },
       description: {},
       played_by: {},
     },
     editFormState: {
-      name: {
-        required,
-      },
+      name: { required },
       description: {},
       played_by: {},
     },
   },
   computed: {
     ...mapGetters(['CHARACTER_LIST', 'CAST_LIST', 'IS_SHOW_EDITOR']),
-    castOptions() {
+    castOptions(): unknown[] {
       return [
         { value: null, text: 'Please select an option', disabled: true },
-        ...this.CAST_LIST.map((castMember) => ({
+        ...(this as any).CAST_LIST.map((castMember: any) => ({
           value: castMember.id,
           text: `${castMember.first_name} ${castMember.last_name}`,
         })),
       ];
     },
   },
-  async mounted() {
-    await Promise.all([this.GET_CHARACTER_LIST(), this.GET_CAST_LIST()]);
+  async mounted(): Promise<void> {
+    await Promise.all([(this as any).GET_CHARACTER_LIST(), (this as any).GET_CAST_LIST()]);
   },
   methods: {
-    resetNewForm() {
-      this.resetForm('newFormState', {
-        name: '',
-        description: '',
-        played_by: null,
-      });
+    resetNewForm(): void {
+      (this as any).resetForm('newFormState', { name: '', description: '', played_by: null });
       this.submittingNewCharacter = false;
     },
-    async onSubmitNew(event) {
-      this.$v.newFormState.$touch();
-      if (this.$v.newFormState.$anyError || this.submittingNewCharacter) {
+    async onSubmitNew(event: Event): Promise<void> {
+      (this as any).$v.newFormState.$touch();
+      if ((this as any).$v.newFormState.$anyError || this.submittingNewCharacter) {
         event.preventDefault();
         return;
       }
-
       this.submittingNewCharacter = true;
       try {
-        await this.ADD_CHARACTER(this.newFormState);
-        this.$bvModal.hide('new-character');
+        await (this as any).ADD_CHARACTER(this.newFormState);
+        (this as any).$bvModal.hide('new-character');
         this.resetNewForm();
       } catch (error) {
         log.error('Error submitting new character:', error);
@@ -260,18 +252,18 @@ export default {
         this.submittingNewCharacter = false;
       }
     },
-    openEditForm(character) {
+    openEditForm(character: any): void {
       if (character != null) {
         this.editFormState.id = character.item.id;
         this.editFormState.showID = character.item.show_id;
         this.editFormState.name = character.item.name;
         this.editFormState.description = character.item.description;
         this.editFormState.played_by = character.item.played_by;
-        this.$bvModal.show('edit-character');
+        (this as any).$bvModal.show('edit-character');
       }
     },
-    resetEditForm() {
-      this.resetForm('editFormState', {
+    resetEditForm(): void {
+      (this as any).resetForm('editFormState', {
         id: null,
         showID: null,
         name: '',
@@ -281,17 +273,16 @@ export default {
       this.submittingEditCharacter = false;
       this.deletingCharacter = false;
     },
-    async onSubmitEdit(event) {
-      this.$v.editFormState.$touch();
-      if (this.$v.editFormState.$anyError || this.submittingEditCharacter) {
+    async onSubmitEdit(event: Event): Promise<void> {
+      (this as any).$v.editFormState.$touch();
+      if ((this as any).$v.editFormState.$anyError || this.submittingEditCharacter) {
         event.preventDefault();
         return;
       }
-
       this.submittingEditCharacter = true;
       try {
-        await this.UPDATE_CHARACTER(this.editFormState);
-        this.$bvModal.hide('edit-character');
+        await (this as any).UPDATE_CHARACTER(this.editFormState);
+        (this as any).$bvModal.hide('edit-character');
         this.resetEditForm();
       } catch (error) {
         log.error('Error submitting edit character:', error);
@@ -300,17 +291,16 @@ export default {
         this.submittingEditCharacter = false;
       }
     },
-    async deleteCharacter(character) {
+    async deleteCharacter(character: any): Promise<void> {
       if (this.deletingCharacter) {
         return;
       }
-
       const msg = `Are you sure you want to delete ${character.item.name}?`;
-      const action = await this.$bvModal.msgBoxConfirm(msg, {});
+      const action = await (this as any).$bvModal.msgBoxConfirm(msg, {});
       if (action === true) {
         this.deletingCharacter = true;
         try {
-          await this.DELETE_CHARACTER(character.item.id);
+          await (this as any).DELETE_CHARACTER(character.item.id);
         } catch (error) {
           log.error('Error deleting character:', error);
         } finally {
@@ -326,7 +316,7 @@ export default {
       'DELETE_CHARACTER',
     ]),
   },
-};
+});
 </script>
 
 <style scoped></style>
diff --git a/client/src/views/show/config/ConfigCues.vue b/client/src/views/show/config/ConfigCues.vue
index 7e79952d..e7b3ccc0 100644
--- a/client/src/views/show/config/ConfigCues.vue
+++ b/client/src/views/show/config/ConfigCues.vue
@@ -223,7 +223,8 @@
   </b-container>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { required, maxLength } from 'vuelidate/lib/validators';
 import { mapGetters, mapActions } from 'vuex';
 import log from 'loglevel';
@@ -231,7 +232,7 @@ import log from 'loglevel';
 import CueEditor from '@/vue_components/show/config/cues/CueEditor.vue';
 import CueCountStats from '@/vue_components/show/config/cues/CueCountStats.vue';
 
-export default {
+export default defineComponent({
   name: 'ConfigCues',
   components: { CueCountStats, CueEditor },
   data() {
@@ -245,7 +246,7 @@ export default {
         colour: '#000000',
       },
       editCueTypeFormState: {
-        id: null,
+        id: null as number | null,
         prefix: '',
         description: '',
         colour: '#000000',
@@ -253,10 +254,10 @@ export default {
       submittingNewCueType: false,
       submittingEditCueType: false,
       deletingCueType: false,
-      importCueTypeGroups: [],
-      cueTypeGroupExpanded: {},
+      importCueTypeGroups: [] as any[],
+      cueTypeGroupExpanded: {} as Record<number, boolean>,
       isLoadingImport: false,
-      isImporting: {},
+      isImporting: {} as Record<number, boolean>,
       importCueTypeFields: [
         { key: 'prefix', label: 'Prefix' },
         { key: 'description', label: 'Description' },
@@ -294,8 +295,8 @@ export default {
   computed: {
     ...mapGetters(['CUE_TYPES', 'IS_SHOW_EDITOR']),
   },
-  async mounted() {
-    await this.GET_CUE_TYPES();
+  async mounted(): Promise<void> {
+    await (this as any).GET_CUE_TYPES();
   },
   methods: {
     ...mapActions([
@@ -305,7 +306,7 @@ export default {
       'UPDATE_CUE_TYPE',
       'GET_IMPORTABLE_CUE_TYPES',
     ]),
-    resetNewCueTypeForm() {
+    resetNewCueTypeForm(): void {
       this.newCueTypeForm = {
         prefix: '',
         description: '',
@@ -314,24 +315,24 @@ export default {
       this.submittingNewCueType = false;
 
       this.$nextTick(() => {
-        this.$v.$reset();
+        (this as any).$v.$reset();
       });
     },
-    validateNewCueTypeState(name) {
-      const { $dirty, $error } = this.$v.newCueTypeForm[name];
+    validateNewCueTypeState(name: string): boolean | null {
+      const { $dirty, $error } = (this as any).$v.newCueTypeForm[name];
       return $dirty ? !$error : null;
     },
-    async onSubmitNewCueType(event) {
-      this.$v.newCueTypeForm.$touch();
-      if (this.$v.newCueTypeForm.$anyError || this.submittingNewCueType) {
+    async onSubmitNewCueType(event: Event): Promise<void> {
+      (this as any).$v.newCueTypeForm.$touch();
+      if ((this as any).$v.newCueTypeForm.$anyError || this.submittingNewCueType) {
         event.preventDefault();
         return;
       }
 
       this.submittingNewCueType = true;
       try {
-        await this.ADD_CUE_TYPE(this.newCueTypeForm);
-        this.$bvModal.hide('new-cue-type');
+        await (this as any).ADD_CUE_TYPE(this.newCueTypeForm);
+        (this as any).$bvModal.hide('new-cue-type');
         this.resetNewCueTypeForm();
       } catch (error) {
         log.error('Error submitting new cue type:', error);
@@ -340,17 +341,17 @@ export default {
         this.submittingNewCueType = false;
       }
     },
-    async deleteCueType(cueType) {
+    async deleteCueType(cueType: any): Promise<void> {
       if (this.deletingCueType) {
         return;
       }
 
       const msg = `Are you sure you want to delete ${cueType.item.prefix}?`;
-      const action = await this.$bvModal.msgBoxConfirm(msg, {});
+      const action = await (this as any).$bvModal.msgBoxConfirm(msg, {});
       if (action === true) {
         this.deletingCueType = true;
         try {
-          await this.DELETE_CUE_TYPE(cueType.item.id);
+          await (this as any).DELETE_CUE_TYPE(cueType.item.id);
         } catch (error) {
           log.error('Error deleting cue type:', error);
         } finally {
@@ -358,16 +359,16 @@ export default {
         }
       }
     },
-    openEditCueTypeForm(cueType) {
+    openEditCueTypeForm(cueType: any): void {
       if (cueType != null) {
         this.editCueTypeFormState.id = cueType.item.id;
         this.editCueTypeFormState.prefix = cueType.item.prefix;
         this.editCueTypeFormState.description = cueType.item.description;
         this.editCueTypeFormState.colour = cueType.item.colour;
-        this.$bvModal.show('edit-cue-type');
+        (this as any).$bvModal.show('edit-cue-type');
       }
     },
-    resetEditCueTypeForm() {
+    resetEditCueTypeForm(): void {
       this.editCueTypeFormState = {
         id: null,
         prefix: '',
@@ -378,20 +379,20 @@ export default {
       this.deletingCueType = false;
 
       this.$nextTick(() => {
-        this.$v.$reset();
+        (this as any).$v.$reset();
       });
     },
-    async onSubmitEditCueType(event) {
-      this.$v.editCueTypeFormState.$touch();
-      if (this.$v.editCueTypeFormState.$anyError || this.submittingEditCueType) {
+    async onSubmitEditCueType(event: Event): Promise<void> {
+      (this as any).$v.editCueTypeFormState.$touch();
+      if ((this as any).$v.editCueTypeFormState.$anyError || this.submittingEditCueType) {
         event.preventDefault();
         return;
       }
 
       this.submittingEditCueType = true;
       try {
-        await this.UPDATE_CUE_TYPE(this.editCueTypeFormState);
-        this.$bvModal.hide('edit-cue-type');
+        await (this as any).UPDATE_CUE_TYPE(this.editCueTypeFormState);
+        (this as any).$bvModal.hide('edit-cue-type');
         this.resetEditCueTypeForm();
       } catch (error) {
         log.error('Error submitting edit cue type:', error);
@@ -400,17 +401,17 @@ export default {
         this.submittingEditCueType = false;
       }
     },
-    validateEditCueTypeState(name) {
-      const { $dirty, $error } = this.$v.editCueTypeFormState[name];
+    validateEditCueTypeState(name: string): boolean | null {
+      const { $dirty, $error } = (this as any).$v.editCueTypeFormState[name];
       return $dirty ? !$error : null;
     },
-    async openImportModal() {
-      this.$bvModal.show('import-cue-type-modal');
+    async openImportModal(): Promise<void> {
+      (this as any).$bvModal.show('import-cue-type-modal');
       this.isLoadingImport = true;
       try {
-        const data = await this.GET_IMPORTABLE_CUE_TYPES();
+        const data = await (this as any).GET_IMPORTABLE_CUE_TYPES();
         this.importCueTypeGroups = data.cue_type_groups;
-        data.cue_type_groups.forEach((show) => {
+        data.cue_type_groups.forEach((show: any) => {
           this.$set(this.cueTypeGroupExpanded, show.id, true);
         });
       } catch (e) {
@@ -419,13 +420,13 @@ export default {
         this.isLoadingImport = false;
       }
     },
-    toggleImportShow(showId) {
+    toggleImportShow(showId: number): void {
       this.$set(this.cueTypeGroupExpanded, showId, !this.cueTypeGroupExpanded[showId]);
     },
-    async importCueType(cueType) {
+    async importCueType(cueType: any): Promise<void> {
       this.$set(this.isImporting, cueType.id, true);
       try {
-        await this.ADD_CUE_TYPE({
+        await (this as any).ADD_CUE_TYPE({
           prefix: cueType.prefix,
           description: cueType.description,
           colour: cueType.colour,
@@ -434,12 +435,12 @@ export default {
         this.$set(this.isImporting, cueType.id, false);
       }
     },
-    resetImportState() {
+    resetImportState(): void {
       this.importCueTypeGroups = [];
       this.cueTypeGroupExpanded = {};
       this.isLoadingImport = false;
       this.isImporting = {};
     },
   },
-};
+});
 </script>
diff --git a/client/src/views/show/config/ConfigMics.vue b/client/src/views/show/config/ConfigMics.vue
index 413ce742..307adf08 100644
--- a/client/src/views/show/config/ConfigMics.vue
+++ b/client/src/views/show/config/ConfigMics.vue
@@ -29,7 +29,8 @@
   </b-container>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { mapActions } from 'vuex';
 import MicList from '@/vue_components/show/config/mics/MicList.vue';
 import MicAllocations from '@/vue_components/show/config/mics/MicAllocations.vue';
@@ -37,7 +38,7 @@ import MicTimeline from '@/vue_components/show/config/mics/MicTimeline.vue';
 import SceneDensityHeatmap from '@/vue_components/show/config/mics/SceneDensityHeatmap.vue';
 import ResourceAvailability from '@/vue_components/show/config/mics/ResourceAvailability.vue';
 
-export default {
+export default defineComponent({
   name: 'ConfigMics',
   components: {
     MicAllocations,
@@ -51,14 +52,14 @@ export default {
       loaded: false,
     };
   },
-  async mounted() {
+  async mounted(): Promise<void> {
     await Promise.all([
-      this.GET_SCENE_LIST(),
-      this.GET_ACT_LIST(),
-      this.GET_CHARACTER_LIST(),
-      this.GET_CAST_LIST(),
-      this.GET_MICROPHONE_LIST(),
-      this.GET_MIC_ALLOCATIONS(),
+      (this as any).GET_SCENE_LIST(),
+      (this as any).GET_ACT_LIST(),
+      (this as any).GET_CHARACTER_LIST(),
+      (this as any).GET_CAST_LIST(),
+      (this as any).GET_MICROPHONE_LIST(),
+      (this as any).GET_MIC_ALLOCATIONS(),
     ]);
     this.loaded = true;
   },
@@ -72,5 +73,5 @@ export default {
       'GET_MIC_ALLOCATIONS',
     ]),
   },
-};
+});
 </script>
diff --git a/client/src/views/show/config/ConfigScript.vue b/client/src/views/show/config/ConfigScript.vue
index 3fdea0ad..66937724 100644
--- a/client/src/views/show/config/ConfigScript.vue
+++ b/client/src/views/show/config/ConfigScript.vue
@@ -15,17 +15,18 @@
   </b-container>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import ScriptConfig from '@/vue_components/show/config/script/ScriptEditor.vue';
 import StageDirectionStyles from '@/vue_components/show/config/script/StageDirectionStyles.vue';
 
-export default {
+export default defineComponent({
   name: 'ConfigScript',
   components: {
     ScriptConfig,
     StageDirectionConfigs: StageDirectionStyles,
   },
-};
+});
 </script>
 
 <style scoped></style>
diff --git a/client/src/views/show/config/ConfigScriptRevisions.vue b/client/src/views/show/config/ConfigScriptRevisions.vue
index cbb992df..c61d01c7 100644
--- a/client/src/views/show/config/ConfigScriptRevisions.vue
+++ b/client/src/views/show/config/ConfigScriptRevisions.vue
@@ -22,13 +22,14 @@
   </b-container>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { mapActions } from 'vuex';
 
 import ScriptRevisions from '@/vue_components/show/config/script/ScriptRevisions.vue';
 import CompiledScripts from '@/vue_components/show/config/script/CompiledScripts.vue';
 
-export default {
+export default defineComponent({
   name: 'ConfigScriptRevisions',
   components: { CompiledScripts, ScriptRevisions },
   data() {
@@ -36,14 +37,14 @@ export default {
       loading: true,
     };
   },
-  async mounted() {
-    await this.GET_SCRIPT_REVISIONS();
+  async mounted(): Promise<void> {
+    await (this as any).GET_SCRIPT_REVISIONS();
     this.loading = false;
   },
   methods: {
     ...mapActions(['GET_SCRIPT_REVISIONS']),
   },
-};
+});
 </script>
 
 <style scoped></style>
diff --git a/client/src/views/show/config/ConfigSessions.vue b/client/src/views/show/config/ConfigSessions.vue
index 3e517768..b65aaf75 100644
--- a/client/src/views/show/config/ConfigSessions.vue
+++ b/client/src/views/show/config/ConfigSessions.vue
@@ -20,12 +20,13 @@
   </b-container>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { mapActions } from 'vuex';
 import SessionList from '@/vue_components/show/config/sessions/SessionList.vue';
 import SessionTagList from '@/vue_components/show/config/sessions/SessionTagList.vue';
 
-export default {
+export default defineComponent({
   name: 'ConfigSessions',
   components: { SessionTagList, SessionList },
   data() {
@@ -33,14 +34,14 @@ export default {
       loaded: false,
     };
   },
-  async mounted() {
-    await this.GET_SHOW_SESSION_DATA();
-    await this.GET_SESSION_TAGS();
-    await this.GET_SCRIPT_REVISIONS();
+  async mounted(): Promise<void> {
+    await (this as any).GET_SHOW_SESSION_DATA();
+    await (this as any).GET_SESSION_TAGS();
+    await (this as any).GET_SCRIPT_REVISIONS();
     this.loaded = true;
   },
   methods: {
     ...mapActions(['GET_SHOW_SESSION_DATA', 'GET_SESSION_TAGS', 'GET_SCRIPT_REVISIONS']),
   },
-};
+});
 </script>
diff --git a/client/src/views/show/config/ConfigShow.vue b/client/src/views/show/config/ConfigShow.vue
index 2e554a29..9a1c0161 100644
--- a/client/src/views/show/config/ConfigShow.vue
+++ b/client/src/views/show/config/ConfigShow.vue
@@ -87,47 +87,48 @@
   </b-container>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { required, maxLength } from 'vuelidate/lib/validators';
 import { mapGetters, mapActions } from 'vuex';
 import { titleCase } from '@/js/utils';
 import log from 'loglevel';
 
-export default {
+export default defineComponent({
   name: 'ConfigShow',
   data() {
     return {
       editFormState: {
-        name: null,
-        start_date: null,
-        end_date: null,
-        first_act_id: null,
+        name: null as string | null,
+        start_date: null as string | null,
+        end_date: null as string | null,
+        first_act_id: null as number | null,
       },
       submittingEditShow: false,
     };
   },
   computed: {
-    tableData() {
-      const data = {};
-      Object.keys(this.CURRENT_SHOW).forEach(function updateSettingsKey(key) {
-        data[this.titleCase(key, '_')] = this.CURRENT_SHOW[key];
-      }, this);
+    tableData(): Record<string, unknown> {
+      const data: Record<string, unknown> = {};
+      Object.keys((this as any).CURRENT_SHOW).forEach((key) => {
+        data[titleCase(key, '_')] = (this as any).CURRENT_SHOW[key];
+      });
       return data;
     },
-    orderedKeys() {
+    orderedKeys(): string[] {
       return Object.keys(this.tableData).sort();
     },
-    actOptions() {
+    actOptions(): unknown[] {
       return [
         { value: null, text: 'N/A', disabled: false },
-        ...this.ACT_LIST.map((act) => ({ value: act.id, text: act.name })),
+        ...(this as any).ACT_LIST.map((act: any) => ({ value: act.id, text: act.name })),
       ];
     },
     ...mapGetters(['CURRENT_SHOW', 'ACT_LIST', 'IS_SHOW_EDITOR']),
   },
-  async mounted() {
-    await this.GET_SHOW_DETAILS();
-    await this.GET_ACT_LIST();
+  async mounted(): Promise<void> {
+    await (this as any).GET_SHOW_DETAILS();
+    await (this as any).GET_ACT_LIST();
   },
   validations: {
     editFormState: {
@@ -153,7 +154,7 @@ export default {
   methods: {
     titleCase,
     ...mapActions(['GET_SHOW_DETAILS', 'GET_ACT_LIST', 'UPDATE_SHOW']),
-    resetEditForm() {
+    resetEditForm(): void {
       this.editFormState = {
         name: null,
         start_date: null,
@@ -161,32 +162,30 @@ export default {
         first_act_id: null,
       };
       this.submittingEditShow = false;
-
       this.$nextTick(() => {
-        this.$v.$reset();
+        (this as any).$v.$reset();
       });
     },
-    openEditForm() {
-      Object.keys(this.editFormState).forEach(function populateEditForm(key) {
-        this.editFormState[key] = this.CURRENT_SHOW[key];
-      }, this);
-      this.$bvModal.show('edit-show');
+    openEditForm(): void {
+      Object.keys(this.editFormState).forEach((key) => {
+        (this as any).editFormState[key] = (this as any).CURRENT_SHOW[key];
+      });
+      (this as any).$bvModal.show('edit-show');
     },
-    validateEditState(name) {
-      const { $dirty, $error } = this.$v.editFormState[name];
+    validateEditState(name: string): boolean | null {
+      const { $dirty, $error } = (this as any).$v.editFormState[name];
       return $dirty ? !$error : null;
     },
-    async onSubmitEdit(event) {
-      this.$v.editFormState.$touch();
-      if (this.$v.editFormState.$anyError || this.submittingEditShow) {
+    async onSubmitEdit(event: Event): Promise<void> {
+      (this as any).$v.editFormState.$touch();
+      if ((this as any).$v.editFormState.$anyError || this.submittingEditShow) {
         event.preventDefault();
         return;
       }
-
       this.submittingEditShow = true;
       try {
-        await this.UPDATE_SHOW(this.editFormState);
-        this.$bvModal.hide('edit-show');
+        await (this as any).UPDATE_SHOW(this.editFormState);
+        (this as any).$bvModal.hide('edit-show');
         this.resetEditForm();
       } catch (error) {
         log.error('Error submitting edit show:', error);
@@ -196,7 +195,7 @@ export default {
       }
     },
   },
-};
+});
 </script>
 
 <style scoped>
diff --git a/client/src/views/show/config/ConfigStage.vue b/client/src/views/show/config/ConfigStage.vue
index cef1fbbc..bd6f54dd 100644
--- a/client/src/views/show/config/ConfigStage.vue
+++ b/client/src/views/show/config/ConfigStage.vue
@@ -31,7 +31,8 @@
   </b-container>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import CrewList from '@/vue_components/show/config/stage/CrewList.vue';
 import SceneryList from '@/vue_components/show/config/stage/SceneryList.vue';
 import PropsList from '@/vue_components/show/config/stage/PropsList.vue';
@@ -39,7 +40,7 @@ import StageManager from '@/vue_components/show/config/stage/StageManager.vue';
 import StageTimeline from '@/vue_components/show/config/stage/StageTimeline.vue';
 import CrewTimeline from '@/vue_components/show/config/stage/CrewTimeline.vue';
 
-export default {
+export default defineComponent({
   name: 'ConfigCrew',
   components: {
     StageManager,
@@ -49,5 +50,5 @@ export default {
     StageTimeline,
     CrewTimeline,
   },
-};
+});
 </script>
diff --git a/client/src/views/user/ForcePasswordChangeView.vue b/client/src/views/user/ForcePasswordChangeView.vue
index 2223d0bb..ecb0dbe2 100644
--- a/client/src/views/user/ForcePasswordChangeView.vue
+++ b/client/src/views/user/ForcePasswordChangeView.vue
@@ -76,11 +76,12 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { makeURL } from '@/js/utils';
 import passwordValidationMixin from '@/mixins/passwordValidation';
 
-export default {
+export default defineComponent({
   name: 'ForcePasswordChangeView',
   mixins: [passwordValidationMixin],
   data() {
@@ -95,20 +96,20 @@ export default {
   validations() {
     return {
       state: {
-        newPassword: this.getPasswordValidations(),
-        confirmPassword: this.getConfirmPasswordValidations('newPassword'),
+        newPassword: (this as any).getPasswordValidations(),
+        confirmPassword: (this as any).getConfirmPasswordValidations('newPassword'),
       },
     };
   },
   computed: {
-    isDisabled() {
-      return Boolean(this.$v.state.$invalid);
+    isDisabled(): boolean {
+      return Boolean((this as any).$v.state.$invalid);
     },
   },
   methods: {
-    async handlePasswordChange() {
-      this.$v.state.$touch();
-      if (this.$v.state.$anyError) {
+    async handlePasswordChange(): Promise<void> {
+      (this as any).$v.state.$touch();
+      if ((this as any).$v.state.$anyError) {
         return;
       }
 
@@ -117,45 +118,34 @@ export default {
       try {
         const response = await fetch(makeURL('/api/v1/auth/change-password'), {
           method: 'PATCH',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify({
-            new_password: this.state.newPassword,
-          }),
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ new_password: this.state.newPassword }),
         });
 
         if (response.ok) {
           const data = await response.json();
-
-          // Update auth token with new token
           if (data.access_token) {
             await this.$store.commit('SET_AUTH_TOKEN', data.access_token);
           }
-
-          // Refresh current user to clear requires_password_change flag
           await this.$store.dispatch('GET_CURRENT_USER');
-
           this.$toast.success('Password changed successfully!');
-
-          // Redirect to home page
           this.$router.push('/');
         } else {
           const error = await response.json();
           this.$toast.error(error.message || 'Failed to change password');
         }
-      } catch (error) {
+      } catch {
         this.$toast.error('An error occurred while changing password');
       } finally {
         this.loading = false;
       }
     },
-    async handleLogout() {
+    async handleLogout(): Promise<void> {
       await this.$store.dispatch('USER_LOGOUT');
       this.$router.push('/login');
     },
   },
-};
+});
 </script>
 
 <style scoped>
diff --git a/client/src/views/user/LoginView.vue b/client/src/views/user/LoginView.vue
index 84b7dbbe..e676e114 100644
--- a/client/src/views/user/LoginView.vue
+++ b/client/src/views/user/LoginView.vue
@@ -47,11 +47,12 @@
   </b-container>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { required } from 'vuelidate/lib/validators';
 import { mapActions } from 'vuex';
 
-export default {
+export default defineComponent({
   name: 'LoginView',
   data() {
     return {
@@ -64,31 +65,27 @@ export default {
   },
   validations: {
     state: {
-      username: {
-        required,
-      },
-      password: {
-        required,
-      },
+      username: { required },
+      password: { required },
     },
   },
   computed: {
-    isDisabled() {
-      return Boolean(this.$v.state.$invalid);
+    isDisabled(): boolean {
+      return Boolean((this as any).$v.state.$invalid);
     },
   },
   methods: {
-    validateState(name) {
-      const { $dirty, $error } = this.$v.state[name];
+    validateState(name: string): boolean | null {
+      const { $dirty, $error } = (this as any).$v.state[name];
       return $dirty ? !$error : null;
     },
-    async doLogin(event) {
-      this.$v.state.$touch();
-      if (this.$v.state.$anyError) {
+    async doLogin(event: Event): Promise<void> {
+      (this as any).$v.state.$touch();
+      if ((this as any).$v.state.$anyError) {
         event.preventDefault();
       } else {
         this.showLoginFeedback = false;
-        const loginSuccess = await this.USER_LOGIN(this.state);
+        const loginSuccess = await (this as any).USER_LOGIN(this.state);
         if (loginSuccess) {
           this.$router.replace('/');
         } else {
@@ -98,7 +95,7 @@ export default {
     },
     ...mapActions(['USER_LOGIN']),
   },
-};
+});
 </script>
 
 <style scoped></style>
diff --git a/client/src/views/user/Settings.vue b/client/src/views/user/Settings.vue
index e80c2a4b..42cb65f7 100644
--- a/client/src/views/user/Settings.vue
+++ b/client/src/views/user/Settings.vue
@@ -24,7 +24,8 @@
   </b-container>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import StageDirectionStyles from '@/vue_components/user/settings/StageDirectionStyles.vue';
 import CueColourPreferences from '@/vue_components/user/settings/CueColourPreferences.vue';
 import AboutUser from '@/vue_components/user/settings/AboutUser.vue';
@@ -32,7 +33,7 @@ import UserSettingsConfig from '@/vue_components/user/settings/Settings.vue';
 import ApiToken from '@/vue_components/user/settings/ApiToken.vue';
 import ChangePassword from '@/vue_components/user/settings/ChangePassword.vue';
 
-export default {
+export default defineComponent({
   name: 'UserSettings',
   components: {
     UserSettingsConfig,
@@ -42,5 +43,5 @@ export default {
     ApiToken,
     ChangePassword,
   },
-};
+});
 </script>
diff --git a/client/src/vue_components/MarkdownRenderer.vue b/client/src/vue_components/MarkdownRenderer.vue
index 5f23502b..91f5c78f 100644
--- a/client/src/vue_components/MarkdownRenderer.vue
+++ b/client/src/vue_components/MarkdownRenderer.vue
@@ -4,11 +4,12 @@
   <!-- eslint-enable vue/no-v-html -->
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { marked } from 'marked';
 import DOMPurify from 'dompurify';
 
-export default {
+export default defineComponent({
   name: 'MarkdownRenderer',
   props: {
     content: {
@@ -17,11 +18,11 @@ export default {
     },
   },
   computed: {
-    renderedHtml() {
+    renderedHtml(): string {
       if (!this.content) return '';
 
       try {
-        const rawHtml = marked.parse(this.content);
+        const rawHtml = marked.parse(this.content) as string;
         let transformedHtml = this.transformImagePaths(rawHtml);
         transformedHtml = this.transformMarkdownLinks(transformedHtml);
         return DOMPurify.sanitize(transformedHtml, {
@@ -55,39 +56,34 @@ export default {
           ALLOWED_ATTR: ['href', 'src', 'alt', 'title', 'class'],
         });
       } catch (error) {
-        this.$log.error('Error rendering markdown:', error);
+        (this as any).$log.error('Error rendering markdown:', error);
         return '<p class="text-danger">Error rendering documentation</p>';
       }
     },
   },
   methods: {
-    transformImagePaths(html) {
-      // Transform: ../images/topic/file.png → /docs/images/topic/file.png
-      // Also handles: ../../images/topic/file.png for nested docs
+    transformImagePaths(html: string): string {
       return html
         .replace(/src="\.\.\/\.\.\/images\//g, 'src="/docs/images/')
         .replace(/src="\.\.\/images\//g, 'src="/docs/images/');
     },
-    transformMarkdownLinks(html) {
-      // Transform internal .md links to /help routes
-      // Examples:
-      // href="./pages/getting_started.md" → href="/help/getting-started"
-      // href="../pages/show_config.md" → href="/help/show-config"
+    transformMarkdownLinks(html: string): string {
       return html
-        .replace(/href="(\.\.\/)*(pages\/[^"]+)\.md"/g, (match, dots, path) => {
-          // Remove 'pages/' prefix and convert underscores to dashes
-          const withoutPages = path.replace(/^pages\//, '');
-          const slug = withoutPages.replace(/_/g, '-');
-          return `href="/help/${slug}"`;
-        })
-        .replace(/href="\.\/([^"]+)\.md"/g, (match, path) => {
-          // Handle same-directory links
+        .replace(
+          /href="(\.\.\/)*(pages\/[^"]+)\.md"/g,
+          (_match: string, _dots: string, path: string) => {
+            const withoutPages = path.replace(/^pages\//, '');
+            const slug = withoutPages.replace(/_/g, '-');
+            return `href="/help/${slug}"`;
+          }
+        )
+        .replace(/href="\.\/([^"]+)\.md"/g, (_match: string, path: string) => {
           const slug = path.replace(/_/g, '-');
           return `href="/help/${slug}"`;
         });
     },
   },
-};
+});
 </script>
 
 <style scoped>
diff --git a/client/src/vue_components/config/ConfigLogs.vue b/client/src/vue_components/config/ConfigLogs.vue
index e91cda29..6c8189b8 100644
--- a/client/src/vue_components/config/ConfigLogs.vue
+++ b/client/src/vue_components/config/ConfigLogs.vue
@@ -106,16 +106,25 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import $ from 'jquery';
 import { debounce } from 'lodash';
 import { makeURL } from '@/js/utils';
 
-export default {
+interface LogEntry {
+  ts: string;
+  level: string;
+  filename: string;
+  lineno: number;
+  message: string;
+}
+
+export default defineComponent({
   name: 'ConfigLogs',
   data() {
     return {
-      entries: [],
+      entries: [] as LogEntry[],
       totalEntries: 0,
       source: 'server',
       levelFilter: '',
@@ -124,9 +133,13 @@ export default {
       limit: 500,
       liveRefresh: false,
       loading: false,
-      error: null,
+      error: null as string | null,
       autoScroll: true,
-      debounceContentSize: debounce(this.computeContentSize, 100),
+      searchDebounceTimer: null as ReturnType<typeof setTimeout> | null,
+      usernameDebounceTimer: null as ReturnType<typeof setTimeout> | null,
+      streamReader: null as ReadableStreamDefaultReader<Uint8Array> | null,
+      streamAborted: false,
+      debounceContentSize: null as ((...args: unknown[]) => void) | null,
 
       sourceOptions: [
         { text: 'Server', value: 'server' },
@@ -143,7 +156,7 @@ export default {
     };
   },
   watch: {
-    source() {
+    source(): void {
       this.usernameInput = '';
       if (this.liveRefresh) {
         this.restartStream();
@@ -151,15 +164,15 @@ export default {
         this.fetchLogs();
       }
     },
-    levelFilter() {
+    levelFilter(): void {
       if (this.liveRefresh) {
         this.restartStream();
       } else {
         this.fetchLogs();
       }
     },
-    searchInput() {
-      clearTimeout(this.searchDebounceTimer);
+    searchInput(): void {
+      clearTimeout(this.searchDebounceTimer ?? undefined);
       this.searchDebounceTimer = setTimeout(() => {
         if (this.liveRefresh) {
           this.restartStream();
@@ -168,8 +181,8 @@ export default {
         }
       }, 400);
     },
-    usernameInput() {
-      clearTimeout(this.usernameDebounceTimer);
+    usernameInput(): void {
+      clearTimeout(this.usernameDebounceTimer ?? undefined);
       this.usernameDebounceTimer = setTimeout(() => {
         if (this.liveRefresh) {
           this.restartStream();
@@ -178,7 +191,7 @@ export default {
         }
       }, 400);
     },
-    liveRefresh(val) {
+    liveRefresh(val: boolean): void {
       if (val) {
         this.startStream();
       } else {
@@ -186,35 +199,26 @@ export default {
       }
     },
   },
-  created() {
-    this.searchDebounceTimer = null;
-    this.usernameDebounceTimer = null;
-    // Non-reactive stream state kept off Vue's reactivity system.
-    this.streamReader = null;
-    this.streamAborted = false;
-  },
   async mounted() {
+    this.debounceContentSize = debounce(this.computeContentSize, 100);
     await this.fetchLogs();
     this.computeContentSize();
     window.addEventListener('resize', this.debounceContentSize);
   },
   beforeDestroy() {
     this.stopStream();
-    clearTimeout(this.searchDebounceTimer);
-    clearTimeout(this.usernameDebounceTimer);
+    clearTimeout(this.searchDebounceTimer ?? undefined);
+    clearTimeout(this.usernameDebounceTimer ?? undefined);
     window.removeEventListener('resize', this.debounceContentSize);
   },
   methods: {
-    computeContentSize() {
+    computeContentSize(): void {
       const scriptContainer = $('#log-console');
-      const startPos = scriptContainer.offset().top;
+      const startPos = scriptContainer.offset()!.top;
       const boxHeight = document.documentElement.clientHeight - startPos;
       scriptContainer.height(boxHeight - 50);
     },
-    // ------------------------------------------------------------------ //
-    // One-shot snapshot fetch (used when live stream is off)
-    // ------------------------------------------------------------------ //
-    async fetchLogs() {
+    async fetchLogs(): Promise<void> {
       this.loading = true;
       this.error = null;
       try {
@@ -240,16 +244,13 @@ export default {
         if (wasAtBottom) {
           this.$nextTick(() => this.scrollToBottom());
         }
-      } catch (err) {
+      } catch (err: any) {
         this.error = err.message || 'Failed to fetch logs';
       } finally {
         this.loading = false;
       }
     },
-    // ------------------------------------------------------------------ //
-    // SSE live stream (used when liveRefresh is true)
-    // ------------------------------------------------------------------ //
-    buildStreamUrl() {
+    buildStreamUrl(): string {
       const params = new URLSearchParams({
         source: this.source,
         level: this.levelFilter,
@@ -260,15 +261,15 @@ export default {
       }
       return `${makeURL('/api/v1/logs/stream')}?${params}`;
     },
-    async startStream() {
+    async startStream(): Promise<void> {
       this.stopStream();
       this.streamAborted = false;
       this.error = null;
 
-      let response;
+      let response: Response;
       try {
         response = await fetch(this.buildStreamUrl());
-      } catch (err) {
+      } catch (err: any) {
         this.error = err.message || 'Failed to connect to log stream';
         return;
       }
@@ -278,17 +279,12 @@ export default {
         return;
       }
 
-      // Clear existing entries — the stream sends backfill from scratch.
       this.entries = [];
       this.totalEntries = 0;
 
-      const reader = response.body.getReader();
+      const reader = response.body!.getReader();
       this.streamReader = reader;
       const decoder = new TextDecoder();
-
-      // SSE events are separated by "\n\n".  Because TCP packets don't align
-      // with event boundaries, we accumulate chunks in a string buffer and
-      // split on the separator, keeping any incomplete trailing chunk.
       let buffer = '';
 
       try {
@@ -297,9 +293,8 @@ export default {
           if (done) break;
 
           buffer += decoder.decode(value, { stream: true });
-
           const events = buffer.split('\n\n');
-          buffer = events.pop(); // last element may be an incomplete event
+          buffer = events.pop()!;
 
           for (const event of events) {
             if (event.startsWith('data: ')) {
@@ -315,10 +310,9 @@ export default {
                   this.$nextTick(() => this.scrollToBottom());
                 }
               } catch {
-                // Ignore malformed JSON — should never happen in practice.
+                // ignore malformed SSE JSON
               }
             }
-            // Comment lines (": keepalive") are intentionally ignored.
           }
         }
       } catch {
@@ -330,22 +324,18 @@ export default {
         this.streamReader = null;
       }
     },
-    stopStream() {
+    stopStream(): void {
       if (this.streamReader) {
         this.streamAborted = true;
         this.streamReader.cancel();
         this.streamReader = null;
       }
     },
-    restartStream() {
+    restartStream(): void {
       this.stopStream();
       this.startStream();
     },
-
-    // ------------------------------------------------------------------ //
-    // Formatting helpers
-    // ------------------------------------------------------------------ //
-    formatEntry(entry) {
+    formatEntry(entry: LogEntry): string {
       const dt = new Date(entry.ts);
       const yy = String(dt.getUTCFullYear()).slice(2);
       const mo = String(dt.getUTCMonth() + 1).padStart(2, '0');
@@ -357,7 +347,7 @@ export default {
       const letter = this.levelLetter(entry.level);
       return `[${letter} ${yy}-${mo}-${dd} ${hh}:${mm}:${ss}.${ms} ${entry.filename}:${entry.lineno}] ${entry.message}`;
     },
-    levelClass(level) {
+    levelClass(level: string): string {
       switch (level) {
         case 'TRACE':
           return 'text-secondary';
@@ -376,8 +366,8 @@ export default {
           return 'text-light';
       }
     },
-    levelLetter(level) {
-      const map = {
+    levelLetter(level: string): string {
+      const map: Record<string, string> = {
         TRACE: 'T',
         DEBUG: 'D',
         INFO: 'I',
@@ -388,16 +378,16 @@ export default {
       };
       return map[level] || level[0];
     },
-    onScroll() {
-      const el = this.$refs.console;
+    onScroll(): void {
+      const el = this.$refs.console as HTMLElement | undefined;
       if (!el) return;
       const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 40;
       this.autoScroll = atBottom;
     },
-    scrollToBottom() {
-      const el = this.$refs.console;
+    scrollToBottom(): void {
+      const el = this.$refs.console as HTMLElement | undefined;
       if (el) el.scrollTop = el.scrollHeight;
     },
   },
-};
+});
 </script>
diff --git a/client/src/vue_components/config/ConfigSettings.vue b/client/src/vue_components/config/ConfigSettings.vue
index 194faa72..0caf58ba 100644
--- a/client/src/vue_components/config/ConfigSettings.vue
+++ b/client/src/vue_components/config/ConfigSettings.vue
@@ -115,39 +115,50 @@
   </b-container>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { mapGetters, mapActions } from 'vuex';
 import { required, integer } from 'vuelidate/lib/validators';
 import log from 'loglevel';
-
 import { makeURL } from '@/js/utils';
 
-export default {
+export default defineComponent({
   name: 'ConfigSettings',
   data() {
     return {
       loaded: false,
-      editSettings: {},
+      editSettings: {} as Record<string, unknown>,
       toggle: 0,
-      expandedCategories: ['General'],
+      expandedCategories: ['General'] as string[],
     };
   },
+  validations() {
+    const editSettings: Record<string, unknown> = {};
+    Object.keys(this.editSettings).forEach((x) => {
+      if ((this as any).RAW_SETTINGS[x].type === 'int') {
+        editSettings[x] = { required, integer };
+      } else {
+        editSettings[x] = {};
+      }
+    });
+    return { editSettings };
+  },
   computed: {
     ...mapGetters(['RAW_SETTINGS', 'SETTINGS_CATEGORIES']),
-    visibleSettings() {
-      const visibleSettings = {};
-      Object.keys(this.RAW_SETTINGS).forEach((x) => {
-        if (!this.RAW_SETTINGS[x].hide_from_ui) {
-          visibleSettings[x] = this.RAW_SETTINGS[x];
+    visibleSettings(): Record<string, any> {
+      const visibleSettings: Record<string, any> = {};
+      Object.keys((this as any).RAW_SETTINGS).forEach((x) => {
+        if (!(this as any).RAW_SETTINGS[x].hide_from_ui) {
+          visibleSettings[x] = (this as any).RAW_SETTINGS[x];
         }
       });
       return visibleSettings;
     },
-    settingsByCategory() {
-      const settingsByCategory = {};
-      Object.keys(this.SETTINGS_CATEGORIES).forEach((category) => {
+    settingsByCategory(): Record<string, Record<string, any>> {
+      const settingsByCategory: Record<string, Record<string, any>> = {};
+      Object.keys((this as any).SETTINGS_CATEGORIES).forEach((category) => {
         settingsByCategory[category] = {};
-        this.SETTINGS_CATEGORIES[category].forEach((setting) => {
+        (this as any).SETTINGS_CATEGORIES[category].forEach((setting: string) => {
           if (Object.keys(this.visibleSettings).includes(setting)) {
             settingsByCategory[category][setting] = this.visibleSettings[setting];
           }
@@ -155,24 +166,24 @@ export default {
       });
       return settingsByCategory;
     },
-    hasChanges() {
+    hasChanges(): boolean {
       return Object.keys(this.editSettings).some(
-        (key) => this.editSettings[key] !== this.RAW_SETTINGS[key]?.value
+        (key) => this.editSettings[key] !== (this as any).RAW_SETTINGS[key]?.value
       );
     },
-    dirtySettingsByCategory() {
-      const dirtySettingsByCategory = {};
-      Object.keys(this.SETTINGS_CATEGORIES).forEach((category) => {
-        dirtySettingsByCategory[category] = 0;
-        this.SETTINGS_CATEGORIES[category].forEach((setting) => {
+    dirtySettingsByCategory(): Record<string, number> {
+      const dirty: Record<string, number> = {};
+      Object.keys((this as any).SETTINGS_CATEGORIES).forEach((category) => {
+        dirty[category] = 0;
+        (this as any).SETTINGS_CATEGORIES[category].forEach((setting: string) => {
           if (Object.keys(this.visibleSettings).includes(setting)) {
-            if (this.$v.editSettings[setting].$dirty) {
-              dirtySettingsByCategory[category] += 1;
+            if ((this as any).$v.editSettings[setting].$dirty) {
+              dirty[category] += 1;
             }
           }
         });
       });
-      return dirtySettingsByCategory;
+      return dirty;
     },
   },
   watch: {
@@ -184,55 +195,33 @@ export default {
     },
   },
   async mounted() {
-    await this.GET_SETTINGS_CATEGORIES();
+    await (this as any).GET_SETTINGS_CATEGORIES();
     this.resetEditSettings();
     this.loaded = true;
   },
-  validations() {
-    const editSettings = {};
-    Object.keys(this.editSettings).forEach((x) => {
-      if (this.RAW_SETTINGS[x].type === 'int') {
-        editSettings[x] = {
-          required,
-          integer,
-        };
-      } else {
-        editSettings[x] = {};
-      }
-    }, this);
-    return { editSettings };
-  },
   methods: {
-    inputType(fieldType) {
-      const mapping = {
-        int: 'number',
-        str: 'text',
-      };
-      if (!Object.keys(mapping).includes(fieldType)) {
-        return 'text';
-      }
-      return mapping[fieldType];
+    inputType(fieldType: string): string {
+      const mapping: Record<string, string> = { int: 'number', str: 'text' };
+      return mapping[fieldType] ?? 'text';
     },
-    getChoiceOptions(setting) {
-      const options = [];
+    getChoiceOptions(setting: any): Array<{ value: unknown; text: string }> {
+      const options: Array<{ value: unknown; text: string }> = [];
       if (setting._nullable) {
         options.push({ value: null, text: 'N/A' });
       }
-      setting.choice_options.forEach((option) => {
-        options.push({ value: option, text: option });
+      setting.choice_options.forEach((option: unknown) => {
+        options.push({ value: option, text: String(option) });
       });
       return options;
     },
-    validateState(name) {
-      const { $dirty, $error } = this.$v.editSettings[name];
+    validateState(name: string): boolean | null {
+      const { $dirty, $error } = (this as any).$v.editSettings[name];
       return $dirty ? !$error : null;
     },
-    async handleSubmit() {
+    async handleSubmit(): Promise<void> {
       const response = await fetch(`${makeURL('/api/v1/settings')}`, {
         method: 'PATCH',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(this.editSettings),
       });
       if (!response.ok) {
@@ -242,35 +231,31 @@ export default {
         this.$toast.success('Saved settings');
       }
     },
-    resetEditSettings() {
-      Object.keys(this.visibleSettings).forEach(function setEditSettings(x) {
+    resetEditSettings(): void {
+      Object.keys(this.visibleSettings).forEach((x) => {
         this.editSettings[x] = this.visibleSettings[x].value;
-      }, this);
+      });
     },
-    resetForm(toggleLoaded) {
-      if (toggleLoaded) {
-        this.loaded = false;
-      }
-      this.toggle = !this.toggle;
-      Object.keys(this.RAW_SETTINGS).forEach(function resetEditSettings(x) {
-        this.editSettings[x] = this.RAW_SETTINGS[x].value;
-      }, this);
-      this.$v.editSettings.$reset();
-      if (toggleLoaded) {
-        this.loaded = true;
-      }
+    resetForm(toggleLoaded: boolean): void {
+      if (toggleLoaded) this.loaded = false;
+      this.toggle = this.toggle === 0 ? 1 : 0;
+      Object.keys((this as any).RAW_SETTINGS).forEach((x) => {
+        this.editSettings[x] = (this as any).RAW_SETTINGS[x].value;
+      });
+      (this as any).$v.editSettings.$reset();
+      if (toggleLoaded) this.loaded = true;
     },
-    expandCategory(category) {
+    expandCategory(category: string): void {
       if (this.categoryExpanded(category)) {
         this.expandedCategories = this.expandedCategories.filter((x) => x !== category);
       } else {
         this.expandedCategories.push(category);
       }
     },
-    categoryExpanded(category) {
+    categoryExpanded(category: string): boolean {
       return this.expandedCategories.includes(category);
     },
     ...mapActions(['GET_SETTINGS_CATEGORIES']),
   },
-};
+});
 </script>
diff --git a/client/src/vue_components/config/ConfigShows.vue b/client/src/vue_components/config/ConfigShows.vue
index 991d1630..939f15fd 100644
--- a/client/src/vue_components/config/ConfigShows.vue
+++ b/client/src/vue_components/config/ConfigShows.vue
@@ -133,13 +133,14 @@
   </b-container>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { required, maxLength } from 'vuelidate/lib/validators';
 import { mapGetters, mapActions } from 'vuex';
 import { makeURL } from '@/js/utils';
 import log from 'loglevel';
 
-export default {
+export default defineComponent({
   name: 'ConfigShows',
   data() {
     return {
@@ -157,10 +158,10 @@ export default {
       isSubmittingLoad: false,
       isSubmittingShow: false,
       formState: {
-        name: null,
-        start: null,
-        end: null,
-        script_mode: null,
+        name: null as string | null,
+        start: null as string | null,
+        end: null as string | null,
+        script_mode: null as number | null,
       },
     };
   },
@@ -172,36 +173,34 @@ export default {
       },
       start: {
         required,
-        beforeEnd: (value, vm) =>
-          value == null && vm.end != null ? false : new Date(value) <= new Date(vm.end),
+        beforeEnd: (value: string | null, vm: { end: string | null }) =>
+          value == null && vm.end != null ? false : new Date(value!) <= new Date(vm.end!),
       },
       end: {
         required,
-        afterStart: (value, vm) =>
-          value == null && vm.start != null ? false : new Date(value) >= new Date(vm.start),
-      },
-      script_mode: {
-        required,
+        afterStart: (value: string | null, vm: { start: string | null }) =>
+          value == null && vm.start != null ? false : new Date(value!) >= new Date(vm.start!),
       },
+      script_mode: { required },
     },
   },
   computed: {
     ...mapGetters(['AVAILABLE_SHOWS', 'CURRENT_SHOW', 'SCRIPT_MODES']),
   },
   async mounted() {
-    await Promise.all([this.GET_AVAILABLE_SHOWS(), this.GET_SCRIPT_MODES()]);
+    await Promise.all([(this as any).GET_AVAILABLE_SHOWS(), (this as any).GET_SCRIPT_MODES()]);
     this.loaded = true;
   },
   methods: {
-    async saveAndLoad(event) {
+    async saveAndLoad(event: Event): Promise<void> {
       await this.saveShow(event, true);
     },
-    async onSubmit(event) {
+    async onSubmit(event: Event): Promise<void> {
       await this.saveShow(event, false);
     },
-    async saveShow(event, load) {
-      this.$v.formState.$touch();
-      if (this.$v.formState.$anyError) {
+    async saveShow(event: Event, load: boolean): Promise<void> {
+      (this as any).$v.formState.$touch();
+      if ((this as any).$v.formState.$anyError) {
         event.preventDefault();
         return;
       }
@@ -214,20 +213,16 @@ export default {
       this.isSubmittingShow = true;
 
       try {
-        const searchParams = new URLSearchParams({
-          load,
-        });
+        const searchParams = new URLSearchParams({ load: String(load) });
         const response = await fetch(`${makeURL('/api/v1/show')}?${searchParams}`, {
           method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-          },
+          headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify(this.formState),
         });
         if (response.ok) {
-          await this.GET_AVAILABLE_SHOWS();
+          await (this as any).GET_AVAILABLE_SHOWS();
           this.$toast.success('Created new show!');
-          this.$bvModal.hide('show-config');
+          (this as any).$bvModal.hide('show-config');
           this.resetForm();
         } else {
           this.$toast.error('Unable to save show');
@@ -242,26 +237,20 @@ export default {
         this.isSubmittingShow = false;
       }
     },
-    async loadShow(show) {
-      if (this.isSubmittingLoad) {
-        return;
-      }
+    async loadShow(show: { id: number }): Promise<void> {
+      if (this.isSubmittingLoad) return;
 
       this.isSubmittingLoad = true;
 
       try {
         const response = await fetch(`${makeURL('/api/v1/settings')}`, {
           method: 'PATCH',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify({
-            current_show: show.id,
-          }),
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ current_show: show.id }),
         });
         if (response.ok) {
           this.$toast.success('Loaded show!');
-          this.$bvModal.hide('show-load');
+          (this as any).$bvModal.hide('show-load');
         } else {
           this.$toast.error('Unable to load show');
           log.error('Unable to load show');
@@ -273,24 +262,23 @@ export default {
         this.isSubmittingLoad = false;
       }
     },
-    validateState(name) {
-      const { $dirty, $error } = this.$v.formState[name];
+    validateState(name: string): boolean | null {
+      const { $dirty, $error } = (this as any).$v.formState[name];
       return $dirty ? !$error : null;
     },
-    resetForm() {
+    resetForm(): void {
       this.formState = {
         name: null,
         start: null,
         end: null,
-        script_mode: this.SCRIPT_MODES[0].value,
+        script_mode: (this as any).SCRIPT_MODES[0].value,
       };
       this.isSubmittingShow = false;
-
       this.$nextTick(() => {
-        this.$v.$reset();
+        (this as any).$v.$reset();
       });
     },
     ...mapActions(['GET_AVAILABLE_SHOWS', 'GET_SCRIPT_MODES']),
   },
-};
+});
 </script>
diff --git a/client/src/vue_components/config/ConfigSystem.vue b/client/src/vue_components/config/ConfigSystem.vue
index 4a826896..901405eb 100644
--- a/client/src/vue_components/config/ConfigSystem.vue
+++ b/client/src/vue_components/config/ConfigSystem.vue
@@ -84,17 +84,26 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import log from 'loglevel';
-
 import { makeURL } from '@/js/utils';
 
-export default {
+interface VersionStatus {
+  current_version: string | null;
+  latest_version: string | null;
+  update_available: boolean;
+  release_url: string | null;
+  last_checked: string | null;
+  check_error: string | null;
+}
+
+export default defineComponent({
   name: 'ConfigSystem',
   data() {
     return {
       perPage: 5,
-      connectedClients: [],
+      connectedClients: [] as unknown[],
       currentPageClients: 1,
       clientFields: [
         { key: 'internal_id', label: 'UUID' },
@@ -103,7 +112,7 @@ export default {
         'last_ping',
         'last_pong',
       ],
-      clientTimeout: null,
+      clientTimeout: null as ReturnType<typeof setTimeout> | null,
       loading: true,
       versionStatus: {
         current_version: null,
@@ -112,30 +121,28 @@ export default {
         release_url: null,
         last_checked: null,
         check_error: null,
-      },
+      } as VersionStatus,
       isCheckingVersion: false,
       currentTime: Date.now(),
-      timeUpdateInterval: null,
+      timeUpdateInterval: null as ReturnType<typeof setInterval> | null,
     };
   },
   async mounted() {
     await Promise.all([this.getConnectedClients(), this.getVersionStatus()]);
     this.loading = false;
-
-    // Start time update interval for reactive "time ago" display
     this.timeUpdateInterval = setInterval(() => {
       this.currentTime = Date.now();
     }, 1000);
   },
   destroyed() {
-    clearTimeout(this.clientTimeout);
+    clearTimeout(this.clientTimeout ?? undefined);
     if (this.timeUpdateInterval) {
       clearInterval(this.timeUpdateInterval);
       this.timeUpdateInterval = null;
     }
   },
   methods: {
-    async getConnectedClients() {
+    async getConnectedClients(): Promise<void> {
       const response = await fetch(`${makeURL('/api/v1/ws/sessions')}`);
       if (response.ok) {
         const sessions = await response.json();
@@ -145,7 +152,7 @@ export default {
       }
       this.clientTimeout = setTimeout(this.getConnectedClients, 1000);
     },
-    async getVersionStatus() {
+    async getVersionStatus(): Promise<void> {
       try {
         const response = await fetch(`${makeURL('/api/v1/version/status')}`);
         if (response.ok) {
@@ -157,17 +164,13 @@ export default {
         log.error('Error fetching version status:', error);
       }
     },
-    async checkForUpdates() {
-      if (this.isCheckingVersion) {
-        return;
-      }
+    async checkForUpdates(): Promise<void> {
+      if (this.isCheckingVersion) return;
 
       this.isCheckingVersion = true;
 
       try {
-        const response = await fetch(`${makeURL('/api/v1/version/check')}`, {
-          method: 'POST',
-        });
+        const response = await fetch(`${makeURL('/api/v1/version/check')}`, { method: 'POST' });
         if (response.ok) {
           this.versionStatus = await response.json();
           if (this.versionStatus.update_available) {
@@ -186,52 +189,30 @@ export default {
         this.isCheckingVersion = false;
       }
     },
-    getVersionStatusVariant() {
-      if (!this.versionStatus.current_version) {
-        return 'secondary';
-      }
-      if (this.versionStatus.check_error) {
-        return 'danger';
-      }
-      if (this.versionStatus.update_available) {
-        return 'warning';
-      }
+    getVersionStatusVariant(): string {
+      if (!this.versionStatus.current_version) return 'secondary';
+      if (this.versionStatus.check_error) return 'danger';
+      if (this.versionStatus.update_available) return 'warning';
       return 'success';
     },
-    getVersionStatusText() {
-      if (!this.versionStatus.current_version) {
-        return 'Loading...';
-      }
-      if (this.versionStatus.check_error) {
-        return 'Unable to check';
-      }
-      if (this.versionStatus.update_available) {
-        return 'Update Available';
-      }
+    getVersionStatusText(): string {
+      if (!this.versionStatus.current_version) return 'Loading...';
+      if (this.versionStatus.check_error) return 'Unable to check';
+      if (this.versionStatus.update_available) return 'Update Available';
       return 'Up to date';
     },
-    formatTimeAgo(isoTimestamp) {
-      if (!isoTimestamp) {
-        return 'Never';
-      }
+    formatTimeAgo(isoTimestamp: string | null): string {
+      if (!isoTimestamp) return 'Never';
 
       const timestamp = new Date(isoTimestamp).getTime();
       const seconds = Math.floor((this.currentTime - timestamp) / 1000);
 
-      if (seconds < 10) {
-        return 'Just now';
-      }
-      if (seconds < 60) {
-        return `${seconds} seconds ago`;
-      }
-      if (seconds < 3600) {
-        return `${Math.floor(seconds / 60)} minutes ago`;
-      }
-      if (seconds < 86400) {
-        return `${Math.floor(seconds / 3600)} hours ago`;
-      }
+      if (seconds < 10) return 'Just now';
+      if (seconds < 60) return `${seconds} seconds ago`;
+      if (seconds < 3600) return `${Math.floor(seconds / 60)} minutes ago`;
+      if (seconds < 86400) return `${Math.floor(seconds / 3600)} hours ago`;
       return `${Math.floor(seconds / 86400)} days ago`;
     },
   },
-};
+});
 </script>
diff --git a/client/src/vue_components/config/ConfigUsers.vue b/client/src/vue_components/config/ConfigUsers.vue
index 4fe926e5..c045c580 100644
--- a/client/src/vue_components/config/ConfigUsers.vue
+++ b/client/src/vue_components/config/ConfigUsers.vue
@@ -80,27 +80,28 @@
   </b-container>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { mapActions, mapGetters } from 'vuex';
 
 import CreateUser from '@/vue_components/user/CreateUser.vue';
 import ConfigRbac from '@/vue_components/user/ConfigRbac.vue';
 import ResetPassword from '@/vue_components/user/ResetPassword.vue';
 
-export default {
+export default defineComponent({
   name: 'ConfigUsers',
   components: { CreateUser, ConfigRbac, ResetPassword },
   data() {
     return {
       userFields: ['username', 'last_login', 'last_seen', 'is_admin', { key: 'btn', label: '' }],
-      editUser: null,
-      resetUser: null,
-      clientTimeout: null,
+      editUser: null as number | null,
+      resetUser: null as { id: number; username: string } | null,
+      clientTimeout: null as ReturnType<typeof setTimeout> | null,
     };
   },
   computed: {
-    allAdmins() {
-      return this.USERS.filter((user) => user.is_admin);
+    allAdmins(): unknown[] {
+      return (this.USERS as any[]).filter((user) => user.is_admin);
     },
     ...mapGetters(['USERS', 'CURRENT_SHOW', 'CURRENT_USER']),
   },
@@ -108,40 +109,40 @@ export default {
     await this.getUsers();
   },
   destroyed() {
-    clearTimeout(this.clientTimeout);
+    clearTimeout(this.clientTimeout ?? undefined);
   },
   methods: {
-    resetNewForm() {
-      this.$bvModal.hide('new-user');
+    resetNewForm(): void {
+      (this as any).$bvModal.hide('new-user');
     },
-    resetNewAdminForm() {
-      this.$bvModal.hide('new-admin-user');
+    resetNewAdminForm(): void {
+      (this as any).$bvModal.hide('new-admin-user');
     },
-    setEditUser(userId) {
+    setEditUser(userId: number): void {
       this.editUser = userId;
     },
-    setResetUser(user) {
+    setResetUser(user: { id: number; username: string }): void {
       this.resetUser = user;
     },
-    async handlePasswordReset() {
+    async handlePasswordReset(): Promise<void> {
       await this.getUsers();
     },
-    closeResetPasswordModal() {
-      this.$bvModal.hide('reset-password');
+    closeResetPasswordModal(): void {
+      (this as any).$bvModal.hide('reset-password');
       this.resetUser = null;
     },
-    async deleteUser(data) {
+    async deleteUser(data: any): Promise<void> {
       const msg = `Are you sure you want to delete ${data.item.username}?`;
-      const action = await this.$bvModal.msgBoxConfirm(msg, {});
+      const action = await (this as any).$bvModal.msgBoxConfirm(msg, {});
       if (action === true) {
-        await this.DELETE_USER(data.item.id);
+        await (this as any).DELETE_USER(data.item.id);
       }
     },
-    async getUsers() {
-      await this.GET_USERS();
+    async getUsers(): Promise<void> {
+      await (this as any).GET_USERS();
       this.clientTimeout = setTimeout(this.getUsers, 5000);
     },
     ...mapActions(['GET_USERS', 'DELETE_USER']),
   },
-};
+});
 </script>
diff --git a/client/src/vue_components/show/config/acts_and_scenes/ConfigActs.vue b/client/src/vue_components/show/config/acts_and_scenes/ConfigActs.vue
index beda3fd1..01f5e012 100644
--- a/client/src/vue_components/show/config/acts_and_scenes/ConfigActs.vue
+++ b/client/src/vue_components/show/config/acts_and_scenes/ConfigActs.vue
@@ -161,13 +161,14 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { required, integer } from 'vuelidate/lib/validators';
 import { mapGetters, mapActions } from 'vuex';
 import log from 'loglevel';
 import formValidationMixin from '@/mixins/formValidationMixin';
 
-export default {
+export default defineComponent({
   name: 'ConfigActs',
   mixins: [formValidationMixin],
   data() {
@@ -185,14 +186,14 @@ export default {
       newFormState: {
         name: '',
         interval_after: false,
-        previous_act_id: null,
+        previous_act_id: null as number | null,
       },
       editFormState: {
-        id: null,
-        showID: null,
+        id: null as number | null,
+        showID: null as number | null,
         name: '',
         interval_after: false,
-        previous_act_id: null,
+        previous_act_id: null as number | null,
       },
       submittingNewAct: false,
       submittingEditAct: false,
@@ -201,14 +202,10 @@ export default {
   },
   validations: {
     newFormState: {
-      name: {
-        required,
-      },
+      name: { required },
     },
     editFormState: {
-      name: {
-        required,
-      },
+      name: { required },
       previous_act_id: {
         integer,
         noLoops(value) {
@@ -226,37 +223,41 @@ export default {
     },
   },
   computed: {
-    actTableItems() {
-      const ret = [];
-      if (this.CURRENT_SHOW.first_act_id != null && this.ACT_LIST.length > 0) {
-        let act = this.ACT_BY_ID(this.CURRENT_SHOW.first_act_id);
+    actTableItems(): unknown[] {
+      const ret: any[] = [];
+      if ((this as any).CURRENT_SHOW.first_act_id != null && (this as any).ACT_LIST.length > 0) {
+        let act = (this as any).ACT_BY_ID((this as any).CURRENT_SHOW.first_act_id);
         while (act != null) {
-          ret.push(this.ACT_BY_ID(act.id));
-          act = this.ACT_BY_ID(act.next_act);
+          ret.push((this as any).ACT_BY_ID(act.id));
+          act = (this as any).ACT_BY_ID(act.next_act);
         }
       }
       const actIds = ret.map((x) => x.id);
-      this.ACT_LIST.forEach((act) => {
+      (this as any).ACT_LIST.forEach((act: any) => {
         if (!actIds.includes(act.id)) {
           ret.push(act);
         }
       });
       return ret;
     },
-    previousActOptions() {
+    previousActOptions(): unknown[] {
       return [
         { value: null, text: 'None', disabled: false },
-        ...this.ACT_LIST.filter((act) => act.next_act == null, this).map((act) => ({
+        ...(this as any).ACT_LIST.filter((act: any) => act.next_act == null).map((act: any) => ({
           value: act.id,
           text: act.name,
         })),
       ];
     },
-    editFormActOptions() {
-      const ret = [];
-      ret.push(...this.previousActOptions.filter((act) => act.value !== this.editFormState.id));
+    editFormActOptions(): unknown[] {
+      const ret: any[] = [];
+      ret.push(
+        ...(this.previousActOptions as any[]).filter((act) => act.value !== this.editFormState.id)
+      );
       if (this.editFormState.previous_act_id != null) {
-        const act = this.ACT_LIST.find((a) => a.id === this.editFormState.previous_act_id);
+        const act = (this as any).ACT_LIST.find(
+          (a: any) => a.id === this.editFormState.previous_act_id
+        );
         ret.push({
           value: this.editFormState.previous_act_id,
           text: act.name,
@@ -267,30 +268,29 @@ export default {
     },
     ...mapGetters(['ACT_LIST', 'CURRENT_SHOW', 'ACT_BY_ID', 'IS_SHOW_EDITOR']),
   },
-  async mounted() {
-    await this.GET_ACT_LIST();
+  async mounted(): Promise<void> {
+    await (this as any).GET_ACT_LIST();
     this.loading = false;
   },
   methods: {
-    resetNewForm() {
-      this.resetForm('newFormState', {
+    resetNewForm(): void {
+      (this as any).resetForm('newFormState', {
         name: '',
         interval_after: false,
         previous_act_id: null,
       });
       this.submittingNewAct = false;
     },
-    async onSubmitNew(event) {
-      this.$v.newFormState.$touch();
-      if (this.$v.newFormState.$anyError || this.submittingNewAct) {
+    async onSubmitNew(event: Event): Promise<void> {
+      (this as any).$v.newFormState.$touch();
+      if ((this as any).$v.newFormState.$anyError || this.submittingNewAct) {
         event.preventDefault();
         return;
       }
-
       this.submittingNewAct = true;
       try {
-        await this.ADD_ACT(this.newFormState);
-        this.$bvModal.hide('new-act');
+        await (this as any).ADD_ACT(this.newFormState);
+        (this as any).$bvModal.hide('new-act');
         this.resetNewForm();
       } catch (error) {
         log.error('Error submitting new act:', error);
@@ -299,7 +299,7 @@ export default {
         this.submittingNewAct = false;
       }
     },
-    openEditForm(act) {
+    openEditForm(act: any): void {
       if (act != null) {
         this.editFormState.id = act.item.id;
         this.editFormState.showID = act.item.show_id;
@@ -308,11 +308,11 @@ export default {
         if (act.item.previous_act != null) {
           this.editFormState.previous_act_id = act.item.previous_act;
         }
-        this.$bvModal.show('edit-act');
+        (this as any).$bvModal.show('edit-act');
       }
     },
-    resetEditForm() {
-      this.resetForm('editFormState', {
+    resetEditForm(): void {
+      (this as any).resetForm('editFormState', {
         id: null,
         showID: null,
         name: '',
@@ -322,17 +322,16 @@ export default {
       this.submittingEditAct = false;
       this.deletingAct = false;
     },
-    async onSubmitEdit(event) {
-      this.$v.editFormState.$touch();
-      if (this.$v.editFormState.$anyError || this.submittingEditAct) {
+    async onSubmitEdit(event: Event): Promise<void> {
+      (this as any).$v.editFormState.$touch();
+      if ((this as any).$v.editFormState.$anyError || this.submittingEditAct) {
         event.preventDefault();
         return;
       }
-
       this.submittingEditAct = true;
       try {
-        await this.UPDATE_ACT(this.editFormState);
-        this.$bvModal.hide('edit-act');
+        await (this as any).UPDATE_ACT(this.editFormState);
+        (this as any).$bvModal.hide('edit-act');
         this.resetEditForm();
       } catch (error) {
         log.error('Error submitting edit act:', error);
@@ -341,17 +340,16 @@ export default {
         this.submittingEditAct = false;
       }
     },
-    async deleteAct(act) {
+    async deleteAct(act: any): Promise<void> {
       if (this.deletingAct) {
         return;
       }
-
       const msg = `Are you sure you want to delete ${act.item.name}?`;
-      const action = await this.$bvModal.msgBoxConfirm(msg, {});
+      const action = await (this as any).$bvModal.msgBoxConfirm(msg, {});
       if (action === true) {
         this.deletingAct = true;
         try {
-          await this.DELETE_ACT(act.item.id);
+          await (this as any).DELETE_ACT(act.item.id);
         } catch (error) {
           log.error('Error deleting act:', error);
         } finally {
@@ -361,7 +359,7 @@ export default {
     },
     ...mapActions(['GET_ACT_LIST', 'ADD_ACT', 'DELETE_ACT', 'UPDATE_ACT']),
   },
-};
+});
 </script>
 
 <style scoped></style>
diff --git a/client/src/vue_components/show/config/acts_and_scenes/ConfigScenes.vue b/client/src/vue_components/show/config/acts_and_scenes/ConfigScenes.vue
index 9b46ea37..3c69308f 100644
--- a/client/src/vue_components/show/config/acts_and_scenes/ConfigScenes.vue
+++ b/client/src/vue_components/show/config/acts_and_scenes/ConfigScenes.vue
@@ -211,13 +211,14 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { required, integer } from 'vuelidate/lib/validators';
 import { mapGetters, mapActions } from 'vuex';
 import log from 'loglevel';
 import formValidationMixin from '@/mixins/formValidationMixin';
 
-export default {
+export default defineComponent({
   name: 'ConfigScenes',
   mixins: [formValidationMixin],
   data() {
@@ -234,8 +235,8 @@ export default {
       ],
       newFormState: {
         name: '',
-        act_id: null,
-        previous_scene_id: null,
+        act_id: null as number | null,
+        previous_scene_id: null as number | null,
       },
       firstSceneFields: [
         { key: 'name', label: 'Act' },
@@ -243,15 +244,15 @@ export default {
         { key: 'btn', label: '' },
       ],
       firstSceneFormState: {
-        act_id: null,
-        scene_id: null,
+        act_id: null as number | null,
+        scene_id: null as number | null,
       },
-      editSceneID: null,
+      editSceneID: null as number | null,
       editFormState: {
-        scene_id: null,
+        scene_id: null as number | null,
         name: '',
-        act_id: null,
-        previous_scene_id: null,
+        act_id: null as number | null,
+        previous_scene_id: null as number | null,
       },
       submittingNewScene: false,
       submittingEditScene: false,
@@ -261,21 +262,15 @@ export default {
   },
   validations: {
     newFormState: {
-      name: {
-        required,
-      },
+      name: { required },
       act_id: {
         notNullAndGreaterThanZero: (value) => value != null && value > 0,
       },
-      previous_scene_id: {
-        integer,
-      },
+      previous_scene_id: { integer },
     },
     firstSceneFormState: {},
     editFormState: {
-      name: {
-        required,
-      },
+      name: { required },
       act_id: {
         notNullAndGreaterThanZero: (value) => value != null && value > 0,
       },
@@ -304,33 +299,32 @@ export default {
       'ACT_BY_ID',
       'IS_SHOW_EDITOR',
     ]),
-    sceneTableItems() {
-      // Get ordering of Acts
-      const acts = [];
-      if (this.CURRENT_SHOW.first_act_id != null && this.ACT_LIST.length > 0) {
-        let act = this.ACT_BY_ID(this.CURRENT_SHOW.first_act_id);
+    sceneTableItems(): unknown[] {
+      const acts: number[] = [];
+      if ((this as any).CURRENT_SHOW.first_act_id != null && (this as any).ACT_LIST.length > 0) {
+        let act = (this as any).ACT_BY_ID((this as any).CURRENT_SHOW.first_act_id);
         while (act != null) {
           acts.push(act.id);
-          act = this.ACT_BY_ID(act.next_act);
+          act = (this as any).ACT_BY_ID(act.next_act);
         }
       }
-      this.ACT_LIST.forEach((act) => {
+      (this as any).ACT_LIST.forEach((act: any) => {
         if (!acts.includes(act.id)) {
           acts.push(act.id);
         }
       });
-      const ret = [];
+      const ret: any[] = [];
       acts.forEach((actId) => {
-        const act = this.ACT_LIST.find((a) => a.id === actId);
+        const act = (this as any).ACT_LIST.find((a: any) => a.id === actId);
         if (act.first_scene != null) {
-          let scene = this.SCENE_BY_ID(act.first_scene);
+          let scene = (this as any).SCENE_BY_ID(act.first_scene);
           while (scene != null) {
-            ret.push(this.SCENE_BY_ID(scene.id));
-            scene = this.SCENE_BY_ID(scene.next_scene);
+            ret.push((this as any).SCENE_BY_ID(scene.id));
+            scene = (this as any).SCENE_BY_ID(scene.next_scene);
           }
         }
         const sceneIds = ret.map((s) => s.id);
-        this.SCENE_LIST.filter((s) => s.act === actId).forEach((scene) => {
+        (this as any).SCENE_LIST.filter((s: any) => s.act === actId).forEach((scene: any) => {
           if (!sceneIds.includes(scene.id)) {
             ret.push(scene);
           }
@@ -338,108 +332,101 @@ export default {
       });
       return ret;
     },
-    actOptions() {
+    actOptions(): unknown[] {
       return [
         { value: null, text: 'Please select an option', disabled: true },
-        ...this.ACT_LIST.map((act) => ({ value: act.id, text: act.name })),
+        ...(this as any).ACT_LIST.map((act: any) => ({ value: act.id, text: act.name })),
       ];
     },
-    previousSceneOptions() {
-      const ret = {
+    previousSceneOptions(): Record<string | number, unknown[]> {
+      const ret: Record<string | number, unknown[]> = {
         null: [{ value: null, text: 'None', disabled: false }],
       };
-      this.ACT_LIST.forEach((act) => {
+      (this as any).ACT_LIST.forEach((act: any) => {
         ret[act.id] = [
-          {
-            value: null,
-            text: 'None',
-            disabled: false,
-          },
-          ...this.SCENE_LIST.filter(
-            (scene) =>
-              scene.act === act.id && scene.next_scene == null && this.ACT_BY_ID(scene.act) != null,
-            this
-          ).map((scene) => ({
+          { value: null, text: 'None', disabled: false },
+          ...(this as any).SCENE_LIST.filter(
+            (scene: any) =>
+              scene.act === act.id &&
+              scene.next_scene == null &&
+              (this as any).ACT_BY_ID(scene.act) != null
+          ).map((scene: any) => ({
             value: scene.id,
-            text: `${this.ACT_BY_ID(scene.act).name}: ${scene.name}`,
+            text: `${(this as any).ACT_BY_ID(scene.act).name}: ${scene.name}`,
           })),
         ];
-      }, this);
-
+      });
       return ret;
     },
-    firstSceneOptions() {
-      const ret = {};
-      this.ACT_LIST.forEach((act) => {
+    firstSceneOptions(): Record<number, unknown[]> {
+      const ret: Record<number, unknown[]> = {};
+      (this as any).ACT_LIST.forEach((act: any) => {
         ret[act.id] = [
-          {
-            value: null,
-            text: 'None',
-            disabled: false,
-          },
+          { value: null, text: 'None', disabled: false },
           ...act.scene_list
             .filter(
-              (scene) =>
-                this.SCENE_BY_ID(scene) != null && this.SCENE_BY_ID(scene).previous_scene == null,
-              this
+              (scene: any) =>
+                (this as any).SCENE_BY_ID(scene) != null &&
+                (this as any).SCENE_BY_ID(scene).previous_scene == null
             )
-            .map((scene) => ({
+            .map((scene: any) => ({
               value: scene,
-              text: `${act.name}: ${this.SCENE_BY_ID(scene).name}`,
+              text: `${act.name}: ${(this as any).SCENE_BY_ID(scene).name}`,
             })),
         ];
-      }, this);
+      });
       return ret;
     },
-    firstSceneModalLabel() {
+    firstSceneModalLabel(): string {
       if (this.firstSceneFormState.act_id == null) {
         return '';
       }
-      return `${this.ACT_LIST.find((act) => act.id === this.firstSceneFormState.act_id).name} First Scene`;
+      return `${(this as any).ACT_LIST.find((act: any) => act.id === this.firstSceneFormState.act_id).name} First Scene`;
     },
-    editFormPrevScenes() {
-      const ret = [];
+    editFormPrevScenes(): unknown[] {
+      const ret: any[] = [];
       ret.push(
-        ...this.previousSceneOptions[this.editFormState.act_id].filter(
+        ...(this.previousSceneOptions[this.editFormState.act_id as number] as any[]).filter(
           (scene) => scene.value !== this.editFormState.scene_id
         )
       );
       if (this.editFormState.previous_scene_id != null) {
-        const scene = this.SCENE_LIST.find((s) => s.id === this.editFormState.previous_scene_id);
+        const scene = (this as any).SCENE_LIST.find(
+          (s: any) => s.id === this.editFormState.previous_scene_id
+        );
         ret.push({
           value: this.editFormState.previous_scene_id,
-          text: `${this.ACT_BY_ID(scene.act).name}: ${scene.name}`,
+          text: `${(this as any).ACT_BY_ID(scene.act).name}: ${scene.name}`,
           disabled: false,
         });
       }
       return ret;
     },
   },
-  async mounted() {
-    await this.GET_SCENE_LIST();
-    await this.GET_ACT_LIST();
+  async mounted(): Promise<void> {
+    await (this as any).GET_SCENE_LIST();
+    await (this as any).GET_ACT_LIST();
     this.loading = false;
   },
   methods: {
-    resetNewForm() {
-      this.resetForm('newFormState', {
+    resetNewForm(): void {
+      (this as any).resetForm('newFormState', {
         name: '',
         act_id: null,
         previous_scene_id: null,
       });
       this.submittingNewScene = false;
     },
-    async onSubmitNew(event) {
-      this.$v.newFormState.$touch();
-      if (this.$v.newFormState.$anyError || this.submittingNewScene) {
+    async onSubmitNew(event: Event): Promise<void> {
+      (this as any).$v.newFormState.$touch();
+      if ((this as any).$v.newFormState.$anyError || this.submittingNewScene) {
         event.preventDefault();
         return;
       }
-
       this.submittingNewScene = true;
       try {
-        await this.ADD_SCENE(this.newFormState);
-        this.$bvModal.hide('new-scene');
+        await (this as any).ADD_SCENE(this.newFormState);
+        (this as any).$bvModal.hide('new-scene');
         this.resetNewForm();
       } catch (error) {
         log.error('Error submitting new scene:', error);
@@ -448,17 +435,16 @@ export default {
         this.submittingNewScene = false;
       }
     },
-    async deleteAct(act) {
+    async deleteAct(act: any): Promise<void> {
       if (this.deletingScene) {
         return;
       }
-
       const msg = `Are you sure you want to delete ${act.item.name}?`;
-      const action = await this.$bvModal.msgBoxConfirm(msg, {});
+      const action = await (this as any).$bvModal.msgBoxConfirm(msg, {});
       if (action === true) {
         this.deletingScene = true;
         try {
-          await this.DELETE_SCENE(act.item.id);
+          await (this as any).DELETE_SCENE(act.item.id);
         } catch (error) {
           log.error('Error deleting scene:', error);
         } finally {
@@ -466,33 +452,29 @@ export default {
         }
       }
     },
-    resetFirstSceneForm() {
-      this.resetForm('firstSceneFormState', {
-        act_id: null,
-        scene_id: null,
-      });
+    resetFirstSceneForm(): void {
+      (this as any).resetForm('firstSceneFormState', { act_id: null, scene_id: null });
       this.submittingFirstScene = false;
     },
-    openFirstSceneEdit(act) {
+    openFirstSceneEdit(act: any): void {
       if (act != null) {
         this.firstSceneFormState.act_id = act.item.id;
         if (act.item.first_scene != null) {
           this.firstSceneFormState.scene_id = act.item.first_scene;
         }
-        this.$bvModal.show('set-first-scene');
+        (this as any).$bvModal.show('set-first-scene');
       }
     },
-    async onSubmitFirstScene(event) {
-      this.$v.firstSceneFormState.$touch();
-      if (this.$v.firstSceneFormState.$anyError || this.submittingFirstScene) {
+    async onSubmitFirstScene(event: Event): Promise<void> {
+      (this as any).$v.firstSceneFormState.$touch();
+      if ((this as any).$v.firstSceneFormState.$anyError || this.submittingFirstScene) {
         event.preventDefault();
         return;
       }
-
       this.submittingFirstScene = true;
       try {
-        await this.SET_ACT_FIRST_SCENE(this.firstSceneFormState);
-        this.$bvModal.hide('set-first-scene');
+        await (this as any).SET_ACT_FIRST_SCENE(this.firstSceneFormState);
+        (this as any).$bvModal.hide('set-first-scene');
         this.resetFirstSceneForm();
       } catch (error) {
         log.error('Error submitting first scene:', error);
@@ -501,9 +483,9 @@ export default {
         this.submittingFirstScene = false;
       }
     },
-    resetEditForm() {
+    resetEditForm(): void {
       this.editSceneID = null;
-      this.resetForm('editFormState', {
+      (this as any).resetForm('editFormState', {
         scene_id: null,
         name: '',
         act_id: null,
@@ -512,7 +494,7 @@ export default {
       this.submittingEditScene = false;
       this.deletingScene = false;
     },
-    openEditForm(scene) {
+    openEditForm(scene: any): void {
       if (scene != null) {
         this.editSceneID = scene.item.id;
         this.editFormState.scene_id = scene.item.id;
@@ -523,20 +505,19 @@ export default {
         if (scene.item.previous_scene != null) {
           this.editFormState.previous_scene_id = scene.item.previous_scene;
         }
-        this.$bvModal.show('edit-scene');
+        (this as any).$bvModal.show('edit-scene');
       }
     },
-    async onSubmitEdit(event) {
-      this.$v.editFormState.$touch();
-      if (this.$v.editFormState.$anyError || this.submittingEditScene) {
+    async onSubmitEdit(event: Event): Promise<void> {
+      (this as any).$v.editFormState.$touch();
+      if ((this as any).$v.editFormState.$anyError || this.submittingEditScene) {
         event.preventDefault();
         return;
       }
-
       this.submittingEditScene = true;
       try {
-        await this.UPDATE_SCENE(this.editFormState);
-        this.$bvModal.hide('edit-scene');
+        await (this as any).UPDATE_SCENE(this.editFormState);
+        (this as any).$bvModal.hide('edit-scene');
         this.resetEditForm();
       } catch (error) {
         log.error('Error submitting edit scene:', error);
@@ -545,8 +526,8 @@ export default {
         this.submittingEditScene = false;
       }
     },
-    editActChanged(newActID) {
-      const editScene = this.SCENE_LIST.find((s) => s.id === this.editSceneID);
+    editActChanged(newActID: number | null): void {
+      const editScene = (this as any).SCENE_LIST.find((s: any) => s.id === this.editSceneID);
       if (newActID !== editScene.act) {
         this.editFormState.previous_scene_id = null;
       } else if (editScene.previous_scene != null) {
@@ -564,7 +545,7 @@ export default {
       'UPDATE_SCENE',
     ]),
   },
-};
+});
 </script>
 
 <style scoped></style>
diff --git a/client/src/vue_components/show/config/cast/CastLineStats.vue b/client/src/vue_components/show/config/cast/CastLineStats.vue
index 658fe8d4..911ca9f9 100644
--- a/client/src/vue_components/show/config/cast/CastLineStats.vue
+++ b/client/src/vue_components/show/config/cast/CastLineStats.vue
@@ -50,40 +50,36 @@
   </b-container>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { mapGetters } from 'vuex';
 import { makeURL } from '@/js/utils';
 import log from 'loglevel';
 import statsTableMixin from '@/mixins/statsTableMixin';
 
-export default {
+export default defineComponent({
   name: 'CastLineStats',
   mixins: [statsTableMixin],
   data() {
     return {
       loaded: false,
-      castStats: {},
+      castStats: {} as Record<string, any>,
     };
   },
   computed: {
-    tableData() {
+    tableData(): unknown[] {
       if (!this.loaded) {
         return [];
       }
-      return this.CAST_LIST.map(
-        (cast) => ({
-          Cast: cast.id,
-        }),
-        this
-      );
+      return (this as any).CAST_LIST.map((cast: any) => ({ Cast: cast.id }));
     },
-    tableFields() {
-      return ['Cast', ...this.sortedScenes.map((scene) => scene.id.toString())];
+    tableFields(): string[] {
+      return ['Cast', ...(this as any).sortedScenes.map((scene: any) => scene.id.toString())];
     },
     ...mapGetters(['CAST_BY_ID', 'CAST_LIST']),
   },
   methods: {
-    async getStats() {
+    async getStats(): Promise<void> {
       const response = await fetch(`${makeURL('/api/v1/show/cast/stats')}`);
       if (response.ok) {
         this.castStats = await response.json();
@@ -91,7 +87,7 @@ export default {
         log.error('Unable to get cast stats!');
       }
     },
-    getLineCountForCast(castId, actId, sceneId) {
+    getLineCountForCast(castId: number, actId: number, sceneId: number): number {
       if (!Object.keys(this.castStats).includes('line_counts')) {
         return 0;
       }
@@ -108,5 +104,5 @@ export default {
       return 0;
     },
   },
-};
+});
 </script>
diff --git a/client/src/vue_components/show/config/characters/CharacterGroups.vue b/client/src/vue_components/show/config/characters/CharacterGroups.vue
index a199364b..1a3cc3c6 100644
--- a/client/src/vue_components/show/config/characters/CharacterGroups.vue
+++ b/client/src/vue_components/show/config/characters/CharacterGroups.vue
@@ -164,13 +164,14 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { mapActions, mapGetters } from 'vuex';
 import { required } from 'vuelidate/lib/validators';
 import log from 'loglevel';
 import formValidationMixin from '@/mixins/formValidationMixin';
 
-export default {
+export default defineComponent({
   name: 'CharacterGroups',
   mixins: [formValidationMixin],
   data() {
@@ -179,18 +180,18 @@ export default {
       characterGroupFields: ['name', 'description', 'characters', { key: 'btn', label: '' }],
       rowsPerPage: 15,
       currentPage: 1,
-      tempCharacterList: [],
+      tempCharacterList: [] as any[],
       newFormState: {
         name: '',
         description: '',
-        characters: [],
+        characters: [] as number[],
       },
-      tempEditCharacterList: [],
+      tempEditCharacterList: [] as any[],
       editFormState: {
-        id: null,
+        id: null as number | null,
         name: '',
         description: '',
-        characters: [],
+        characters: [] as number[],
       },
       submittingNewGroup: false,
       submittingEditGroup: false,
@@ -199,16 +200,12 @@ export default {
   },
   validations: {
     newFormState: {
-      name: {
-        required,
-      },
+      name: { required },
       description: {},
       characters: {},
     },
     editFormState: {
-      name: {
-        required,
-      },
+      name: { required },
       description: {},
       characters: {},
     },
@@ -216,34 +213,32 @@ export default {
   computed: {
     ...mapGetters(['CHARACTER_LIST', 'CHARACTER_GROUP_LIST', 'IS_SHOW_EDITOR']),
   },
-  async mounted() {
-    await Promise.all([this.GET_CHARACTER_LIST(), this.GET_CHARACTER_GROUP_LIST()]);
+  async mounted(): Promise<void> {
+    await Promise.all([
+      (this as any).GET_CHARACTER_LIST(),
+      (this as any).GET_CHARACTER_GROUP_LIST(),
+    ]);
     this.loading = false;
   },
   methods: {
-    newSelectChanged(value, id) {
-      this.$v.newFormState.characters.$model = value.map((character) => character.id);
+    newSelectChanged(value: any[]): void {
+      (this as any).$v.newFormState.characters.$model = value.map((character) => character.id);
     },
-    resetNewForm() {
+    resetNewForm(): void {
       this.tempCharacterList = [];
-      this.resetForm('newFormState', {
-        name: '',
-        description: '',
-        characters: [],
-      });
+      (this as any).resetForm('newFormState', { name: '', description: '', characters: [] });
       this.submittingNewGroup = false;
     },
-    async onSubmitNew(event) {
-      this.$v.newFormState.$touch();
-      if (this.$v.newFormState.$anyError || this.submittingNewGroup) {
+    async onSubmitNew(event: Event): Promise<void> {
+      (this as any).$v.newFormState.$touch();
+      if ((this as any).$v.newFormState.$anyError || this.submittingNewGroup) {
         event.preventDefault();
         return;
       }
-
       this.submittingNewGroup = true;
       try {
-        await this.ADD_CHARACTER_GROUP(this.newFormState);
-        this.$bvModal.hide('new-character-group');
+        await (this as any).ADD_CHARACTER_GROUP(this.newFormState);
+        (this as any).$bvModal.hide('new-character-group');
         this.resetNewForm();
       } catch (error) {
         log.error('Error submitting new character group:', error);
@@ -252,17 +247,16 @@ export default {
         this.submittingNewGroup = false;
       }
     },
-    async deleteCharacterGroup(characterGroup) {
+    async deleteCharacterGroup(characterGroup: any): Promise<void> {
       if (this.deletingGroup) {
         return;
       }
-
       const msg = `Are you sure you want to delete ${characterGroup.item.name}?`;
-      const action = await this.$bvModal.msgBoxConfirm(msg, {});
+      const action = await (this as any).$bvModal.msgBoxConfirm(msg, {});
       if (action === true) {
         this.deletingGroup = true;
         try {
-          await this.DELETE_CHARACTER_GROUP(characterGroup.item.id);
+          await (this as any).DELETE_CHARACTER_GROUP(characterGroup.item.id);
         } catch (error) {
           log.error('Error deleting character group:', error);
         } finally {
@@ -270,24 +264,22 @@ export default {
         }
       }
     },
-    openEditForm(characterGroup) {
+    openEditForm(characterGroup: any): void {
       if (characterGroup != null) {
         this.editFormState.id = characterGroup.item.id;
         this.editFormState.name = characterGroup.item.name;
         this.editFormState.description = characterGroup.item.description;
         this.editFormState.characters = characterGroup.item.characters;
-
         this.tempEditCharacterList.push(
-          ...this.CHARACTER_LIST.filter((character) =>
+          ...(this as any).CHARACTER_LIST.filter((character: any) =>
             this.editFormState.characters.includes(character.id)
           )
         );
-
-        this.$bvModal.show('edit-character-group');
+        (this as any).$bvModal.show('edit-character-group');
       }
     },
-    resetEditForm() {
-      this.resetForm('editFormState', {
+    resetEditForm(): void {
+      (this as any).resetForm('editFormState', {
         id: null,
         name: '',
         description: '',
@@ -297,20 +289,19 @@ export default {
       this.submittingEditGroup = false;
       this.deletingGroup = false;
     },
-    editSelectChanged(value, id) {
-      this.$v.editFormState.characters.$model = value.map((character) => character.id);
+    editSelectChanged(value: any[]): void {
+      (this as any).$v.editFormState.characters.$model = value.map((character) => character.id);
     },
-    async onSubmitEdit(event) {
-      this.$v.editFormState.$touch();
-      if (this.$v.editFormState.$anyError || this.submittingEditGroup) {
+    async onSubmitEdit(event: Event): Promise<void> {
+      (this as any).$v.editFormState.$touch();
+      if ((this as any).$v.editFormState.$anyError || this.submittingEditGroup) {
         event.preventDefault();
         return;
       }
-
       this.submittingEditGroup = true;
       try {
-        await this.UPDATE_CHARACTER_GROUP(this.editFormState);
-        this.$bvModal.hide('edit-character-group');
+        await (this as any).UPDATE_CHARACTER_GROUP(this.editFormState);
+        (this as any).$bvModal.hide('edit-character-group');
         this.resetEditForm();
       } catch (error) {
         log.error('Error submitting edit character group:', error);
@@ -327,7 +318,7 @@ export default {
       'UPDATE_CHARACTER_GROUP',
     ]),
   },
-};
+});
 </script>
 
 <style scoped></style>
diff --git a/client/src/vue_components/show/config/characters/CharacterLineStats.vue b/client/src/vue_components/show/config/characters/CharacterLineStats.vue
index 87e8f14f..73c69833 100644
--- a/client/src/vue_components/show/config/characters/CharacterLineStats.vue
+++ b/client/src/vue_components/show/config/characters/CharacterLineStats.vue
@@ -52,40 +52,36 @@
   </b-container>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { mapGetters } from 'vuex';
 import { makeURL } from '@/js/utils';
 import log from 'loglevel';
 import statsTableMixin from '@/mixins/statsTableMixin';
 
-export default {
+export default defineComponent({
   name: 'CharacterLineStats',
   mixins: [statsTableMixin],
   data() {
     return {
       loaded: false,
-      characterStats: {},
+      characterStats: {} as Record<string, any>,
     };
   },
   computed: {
-    tableData() {
+    tableData(): unknown[] {
       if (!this.loaded) {
         return [];
       }
-      return this.CHARACTER_LIST.map(
-        (character) => ({
-          Character: character.id,
-        }),
-        this
-      );
+      return (this as any).CHARACTER_LIST.map((character: any) => ({ Character: character.id }));
     },
-    tableFields() {
-      return ['Character', ...this.sortedScenes.map((scene) => scene.id.toString())];
+    tableFields(): string[] {
+      return ['Character', ...(this as any).sortedScenes.map((scene: any) => scene.id.toString())];
     },
     ...mapGetters(['CHARACTER_BY_ID', 'CHARACTER_LIST']),
   },
   methods: {
-    async getStats() {
+    async getStats(): Promise<void> {
       const response = await fetch(`${makeURL('/api/v1/show/character/stats')}`);
       if (response.ok) {
         this.characterStats = await response.json();
@@ -93,7 +89,7 @@ export default {
         log.error('Unable to get character stats!');
       }
     },
-    getLineCountForCharacter(characterId, actId, sceneId) {
+    getLineCountForCharacter(characterId: number, actId: number, sceneId: number): number {
       if (!Object.keys(this.characterStats).includes('line_counts')) {
         return 0;
       }
@@ -110,5 +106,5 @@ export default {
       return 0;
     },
   },
-};
+});
 </script>
diff --git a/client/src/vue_components/show/config/cues/CueCountStats.vue b/client/src/vue_components/show/config/cues/CueCountStats.vue
index df5277fb..277e1ab0 100644
--- a/client/src/vue_components/show/config/cues/CueCountStats.vue
+++ b/client/src/vue_components/show/config/cues/CueCountStats.vue
@@ -50,40 +50,38 @@
   </b-container>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { mapGetters } from 'vuex';
 import { makeURL } from '@/js/utils';
 import log from 'loglevel';
 import statsTableMixin from '@/mixins/statsTableMixin';
 
-export default {
+export default defineComponent({
   name: 'CueCountStats',
   mixins: [statsTableMixin],
   data() {
     return {
       loaded: false,
-      cueStats: {},
+      cueStats: {} as Record<string, any>,
     };
   },
   computed: {
-    tableData() {
+    tableData(): unknown[] {
       if (!this.loaded) {
         return [];
       }
-      return this.CUE_TYPES.map(
-        (cueType) => ({
-          CueType: cueType.id,
-        }),
-        this
-      );
+      return ((this as any).CUE_TYPES as any[]).map((cueType) => ({
+        CueType: cueType.id,
+      }));
     },
-    tableFields() {
-      return ['Cues', ...this.sortedScenes.map((scene) => scene.id.toString())];
+    tableFields(): string[] {
+      return ['Cues', ...((this as any).sortedScenes as any[]).map((scene) => scene.id.toString())];
     },
     ...mapGetters(['CUE_TYPES', 'CUE_TYPE_BY_ID']),
   },
   methods: {
-    async getStats() {
+    async getStats(): Promise<void> {
       const response = await fetch(`${makeURL('/api/v1/show/cues/stats')}`);
       if (response.ok) {
         this.cueStats = await response.json();
@@ -91,7 +89,7 @@ export default {
         log.error('Unable to get cue stats!');
       }
     },
-    getCountForCueType(cueTypeId, actId, sceneId) {
+    getCountForCueType(cueTypeId: number, actId: number, sceneId: number): number {
       if (!Object.keys(this.cueStats).includes('cue_counts')) {
         return 0;
       }
@@ -108,5 +106,5 @@ export default {
       return 0;
     },
   },
-};
+});
 </script>
diff --git a/client/src/vue_components/show/config/cues/CueEditor.vue b/client/src/vue_components/show/config/cues/CueEditor.vue
index c424147c..72d10cd0 100644
--- a/client/src/vue_components/show/config/cues/CueEditor.vue
+++ b/client/src/vue_components/show/config/cues/CueEditor.vue
@@ -104,7 +104,8 @@
   </b-container>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { mapGetters, mapMutations, mapActions } from 'vuex';
 import log from 'loglevel';
 
@@ -114,13 +115,13 @@ import JumpToCueModal from '@/vue_components/show/config/cues/JumpToCueModal.vue
 import { minValue, required } from 'vuelidate/lib/validators';
 import { notNull, notNullAndGreaterThanZero } from '@/js/customValidators';
 
-export default {
+export default defineComponent({
   name: 'CueEditor',
   components: { ScriptLineCueEditor, JumpToCueModal },
   data() {
     return {
       currentEditPage: 1,
-      editPages: [],
+      editPages: [] as any[],
       blankLineObj: {
         id: null,
         act_id: null,
@@ -128,8 +129,8 @@ export default {
         page: null,
         line_parts: [],
       },
-      curSavePage: null,
-      totalSavePages: null,
+      curSavePage: null as number | null,
+      totalSavePages: null as number | null,
       savingInProgress: false,
       saveError: false,
       currentMaxPage: 1,
@@ -150,10 +151,10 @@ export default {
     },
   },
   computed: {
-    currentEditPageKey() {
+    currentEditPageKey(): string {
       return this.currentEditPage.toString();
     },
-    saveProgressVariant() {
+    saveProgressVariant(): string {
       if (!this.savingInProgress) {
         return this.saveError ? 'danger' : 'success';
       }
@@ -178,34 +179,33 @@ export default {
     ]),
   },
   watch: {
-    currentEditPage(val) {
-      localStorage.setItem('cueEditPage', val);
+    currentEditPage(val: number): void {
+      localStorage.setItem('cueEditPage', val.toString());
     },
   },
-  async beforeMount() {
+  async beforeMount(): Promise<void> {
     await Promise.all([
-      this.GET_CURRENT_USER().then(() => {
-        if (this.CURRENT_USER != null) {
+      (this as any).GET_CURRENT_USER().then(() => {
+        if ((this as any).CURRENT_USER != null) {
           return Promise.all([
-            this.GET_STAGE_DIRECTION_STYLE_OVERRIDES(),
-            this.GET_CUE_COLOUR_OVERRIDES(),
+            (this as any).GET_STAGE_DIRECTION_STYLE_OVERRIDES(),
+            (this as any).GET_CUE_COLOUR_OVERRIDES(),
           ]);
         }
         return Promise.resolve();
       }),
-      this.GET_SCRIPT_CONFIG_STATUS(),
-      this.GET_ACT_LIST(),
-      this.GET_SCENE_LIST(),
-      this.GET_CHARACTER_LIST(),
-      this.GET_CHARACTER_GROUP_LIST(),
-      this.GET_CUE_TYPES(),
-      this.LOAD_CUES(),
-      this.GET_CUTS(),
-      this.GET_STAGE_DIRECTION_STYLES(),
+      (this as any).GET_SCRIPT_CONFIG_STATUS(),
+      (this as any).GET_ACT_LIST(),
+      (this as any).GET_SCENE_LIST(),
+      (this as any).GET_CHARACTER_LIST(),
+      (this as any).GET_CHARACTER_GROUP_LIST(),
+      (this as any).GET_CUE_TYPES(),
+      (this as any).LOAD_CUES(),
+      (this as any).GET_CUTS(),
+      (this as any).GET_STAGE_DIRECTION_STYLES(),
       this.getMaxScriptPage(),
     ]);
 
-    // Initialisation of page data
     const storedPage = localStorage.getItem('cueEditPage');
     if (storedPage != null) {
       this.currentEditPage = parseInt(storedPage, 10);
@@ -213,7 +213,7 @@ export default {
     await this.goToPageInner(this.currentEditPage);
   },
   methods: {
-    async getMaxScriptPage() {
+    async getMaxScriptPage(): Promise<void> {
       const response = await fetch(`${makeURL('/api/v1/show/script/max_page')}`, {
         method: 'GET',
         headers: {
@@ -227,59 +227,56 @@ export default {
         log.error('Unable to get current max page');
       }
     },
-    requestEdit() {
-      this.$socket.sendObj({
+    requestEdit(): void {
+      (this as any).$socket.sendObj({
         OP: 'REQUEST_SCRIPT_EDIT',
         DATA: {},
       });
     },
-    async stopEditing() {
-      this.$socket.sendObj({
+    async stopEditing(): Promise<void> {
+      (this as any).$socket.sendObj({
         OP: 'STOP_SCRIPT_EDIT',
         DATA: {},
       });
     },
-    async decrPage() {
+    async decrPage(): Promise<void> {
       if (this.currentEditPage > 1) {
         const targetPage = this.currentEditPage - 1;
-        // Load target page from backend
-        await this.LOAD_SCRIPT_PAGE(targetPage);
+        await (this as any).LOAD_SCRIPT_PAGE(targetPage);
         this.currentEditPage--;
-        // Pre-load previous page
-        await this.LOAD_SCRIPT_PAGE(this.currentEditPage - 1);
+        await (this as any).LOAD_SCRIPT_PAGE(this.currentEditPage - 1);
       }
     },
-    async incrPage() {
+    async incrPage(): Promise<void> {
       this.currentEditPage++;
-      // Pre-load next page
-      await this.LOAD_SCRIPT_PAGE(this.currentEditPage + 1);
+      await (this as any).LOAD_SCRIPT_PAGE(this.currentEditPage + 1);
     },
-    getCuesForLine(line) {
-      if (Object.keys(this.SCRIPT_CUES).includes(line.id.toString())) {
-        return this.SCRIPT_CUES[line.id.toString()];
+    getCuesForLine(line: any): any[] {
+      if (Object.keys((this as any).SCRIPT_CUES).includes(line.id.toString())) {
+        return (this as any).SCRIPT_CUES[line.id.toString()];
       }
       return [];
     },
-    validatePageState(name) {
-      const { $dirty, $error } = this.$v.pageInputFormState[name];
+    validatePageState(name: string): boolean | null {
+      const { $dirty, $error } = (this as any).$v.pageInputFormState[name];
       return $dirty ? !$error : null;
     },
-    async goToPage() {
+    async goToPage(): Promise<void> {
       this.changingPage = true;
       await this.goToPageInner(this.pageInputFormState.pageNo);
       this.changingPage = false;
     },
-    async goToPageInner(pageNo) {
+    async goToPageInner(pageNo: number): Promise<void> {
       if (pageNo > 1) {
-        await this.LOAD_SCRIPT_PAGE(parseInt(pageNo, 10) - 1);
+        await (this as any).LOAD_SCRIPT_PAGE(parseInt(pageNo.toString(), 10) - 1);
       }
-      await this.LOAD_SCRIPT_PAGE(pageNo);
+      await (this as any).LOAD_SCRIPT_PAGE(pageNo);
       this.currentEditPage = pageNo;
-      await this.LOAD_SCRIPT_PAGE(parseInt(pageNo, 10) + 1);
+      await (this as any).LOAD_SCRIPT_PAGE(parseInt(pageNo.toString(), 10) + 1);
     },
-    async handleJumpToCue(pageNumber) {
+    async handleJumpToCue(pageNumber: number): Promise<void> {
       await this.goToPageInner(pageNumber);
-      this.$bvModal.hide('jump-to-cue');
+      (this as any).$bvModal.hide('jump-to-cue');
     },
     ...mapMutations(['REMOVE_PAGE', 'ADD_BLANK_LINE', 'SET_LINE']),
     ...mapActions([
@@ -302,5 +299,5 @@ export default {
       'GET_CURRENT_USER',
     ]),
   },
-};
+});
 </script>
diff --git a/client/src/vue_components/show/config/cues/JumpToCueModal.vue b/client/src/vue_components/show/config/cues/JumpToCueModal.vue
index 38385937..e2660692 100644
--- a/client/src/vue_components/show/config/cues/JumpToCueModal.vue
+++ b/client/src/vue_components/show/config/cues/JumpToCueModal.vue
@@ -112,23 +112,24 @@
   </b-modal>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { required } from 'vuelidate/lib/validators';
 import { mapActions, mapGetters } from 'vuex';
 import log from 'loglevel';
 import Vue from 'vue';
 import { notNull } from '@/js/customValidators';
 
-export default {
+export default defineComponent({
   name: 'JumpToCueModal',
   data() {
     return {
       cueSearchForm: {
-        cueTypeId: null,
+        cueTypeId: null as number | null,
         identifier: '',
       },
-      cueSearchResults: null,
-      generalError: null,
+      cueSearchResults: null as any | null,
+      generalError: null as string | null,
       searching: false,
       showResults: false,
     };
@@ -146,9 +147,9 @@ export default {
   },
   computed: {
     ...mapGetters(['CUE_TYPES']),
-    cueTypeOptions() {
-      const options = [{ value: null, text: 'Select a cue type...', disabled: true }];
-      this.CUE_TYPES.forEach((type) => {
+    cueTypeOptions(): unknown[] {
+      const options: any[] = [{ value: null, text: 'Select a cue type...', disabled: true }];
+      ((this as any).CUE_TYPES as any[]).forEach((type) => {
         options.push({
           value: type.id,
           text: `${type.prefix} - ${type.description || 'No description'}`,
@@ -156,39 +157,45 @@ export default {
       });
       return options;
     },
-    multipleMatches() {
+    multipleMatches(): boolean {
       return this.cueSearchResults?.exact_matches?.length > 1;
     },
-    showSuggestions() {
+    showSuggestions(): boolean {
       return (
         this.cueSearchResults?.exact_matches?.length === 0 &&
         this.cueSearchResults?.suggestions?.length > 0
       );
     },
-    noMatches() {
+    noMatches(): boolean {
       return (
         this.cueSearchResults?.exact_matches?.length === 0 &&
         this.cueSearchResults?.suggestions?.length === 0
       );
     },
-    cueTypeErrorState() {
-      const { $dirty, $error } = this.$v.cueSearchForm.cueTypeId;
+    cueTypeErrorState(): boolean | null {
+      const { $dirty, $error } = (this as any).$v.cueSearchForm.cueTypeId;
       return $dirty ? !$error : null;
     },
-    cueTypeError() {
-      if (this.$v.cueSearchForm.cueTypeId.$dirty) {
-        if (!this.$v.cueSearchForm.cueTypeId.required || !this.$v.cueSearchForm.cueTypeId.notNull) {
+    cueTypeError(): string {
+      if ((this as any).$v.cueSearchForm.cueTypeId.$dirty) {
+        if (
+          !(this as any).$v.cueSearchForm.cueTypeId.required ||
+          !(this as any).$v.cueSearchForm.cueTypeId.notNull
+        ) {
           return 'Cue type is required';
         }
       }
       return '';
     },
-    identifierErrorState() {
-      const { $dirty, $error } = this.$v.cueSearchForm.identifier;
+    identifierErrorState(): boolean | null {
+      const { $dirty, $error } = (this as any).$v.cueSearchForm.identifier;
       return $dirty ? !$error : null;
     },
-    identifierError() {
-      if (this.$v.cueSearchForm.identifier.$dirty && !this.$v.cueSearchForm.identifier.required) {
+    identifierError(): string {
+      if (
+        (this as any).$v.cueSearchForm.identifier.$dirty &&
+        !(this as any).$v.cueSearchForm.identifier.required
+      ) {
         return 'Identifier is required';
       }
       return '';
@@ -196,19 +203,19 @@ export default {
   },
   methods: {
     ...mapActions(['SEARCH_CUES']),
-    async performCueSearch(event) {
+    async performCueSearch(event?: Event): Promise<void> {
       if (event) {
         event.preventDefault();
       }
-      this.$v.$touch();
-      if (this.$v.$anyError) {
+      (this as any).$v.$touch();
+      if ((this as any).$v.$anyError) {
         return;
       }
 
       this.searching = true;
       this.generalError = null;
       try {
-        const result = await this.SEARCH_CUES({
+        const result = await (this as any).SEARCH_CUES({
           identifier: this.cueSearchForm.identifier.trim(),
           cueTypeId: this.cueSearchForm.cueTypeId,
         });
@@ -216,7 +223,7 @@ export default {
 
         if (result.exact_matches?.length === 1) {
           await this.navigateToMatch(result.exact_matches[0]);
-          this.$bvModal.hide('jump-to-cue');
+          (this as any).$bvModal.hide('jump-to-cue');
         } else {
           this.showResults = true;
         }
@@ -227,21 +234,21 @@ export default {
         this.searching = false;
       }
     },
-    async navigateToMatch(match) {
+    async navigateToMatch(match: any): Promise<void> {
       const targetPage = match.location.page;
       this.$emit('navigate', targetPage);
-      Vue.$toast.success(
+      (Vue as any).$toast.success(
         `Jumped to ${match.cue_type.prefix} ${match.cue.ident} on page ${targetPage}`
       );
     },
-    resetCueSearch() {
+    resetCueSearch(): void {
       this.cueSearchForm.identifier = '';
       this.cueSearchForm.cueTypeId = null;
       this.cueSearchResults = null;
       this.generalError = null;
       this.showResults = false;
-      this.$v.$reset();
+      (this as any).$v.$reset();
     },
   },
-};
+});
 </script>
diff --git a/client/src/vue_components/show/config/cues/ScriptLineCueEditor.vue b/client/src/vue_components/show/config/cues/ScriptLineCueEditor.vue
index 308b05ce..8226a7c9 100644
--- a/client/src/vue_components/show/config/cues/ScriptLineCueEditor.vue
+++ b/client/src/vue_components/show/config/cues/ScriptLineCueEditor.vue
@@ -263,7 +263,8 @@
   </b-container>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { required } from 'vuelidate/lib/validators';
 import { mapActions, mapGetters } from 'vuex';
 import { contrastColor } from 'contrast-color';
@@ -272,7 +273,7 @@ import { LINE_TYPES } from '@/constants/lineTypes';
 import { isWholeLineCut as isWholeLineCutUtil } from '@/js/scriptUtils';
 import scriptDisplayMixin from '@/mixins/scriptDisplayMixin';
 
-export default {
+export default defineComponent({
   name: 'ScriptLineCueEditor',
   mixins: [scriptDisplayMixin],
   props: {
@@ -329,15 +330,15 @@ export default {
     return {
       LINE_TYPES,
       newFormState: {
-        cueType: null,
-        ident: null,
-        lineId: null,
+        cueType: null as number | null,
+        ident: null as string | null,
+        lineId: null as number | null,
       },
       editFormState: {
-        cueId: null,
-        cueType: null,
-        ident: null,
-        lineId: null,
+        cueId: null as number | null,
+        cueType: null as number | null,
+        ident: null as string | null,
+        lineId: null as number | null,
       },
       submittingNewCue: false,
       submittingEditCue: false,
@@ -380,24 +381,26 @@ export default {
       'SCRIPT_CUES',
       'CUE_COLOUR_OVERRIDES',
     ]),
-    cueTypeOptions() {
-      if (this.IS_ADMIN_USER) {
+    cueTypeOptions(): unknown[] {
+      if ((this as any).IS_ADMIN_USER) {
         return [
           { value: null, text: 'N/A' },
-          ...this.cueTypes.map((cueType) => ({
+          ...(this.cueTypes as any[]).map((cueType) => ({
             value: cueType.id,
             text: `${cueType.prefix}: ${cueType.description}`,
           })),
         ];
       }
-      const writeMask = this.RBAC_ROLES.find((x) => x.key === 'WRITE').value;
+      const writeMask = ((this as any).RBAC_ROLES as any[]).find(
+        (x: any) => x.key === 'WRITE'
+      ).value;
 
-      const allowableCueTypes = this.CURRENT_USER_RBAC.cuetypes
-        .filter((x) => (x[1] & writeMask) !== 0)
-        .map((x) => x[0].id);
+      const allowableCueTypes = (this as any).CURRENT_USER_RBAC.cuetypes
+        .filter((x: any) => (x[1] & writeMask) !== 0)
+        .map((x: any) => x[0].id);
       return [
         { value: null, text: 'N/A' },
-        ...this.cueTypes
+        ...(this.cueTypes as any[])
           .filter((cueType) => allowableCueTypes.includes(cueType.id))
           .map((cueType) => ({
             value: cueType.id,
@@ -405,17 +408,17 @@ export default {
           })),
       ];
     },
-    needsHeadings() {
-      const ret = [];
-      this.line.line_parts.forEach(function checkLinePartNeedsHeading(part) {
+    needsHeadings(): boolean[] {
+      const ret: boolean[] = [];
+      (this.line as any).line_parts.forEach((part: any) => {
         if (
           this.previousLine == null ||
-          this.previousLine.line_parts.length !== this.line.line_parts.length
+          (this.previousLine as any).line_parts.length !== (this.line as any).line_parts.length
         ) {
           ret.push(true);
         } else {
-          const matchingIndex = this.previousLine.line_parts.find(
-            (prevPart) => prevPart.part_index === part.part_index
+          const matchingIndex = (this.previousLine as any).line_parts.find(
+            (prevPart: any) => prevPart.part_index === part.part_index
           );
           if (matchingIndex == null) {
             ret.push(true);
@@ -428,24 +431,24 @@ export default {
             );
           }
         }
-      }, this);
+      });
       return ret;
     },
-    needsActSceneLabelSimple() {
+    needsActSceneLabelSimple(): boolean {
       if (this.previousLine == null) {
         return true;
       }
       return !(
-        this.previousLine.act_id === this.line.act_id &&
-        this.previousLine.scene_id === this.line.scene_id
+        (this.previousLine as any).act_id === (this.line as any).act_id &&
+        (this.previousLine as any).scene_id === (this.line as any).scene_id
       );
     },
-    flatScriptCues() {
-      return Object.keys(this.SCRIPT_CUES)
-        .map((key) => this.SCRIPT_CUES[key])
+    flatScriptCues(): any[] {
+      return Object.keys((this as any).SCRIPT_CUES)
+        .map((key) => (this as any).SCRIPT_CUES[key])
         .flat();
     },
-    isDuplicateNewCue() {
+    isDuplicateNewCue(): boolean {
       if (this.newFormState.ident == null || this.newFormState.cueType == null) {
         return false;
       }
@@ -454,7 +457,7 @@ export default {
           cue.cue_type_id === this.newFormState.cueType && cue.ident === this.newFormState.ident
       );
     },
-    isDuplicateEditCue() {
+    isDuplicateEditCue(): boolean {
       if (this.editFormState.ident == null || this.editFormState.cueType == null) {
         return false;
       }
@@ -468,12 +471,12 @@ export default {
   },
   methods: {
     contrastColor,
-    openNewForm() {
+    openNewForm(): void {
       this.resetNewForm();
-      this.newFormState.lineId = this.line.id;
-      this.$bvModal.show(`line_${this.lineIndex}_-new-cue`);
+      this.newFormState.lineId = (this.line as any).id;
+      (this as any).$bvModal.show(`line_${this.lineIndex}_-new-cue`);
     },
-    resetNewForm() {
+    resetNewForm(): void {
       this.newFormState = {
         cueType: null,
         ident: null,
@@ -482,24 +485,24 @@ export default {
       this.submittingNewCue = false;
 
       this.$nextTick(() => {
-        this.$v.$reset();
+        (this as any).$v.$reset();
       });
     },
-    validateNewState(name) {
-      const { $dirty, $error } = this.$v.newFormState[name];
+    validateNewState(name: string): boolean | null {
+      const { $dirty, $error } = (this as any).$v.newFormState[name];
       return $dirty ? !$error : null;
     },
-    async onSubmitNew(event) {
-      this.$v.newFormState.$touch();
-      if (this.$v.newFormState.$anyError || this.submittingNewCue) {
+    async onSubmitNew(event: Event): Promise<void> {
+      (this as any).$v.newFormState.$touch();
+      if ((this as any).$v.newFormState.$anyError || this.submittingNewCue) {
         event.preventDefault();
         return;
       }
 
       this.submittingNewCue = true;
       try {
-        await this.ADD_NEW_CUE(this.newFormState);
-        this.$bvModal.hide(`line_${this.lineIndex}_-new-cue`);
+        await (this as any).ADD_NEW_CUE(this.newFormState);
+        (this as any).$bvModal.hide(`line_${this.lineIndex}_-new-cue`);
         this.resetNewForm();
       } catch (error) {
         log.error('Error submitting new cue:', error);
@@ -508,15 +511,15 @@ export default {
         this.submittingNewCue = false;
       }
     },
-    openEditForm(cue) {
+    openEditForm(cue: any): void {
       this.resetEditForm();
       this.editFormState.cueId = cue.id;
       this.editFormState.cueType = cue.cue_type_id;
       this.editFormState.ident = cue.ident;
-      this.editFormState.lineId = this.line.id;
-      this.$bvModal.show(`line_${this.lineIndex}_-edit-cue`);
+      this.editFormState.lineId = (this.line as any).id;
+      (this as any).$bvModal.show(`line_${this.lineIndex}_-edit-cue`);
     },
-    resetEditForm() {
+    resetEditForm(): void {
       this.editFormState = {
         cueId: null,
         cueType: null,
@@ -527,24 +530,24 @@ export default {
       this.deletingCue = false;
 
       this.$nextTick(() => {
-        this.$v.$reset();
+        (this as any).$v.$reset();
       });
     },
-    validateEditState(name) {
-      const { $dirty, $error } = this.$v.editFormState[name];
+    validateEditState(name: string): boolean | null {
+      const { $dirty, $error } = (this as any).$v.editFormState[name];
       return $dirty ? !$error : null;
     },
-    async onSubmitEdit(event) {
-      this.$v.editFormState.$touch();
-      if (this.$v.editFormState.$anyError || this.submittingEditCue) {
+    async onSubmitEdit(event: Event): Promise<void> {
+      (this as any).$v.editFormState.$touch();
+      if ((this as any).$v.editFormState.$anyError || this.submittingEditCue) {
         event.preventDefault();
         return;
       }
 
       this.submittingEditCue = true;
       try {
-        await this.EDIT_CUE(this.editFormState);
-        this.$bvModal.hide(`line_${this.lineIndex}_-edit-cue`);
+        await (this as any).EDIT_CUE(this.editFormState);
+        (this as any).$bvModal.hide(`line_${this.lineIndex}_-edit-cue`);
         this.resetEditForm();
       } catch (error) {
         log.error('Error submitting edit cue:', error);
@@ -553,23 +556,23 @@ export default {
         this.submittingEditCue = false;
       }
     },
-    async deleteCue(event) {
-      this.$v.editFormState.$touch();
-      if (this.$v.editFormState.$anyError || this.deletingCue) {
+    async deleteCue(event: Event): Promise<void> {
+      (this as any).$v.editFormState.$touch();
+      if ((this as any).$v.editFormState.$anyError || this.deletingCue) {
         event.preventDefault();
         return;
       }
 
       const msg = 'Are you sure you want to delete this cue?';
-      const action = await this.$bvModal.msgBoxConfirm(msg, {});
+      const action = await (this as any).$bvModal.msgBoxConfirm(msg, {});
       if (action === true) {
         this.deletingCue = true;
         try {
-          await this.DELETE_CUE({
+          await (this as any).DELETE_CUE({
             cueId: this.editFormState.cueId,
             lineId: this.editFormState.lineId,
           });
-          this.$bvModal.hide(`line_${this.lineIndex}_-edit-cue`);
+          (this as any).$bvModal.hide(`line_${this.lineIndex}_-edit-cue`);
           this.resetEditForm();
         } catch (error) {
           log.error('Error deleting cue:', error);
@@ -578,28 +581,29 @@ export default {
         }
       }
     },
-    cueLabel(cue) {
-      const cueType = this.cueTypes.find((cT) => cT.id === cue.cue_type_id);
+    cueLabel(cue: any): string {
+      const cueType = (this.cueTypes as any[]).find((cT) => cT.id === cue.cue_type_id);
       return `${cueType.prefix} ${cue.ident}`;
     },
-    cueBackgroundColour(cue) {
-      const cueType = this.cueTypes.find((ct) => ct.id === cue.cue_type_id);
-      if (!cueType) return '#000000'; // Fallback
+    cueBackgroundColour(cue: any): string {
+      const cueType = (this.cueTypes as any[]).find((ct) => ct.id === cue.cue_type_id);
+      if (!cueType) return '#000000';
 
-      // Check if user has an override for this cue type
-      const override = this.CUE_COLOUR_OVERRIDES.find((o) => o.settings.id === cueType.id);
+      const override = ((this as any).CUE_COLOUR_OVERRIDES as any[]).find(
+        (o) => o.settings.id === cueType.id
+      );
       if (override) {
         return override.settings.colour;
       }
 
       return cueType.colour;
     },
-    isWholeLineCut(line) {
-      return isWholeLineCutUtil(line, this.linePartCuts);
+    isWholeLineCut(line: any): boolean {
+      return isWholeLineCutUtil(line, this.linePartCuts as any[]);
     },
     ...mapActions(['ADD_NEW_CUE', 'EDIT_CUE', 'DELETE_CUE']),
   },
-};
+});
 </script>
 
 <style scoped>
diff --git a/client/src/vue_components/show/config/mics/MicAllocations.vue b/client/src/vue_components/show/config/mics/MicAllocations.vue
index 5be645a5..ff984efe 100644
--- a/client/src/vue_components/show/config/mics/MicAllocations.vue
+++ b/client/src/vue_components/show/config/mics/MicAllocations.vue
@@ -173,129 +173,132 @@
   </b-container>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { mapActions, mapGetters } from 'vuex';
 import { diff } from 'deep-object-diff';
 import MicAutoPopulateModal from '@/vue_components/show/config/mics/MicAutoPopulateModal.vue';
 
-export default {
+export default defineComponent({
   name: 'MicAllocations',
   components: { MicAutoPopulateModal },
   data() {
     return {
-      selectedMic: null,
-      internalState: {},
+      selectedMic: null as number | null,
+      internalState: {} as Record<string | number, any>,
       loaded: false,
       saving: false,
       editMode: true,
     };
   },
   computed: {
-    micOptions() {
+    micOptions(): any[] {
       return [
         { value: null, text: 'N/A', disabled: true },
-        ...this.MICROPHONES.map((mic) => ({ value: mic.id, text: mic.name })),
+        ...((this as any).MICROPHONES as any[]).map((mic: any) => ({
+          value: mic.id,
+          text: mic.name,
+        })),
       ];
     },
-    tableFields() {
-      return ['Character', ...this.sortedScenes.map((scene) => scene.id.toString())];
+    tableFields(): string[] {
+      return [
+        'Character',
+        ...((this as any).sortedScenes as any[]).map((scene: any) => scene.id.toString()),
+      ];
     },
-    sortedActs() {
-      if (this.CURRENT_SHOW.first_act_id == null) {
+    sortedActs(): any[] {
+      if ((this as any).CURRENT_SHOW.first_act_id == null) {
         return [];
       }
-      let currentAct = this.ACT_BY_ID(this.CURRENT_SHOW.first_act_id);
+      let currentAct = (this as any).ACT_BY_ID((this as any).CURRENT_SHOW.first_act_id);
       if (currentAct == null) {
         return [];
       }
-      const acts = [];
+      const acts: any[] = [];
       while (currentAct != null) {
         acts.push(currentAct);
-        currentAct = this.ACT_BY_ID(currentAct.next_act);
+        currentAct = (this as any).ACT_BY_ID(currentAct.next_act);
       }
       return acts;
     },
-    sortedScenes() {
-      if (this.CURRENT_SHOW.first_act_id == null) {
+    sortedScenes(): any[] {
+      if ((this as any).CURRENT_SHOW.first_act_id == null) {
         return [];
       }
 
-      let currentAct = this.ACT_BY_ID(this.CURRENT_SHOW.first_act_id);
+      let currentAct = (this as any).ACT_BY_ID((this as any).CURRENT_SHOW.first_act_id);
       if (currentAct == null || currentAct.first_scene == null) {
         return [];
       }
 
-      const scenes = [];
+      const scenes: any[] = [];
       while (currentAct != null) {
-        let currentScene = this.SCENE_BY_ID(currentAct.first_scene);
+        let currentScene = (this as any).SCENE_BY_ID(currentAct.first_scene);
         while (currentScene != null) {
           scenes.push(currentScene);
-          currentScene = this.SCENE_BY_ID(currentScene.next_scene);
+          currentScene = (this as any).SCENE_BY_ID(currentScene.next_scene);
         }
-        currentAct = this.ACT_BY_ID(currentAct.next_act);
+        currentAct = (this as any).ACT_BY_ID(currentAct.next_act);
       }
       return scenes;
     },
-    tableData() {
+    tableData(): unknown[] {
       if (!this.loaded) {
         return [];
       }
-      return this.CHARACTER_LIST.map(
-        (character) => ({
-          Character: character.id,
-        }),
-        this
-      );
+      return ((this as any).CHARACTER_LIST as any[]).map((character: any) => ({
+        Character: character.id,
+      }));
     },
-    allAllocations() {
-      const micData = {};
-      Object.keys(this.MIC_ALLOCATIONS).forEach((micId) => {
-        const sceneData = {};
-        const allocations = this.MIC_ALLOCATIONS[micId];
-        allocations.forEach((allocation) => {
+    allAllocations(): Record<string, any> {
+      const micData: Record<string, any> = {};
+      Object.keys((this as any).MIC_ALLOCATIONS).forEach((micId) => {
+        const sceneData: Record<string | number, any> = {};
+        const allocations = (this as any).MIC_ALLOCATIONS[micId];
+        allocations.forEach((allocation: any) => {
           sceneData[allocation.scene_id] = allocation.character_id;
         });
-        this.sortedScenes
-          .map((scene) => scene.id)
-          .forEach((sceneId) => {
+        (this as any).sortedScenes
+          .map((scene: any) => scene.id)
+          .forEach((sceneId: number) => {
             if (!Object.keys(sceneData).includes(sceneId.toString())) {
               sceneData[sceneId] = null;
             }
           });
         micData[micId] = sceneData;
-      }, this);
+      });
       return micData;
     },
-    changes() {
-      return diff(this.allAllocations, this.internalState);
+    changes(): Record<string, any> {
+      return diff((this as any).allAllocations, this.internalState) as Record<string, any>;
     },
-    needsSaving() {
+    needsSaving(): boolean {
       return Object.keys(this.changes).length > 0;
     },
-    allocationByCharacter() {
-      const charData = {};
-      // Initialize with empty arrays for each character/scene combination
-      this.CHARACTER_LIST.map((character) => character.id).forEach((characterId) => {
-        const sceneData = {};
-        this.sortedScenes
-          .map((scene) => scene.id)
-          .forEach((sceneId) => {
-            sceneData[sceneId] = [];
-          });
-        charData[characterId] = sceneData;
-      }, this);
-      // Collect all mics assigned to each character in each scene
-      Object.keys(this.MIC_ALLOCATIONS).forEach((micId) => {
-        this.sortedScenes
-          .map((scene) => scene.id)
-          .forEach((sceneId) => {
-            if (this.allAllocations[micId][sceneId] != null) {
-              const characterId = this.allAllocations[micId][sceneId];
-              charData[characterId][sceneId].push(this.MICROPHONE_BY_ID(micId).name);
+    allocationByCharacter(): Record<string | number, any> {
+      const charData: Record<string | number, any> = {};
+      ((this as any).CHARACTER_LIST as any[])
+        .map((character: any) => character.id)
+        .forEach((characterId: number) => {
+          const sceneData: Record<string | number, any> = {};
+          (this as any).sortedScenes
+            .map((scene: any) => scene.id)
+            .forEach((sceneId: number) => {
+              sceneData[sceneId] = [];
+            });
+          charData[characterId] = sceneData;
+        });
+      Object.keys((this as any).MIC_ALLOCATIONS).forEach((micId) => {
+        (this as any).sortedScenes
+          .map((scene: any) => scene.id)
+          .forEach((sceneId: number) => {
+            if ((this as any).allAllocations[micId][sceneId] != null) {
+              const characterId = (this as any).allAllocations[micId][sceneId];
+              charData[characterId][sceneId].push((this as any).MICROPHONE_BY_ID(micId).name);
             }
-          }, this);
-      }, this);
-      // Convert arrays to comma-separated strings (or null if empty)
+          });
+      });
       Object.keys(charData).forEach((characterId) => {
         Object.keys(charData[characterId]).forEach((sceneId) => {
           const mics = charData[characterId][sceneId];
@@ -318,71 +321,71 @@ export default {
       'CONFLICTS_BY_MIC',
     ]),
   },
-  async mounted() {
+  async mounted(): Promise<void> {
     await this.resetToStoredAlloc();
-    if (this.micOptions.length > 1) {
-      this.selectedMic = this.micOptions[1].value;
+    if ((this as any).micOptions.length > 1) {
+      this.selectedMic = (this as any).micOptions[1].value;
     }
     this.loaded = true;
   },
   methods: {
-    async resetToStoredAlloc() {
-      await this.GET_MIC_ALLOCATIONS();
-      const internalState = {};
-      this.MICROPHONES.forEach(function resetMic(mic) {
-        const micData = {};
-        this.sortedScenes.forEach((scene) => {
-          micData[scene.id] = this.allAllocations[mic.id][scene.id];
-        }, this);
+    async resetToStoredAlloc(): Promise<void> {
+      await (this as any).GET_MIC_ALLOCATIONS();
+      const internalState: Record<string | number, any> = {};
+      ((this as any).MICROPHONES as any[]).forEach((mic: any) => {
+        const micData: Record<string | number, any> = {};
+        (this as any).sortedScenes.forEach((scene: any) => {
+          micData[scene.id] = (this as any).allAllocations[mic.id][scene.id];
+        });
         internalState[mic.id] = micData;
-      }, this);
+      });
       this.internalState = internalState;
     },
-    async resetSelectedToStoredAlloc() {
+    async resetSelectedToStoredAlloc(): Promise<void> {
       if (this.selectedMic == null) {
         return;
       }
-      await this.GET_MIC_ALLOCATIONS();
-      const micData = {};
-      this.sortedScenes.forEach((scene) => {
-        micData[scene.id] = this.allAllocations[this.selectedMic][scene.id];
-      }, this);
+      await (this as any).GET_MIC_ALLOCATIONS();
+      const micData: Record<string | number, any> = {};
+      (this as any).sortedScenes.forEach((scene: any) => {
+        micData[scene.id] = (this as any).allAllocations[this.selectedMic!][scene.id];
+      });
       this.internalState[this.selectedMic] = micData;
     },
-    clearMicAllocations() {
-      const micData = {};
-      this.sortedScenes.forEach((scene) => {
+    clearMicAllocations(): void {
+      const micData: Record<string | number, null> = {};
+      (this as any).sortedScenes.forEach((scene: any) => {
         micData[scene.id] = null;
-      }, this);
+      });
       Object.keys(this.internalState).forEach((micId) => {
         this.internalState[micId] = micData;
-      }, this);
+      });
     },
-    clearSelectedMicAllocations() {
+    clearSelectedMicAllocations(): void {
       if (this.selectedMic == null) {
         return;
       }
-      const micData = {};
-      this.sortedScenes.forEach((scene) => {
+      const micData: Record<string | number, null> = {};
+      (this as any).sortedScenes.forEach((scene: any) => {
         micData[scene.id] = null;
-      }, this);
+      });
       this.internalState[this.selectedMic] = micData;
     },
-    numScenesPerAct(actId) {
-      return this.sortedScenes.filter((scene) => scene.act === actId).length;
+    numScenesPerAct(actId: number): number {
+      return ((this as any).sortedScenes as any[]).filter((scene: any) => scene.act === actId)
+        .length;
     },
-    getHeaderName(sceneId) {
+    getHeaderName(sceneId: number): string {
       return `head(${sceneId})`;
     },
-    getCellName(sceneId) {
+    getCellName(sceneId: number): string {
       return `cell(${sceneId})`;
     },
-    micDisabledForCharacter(micId, sceneId, characterId) {
+    micDisabledForCharacter(micId: number, sceneId: number, characterId: number): boolean {
       if (this.saving) {
         return true;
       }
 
-      // Check this mic isn't allocated to anyone else for this scene
       if (
         this.internalState[micId][sceneId] != null &&
         this.internalState[micId][sceneId] !== characterId
@@ -392,127 +395,119 @@ export default {
 
       return false;
     },
-    micSelectAllDisabledForCharacter(micId, characterId) {
+    micSelectAllDisabledForCharacter(micId: number, characterId: number): boolean {
       if (this.saving) {
         return true;
       }
-      // Check if this mic is used anywhere on another character
       let canAssign = true;
-      this.sortedScenes.forEach((scene) => {
+      (this as any).sortedScenes.forEach((scene: any) => {
         if (
           this.internalState[micId][scene.id] != null &&
           this.internalState[micId][scene.id] !== characterId
         ) {
           canAssign = false;
         }
-      }, this);
+      });
       if (!canAssign) {
         return true;
       }
 
-      // Check if the character already has a different mic assigned anywhere
-      this.MICROPHONES.forEach((otherMic) => {
+      ((this as any).MICROPHONES as any[]).forEach((otherMic: any) => {
         if (otherMic.id !== micId) {
-          this.sortedScenes.forEach((scene) => {
+          (this as any).sortedScenes.forEach((scene: any) => {
             if (this.internalState[otherMic.id][scene.id] === characterId) {
               canAssign = false;
             }
-          }, this);
+          });
         }
-      }, this);
+      });
       return !canAssign;
     },
-    toggleSelectAllAllocation(micId, characterId) {
+    toggleSelectAllAllocation(micId: number, characterId: number): void {
       let allAssigned = true;
-      this.sortedScenes.forEach((scene) => {
+      (this as any).sortedScenes.forEach((scene: any) => {
         if (this.internalState[micId][scene.id] !== characterId) {
           allAssigned = false;
         }
-      }, this);
-      this.sortedScenes.forEach((scene) => {
+      });
+      (this as any).sortedScenes.forEach((scene: any) => {
         if (allAssigned) {
           this.internalState[micId][scene.id] = null;
         } else {
           this.internalState[micId][scene.id] = characterId;
         }
-      }, this);
+      });
     },
-    micSelectedAllForCharacter(micId, characterId) {
+    micSelectedAllForCharacter(micId: number, characterId: number): boolean {
       let allAssigned = true;
-      this.sortedScenes.forEach((scene) => {
+      (this as any).sortedScenes.forEach((scene: any) => {
         if (this.internalState[micId][scene.id] !== characterId) {
           allAssigned = false;
         }
-      }, this);
+      });
       return allAssigned;
     },
-    toggleAllocation(micId, sceneId, characterId) {
+    toggleAllocation(micId: number, sceneId: number, characterId: number): void {
       if (this.internalState[micId][sceneId] === characterId) {
         this.internalState[micId][sceneId] = null;
       } else if (this.internalState[micId][sceneId] === null) {
         this.internalState[micId][sceneId] = characterId;
       }
     },
-    async saveAllocations() {
+    async saveAllocations(): Promise<void> {
       this.saving = true;
-      await this.UPDATE_MIC_ALLOCATIONS(this.changes);
+      await (this as any).UPDATE_MIC_ALLOCATIONS(this.changes);
       await this.resetToStoredAlloc();
       this.saving = false;
     },
-    getConflictsForCell(characterId, sceneId) {
-      // Find all conflicts for this character in this scene (across all their mics)
-      const allConflicts = Object.values(this.CONFLICTS_BY_SCENE).flat();
+    getConflictsForCell(characterId: number, sceneId: number): any[] {
+      const allConflicts = (Object.values((this as any).CONFLICTS_BY_SCENE) as any[][]).flat();
       if (!allConflicts || allConflicts.length === 0) {
         return [];
       }
 
-      // Find all conflicts where this scene is the "change INTO" scene for this character
       return allConflicts.filter(
-        (c) => c.adjacentSceneId === sceneId && c.adjacentCharacterId === characterId
+        (c: any) => c.adjacentSceneId === sceneId && c.adjacentCharacterId === characterId
       );
     },
-    getConflictClassForCell(characterId, sceneId) {
+    getConflictClassForCell(characterId: number, sceneId: number): string {
       const conflicts = this.getConflictsForCell(characterId, sceneId);
       if (conflicts.length === 0) return '';
 
-      // Prioritize WARNING over INFO
-      const hasWarning = conflicts.some((c) => c.severity === 'WARNING');
+      const hasWarning = conflicts.some((c: any) => c.severity === 'WARNING');
       return hasWarning ? 'conflict-warning' : 'conflict-info';
     },
-    getTooltipText(characterId, sceneId) {
-      // Get all mics assigned to this character in this scene
-      const mics = [];
-      Object.keys(this.MIC_ALLOCATIONS).forEach((micId) => {
-        if (this.allAllocations[micId][sceneId] === characterId) {
+    getTooltipText(characterId: number, sceneId: number): string {
+      const mics: any[] = [];
+      Object.keys((this as any).MIC_ALLOCATIONS).forEach((micId) => {
+        if ((this as any).allAllocations[micId][sceneId] === characterId) {
           mics.push({
             id: parseInt(micId, 10),
-            name: this.MICROPHONE_BY_ID(micId).name,
+            name: (this as any).MICROPHONE_BY_ID(micId).name,
           });
         }
       });
 
-      // Get conflicts for this character/scene
       const conflicts = this.getConflictsForCell(characterId, sceneId);
 
-      // Build tooltip text
       let tooltipText = `Assigned mics: ${mics.map((m) => m.name).join(', ')}`;
 
       if (conflicts.length > 0) {
         tooltipText += '\n\nConflicts:';
-        conflicts.forEach((conflict) => {
-          const micName = this.MICROPHONE_BY_ID(conflict.micId).name;
+        conflicts.forEach((conflict: any) => {
+          const micName = (this as any).MICROPHONE_BY_ID(conflict.micId).name;
           tooltipText += `\n• ${micName}: ${conflict.message}`;
         });
       }
 
       return tooltipText;
     },
-    onAutoPopulateResult(data) {
+    onAutoPopulateResult(data: any): void {
       this.internalState = data;
     },
     ...mapActions(['UPDATE_MIC_ALLOCATIONS', 'GET_MIC_ALLOCATIONS']),
   },
-};
+});
 </script>
 
 <style scoped>
diff --git a/client/src/vue_components/show/config/mics/MicAutoPopulateModal.vue b/client/src/vue_components/show/config/mics/MicAutoPopulateModal.vue
index a270898e..7c77e0d0 100644
--- a/client/src/vue_components/show/config/mics/MicAutoPopulateModal.vue
+++ b/client/src/vue_components/show/config/mics/MicAutoPopulateModal.vue
@@ -195,27 +195,28 @@
   </b-modal>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { makeURL } from '@/js/utils';
 import { mapGetters } from 'vuex';
 import log from 'loglevel';
 
-export default {
+export default defineComponent({
   name: 'MicAutoPopulateModal',
   events: ['autoPopulateResult'],
   data() {
     return {
       modalMode: 'create',
       submitting: false,
-      excludedMics: [],
-      staticCharacters: [],
+      excludedMics: [] as any[],
+      staticCharacters: [] as any[],
       formState: {
-        excludedMics: [],
-        staticCharacters: [],
+        excludedMics: [] as number[],
+        staticCharacters: [] as number[],
         gapMode: 'leave_gaps',
       },
-      suggestionHints: [],
-      allocations: {},
+      suggestionHints: [] as any[],
+      allocations: {} as Record<string, any>,
     };
   },
   validations: {
@@ -226,19 +227,19 @@ export default {
     },
   },
   computed: {
-    allocationHints() {
+    allocationHints(): any[] {
       return this.suggestionHints.filter((hint) => hint.type === 'allocation');
     },
-    staticAllocationHints() {
+    staticAllocationHints(): any[] {
       return this.suggestionHints.filter((hint) => hint.type === 'static');
     },
-    gapFillHints() {
+    gapFillHints(): any[] {
       return this.suggestionHints.filter((hint) => hint.type === 'gap_fill');
     },
     ...mapGetters(['MICROPHONES', 'CHARACTER_LIST', 'CHARACTER_BY_ID', 'SCENE_BY_ID', 'ACT_BY_ID']),
   },
   methods: {
-    async performGeneration() {
+    async performGeneration(): Promise<void> {
       this.submitting = true;
       try {
         const response = await fetch(`${makeURL('/api/v1/show/microphones/suggest')}`, {
@@ -257,27 +258,27 @@ export default {
           this.modalMode = 'review';
         } else {
           log.error('Unable to auto populate microphones');
-          this.$toast.error('Unable to auto populate microphones');
+          (this as any).$toast.error('Unable to auto populate microphones');
           this.modalMode = 'error';
         }
       } catch (error) {
         log.error('Error during microphone auto-population:', error);
-        this.$toast.error('Error during microphone auto-population');
+        (this as any).$toast.error('Error during microphone auto-population');
         this.modalMode = 'error';
       }
       this.submitting = false;
     },
-    validateState(name) {
-      const { $dirty, $error } = this.$v.formState[name];
+    validateState(name: string): boolean | null {
+      const { $dirty, $error } = (this as any).$v.formState[name];
       return $dirty ? !$error : null;
     },
-    newExcludedMicSelectChanged(value, id) {
-      this.$v.formState.excludedMics.$model = value.map((mic) => mic.id);
+    newExcludedMicSelectChanged(value: any[]): void {
+      (this as any).$v.formState.excludedMics.$model = value.map((mic) => mic.id);
     },
-    newStaticCharacterSelectChanged(value, id) {
-      this.$v.formState.staticCharacters.$model = value.map((char) => char.id);
+    newStaticCharacterSelectChanged(value: any[]): void {
+      (this as any).$v.formState.staticCharacters.$model = value.map((char) => char.id);
     },
-    resetState() {
+    resetState(): void {
       this.modalMode = 'create';
       this.excludedMics = [];
       this.staticCharacters = [];
@@ -289,15 +290,15 @@ export default {
       this.suggestionHints = [];
       this.allocations = {};
       this.$nextTick(() => {
-        this.$v.$reset();
+        (this as any).$v.$reset();
       });
     },
-    applyPendingChanges() {
+    applyPendingChanges(): void {
       this.$emit('autoPopulateResult', this.allocations);
-      this.$bvModal.hide('mic-auto-populate-modal');
+      (this as any).$bvModal.hide('mic-auto-populate-modal');
     },
   },
-};
+});
 </script>
 
 <style scoped></style>
diff --git a/client/src/vue_components/show/config/mics/MicList.vue b/client/src/vue_components/show/config/mics/MicList.vue
index 8621d678..bf8fbbeb 100644
--- a/client/src/vue_components/show/config/mics/MicList.vue
+++ b/client/src/vue_components/show/config/mics/MicList.vue
@@ -121,28 +121,29 @@
   </span>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { mapActions, mapGetters } from 'vuex';
 import { required } from 'vuelidate/lib/validators';
 import log from 'loglevel';
 
-function isNameUnique(value) {
+function isNameUnique(this: any, value: string): boolean {
   if (value === '') {
     return true;
   }
   if (this.editMicrophoneForm.id != null) {
     if (this.MICROPHONES != null && this.MICROPHONES.length > 0) {
       return !this.MICROPHONES.some(
-        (mic) => mic.name === value && mic.id !== this.editMicrophoneForm.id
+        (mic: any) => mic.name === value && mic.id !== this.editMicrophoneForm.id
       );
     }
   } else if (this.MICROPHONES != null && this.MICROPHONES.length > 0) {
-    return !this.MICROPHONES.some((mic) => mic.name === value);
+    return !this.MICROPHONES.some((mic: any) => mic.name === value);
   }
   return true;
 }
 
-export default {
+export default defineComponent({
   name: 'MicList',
   data() {
     return {
@@ -154,7 +155,7 @@ export default {
         description: '',
       },
       editMicrophoneForm: {
-        id: null,
+        id: null as number | null,
         name: '',
         description: '',
       },
@@ -180,7 +181,7 @@ export default {
     },
   },
   computed: {
-    disableButtons() {
+    disableButtons(): boolean {
       return (
         this.isSubmittingNewMicrophone ||
         this.isSubmittingEditMicrophone ||
@@ -190,15 +191,15 @@ export default {
     ...mapGetters(['MICROPHONES', 'IS_SHOW_EDITOR']),
   },
   methods: {
-    openEditMicForm(mic) {
+    openEditMicForm(mic: any): void {
       if (mic != null) {
         this.editMicrophoneForm.id = mic.item.id;
         this.editMicrophoneForm.name = mic.item.name;
         this.editMicrophoneForm.description = mic.item.description;
-        this.$bvModal.show('edit-microphone');
+        (this as any).$bvModal.show('edit-microphone');
       }
     },
-    resetEditMicrophoneForm() {
+    resetEditMicrophoneForm(): void {
       this.editMicrophoneForm = {
         id: null,
         name: '',
@@ -207,12 +208,12 @@ export default {
       this.isSubmittingEditMicrophone = false;
 
       this.$nextTick(() => {
-        this.$v.$reset();
+        (this as any).$v.$reset();
       });
     },
-    async onSubmitEditMicrophone(event) {
-      this.$v.editMicrophoneForm.$touch();
-      if (this.$v.editMicrophoneForm.$anyError) {
+    async onSubmitEditMicrophone(event: Event): Promise<void> {
+      (this as any).$v.editMicrophoneForm.$touch();
+      if ((this as any).$v.editMicrophoneForm.$anyError) {
         event.preventDefault();
         return;
       }
@@ -225,8 +226,8 @@ export default {
       this.isSubmittingEditMicrophone = true;
 
       try {
-        await this.UPDATE_MICROPHONE(this.editMicrophoneForm);
-        this.$refs['edit-microphone'].hide();
+        await (this as any).UPDATE_MICROPHONE(this.editMicrophoneForm);
+        (this as any).$refs['edit-microphone'].hide();
       } catch (error) {
         log.error('Error updating microphone:', error);
         event.preventDefault();
@@ -234,22 +235,22 @@ export default {
         this.isSubmittingEditMicrophone = false;
       }
     },
-    validateEditMicrophone(name) {
-      const { $dirty, $error } = this.$v.editMicrophoneForm[name];
+    validateEditMicrophone(name: string): boolean | null {
+      const { $dirty, $error } = (this as any).$v.editMicrophoneForm[name];
       return $dirty ? !$error : null;
     },
-    async deleteMic(mic) {
+    async deleteMic(mic: any): Promise<void> {
       if (this.isSubmittingDeleteMicrophone) {
         return;
       }
 
       const msg = `Are you sure you want to delete ${mic.item.name}?`;
-      const action = await this.$bvModal.msgBoxConfirm(msg, {});
+      const action = await (this as any).$bvModal.msgBoxConfirm(msg, {});
       if (action === true) {
         this.isSubmittingDeleteMicrophone = true;
 
         try {
-          await this.DELETE_MICROPHONE(mic.item.id);
+          await (this as any).DELETE_MICROPHONE(mic.item.id);
         } catch (error) {
           log.error('Error deleting microphone:', error);
         } finally {
@@ -257,7 +258,7 @@ export default {
         }
       }
     },
-    resetNewMicrophoneForm() {
+    resetNewMicrophoneForm(): void {
       this.newMicrophoneForm = {
         name: '',
         description: '',
@@ -265,12 +266,12 @@ export default {
       this.isSubmittingNewMicrophone = false;
 
       this.$nextTick(() => {
-        this.$v.$reset();
+        (this as any).$v.$reset();
       });
     },
-    async onSubmitNewMicrophone(event) {
-      this.$v.newMicrophoneForm.$touch();
-      if (this.$v.newMicrophoneForm.$anyError) {
+    async onSubmitNewMicrophone(event: Event): Promise<void> {
+      (this as any).$v.newMicrophoneForm.$touch();
+      if ((this as any).$v.newMicrophoneForm.$anyError) {
         event.preventDefault();
         return;
       }
@@ -283,8 +284,8 @@ export default {
       this.isSubmittingNewMicrophone = true;
 
       try {
-        await this.ADD_MICROPHONE(this.newMicrophoneForm);
-        this.$refs['new-microphone'].hide();
+        await (this as any).ADD_MICROPHONE(this.newMicrophoneForm);
+        (this as any).$refs['new-microphone'].hide();
       } catch (error) {
         log.error('Error adding microphone:', error);
         event.preventDefault();
@@ -292,11 +293,11 @@ export default {
         this.isSubmittingNewMicrophone = false;
       }
     },
-    validateNewMicrophone(name) {
-      const { $dirty, $error } = this.$v.newMicrophoneForm[name];
+    validateNewMicrophone(name: string): boolean | null {
+      const { $dirty, $error } = (this as any).$v.newMicrophoneForm[name];
       return $dirty ? !$error : null;
     },
     ...mapActions(['DELETE_MICROPHONE', 'ADD_MICROPHONE', 'UPDATE_MICROPHONE']),
   },
-};
+});
 </script>
diff --git a/client/src/vue_components/show/config/mics/MicTimeline.vue b/client/src/vue_components/show/config/mics/MicTimeline.vue
index 95980978..7dc8c55d 100644
--- a/client/src/vue_components/show/config/mics/MicTimeline.vue
+++ b/client/src/vue_components/show/config/mics/MicTimeline.vue
@@ -160,11 +160,12 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { mapGetters } from 'vuex';
 import timelineMixin from '@/mixins/timelineMixin';
 
-export default {
+export default defineComponent({
   name: 'MicTimeline',
   mixins: [timelineMixin],
   props: {
@@ -175,7 +176,7 @@ export default {
   },
   data() {
     return {
-      viewMode: 'mic', // 'mic', 'character', or 'cast'
+      viewMode: 'mic',
     };
   },
   computed: {
@@ -186,24 +187,24 @@ export default {
       'CAST_BY_ID',
       'CAST_LIST',
     ]),
-    hasData() {
+    hasData(): boolean {
       return this.scenes.length > 0 && this.rows.length > 0;
     },
-    scenes() {
-      return this.MIC_TIMELINE_DATA.scenes || [];
+    scenes(): any[] {
+      return (this as any).MIC_TIMELINE_DATA.scenes || [];
     },
-    allocations() {
-      return this.MIC_TIMELINE_DATA.allocations || {};
+    allocations(): Record<string, any> {
+      return (this as any).MIC_TIMELINE_DATA.allocations || {};
     },
-    microphones() {
-      return this.MIC_TIMELINE_DATA.microphones || [];
+    microphones(): any[] {
+      return (this as any).MIC_TIMELINE_DATA.microphones || [];
     },
-    characters() {
-      return this.MIC_TIMELINE_DATA.characters || [];
+    characters(): any[] {
+      return (this as any).MIC_TIMELINE_DATA.characters || [];
     },
-    rows() {
+    rows(): any[] {
       if (this.viewMode === 'mic') {
-        return this.microphones.map((mic) => ({
+        return this.microphones.map((mic: any) => ({
           id: mic.id,
           name: mic.name || `Mic ${mic.id}`,
           type: 'mic',
@@ -211,30 +212,30 @@ export default {
       }
       if (this.viewMode === 'character') {
         return this.characters
-          .filter((char) => this.hasCharacterAllocations(char.id))
-          .map((char) => ({
+          .filter((char: any) => this.hasCharacterAllocations(char.id))
+          .map((char: any) => ({
             id: char.id,
             name: char.name,
             type: 'character',
           }));
       }
-      // Cast-centric view
-      return this.CAST_LIST.filter((cast) => this.hasCastAllocations(cast.id)).map((cast) => ({
-        id: cast.id,
-        name: `${cast.first_name} ${cast.last_name}`.trim() || `Cast ${cast.id}`,
-        type: 'cast',
-      }));
+      return ((this as any).CAST_LIST as any[])
+        .filter((cast: any) => this.hasCastAllocations(cast.id))
+        .map((cast: any) => ({
+          id: cast.id,
+          name: `${cast.first_name} ${cast.last_name}`.trim() || `Cast ${cast.id}`,
+          type: 'cast',
+        }));
     },
-    allocationBars() {
-      const bars = [];
+    allocationBars(): any[] {
+      const bars: any[] = [];
 
-      this.rows.forEach((row, rowIndex) => {
+      this.rows.forEach((row: any, rowIndex: number) => {
         if (this.viewMode === 'mic') {
           this.generateBarsForMic(row.id, rowIndex, bars);
         } else if (this.viewMode === 'character') {
           this.generateBarsForCharacter(row.id, rowIndex, bars);
         } else {
-          // Cast view
           this.generateBarsForCast(row.id, rowIndex, bars);
         }
       });
@@ -243,41 +244,36 @@ export default {
     },
   },
   watch: {
-    viewMode() {
-      // Re-render when view mode changes
+    viewMode(): void {
       this.$forceUpdate();
     },
   },
   methods: {
-    hasCharacterAllocations(characterId) {
+    hasCharacterAllocations(characterId: number): boolean {
       return Object.values(this.allocations).some((micAllocs) => {
         if (!Array.isArray(micAllocs)) return false;
-        return micAllocs.some((alloc) => alloc.character_id === characterId);
+        return (micAllocs as any[]).some((alloc) => alloc.character_id === characterId);
       });
     },
-    hasCastAllocations(castId) {
-      // Check if any character played by this cast member has allocations
-      const castCharacters = this.characters.filter((char) => char.cast_member?.id === castId);
-      return castCharacters.some((char) => this.hasCharacterAllocations(char.id));
+    hasCastAllocations(castId: number): boolean {
+      const castCharacters = this.characters.filter((char: any) => char.cast_member?.id === castId);
+      return castCharacters.some((char: any) => this.hasCharacterAllocations(char.id));
     },
-    generateBarsForMic(micId, rowIndex, bars) {
+    generateBarsForMic(micId: number, rowIndex: number, bars: any[]): void {
       const micAllocs = this.allocations[micId];
       if (!Array.isArray(micAllocs)) return;
 
-      // Group consecutive scenes with same character
-      const segments = [];
-      let currentSegment = null;
+      const segments: any[] = [];
+      let currentSegment: any = null;
 
-      this.scenes.forEach((scene, sceneIndex) => {
-        const alloc = micAllocs.find((a) => a.scene_id === scene.id);
+      this.scenes.forEach((scene: any, sceneIndex: number) => {
+        const alloc = micAllocs.find((a: any) => a.scene_id === scene.id);
         const characterId = alloc?.character_id;
 
         if (characterId) {
           if (currentSegment && currentSegment.characterId === characterId) {
-            // Extend current segment
             currentSegment.endIndex = sceneIndex;
           } else {
-            // Start new segment
             if (currentSegment) segments.push(currentSegment);
             currentSegment = {
               characterId,
@@ -286,28 +282,25 @@ export default {
             };
           }
         } else if (currentSegment) {
-          // End current segment
           segments.push(currentSegment);
           currentSegment = null;
         }
       });
 
-      // Push final segment
       if (currentSegment) segments.push(currentSegment);
 
-      // Create bars for segments
-      segments.forEach((segment, segmentIndex) => {
-        const character = this.CHARACTER_BY_ID(segment.characterId);
-        const startX = this.getSceneX(segment.startIndex);
-        const width = this.sceneWidth * (segment.endIndex - segment.startIndex + 1);
+      segments.forEach((segment: any, segmentIndex: number) => {
+        const character = (this as any).CHARACTER_BY_ID(segment.characterId);
+        const startX = (this as any).getSceneX(segment.startIndex);
+        const width = (this as any).sceneWidth * (segment.endIndex - segment.startIndex + 1);
 
         bars.push({
           id: `mic-${micId}-seg-${segmentIndex}`,
           x: startX,
-          y: this.getRowY(rowIndex) + this.barPadding,
+          y: (this as any).getRowY(rowIndex) + (this as any).barPadding,
           width,
-          height: this.rowHeight - 2 * this.barPadding,
-          color: this.getColorForEntity(segment.characterId, 'character'),
+          height: (this as any).rowHeight - 2 * (this as any).barPadding,
+          color: (this as any).getColorForEntity(segment.characterId, 'character'),
           cssClass: '',
           label: character?.name || 'Unknown',
           tooltip: `${character?.name || 'Unknown'} (Scenes ${segment.startIndex + 1}-${segment.endIndex + 1})`,
@@ -320,20 +313,19 @@ export default {
         });
       });
     },
-    generateBarsForCharacter(characterId, rowIndex, bars) {
-      // Find all mics allocated to this character
-      const segmentsByMic = new Map();
+    generateBarsForCharacter(characterId: number, rowIndex: number, bars: any[]): void {
+      const segmentsByMic = new Map<number, any[]>();
 
       Object.keys(this.allocations).forEach((micId) => {
         const micAllocs = this.allocations[micId];
         if (!Array.isArray(micAllocs)) return;
 
-        const segments = [];
-        let currentSegment = null;
+        const segments: any[] = [];
+        let currentSegment: any = null;
 
-        this.scenes.forEach((scene, sceneIndex) => {
+        this.scenes.forEach((scene: any, sceneIndex: number) => {
           const alloc = micAllocs.find(
-            (a) => a.scene_id === scene.id && a.character_id === characterId
+            (a: any) => a.scene_id === scene.id && a.character_id === characterId
           );
 
           if (alloc) {
@@ -360,25 +352,25 @@ export default {
         }
       });
 
-      // Create bars with vertical stacking for multiple mics
       const micIds = Array.from(segmentsByMic.keys());
-      const barHeightPerMic = (this.rowHeight - 2 * this.barPadding) / Math.max(micIds.length, 1);
-
-      micIds.forEach((micId, micIndex) => {
-        const segments = segmentsByMic.get(micId);
-        segments.forEach((segment, segmentIndex) => {
-          const mic = this.MICROPHONE_BY_ID(segment.micId);
-          const startX = this.getSceneX(segment.startIndex);
-          const width = this.sceneWidth * (segment.endIndex - segment.startIndex + 1);
+      const barHeightPerMic =
+        ((this as any).rowHeight - 2 * (this as any).barPadding) / Math.max(micIds.length, 1);
+
+      micIds.forEach((micId: number, micIndex: number) => {
+        const segments = segmentsByMic.get(micId)!;
+        segments.forEach((segment: any, segmentIndex: number) => {
+          const mic = (this as any).MICROPHONE_BY_ID(segment.micId);
+          const startX = (this as any).getSceneX(segment.startIndex);
+          const width = (this as any).sceneWidth * (segment.endIndex - segment.startIndex + 1);
           const yOffset = micIndex * barHeightPerMic;
 
           bars.push({
             id: `char-${characterId}-mic-${micId}-seg-${segmentIndex}`,
             x: startX,
-            y: this.getRowY(rowIndex) + this.barPadding + yOffset,
+            y: (this as any).getRowY(rowIndex) + (this as any).barPadding + yOffset,
             width,
             height: barHeightPerMic,
-            color: this.getColorForEntity(characterId, 'character'),
+            color: (this as any).getColorForEntity(characterId, 'character'),
             cssClass: '',
             label: mic?.name || `Mic ${segment.micId}`,
             tooltip: `${mic?.name || `Mic ${segment.micId}`} (Scenes ${segment.startIndex + 1}-${segment.endIndex + 1})`,
@@ -392,34 +384,30 @@ export default {
         });
       });
     },
-    generateBarsForCast(castId, rowIndex, bars) {
-      // Find all characters played by this cast member
-      const castCharacters = this.characters.filter((char) => char.cast_member?.id === castId);
+    generateBarsForCast(castId: number, rowIndex: number, bars: any[]): void {
+      const castCharacters = this.characters.filter((char: any) => char.cast_member?.id === castId);
 
-      const segmentsByMic = new Map();
+      const segmentsByMic = new Map<number, any[]>();
 
-      // For each mic, find allocations for any character played by this cast member
       Object.keys(this.allocations).forEach((micId) => {
         const micAllocs = this.allocations[micId];
         if (!Array.isArray(micAllocs)) return;
 
-        const segments = [];
-        let currentSegment = null;
+        const segments: any[] = [];
+        let currentSegment: any = null;
 
-        this.scenes.forEach((scene, sceneIndex) => {
-          // Check if any of this cast member's characters uses this mic in this scene
+        this.scenes.forEach((scene: any, sceneIndex: number) => {
           const alloc = micAllocs.find(
-            (a) =>
-              a.scene_id === scene.id && castCharacters.some((char) => char.id === a.character_id)
+            (a: any) =>
+              a.scene_id === scene.id &&
+              castCharacters.some((char: any) => char.id === a.character_id)
           );
 
           if (alloc) {
             if (currentSegment && currentSegment.micId === parseInt(micId, 10)) {
-              // Extend current segment
               currentSegment.endIndex = sceneIndex;
               currentSegment.characterIds.add(alloc.character_id);
             } else {
-              // Start new segment
               if (currentSegment) segments.push(currentSegment);
               currentSegment = {
                 micId: parseInt(micId, 10),
@@ -429,7 +417,6 @@ export default {
               };
             }
           } else if (currentSegment) {
-            // End current segment
             segments.push(currentSegment);
             currentSegment = null;
           }
@@ -442,35 +429,35 @@ export default {
         }
       });
 
-      // Create bars with vertical stacking for multiple mics
       const micIds = Array.from(segmentsByMic.keys());
-      const barHeightPerMic = (this.rowHeight - 2 * this.barPadding) / Math.max(micIds.length, 1);
-
-      micIds.forEach((micId, micIndex) => {
-        const segments = segmentsByMic.get(micId);
-        segments.forEach((segment, segmentIndex) => {
-          const mic = this.MICROPHONE_BY_ID(segment.micId);
-          const characterNames = Array.from(segment.characterIds)
-            .map((charId) => this.CHARACTER_BY_ID(charId)?.name || 'Unknown')
+      const barHeightPerMic =
+        ((this as any).rowHeight - 2 * (this as any).barPadding) / Math.max(micIds.length, 1);
+
+      micIds.forEach((micId: number, micIndex: number) => {
+        const segments = segmentsByMic.get(micId)!;
+        segments.forEach((segment: any, segmentIndex: number) => {
+          const mic = (this as any).MICROPHONE_BY_ID(segment.micId);
+          const characterNames = Array.from(segment.characterIds as Set<number>)
+            .map((charId) => (this as any).CHARACTER_BY_ID(charId)?.name || 'Unknown')
             .join(', ');
-          const startX = this.getSceneX(segment.startIndex);
-          const width = this.sceneWidth * (segment.endIndex - segment.startIndex + 1);
+          const startX = (this as any).getSceneX(segment.startIndex);
+          const width = (this as any).sceneWidth * (segment.endIndex - segment.startIndex + 1);
           const yOffset = micIndex * barHeightPerMic;
 
           bars.push({
             id: `cast-${castId}-mic-${micId}-seg-${segmentIndex}`,
             x: startX,
-            y: this.getRowY(rowIndex) + this.barPadding + yOffset,
+            y: (this as any).getRowY(rowIndex) + (this as any).barPadding + yOffset,
             width,
             height: barHeightPerMic,
-            color: this.getColorForEntity(castId, 'cast'),
+            color: (this as any).getColorForEntity(castId, 'cast'),
             cssClass: '',
             label: mic?.name || `Mic ${segment.micId}`,
             tooltip: `${mic?.name || `Mic ${segment.micId}`} - ${characterNames} (Scenes ${segment.startIndex + 1}-${segment.endIndex + 1})`,
             data: {
               castId,
               micId: segment.micId,
-              characterIds: Array.from(segment.characterIds),
+              characterIds: Array.from(segment.characterIds as Set<number>),
               startScene: segment.startIndex,
               endScene: segment.endIndex,
             },
@@ -478,25 +465,25 @@ export default {
         });
       });
     },
-    handleExport() {
-      const viewModeNames = {
+    handleExport(): void {
+      const viewModeNames: Record<string, string> = {
         mic: 'Microphone',
         character: 'Character',
         cast: 'Cast',
       };
-      this.exportTimeline('mic-timeline', viewModeNames[this.viewMode]);
+      (this as any).exportTimeline('mic-timeline', viewModeNames[this.viewMode]);
     },
-    handleBarClick(bar) {
+    handleBarClick(bar: any): void {
       this.$emit('bar-click', bar.data);
     },
-    handleBarHover(bar, event) {
+    handleBarHover(bar: any, event: Event): void {
       this.$emit('bar-hover', { bar: bar.data, event });
     },
-    handleBarLeave() {
+    handleBarLeave(): void {
       this.$emit('bar-leave');
     },
   },
-};
+});
 </script>
 
 <style lang="scss">
diff --git a/client/src/vue_components/show/config/mics/ResourceAvailability.vue b/client/src/vue_components/show/config/mics/ResourceAvailability.vue
index 1e4a9801..6dcb2946 100644
--- a/client/src/vue_components/show/config/mics/ResourceAvailability.vue
+++ b/client/src/vue_components/show/config/mics/ResourceAvailability.vue
@@ -100,10 +100,11 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { mapGetters } from 'vuex';
 
-export default {
+export default defineComponent({
   name: 'ResourceAvailability',
   props: {
     loading: {
@@ -113,30 +114,29 @@ export default {
   },
   computed: {
     ...mapGetters(['MIC_TIMELINE_DATA', 'MICROPHONE_BY_ID', 'CHARACTER_BY_ID', 'MIC_CONFLICTS']),
-    hasData() {
+    hasData(): boolean {
       return this.scenes.length > 0 && this.microphones.length > 0;
     },
-    scenes() {
-      return this.MIC_TIMELINE_DATA.scenes || [];
+    scenes(): any[] {
+      return (this as any).MIC_TIMELINE_DATA.scenes || [];
     },
-    microphones() {
-      return this.MIC_TIMELINE_DATA.microphones || [];
+    microphones(): any[] {
+      return (this as any).MIC_TIMELINE_DATA.microphones || [];
     },
-    allocations() {
-      return this.MIC_TIMELINE_DATA.allocations || {};
+    allocations(): Record<string, any> {
+      return (this as any).MIC_TIMELINE_DATA.allocations || {};
     },
-    totalMicrophones() {
+    totalMicrophones(): number {
       return this.microphones.length;
     },
-    peakUsage() {
-      // Find the maximum number of mics used in any single scene
+    peakUsage(): number {
       let max = 0;
-      this.scenes.forEach((scene) => {
-        const micsInScene = new Set();
+      this.scenes.forEach((scene: any) => {
+        const micsInScene = new Set<number>();
         Object.keys(this.allocations).forEach((micId) => {
           const micAllocs = this.allocations[micId];
           if (Array.isArray(micAllocs)) {
-            const hasAllocation = micAllocs.some((alloc) => alloc.scene_id === scene.id);
+            const hasAllocation = micAllocs.some((alloc: any) => alloc.scene_id === scene.id);
             if (hasAllocation) {
               micsInScene.add(parseInt(micId, 10));
             }
@@ -146,20 +146,19 @@ export default {
       });
       return max;
     },
-    conflictCount() {
-      const conflicts = this.MIC_CONFLICTS?.conflicts || [];
+    conflictCount(): number {
+      const conflicts = (this as any).MIC_CONFLICTS?.conflicts || [];
       return conflicts.length;
     },
-    utilizationRate() {
+    utilizationRate(): number {
       if (this.scenes.length === 0 || this.totalMicrophones === 0) return 0;
 
-      // Calculate average utilization across all scenes
       let totalAllocations = 0;
-      this.scenes.forEach((scene) => {
+      this.scenes.forEach((scene: any) => {
         Object.keys(this.allocations).forEach((micId) => {
           const micAllocs = this.allocations[micId];
           if (Array.isArray(micAllocs)) {
-            const hasAllocation = micAllocs.some((alloc) => alloc.scene_id === scene.id);
+            const hasAllocation = micAllocs.some((alloc: any) => alloc.scene_id === scene.id);
             if (hasAllocation) {
               totalAllocations += 1;
             }
@@ -170,20 +169,19 @@ export default {
       const maxPossibleAllocations = this.scenes.length * this.totalMicrophones;
       return Math.round((totalAllocations / maxPossibleAllocations) * 100);
     },
-    sceneAvailability() {
-      return this.scenes.map((scene) => {
-        const micStatuses = [];
+    sceneAvailability(): any[] {
+      return this.scenes.map((scene: any) => {
+        const micStatuses: any[] = [];
         let available = 0;
         let inUse = 0;
         let conflicts = 0;
 
-        // Get conflicts for this scene
-        const allConflicts = this.MIC_CONFLICTS?.conflicts || [];
+        const allConflicts = (this as any).MIC_CONFLICTS?.conflicts || [];
         const sceneConflicts = allConflicts.filter(
-          (conflict) => conflict.sceneId === scene.id || conflict.adjacentSceneId === scene.id
+          (conflict: any) => conflict.sceneId === scene.id || conflict.adjacentSceneId === scene.id
         );
 
-        this.microphones.forEach((mic) => {
+        this.microphones.forEach((mic: any) => {
           const micAllocs = this.allocations[mic.id];
           let allocation = null;
           let status = 'available';
@@ -191,22 +189,21 @@ export default {
           let character = null;
 
           if (Array.isArray(micAllocs)) {
-            allocation = micAllocs.find((alloc) => alloc.scene_id === scene.id);
+            allocation = micAllocs.find((alloc: any) => alloc.scene_id === scene.id);
           }
 
           if (allocation) {
             status = 'in-use';
             statusClass = 'in-use';
-            character = this.CHARACTER_BY_ID(allocation.character_id);
+            character = (this as any).CHARACTER_BY_ID((allocation as any).character_id);
             inUse += 1;
 
-            // Check if this mic has a conflict in this scene
-            const hasConflict = sceneConflicts.some((conflict) => conflict.micId === mic.id);
+            const hasConflict = sceneConflicts.some((conflict: any) => conflict.micId === mic.id);
             if (hasConflict) {
               status = 'conflict';
               statusClass = 'conflict';
               conflicts += 1;
-              inUse -= 1; // Don't double-count
+              inUse -= 1;
             }
           } else {
             available += 1;
@@ -232,7 +229,7 @@ export default {
     },
   },
   methods: {
-    getMicTooltip(micStatus) {
+    getMicTooltip(micStatus: any): string {
       const micName = micStatus.mic.name || `Mic ${micStatus.mic.id}`;
 
       if (micStatus.status === 'conflict') {
@@ -243,7 +240,7 @@ export default {
       }
       return `${micName}: Available`;
     },
-    handleMicClick(scene, micStatus) {
+    handleMicClick(scene: any, micStatus: any): void {
       this.$emit('mic-click', {
         scene,
         microphone: micStatus.mic,
@@ -252,7 +249,7 @@ export default {
       });
     },
   },
-};
+});
 </script>
 
 <style scoped>
diff --git a/client/src/vue_components/show/config/mics/SceneDensityHeatmap.vue b/client/src/vue_components/show/config/mics/SceneDensityHeatmap.vue
index b1a281ff..ac52e7de 100644
--- a/client/src/vue_components/show/config/mics/SceneDensityHeatmap.vue
+++ b/client/src/vue_components/show/config/mics/SceneDensityHeatmap.vue
@@ -95,10 +95,11 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { mapGetters } from 'vuex';
 
-export default {
+export default defineComponent({
   name: 'SceneDensityHeatmap',
   props: {
     loading: {
@@ -108,31 +109,29 @@ export default {
   },
   data() {
     return {
-      maxBarHeight: 200, // Maximum bar height in pixels
-      minBarHeight: 20, // Minimum bar height for visibility
+      maxBarHeight: 200,
+      minBarHeight: 20,
     };
   },
   computed: {
     ...mapGetters(['MIC_TIMELINE_DATA', 'ACT_BY_ID']),
-    hasData() {
+    hasData(): boolean {
       return this.scenes.length > 0 && Object.keys(this.allocations).length > 0;
     },
-    scenes() {
-      return this.MIC_TIMELINE_DATA.scenes || [];
+    scenes(): any[] {
+      return (this as any).MIC_TIMELINE_DATA.scenes || [];
     },
-    allocations() {
-      return this.MIC_TIMELINE_DATA.allocations || {};
+    allocations(): Record<string, any> {
+      return (this as any).MIC_TIMELINE_DATA.allocations || {};
     },
-    sceneDensityData() {
-      // Calculate mic count for each scene
-      return this.scenes.map((scene) => {
-        const micsInScene = new Set();
+    sceneDensityData(): any[] {
+      return this.scenes.map((scene: any) => {
+        const micsInScene = new Set<number>();
 
-        // Check all mic allocations for this scene
         Object.keys(this.allocations).forEach((micId) => {
           const micAllocs = this.allocations[micId];
           if (Array.isArray(micAllocs)) {
-            const hasAllocation = micAllocs.some((alloc) => alloc.scene_id === scene.id);
+            const hasAllocation = micAllocs.some((alloc: any) => alloc.scene_id === scene.id);
             if (hasAllocation) {
               micsInScene.add(parseInt(micId, 10));
             }
@@ -145,17 +144,16 @@ export default {
         };
       });
     },
-    actGroups() {
-      // Group scenes by act
-      const groups = [];
-      const actMap = {};
+    actGroups(): any[] {
+      const groups: any[] = [];
+      const actMap: Record<number, any> = {};
 
-      this.sceneDensityData.forEach((sceneData) => {
+      this.sceneDensityData.forEach((sceneData: any) => {
         const actId = sceneData.scene.act;
         if (!actMap[actId]) {
           actMap[actId] = {
             actId,
-            actName: this.ACT_BY_ID(actId)?.name || 'Unknown Act',
+            actName: (this as any).ACT_BY_ID(actId)?.name || 'Unknown Act',
             scenes: [],
           };
           groups.push(actMap[actId]);
@@ -165,21 +163,21 @@ export default {
 
       return groups;
     },
-    maxDensity() {
+    maxDensity(): number {
       if (this.sceneDensityData.length === 0) return 0;
-      return Math.max(...this.sceneDensityData.map((d) => d.micCount));
+      return Math.max(...this.sceneDensityData.map((d: any) => d.micCount));
     },
-    averageDensity() {
+    averageDensity(): number {
       if (this.sceneDensityData.length === 0) return 0;
-      const total = this.sceneDensityData.reduce((sum, d) => sum + d.micCount, 0);
+      const total = this.sceneDensityData.reduce((sum: number, d: any) => sum + d.micCount, 0);
       return total / this.sceneDensityData.length;
     },
-    peakSceneName() {
-      const peakScene = this.sceneDensityData.find((d) => d.micCount === this.maxDensity);
+    peakSceneName(): string {
+      const peakScene = this.sceneDensityData.find((d: any) => d.micCount === this.maxDensity);
       return peakScene ? peakScene.scene.name : 'N/A';
     },
-    uniqueMicsUsed() {
-      const allMics = new Set();
+    uniqueMicsUsed(): number {
+      const allMics = new Set<number>();
       Object.keys(this.allocations).forEach((micId) => {
         const micAllocs = this.allocations[micId];
         if (Array.isArray(micAllocs) && micAllocs.length > 0) {
@@ -190,42 +188,33 @@ export default {
     },
   },
   methods: {
-    getDensityColor(micCount) {
+    getDensityColor(micCount: number): string {
       if (micCount === 0) {
-        return '#2c3e50'; // Dark gray for no mics
+        return '#2c3e50';
       }
 
-      // Color scale from blue (low) to red (high)
-      // Uses HSL color space for smooth gradient
       const ratio = this.maxDensity > 0 ? micCount / this.maxDensity : 0;
-
-      // Hue: 240 (blue) to 0 (red)
       const hue = 240 - ratio * 240;
-
-      // Saturation: 70% for vibrant colors
       const saturation = 70;
-
-      // Lightness: 45-55% for good visibility on dark background
       const lightness = 45 + ratio * 10;
 
       return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
     },
-    getBarHeight(micCount) {
+    getBarHeight(micCount: number): number {
       if (micCount === 0) return this.minBarHeight;
 
-      // Scale bar height based on mic count
       const ratio = this.maxDensity > 0 ? micCount / this.maxDensity : 0;
       const height = this.minBarHeight + ratio * (this.maxBarHeight - this.minBarHeight);
       return Math.round(height);
     },
-    handleBarClick(sceneData) {
+    handleBarClick(sceneData: any): void {
       this.$emit('scene-click', {
         scene: sceneData.scene,
         micCount: sceneData.micCount,
       });
     },
   },
-};
+});
 </script>
 
 <style scoped>
diff --git a/client/src/vue_components/show/config/script/BulkActSceneModal.vue b/client/src/vue_components/show/config/script/BulkActSceneModal.vue
index 49b5ccd9..12821d28 100644
--- a/client/src/vue_components/show/config/script/BulkActSceneModal.vue
+++ b/client/src/vue_components/show/config/script/BulkActSceneModal.vue
@@ -31,8 +31,10 @@
   </b-modal>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
   name: 'BulkActSceneModal',
   events: ['apply'],
   props: {
@@ -130,5 +132,5 @@ export default {
       this.selectedSceneId = null;
     },
   },
-};
+});
 </script>
diff --git a/client/src/vue_components/show/config/script/CompiledScripts.vue b/client/src/vue_components/show/config/script/CompiledScripts.vue
index 28d3fb35..df301b63 100644
--- a/client/src/vue_components/show/config/script/CompiledScripts.vue
+++ b/client/src/vue_components/show/config/script/CompiledScripts.vue
@@ -41,12 +41,13 @@
   </b-container>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { mapActions, mapGetters } from 'vuex';
 import { makeURL } from '@/js/utils';
 import log from 'loglevel';
 
-export default {
+export default defineComponent({
   name: 'CompiledScripts',
   data() {
     return {
@@ -60,14 +61,16 @@ export default {
       ],
       deletingCompiledScript: false,
       generatingCompiledScript: false,
-      pendingRevisionId: null,
+      pendingRevisionId: null as number | null,
     };
   },
   computed: {
-    tableData() {
-      const data = [];
-      this.SCRIPT_REVISIONS.forEach((revision) => {
-        const compiledScript = this.COMPILED_SCRIPTS.find((cs) => cs.revision_id === revision.id);
+    tableData(): any[] {
+      const data: any[] = [];
+      (this as any).SCRIPT_REVISIONS.forEach((revision: any) => {
+        const compiledScript = (this as any).COMPILED_SCRIPTS.find(
+          (cs: any) => cs.revision_id === revision.id
+        );
         data.push({
           revision_id: revision.id,
           created_at: compiledScript?.created_at,
@@ -80,14 +83,14 @@ export default {
     },
     ...mapGetters(['COMPILED_SCRIPTS', 'SCRIPT_REVISIONS', 'IS_SCRIPT_EDITOR', 'CURRENT_REVISION']),
   },
-  async mounted() {
-    await this.GET_COMPILED_SCRIPTS();
+  async mounted(): Promise<void> {
+    await (this as any).GET_COMPILED_SCRIPTS();
     this.loading = false;
   },
   methods: {
-    async deleteCompiledScript(data) {
+    async deleteCompiledScript(data: any): Promise<void> {
       const msg = `Are you sure you want to delete the compiled script for revision ${data.item.revision_id}?`;
-      const action = await this.$bvModal.msgBoxConfirm(msg, {});
+      const action = await (this as any).$bvModal.msgBoxConfirm(msg, {});
       if (action === false) {
         return;
       }
@@ -107,20 +110,20 @@ export default {
           }
         );
         if (response.ok) {
-          this.$toast.success('Deleted compiled script!');
+          (this as any).$toast.success('Deleted compiled script!');
         } else {
           log.error('Unable to delete compiled scripts');
-          this.$toast.error('Unable to delete compiled script!');
+          (this as any).$toast.error('Unable to delete compiled script!');
         }
       } catch (e) {
         log.error(e);
-        this.$toast.error('Unable to delete compiled script!');
+        (this as any).$toast.error('Unable to delete compiled script!');
       } finally {
         this.deletingCompiledScript = false;
         this.pendingRevisionId = null;
       }
     },
-    async generateCompiledScript(data) {
+    async generateCompiledScript(data: any): Promise<void> {
       this.generatingCompiledScript = true;
       this.pendingRevisionId = data.item.revision_id;
       try {
@@ -132,14 +135,14 @@ export default {
           body: JSON.stringify({ revision_id: data.item.revision_id }),
         });
         if (response.ok) {
-          this.$toast.success('Generated new compiled script!');
+          (this as any).$toast.success('Generated new compiled script!');
         } else {
           log.error('Unable to load compiled scripts');
-          this.$toast.error('Unable to compile script revision!');
+          (this as any).$toast.error('Unable to compile script revision!');
         }
       } catch (e) {
         log.error(e);
-        this.$toast.error('Unable to compile script revision!');
+        (this as any).$toast.error('Unable to compile script revision!');
       } finally {
         this.generatingCompiledScript = false;
         this.pendingRevisionId = null;
@@ -147,7 +150,7 @@ export default {
     },
     ...mapActions(['GET_COMPILED_SCRIPTS']),
   },
-};
+});
 </script>
 
 <style scoped></style>
diff --git a/client/src/vue_components/show/config/script/RevisionDetailModal.vue b/client/src/vue_components/show/config/script/RevisionDetailModal.vue
index 27bc8c8d..de08920b 100644
--- a/client/src/vue_components/show/config/script/RevisionDetailModal.vue
+++ b/client/src/vue_components/show/config/script/RevisionDetailModal.vue
@@ -90,8 +90,10 @@
   </b-modal>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
   name: 'RevisionDetailModal',
   props: {
     modalId: {
@@ -155,7 +157,7 @@ export default {
       this.$emit('hidden');
     },
   },
-};
+});
 </script>
 
 <style scoped>
diff --git a/client/src/vue_components/show/config/script/RevisionGraph.vue b/client/src/vue_components/show/config/script/RevisionGraph.vue
index 1fbd73e2..53163d55 100644
--- a/client/src/vue_components/show/config/script/RevisionGraph.vue
+++ b/client/src/vue_components/show/config/script/RevisionGraph.vue
@@ -66,12 +66,13 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { hierarchy, tree } from 'd3-hierarchy';
 import { select } from 'd3-selection';
 import { zoom, zoomIdentity } from 'd3-zoom';
 
-export default {
+export default defineComponent({
   name: 'RevisionGraph',
   props: {
     revisions: {
@@ -102,29 +103,24 @@ export default {
         left: 40,
       },
       nodeRadius: 8,
-      zoomBehavior: null,
-      currentTransform: null,
+      zoomBehavior: null as any,
+      currentTransform: null as any,
     };
   },
   computed: {
-    hasRevisions() {
+    hasRevisions(): boolean {
       return this.revisions && this.revisions.length > 0;
     },
-    /**
-     * Build hierarchical tree structure from flat revision list
-     */
-    treeData() {
+    treeData(): any {
       if (!this.hasRevisions) return null;
 
-      // Find root node (revision with no parent or revision 1)
-      const root = this.revisions.find((r) => !r.previous_revision_id || r.revision === 1);
+      const root = this.revisions.find((r: any) => !r.previous_revision_id || r.revision === 1);
       if (!root) return null;
 
-      // Build tree recursively
-      const buildTree = (revision) => {
+      const buildTree = (revision: any): any => {
         const children = this.revisions
-          .filter((r) => r.previous_revision_id === revision.id)
-          .map((child) => buildTree(child));
+          .filter((r: any) => r.previous_revision_id === revision.id)
+          .map((child: any) => buildTree(child));
 
         return {
           ...revision,
@@ -134,10 +130,7 @@ export default {
 
       return buildTree(root);
     },
-    /**
-     * D3 hierarchy with calculated positions
-     */
-    hierarchyData() {
+    hierarchyData(): any {
       if (!this.treeData) return null;
 
       const root = hierarchy(this.treeData);
@@ -148,17 +141,11 @@ export default {
 
       return treeLayout(root);
     },
-    /**
-     * Array of nodes with positions
-     */
-    nodes() {
+    nodes(): any[] {
       if (!this.hierarchyData) return [];
       return this.hierarchyData.descendants();
     },
-    /**
-     * Array of links between nodes
-     */
-    links() {
+    links(): any[] {
       if (!this.hierarchyData) return [];
       return this.hierarchyData.links();
     },
@@ -198,16 +185,10 @@ export default {
     }
   },
   methods: {
-    /**
-     * Update SVG dimensions based on container size
-     */
-    updateDimensions() {
-      const container = this.$el;
+    updateDimensions(): void {
+      const container = this.$el as HTMLElement;
       if (container) {
-        // Get the container width and update SVG dimensions
         this.width = container.clientWidth || 800;
-
-        // Re-fit content when dimensions change
         this.$nextTick(() => {
           if (this.zoomBehavior) {
             this.fitToContent();
@@ -215,64 +196,48 @@ export default {
         });
       }
     },
-    /**
-     * Initialize D3 zoom behavior
-     */
-    initZoom() {
-      const svg = select(this.$refs.svg);
-      const g = select(this.$refs.zoomGroup);
+    initZoom(): void {
+      const svg = select(this.$refs.svg as Element);
+      const g = select(this.$refs.zoomGroup as Element);
 
       this.zoomBehavior = zoom()
         .scaleExtent([0.1, 4])
-        .on('zoom', (event) => {
+        .on('zoom', (event: any) => {
           g.attr('transform', event.transform);
           this.currentTransform = event.transform;
         });
 
       svg.call(this.zoomBehavior);
     },
-    /**
-     * Zoom in
-     */
-    zoomIn() {
+    zoomIn(): void {
       if (!this.zoomBehavior || !this.$refs.svg) {
         this.initZoom();
       }
-      const svg = select(this.$refs.svg);
+      const svg = select(this.$refs.svg as Element);
       svg.transition().duration(300).call(this.zoomBehavior.scaleBy, 1.3);
     },
-    /**
-     * Zoom out
-     */
-    zoomOut() {
+    zoomOut(): void {
       if (!this.zoomBehavior || !this.$refs.svg) {
         this.initZoom();
       }
-      const svg = select(this.$refs.svg);
+      const svg = select(this.$refs.svg as Element);
       svg.transition().duration(300).call(this.zoomBehavior.scaleBy, 0.7);
     },
-    /**
-     * Reset zoom to initial state
-     */
-    resetZoom() {
+    resetZoom(): void {
       if (!this.zoomBehavior || !this.$refs.svg) {
         this.initZoom();
       }
-      const svg = select(this.$refs.svg);
+      const svg = select(this.$refs.svg as Element);
       svg.transition().duration(300).call(this.zoomBehavior.transform, zoomIdentity);
     },
-    /**
-     * Fit graph to content
-     */
-    fitToContent() {
+    fitToContent(): void {
       if (!this.nodes.length || !this.$refs.svg) return;
 
-      // Calculate bounding box
       const padding = 50;
-      const minX = Math.min(...this.nodes.map((n) => n.x)) - padding;
-      const maxX = Math.max(...this.nodes.map((n) => n.x)) + padding;
-      const minY = Math.min(...this.nodes.map((n) => n.y)) - padding;
-      const maxY = Math.max(...this.nodes.map((n) => n.y)) + padding;
+      const minX = Math.min(...this.nodes.map((n: any) => n.x)) - padding;
+      const maxX = Math.max(...this.nodes.map((n: any) => n.x)) + padding;
+      const minY = Math.min(...this.nodes.map((n: any) => n.y)) - padding;
+      const maxY = Math.max(...this.nodes.map((n: any) => n.y)) + padding;
 
       const contentWidth = maxY - minY;
       const contentHeight = maxX - minX;
@@ -280,27 +245,23 @@ export default {
       const scale = Math.min(
         (this.width - this.margin.left - this.margin.right) / contentWidth,
         (this.height - this.margin.top - this.margin.bottom) / contentHeight,
-        1 // Don't zoom in beyond 1x
+        1
       );
 
       const translateX = (this.width - contentWidth * scale) / 2 - minY * scale;
       const translateY = (this.height - contentHeight * scale) / 2 - minX * scale;
 
-      const svg = select(this.$refs.svg);
+      const svg = select(this.$refs.svg as Element);
       const transform = zoomIdentity.translate(translateX, translateY).scale(scale);
 
       svg.transition().duration(500).call(this.zoomBehavior.transform, transform);
     },
-    /**
-     * Generate SVG path for link (using cubic Bezier curve)
-     */
-    linkPath(link) {
+    linkPath(link: any): string {
       const sourceX = link.source.x;
       const sourceY = link.source.y;
       const targetX = link.target.x;
       const targetY = link.target.y;
 
-      // Horizontal Bezier curve (GitHub style)
       const midY = (sourceY + targetY) / 2;
 
       return `M${sourceY},${sourceX}
@@ -308,10 +269,7 @@ export default {
                ${midY},${targetX}
                ${targetY},${targetX}`;
     },
-    /**
-     * Get CSS class for node based on state
-     */
-    nodeClass(node) {
+    nodeClass(node: any): string {
       const classes = ['revision-node'];
 
       if (this.isCurrentRevision(node)) {
@@ -324,22 +282,13 @@ export default {
 
       return classes.join(' ');
     },
-    /**
-     * Check if node is current revision
-     */
-    isCurrentRevision(node) {
+    isCurrentRevision(node: any): boolean {
       return node.data.id === this.currentRevisionId;
     },
-    /**
-     * Check if node is selected
-     */
-    isSelectedRevision(node) {
+    isSelectedRevision(node: any): boolean {
       return node.data.id === this.selectedRevisionId;
     },
-    /**
-     * Generate tooltip text for a node
-     */
-    nodeTooltip(node) {
+    nodeTooltip(node: any): string {
       const { data } = node;
       const parts = [
         `Revision ${data.revision}`,
@@ -353,14 +302,11 @@ export default {
 
       return parts.join('\n');
     },
-    /**
-     * Handle node click
-     */
-    handleNodeClick(node) {
+    handleNodeClick(node: any): void {
       this.$emit('node-click', node.data);
     },
   },
-};
+});
 </script>
 
 <style scoped>
diff --git a/client/src/vue_components/show/config/script/ScriptEditor.vue b/client/src/vue_components/show/config/script/ScriptEditor.vue
index d9cce962..fee47e58 100644
--- a/client/src/vue_components/show/config/script/ScriptEditor.vue
+++ b/client/src/vue_components/show/config/script/ScriptEditor.vue
@@ -213,7 +213,8 @@
   </b-container>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { mapGetters, mapMutations, mapActions } from 'vuex';
 import { required, minValue } from 'vuelidate/lib/validators';
 import { diff } from 'deep-object-diff';
@@ -227,13 +228,13 @@ import { makeURL, randInt } from '@/js/utils';
 import { notNull, notNullAndGreaterThanZero } from '@/js/customValidators';
 import { LINE_TYPES } from '@/constants/lineTypes';
 
-export default {
+export default defineComponent({
   name: 'ScriptConfig',
   components: { BulkActSceneModal, ScriptLineViewer, ScriptLineEditor },
   data() {
     return {
       currentEditPage: 1,
-      editPages: [],
+      editPages: [] as string[],
       blankLineObj: {
         id: null,
         act_id: null,
@@ -243,8 +244,8 @@ export default {
         line_parts: [],
         stage_direction_style_id: null,
       },
-      curSavePage: null,
-      totalSavePages: null,
+      curSavePage: null as number | null,
+      totalSavePages: null as number | null,
       savingInProgress: false,
       saveError: false,
       currentMaxPage: 1,
@@ -253,16 +254,16 @@ export default {
       },
       changingPage: false,
       loaded: false,
-      latestAddedLine: null,
-      linePartCuts: [],
-      autoSaveInterval: null,
+      latestAddedLine: null as string | null,
+      linePartCuts: [] as number[],
+      autoSaveInterval: null as ReturnType<typeof setInterval> | null,
       isAutoSaving: false,
       navbarHeight: 0,
       bulkEditMode: false,
-      bulkEditStart: null,
-      bulkEditEnd: null,
-      previousLineOfStart: null,
-      nextLineOfEnd: null,
+      bulkEditStart: null as { page: number; lineIndex: number } | null,
+      bulkEditEnd: null as { page: number; lineIndex: number } | null,
+      previousLineOfStart: null as any,
+      nextLineOfEnd: null as any,
     };
   },
   validations: {
@@ -276,42 +277,45 @@ export default {
     },
   },
   computed: {
-    currentEditPageKey() {
+    currentEditPageKey(): string {
       return this.currentEditPage.toString();
     },
-    scriptChanges() {
-      if (this.IS_CUT_MODE) {
-        return Object.keys(diff(this.SCRIPT_CUTS, this.linePartCuts)).length > 0;
+    scriptChanges(): boolean {
+      if ((this as any).IS_CUT_MODE) {
+        return Object.keys(diff((this as any).SCRIPT_CUTS, this.linePartCuts)).length > 0;
       }
       let hasChanges = false;
-      Object.keys(this.TMP_SCRIPT).forEach(function checkPageHasChanges(pageNo) {
-        const lineDiff = diff(this.GET_SCRIPT_PAGE(pageNo), this.TMP_SCRIPT[pageNo]);
+      Object.keys((this as any).TMP_SCRIPT).forEach((pageNo) => {
+        const lineDiff = diff(
+          (this as any).GET_SCRIPT_PAGE(pageNo),
+          (this as any).TMP_SCRIPT[pageNo]
+        );
         if (
           Object.keys(lineDiff).length > 0 ||
-          this.DELETED_LINES(pageNo).length > 0 ||
-          this.INSERTED_LINES(pageNo).length > 0
+          (this as any).DELETED_LINES(pageNo).length > 0 ||
+          (this as any).INSERTED_LINES(pageNo).length > 0
         ) {
           hasChanges = true;
         }
-      }, this);
+      });
       return hasChanges;
     },
-    saveProgressVariant() {
+    saveProgressVariant(): string {
       if (!this.savingInProgress) {
         return this.saveError ? 'danger' : 'success';
       }
       return 'primary';
     },
-    canEdit() {
-      return this.INTERNAL_UUID === this.CURRENT_EDITOR;
+    canEdit(): boolean {
+      return (this as any).INTERNAL_UUID === (this as any).CURRENT_EDITOR;
     },
-    canSave() {
-      if (this.IS_CUT_MODE) {
+    canSave(): boolean {
+      if ((this as any).IS_CUT_MODE) {
         return this.scriptChanges;
       }
       return this.scriptChanges && this.editPages.length === 0;
     },
-    pagesWithOpenChanges() {
+    pagesWithOpenChanges(): number[] {
       return [...new Set(this.editPages.map((x) => parseInt(x.split('_')[1], 10)))];
     },
     ...mapGetters([
@@ -339,42 +343,43 @@ export default {
     ]),
   },
   watch: {
-    currentEditPage(val) {
-      localStorage.setItem('scriptEditPage', val);
+    currentEditPage(val: number): void {
+      localStorage.setItem('scriptEditPage', val.toString());
     },
-    async bulkEditEnd(val) {
+    async bulkEditEnd(val: { page: number; lineIndex: number } | null): Promise<void> {
       if (val != null) {
         await this.loadBoundaryLines();
-        this.$bvModal.show('bulk-act-scene-modal');
+        (this as any).$bvModal.show('bulk-act-scene-modal');
       }
     },
-    USER_SETTINGS() {
+    USER_SETTINGS(): void {
       this.setupAutoSave();
     },
-    CURRENT_EDITOR() {
+    CURRENT_EDITOR(): void {
       this.setupAutoSave();
     },
   },
-  async beforeMount() {
+  async beforeMount(): Promise<void> {
     await Promise.all([
-      this.GET_CURRENT_USER()
-        .then(() => this.GET_USER_SETTINGS())
+      (this as any)
+        .GET_CURRENT_USER()
+        .then(() => (this as any).GET_USER_SETTINGS())
         .then(() => {
-          if (this.CURRENT_USER != null) {
+          if ((this as any).CURRENT_USER != null) {
             return Promise.all([
-              this.GET_STAGE_DIRECTION_STYLE_OVERRIDES(),
-              this.GET_CUE_COLOUR_OVERRIDES(),
+              (this as any).GET_STAGE_DIRECTION_STYLE_OVERRIDES(),
+              (this as any).GET_CUE_COLOUR_OVERRIDES(),
             ]);
           }
           return Promise.resolve();
         }),
-      this.GET_SCRIPT_CONFIG_STATUS(),
-      this.GET_ACT_LIST(),
-      this.GET_SCENE_LIST(),
-      this.GET_CHARACTER_LIST(),
-      this.GET_CHARACTER_GROUP_LIST(),
-      this.GET_STAGE_DIRECTION_STYLES(),
-      this.GET_CUTS(),
+      (this as any).GET_SCRIPT_CONFIG_STATUS(),
+      (this as any).GET_ACT_LIST(),
+      (this as any).GET_SCENE_LIST(),
+      (this as any).GET_CHARACTER_LIST(),
+      (this as any).GET_CHARACTER_GROUP_LIST(),
+      (this as any).GET_STAGE_DIRECTION_STYLES(),
+      (this as any).GET_CUTS(),
       this.getMaxScriptPage(),
     ]);
 
@@ -388,21 +393,21 @@ export default {
     }
     await this.goToPageInner(this.currentEditPage);
   },
-  mounted() {
+  mounted(): void {
     this.loaded = true;
     this.calculateNavbarHeight();
   },
-  created() {
+  created(): void {
     window.addEventListener('resize', this.calculateNavbarHeight);
   },
-  destroyed() {
+  destroyed(): void {
     window.removeEventListener('resize', this.calculateNavbarHeight);
     if (this.autoSaveInterval != null) {
       clearInterval(this.autoSaveInterval);
     }
   },
   methods: {
-    async getMaxScriptPage() {
+    async getMaxScriptPage(): Promise<void> {
       const response = await fetch(`${makeURL('/api/v1/show/script/max_page')}`, {
         method: 'GET',
         headers: {
@@ -416,134 +421,134 @@ export default {
         log.error('Unable to get current max page');
       }
     },
-    requestEdit() {
-      this.$socket.sendObj({
+    requestEdit(): void {
+      (this as any).$socket.sendObj({
         OP: 'REQUEST_SCRIPT_EDIT',
         DATA: {},
       });
     },
-    requestCutEdit() {
-      this.SET_CUT_MODE(true);
-      this.$socket.sendObj({
+    requestCutEdit(): void {
+      (this as any).SET_CUT_MODE(true);
+      (this as any).$socket.sendObj({
         OP: 'REQUEST_SCRIPT_EDIT',
         DATA: {},
       });
     },
-    resetCutsToSaved() {
-      this.linePartCuts = JSON.parse(JSON.stringify(this.SCRIPT_CUTS));
+    resetCutsToSaved(): void {
+      this.linePartCuts = JSON.parse(JSON.stringify((this as any).SCRIPT_CUTS));
     },
-    async stopEditing() {
+    async stopEditing(): Promise<void> {
       if (this.scriptChanges) {
         const msg =
           'Are you sure you want to stop editing the script? ' +
           'This will cause all unsaved changes to be lost';
-        const action = await this.$bvModal.msgBoxConfirm(msg, {});
+        const action = await (this as any).$bvModal.msgBoxConfirm(msg, {});
         if (action === false) {
           return;
         }
       }
       this.editPages = [];
       this.exitBulkEditMode();
-      this.RESET_TO_SAVED(this.currentEditPage);
+      (this as any).RESET_TO_SAVED(this.currentEditPage);
       this.resetCutsToSaved();
-      this.$socket.sendObj({
+      (this as any).$socket.sendObj({
         OP: 'STOP_SCRIPT_EDIT',
         DATA: {},
       });
-      this.SET_CUT_MODE(false);
+      (this as any).SET_CUT_MODE(false);
     },
-    async decrPage() {
+    async decrPage(): Promise<void> {
       if (this.currentEditPage > 1) {
         const targetPage = this.currentEditPage - 1;
         // Load from backend if not in buffer
-        if (!Object.keys(this.TMP_SCRIPT).includes(targetPage.toString())) {
-          await this.LOAD_SCRIPT_PAGE(targetPage);
-          this.ADD_BLANK_PAGE(targetPage);
+        if (!Object.keys((this as any).TMP_SCRIPT).includes(targetPage.toString())) {
+          await (this as any).LOAD_SCRIPT_PAGE(targetPage);
+          (this as any).ADD_BLANK_PAGE(targetPage);
         }
-        if (this.TMP_SCRIPT[this.currentEditPageKey].length === 0) {
-          this.REMOVE_PAGE(this.currentEditPage);
+        if ((this as any).TMP_SCRIPT[this.currentEditPageKey].length === 0) {
+          (this as any).REMOVE_PAGE(this.currentEditPage);
         }
         this.currentEditPage--;
 
         // Pre-load previous page
-        await this.LOAD_SCRIPT_PAGE(this.currentEditPage - 1);
+        await (this as any).LOAD_SCRIPT_PAGE(this.currentEditPage - 1);
       }
     },
-    async incrPage() {
+    async incrPage(): Promise<void> {
       this.currentEditPage++;
-      if (!Object.keys(this.TMP_SCRIPT).includes(this.currentEditPageKey)) {
-        this.ADD_BLANK_PAGE(this.currentEditPage);
+      if (!Object.keys((this as any).TMP_SCRIPT).includes(this.currentEditPageKey)) {
+        (this as any).ADD_BLANK_PAGE(this.currentEditPage);
       }
       // Pre-load next page
-      await this.LOAD_SCRIPT_PAGE(this.currentEditPage + 1);
+      await (this as any).LOAD_SCRIPT_PAGE(this.currentEditPage + 1);
     },
-    async addNewLine() {
-      this.ADD_BLANK_LINE({
+    async addNewLine(): Promise<void> {
+      (this as any).ADD_BLANK_LINE({
         pageNo: this.currentEditPage,
         lineObj: this.blankLineObj,
       });
-      const lineIndex = this.TMP_SCRIPT[this.currentEditPageKey].length - 1;
+      const lineIndex = (this as any).TMP_SCRIPT[this.currentEditPageKey].length - 1;
       const lineIdent = `page_${this.currentEditPage}_line_${lineIndex}`;
       this.editPages.push(lineIdent);
       this.latestAddedLine = lineIdent;
       const prevLine = await this.getPreviousLineForIndex(lineIndex);
       if (prevLine != null) {
-        this.TMP_SCRIPT[this.currentEditPageKey][lineIndex].act_id = prevLine.act_id;
-        this.TMP_SCRIPT[this.currentEditPageKey][lineIndex].scene_id = prevLine.scene_id;
+        (this as any).TMP_SCRIPT[this.currentEditPageKey][lineIndex].act_id = prevLine.act_id;
+        (this as any).TMP_SCRIPT[this.currentEditPageKey][lineIndex].scene_id = prevLine.scene_id;
       }
     },
-    async addStageDirection() {
+    async addStageDirection(): Promise<void> {
       const stageDirectionObject = JSON.parse(JSON.stringify(this.blankLineObj));
       stageDirectionObject.line_type = LINE_TYPES.STAGE_DIRECTION;
-      this.ADD_BLANK_LINE({
+      (this as any).ADD_BLANK_LINE({
         pageNo: this.currentEditPage,
         lineObj: stageDirectionObject,
       });
-      const lineIndex = this.TMP_SCRIPT[this.currentEditPageKey].length - 1;
+      const lineIndex = (this as any).TMP_SCRIPT[this.currentEditPageKey].length - 1;
       this.editPages.push(`page_${this.currentEditPage}_line_${lineIndex}`);
       const prevLine = await this.getPreviousLineForIndex(lineIndex);
       if (prevLine != null) {
-        this.TMP_SCRIPT[this.currentEditPageKey][lineIndex].act_id = prevLine.act_id;
-        this.TMP_SCRIPT[this.currentEditPageKey][lineIndex].scene_id = prevLine.scene_id;
+        (this as any).TMP_SCRIPT[this.currentEditPageKey][lineIndex].act_id = prevLine.act_id;
+        (this as any).TMP_SCRIPT[this.currentEditPageKey][lineIndex].scene_id = prevLine.scene_id;
       }
     },
-    async addCueLine() {
+    async addCueLine(): Promise<void> {
       const cueLineObject = JSON.parse(JSON.stringify(this.blankLineObj));
       cueLineObject.line_type = LINE_TYPES.CUE_LINE;
       cueLineObject.line_parts = [];
-      this.ADD_BLANK_LINE({
+      (this as any).ADD_BLANK_LINE({
         pageNo: this.currentEditPage,
         lineObj: cueLineObject,
       });
-      const lineIndex = this.TMP_SCRIPT[this.currentEditPageKey].length - 1;
+      const lineIndex = (this as any).TMP_SCRIPT[this.currentEditPageKey].length - 1;
       this.editPages.push(`page_${this.currentEditPage}_line_${lineIndex}`);
       const prevLine = await this.getPreviousLineForIndex(lineIndex);
       if (prevLine != null) {
-        this.TMP_SCRIPT[this.currentEditPageKey][lineIndex].act_id = prevLine.act_id;
-        this.TMP_SCRIPT[this.currentEditPageKey][lineIndex].scene_id = prevLine.scene_id;
+        (this as any).TMP_SCRIPT[this.currentEditPageKey][lineIndex].act_id = prevLine.act_id;
+        (this as any).TMP_SCRIPT[this.currentEditPageKey][lineIndex].scene_id = prevLine.scene_id;
       }
     },
-    async addSpacing() {
+    async addSpacing(): Promise<void> {
       const spacingObject = JSON.parse(JSON.stringify(this.blankLineObj));
       spacingObject.line_type = LINE_TYPES.SPACING;
       spacingObject.line_parts = [];
-      this.ADD_BLANK_LINE({
+      (this as any).ADD_BLANK_LINE({
         pageNo: this.currentEditPage,
         lineObj: spacingObject,
       });
-      const lineIndex = this.TMP_SCRIPT[this.currentEditPageKey].length - 1;
+      const lineIndex = (this as any).TMP_SCRIPT[this.currentEditPageKey].length - 1;
       this.editPages.push(`page_${this.currentEditPage}_line_${lineIndex}`);
       const prevLine = await this.getPreviousLineForIndex(lineIndex);
       if (prevLine != null) {
-        this.TMP_SCRIPT[this.currentEditPageKey][lineIndex].act_id = prevLine.act_id;
-        this.TMP_SCRIPT[this.currentEditPageKey][lineIndex].scene_id = prevLine.scene_id;
+        (this as any).TMP_SCRIPT[this.currentEditPageKey][lineIndex].act_id = prevLine.act_id;
+        (this as any).TMP_SCRIPT[this.currentEditPageKey][lineIndex].scene_id = prevLine.scene_id;
       }
     },
-    async getPreviousLineForIndex(lineIndex) {
+    async getPreviousLineForIndex(lineIndex: number): Promise<any> {
       // Search backwards from lineIndex - 1 on the current page, skipping deleted lines
       for (let i = lineIndex - 1; i >= 0; i--) {
-        if (!this.DELETED_LINES(this.currentEditPage).includes(i)) {
-          return this.TMP_SCRIPT[this.currentEditPage][i];
+        if (!(this as any).DELETED_LINES(this.currentEditPage).includes(i)) {
+          return (this as any).TMP_SCRIPT[this.currentEditPage][i];
         }
       }
 
@@ -553,14 +558,14 @@ export default {
 
         while (loopPageNo >= 1) {
           let loopPage = null;
-          if (Object.keys(this.TMP_SCRIPT).includes(loopPageNo.toString())) {
-            loopPage = this.TMP_SCRIPT[loopPageNo.toString()];
+          if (Object.keys((this as any).TMP_SCRIPT).includes(loopPageNo.toString())) {
+            loopPage = (this as any).TMP_SCRIPT[loopPageNo.toString()];
           } else {
-            await this.LOAD_SCRIPT_PAGE(loopPageNo);
-            loopPage = this.GET_SCRIPT_PAGE(loopPageNo);
+            await (this as any).LOAD_SCRIPT_PAGE(loopPageNo);
+            loopPage = (this as any).GET_SCRIPT_PAGE(loopPageNo);
           }
           // Find the last non-deleted line on this page
-          const deletedLines = this.DELETED_LINES(loopPageNo);
+          const deletedLines = (this as any).DELETED_LINES(loopPageNo);
           for (let i = loopPage.length - 1; i >= 0; i--) {
             if (!deletedLines.includes(i)) {
               return loopPage[i];
@@ -571,10 +576,10 @@ export default {
       }
       return null;
     },
-    async getNextLineForIndex(lineIndex) {
+    async getNextLineForIndex(lineIndex: number): Promise<any> {
       // Search forwards from lineIndex + 1 on the current page, skipping deleted lines
-      const currentPageLines = this.TMP_SCRIPT[this.currentEditPage];
-      const deletedLines = this.DELETED_LINES(this.currentEditPage);
+      const currentPageLines = (this as any).TMP_SCRIPT[this.currentEditPage];
+      const deletedLines = (this as any).DELETED_LINES(this.currentEditPage);
       for (let i = lineIndex + 1; i < currentPageLines.length; i++) {
         if (!deletedLines.includes(i)) {
           return currentPageLines[i];
@@ -583,14 +588,14 @@ export default {
 
       // No non-deleted lines after this index on current page, check next pages
       // See if there are any edit pages loaded which are after this page
-      const editPages = Object.keys(this.TMP_SCRIPT)
+      const editPages = Object.keys((this as any).TMP_SCRIPT)
         .map((x) => parseInt(x, 10))
         .sort();
       for (let i = 0; i < editPages.length; i++) {
         const editPage = editPages[i];
         if (editPage > this.currentEditPage) {
-          const pageContent = this.TMP_SCRIPT[editPage.toString()];
-          const pageDeletedLines = this.DELETED_LINES(editPage);
+          const pageContent = (this as any).TMP_SCRIPT[editPage.toString()];
+          const pageDeletedLines = (this as any).DELETED_LINES(editPage);
           // Find the first non-deleted line on this page
           for (let j = 0; j < pageContent.length; j++) {
             if (!pageDeletedLines.includes(j)) {
@@ -603,9 +608,9 @@ export default {
       // Edit pages do not have any non-deleted lines, try loading script pages up to the max
 
       for (let i = this.currentEditPage + 1; i <= this.currentMaxPage; i++) {
-        await this.LOAD_SCRIPT_PAGE(i);
-        const loopPage = this.GET_SCRIPT_PAGE(i);
-        const loopPageDeletedLines = this.DELETED_LINES(i);
+        await (this as any).LOAD_SCRIPT_PAGE(i);
+        const loopPage = (this as any).GET_SCRIPT_PAGE(i);
+        const loopPageDeletedLines = (this as any).DELETED_LINES(i);
         // Find the first non-deleted line on this page
         for (let j = 0; j < loopPage.length; j++) {
           if (!loopPageDeletedLines.includes(j)) {
@@ -616,20 +621,20 @@ export default {
 
       return null;
     },
-    lineChange(line, index) {
-      this.SET_LINE({
+    lineChange(line: any, index: number): void {
+      (this as any).SET_LINE({
         pageNo: this.currentEditPage,
         lineIndex: index,
         lineObj: line,
       });
     },
-    beginEditingLine(pageIndex, lineIndex) {
+    beginEditingLine(pageIndex: number, lineIndex: number): void {
       const index = this.editPages.indexOf(`page_${pageIndex}_line_${lineIndex}`);
       if (index === -1) {
         this.editPages.push(`page_${pageIndex}_line_${lineIndex}`);
       }
     },
-    doneEditingLine(pageIndex, lineIndex) {
+    doneEditingLine(pageIndex: number, lineIndex: number): void {
       const lineIdent = `page_${pageIndex}_line_${lineIndex}`;
       const index = this.editPages.indexOf(lineIdent);
       if (index !== -1) {
@@ -639,24 +644,24 @@ export default {
         this.addNewLine();
       }
     },
-    deleteLine(pageIndex, lineIndex) {
+    deleteLine(pageIndex: number, lineIndex: number): void {
       if (this.latestAddedLine === `page_${pageIndex}_line_${lineIndex}`) {
         this.latestAddedLine = null;
       }
-      this.DELETE_LINE({
+      (this as any).DELETE_LINE({
         pageNo: pageIndex,
         lineIndex,
       });
       this.doneEditingLine(pageIndex, lineIndex);
 
-      this.editPages.forEach(function updateEditPage(editPage, index) {
+      this.editPages.forEach((editPage, index) => {
         const editParts = editPage.split('_');
         const editPageIndex = parseInt(editParts[1], 10);
         const editIndex = parseInt(editParts[3], 10);
         if (editPageIndex === pageIndex && editIndex >= lineIndex) {
           this.editPages[index] = `page_${editPageIndex}_line_${editIndex - 1}`;
         }
-      }, this);
+      });
 
       if (this.latestAddedLine != null) {
         const editParts = this.latestAddedLine.split('_');
@@ -667,7 +672,7 @@ export default {
         }
       }
     },
-    cutLinePart(linePartId) {
+    cutLinePart(linePartId: number): void {
       const index = this.linePartCuts.indexOf(linePartId);
       if (index === -1) {
         this.linePartCuts.push(linePartId);
@@ -675,9 +680,9 @@ export default {
         this.linePartCuts.splice(index, 1);
       }
     },
-    async insertLineAt(pageIndex, lineIndex, lineType) {
+    async insertLineAt(pageIndex: number, lineIndex: number, lineType: number): Promise<void> {
       // Map line types to their corresponding add methods
-      const addMethodMap = {
+      const addMethodMap: Record<number, () => Promise<void>> = {
         [LINE_TYPES.DIALOGUE]: () => this.addNewLine(),
         [LINE_TYPES.STAGE_DIRECTION]: () => this.addStageDirection(),
         [LINE_TYPES.CUE_LINE]: () => this.addCueLine(),
@@ -685,7 +690,7 @@ export default {
       };
 
       // If we're inserting at the end of the page, use the add method instead
-      if (this.TMP_SCRIPT[pageIndex].length - 1 === lineIndex) {
+      if ((this as any).TMP_SCRIPT[pageIndex].length - 1 === lineIndex) {
         await addMethodMap[lineType]();
         return;
       }
@@ -701,21 +706,21 @@ export default {
       }
 
       // Insert the blank line
-      this.INSERT_BLANK_LINE({
+      (this as any).INSERT_BLANK_LINE({
         pageNo: this.currentEditPage,
         lineIndex: newLineIndex,
         lineObj: newLineObject,
       });
 
       // Update existing edit page indices
-      this.editPages.forEach(function updateEditPage(editPage, index) {
+      this.editPages.forEach((editPage, index) => {
         const editParts = editPage.split('_');
         const editPageIndex = parseInt(editParts[1], 10);
         const editIndex = parseInt(editParts[3], 10);
         if (editPageIndex === pageIndex && editIndex >= newLineIndex) {
           this.editPages[index] = `page_${editPageIndex}_line_${editIndex + 1}`;
         }
-      }, this);
+      });
 
       // Add new line to edit pages
       const lineIdent = `page_${this.currentEditPage}_line_${newLineIndex}`;
@@ -724,50 +729,53 @@ export default {
       // Inherit act and scene from previous line
       const prevLine = await this.getPreviousLineForIndex(newLineIndex);
       if (prevLine != null) {
-        this.TMP_SCRIPT[this.currentEditPageKey][newLineIndex].act_id = prevLine.act_id;
-        this.TMP_SCRIPT[this.currentEditPageKey][newLineIndex].scene_id = prevLine.scene_id;
+        (this as any).TMP_SCRIPT[this.currentEditPageKey][newLineIndex].act_id = prevLine.act_id;
+        (this as any).TMP_SCRIPT[this.currentEditPageKey][newLineIndex].scene_id =
+          prevLine.scene_id;
       }
     },
-    async insertDialogueAt(pageIndex, lineIndex) {
+    async insertDialogueAt(pageIndex: number, lineIndex: number): Promise<void> {
       await this.insertLineAt(pageIndex, lineIndex, LINE_TYPES.DIALOGUE);
     },
-    async insertStageDirectionAt(pageIndex, lineIndex) {
+    async insertStageDirectionAt(pageIndex: number, lineIndex: number): Promise<void> {
       await this.insertLineAt(pageIndex, lineIndex, LINE_TYPES.STAGE_DIRECTION);
     },
-    async insertCueLineAt(pageIndex, lineIndex) {
+    async insertCueLineAt(pageIndex: number, lineIndex: number): Promise<void> {
       await this.insertLineAt(pageIndex, lineIndex, LINE_TYPES.CUE_LINE);
     },
-    async insertSpacingAt(pageIndex, lineIndex) {
+    async insertSpacingAt(pageIndex: number, lineIndex: number): Promise<void> {
       await this.insertLineAt(pageIndex, lineIndex, LINE_TYPES.SPACING);
     },
-    async saveScript() {
-      if (!this.IS_CUT_MODE) {
+    async saveScript(): Promise<void> {
+      if (!(this as any).IS_CUT_MODE) {
         if (this.scriptChanges) {
           this.savingInProgress = true;
-          const tmpPageKeys = Object.keys(this.TMP_SCRIPT).map((x) => Number.parseInt(x, 10));
+          const tmpPageKeys = Object.keys((this as any).TMP_SCRIPT).map((x) =>
+            Number.parseInt(x, 10)
+          );
           const maxPage = Math.max(this.currentMaxPage, ...tmpPageKeys, 0);
           this.totalSavePages = maxPage;
           this.curSavePage = 0;
-          this.$bvModal.show('save-script');
+          (this as any).$bvModal.show('save-script');
 
           for (let pageNo = 1; pageNo <= maxPage; pageNo++) {
             this.curSavePage = pageNo;
-            const tmpScriptPage = this.TMP_SCRIPT[pageNo.toString()];
+            const tmpScriptPage = (this as any).TMP_SCRIPT[pageNo.toString()];
             if (!tmpScriptPage) continue;
             // Check whether the page actually has any lines on it, and if not then skip
             if (tmpScriptPage.length !== 0) {
               // Check the actual script to see if the page exists or not
-              const actualScriptPage = this.GET_SCRIPT_PAGE(pageNo);
+              const actualScriptPage = (this as any).GET_SCRIPT_PAGE(pageNo);
               if (actualScriptPage.length === 0) {
                 // New page
-                const response = await this.SAVE_NEW_PAGE(pageNo);
+                const response = await (this as any).SAVE_NEW_PAGE(pageNo);
                 if (response) {
-                  await this.LOAD_SCRIPT_PAGE(pageNo);
-                  this.ADD_BLANK_PAGE(pageNo);
-                  this.RESET_DELETED(pageNo);
-                  this.RESET_INSERTED(pageNo);
+                  await (this as any).LOAD_SCRIPT_PAGE(pageNo);
+                  (this as any).ADD_BLANK_PAGE(pageNo);
+                  (this as any).RESET_DELETED(pageNo);
+                  (this as any).RESET_INSERTED(pageNo);
                 } else {
-                  this.$toast.error('Unable to save script. Please try again.');
+                  (this as any).$toast.error('Unable to save script. Please try again.');
                   this.saveError = true;
                   break;
                 }
@@ -776,17 +784,17 @@ export default {
                 const lineDiff = diff(actualScriptPage, tmpScriptPage);
                 if (
                   Object.keys(lineDiff).length > 0 ||
-                  this.DELETED_LINES(pageNo).length > 0 ||
-                  this.INSERTED_LINES(pageNo).length > 0
+                  (this as any).DELETED_LINES(pageNo).length > 0 ||
+                  (this as any).INSERTED_LINES(pageNo).length > 0
                 ) {
-                  const response = await this.SAVE_CHANGED_PAGE(pageNo);
+                  const response = await (this as any).SAVE_CHANGED_PAGE(pageNo);
                   if (response) {
-                    await this.LOAD_SCRIPT_PAGE(pageNo);
-                    this.ADD_BLANK_PAGE(pageNo);
-                    this.RESET_DELETED(pageNo);
-                    this.RESET_INSERTED(pageNo);
+                    await (this as any).LOAD_SCRIPT_PAGE(pageNo);
+                    (this as any).ADD_BLANK_PAGE(pageNo);
+                    (this as any).RESET_DELETED(pageNo);
+                    (this as any).RESET_INSERTED(pageNo);
                   } else {
-                    this.$toast.error('Unable to save script. Please try again.');
+                    (this as any).$toast.error('Unable to save script. Please try again.');
                     this.saveError = true;
                     break;
                   }
@@ -799,47 +807,50 @@ export default {
           // Re-setup autosave (to reset the timer since we have just saved)
           this.setupAutoSave();
         } else {
-          this.$toast.warning('No changes to save!');
+          (this as any).$toast.warning('No changes to save!');
         }
         await this.getMaxScriptPage();
       } else {
         this.savingInProgress = true;
-        await this.SAVE_SCRIPT_CUTS(this.linePartCuts);
+        await (this as any).SAVE_SCRIPT_CUTS(this.linePartCuts);
         this.resetCutsToSaved();
         // Re-setup autosave (to reset the timer since we have just saved)
         this.setupAutoSave();
         this.savingInProgress = false;
       }
     },
-    validatePageState(name) {
-      const { $dirty, $error } = this.$v.pageInputFormState[name];
+    validatePageState(name: string): boolean | null {
+      const { $dirty, $error } = (this as any).$v.pageInputFormState[name];
       return $dirty ? !$error : null;
     },
-    async goToPage() {
+    async goToPage(): Promise<void> {
       this.changingPage = true;
       await this.goToPageInner(this.pageInputFormState.pageNo);
       this.changingPage = false;
     },
-    async goToPageInner(pageNo) {
+    async goToPageInner(pageNo: number): Promise<void> {
       if (pageNo > 1) {
-        await this.LOAD_SCRIPT_PAGE(parseInt(pageNo, 10) - 1);
+        await (this as any).LOAD_SCRIPT_PAGE(pageNo - 1);
       }
-      await this.LOAD_SCRIPT_PAGE(pageNo);
+      await (this as any).LOAD_SCRIPT_PAGE(pageNo);
       this.currentEditPage = pageNo;
-      if (!Object.keys(this.TMP_SCRIPT).includes(this.currentEditPageKey)) {
-        this.ADD_BLANK_PAGE(this.currentEditPage);
+      if (!Object.keys((this as any).TMP_SCRIPT).includes(this.currentEditPageKey)) {
+        (this as any).ADD_BLANK_PAGE(this.currentEditPage);
       }
-      await this.LOAD_SCRIPT_PAGE(parseInt(pageNo, 10) + 1);
+      await (this as any).LOAD_SCRIPT_PAGE(pageNo + 1);
     },
-    setupAutoSave() {
+    setupAutoSave(): void {
       const autoSaveInterval = Math.max(
-        this.USER_SETTINGS.script_auto_save_interval * 1000 * 60,
+        (this as any).USER_SETTINGS.script_auto_save_interval * 1000 * 60,
         1000 * 60
       );
-      if (this.INTERNAL_UUID !== this.CURRENT_EDITOR && this.autoSaveInterval != null) {
+      if (
+        (this as any).INTERNAL_UUID !== (this as any).CURRENT_EDITOR &&
+        this.autoSaveInterval != null
+      ) {
         clearInterval(this.autoSaveInterval);
-      } else if (this.INTERNAL_UUID === this.CURRENT_EDITOR) {
-        if (this.USER_SETTINGS.enable_script_auto_save) {
+      } else if ((this as any).INTERNAL_UUID === (this as any).CURRENT_EDITOR) {
+        if ((this as any).USER_SETTINGS.enable_script_auto_save) {
           if (this.autoSaveInterval == null) {
             this.autoSaveInterval = setInterval(this.autosave, autoSaveInterval);
           } else {
@@ -851,21 +862,21 @@ export default {
         }
       }
     },
-    async autosave() {
+    async autosave(): Promise<void> {
       if (this.isAutoSaving) {
         return;
       }
       this.isAutoSaving = true;
-      const toastInstance = this.$toast.open({
+      const toastInstance = (this as any).$toast.open({
         type: 'info',
         message: 'Performing autosave...',
         duration: 0,
         dismissible: false,
       });
-      if (!this.IS_CUT_MODE) {
+      if (!(this as any).IS_CUT_MODE) {
         if (this.scriptChanges) {
           let curSavePage = 0;
-          const orderedPages = Object.keys(this.TMP_SCRIPT)
+          const orderedPages = Object.keys((this as any).TMP_SCRIPT)
             .map((x) => parseInt(x, 10))
             .sort((a, b) => a - b);
           let saveFailure = false;
@@ -880,18 +891,18 @@ export default {
             }
             toastInstance.message = `Performing autosave...<br>Saving page ${curSavePage}`;
             // Check whether the page actually has any lines on it, and if not then skip
-            const tmpScriptPage = this.TMP_SCRIPT[pageNo.toString()];
+            const tmpScriptPage = (this as any).TMP_SCRIPT[pageNo.toString()];
             if (tmpScriptPage.length !== 0) {
               // Check the actual script to see if the page exists or not
-              const actualScriptPage = this.GET_SCRIPT_PAGE(pageNo);
+              const actualScriptPage = (this as any).GET_SCRIPT_PAGE(pageNo);
               if (actualScriptPage.length === 0) {
                 // New page
-                const response = await this.SAVE_NEW_PAGE(pageNo);
+                const response = await (this as any).SAVE_NEW_PAGE(pageNo);
                 if (response) {
-                  await this.LOAD_SCRIPT_PAGE(pageNo);
-                  this.ADD_BLANK_PAGE(pageNo);
-                  this.RESET_DELETED(pageNo);
-                  this.RESET_INSERTED(pageNo);
+                  await (this as any).LOAD_SCRIPT_PAGE(pageNo);
+                  (this as any).ADD_BLANK_PAGE(pageNo);
+                  (this as any).RESET_DELETED(pageNo);
+                  (this as any).RESET_INSERTED(pageNo);
                 } else {
                   saveFailure = true;
                   break;
@@ -901,15 +912,15 @@ export default {
                 const lineDiff = diff(actualScriptPage, tmpScriptPage);
                 if (
                   Object.keys(lineDiff).length > 0 ||
-                  this.DELETED_LINES(pageNo).length > 0 ||
-                  this.INSERTED_LINES(pageNo).length > 0
+                  (this as any).DELETED_LINES(pageNo).length > 0 ||
+                  (this as any).INSERTED_LINES(pageNo).length > 0
                 ) {
-                  const response = await this.SAVE_CHANGED_PAGE(pageNo);
+                  const response = await (this as any).SAVE_CHANGED_PAGE(pageNo);
                   if (response) {
-                    await this.LOAD_SCRIPT_PAGE(pageNo);
-                    this.ADD_BLANK_PAGE(pageNo);
-                    this.RESET_DELETED(pageNo);
-                    this.RESET_INSERTED(pageNo);
+                    await (this as any).LOAD_SCRIPT_PAGE(pageNo);
+                    (this as any).ADD_BLANK_PAGE(pageNo);
+                    (this as any).RESET_DELETED(pageNo);
+                    (this as any).RESET_INSERTED(pageNo);
                   } else {
                     saveFailure = true;
                     break;
@@ -934,7 +945,7 @@ export default {
         }
         await this.getMaxScriptPage();
       } else {
-        await this.SAVE_SCRIPT_CUTS(this.linePartCuts);
+        await (this as any).SAVE_SCRIPT_CUTS(this.linePartCuts);
         this.resetCutsToSaved();
         toastInstance.message = 'Autosave successful';
         toastInstance.type = 'success';
@@ -942,105 +953,107 @@ export default {
       }
       this.isAutoSaving = false;
     },
-    calculateNavbarHeight() {
+    calculateNavbarHeight(): void {
       const navbar = document.querySelector('.navbar');
       if (navbar) {
-        this.navbarHeight = navbar.offsetHeight;
+        this.navbarHeight = (navbar as HTMLElement).offsetHeight;
       } else {
         this.navbarHeight = 56;
       }
     },
-    enterBulkEditMode() {
+    enterBulkEditMode(): void {
       this.bulkEditMode = true;
       this.bulkEditStart = null;
       this.bulkEditEnd = null;
     },
-    exitBulkEditMode() {
+    exitBulkEditMode(): void {
       this.bulkEditMode = false;
       this.bulkEditStart = null;
       this.bulkEditEnd = null;
       this.previousLineOfStart = null;
       this.nextLineOfEnd = null;
     },
-    onSetBulkStart(index) {
+    onSetBulkStart(index: number): void {
       this.bulkEditStart = {
         page: this.currentEditPage,
         lineIndex: index,
       };
       this.bulkEditEnd = null;
     },
-    onSetBulkEnd(index) {
-      const { page: startPage, lineIndex: startIndex } = this.bulkEditStart || {};
-      if (startPage === this.currentEditPage && index <= startIndex) {
-        this.$toast.error('End line must come after start line');
-        return;
-      }
-      if (startPage != null && this.currentEditPage < startPage) {
-        this.$toast.error('End line must come after start line');
-        return;
+    onSetBulkEnd(index: number): void {
+      if (this.bulkEditStart != null) {
+        const { page: startPage, lineIndex: startIndex } = this.bulkEditStart;
+        if (startPage === this.currentEditPage && index <= startIndex) {
+          (this as any).$toast.error('End line must come after start line');
+          return;
+        }
+        if (this.currentEditPage < startPage) {
+          (this as any).$toast.error('End line must come after start line');
+          return;
+        }
       }
       this.bulkEditEnd = { page: this.currentEditPage, lineIndex: index };
     },
-    isBulkStart(index) {
+    isBulkStart(index: number): boolean {
       return (
         this.bulkEditStart != null &&
         this.bulkEditStart.page === this.currentEditPage &&
         this.bulkEditStart.lineIndex === index
       );
     },
-    isBulkEnd(index) {
+    isBulkEnd(index: number): boolean {
       return (
         this.bulkEditEnd != null &&
         this.bulkEditEnd.page === this.currentEditPage &&
         this.bulkEditEnd.lineIndex === index
       );
     },
-    async loadBoundaryLines() {
-      const { page: startPage, lineIndex: startIndex } = this.bulkEditStart;
-      const { page: endPage, lineIndex: endIndex } = this.bulkEditEnd;
+    async loadBoundaryLines(): Promise<void> {
+      const { page: startPage, lineIndex: startIndex } = this.bulkEditStart!;
+      const { page: endPage, lineIndex: endIndex } = this.bulkEditEnd!;
 
       if (startIndex === 0 && startPage > 1) {
-        await this.LOAD_SCRIPT_PAGE(startPage - 1);
+        await (this as any).LOAD_SCRIPT_PAGE(startPage - 1);
       }
-      const endPageLines = this.TMP_SCRIPT[endPage.toString()];
+      const endPageLines = (this as any).TMP_SCRIPT[endPage.toString()];
       if (endPageLines && endIndex === endPageLines.length - 1) {
-        await this.LOAD_SCRIPT_PAGE(endPage + 1);
+        await (this as any).LOAD_SCRIPT_PAGE(endPage + 1);
       }
 
-      const startPageLines = this.TMP_SCRIPT[startPage.toString()];
+      const startPageLines = (this as any).TMP_SCRIPT[startPage.toString()];
       if (startIndex > 0 && startPageLines) {
         this.previousLineOfStart = startPageLines[startIndex - 1] || null;
       } else if (startPage > 1) {
-        const prevPage = this.TMP_SCRIPT[(startPage - 1).toString()];
+        const prevPage = (this as any).TMP_SCRIPT[(startPage - 1).toString()];
         this.previousLineOfStart = prevPage ? prevPage[prevPage.length - 1] : null;
       } else {
         this.previousLineOfStart = null;
       }
 
-      const endLines = this.TMP_SCRIPT[endPage.toString()];
+      const endLines = (this as any).TMP_SCRIPT[endPage.toString()];
       if (endLines && endIndex < endLines.length - 1) {
         this.nextLineOfEnd = endLines[endIndex + 1] || null;
       } else {
-        const nextPage = this.TMP_SCRIPT[(endPage + 1).toString()];
+        const nextPage = (this as any).TMP_SCRIPT[(endPage + 1).toString()];
         this.nextLineOfEnd = nextPage ? nextPage[0] : null;
       }
     },
-    async onBulkApply({ actId, sceneId }) {
-      const { page: startPage, lineIndex: startIndex } = this.bulkEditStart;
-      const { page: endPage, lineIndex: endIndex } = this.bulkEditEnd;
+    async onBulkApply({ actId, sceneId }: { actId: number; sceneId: number }): Promise<void> {
+      const { page: startPage, lineIndex: startIndex } = this.bulkEditStart!;
+      const { page: endPage, lineIndex: endIndex } = this.bulkEditEnd!;
 
       for (let p = startPage; p <= endPage; p++) {
-        await this.LOAD_SCRIPT_PAGE(p);
+        await (this as any).LOAD_SCRIPT_PAGE(p);
       }
 
       for (let p = startPage; p <= endPage; p++) {
-        const pageLines = this.TMP_SCRIPT[p.toString()];
+        const pageLines = (this as any).TMP_SCRIPT[p.toString()];
         if (!pageLines) continue;
         const fromIndex = p === startPage ? startIndex : 0;
         const toIndex = p === endPage ? endIndex : pageLines.length - 1;
         for (let i = fromIndex; i <= toIndex; i++) {
-          if (this.DELETED_LINES(p).includes(i)) continue;
-          this.SET_LINE({
+          if ((this as any).DELETED_LINES(p).includes(i)) continue;
+          (this as any).SET_LINE({
             pageNo: p,
             lineIndex: i,
             lineObj: { ...pageLines[i], act_id: actId, scene_id: sceneId },
@@ -1048,7 +1061,7 @@ export default {
         }
       }
 
-      this.$bvModal.hide('bulk-act-scene-modal');
+      (this as any).$bvModal.hide('bulk-act-scene-modal');
       this.exitBulkEditMode();
     },
     ...mapMutations([
@@ -1081,7 +1094,7 @@ export default {
       'GET_USER_SETTINGS',
     ]),
   },
-};
+});
 </script>
 
 <style scoped>
diff --git a/client/src/vue_components/show/config/script/ScriptLineEditor.vue b/client/src/vue_components/show/config/script/ScriptLineEditor.vue
index b06f429b..e01df5bd 100644
--- a/client/src/vue_components/show/config/script/ScriptLineEditor.vue
+++ b/client/src/vue_components/show/config/script/ScriptLineEditor.vue
@@ -97,14 +97,15 @@
   </b-form-row>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { mapGetters } from 'vuex';
 import { required, requiredIf } from 'vuelidate/lib/validators';
 import ScriptLinePart from '@/vue_components/show/config/script/ScriptLinePart.vue';
 import { notNull, notNullAndGreaterThanZero } from '@/js/customValidators';
 import { LINE_TYPES } from '@/constants/lineTypes';
 
-export default {
+export default defineComponent({
   name: 'ScriptLineEditor',
   components: { ScriptLinePart },
   events: ['input', 'doneEditing', 'deleteLine'],
@@ -166,10 +167,10 @@ export default {
         character_group_id: null,
         line_text: '',
       },
-      previousLine: null,
-      nextLine: null,
-      recalculationTimeout: null,
-      abortController: null,
+      previousLine: null as any,
+      nextLine: null as any,
+      recalculationTimeout: null as ReturnType<typeof setTimeout> | null,
+      abortController: null as AbortController | null,
     };
   },
   validations: {
@@ -218,116 +219,119 @@ export default {
   },
   computed: {
     ...mapGetters(['SCENE_BY_ID', 'ACT_BY_ID', 'TMP_SCRIPT', 'ALL_DELETED_LINES', 'CURRENT_SHOW']),
-    currentPageScript() {
-      return this.TMP_SCRIPT[this.currentEditPage.toString()] || [];
-    },
-    currentPageDeletedLines() {
-      return this.ALL_DELETED_LINES[this.currentEditPage.toString()] || [];
-    },
-    nextActs() {
-      // Start act is either the first act for the show, or the act of the previous line if there
-      // is one
-      let startAct = this.acts.find((act) => act.previous_act == null);
+    currentPageScript(): any[] {
+      return (
+        ((this as any).TMP_SCRIPT as Record<string, any[]>)[this.currentEditPage.toString()] || []
+      );
+    },
+    currentPageDeletedLines(): any[] {
+      return (
+        ((this as any).ALL_DELETED_LINES as Record<string, any[]>)[
+          this.currentEditPage.toString()
+        ] || []
+      );
+    },
+    nextActs(): any[] {
+      const acts = this.acts as any[];
+      let startAct = acts.find((act: any) => act.previous_act == null);
       if (this.previousLine != null) {
-        startAct = this.acts.find((act) => act.id === this.previousLine.act_id);
+        startAct = acts.find((act: any) => act.id === this.previousLine.act_id);
       }
-      const validActs = [];
+      const validActs: any[] = [];
       let nextAct = startAct;
-      // Find all valid acts, if there is no next line then this is all acts after the start act.
-      // If there is a next line, this is all acts up to and including the act of the next line
       while (nextAct != null) {
         validActs.push(JSON.parse(JSON.stringify(nextAct)));
         if (this.nextLine != null && this.nextLine.act_id === nextAct.id) {
           break;
         }
-        nextAct = this.ACT_BY_ID(nextAct.next_act);
+        nextAct = (this as any).ACT_BY_ID(nextAct.next_act);
       }
       return validActs;
     },
-    actOptions() {
+    actOptions(): any[] {
       return [
         { value: null, text: 'N/A', disabled: true },
-        ...this.nextActs.map((act) => ({ value: act.id, text: act.name })),
+        ...(this as any).nextActs.map((act: any) => ({ value: act.id, text: act.name })),
       ];
     },
-    nextScenes() {
-      if (this.state.act_id == null) {
+    nextScenes(): any[] {
+      const state = (this as any).state;
+      if (state.act_id == null) {
         return [];
       }
-      const scenes = this.scenes.filter((scene) => scene.act === this.state.act_id);
-      // Start scene is either the first scene of the act, or the scene of the previous line if
-      // there is one
-      let startScene = scenes.find((scene) => scene.previous_scene == null);
-      if (this.previousLine != null && this.previousLine.act_id === this.state.act_id) {
-        startScene = scenes.find((scene) => scene.id === this.previousLine.scene_id);
+      const scenes = (this.scenes as any[]).filter((scene: any) => scene.act === state.act_id);
+      let startScene = scenes.find((scene: any) => scene.previous_scene == null);
+      if (this.previousLine != null && this.previousLine.act_id === state.act_id) {
+        startScene = scenes.find((scene: any) => scene.id === this.previousLine.scene_id);
       }
-      const validScenes = [];
+      const validScenes: any[] = [];
       let nextScene = startScene;
-      // Find all valid scenes, if there is no next line then this is all scenes after the start
-      // scene. If there is a next line, this is all scenes up to and including the scene of the
-      // next line
       while (nextScene != null) {
         validScenes.push(JSON.parse(JSON.stringify(nextScene)));
         if (this.nextLine != null && this.nextLine.scene_id === nextScene.id) {
           break;
         }
-        nextScene = this.SCENE_BY_ID(nextScene.next_scene);
+        nextScene = (this as any).SCENE_BY_ID(nextScene.next_scene);
       }
       return validScenes;
     },
-    sceneOptions() {
+    sceneOptions(): any[] {
       return [
         { value: null, text: 'N/A', disabled: true },
-        ...this.nextScenes.map((scene) => ({ value: scene.id, text: scene.name })),
+        ...(this as any).nextScenes.map((scene: any) => ({ value: scene.id, text: scene.name })),
       ];
     },
-    lineValid() {
-      return !this.$v.state.$anyError;
+    lineValid(): boolean {
+      return !(this as any).$v.state.$anyError;
     },
-    stageDirectionStylesOptions() {
+    stageDirectionStylesOptions(): any[] {
       return [
         { value: null, text: 'N/A' },
-        ...this.stageDirectionStyles.map((style) => ({ value: style.id, text: style.description })),
+        ...(this.stageDirectionStyles as any[]).map((style: any) => ({
+          value: style.id,
+          text: style.description,
+        })),
       ];
     },
   },
   watch: {
     currentPageScript: {
-      handler() {
+      handler(): void {
         this.scheduleRecalculation();
       },
       deep: true,
     },
     currentPageDeletedLines: {
-      handler() {
+      handler(): void {
         this.scheduleRecalculation();
       },
       deep: true,
     },
-    lineIndex() {
+    lineIndex(): void {
       this.scheduleRecalculation();
     },
     ALL_DELETED_LINES: {
-      handler() {
+      handler(): void {
         this.scheduleRecalculation();
       },
       deep: true,
     },
   },
-  async created() {
-    this.previousLine = await this.previousLineFn(this.lineIndex);
-    this.nextLine = await this.nextLineFn(this.lineIndex);
+  async created(): Promise<void> {
+    this.previousLine = await (this.previousLineFn as Function)(this.lineIndex);
+    this.nextLine = await (this.nextLineFn as Function)(this.lineIndex);
+    const state = (this as any).state;
     if (
-      this.state.line_parts.length === 0 &&
+      state.line_parts.length === 0 &&
       (this.lineType === LINE_TYPES.DIALOGUE || this.lineType === LINE_TYPES.STAGE_DIRECTION)
     ) {
       this.addLinePart();
     }
   },
-  mounted() {
-    this.$v.state.$touch();
+  mounted(): void {
+    (this as any).$v.state.$touch();
   },
-  beforeDestroy() {
+  beforeDestroy(): void {
     if (this.recalculationTimeout) {
       clearTimeout(this.recalculationTimeout);
     }
@@ -336,60 +340,57 @@ export default {
     }
   },
   methods: {
-    scheduleRecalculation() {
-      // Cancel any pending recalculation
+    scheduleRecalculation(): void {
       if (this.recalculationTimeout) {
         clearTimeout(this.recalculationTimeout);
       }
 
-      // Debounce recalculation by 100ms
       this.recalculationTimeout = setTimeout(() => {
         this.recalculatePreviousNextLines();
       }, 100);
     },
-    async recalculatePreviousNextLines() {
-      // Cancel any in-flight async operations
+    async recalculatePreviousNextLines(): Promise<void> {
       if (this.abortController) {
         this.abortController.abort();
       }
 
-      // Create new abort controller for this operation
       this.abortController = new AbortController();
       const { signal } = this.abortController;
 
       try {
-        const prevLine = await this.previousLineFn(this.lineIndex);
+        const prevLine = await (this.previousLineFn as Function)(this.lineIndex);
         if (signal.aborted) return;
         this.previousLine = prevLine;
 
-        const nxtLine = await this.nextLineFn(this.lineIndex);
+        const nxtLine = await (this.nextLineFn as Function)(this.lineIndex);
         if (signal.aborted) return;
         this.nextLine = nxtLine;
-      } catch (error) {
+      } catch (error: any) {
         if (error.name !== 'AbortError') {
           console.error('Error recalculating previous/next lines:', error);
         }
       }
     },
-    validateState(name) {
-      const { $dirty, $error } = this.$v.state[name];
+    validateState(name: string): boolean | null {
+      const { $dirty, $error } = (this as any).$v.state[name];
       return $dirty ? !$error : null;
     },
-    doneEditing() {
+    doneEditing(): void {
       this.$emit('doneEditing');
     },
-    stateChange() {
-      this.$v.state.$touch();
-      this.$emit('input', this.state);
+    stateChange(): void {
+      (this as any).$v.state.$touch();
+      this.$emit('input', (this as any).state);
     },
-    addLinePart() {
+    addLinePart(): void {
+      const state = (this as any).state;
       const blankLine = JSON.parse(JSON.stringify(this.blankLinePartObj));
-      blankLine.line_id = this.state.id;
-      blankLine.part_index = this.state.line_parts.length;
-      this.state.line_parts.push(blankLine);
+      blankLine.line_id = state.id;
+      blankLine.part_index = state.line_parts.length;
+      state.line_parts.push(blankLine);
       if (this.lineType === LINE_TYPES.DIALOGUE && this.previousLine != null) {
-        const newPartIndex = this.state.line_parts.length - 1;
-        const newPart = this.state.line_parts[newPartIndex];
+        const newPartIndex = state.line_parts.length - 1;
+        const newPart = state.line_parts[newPartIndex];
         if (this.previousLine.line_parts.length >= newPartIndex + 1) {
           const previousPart = this.previousLine.line_parts[newPartIndex];
           if (previousPart.character_id != null) {
@@ -401,17 +402,17 @@ export default {
       }
       this.stateChange();
     },
-    deleteLine() {
+    deleteLine(): void {
       this.$emit('deleteLine');
     },
-    tryFinishLine() {
-      this.$v.state.$touch();
+    tryFinishLine(): void {
+      (this as any).$v.state.$touch();
       if (this.lineValid) {
         this.doneEditing();
       }
     },
   },
-};
+});
 </script>
 
 <style scoped></style>
diff --git a/client/src/vue_components/show/config/script/ScriptLinePart.vue b/client/src/vue_components/show/config/script/ScriptLinePart.vue
index 10bc9c36..17062eee 100644
--- a/client/src/vue_components/show/config/script/ScriptLinePart.vue
+++ b/client/src/vue_components/show/config/script/ScriptLinePart.vue
@@ -59,11 +59,12 @@
   </b-col>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { required, requiredIf } from 'vuelidate/lib/validators';
 import { LINE_TYPES } from '@/constants/lineTypes';
 
-export default {
+export default defineComponent({
   name: 'ScriptLinePart',
   events: ['input', 'addLinePart', 'tryFinishLine'],
   props: {
@@ -126,42 +127,45 @@ export default {
     };
   },
   computed: {
-    characterOptions() {
+    characterOptions(): any[] {
       return [
         { value: null, text: 'N/A' },
-        ...this.characters.map((char) => ({ value: char.id, text: char.name })),
+        ...(this.characters as any[]).map((char: any) => ({ value: char.id, text: char.name })),
       ];
     },
-    characterGroupOptions() {
+    characterGroupOptions(): any[] {
       return [
         { value: null, text: 'N/A' },
-        ...this.characterGroups.map((char) => ({ value: char.id, text: char.name })),
+        ...(this.characterGroups as any[]).map((char: any) => ({
+          value: char.id,
+          text: char.name,
+        })),
       ];
     },
   },
-  mounted() {
-    this.$v.state.$touch();
+  mounted(): void {
+    (this as any).$v.state.$touch();
     if (this.focusInput) {
-      this.$refs.partInput.focus();
+      (this.$refs.partInput as HTMLElement).focus();
     }
   },
   methods: {
-    validateState(name) {
-      const { $dirty, $error } = this.$v.state[name];
+    validateState(name: string): boolean | null {
+      const { $dirty, $error } = (this as any).$v.state[name];
       return $dirty ? !$error : null;
     },
-    addLinePart() {
+    addLinePart(): void {
       this.$emit('addLinePart');
     },
-    stateChange() {
-      this.$v.state.$touch();
-      this.$emit('input', this.state);
-      this.$refs.partInput.focus();
+    stateChange(): void {
+      (this as any).$v.state.$touch();
+      this.$emit('input', (this as any).state);
+      (this.$refs.partInput as HTMLElement).focus();
     },
-    handleEnterPress() {
-      this.$v.state.$touch();
+    handleEnterPress(): void {
+      (this as any).$v.state.$touch();
       this.$emit('tryFinishLine');
     },
   },
-};
+});
 </script>
diff --git a/client/src/vue_components/show/config/script/ScriptLineViewer.vue b/client/src/vue_components/show/config/script/ScriptLineViewer.vue
index b0891e0f..bee4d660 100644
--- a/client/src/vue_components/show/config/script/ScriptLineViewer.vue
+++ b/client/src/vue_components/show/config/script/ScriptLineViewer.vue
@@ -165,12 +165,13 @@
   </b-row>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { mapGetters } from 'vuex';
 import { LINE_TYPES } from '@/constants/lineTypes';
 import scriptDisplayMixin from '@/mixins/scriptDisplayMixin';
 
-export default {
+export default defineComponent({
   name: 'ScriptLineViewer',
   mixins: [scriptDisplayMixin],
   events: [
@@ -252,27 +253,25 @@ export default {
     };
   },
   computed: {
-    needsHeadings() {
-      let { previousLine } = this;
+    needsHeadings(): boolean[] {
+      const line = this.line as any;
+      let previousLine = this.previousLine as any;
       let previousLineIndex = this.lineIndex - 1;
       while (previousLine != null && previousLine.line_type === LINE_TYPES.STAGE_DIRECTION) {
         if (previousLineIndex === 0) {
           break;
         }
         previousLineIndex -= 1;
-        previousLine = this.page[previousLineIndex];
+        previousLine = (this.page as any[])[previousLineIndex];
       }
 
-      const ret = [];
-      this.line.line_parts.forEach(function checkLinePartNeedsHeading(part) {
-        if (
-          previousLine == null ||
-          previousLine.line_parts.length !== this.line.line_parts.length
-        ) {
+      const ret: boolean[] = [];
+      line.line_parts.forEach((part: any) => {
+        if (previousLine == null || previousLine.line_parts.length !== line.line_parts.length) {
           ret.push(true);
         } else {
           const matchingIndex = previousLine.line_parts.find(
-            (prevPart) => prevPart.part_index === part.part_index
+            (prevPart: any) => prevPart.part_index === part.part_index
           );
           if (matchingIndex == null) {
             ret.push(true);
@@ -285,39 +284,40 @@ export default {
             );
           }
         }
-      }, this);
+      });
       return ret;
     },
-    needsActSceneLabelSimple() {
-      if (this.previousLine == null) {
+    needsActSceneLabelSimple(): boolean {
+      const line = this.line as any;
+      const previousLine = this.previousLine as any;
+      if (previousLine == null) {
         return true;
       }
-      return !(
-        this.previousLine.act_id === this.line.act_id &&
-        this.previousLine.scene_id === this.line.scene_id
-      );
+      return !(previousLine.act_id === line.act_id && previousLine.scene_id === line.scene_id);
     },
-    stageDirectionStylingWithCuts() {
-      if (this.line.stage_direction_style_id == null || this.stageDirectionStyle == null) {
-        const style = {
+    stageDirectionStylingWithCuts(): Record<string, string> {
+      const line = this.line as any;
+      const stageDirectionStyle = (this as any).stageDirectionStyle;
+      if (line.stage_direction_style_id == null || stageDirectionStyle == null) {
+        const style: Record<string, string> = {
           'background-color': 'darkslateblue',
           'font-style': 'italic',
         };
-        if (this.linePartCuts.indexOf(this.line.line_parts[0].id) !== -1) {
+        if ((this.linePartCuts as any[]).indexOf(line.line_parts[0].id) !== -1) {
           style['text-decoration'] = 'line-through';
         }
         return style;
       }
-      const style = {
-        'font-weight': this.stageDirectionStyle.bold ? 'bold' : 'normal',
-        'font-style': this.stageDirectionStyle.italic ? 'italic' : 'normal',
-        'text-decoration-line': this.stageDirectionStyle.underline ? 'underline' : 'none',
-        color: this.stageDirectionStyle.text_colour,
+      const style: Record<string, string> = {
+        'font-weight': stageDirectionStyle.bold ? 'bold' : 'normal',
+        'font-style': stageDirectionStyle.italic ? 'italic' : 'normal',
+        'text-decoration-line': stageDirectionStyle.underline ? 'underline' : 'none',
+        color: stageDirectionStyle.text_colour,
       };
-      if (this.stageDirectionStyle.enable_background_colour) {
-        style['background-color'] = this.stageDirectionStyle.background_colour;
+      if (stageDirectionStyle.enable_background_colour) {
+        style['background-color'] = stageDirectionStyle.background_colour;
       }
-      if (this.linePartCuts.indexOf(this.line.line_parts[0].id) !== -1) {
+      if ((this.linePartCuts as any[]).indexOf(line.line_parts[0].id) !== -1) {
         style['text-decoration-line'] = `${style['text-decoration-line']} line-through`;
       }
       return style;
@@ -325,36 +325,37 @@ export default {
     ...mapGetters(['IS_CUT_MODE']),
   },
   methods: {
-    editLine() {
+    editLine(): void {
       this.$emit('editLine');
     },
-    insertDialogue() {
+    insertDialogue(): void {
       this.$emit('insertDialogue');
     },
-    insertStageDirection() {
+    insertStageDirection(): void {
       this.$emit('insertStageDirection');
     },
-    insertCueLine() {
+    insertCueLine(): void {
       this.$emit('insertCueLine');
     },
-    insertSpacing() {
+    insertSpacing(): void {
       this.$emit('insertSpacing');
     },
-    deleteLine() {
+    deleteLine(): void {
       this.$emit('deleteLine');
     },
-    cutLinePart(partIndex) {
-      if (partIndex < this.line.line_parts.length && this.line.line_parts[partIndex] != null) {
-        const linePart = this.line.line_parts[partIndex];
+    cutLinePart(partIndex: number): void {
+      const line = this.line as any;
+      if (partIndex < line.line_parts.length && line.line_parts[partIndex] != null) {
+        const linePart = line.line_parts[partIndex];
         if (linePart.id != null && linePart.line_id != null) {
           this.$emit('cutLinePart', linePart.id);
           return;
         }
       }
-      this.$toast.error('Unable to cut line part');
+      (this as any).$toast.error('Unable to cut line part');
     },
   },
-};
+});
 </script>
 
 <style scoped>
diff --git a/client/src/vue_components/show/config/script/ScriptRevisions.vue b/client/src/vue_components/show/config/script/ScriptRevisions.vue
index 73306f45..5c4eee38 100644
--- a/client/src/vue_components/show/config/script/ScriptRevisions.vue
+++ b/client/src/vue_components/show/config/script/ScriptRevisions.vue
@@ -195,14 +195,15 @@
   </span>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { mapActions, mapGetters } from 'vuex';
 import { required } from 'vuelidate/lib/validators';
 import log from 'loglevel';
 import RevisionGraph from '@/vue_components/show/config/script/RevisionGraph.vue';
 import RevisionDetailModal from '@/vue_components/show/config/script/RevisionDetailModal.vue';
 
-export default {
+export default defineComponent({
   name: 'ScriptRevisions',
   components: { RevisionDetailModal, RevisionGraph },
   data() {
@@ -221,8 +222,8 @@ export default {
       },
       branchFormState: {
         description: '',
-        sourceRevisionId: null,
-        sourceRevision: null,
+        sourceRevisionId: null as number | null,
+        sourceRevision: null as number | null,
         isCurrentRevision: false,
       },
       submittingNewRevision: false,
@@ -230,10 +231,10 @@ export default {
       submittingLoadRevision: false,
       deletingRevision: false,
       // Graph state
-      graphCollapsed: this.getGraphCollapseState(),
-      selectedRevisionId: null,
-      selectedRevision: null,
-      modalSubmitting: false,
+      graphCollapsed: (this as any).getGraphCollapseState(),
+      selectedRevisionId: null as number | null,
+      selectedRevision: null as any,
+      modalSubmitting: false as boolean | string,
     };
   },
   validations: {
@@ -256,44 +257,47 @@ export default {
       'INTERNAL_UUID',
       'IS_SCRIPT_EDITOR',
     ]),
-    canChangeRevisions() {
-      return this.CURRENT_EDITOR == null || this.CURRENT_EDITOR === this.INTERNAL_UUID;
+    canChangeRevisions(): boolean {
+      return (
+        (this as any).CURRENT_EDITOR == null ||
+        (this as any).CURRENT_EDITOR === (this as any).INTERNAL_UUID
+      );
     },
   },
   watch: {
-    graphCollapsed(newVal) {
+    graphCollapsed(newVal: boolean): void {
       localStorage.setItem('revisionGraphCollapsed', JSON.stringify(newVal));
     },
   },
-  async beforeMount() {
-    await this.GET_SCRIPT_CONFIG_STATUS();
+  async beforeMount(): Promise<void> {
+    await (this as any).GET_SCRIPT_CONFIG_STATUS();
   },
   methods: {
-    resetNewRevForm() {
+    resetNewRevForm(): void {
       this.newRevFormState = {
         description: '',
       };
       this.submittingNewRevision = false;
 
       this.$nextTick(() => {
-        this.$v.$reset();
+        (this as any).$v.$reset();
       });
     },
-    validateNewRevState(name) {
-      const { $dirty, $error } = this.$v.newRevFormState[name];
+    validateNewRevState(name: string): boolean | null {
+      const { $dirty, $error } = (this as any).$v.newRevFormState[name];
       return $dirty ? !$error : null;
     },
-    async onSubmitNewRev(event) {
-      this.$v.newRevFormState.$touch();
-      if (this.$v.newRevFormState.$anyError || this.submittingNewRevision) {
+    async onSubmitNewRev(event: Event): Promise<void> {
+      (this as any).$v.newRevFormState.$touch();
+      if ((this as any).$v.newRevFormState.$anyError || this.submittingNewRevision) {
         event.preventDefault();
         return;
       }
 
       this.submittingNewRevision = true;
       try {
-        await this.ADD_SCRIPT_REVISION(this.newRevFormState);
-        this.$bvModal.hide('new-revision');
+        await (this as any).ADD_SCRIPT_REVISION(this.newRevFormState);
+        (this as any).$bvModal.hide('new-revision');
         this.resetNewRevForm();
       } catch (error) {
         log.error('Error submitting new revision:', error);
@@ -302,17 +306,17 @@ export default {
         this.submittingNewRevision = false;
       }
     },
-    async loadRevision(revision) {
+    async loadRevision(revision: any): Promise<void> {
       if (this.submittingLoadRevision) {
         return;
       }
 
       const msg = `Are you sure you want to load revision ${revision.item.revision}?`;
-      const action = await this.$bvModal.msgBoxConfirm(msg, {});
+      const action = await (this as any).$bvModal.msgBoxConfirm(msg, {});
       if (action === true) {
         this.submittingLoadRevision = true;
         try {
-          await this.LOAD_SCRIPT_REVISION(revision.item.id);
+          await (this as any).LOAD_SCRIPT_REVISION(revision.item.id);
         } catch (error) {
           log.error('Error loading revision:', error);
         } finally {
@@ -320,21 +324,21 @@ export default {
         }
       }
     },
-    openEditRevForm(revision) {},
-    async deleteRev(revision) {
+    openEditRevForm(_revision: any): void {},
+    async deleteRev(revision: any): Promise<void> {
       if (this.deletingRevision) {
         return;
       }
 
       let msg = `Are you sure you want to delete revision ${revision.item.revision}?`;
-      if (this.CURRENT_REVISION === revision.item.id) {
+      if ((this as any).CURRENT_REVISION === revision.item.id) {
         msg = `${msg}  This will load the previous revision, or first revision if this is not available.`;
       }
-      const action = await this.$bvModal.msgBoxConfirm(msg, {});
+      const action = await (this as any).$bvModal.msgBoxConfirm(msg, {});
       if (action === true) {
         this.deletingRevision = true;
         try {
-          await this.DELETE_SCRIPT_REVISION(revision.item.id);
+          await (this as any).DELETE_SCRIPT_REVISION(revision.item.id);
         } catch (error) {
           log.error('Error deleting revision:', error);
         } finally {
@@ -342,24 +346,23 @@ export default {
         }
       }
     },
-    // Graph interaction handlers
-    getGraphCollapseState() {
+    getGraphCollapseState(): boolean {
       const saved = localStorage.getItem('revisionGraphCollapsed');
       return saved !== null ? JSON.parse(saved) : false;
     },
-    handleNodeClick(revision) {
+    handleNodeClick(revision: any): void {
       this.selectedRevisionId = revision.id;
       this.selectedRevision = revision;
-      this.$bvModal.show('revision-detail');
+      (this as any).$bvModal.show('revision-detail');
     },
-    async handleModalLoadRevision(revision) {
+    async handleModalLoadRevision(revision: any): Promise<void> {
       const msg = `Are you sure you want to load revision ${revision.revision}?`;
-      const action = await this.$bvModal.msgBoxConfirm(msg, {});
+      const action = await (this as any).$bvModal.msgBoxConfirm(msg, {});
       if (action === true) {
         this.modalSubmitting = 'load';
         try {
-          await this.LOAD_SCRIPT_REVISION(revision.id);
-          this.$bvModal.hide('revision-detail');
+          await (this as any).LOAD_SCRIPT_REVISION(revision.id);
+          (this as any).$bvModal.hide('revision-detail');
         } catch (error) {
           log.error('Error loading revision:', error);
         } finally {
@@ -367,26 +370,21 @@ export default {
         }
       }
     },
-    handleModalCreateFrom(revision) {
-      // Set up the branch form state with the source revision info
+    handleModalCreateFrom(revision: any): void {
       this.branchFormState.sourceRevisionId = revision.id;
       this.branchFormState.sourceRevision = revision.revision;
-      this.branchFormState.isCurrentRevision = revision.id === this.CURRENT_REVISION;
-
-      // Show the branch creation modal
-      this.$bvModal.show('create-branch-modal');
+      this.branchFormState.isCurrentRevision = revision.id === (this as any).CURRENT_REVISION;
+      (this as any).$bvModal.show('create-branch-modal');
     },
-    setupBranchForm() {
-      // Reset only the description field, preserving the source revision info
-      // that was set in handleModalCreateFrom
+    setupBranchForm(): void {
       this.branchFormState.description = '';
       this.submittingBranch = false;
 
       this.$nextTick(() => {
-        this.$v.$reset();
+        (this as any).$v.$reset();
       });
     },
-    resetBranchForm() {
+    resetBranchForm(): void {
       this.branchFormState = {
         description: '',
         sourceRevisionId: null,
@@ -396,29 +394,29 @@ export default {
       this.submittingBranch = false;
 
       this.$nextTick(() => {
-        this.$v.$reset();
+        (this as any).$v.$reset();
       });
     },
-    validateBranchState(name) {
-      const { $dirty, $error } = this.$v.branchFormState[name];
+    validateBranchState(name: string): boolean | null {
+      const { $dirty, $error } = (this as any).$v.branchFormState[name];
       return $dirty ? !$error : null;
     },
-    async onSubmitBranch(event) {
-      this.$v.branchFormState.$touch();
-      if (this.$v.branchFormState.$anyError || this.submittingBranch) {
+    async onSubmitBranch(event: Event): Promise<void> {
+      (this as any).$v.branchFormState.$touch();
+      if ((this as any).$v.branchFormState.$anyError || this.submittingBranch) {
         event.preventDefault();
         return;
       }
 
       this.submittingBranch = true;
       try {
-        await this.ADD_SCRIPT_REVISION({
+        await (this as any).ADD_SCRIPT_REVISION({
           description: this.branchFormState.description,
           parent_revision_id: this.branchFormState.sourceRevisionId,
           set_as_current: this.branchFormState.isCurrentRevision,
         });
-        this.$bvModal.hide('create-branch-modal');
-        this.$bvModal.hide('revision-detail');
+        (this as any).$bvModal.hide('create-branch-modal');
+        (this as any).$bvModal.hide('revision-detail');
         this.resetBranchForm();
       } catch (error) {
         log.error('Error creating branch:', error);
@@ -427,10 +425,10 @@ export default {
         this.submittingBranch = false;
       }
     },
-    handleModalClose() {
-      this.$bvModal.hide('revision-detail');
+    handleModalClose(): void {
+      (this as any).$bvModal.hide('revision-detail');
     },
-    handleModalHidden() {
+    handleModalHidden(): void {
       this.selectedRevisionId = null;
       this.selectedRevision = null;
       this.modalSubmitting = false;
@@ -442,7 +440,7 @@ export default {
       'GET_SCRIPT_CONFIG_STATUS',
     ]),
   },
-};
+});
 </script>
 
 <style scoped>
diff --git a/client/src/vue_components/show/config/script/StageDirectionStyles.vue b/client/src/vue_components/show/config/script/StageDirectionStyles.vue
index 844bf6c9..f48a71c9 100644
--- a/client/src/vue_components/show/config/script/StageDirectionStyles.vue
+++ b/client/src/vue_components/show/config/script/StageDirectionStyles.vue
@@ -342,12 +342,13 @@
   </b-table>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { mapGetters, mapActions } from 'vuex';
 import { required } from 'vuelidate/lib/validators';
 import log from 'loglevel';
 
-export default {
+export default defineComponent({
   name: 'StageDirectionConfigs',
   data() {
     return {
@@ -377,7 +378,7 @@ export default {
         backgroundColour: '#000000',
       },
       editStyleFormState: {
-        id: null,
+        id: null as number | null,
         description: '',
         styleOptions: [
           { caption: 'Bold', state: false },
@@ -392,26 +393,27 @@ export default {
       isSubmittingNew: false,
       isSubmittingEdit: false,
       isDeleting: false,
-      importStyleGroups: [],
-      styleGroupExpanded: {},
+      importStyleGroups: [] as any[],
+      styleGroupExpanded: {} as Record<number, boolean>,
       isLoadingImport: false,
-      isImporting: {},
+      isImporting: {} as Record<number, boolean>,
     };
   },
   computed: {
     ...mapGetters(['STAGE_DIRECTION_STYLES', 'IS_SCRIPT_EDITOR']),
-    newFormExampleCss() {
-      const style = {
-        'font-weight': this.newStyleFormState.styleOptions.find((el) => el.caption === 'Bold').state
+    newFormExampleCss(): Record<string, string> {
+      const style: Record<string, string> = {
+        'font-weight': this.newStyleFormState.styleOptions.find((el) => el.caption === 'Bold')!
+          .state
           ? 'bold'
           : 'normal',
-        'font-style': this.newStyleFormState.styleOptions.find((el) => el.caption === 'Italic')
+        'font-style': this.newStyleFormState.styleOptions.find((el) => el.caption === 'Italic')!
           .state
           ? 'italic'
           : 'normal',
         'text-decoration-line': this.newStyleFormState.styleOptions.find(
           (el) => el.caption === 'Underline'
-        ).state
+        )!.state
           ? 'underline'
           : 'none',
         color: this.newStyleFormState.textColour,
@@ -421,19 +423,19 @@ export default {
       }
       return style;
     },
-    editFormExampleCss() {
-      const style = {
-        'font-weight': this.editStyleFormState.styleOptions.find((el) => el.caption === 'Bold')
+    editFormExampleCss(): Record<string, string> {
+      const style: Record<string, string> = {
+        'font-weight': this.editStyleFormState.styleOptions.find((el) => el.caption === 'Bold')!
           .state
           ? 'bold'
           : 'normal',
-        'font-style': this.editStyleFormState.styleOptions.find((el) => el.caption === 'Italic')
+        'font-style': this.editStyleFormState.styleOptions.find((el) => el.caption === 'Italic')!
           .state
           ? 'italic'
           : 'normal',
         'text-decoration-line': this.editStyleFormState.styleOptions.find(
           (el) => el.caption === 'Underline'
-        ).state
+        )!.state
           ? 'underline'
           : 'none',
         color: this.editStyleFormState.textColour,
@@ -443,12 +445,12 @@ export default {
       }
       return style;
     },
-    createPayload() {
+    createPayload(): any {
       return {
         description: this.newStyleFormState.description,
-        bold: this.newStyleFormState.styleOptions.find((el) => el.caption === 'Bold').state,
-        italic: this.newStyleFormState.styleOptions.find((el) => el.caption === 'Italic').state,
-        underline: this.newStyleFormState.styleOptions.find((el) => el.caption === 'Underline')
+        bold: this.newStyleFormState.styleOptions.find((el) => el.caption === 'Bold')!.state,
+        italic: this.newStyleFormState.styleOptions.find((el) => el.caption === 'Italic')!.state,
+        underline: this.newStyleFormState.styleOptions.find((el) => el.caption === 'Underline')!
           .state,
         textFormat: this.newStyleFormState.textFormat,
         textColour: this.newStyleFormState.textColour,
@@ -456,13 +458,13 @@ export default {
         backgroundColour: this.newStyleFormState.backgroundColour,
       };
     },
-    editPayload() {
+    editPayload(): any {
       return {
         id: this.editStyleFormState.id,
         description: this.editStyleFormState.description,
-        bold: this.editStyleFormState.styleOptions.find((el) => el.caption === 'Bold').state,
-        italic: this.editStyleFormState.styleOptions.find((el) => el.caption === 'Italic').state,
-        underline: this.editStyleFormState.styleOptions.find((el) => el.caption === 'Underline')
+        bold: this.editStyleFormState.styleOptions.find((el) => el.caption === 'Bold')!.state,
+        italic: this.editStyleFormState.styleOptions.find((el) => el.caption === 'Italic')!.state,
+        underline: this.editStyleFormState.styleOptions.find((el) => el.caption === 'Underline')!
           .state,
         textFormat: this.editStyleFormState.textFormat,
         textColour: this.editStyleFormState.textColour,
@@ -471,8 +473,8 @@ export default {
       };
     },
   },
-  async mounted() {
-    await this.GET_STAGE_DIRECTION_STYLES();
+  async mounted(): Promise<void> {
+    await (this as any).GET_STAGE_DIRECTION_STYLES();
   },
   validations: {
     newStyleFormState: {
@@ -517,7 +519,7 @@ export default {
     },
   },
   methods: {
-    resetNewFormState() {
+    resetNewFormState(): void {
       this.newStyleFormState = {
         description: '',
         styleOptions: [
@@ -532,10 +534,10 @@ export default {
       };
       this.isSubmittingNew = false;
       this.$nextTick(() => {
-        this.$v.$reset();
+        (this as any).$v.$reset();
       });
     },
-    resetEditFormState() {
+    resetEditFormState(): void {
       this.editStyleFormState = {
         id: null,
         description: '',
@@ -551,20 +553,20 @@ export default {
       };
       this.isSubmittingEdit = false;
       this.$nextTick(() => {
-        this.$v.$reset();
+        (this as any).$v.$reset();
       });
     },
-    validateNewStyleState(name) {
-      const { $dirty, $error } = this.$v.newStyleFormState[name];
+    validateNewStyleState(name: string): boolean | null {
+      const { $dirty, $error } = (this as any).$v.newStyleFormState[name];
       return $dirty ? !$error : null;
     },
-    validateEditStyleState(name) {
-      const { $dirty, $error } = this.$v.editStyleFormState[name];
+    validateEditStyleState(name: string): boolean | null {
+      const { $dirty, $error } = (this as any).$v.editStyleFormState[name];
       return $dirty ? !$error : null;
     },
-    async onSubmitNewStyle(event) {
-      this.$v.newStyleFormState.$touch();
-      if (this.$v.newStyleFormState.$anyError) {
+    async onSubmitNewStyle(event: Event): Promise<void> {
+      (this as any).$v.newStyleFormState.$touch();
+      if ((this as any).$v.newStyleFormState.$anyError) {
         event.preventDefault();
         return;
       }
@@ -577,20 +579,20 @@ export default {
       this.isSubmittingNew = true;
 
       try {
-        await this.ADD_STAGE_DIRECTION_STYLE(this.createPayload);
-        this.$refs['new-config-modal'].hide();
+        await (this as any).ADD_STAGE_DIRECTION_STYLE(this.createPayload);
+        (this as any).$refs['new-config-modal'].hide();
         this.resetNewFormState();
       } catch (error) {
         log.error('Error adding new stage direction style:', error);
-        this.$toast.error('Failed to add new style');
+        (this as any).$toast.error('Failed to add new style');
         event.preventDefault();
       } finally {
         this.isSubmittingNew = false;
       }
     },
-    async onSubmitEditStyle(event) {
-      this.$v.editStyleFormState.$touch();
-      if (this.$v.editStyleFormState.$anyError) {
+    async onSubmitEditStyle(event: Event): Promise<void> {
+      (this as any).$v.editStyleFormState.$touch();
+      if ((this as any).$v.editStyleFormState.$anyError) {
         event.preventDefault();
         return;
       }
@@ -603,18 +605,18 @@ export default {
       this.isSubmittingEdit = true;
 
       try {
-        await this.UPDATE_STAGE_DIRECTION_STYLE(this.editPayload);
-        this.$refs['edit-config-modal'].hide();
+        await (this as any).UPDATE_STAGE_DIRECTION_STYLE(this.editPayload);
+        (this as any).$refs['edit-config-modal'].hide();
         this.resetEditFormState();
       } catch (error) {
         log.error('Error updating stage direction style:', error);
-        this.$toast.error('Failed to update style');
+        (this as any).$toast.error('Failed to update style');
         event.preventDefault();
       } finally {
         this.isSubmittingEdit = false;
       }
     },
-    openEditStyleForm(style) {
+    openEditStyleForm(style: any): void {
       if (style != null) {
         this.editStyleFormState.id = style.item.id;
         this.editStyleFormState.description = style.item.description;
@@ -627,30 +629,30 @@ export default {
         this.editStyleFormState.textColour = style.item.text_colour;
         this.editStyleFormState.enableBackgroundColour = style.item.enable_background_colour;
         this.editStyleFormState.backgroundColour = style.item.background_colour;
-        this.$bvModal.show('edit-config-modal');
+        (this as any).$bvModal.show('edit-config-modal');
       }
     },
-    async deleteStyle(style) {
+    async deleteStyle(style: any): Promise<void> {
       if (this.isDeleting) {
         return;
       }
 
       const msg = `Are you sure you want to delete ${style.item.description}?`;
-      const action = await this.$bvModal.msgBoxConfirm(msg, {});
+      const action = await (this as any).$bvModal.msgBoxConfirm(msg, {});
       if (action === true) {
         this.isDeleting = true;
         try {
-          await this.DELETE_STAGE_DIRECTION_STYLE(style.item.id);
+          await (this as any).DELETE_STAGE_DIRECTION_STYLE(style.item.id);
         } catch (error) {
           log.error('Error deleting stage direction style:', error);
-          this.$toast.error('Failed to delete style');
+          (this as any).$toast.error('Failed to delete style');
         } finally {
           this.isDeleting = false;
         }
       }
     },
-    exampleCss(data) {
-      const style = {
+    exampleCss(data: any): Record<string, string> {
+      const style: Record<string, string> = {
         'font-weight': data.bold ? 'bold' : 'normal',
         'font-style': data.italic ? 'italic' : 'normal',
         'text-decoration-line': data.underline ? 'underline' : 'none',
@@ -661,37 +663,37 @@ export default {
       }
       return style;
     },
-    async openImportModal() {
-      this.$bvModal.show('import-style-modal');
+    async openImportModal(): Promise<void> {
+      (this as any).$bvModal.show('import-style-modal');
       this.isLoadingImport = true;
       try {
-        const data = await this.GET_IMPORTABLE_STAGE_DIRECTION_STYLES();
+        const data = await (this as any).GET_IMPORTABLE_STAGE_DIRECTION_STYLES();
         this.importStyleGroups = data.style_groups;
-        const expanded = {};
-        data.style_groups.forEach((group) => {
+        const expanded: Record<number, boolean> = {};
+        data.style_groups.forEach((group: any) => {
           expanded[group.id] = true;
         });
         this.styleGroupExpanded = expanded;
       } catch (error) {
         log.error('Error fetching importable stage direction styles:', error);
-        this.$toast.error('Failed to load styles for import');
+        (this as any).$toast.error('Failed to load styles for import');
       } finally {
         this.isLoadingImport = false;
       }
     },
-    resetImportState() {
+    resetImportState(): void {
       this.importStyleGroups = [];
       this.styleGroupExpanded = {};
       this.isLoadingImport = false;
       this.isImporting = {};
     },
-    toggleImportShow(showId) {
+    toggleImportShow(showId: number): void {
       this.$set(this.styleGroupExpanded, showId, !this.styleGroupExpanded[showId]);
     },
-    async importStyle(style) {
+    async importStyle(style: any): Promise<void> {
       this.$set(this.isImporting, style.id, true);
       try {
-        await this.ADD_STAGE_DIRECTION_STYLE({
+        await (this as any).ADD_STAGE_DIRECTION_STYLE({
           description: style.description,
           bold: style.bold,
           italic: style.italic,
@@ -701,10 +703,10 @@ export default {
           enableBackgroundColour: style.enable_background_colour,
           backgroundColour: style.background_colour,
         });
-        this.$toast.success(`Imported "${style.description}"`);
+        (this as any).$toast.success(`Imported "${style.description}"`);
       } catch (error) {
         log.error('Error importing stage direction style:', error);
-        this.$toast.error(`Failed to import "${style.description}"`);
+        (this as any).$toast.error(`Failed to import "${style.description}"`);
       } finally {
         this.$set(this.isImporting, style.id, false);
       }
@@ -717,5 +719,5 @@ export default {
       'GET_IMPORTABLE_STAGE_DIRECTION_STYLES',
     ]),
   },
-};
+});
 </script>
diff --git a/client/src/vue_components/show/config/sessions/SessionList.vue b/client/src/vue_components/show/config/sessions/SessionList.vue
index ce45a300..fb7f22fa 100644
--- a/client/src/vue_components/show/config/sessions/SessionList.vue
+++ b/client/src/vue_components/show/config/sessions/SessionList.vue
@@ -63,7 +63,8 @@
   </b-container>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { mapGetters } from 'vuex';
 import log from 'loglevel';
 import { contrastColor } from 'contrast-color';
@@ -71,7 +72,7 @@ import { contrastColor } from 'contrast-color';
 import { makeURL, msToTimerString } from '@/js/utils';
 import SessionTagDropdown from './SessionTagDropdown.vue';
 
-export default {
+export default defineComponent({
   name: 'SessionList',
   components: {
     SessionTagDropdown,
@@ -101,54 +102,54 @@ export default {
   },
   methods: {
     contrastColor,
-    async startSession() {
-      if (this.INTERNAL_UUID == null) {
-        this.$toast.error('Unable to start new show session');
+    async startSession(): Promise<void> {
+      if ((this as any).INTERNAL_UUID == null) {
+        (this as any).$toast.error('Unable to start new show session');
         return;
       }
       this.startingSession = true;
       const response = await fetch(`${makeURL('/api/v1/show/sessions/start')}`, {
         method: 'POST',
         body: JSON.stringify({
-          session_id: this.INTERNAL_UUID,
+          session_id: (this as any).INTERNAL_UUID,
         }),
       });
       if (response.ok) {
-        this.$toast.success('Started new show session');
+        (this as any).$toast.success('Started new show session');
       } else {
         log.error('Unable to start new show session');
-        this.$toast.error('Unable to start new show session');
+        (this as any).$toast.error('Unable to start new show session');
       }
       this.startingSession = false;
     },
-    async stopSession() {
+    async stopSession(): Promise<void> {
       this.stoppingSession = true;
       const response = await fetch(`${makeURL('/api/v1/show/sessions/stop')}`, {
         method: 'POST',
       });
       if (response.ok) {
-        this.$toast.success('Stopped show session');
+        (this as any).$toast.success('Stopped show session');
       } else {
         log.error('Unable to stop show session');
-        this.$toast.error('Unable to stop show session');
+        (this as any).$toast.error('Unable to stop show session');
       }
       this.stoppingSession = false;
     },
-    runTimeCalc(start, end) {
+    runTimeCalc(start: string, end: string): string {
       const startDate = Date.parse(start);
       const endDate = Date.parse(end);
       const diff = endDate - startDate;
       return msToTimerString(diff);
     },
-    scriptRevisionLabel(revisionId) {
-      const revision = this.SCRIPT_REVISIONS.find((rev) => rev.id === revisionId);
+    scriptRevisionLabel(revisionId: number): string {
+      const revision = (this as any).SCRIPT_REVISIONS.find((rev: any) => rev.id === revisionId);
       if (revision) {
         return `${revision.revision}: ${revision.description}`;
       }
       return 'N/A';
     },
   },
-};
+});
 </script>
 
 <style scoped>
diff --git a/client/src/vue_components/show/config/sessions/SessionTagDropdown.vue b/client/src/vue_components/show/config/sessions/SessionTagDropdown.vue
index e265a9b2..d7752a60 100644
--- a/client/src/vue_components/show/config/sessions/SessionTagDropdown.vue
+++ b/client/src/vue_components/show/config/sessions/SessionTagDropdown.vue
@@ -57,12 +57,13 @@
   </b-dropdown>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
 import { mapActions, mapGetters } from 'vuex';
 import log from 'loglevel';
 import { contrastColor } from 'contrast-color';
 
-export default {
+export default defineComponent({
   name: 'SessionTagDropdown',
   props: {
     sessionId: {
@@ -70,63 +71,61 @@ export default {
       required: true,
     },
     currentTagIds: {
-      type: Array,
+      type: Array as PropType<number[]>,
       required: true,
     },
   },
   data() {
     return {
       searchQuery: '',
-      selectedTagIds: [...this.currentTagIds],
+      selectedTagIds: [...this.currentTagIds] as number[],
       saving: false,
     };
   },
   computed: {
     ...mapGetters(['SESSION_TAGS']),
-    filteredTags() {
+    filteredTags(): unknown[] {
       if (!this.searchQuery) {
-        return this.SESSION_TAGS || [];
+        return (this as any).SESSION_TAGS || [];
       }
       const query = this.searchQuery.toLowerCase();
-      return (this.SESSION_TAGS || []).filter((tag) => tag.tag.toLowerCase().includes(query));
+      return ((this as any).SESSION_TAGS || []).filter((tag: any) =>
+        tag.tag.toLowerCase().includes(query)
+      );
     },
   },
   methods: {
     ...mapActions(['UPDATE_SESSION_TAGS']),
     contrastColor,
-    isTagSelected(tagId) {
+    isTagSelected(tagId: number): boolean {
       return this.selectedTagIds.includes(tagId);
     },
-    async toggleTag(tagId) {
-      // Optimistic update
+    async toggleTag(tagId: number): Promise<void> {
       if (this.selectedTagIds.includes(tagId)) {
         this.selectedTagIds = this.selectedTagIds.filter((id) => id !== tagId);
       } else {
         this.selectedTagIds.push(tagId);
       }
-
-      // Save immediately
       await this.saveTagAssignment();
     },
-    async saveTagAssignment() {
+    async saveTagAssignment(): Promise<void> {
       if (this.saving) return;
       this.saving = true;
 
       try {
-        await this.UPDATE_SESSION_TAGS({
+        await (this as any).UPDATE_SESSION_TAGS({
           sessionId: this.sessionId,
           tagIds: this.selectedTagIds,
         });
       } catch (error) {
         log.error('Error updating session tags:', error);
-        // Revert optimistic update on error
         this.selectedTagIds = [...this.currentTagIds];
       } finally {
         this.saving = false;
       }
     },
   },
-};
+});
 </script>
 
 <style scoped>
diff --git a/client/src/vue_components/show/config/sessions/SessionTagList.vue b/client/src/vue_components/show/config/sessions/SessionTagList.vue
index 397b67cc..75c3aafc 100644
--- a/client/src/vue_components/show/config/sessions/SessionTagList.vue
+++ b/client/src/vue_components/show/config/sessions/SessionTagList.vue
@@ -209,19 +209,20 @@
   </span>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { mapActions, mapGetters } from 'vuex';
 import log from 'loglevel';
 import { required } from 'vuelidate/lib/validators';
 import { contrastColor } from 'contrast-color';
 
-function isValidHexColor(value) {
+function isValidHexColor(value: string): boolean {
   if (!value) return false;
   const hexColorRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
   return hexColorRegex.test(value);
 }
 
-function isTagNameUnique(value) {
+function isTagNameUnique(this: any, value: string): boolean {
   if (value === '') {
     return true;
   }
@@ -229,16 +230,16 @@ function isTagNameUnique(value) {
   if (this.editTagForm.id != null) {
     if (this.SESSION_TAGS != null && this.SESSION_TAGS.length > 0) {
       return !this.SESSION_TAGS.some(
-        (tag) => tag.tag.toLowerCase() === lowerValue && tag.id !== this.editTagForm.id
+        (tag: any) => tag.tag.toLowerCase() === lowerValue && tag.id !== this.editTagForm.id
       );
     }
   } else if (this.SESSION_TAGS != null && this.SESSION_TAGS.length > 0) {
-    return !this.SESSION_TAGS.some((tag) => tag.tag.toLowerCase() === lowerValue);
+    return !this.SESSION_TAGS.some((tag: any) => tag.tag.toLowerCase() === lowerValue);
   }
   return true;
 }
 
-export default {
+export default defineComponent({
   name: 'SessionTagList',
   data() {
     return {
@@ -254,17 +255,17 @@ export default {
         colour: '#3498DB',
       },
       editTagForm: {
-        id: null,
+        id: null as number | null,
         tag: '',
         colour: '',
       },
       isSubmittingNewTag: false,
       isSubmittingEditTag: false,
       isSubmittingDeleteTag: false,
-      importTagGroups: [],
-      tagGroupExpanded: {},
+      importTagGroups: [] as any[],
+      tagGroupExpanded: {} as Record<number, boolean>,
       isLoadingImport: false,
-      isImporting: {},
+      isImporting: {} as Record<number, boolean>,
       importTagFields: [
         { key: 'tag', label: 'Tag' },
         { key: 'action', label: '' },
@@ -273,30 +274,18 @@ export default {
   },
   validations: {
     newTagForm: {
-      tag: {
-        required,
-        unique: isTagNameUnique,
-      },
-      colour: {
-        required,
-        validHex: isValidHexColor,
-      },
+      tag: { required, unique: isTagNameUnique },
+      colour: { required, validHex: isValidHexColor },
     },
     editTagForm: {
-      tag: {
-        required,
-        unique: isTagNameUnique,
-      },
-      colour: {
-        required,
-        validHex: isValidHexColor,
-      },
+      tag: { required, unique: isTagNameUnique },
+      colour: { required, validHex: isValidHexColor },
     },
   },
   computed: {
     ...mapGetters(['SESSION_TAGS', 'SHOW_SESSIONS_LIST', 'IS_SHOW_EDITOR']),
-    existingTagNames() {
-      return new Set((this.SESSION_TAGS || []).map((t) => t.tag.toLowerCase()));
+    existingTagNames(): Set<string> {
+      return new Set(((this as any).SESSION_TAGS || []).map((t: any) => t.tag.toLowerCase()));
     },
   },
   methods: {
@@ -307,30 +296,27 @@ export default {
       'GET_IMPORTABLE_SESSION_TAGS',
     ]),
     contrastColor,
-    getSessionCountForTag(tagId) {
-      if (!this.SHOW_SESSIONS_LIST || !Array.isArray(this.SHOW_SESSIONS_LIST)) {
+    getSessionCountForTag(tagId: number): number {
+      if (!(this as any).SHOW_SESSIONS_LIST || !Array.isArray((this as any).SHOW_SESSIONS_LIST)) {
         return 0;
       }
-      return this.SHOW_SESSIONS_LIST.filter((session) => {
+      return (this as any).SHOW_SESSIONS_LIST.filter((session: any) => {
         if (!session.tags || !Array.isArray(session.tags)) {
           return false;
         }
-        return session.tags.some((tag) => tag.id === tagId);
+        return session.tags.some((tag: any) => tag.id === tagId);
       }).length;
     },
-    resetNewTagForm() {
-      this.newTagForm = {
-        tag: '',
-        colour: '#3498DB',
-      };
+    resetNewTagForm(): void {
+      this.newTagForm = { tag: '', colour: '#3498DB' };
       this.isSubmittingNewTag = false;
       this.$nextTick(() => {
-        this.$v.$reset();
+        (this as any).$v.$reset();
       });
     },
-    async onSubmitNewTag(event) {
-      this.$v.newTagForm.$touch();
-      if (this.$v.newTagForm.$anyError) {
+    async onSubmitNewTag(event: Event): Promise<void> {
+      (this as any).$v.newTagForm.$touch();
+      if ((this as any).$v.newTagForm.$anyError) {
         event.preventDefault();
         return;
       }
@@ -340,8 +326,8 @@ export default {
       }
       this.isSubmittingNewTag = true;
       try {
-        await this.ADD_SESSION_TAG(this.newTagForm);
-        this.$bvModal.hide('new-tag');
+        await (this as any).ADD_SESSION_TAG(this.newTagForm);
+        (this as any).$bvModal.hide('new-tag');
       } catch (error) {
         log.error('Error adding session tag:', error);
         event.preventDefault();
@@ -349,32 +335,28 @@ export default {
         this.isSubmittingNewTag = false;
       }
     },
-    validateNewTag(name) {
-      const { $dirty, $error } = this.$v.newTagForm[name];
+    validateNewTag(name: string): boolean | null {
+      const { $dirty, $error } = (this as any).$v.newTagForm[name];
       return $dirty ? !$error : null;
     },
-    openEditTagForm(data) {
+    openEditTagForm(data: any): void {
       if (data != null && data.item != null) {
         this.editTagForm.id = data.item.id;
         this.editTagForm.tag = data.item.tag;
         this.editTagForm.colour = data.item.colour;
-        this.$bvModal.show('edit-tag');
+        (this as any).$bvModal.show('edit-tag');
       }
     },
-    resetEditTagForm() {
-      this.editTagForm = {
-        id: null,
-        tag: '',
-        colour: '',
-      };
+    resetEditTagForm(): void {
+      this.editTagForm = { id: null, tag: '', colour: '' };
       this.isSubmittingEditTag = false;
       this.$nextTick(() => {
-        this.$v.$reset();
+        (this as any).$v.$reset();
       });
     },
-    async onSubmitEditTag(event) {
-      this.$v.editTagForm.$touch();
-      if (this.$v.editTagForm.$anyError) {
+    async onSubmitEditTag(event: Event): Promise<void> {
+      (this as any).$v.editTagForm.$touch();
+      if ((this as any).$v.editTagForm.$anyError) {
         event.preventDefault();
         return;
       }
@@ -384,8 +366,8 @@ export default {
       }
       this.isSubmittingEditTag = true;
       try {
-        await this.UPDATE_SESSION_TAG(this.editTagForm);
-        this.$bvModal.hide('edit-tag');
+        await (this as any).UPDATE_SESSION_TAG(this.editTagForm);
+        (this as any).$bvModal.hide('edit-tag');
       } catch (error) {
         log.error('Error updating session tag:', error);
         event.preventDefault();
@@ -393,17 +375,17 @@ export default {
         this.isSubmittingEditTag = false;
       }
     },
-    validateEditTag(name) {
-      const { $dirty, $error } = this.$v.editTagForm[name];
+    validateEditTag(name: string): boolean | null {
+      const { $dirty, $error } = (this as any).$v.editTagForm[name];
       return $dirty ? !$error : null;
     },
-    async openImportModal() {
-      this.$bvModal.show('import-tag-modal');
+    async openImportModal(): Promise<void> {
+      (this as any).$bvModal.show('import-tag-modal');
       this.isLoadingImport = true;
       try {
-        const data = await this.GET_IMPORTABLE_SESSION_TAGS();
+        const data = await (this as any).GET_IMPORTABLE_SESSION_TAGS();
         this.importTagGroups = data.tag_groups;
-        data.tag_groups.forEach((show) => {
+        data.tag_groups.forEach((show: any) => {
           this.$set(this.tagGroupExpanded, show.id, true);
         });
       } catch (e) {
@@ -412,27 +394,27 @@ export default {
         this.isLoadingImport = false;
       }
     },
-    toggleImportShow(showId) {
+    toggleImportShow(showId: number): void {
       this.$set(this.tagGroupExpanded, showId, !this.tagGroupExpanded[showId]);
     },
-    tagAlreadyExists(tag) {
+    tagAlreadyExists(tag: any): boolean {
       return this.existingTagNames.has(tag.tag.toLowerCase());
     },
-    async importTag(tag) {
+    async importTag(tag: any): Promise<void> {
       this.$set(this.isImporting, tag.id, true);
       try {
-        await this.ADD_SESSION_TAG({ tag: tag.tag, colour: tag.colour });
+        await (this as any).ADD_SESSION_TAG({ tag: tag.tag, colour: tag.colour });
       } finally {
         this.$set(this.isImporting, tag.id, false);
       }
     },
-    resetImportState() {
+    resetImportState(): void {
       this.importTagGroups = [];
       this.tagGroupExpanded = {};
       this.isLoadingImport = false;
       this.isImporting = {};
     },
-    async deleteTag(data) {
+    async deleteTag(data: any): Promise<void> {
       if (this.isSubmittingDeleteTag) {
         return;
       }
@@ -441,11 +423,11 @@ export default {
       if (sessionCount > 0) {
         msg += ` This tag is currently applied to ${sessionCount} session(s).`;
       }
-      const action = await this.$bvModal.msgBoxConfirm(msg, {});
+      const action = await (this as any).$bvModal.msgBoxConfirm(msg, {});
       if (action === true) {
         this.isSubmittingDeleteTag = true;
         try {
-          await this.DELETE_SESSION_TAG(data.item.id);
+          await (this as any).DELETE_SESSION_TAG(data.item.id);
         } catch (error) {
           log.error('Error deleting session tag:', error);
         } finally {
@@ -454,7 +436,7 @@ export default {
       }
     },
   },
-};
+});
 </script>
 
 <style scoped>
diff --git a/client/src/vue_components/show/config/stage/CrewList.vue b/client/src/vue_components/show/config/stage/CrewList.vue
index 782cc523..9a12467d 100644
--- a/client/src/vue_components/show/config/stage/CrewList.vue
+++ b/client/src/vue_components/show/config/stage/CrewList.vue
@@ -118,12 +118,13 @@
   </span>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { required } from 'vuelidate/lib/validators';
 import { mapGetters, mapActions } from 'vuex';
 import formValidationMixin from '@/mixins/formValidationMixin';
 
-export default {
+export default defineComponent({
   name: 'CrewList',
   mixins: [formValidationMixin],
   data() {
@@ -136,8 +137,8 @@ export default {
       rowsPerPage: 15,
       currentPage: 1,
       editFormState: {
-        id: null,
-        showID: null,
+        id: null as number | null,
+        showID: null as number | null,
         firstName: '',
         lastName: '',
       },
@@ -164,59 +165,59 @@ export default {
   computed: {
     ...mapGetters(['CREW_LIST', 'IS_SHOW_EDITOR']),
   },
-  async mounted() {
-    await this.GET_CREW_LIST();
+  async mounted(): Promise<void> {
+    await (this as any).GET_CREW_LIST();
   },
   methods: {
-    resetNewForm() {
-      this.resetForm('newFormState', {
+    resetNewForm(): void {
+      (this as any).resetForm('newFormState', {
         firstName: '',
         lastName: '',
       });
     },
-    async onSubmitNew(event) {
-      this.$v.newFormState.$touch();
-      if (this.$v.newFormState.$anyError) {
+    async onSubmitNew(event: Event): Promise<void> {
+      (this as any).$v.newFormState.$touch();
+      if ((this as any).$v.newFormState.$anyError) {
         event.preventDefault();
       } else {
-        await this.ADD_CREW_MEMBER(this.newFormState);
+        await (this as any).ADD_CREW_MEMBER(this.newFormState);
         this.resetNewForm();
       }
     },
-    openEditForm(crewMember) {
+    openEditForm(crewMember: any): void {
       if (crewMember != null) {
         this.editFormState.id = crewMember.item.id;
         this.editFormState.showID = crewMember.item.show_id;
         this.editFormState.firstName = crewMember.item.first_name;
         this.editFormState.lastName = crewMember.item.last_name;
-        this.$bvModal.show('edit-crew');
+        (this as any).$bvModal.show('edit-crew');
       }
     },
-    resetEditForm() {
-      this.resetForm('editFormState', {
+    resetEditForm(): void {
+      (this as any).resetForm('editFormState', {
         id: null,
         showID: null,
         firstName: '',
         lastName: '',
       });
     },
-    async onSubmitEdit(event) {
-      this.$v.editFormState.$touch();
-      if (this.$v.editFormState.$anyError) {
+    async onSubmitEdit(event: Event): Promise<void> {
+      (this as any).$v.editFormState.$touch();
+      if ((this as any).$v.editFormState.$anyError) {
         event.preventDefault();
       } else {
-        await this.UPDATE_CREW_MEMBER(this.editFormState);
+        await (this as any).UPDATE_CREW_MEMBER(this.editFormState);
         this.resetEditForm();
       }
     },
-    async deleteCrewMember(crewMember) {
+    async deleteCrewMember(crewMember: any): Promise<void> {
       const msg = `Are you sure you want to delete ${crewMember.item.first_name} ${crewMember.item.last_name}?`;
-      const action = await this.$bvModal.msgBoxConfirm(msg, {});
+      const action = await (this as any).$bvModal.msgBoxConfirm(msg, {});
       if (action === true) {
-        await this.DELETE_CREW_MEMBER(crewMember.item.id);
+        await (this as any).DELETE_CREW_MEMBER(crewMember.item.id);
       }
     },
     ...mapActions(['GET_CREW_LIST', 'ADD_CREW_MEMBER', 'DELETE_CREW_MEMBER', 'UPDATE_CREW_MEMBER']),
   },
-};
+});
 </script>
diff --git a/client/src/vue_components/show/config/stage/CrewTimeline.vue b/client/src/vue_components/show/config/stage/CrewTimeline.vue
index 0cc795ba..67ce1679 100644
--- a/client/src/vue_components/show/config/stage/CrewTimeline.vue
+++ b/client/src/vue_components/show/config/stage/CrewTimeline.vue
@@ -115,11 +115,12 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { mapGetters, mapActions } from 'vuex';
 import timelineMixin from '@/mixins/timelineMixin';
 
-export default {
+export default defineComponent({
   name: 'CrewTimeline',
   mixins: [timelineMixin],
   data() {
@@ -137,38 +138,40 @@ export default {
       'PROP_BY_ID',
       'SCENERY_BY_ID',
     ]),
-    hasData() {
-      return this.scenes.length > 0 && this.rows.length > 0;
+    hasData(): boolean {
+      return (this as any).scenes.length > 0 && (this as any).rows.length > 0;
     },
-    scenes() {
-      return this.ORDERED_SCENES || [];
+    scenes(): any[] {
+      return (this as any).ORDERED_SCENES || [];
     },
-    sceneIndexMap() {
-      const map = {};
-      this.scenes.forEach((scene, index) => {
+    sceneIndexMap(): Record<number, number> {
+      const map: Record<number, number> = {};
+      (this as any).scenes.forEach((scene: any, index: number) => {
         map[scene.id] = index;
       });
       return map;
     },
-    rows() {
-      return this.CREW_LIST.filter(
-        (crew) => (this.CREW_ASSIGNMENTS_BY_CREW[crew.id] || []).length > 0
-      ).map((crew) => ({
-        id: `crew-${crew.id}`,
-        crewId: crew.id,
-        name: crew.last_name ? `${crew.first_name} ${crew.last_name}` : crew.first_name,
-      }));
+    rows(): any[] {
+      const crewList = (this as any).CREW_LIST as any[];
+      const assignmentsByCrew = (this as any).CREW_ASSIGNMENTS_BY_CREW as Record<number, any[]>;
+      return crewList
+        .filter((crew: any) => (assignmentsByCrew[crew.id] || []).length > 0)
+        .map((crew: any) => ({
+          id: `crew-${crew.id}`,
+          crewId: crew.id,
+          name: crew.last_name ? `${crew.first_name} ${crew.last_name}` : crew.first_name,
+        }));
     },
-    conflicts() {
-      const conflictMap = {};
+    conflicts(): Record<string, string> {
+      const conflictMap: Record<string, string> = {};
+      const assignmentsByCrew = (this as any).CREW_ASSIGNMENTS_BY_CREW as Record<number, any[]>;
 
-      this.rows.forEach((row) => {
-        const assignments = this.CREW_ASSIGNMENTS_BY_CREW[row.crewId] || [];
+      (this as any).rows.forEach((row: any) => {
+        const assignments = assignmentsByCrew[row.crewId] || [];
 
-        // Group assignments by scene, tracking distinct items per scene
-        const byScene = {};
-        const itemsByScene = {};
-        assignments.forEach((a) => {
+        const byScene: Record<string, any[]> = {};
+        const itemsByScene: Record<string, Set<string>> = {};
+        assignments.forEach((a: any) => {
           if (!byScene[a.scene_id]) {
             byScene[a.scene_id] = [];
             itemsByScene[a.scene_id] = new Set();
@@ -180,24 +183,21 @@ export default {
 
         const assignedSceneIds = Object.keys(byScene).map(Number);
 
-        // Hard conflicts: 2+ distinct items in the same scene
         assignedSceneIds.forEach((sceneId) => {
           if (itemsByScene[sceneId].size >= 2) {
             conflictMap[`${row.crewId}-${sceneId}`] = 'hard';
           }
         });
 
-        // Soft conflicts: adjacent scenes (same act) with different item sets
         assignedSceneIds.forEach((sceneId) => {
-          const sceneIndex = this.sceneIndexMap[sceneId];
+          const sceneIndex = (this as any).sceneIndexMap[sceneId];
           if (sceneIndex == null) return;
-          const scene = this.scenes[sceneIndex];
+          const scene = (this as any).scenes[sceneIndex];
 
           const nextIndex = sceneIndex + 1;
-          if (nextIndex < this.scenes.length) {
-            const nextScene = this.scenes[nextIndex];
+          if (nextIndex < (this as any).scenes.length) {
+            const nextScene = (this as any).scenes[nextIndex];
             if (nextScene.act === scene.act && assignedSceneIds.includes(nextScene.id)) {
-              // Compare item sets — only flag if they differ
               const itemsA = itemsByScene[sceneId];
               const itemsB = itemsByScene[nextScene.id];
               const sameItems =
@@ -206,7 +206,6 @@ export default {
               if (!sameItems) {
                 const key1 = `${row.crewId}-${sceneId}`;
                 const key2 = `${row.crewId}-${nextScene.id}`;
-                // Hard takes precedence
                 if (!conflictMap[key1]) conflictMap[key1] = 'soft';
                 if (!conflictMap[key2]) conflictMap[key2] = 'soft';
               }
@@ -217,24 +216,24 @@ export default {
 
       return conflictMap;
     },
-    allocationBars() {
-      const bars = [];
-      this.rows.forEach((row, rowIndex) => {
+    allocationBars(): any[] {
+      const bars: any[] = [];
+      (this as any).rows.forEach((row: any, rowIndex: number) => {
         this.generateBarsForCrew(row.crewId, rowIndex, bars);
       });
       return bars;
     },
   },
-  async mounted() {
+  async mounted(): Promise<void> {
     await Promise.all([
-      this.GET_ACT_LIST(),
-      this.GET_SCENE_LIST(),
-      this.GET_CREW_LIST(),
-      this.GET_CREW_ASSIGNMENTS(),
-      this.GET_PROPS_LIST(),
-      this.GET_SCENERY_LIST(),
-      this.GET_PROPS_ALLOCATIONS(),
-      this.GET_SCENERY_ALLOCATIONS(),
+      (this as any).GET_ACT_LIST(),
+      (this as any).GET_SCENE_LIST(),
+      (this as any).GET_CREW_LIST(),
+      (this as any).GET_CREW_ASSIGNMENTS(),
+      (this as any).GET_PROPS_LIST(),
+      (this as any).GET_SCENERY_LIST(),
+      (this as any).GET_PROPS_ALLOCATIONS(),
+      (this as any).GET_SCENERY_ALLOCATIONS(),
     ]);
     this.dataLoaded = true;
   },
@@ -249,50 +248,48 @@ export default {
       'GET_PROPS_ALLOCATIONS',
       'GET_SCENERY_ALLOCATIONS',
     ]),
-    getItemName(assignment) {
+    getItemName(assignment: any): string {
       if (assignment.prop_id != null) {
-        const prop = this.PROP_BY_ID(assignment.prop_id);
+        const prop = (this as any).PROP_BY_ID(assignment.prop_id);
         return prop?.name || `Prop ${assignment.prop_id}`;
       }
-      const scenery = this.SCENERY_BY_ID(assignment.scenery_id);
+      const scenery = (this as any).SCENERY_BY_ID(assignment.scenery_id);
       return scenery?.name || `Scenery ${assignment.scenery_id}`;
     },
-    getItemId(assignment) {
+    getItemId(assignment: any): number {
       return assignment.prop_id != null ? assignment.prop_id : assignment.scenery_id;
     },
-    getItemType(assignment) {
+    getItemType(assignment: any): string {
       return assignment.prop_id != null ? 'prop' : 'scenery';
     },
-    generateBarsForCrew(crewId, rowIndex, bars) {
-      const assignments = this.CREW_ASSIGNMENTS_BY_CREW[crewId] || [];
+    generateBarsForCrew(crewId: number, rowIndex: number, bars: any[]): void {
+      const assignmentsByCrew = (this as any).CREW_ASSIGNMENTS_BY_CREW as Record<number, any[]>;
+      const assignments = assignmentsByCrew[crewId] || [];
 
-      // Group by scene, then by item within each scene
-      const byScene = {};
-      assignments.forEach((a) => {
+      const byScene: Record<string, Record<string, any[]>> = {};
+      assignments.forEach((a: any) => {
         if (!byScene[a.scene_id]) byScene[a.scene_id] = {};
         const itemKey = a.prop_id != null ? `prop-${a.prop_id}` : `scenery-${a.scenery_id}`;
         if (!byScene[a.scene_id][itemKey]) byScene[a.scene_id][itemKey] = [];
         byScene[a.scene_id][itemKey].push(a);
       });
 
-      const availableHeight = this.rowHeight - 2 * this.barPadding;
+      const availableHeight = (this as any).rowHeight - 2 * (this as any).barPadding;
 
       Object.entries(byScene).forEach(([sceneId, itemGroups]) => {
-        // Bar height based on distinct items in THIS scene
         const itemCount = Object.keys(itemGroups).length;
         const barHeight = availableHeight / itemCount;
-        const sceneIndex = this.sceneIndexMap[sceneId];
+        const sceneIndex = (this as any).sceneIndexMap[sceneId];
         if (sceneIndex == null) return;
 
-        const scene = this.scenes[sceneIndex];
+        const scene = (this as any).scenes[sceneIndex];
         const conflictKey = `${crewId}-${sceneId}`;
-        const conflictType = this.conflicts[conflictKey];
+        const conflictType = (this as any).conflicts[conflictKey];
 
         let cssClass = '';
         if (conflictType === 'hard') cssClass = 'conflict-hard';
         else if (conflictType === 'soft') cssClass = 'conflict-soft';
 
-        // Sort item groups by name for stable ordering
         const sortedKeys = Object.keys(itemGroups).sort((a, b) => {
           const nameA = this.getItemName(itemGroups[a][0]);
           const nameB = this.getItemName(itemGroups[b][0]);
@@ -303,10 +300,11 @@ export default {
           const group = itemGroups[itemKey];
           const representative = group[0];
           const itemName = this.getItemName(representative);
-          const hasSet = group.some((a) => a.assignment_type === 'set');
-          const hasStrike = group.some((a) => a.assignment_type === 'strike');
+          const hasSet = group.some((a: any) => a.assignment_type === 'set');
+          const hasStrike = group.some((a: any) => a.assignment_type === 'strike');
 
-          let label, tooltip;
+          let label: string;
+          let tooltip: string;
           if (hasSet && hasStrike) {
             label = `▲ ${itemName} ▼`;
             tooltip = `SET & STRIKE: ${itemName} (${scene.name})`;
@@ -320,11 +318,11 @@ export default {
 
           bars.push({
             id: `crew-${crewId}-scene-${sceneId}-${stackIndex}`,
-            x: this.getSceneX(sceneIndex),
-            y: this.getRowY(rowIndex) + this.barPadding + stackIndex * barHeight,
-            width: this.sceneWidth,
+            x: (this as any).getSceneX(sceneIndex),
+            y: (this as any).getRowY(rowIndex) + (this as any).barPadding + stackIndex * barHeight,
+            width: (this as any).sceneWidth,
             height: barHeight,
-            color: this.getColorForEntity(
+            color: (this as any).getColorForEntity(
               this.getItemId(representative),
               this.getItemType(representative)
             ),
@@ -335,11 +333,11 @@ export default {
         });
       });
     },
-    handleExport() {
-      this.exportTimeline('crew-timeline', 'Crew');
+    handleExport(): void {
+      (this as any).exportTimeline('crew-timeline', 'Crew');
     },
   },
-};
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/client/src/vue_components/show/config/stage/PropsList.vue b/client/src/vue_components/show/config/stage/PropsList.vue
index 0f46a5a9..f44ed9f2 100644
--- a/client/src/vue_components/show/config/stage/PropsList.vue
+++ b/client/src/vue_components/show/config/stage/PropsList.vue
@@ -268,13 +268,14 @@
   </b-container>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { required } from 'vuelidate/lib/validators';
 import { mapGetters, mapActions } from 'vuex';
 import { notNull } from '@/js/customValidators';
 import formValidationMixin from '@/mixins/formValidationMixin';
 
-export default {
+export default defineComponent({
   name: 'PropsList',
   mixins: [formValidationMixin],
   data() {
@@ -293,21 +294,21 @@ export default {
       newPropFormState: {
         name: '',
         description: '',
-        prop_type_id: null,
+        prop_type_id: null as number | null,
       },
       rowsPerPage: 15,
       currentPropPage: 1,
       currentPropTypePage: 1,
       editPropTypeFormState: {
-        id: null,
+        id: null as number | null,
         name: '',
         description: '',
       },
       editPropFormState: {
-        id: null,
+        id: null as number | null,
         name: '',
         description: '',
-        prop_type_id: null,
+        prop_type_id: null as number | null,
       },
     };
   },
@@ -346,133 +347,136 @@ export default {
     },
   },
   computed: {
-    propTypeOptions() {
+    propTypeOptions(): any[] {
       return [
         { value: null, text: 'Please select an option', disabled: true },
-        ...this.PROP_TYPES.map((propType) => ({ value: propType.id, text: propType.name })),
+        ...(this as any).PROP_TYPES.map((propType: any) => ({
+          value: propType.id,
+          text: propType.name,
+        })),
       ];
     },
     ...mapGetters(['PROPS_LIST', 'PROP_TYPES', 'IS_SHOW_EDITOR', 'PROP_TYPE_BY_ID']),
   },
-  async mounted() {
-    await Promise.all([this.GET_PROP_TYPES(), this.GET_PROPS_LIST()]);
+  async mounted(): Promise<void> {
+    await Promise.all([(this as any).GET_PROP_TYPES(), (this as any).GET_PROPS_LIST()]);
   },
   methods: {
-    resetNewPropTypeForm() {
-      this.resetForm('newPropTypeFormState', {
+    resetNewPropTypeForm(): void {
+      (this as any).resetForm('newPropTypeFormState', {
         name: '',
         description: '',
       });
     },
-    resetNewPropForm() {
-      this.resetForm('newPropFormState', {
+    resetNewPropForm(): void {
+      (this as any).resetForm('newPropFormState', {
         name: '',
         description: '',
         prop_type: null,
       });
     },
-    async onSubmitNewPropType(event) {
-      this.$v.newPropTypeFormState.$touch();
-      if (this.$v.newPropTypeFormState.$anyError) {
+    async onSubmitNewPropType(event: Event): Promise<void> {
+      (this as any).$v.newPropTypeFormState.$touch();
+      if ((this as any).$v.newPropTypeFormState.$anyError) {
         event.preventDefault();
       } else {
-        await this.ADD_PROP_TYPE(this.newPropTypeFormState);
+        await (this as any).ADD_PROP_TYPE(this.newPropTypeFormState);
         this.resetNewPropTypeForm();
       }
     },
-    async onSubmitNewProp(event) {
-      this.$v.newPropFormState.$touch();
-      if (this.$v.newPropFormState.$anyError) {
+    async onSubmitNewProp(event: Event): Promise<void> {
+      (this as any).$v.newPropFormState.$touch();
+      if ((this as any).$v.newPropFormState.$anyError) {
         event.preventDefault();
       } else {
-        await this.ADD_PROP(this.newPropFormState);
+        await (this as any).ADD_PROP(this.newPropFormState);
         this.resetNewPropForm();
       }
     },
-    validateNewPropTypeState(name) {
-      const { $dirty, $error } = this.$v.newPropTypeFormState[name];
+    validateNewPropTypeState(name: string): boolean | null {
+      const { $dirty, $error } = (this as any).$v.newPropTypeFormState[name];
       return $dirty ? !$error : null;
     },
-    validateNewPropState(name) {
-      const { $dirty, $error } = this.$v.newPropFormState[name];
+    validateNewPropState(name: string): boolean | null {
+      const { $dirty, $error } = (this as any).$v.newPropFormState[name];
       return $dirty ? !$error : null;
     },
-    openEditPropTypeForm(propType) {
+    openEditPropTypeForm(propType: any): void {
       if (propType != null) {
         this.editPropTypeFormState.id = propType.item.id;
         this.editPropTypeFormState.name = propType.item.name;
         this.editPropTypeFormState.description = propType.item.description;
-        this.$bvModal.show('edit-prop-type');
+        (this as any).$bvModal.show('edit-prop-type');
       }
     },
-    openEditPropForm(propsMember) {
+    openEditPropForm(propsMember: any): void {
       if (propsMember != null) {
         this.editPropFormState.id = propsMember.item.id;
         this.editPropFormState.name = propsMember.item.name;
         this.editPropFormState.description = propsMember.item.description;
         this.editPropFormState.prop_type_id = propsMember.item.prop_type_id;
-        this.$bvModal.show('edit-props');
+        (this as any).$bvModal.show('edit-props');
       }
     },
-    resetEditPropTypeForm() {
-      this.resetForm('editPropTypeFormState', {
+    resetEditPropTypeForm(): void {
+      (this as any).resetForm('editPropTypeFormState', {
         id: null,
         name: '',
         description: '',
       });
     },
-    resetEditPropForm() {
-      this.resetForm('editPropFormState', {
+    resetEditPropForm(): void {
+      (this as any).resetForm('editPropFormState', {
         id: null,
         name: '',
         description: '',
         prop_type_id: null,
       });
     },
-    async onSubmitEditPropType(event) {
-      this.$v.editPropTypeFormState.$touch();
-      if (this.$v.editPropTypeFormState.$anyError) {
+    async onSubmitEditPropType(event: Event): Promise<void> {
+      (this as any).$v.editPropTypeFormState.$touch();
+      if ((this as any).$v.editPropTypeFormState.$anyError) {
         event.preventDefault();
       } else {
-        await this.UPDATE_PROP_TYPE(this.editPropTypeFormState);
+        await (this as any).UPDATE_PROP_TYPE(this.editPropTypeFormState);
         this.resetEditPropTypeForm();
       }
     },
-    async onSubmitEditProp(event) {
-      this.$v.editPropFormState.$touch();
-      if (this.$v.editPropFormState.$anyError) {
+    async onSubmitEditProp(event: Event): Promise<void> {
+      (this as any).$v.editPropFormState.$touch();
+      if ((this as any).$v.editPropFormState.$anyError) {
         event.preventDefault();
       } else {
-        await this.UPDATE_PROP(this.editPropFormState);
+        await (this as any).UPDATE_PROP(this.editPropFormState);
         this.resetEditPropForm();
       }
     },
-    validateEditPropTypeState(name) {
-      const { $dirty, $error } = this.$v.editPropTypeFormState[name];
+    validateEditPropTypeState(name: string): boolean | null {
+      const { $dirty, $error } = (this as any).$v.editPropTypeFormState[name];
       return $dirty ? !$error : null;
     },
-    validateEditPropState(name) {
-      const { $dirty, $error } = this.$v.editPropFormState[name];
+    validateEditPropState(name: string): boolean | null {
+      const { $dirty, $error } = (this as any).$v.editPropFormState[name];
       return $dirty ? !$error : null;
     },
-    async deletePropType(propType) {
-      const propsDeleted = this.PROPS_LIST.filter(
-        (prop) => prop.prop_type_id === propType.item.id
+    async deletePropType(propType: any): Promise<void> {
+      const propsDeleted = (this as any).PROPS_LIST.filter(
+        (prop: any) => prop.prop_type_id === propType.item.id
       ).length;
       let msg = `Are you sure you want to delete ${propType.item.name}?`;
       if (propsDeleted > 0) {
         msg = `${msg} This will also delete ${propsDeleted} props.`;
       }
-      const action = await this.$bvModal.msgBoxConfirm(msg, {});
+      const action = await (this as any).$bvModal.msgBoxConfirm(msg, {});
       if (action === true) {
-        await this.DELETE_PROP_TYPE(propType.item.id);
+        await (this as any).DELETE_PROP_TYPE(propType.item.id);
       }
     },
-    async deletePropsItem(propsMember) {
+    async deletePropsItem(propsMember: any): Promise<void> {
       const msg = `Are you sure you want to delete ${propsMember.item.name}?`;
-      const action = await this.$bvModal.msgBoxConfirm(msg, {});
+      const action = await (this as any).$bvModal.msgBoxConfirm(msg, {});
       if (action === true) {
-        await this.DELETE_PROP(propsMember.item.id);
+        await (this as any).DELETE_PROP(propsMember.item.id);
       }
     },
     ...mapActions([
@@ -486,5 +490,5 @@ export default {
       'UPDATE_PROP',
     ]),
   },
-};
+});
 </script>
diff --git a/client/src/vue_components/show/config/stage/SceneryList.vue b/client/src/vue_components/show/config/stage/SceneryList.vue
index a2aa15bd..e559479b 100644
--- a/client/src/vue_components/show/config/stage/SceneryList.vue
+++ b/client/src/vue_components/show/config/stage/SceneryList.vue
@@ -276,13 +276,14 @@
   </b-container>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { required } from 'vuelidate/lib/validators';
 import { mapGetters, mapActions } from 'vuex';
 import { notNull } from '@/js/customValidators';
 import formValidationMixin from '@/mixins/formValidationMixin';
 
-export default {
+export default defineComponent({
   name: 'SceneryList',
   mixins: [formValidationMixin],
   data() {
@@ -301,21 +302,21 @@ export default {
       newSceneryFormState: {
         name: '',
         description: '',
-        scenery_type_id: null,
+        scenery_type_id: null as number | null,
       },
       rowsPerPage: 15,
       currentSceneryPage: 1,
       currentSceneryTypesPage: 1,
       editSceneryTypeFormState: {
-        id: null,
+        id: null as number | null,
         name: '',
         description: '',
       },
       editSceneryFormState: {
-        id: null,
+        id: null as number | null,
         name: '',
         description: '',
-        scenery_type_id: null,
+        scenery_type_id: null as number | null,
       },
     };
   },
@@ -354,10 +355,10 @@ export default {
     },
   },
   computed: {
-    sceneryTypeOptions() {
+    sceneryTypeOptions(): any[] {
       return [
         { value: null, text: 'Please select an option', disabled: true },
-        ...this.SCENERY_TYPES.map((sceneryType) => ({
+        ...(this as any).SCENERY_TYPES.map((sceneryType: any) => ({
           value: sceneryType.id,
           text: sceneryType.name,
         })),
@@ -365,122 +366,122 @@ export default {
     },
     ...mapGetters(['SCENERY_LIST', 'SCENERY_TYPES', 'IS_SHOW_EDITOR', 'SCENERY_TYPE_BY_ID']),
   },
-  async mounted() {
-    await Promise.all([this.GET_SCENERY_TYPES(), this.GET_SCENERY_LIST()]);
+  async mounted(): Promise<void> {
+    await Promise.all([(this as any).GET_SCENERY_TYPES(), (this as any).GET_SCENERY_LIST()]);
   },
   methods: {
-    resetNewSceneryTypeForm() {
-      this.resetForm('newSceneryTypeFormState', {
+    resetNewSceneryTypeForm(): void {
+      (this as any).resetForm('newSceneryTypeFormState', {
         name: '',
         description: '',
       });
     },
-    resetNewSceneryForm() {
-      this.resetForm('newSceneryFormState', {
+    resetNewSceneryForm(): void {
+      (this as any).resetForm('newSceneryFormState', {
         name: '',
         description: '',
       });
     },
-    async onSubmitNewSceneryType(event) {
-      this.$v.newSceneryTypeFormState.$touch();
-      if (this.$v.newSceneryTypeFormState.$anyError) {
+    async onSubmitNewSceneryType(event: Event): Promise<void> {
+      (this as any).$v.newSceneryTypeFormState.$touch();
+      if ((this as any).$v.newSceneryTypeFormState.$anyError) {
         event.preventDefault();
       } else {
-        await this.ADD_SCENERY_TYPE(this.newSceneryTypeFormState);
+        await (this as any).ADD_SCENERY_TYPE(this.newSceneryTypeFormState);
         this.resetNewSceneryTypeForm();
       }
     },
-    async onSubmitNewScenery(event) {
-      this.$v.newSceneryFormState.$touch();
-      if (this.$v.newSceneryFormState.$anyError) {
+    async onSubmitNewScenery(event: Event): Promise<void> {
+      (this as any).$v.newSceneryFormState.$touch();
+      if ((this as any).$v.newSceneryFormState.$anyError) {
         event.preventDefault();
       } else {
-        await this.ADD_SCENERY(this.newSceneryFormState);
+        await (this as any).ADD_SCENERY(this.newSceneryFormState);
         this.resetNewSceneryForm();
       }
     },
-    validateNewSceneryTypeState(name) {
-      const { $dirty, $error } = this.$v.newSceneryTypeFormState[name];
+    validateNewSceneryTypeState(name: string): boolean | null {
+      const { $dirty, $error } = (this as any).$v.newSceneryTypeFormState[name];
       return $dirty ? !$error : null;
     },
-    validateNewSceneryState(name) {
-      const { $dirty, $error } = this.$v.newSceneryFormState[name];
+    validateNewSceneryState(name: string): boolean | null {
+      const { $dirty, $error } = (this as any).$v.newSceneryFormState[name];
       return $dirty ? !$error : null;
     },
-    openEditSceneryTypeForm(sceneryType) {
+    openEditSceneryTypeForm(sceneryType: any): void {
       if (sceneryType != null) {
         this.editSceneryTypeFormState.id = sceneryType.item.id;
         this.editSceneryTypeFormState.name = sceneryType.item.name;
         this.editSceneryTypeFormState.description = sceneryType.item.description;
-        this.$bvModal.show('edit-scenery-type');
+        (this as any).$bvModal.show('edit-scenery-type');
       }
     },
-    openEditSceneryForm(sceneryMember) {
+    openEditSceneryForm(sceneryMember: any): void {
       if (sceneryMember != null) {
         this.editSceneryFormState.id = sceneryMember.item.id;
         this.editSceneryFormState.name = sceneryMember.item.name;
         this.editSceneryFormState.description = sceneryMember.item.description;
-        this.$bvModal.show('edit-scenery');
+        (this as any).$bvModal.show('edit-scenery');
       }
     },
-    resetEditSceneryTypeForm() {
-      this.resetForm('editSceneryTypeFormState', {
+    resetEditSceneryTypeForm(): void {
+      (this as any).resetForm('editSceneryTypeFormState', {
         id: null,
         name: '',
         description: '',
       });
     },
-    resetEditSceneryForm() {
-      this.resetForm('editSceneryFormState', {
+    resetEditSceneryForm(): void {
+      (this as any).resetForm('editSceneryFormState', {
         id: null,
         name: '',
         description: '',
       });
     },
-    async onSubmitEditSceneryType(event) {
-      this.$v.editSceneryTypeFormState.$touch();
-      if (this.$v.editSceneryTypeFormState.$anyError) {
+    async onSubmitEditSceneryType(event: Event): Promise<void> {
+      (this as any).$v.editSceneryTypeFormState.$touch();
+      if ((this as any).$v.editSceneryTypeFormState.$anyError) {
         event.preventDefault();
       } else {
-        await this.UPDATE_SCENERY_TYPE(this.editSceneryTypeFormState);
+        await (this as any).UPDATE_SCENERY_TYPE(this.editSceneryTypeFormState);
         this.resetEditSceneryTypeForm();
       }
     },
-    async onSubmitEditScenery(event) {
-      this.$v.editSceneryFormState.$touch();
-      if (this.$v.editSceneryFormState.$anyError) {
+    async onSubmitEditScenery(event: Event): Promise<void> {
+      (this as any).$v.editSceneryFormState.$touch();
+      if ((this as any).$v.editSceneryFormState.$anyError) {
         event.preventDefault();
       } else {
-        await this.UPDATE_SCENERY(this.editSceneryFormState);
+        await (this as any).UPDATE_SCENERY(this.editSceneryFormState);
         this.resetEditSceneryForm();
       }
     },
-    validateEditSceneryTypeState(name) {
-      const { $dirty, $error } = this.$v.editSceneryTypeFormState[name];
+    validateEditSceneryTypeState(name: string): boolean | null {
+      const { $dirty, $error } = (this as any).$v.editSceneryTypeFormState[name];
       return $dirty ? !$error : null;
     },
-    validateEditSceneryState(name) {
-      const { $dirty, $error } = this.$v.editSceneryFormState[name];
+    validateEditSceneryState(name: string): boolean | null {
+      const { $dirty, $error } = (this as any).$v.editSceneryFormState[name];
       return $dirty ? !$error : null;
     },
-    async deleteSceneryType(sceneryType) {
-      const sceneryDeleted = this.SCENERY_LIST.filter(
-        (scenery) => scenery.scenery_type_id === sceneryType.item.id
+    async deleteSceneryType(sceneryType: any): Promise<void> {
+      const sceneryDeleted = (this as any).SCENERY_LIST.filter(
+        (scenery: any) => scenery.scenery_type_id === sceneryType.item.id
       ).length;
       let msg = `Are you sure you want to delete ${sceneryType.item.name}?`;
       if (sceneryDeleted > 0) {
         msg = `${msg} This will also delete ${sceneryDeleted} scenery items.`;
       }
-      const action = await this.$bvModal.msgBoxConfirm(msg, {});
+      const action = await (this as any).$bvModal.msgBoxConfirm(msg, {});
       if (action === true) {
-        await this.DELETE_SCENERY_TYPE(sceneryType.item.id);
+        await (this as any).DELETE_SCENERY_TYPE(sceneryType.item.id);
       }
     },
-    async deleteSceneryItem(sceneryMember) {
+    async deleteSceneryItem(sceneryMember: any): Promise<void> {
       const msg = `Are you sure you want to delete ${sceneryMember.item.name}?`;
-      const action = await this.$bvModal.msgBoxConfirm(msg, {});
+      const action = await (this as any).$bvModal.msgBoxConfirm(msg, {});
       if (action === true) {
-        await this.DELETE_SCENERY(sceneryMember.item.id);
+        await (this as any).DELETE_SCENERY(sceneryMember.item.id);
       }
     },
     ...mapActions([
@@ -494,5 +495,5 @@ export default {
       'UPDATE_SCENERY',
     ]),
   },
-};
+});
 </script>
diff --git a/client/src/vue_components/show/config/stage/StageManager.vue b/client/src/vue_components/show/config/stage/StageManager.vue
index be06b122..0e2b6501 100644
--- a/client/src/vue_components/show/config/stage/StageManager.vue
+++ b/client/src/vue_components/show/config/stage/StageManager.vue
@@ -442,13 +442,14 @@
   </b-container>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { required } from 'vuelidate/lib/validators';
 import { mapActions, mapGetters } from 'vuex';
 import { notNull } from '@/js/customValidators';
 import { findOrphanedAssignments } from '@/js/blockOrphanUtils';
 
-export default {
+export default defineComponent({
   name: 'StageManager',
   data() {
     return {
@@ -456,12 +457,12 @@ export default {
       navbarHeight: 0,
       currentSceneIndex: 0,
       goToSceneFormState: {
-        scene_index: null,
+        scene_index: null as number | null,
       },
-      addSceneryFormState: { scenery_id: null },
-      addPropFormState: { props_id: null },
+      addSceneryFormState: { scenery_id: null as number | null },
+      addPropFormState: { props_id: null as number | null },
       savingAssignment: false,
-      newCrewSelections: {},
+      newCrewSelections: {} as Record<string, number | null>,
       allocationsExpanded: true,
       setExpanded: false,
       strikeExpanded: false,
@@ -501,10 +502,10 @@ export default {
     },
   },
   computed: {
-    orderedScenes() {
-      return this.ORDERED_SCENES;
+    orderedScenes(): any[] {
+      return (this as any).ORDERED_SCENES;
     },
-    currentScene() {
+    currentScene(): any {
       if (
         this.currentSceneIndex >= 0 &&
         this.orderedScenes.length > 0 &&
@@ -514,83 +515,83 @@ export default {
       }
       return null;
     },
-    currentSceneLabel() {
+    currentSceneLabel(): string {
       if (this.currentScene != null) {
-        return `${this.ACT_BY_ID(this.currentScene.act).name}: ${this.currentScene.name}`;
+        return `${(this as any).ACT_BY_ID(this.currentScene.act).name}: ${this.currentScene.name}`;
       }
       return 'N/A';
     },
-    sceneFormOptions() {
+    sceneFormOptions(): any[] {
       return [
         { value: null, text: 'Please select an option', disabled: true },
-        ...this.orderedScenes.map((scene, index) => ({
+        ...this.orderedScenes.map((scene: any, index: number) => ({
           value: index,
-          text: `${this.ACT_BY_ID(scene.act).name}: ${scene.name}`,
+          text: `${(this as any).ACT_BY_ID(scene.act).name}: ${scene.name}`,
         })),
       ];
     },
-    availableSceneryForScene() {
+    availableSceneryForScene(): any[] {
       if (!this.currentScene) return [];
-      const allocatedIds = this.SCENERY_ALLOCATIONS.filter(
-        (a) => a.scene_id === this.currentScene.id
-      ).map((a) => a.scenery_id);
-      return this.SCENERY_LIST.filter((s) => !allocatedIds.includes(s.id));
+      const allocatedIds = (this as any).SCENERY_ALLOCATIONS.filter(
+        (a: any) => a.scene_id === this.currentScene.id
+      ).map((a: any) => a.scenery_id);
+      return (this as any).SCENERY_LIST.filter((s: any) => !allocatedIds.includes(s.id));
     },
-    availablePropsForScene() {
+    availablePropsForScene(): any[] {
       if (!this.currentScene) return [];
-      const allocatedIds = this.PROPS_ALLOCATIONS.filter(
-        (a) => a.scene_id === this.currentScene.id
-      ).map((a) => a.props_id);
-      return this.PROPS_LIST.filter((p) => !allocatedIds.includes(p.id));
+      const allocatedIds = (this as any).PROPS_ALLOCATIONS.filter(
+        (a: any) => a.scene_id === this.currentScene.id
+      ).map((a: any) => a.props_id);
+      return (this as any).PROPS_LIST.filter((p: any) => !allocatedIds.includes(p.id));
     },
-    sceneryOptionsByType() {
-      return this.SCENERY_TYPES.map((type) => ({
+    sceneryOptionsByType(): any[] {
+      return (this as any).SCENERY_TYPES.map((type: any) => ({
         label: type.name,
         options: this.availableSceneryForScene
-          .filter((s) => s.scenery_type_id === type.id)
-          .map((s) => ({ value: s.id, text: s.name })),
-      })).filter((group) => group.options.length > 0);
+          .filter((s: any) => s.scenery_type_id === type.id)
+          .map((s: any) => ({ value: s.id, text: s.name })),
+      })).filter((group: any) => group.options.length > 0);
     },
-    propOptionsByType() {
-      return this.PROP_TYPES.map((type) => ({
+    propOptionsByType(): any[] {
+      return (this as any).PROP_TYPES.map((type: any) => ({
         label: type.name,
         options: this.availablePropsForScene
-          .filter((p) => p.prop_type_id === type.id)
-          .map((p) => ({ value: p.id, text: p.name })),
-      })).filter((group) => group.options.length > 0);
+          .filter((p: any) => p.prop_type_id === type.id)
+          .map((p: any) => ({ value: p.id, text: p.name })),
+      })).filter((group: any) => group.options.length > 0);
     },
-    previousSceneInAct() {
+    previousSceneInAct(): any {
       if (this.currentSceneIndex <= 0 || !this.currentScene) return null;
       const prev = this.orderedScenes[this.currentSceneIndex - 1];
       return prev && prev.act === this.currentScene.act ? prev : null;
     },
-    nextSceneInAct() {
+    nextSceneInAct(): any {
       if (!this.currentScene || this.currentSceneIndex >= this.orderedScenes.length - 1)
         return null;
       const next = this.orderedScenes[this.currentSceneIndex + 1];
       return next && next.act === this.currentScene.act ? next : null;
     },
-    setItems() {
+    setItems(): any[] {
       if (!this.currentScene) return [];
-      const items = [];
+      const items: any[] = [];
       const sceneId = this.currentScene.id;
       const prevSceneId = this.previousSceneInAct?.id;
 
-      for (const scenery of this.SCENERY_LIST) {
-        const allocs = this.SCENERY_ALLOCATIONS_BY_ITEM[scenery.id] || [];
-        const inCurrent = allocs.some((a) => a.scene_id === sceneId);
+      for (const scenery of (this as any).SCENERY_LIST) {
+        const allocs = (this as any).SCENERY_ALLOCATIONS_BY_ITEM[scenery.id] || [];
+        const inCurrent = allocs.some((a: any) => a.scene_id === sceneId);
         if (!inCurrent) continue;
-        const inPrev = prevSceneId && allocs.some((a) => a.scene_id === prevSceneId);
+        const inPrev = prevSceneId && allocs.some((a: any) => a.scene_id === prevSceneId);
         if (!inPrev) {
           items.push({ itemId: scenery.id, itemType: 'scenery', name: scenery.name });
         }
       }
 
-      for (const prop of this.PROPS_LIST) {
-        const allocs = this.PROPS_ALLOCATIONS_BY_ITEM[prop.id] || [];
-        const inCurrent = allocs.some((a) => a.scene_id === sceneId);
+      for (const prop of (this as any).PROPS_LIST) {
+        const allocs = (this as any).PROPS_ALLOCATIONS_BY_ITEM[prop.id] || [];
+        const inCurrent = allocs.some((a: any) => a.scene_id === sceneId);
         if (!inCurrent) continue;
-        const inPrev = prevSceneId && allocs.some((a) => a.scene_id === prevSceneId);
+        const inPrev = prevSceneId && allocs.some((a: any) => a.scene_id === prevSceneId);
         if (!inPrev) {
           items.push({ itemId: prop.id, itemType: 'prop', name: prop.name });
         }
@@ -598,27 +599,27 @@ export default {
 
       return items;
     },
-    strikeItems() {
+    strikeItems(): any[] {
       if (!this.currentScene) return [];
-      const items = [];
+      const items: any[] = [];
       const sceneId = this.currentScene.id;
       const nextSceneId = this.nextSceneInAct?.id;
 
-      for (const scenery of this.SCENERY_LIST) {
-        const allocs = this.SCENERY_ALLOCATIONS_BY_ITEM[scenery.id] || [];
-        const inCurrent = allocs.some((a) => a.scene_id === sceneId);
+      for (const scenery of (this as any).SCENERY_LIST) {
+        const allocs = (this as any).SCENERY_ALLOCATIONS_BY_ITEM[scenery.id] || [];
+        const inCurrent = allocs.some((a: any) => a.scene_id === sceneId);
         if (!inCurrent) continue;
-        const inNext = nextSceneId && allocs.some((a) => a.scene_id === nextSceneId);
+        const inNext = nextSceneId && allocs.some((a: any) => a.scene_id === nextSceneId);
         if (!inNext) {
           items.push({ itemId: scenery.id, itemType: 'scenery', name: scenery.name });
         }
       }
 
-      for (const prop of this.PROPS_LIST) {
-        const allocs = this.PROPS_ALLOCATIONS_BY_ITEM[prop.id] || [];
-        const inCurrent = allocs.some((a) => a.scene_id === sceneId);
+      for (const prop of (this as any).PROPS_LIST) {
+        const allocs = (this as any).PROPS_ALLOCATIONS_BY_ITEM[prop.id] || [];
+        const inCurrent = allocs.some((a: any) => a.scene_id === sceneId);
         if (!inCurrent) continue;
-        const inNext = nextSceneId && allocs.some((a) => a.scene_id === nextSceneId);
+        const inNext = nextSceneId && allocs.some((a: any) => a.scene_id === nextSceneId);
         if (!inNext) {
           items.push({ itemId: prop.id, itemType: 'prop', name: prop.name });
         }
@@ -626,23 +627,27 @@ export default {
 
       return items;
     },
-    unassignedSetCount() {
+    unassignedSetCount(): number {
       return this.setItems.filter(
-        (item) => this.getAssignmentsForItem(item.itemId, item.itemType, 'set').length === 0
+        (item: any) => this.getAssignmentsForItem(item.itemId, item.itemType, 'set').length === 0
       ).length;
     },
-    unassignedStrikeCount() {
+    unassignedStrikeCount(): number {
       return this.strikeItems.filter(
-        (item) => this.getAssignmentsForItem(item.itemId, item.itemType, 'strike').length === 0
+        (item: any) => this.getAssignmentsForItem(item.itemId, item.itemType, 'strike').length === 0
       ).length;
     },
-    currentSceneSceneryAllocations() {
+    currentSceneSceneryAllocations(): any[] {
       if (!this.currentScene) return [];
-      return this.SCENERY_ALLOCATIONS.filter((a) => a.scene_id === this.currentScene.id);
+      return (this as any).SCENERY_ALLOCATIONS.filter(
+        (a: any) => a.scene_id === this.currentScene.id
+      );
     },
-    currentScenePropsAllocations() {
+    currentScenePropsAllocations(): any[] {
       if (!this.currentScene) return [];
-      return this.PROPS_ALLOCATIONS.filter((a) => a.scene_id === this.currentScene.id);
+      return (this as any).PROPS_ALLOCATIONS.filter(
+        (a: any) => a.scene_id === this.currentScene.id
+      );
     },
     ...mapGetters([
       'ORDERED_SCENES',
@@ -663,81 +668,79 @@ export default {
       'CREW_ASSIGNMENTS_BY_SCENERY',
     ]),
   },
-  async mounted() {
+  async mounted(): Promise<void> {
     await Promise.all([
-      this.GET_ACT_LIST(),
-      this.GET_SCENE_LIST(),
-      this.GET_SCENERY_TYPES(),
-      this.GET_SCENERY_LIST(),
-      this.GET_SCENERY_ALLOCATIONS(),
-      this.GET_PROP_TYPES(),
-      this.GET_PROPS_LIST(),
-      this.GET_PROPS_ALLOCATIONS(),
-      this.GET_CREW_LIST(),
-      this.GET_CREW_ASSIGNMENTS(),
+      (this as any).GET_ACT_LIST(),
+      (this as any).GET_SCENE_LIST(),
+      (this as any).GET_SCENERY_TYPES(),
+      (this as any).GET_SCENERY_LIST(),
+      (this as any).GET_SCENERY_ALLOCATIONS(),
+      (this as any).GET_PROP_TYPES(),
+      (this as any).GET_PROPS_LIST(),
+      (this as any).GET_PROPS_ALLOCATIONS(),
+      (this as any).GET_CREW_LIST(),
+      (this as any).GET_CREW_ASSIGNMENTS(),
     ]);
     this.loaded = true;
     this.calculateNavbarHeight();
   },
-  created() {
+  created(): void {
     window.addEventListener('resize', this.calculateNavbarHeight);
   },
-  destroyed() {
+  destroyed(): void {
     window.removeEventListener('resize', this.calculateNavbarHeight);
   },
   methods: {
-    calculateNavbarHeight() {
-      const navbar = document.querySelector('.navbar');
+    calculateNavbarHeight(): void {
+      const navbar = document.querySelector('.navbar') as HTMLElement | null;
       if (navbar) {
         this.navbarHeight = navbar.offsetHeight;
       } else {
         this.navbarHeight = 56;
       }
     },
-    incrScene() {
+    incrScene(): void {
       if (this.currentSceneIndex < this.orderedScenes.length - 1) {
         this.currentSceneIndex += 1;
       }
     },
-    decrScene() {
+    decrScene(): void {
       if (this.currentSceneIndex > 0) {
         this.currentSceneIndex -= 1;
       }
     },
-    resetGoToSceneForm() {
-      this.goToSceneFormState = {
-        scene_index: null,
-      };
+    resetGoToSceneForm(): void {
+      this.goToSceneFormState = { scene_index: null };
       this.$nextTick(() => {
-        this.$v.$reset();
+        (this as any).$v.$reset();
       });
     },
-    onSubmitGoToScene(event) {
-      this.$v.goToSceneFormState.$touch();
-      if (this.$v.goToSceneFormState.$anyError) {
+    onSubmitGoToScene(event: Event): void {
+      (this as any).$v.goToSceneFormState.$touch();
+      if ((this as any).$v.goToSceneFormState.$anyError) {
         event.preventDefault();
       } else {
-        this.currentSceneIndex = this.goToSceneFormState.scene_index;
+        this.currentSceneIndex = this.goToSceneFormState.scene_index!;
         this.resetGoToSceneForm();
       }
     },
-    validateGoToSceneState(name) {
-      const { $dirty, $error } = this.$v.goToSceneFormState[name];
+    validateGoToSceneState(name: string): boolean | null {
+      const { $dirty, $error } = (this as any).$v.goToSceneFormState[name];
       return $dirty ? !$error : null;
     },
-    resetAddSceneryForm() {
+    resetAddSceneryForm(): void {
       this.addSceneryFormState = { scenery_id: null };
       this.$nextTick(() => {
-        this.$v.addSceneryFormState.$reset();
+        (this as any).$v.addSceneryFormState.$reset();
       });
     },
-    validateAddSceneryState(name) {
-      const { $dirty, $error } = this.$v.addSceneryFormState[name];
+    validateAddSceneryState(name: string): boolean | null {
+      const { $dirty, $error } = (this as any).$v.addSceneryFormState[name];
       return $dirty ? !$error : null;
     },
-    async onSubmitAddScenery(event) {
-      this.$v.addSceneryFormState.$touch();
-      if (this.$v.addSceneryFormState.$anyError) {
+    async onSubmitAddScenery(event: Event): Promise<void> {
+      (this as any).$v.addSceneryFormState.$touch();
+      if ((this as any).$v.addSceneryFormState.$anyError) {
         event.preventDefault();
         return;
       }
@@ -746,39 +749,39 @@ export default {
       if (orphans.length > 0) {
         event.preventDefault();
         const msgVNode = this.buildOrphanWarningVNode(orphans);
-        const confirmed = await this.$bvModal.msgBoxConfirm([msgVNode], {
+        const confirmed = await (this as any).$bvModal.msgBoxConfirm([msgVNode], {
           title: 'Crew assignments will be removed',
           okTitle: 'Continue',
           okVariant: 'warning',
         });
         if (confirmed !== true) return;
-        await this.ADD_SCENERY_ALLOCATION({
+        await (this as any).ADD_SCENERY_ALLOCATION({
           scenery_id: sceneryId,
           scene_id: this.currentScene.id,
         });
         this.resetAddSceneryForm();
-        this.$bvModal.hide('add-scenery');
+        (this as any).$bvModal.hide('add-scenery');
       } else {
-        await this.ADD_SCENERY_ALLOCATION({
+        await (this as any).ADD_SCENERY_ALLOCATION({
           scenery_id: sceneryId,
           scene_id: this.currentScene.id,
         });
         this.resetAddSceneryForm();
       }
     },
-    resetAddPropForm() {
+    resetAddPropForm(): void {
       this.addPropFormState = { props_id: null };
       this.$nextTick(() => {
-        this.$v.addPropFormState.$reset();
+        (this as any).$v.addPropFormState.$reset();
       });
     },
-    validateAddPropState(name) {
-      const { $dirty, $error } = this.$v.addPropFormState[name];
+    validateAddPropState(name: string): boolean | null {
+      const { $dirty, $error } = (this as any).$v.addPropFormState[name];
       return $dirty ? !$error : null;
     },
-    async onSubmitAddProp(event) {
-      this.$v.addPropFormState.$touch();
-      if (this.$v.addPropFormState.$anyError) {
+    async onSubmitAddProp(event: Event): Promise<void> {
+      (this as any).$v.addPropFormState.$touch();
+      if ((this as any).$v.addPropFormState.$anyError) {
         event.preventDefault();
         return;
       }
@@ -787,59 +790,63 @@ export default {
       if (orphans.length > 0) {
         event.preventDefault();
         const msgVNode = this.buildOrphanWarningVNode(orphans);
-        const confirmed = await this.$bvModal.msgBoxConfirm([msgVNode], {
+        const confirmed = await (this as any).$bvModal.msgBoxConfirm([msgVNode], {
           title: 'Crew assignments will be removed',
           okTitle: 'Continue',
           okVariant: 'warning',
         });
         if (confirmed !== true) return;
-        await this.ADD_PROPS_ALLOCATION({
+        await (this as any).ADD_PROPS_ALLOCATION({
           props_id: propsId,
           scene_id: this.currentScene.id,
         });
         this.resetAddPropForm();
-        this.$bvModal.hide('add-prop');
+        (this as any).$bvModal.hide('add-prop');
       } else {
-        await this.ADD_PROPS_ALLOCATION({
+        await (this as any).ADD_PROPS_ALLOCATION({
           props_id: propsId,
           scene_id: this.currentScene.id,
         });
         this.resetAddPropForm();
       }
     },
-    getAssignmentsForItem(itemId, itemType, assignmentType) {
+    getAssignmentsForItem(itemId: number, itemType: string, assignmentType: string): any[] {
       const assignments =
         itemType === 'prop'
-          ? this.CREW_ASSIGNMENTS_BY_PROP[itemId] || []
-          : this.CREW_ASSIGNMENTS_BY_SCENERY[itemId] || [];
+          ? (this as any).CREW_ASSIGNMENTS_BY_PROP[itemId] || []
+          : (this as any).CREW_ASSIGNMENTS_BY_SCENERY[itemId] || [];
       return assignments.filter(
-        (a) => a.assignment_type === assignmentType && a.scene_id === this.currentScene?.id
+        (a: any) => a.assignment_type === assignmentType && a.scene_id === this.currentScene?.id
       );
     },
-    getAvailableCrewForItem(itemId, itemType, assignmentType) {
+    getAvailableCrewForItem(itemId: number, itemType: string, assignmentType: string): any[] {
       const assigned = new Set(
-        this.getAssignmentsForItem(itemId, itemType, assignmentType).map((a) => a.crew_id)
+        this.getAssignmentsForItem(itemId, itemType, assignmentType).map((a: any) => a.crew_id)
       );
-      return this.CREW_LIST.filter((c) => !assigned.has(c.id)).map((c) => ({
+      return (this as any).CREW_LIST.filter((c: any) => !assigned.has(c.id)).map((c: any) => ({
         value: c.id,
         text: this.formatCrewName(c),
       }));
     },
-    formatCrewName(crew) {
+    formatCrewName(crew: any): string {
       if (!crew) return 'Unknown';
       return crew.last_name ? `${crew.first_name} ${crew.last_name}` : crew.first_name;
     },
-    crewSelectionKey(itemId, itemType, assignmentType) {
+    crewSelectionKey(itemId: number, itemType: string, assignmentType: string): string {
       return `${itemType}-${itemId}-${assignmentType}`;
     },
-    async addCrewAssignment(itemId, itemType, assignmentType) {
+    async addCrewAssignment(
+      itemId: number,
+      itemType: string,
+      assignmentType: string
+    ): Promise<void> {
       const key = this.crewSelectionKey(itemId, itemType, assignmentType);
       const crewId = this.newCrewSelections[key];
       if (!crewId || !this.currentScene || this.savingAssignment) return;
 
       this.savingAssignment = true;
       try {
-        const assignment = {
+        const assignment: any = {
           crew_id: crewId,
           scene_id: this.currentScene.id,
           assignment_type: assignmentType,
@@ -850,7 +857,7 @@ export default {
           assignment.scenery_id = itemId;
         }
 
-        const result = await this.ADD_CREW_ASSIGNMENT(assignment);
+        const result = await (this as any).ADD_CREW_ASSIGNMENT(assignment);
         if (result.success) {
           this.$set(this.newCrewSelections, key, null);
         }
@@ -858,45 +865,50 @@ export default {
         this.savingAssignment = false;
       }
     },
-    async removeCrewAssignment(assignment) {
+    async removeCrewAssignment(assignment: any): Promise<void> {
       if (this.savingAssignment) return;
 
-      const crew = this.CREW_MEMBER_BY_ID(assignment.crew_id);
+      const crew = (this as any).CREW_MEMBER_BY_ID(assignment.crew_id);
       const crewName = this.formatCrewName(crew);
-      const confirmed = await this.$bvModal.msgBoxConfirm(
+      const confirmed = await (this as any).$bvModal.msgBoxConfirm(
         `Remove ${crewName} from this ${assignment.assignment_type.toUpperCase()} assignment?`,
         { okTitle: 'Remove', okVariant: 'danger' }
       );
       if (confirmed) {
         this.savingAssignment = true;
         try {
-          await this.DELETE_CREW_ASSIGNMENT(assignment.id);
+          await (this as any).DELETE_CREW_ASSIGNMENT(assignment.id);
         } finally {
           this.savingAssignment = false;
         }
       }
     },
-    getSceneryById(id) {
-      return this.SCENERY_LIST.find((s) => s.id === id);
+    getSceneryById(id: number): any {
+      return (this as any).SCENERY_LIST.find((s: any) => s.id === id);
     },
-    getPropById(id) {
-      return this.PROPS_LIST.find((p) => p.id === id);
+    getPropById(id: number): any {
+      return (this as any).PROPS_LIST.find((p: any) => p.id === id);
     },
-    getItemAllocationsForScenery(sceneryId) {
-      return this.SCENERY_ALLOCATIONS.filter((a) => a.scenery_id === sceneryId);
+    getItemAllocationsForScenery(sceneryId: number): any[] {
+      return (this as any).SCENERY_ALLOCATIONS.filter((a: any) => a.scenery_id === sceneryId);
     },
-    getItemAllocationsForProp(propId) {
-      return this.PROPS_ALLOCATIONS.filter((a) => a.props_id === propId);
+    getItemAllocationsForProp(propId: number): any[] {
+      return (this as any).PROPS_ALLOCATIONS.filter((a: any) => a.props_id === propId);
     },
-    findOrphansForItem(itemId, itemType, changeType, sceneId) {
+    findOrphansForItem(
+      itemId: number | null,
+      itemType: string,
+      changeType: string,
+      sceneId: number
+    ): any[] {
       const allocations =
         itemType === 'scenery'
-          ? this.getItemAllocationsForScenery(itemId)
-          : this.getItemAllocationsForProp(itemId);
+          ? this.getItemAllocationsForScenery(itemId!)
+          : this.getItemAllocationsForProp(itemId!);
       const crewAssignments =
         itemType === 'scenery'
-          ? this.CREW_ASSIGNMENTS_BY_SCENERY[itemId] || []
-          : this.CREW_ASSIGNMENTS_BY_PROP[itemId] || [];
+          ? (this as any).CREW_ASSIGNMENTS_BY_SCENERY[itemId!] || []
+          : (this as any).CREW_ASSIGNMENTS_BY_PROP[itemId!] || [];
       return findOrphanedAssignments({
         orderedScenes: this.orderedScenes,
         currentAllocations: allocations,
@@ -905,19 +917,19 @@ export default {
         changeSceneId: sceneId,
       });
     },
-    buildOrphanWarningVNode(orphanedAssignments) {
+    buildOrphanWarningVNode(orphanedAssignments: any[]): any {
       const h = this.$createElement;
-      const groups = {};
+      const groups: Record<string, string[]> = {};
       for (const assignment of orphanedAssignments) {
         const itemName =
           assignment.prop_id != null
             ? this.getPropById(assignment.prop_id)?.name || 'Unknown Prop'
             : this.getSceneryById(assignment.scenery_id)?.name || 'Unknown Scenery';
-        const scene = this.orderedScenes.find((s) => s.id === assignment.scene_id);
+        const scene = this.orderedScenes.find((s: any) => s.id === assignment.scene_id);
         const sceneName = scene?.name || 'Unknown Scene';
         const key = `${itemName} - ${assignment.assignment_type.toUpperCase()} (${sceneName})`;
         if (!groups[key]) groups[key] = [];
-        const crew = this.CREW_MEMBER_BY_ID(assignment.crew_id);
+        const crew = (this as any).CREW_MEMBER_BY_ID(assignment.crew_id);
         groups[key].push(this.formatCrewName(crew));
       }
       const items = Object.entries(groups).map(([label, names]) =>
@@ -929,7 +941,7 @@ export default {
         h('p', { class: 'text-muted mb-0' }, 'You can reassign crew after the change.'),
       ]);
     },
-    async deleteSceneryAllocation(allocation) {
+    async deleteSceneryAllocation(allocation: any): Promise<void> {
       const scenery = this.getSceneryById(allocation.scenery_id);
       const orphans = this.findOrphansForItem(
         allocation.scenery_id,
@@ -939,7 +951,7 @@ export default {
       );
       if (orphans.length > 0) {
         const msgVNode = this.buildOrphanWarningVNode(orphans);
-        const action = await this.$bvModal.msgBoxConfirm([msgVNode], {
+        const action = await (this as any).$bvModal.msgBoxConfirm([msgVNode], {
           title: 'Crew assignments will be removed',
           okTitle: 'Continue',
           okVariant: 'danger',
@@ -947,12 +959,12 @@ export default {
         if (action !== true) return;
       } else {
         const msg = `Remove "${scenery?.name}" from this scene?`;
-        const action = await this.$bvModal.msgBoxConfirm(msg, {});
+        const action = await (this as any).$bvModal.msgBoxConfirm(msg, {});
         if (action !== true) return;
       }
-      await this.DELETE_SCENERY_ALLOCATION(allocation.id);
+      await (this as any).DELETE_SCENERY_ALLOCATION(allocation.id);
     },
-    async deletePropAllocation(allocation) {
+    async deletePropAllocation(allocation: any): Promise<void> {
       const prop = this.getPropById(allocation.props_id);
       const orphans = this.findOrphansForItem(
         allocation.props_id,
@@ -962,7 +974,7 @@ export default {
       );
       if (orphans.length > 0) {
         const msgVNode = this.buildOrphanWarningVNode(orphans);
-        const action = await this.$bvModal.msgBoxConfirm([msgVNode], {
+        const action = await (this as any).$bvModal.msgBoxConfirm([msgVNode], {
           title: 'Crew assignments will be removed',
           okTitle: 'Continue',
           okVariant: 'danger',
@@ -970,10 +982,10 @@ export default {
         if (action !== true) return;
       } else {
         const msg = `Remove "${prop?.name}" from this scene?`;
-        const action = await this.$bvModal.msgBoxConfirm(msg, {});
+        const action = await (this as any).$bvModal.msgBoxConfirm(msg, {});
         if (action !== true) return;
       }
-      await this.DELETE_PROPS_ALLOCATION(allocation.id);
+      await (this as any).DELETE_PROPS_ALLOCATION(allocation.id);
     },
     ...mapActions([
       'GET_ACT_LIST',
@@ -994,7 +1006,7 @@ export default {
       'DELETE_CREW_ASSIGNMENT',
     ]),
   },
-};
+});
 </script>
 
 <style scoped>
diff --git a/client/src/vue_components/show/config/stage/StageTimeline.vue b/client/src/vue_components/show/config/stage/StageTimeline.vue
index c7436651..32fc085f 100644
--- a/client/src/vue_components/show/config/stage/StageTimeline.vue
+++ b/client/src/vue_components/show/config/stage/StageTimeline.vue
@@ -151,12 +151,13 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { mapGetters, mapActions } from 'vuex';
 import timelineMixin from '@/mixins/timelineMixin';
 import TimelineSidePanel from './TimelineSidePanel.vue';
 
-export default {
+export default defineComponent({
   name: 'StageTimeline',
   components: {
     TimelineSidePanel,
@@ -172,7 +173,7 @@ export default {
     return {
       viewMode: 'combined',
       dataLoaded: false,
-      selectedItem: null,
+      selectedItem: null as any,
       sidePanelOpen: false,
     };
   },
@@ -188,30 +189,33 @@ export default {
       'PROP_BY_ID',
       'SCENERY_BY_ID',
     ]),
-    hasData() {
-      return this.scenes.length > 0 && this.rows.length > 0;
+    hasData(): boolean {
+      return (this as any).scenes.length > 0 && (this as any).rows.length > 0;
     },
-    scenes() {
-      return this.ORDERED_SCENES || [];
+    scenes(): any[] {
+      return (this as any).ORDERED_SCENES || [];
     },
-    rows() {
-      const propsRows = this.PROPS_LIST.filter((prop) => this.hasPropAllocations(prop.id)).map(
-        (prop) => ({
+    rows(): any[] {
+      const propsList = (this as any).PROPS_LIST as any[];
+      const sceneryList = (this as any).SCENERY_LIST as any[];
+
+      const propsRows = propsList
+        .filter((prop: any) => this.hasPropAllocations(prop.id))
+        .map((prop: any) => ({
           id: `prop-${prop.id}`,
           itemId: prop.id,
           name: prop.name,
           type: 'prop',
-        })
-      );
+        }));
 
-      const sceneryRows = this.SCENERY_LIST.filter((scenery) =>
-        this.hasSceneryAllocations(scenery.id)
-      ).map((scenery) => ({
-        id: `scenery-${scenery.id}`,
-        itemId: scenery.id,
-        name: scenery.name,
-        type: 'scenery',
-      }));
+      const sceneryRows = sceneryList
+        .filter((scenery: any) => this.hasSceneryAllocations(scenery.id))
+        .map((scenery: any) => ({
+          id: `scenery-${scenery.id}`,
+          itemId: scenery.id,
+          name: scenery.name,
+          type: 'scenery',
+        }));
 
       if (this.viewMode === 'props') {
         return propsRows;
@@ -219,23 +223,22 @@ export default {
       if (this.viewMode === 'scenery') {
         return sceneryRows;
       }
-      // Combined: props first, then scenery
       return [...propsRows, ...sceneryRows];
     },
-    allocationBars() {
-      const bars = [];
-      this.rows.forEach((row, rowIndex) => {
+    allocationBars(): any[] {
+      const bars: any[] = [];
+      (this as any).rows.forEach((row: any, rowIndex: number) => {
         this.generateBarsForItem(row.itemId, row.type, rowIndex, bars);
       });
       return bars;
     },
   },
   watch: {
-    viewMode() {
+    viewMode(): void {
       this.$forceUpdate();
     },
   },
-  async mounted() {
+  async mounted(): Promise<void> {
     await this.loadData();
   },
   methods: {
@@ -251,58 +254,63 @@ export default {
       'GET_CREW_LIST',
       'GET_CREW_ASSIGNMENTS',
     ]),
-    async loadData() {
+    async loadData(): Promise<void> {
       await Promise.all([
-        this.GET_ACT_LIST(),
-        this.GET_SCENE_LIST(),
-        this.GET_PROP_TYPES(),
-        this.GET_SCENERY_TYPES(),
-        this.GET_PROPS_LIST(),
-        this.GET_SCENERY_LIST(),
-        this.GET_PROPS_ALLOCATIONS(),
-        this.GET_SCENERY_ALLOCATIONS(),
-        this.GET_CREW_LIST(),
-        this.GET_CREW_ASSIGNMENTS(),
+        (this as any).GET_ACT_LIST(),
+        (this as any).GET_SCENE_LIST(),
+        (this as any).GET_PROP_TYPES(),
+        (this as any).GET_SCENERY_TYPES(),
+        (this as any).GET_PROPS_LIST(),
+        (this as any).GET_SCENERY_LIST(),
+        (this as any).GET_PROPS_ALLOCATIONS(),
+        (this as any).GET_SCENERY_ALLOCATIONS(),
+        (this as any).GET_CREW_LIST(),
+        (this as any).GET_CREW_ASSIGNMENTS(),
       ]);
       this.dataLoaded = true;
     },
-    hasPropAllocations(propId) {
-      const allocations = this.PROPS_ALLOCATIONS_BY_ITEM[propId];
+    hasPropAllocations(propId: number): boolean {
+      const allocations = ((this as any).PROPS_ALLOCATIONS_BY_ITEM as Record<number, any[]>)[
+        propId
+      ];
       return allocations && allocations.length > 0;
     },
-    hasSceneryAllocations(sceneryId) {
-      const allocations = this.SCENERY_ALLOCATIONS_BY_ITEM[sceneryId];
+    hasSceneryAllocations(sceneryId: number): boolean {
+      const allocations = ((this as any).SCENERY_ALLOCATIONS_BY_ITEM as Record<number, any[]>)[
+        sceneryId
+      ];
       return allocations && allocations.length > 0;
     },
-
-    formatSceneRange(startScene, endScene) {
+    formatSceneRange(startScene: any, endScene: any): string {
       if (startScene === endScene) {
         return startScene;
       }
       return `${startScene} - ${endScene}`;
     },
-
-    generateBarsForItem(itemId, itemType, rowIndex, bars) {
+    generateBarsForItem(itemId: number, itemType: string, rowIndex: number, bars: any[]): void {
       const allocations =
         itemType === 'prop'
-          ? this.PROPS_ALLOCATIONS_BY_ITEM[itemId] || []
-          : this.SCENERY_ALLOCATIONS_BY_ITEM[itemId] || [];
-      const segments = this.groupConsecutiveScenes(allocations, 'scene_id');
+          ? ((this as any).PROPS_ALLOCATIONS_BY_ITEM as Record<number, any[]>)[itemId] || []
+          : ((this as any).SCENERY_ALLOCATIONS_BY_ITEM as Record<number, any[]>)[itemId] || [];
+      const segments = (this as any).groupConsecutiveScenes(allocations, 'scene_id');
 
-      const item = itemType === 'prop' ? this.PROP_BY_ID(itemId) : this.SCENERY_BY_ID(itemId);
+      const item =
+        itemType === 'prop'
+          ? (this as any).PROP_BY_ID(itemId)
+          : (this as any).SCENERY_BY_ID(itemId);
       const itemName = item?.name || `${itemType === 'prop' ? 'Prop' : 'Scenery'} ${itemId}`;
 
-      segments.forEach((segment, idx) => {
-        const startX = this.getSceneX(segment.startIndex);
-        const width = this.sceneWidth * (segment.endIndex - segment.startIndex + 1);
+      segments.forEach((segment: any, idx: number) => {
+        const startX = (this as any).getSceneX(segment.startIndex);
+        const width = (this as any).sceneWidth * (segment.endIndex - segment.startIndex + 1);
 
         bars.push({
           id: `${itemType}-${itemId}-seg-${idx}`,
           x: startX,
-          y: this.getRowY(rowIndex) + this.barPadding,
+          y: (this as any).getRowY(rowIndex) + (this as any).barPadding,
           width,
-          height: this.rowHeight - 2 * this.barPadding,
-          color: this.getColorForEntity(itemId, itemType),
+          height: (this as any).rowHeight - 2 * (this as any).barPadding,
+          color: (this as any).getColorForEntity(itemId, itemType),
           label: itemName,
           tooltip: `${itemName} (${this.formatSceneRange(segment.startScene, segment.endScene)})`,
           data: {
@@ -314,30 +322,30 @@ export default {
         });
       });
     },
-    handleExport() {
-      const viewModeNames = {
+    handleExport(): void {
+      const viewModeNames: Record<string, string> = {
         combined: 'Combined',
         props: 'Props',
         scenery: 'Scenery',
       };
-      this.exportTimeline('stage-timeline', viewModeNames[this.viewMode]);
+      (this as any).exportTimeline('stage-timeline', viewModeNames[this.viewMode]);
     },
-    handleBarClick(bar) {
+    handleBarClick(bar: any): void {
       this.selectedItem = bar.data;
       this.sidePanelOpen = true;
       this.$emit('bar-click', bar.data);
     },
-    handleBarHover(bar, event) {
+    handleBarHover(bar: any, event: MouseEvent): void {
       this.$emit('bar-hover', { bar: bar.data, event });
     },
-    handleBarLeave() {
+    handleBarLeave(): void {
       this.$emit('bar-leave');
     },
-    closeSidePanel() {
+    closeSidePanel(): void {
       this.sidePanelOpen = false;
       this.selectedItem = null;
     },
-    isBarSelected(bar) {
+    isBarSelected(bar: any): boolean {
       if (!this.selectedItem) return false;
       return (
         this.selectedItem.type === bar.data.type &&
@@ -347,7 +355,7 @@ export default {
       );
     },
   },
-};
+});
 </script>
 
 <style lang="scss">
diff --git a/client/src/vue_components/show/config/stage/TimelineSidePanel.vue b/client/src/vue_components/show/config/stage/TimelineSidePanel.vue
index 28994122..e7858436 100644
--- a/client/src/vue_components/show/config/stage/TimelineSidePanel.vue
+++ b/client/src/vue_components/show/config/stage/TimelineSidePanel.vue
@@ -169,10 +169,11 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { mapGetters, mapActions } from 'vuex';
 
-export default {
+export default defineComponent({
   name: 'TimelineSidePanel',
   props: {
     selectedItem: {
@@ -186,8 +187,8 @@ export default {
   },
   data() {
     return {
-      newSetCrewId: null,
-      newStrikeCrewId: null,
+      newSetCrewId: null as number | null,
+      newStrikeCrewId: null as number | null,
       saving: false,
     };
   },
@@ -204,93 +205,97 @@ export default {
       'SCENERY_BY_ID',
       'ACT_BY_ID',
     ]),
-    item() {
+    item(): any {
       if (!this.selectedItem) return null;
       return this.selectedItem.type === 'prop'
-        ? this.PROP_BY_ID(this.selectedItem.itemId)
-        : this.SCENERY_BY_ID(this.selectedItem.itemId);
+        ? (this as any).PROP_BY_ID(this.selectedItem.itemId)
+        : (this as any).SCENERY_BY_ID(this.selectedItem.itemId);
     },
-    itemExists() {
+    itemExists(): boolean {
       return this.item != null;
     },
-    itemName() {
+    itemName(): string {
       return this.item?.name || 'Unknown';
     },
-    setScene() {
+    setScene(): any {
       if (!this.selectedItem) return null;
-      return this.ORDERED_SCENES[this.selectedItem.startScene] || null;
+      return (this as any).ORDERED_SCENES[this.selectedItem.startScene] || null;
     },
-    strikeScene() {
+    strikeScene(): any {
       if (!this.selectedItem) return null;
-      return this.ORDERED_SCENES[this.selectedItem.endScene] || null;
+      return (this as any).ORDERED_SCENES[this.selectedItem.endScene] || null;
     },
-    setSceneId() {
+    setSceneId(): number | null {
       return this.setScene?.id || null;
     },
-    strikeSceneId() {
+    strikeSceneId(): number | null {
       return this.strikeScene?.id || null;
     },
-    setSceneName() {
+    setSceneName(): string {
       if (!this.setScene) return '';
-      const act = this.ACT_BY_ID(this.setScene.act);
+      const act = (this as any).ACT_BY_ID(this.setScene.act);
       return `${act?.name || 'Act'}: ${this.setScene.name}`;
     },
-    strikeSceneName() {
+    strikeSceneName(): string {
       if (!this.strikeScene) return '';
-      const act = this.ACT_BY_ID(this.strikeScene.act);
+      const act = (this as any).ACT_BY_ID(this.strikeScene.act);
       return `${act?.name || 'Act'}: ${this.strikeScene.name}`;
     },
-    isSingleSceneBlock() {
+    isSingleSceneBlock(): boolean {
       return this.setSceneId === this.strikeSceneId;
     },
-    blockRange() {
+    blockRange(): string {
       if (this.isSingleSceneBlock) {
         return this.setSceneName;
       }
       return `${this.setSceneName} - ${this.strikeSceneName}`;
     },
-    itemAssignments() {
+    itemAssignments(): any[] {
       if (!this.selectedItem) return [];
       return this.selectedItem.type === 'prop'
-        ? this.CREW_ASSIGNMENTS_BY_PROP[this.selectedItem.itemId] || []
-        : this.CREW_ASSIGNMENTS_BY_SCENERY[this.selectedItem.itemId] || [];
+        ? (this as any).CREW_ASSIGNMENTS_BY_PROP[this.selectedItem.itemId] || []
+        : (this as any).CREW_ASSIGNMENTS_BY_SCENERY[this.selectedItem.itemId] || [];
     },
-    setAssignments() {
+    setAssignments(): any[] {
       return this.itemAssignments.filter(
-        (a) => a.assignment_type === 'set' && a.scene_id === this.setSceneId
+        (a: any) => a.assignment_type === 'set' && a.scene_id === this.setSceneId
       );
     },
-    strikeAssignments() {
+    strikeAssignments(): any[] {
       return this.itemAssignments.filter(
-        (a) => a.assignment_type === 'strike' && a.scene_id === this.strikeSceneId
+        (a: any) => a.assignment_type === 'strike' && a.scene_id === this.strikeSceneId
       );
     },
-    assignedSetCrewIds() {
-      return new Set(this.setAssignments.map((a) => a.crew_id));
+    assignedSetCrewIds(): Set<number> {
+      return new Set(this.setAssignments.map((a: any) => a.crew_id));
     },
-    assignedStrikeCrewIds() {
-      return new Set(this.strikeAssignments.map((a) => a.crew_id));
+    assignedStrikeCrewIds(): Set<number> {
+      return new Set(this.strikeAssignments.map((a: any) => a.crew_id));
     },
-    availableCrewForSet() {
-      return this.CREW_LIST.filter((c) => !this.assignedSetCrewIds.has(c.id)).map((c) => ({
-        value: c.id,
-        text: this.formatCrewName(c),
-      }));
+    availableCrewForSet(): any[] {
+      return (this as any).CREW_LIST.filter((c: any) => !this.assignedSetCrewIds.has(c.id)).map(
+        (c: any) => ({
+          value: c.id,
+          text: this.formatCrewName(c),
+        })
+      );
     },
-    availableCrewForStrike() {
-      return this.CREW_LIST.filter((c) => !this.assignedStrikeCrewIds.has(c.id)).map((c) => ({
-        value: c.id,
-        text: this.formatCrewName(c),
-      }));
+    availableCrewForStrike(): any[] {
+      return (this as any).CREW_LIST.filter((c: any) => !this.assignedStrikeCrewIds.has(c.id)).map(
+        (c: any) => ({
+          value: c.id,
+          text: this.formatCrewName(c),
+        })
+      );
     },
-    conflicts() {
-      const conflicts = [];
+    conflicts(): any[] {
+      const conflicts: any[] = [];
       const allAssignments = [...this.setAssignments, ...this.strikeAssignments];
 
       for (const assignment of allAssignments) {
-        const sceneAssignments = this.CREW_ASSIGNMENTS_BY_SCENE[assignment.scene_id] || [];
+        const sceneAssignments = (this as any).CREW_ASSIGNMENTS_BY_SCENE[assignment.scene_id] || [];
         const otherAssignments = sceneAssignments.filter(
-          (a) =>
+          (a: any) =>
             a.crew_id === assignment.crew_id &&
             a.id !== assignment.id &&
             (a.prop_id !== this.selectedItem?.itemId || this.selectedItem?.type !== 'prop') &&
@@ -300,10 +305,10 @@ export default {
         for (const other of otherAssignments) {
           const otherItem =
             other.prop_id != null
-              ? this.PROP_BY_ID(other.prop_id)
-              : this.SCENERY_BY_ID(other.scenery_id);
-          const crew = this.CREW_MEMBER_BY_ID(assignment.crew_id);
-          const scene = this.ORDERED_SCENES.find((s) => s.id === assignment.scene_id);
+              ? (this as any).PROP_BY_ID(other.prop_id)
+              : (this as any).SCENERY_BY_ID(other.scenery_id);
+          const crew = (this as any).CREW_MEMBER_BY_ID(assignment.crew_id);
+          const scene = (this as any).ORDERED_SCENES.find((s: any) => s.id === assignment.scene_id);
           conflicts.push({
             key: `${assignment.id}-${other.id}`,
             crewName: this.formatCrewName(crew),
@@ -318,13 +323,11 @@ export default {
     },
   },
   watch: {
-    selectedItem() {
-      // Reset selections when item changes
+    selectedItem(): void {
       this.newSetCrewId = null;
       this.newStrikeCrewId = null;
     },
-    itemExists(exists) {
-      // Close panel if the item was deleted
+    itemExists(exists: boolean): void {
       if (!exists && this.selectedItem) {
         this.$emit('close');
       }
@@ -332,20 +335,20 @@ export default {
   },
   methods: {
     ...mapActions(['ADD_CREW_ASSIGNMENT', 'DELETE_CREW_ASSIGNMENT']),
-    formatCrewName(crew) {
+    formatCrewName(crew: any): string {
       if (!crew) return 'Unknown';
       return crew.last_name ? `${crew.first_name} ${crew.last_name}` : crew.first_name;
     },
-    getCrewDisplayName(crewId) {
-      const crew = this.CREW_MEMBER_BY_ID(crewId);
+    getCrewDisplayName(crewId: number): string {
+      const crew = (this as any).CREW_MEMBER_BY_ID(crewId);
       return this.formatCrewName(crew);
     },
-    async addSetAssignment() {
+    async addSetAssignment(): Promise<void> {
       if (!this.newSetCrewId || !this.setSceneId || this.saving) return;
 
       this.saving = true;
       try {
-        const assignment = {
+        const assignment: any = {
           crew_id: this.newSetCrewId,
           scene_id: this.setSceneId,
           assignment_type: 'set',
@@ -357,7 +360,7 @@ export default {
           assignment.scenery_id = this.selectedItem.itemId;
         }
 
-        const result = await this.ADD_CREW_ASSIGNMENT(assignment);
+        const result = await (this as any).ADD_CREW_ASSIGNMENT(assignment);
         if (result.success) {
           this.newSetCrewId = null;
         }
@@ -365,12 +368,12 @@ export default {
         this.saving = false;
       }
     },
-    async addStrikeAssignment() {
+    async addStrikeAssignment(): Promise<void> {
       if (!this.newStrikeCrewId || !this.strikeSceneId || this.saving) return;
 
       this.saving = true;
       try {
-        const assignment = {
+        const assignment: any = {
           crew_id: this.newStrikeCrewId,
           scene_id: this.strikeSceneId,
           assignment_type: 'strike',
@@ -382,7 +385,7 @@ export default {
           assignment.scenery_id = this.selectedItem.itemId;
         }
 
-        const result = await this.ADD_CREW_ASSIGNMENT(assignment);
+        const result = await (this as any).ADD_CREW_ASSIGNMENT(assignment);
         if (result.success) {
           this.newStrikeCrewId = null;
         }
@@ -390,26 +393,26 @@ export default {
         this.saving = false;
       }
     },
-    async removeAssignment(assignment) {
+    async removeAssignment(assignment: any): Promise<void> {
       if (this.saving) return;
 
-      const crew = this.CREW_MEMBER_BY_ID(assignment.crew_id);
+      const crew = (this as any).CREW_MEMBER_BY_ID(assignment.crew_id);
       const crewName = this.formatCrewName(crew);
-      const confirmed = await this.$bvModal.msgBoxConfirm(
+      const confirmed = await (this as any).$bvModal.msgBoxConfirm(
         `Remove ${crewName} from this ${assignment.assignment_type.toUpperCase()} assignment?`,
         { okTitle: 'Remove', okVariant: 'danger' }
       );
       if (confirmed) {
         this.saving = true;
         try {
-          await this.DELETE_CREW_ASSIGNMENT(assignment.id);
+          await (this as any).DELETE_CREW_ASSIGNMENT(assignment.id);
         } finally {
           this.saving = false;
         }
       }
     },
   },
-};
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/client/src/vue_components/show/live/ScriptLineViewer.vue b/client/src/vue_components/show/live/ScriptLineViewer.vue
index 7d61bf6b..33a55176 100644
--- a/client/src/vue_components/show/live/ScriptLineViewer.vue
+++ b/client/src/vue_components/show/live/ScriptLineViewer.vue
@@ -241,14 +241,15 @@
   </b-container>
 </template>
 
-<script>
-import { mapGetters, mapActions } from 'vuex';
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { mapGetters } from 'vuex';
 import cueDisplayMixin from '@/mixins/cueDisplayMixin';
 import scriptNavigationMixin from '@/mixins/scriptNavigationMixin';
 import scriptDisplayMixin from '@/mixins/scriptDisplayMixin';
 import { LINE_TYPES } from '@/constants/lineTypes';
 
-export default {
+export default defineComponent({
   name: 'ScriptLineViewer',
   mixins: [cueDisplayMixin, scriptNavigationMixin, scriptDisplayMixin],
   events: ['last-line-change', 'first-line-change', 'start-interval'],
@@ -325,23 +326,23 @@ export default {
     };
   },
   computed: {
-    isFirstRowIntervalBanner() {
-      return this.needsIntervalBanner;
+    isFirstRowIntervalBanner(): boolean {
+      return (this as any).needsIntervalBanner;
     },
-    isFirstRowActScene() {
-      return !this.needsIntervalBanner && this.needsActSceneLabel;
+    isFirstRowActScene(): boolean {
+      return !(this as any).needsIntervalBanner && (this as any).needsActSceneLabel;
     },
-    isFirstRowContent() {
-      return !this.needsIntervalBanner && !this.needsActSceneLabel;
+    isFirstRowContent(): boolean {
+      return !(this as any).needsIntervalBanner && !(this as any).needsActSceneLabel;
     },
     ...mapGetters(['USER_SETTINGS']),
   },
   methods: {
-    addNewCue() {
-      this.$emit('add-cue', this.line.id);
+    addNewCue(): void {
+      this.$emit('add-cue', (this.line as any).id);
     },
   },
-};
+});
 </script>
 
 <style scoped>
diff --git a/client/src/vue_components/show/live/ScriptLineViewerCompact.vue b/client/src/vue_components/show/live/ScriptLineViewerCompact.vue
index 16c1d75b..87527308 100644
--- a/client/src/vue_components/show/live/ScriptLineViewerCompact.vue
+++ b/client/src/vue_components/show/live/ScriptLineViewerCompact.vue
@@ -172,13 +172,14 @@
   </b-container>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import cueDisplayMixin from '@/mixins/cueDisplayMixin';
 import scriptNavigationMixin from '@/mixins/scriptNavigationMixin';
 import scriptDisplayMixin from '@/mixins/scriptDisplayMixin';
 import { LINE_TYPES } from '@/constants/lineTypes';
 
-export default {
+export default defineComponent({
   name: 'ScriptLineViewerCompact',
   mixins: [cueDisplayMixin, scriptNavigationMixin, scriptDisplayMixin],
   events: ['last-line-change', 'first-line-change', 'start-interval'],
@@ -255,22 +256,22 @@ export default {
     };
   },
   computed: {
-    isFirstRowActScene() {
-      return this.needsActSceneLabel;
+    isFirstRowActScene(): boolean {
+      return (this as any).needsActSceneLabel;
     },
-    isFirstRowCues() {
-      return !this.needsActSceneLabel && this.cues.length > 0;
+    isFirstRowCues(): boolean {
+      return !(this as any).needsActSceneLabel && (this.cues as any[]).length > 0;
     },
-    isFirstRowContent() {
-      return !this.needsActSceneLabel && this.cues.length === 0;
+    isFirstRowContent(): boolean {
+      return !(this as any).needsActSceneLabel && (this.cues as any[]).length === 0;
     },
   },
   methods: {
-    addNewCue() {
-      this.$emit('add-cue', this.line.id);
+    addNewCue(): void {
+      this.$emit('add-cue', (this.line as any).id);
     },
   },
-};
+});
 </script>
 
 <style scoped>
diff --git a/client/src/vue_components/show/live/ScriptViewPane.vue b/client/src/vue_components/show/live/ScriptViewPane.vue
index e5d76612..64bd5b92 100644
--- a/client/src/vue_components/show/live/ScriptViewPane.vue
+++ b/client/src/vue_components/show/live/ScriptViewPane.vue
@@ -165,7 +165,8 @@
   </b-row>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { required } from 'vuelidate/lib/validators';
 import { mapGetters, mapActions, mapMutations } from 'vuex';
 import $ from 'jquery';
@@ -178,7 +179,7 @@ import ScriptLineViewerCompact from '@/vue_components/show/live/ScriptLineViewer
 import { LINE_TYPES } from '@/constants/lineTypes';
 import { isWholeLineCut as isWholeLineCutUtil } from '@/js/scriptUtils';
 
-export default {
+export default defineComponent({
   name: 'ScriptViewPane',
   components: {
     ScriptLineViewer,
@@ -235,26 +236,26 @@ export default {
       // Navigation state
       currentPage: 1,
       currentLineOnPage: 0,
-      currentLine: null,
-      previousLine: null,
+      currentLine: null as string | null,
+      previousLine: null as string | null,
       isScrollingProgrammatically: false,
 
       // UI state
       cueAddMode: false,
-      debounceContentSize: debounce(this.computeContentSize, 100),
+      debounceContentSize: debounce((this as any).computeContentSize, 100) as any,
 
       // Cue modal state
       newCueFormState: {
-        cueType: null,
-        ident: null,
-        lineId: null,
+        cueType: null as any,
+        ident: null as string | null,
+        lineId: null as number | null,
       },
       submittingNewCue: false,
 
       // Interval modal state
-      intervalActId: null,
+      intervalActId: null as number | null,
       intervalTimerValue: '00:00:00',
-      intervalTimerContext: null,
+      intervalTimerContext: null as any,
 
       // Session control
       stoppingSession: false,
@@ -274,10 +275,10 @@ export default {
     },
   },
   computed: {
-    pageIter() {
+    pageIter(): number[] {
       return [...Array(this.currentMaxPage).keys()].map((i) => i + 1);
     },
-    intervalTimerLength() {
+    intervalTimerLength(): number {
       if (this.intervalTimerContext == null) {
         return 0;
       }
@@ -287,33 +288,35 @@ export default {
         this.intervalTimerContext.seconds
       );
     },
-    cueTypeOptions() {
+    cueTypeOptions(): any[] {
       return [
         { value: null, text: 'N/A' },
-        ...this.CUE_TYPES.map((cueType) => ({
+        ...(this as any).CUE_TYPES.map((cueType: any) => ({
           value: cueType.id,
           text: `${cueType.prefix}: ${cueType.description}`,
         })),
       ];
     },
-    totalCueCount() {
+    totalCueCount(): number {
       let count = 0;
-      Object.keys(this.SCRIPT_CUES).forEach((line) => {
-        count += this.SCRIPT_CUES[line].length;
-      }, this);
+      const scriptCues = (this as any).SCRIPT_CUES as Record<string, any[]>;
+      Object.keys(scriptCues).forEach((line) => {
+        count += scriptCues[line].length;
+      });
       return count;
     },
-    flatScriptCues() {
-      return Object.keys(this.SCRIPT_CUES)
-        .map((key) => this.SCRIPT_CUES[key])
+    flatScriptCues(): any[] {
+      const scriptCues = (this as any).SCRIPT_CUES as Record<string, any[]>;
+      return Object.keys(scriptCues)
+        .map((key) => scriptCues[key])
         .flat();
     },
-    isDuplicateCue() {
+    isDuplicateCue(): boolean {
       if (!this.newCueFormState.ident || !this.newCueFormState.cueType) {
         return false;
       }
       return this.flatScriptCues.some(
-        (cue) =>
+        (cue: any) =>
           cue.cue_type_id === this.newCueFormState.cueType &&
           cue.ident === this.newCueFormState.ident
       );
@@ -335,11 +338,12 @@ export default {
     ]),
   },
   watch: {
-    sessionFollowData() {
-      if (this.isScriptFollowing && this.sessionFollowData.current_line) {
-        const currentLineElement = document.getElementById(this.sessionFollowData.current_line);
+    sessionFollowData(): void {
+      const followData = this.sessionFollowData as any;
+      if (this.isScriptFollowing && followData.current_line) {
+        const currentLineElement = document.getElementById(followData.current_line);
         if (currentLineElement != null) {
-          const idParts = this.sessionFollowData.current_line.split('_');
+          const idParts = followData.current_line.split('_');
           const page = parseInt(idParts[1], 10);
           const line = parseInt(idParts[3], 10);
 
@@ -360,7 +364,7 @@ export default {
         }
       }
     },
-    totalCueCount() {
+    totalCueCount(): void {
       this.$nextTick(() => {
         if (this.initialLoad) {
           this.resumeNavigation();
@@ -368,27 +372,27 @@ export default {
       });
     },
   },
-  async mounted() {
+  async mounted(): Promise<void> {
     // Load all independent data in parallel
     await Promise.all([
       // User data (style overrides loaded after user resolves)
-      this.GET_CURRENT_USER().then(() => {
-        if (this.CURRENT_USER != null) {
+      (this as any).GET_CURRENT_USER().then(() => {
+        if ((this as any).CURRENT_USER != null) {
           return Promise.all([
-            this.GET_STAGE_DIRECTION_STYLE_OVERRIDES(),
-            this.GET_CUE_COLOUR_OVERRIDES(),
+            (this as any).GET_STAGE_DIRECTION_STYLE_OVERRIDES(),
+            (this as any).GET_CUE_COLOUR_OVERRIDES(),
           ]);
         }
         return Promise.resolve();
       }),
       // Show metadata
-      this.GET_SCENE_LIST(),
-      this.GET_CHARACTER_LIST(),
-      this.GET_CHARACTER_GROUP_LIST(),
-      this.GET_CUE_TYPES(),
-      this.LOAD_CUES(),
-      this.GET_CUTS(),
-      this.GET_STAGE_DIRECTION_STYLES(),
+      (this as any).GET_SCENE_LIST(),
+      (this as any).GET_CHARACTER_LIST(),
+      (this as any).GET_CHARACTER_GROUP_LIST(),
+      (this as any).GET_CUE_TYPES(),
+      (this as any).LOAD_CUES(),
+      (this as any).GET_CUTS(),
+      (this as any).GET_STAGE_DIRECTION_STYLES(),
       // Script page count
       this.getMaxScriptPage(),
     ]);
@@ -451,20 +455,20 @@ export default {
     window.addEventListener('resize', this.debounceContentSize);
     this.$emit('script-loaded');
   },
-  destroyed() {
+  destroyed(): void {
     this.removeNavigation();
     window.removeEventListener('resize', this.debounceContentSize);
   },
   methods: {
     // Navigation setup/teardown
-    setupNavigation() {
+    setupNavigation(): void {
       window.addEventListener('keydown', this.handleKeyPress);
       const scriptContainer = document.getElementById('script-container');
       if (scriptContainer) {
         scriptContainer.addEventListener('wheel', this.handleWheelNavigation, { passive: false });
       }
     },
-    removeNavigation() {
+    removeNavigation(): void {
       window.removeEventListener('keydown', this.handleKeyPress);
       const scriptContainer = document.getElementById('script-container');
       if (scriptContainer) {
@@ -473,12 +477,12 @@ export default {
     },
 
     // Navigation execution
-    navigateTo(targetPage, targetLineOnPage, preventScroll = false) {
+    navigateTo(targetPage: number, targetLineOnPage: number, preventScroll = false): boolean {
       if (targetPage > Number(this.currentLoadedPage)) {
         return false;
       }
 
-      const pageLines = this.GET_SCRIPT_PAGE(targetPage);
+      const pageLines = (this as any).GET_SCRIPT_PAGE(targetPage);
       if (!pageLines || targetLineOnPage >= pageLines.length) {
         return false;
       }
@@ -513,7 +517,7 @@ export default {
         }
 
         if (this.fullLoad) {
-          this.$socket.sendObj({
+          (this as any).$socket.sendObj({
             OP: 'SCRIPT_SCROLL',
             DATA: {
               previous_line: this.previousLine,
@@ -530,7 +534,11 @@ export default {
 
       return true;
     },
-    findContextElement(targetPage, targetLineOnPage, contextLines) {
+    findContextElement(
+      targetPage: number,
+      targetLineOnPage: number,
+      contextLines: number
+    ): Element | null {
       let currentPage = targetPage;
       let currentLine = targetLineOnPage;
       let visibleLinesFound = 0;
@@ -544,7 +552,7 @@ export default {
             return document.getElementById('page_1_line_0');
           }
 
-          const prevPageLines = this.GET_SCRIPT_PAGE(currentPage);
+          const prevPageLines = (this as any).GET_SCRIPT_PAGE(currentPage);
           if (!prevPageLines || prevPageLines.length === 0) {
             continue;
           }
@@ -552,7 +560,7 @@ export default {
           currentLine = prevPageLines.length - 1;
         }
 
-        const pageLines = this.GET_SCRIPT_PAGE(currentPage);
+        const pageLines = (this as any).GET_SCRIPT_PAGE(currentPage);
         if (pageLines && currentLine < pageLines.length) {
           const line = pageLines[currentLine];
           if (!this.isWholeLineCut(line)) {
@@ -571,7 +579,7 @@ export default {
 
       return null;
     },
-    navigateRelative(deltaPage, deltaLine) {
+    navigateRelative(deltaPage: number, deltaLine: number): boolean {
       if (deltaLine === 0 && deltaPage === 0) return true;
 
       const direction = deltaLine > 0 ? 1 : -1;
@@ -591,13 +599,13 @@ export default {
             newLineOnPage = 0;
             break;
           } else {
-            const prevPageLines = this.GET_SCRIPT_PAGE(newPage);
+            const prevPageLines = (this as any).GET_SCRIPT_PAGE(newPage);
             if (!prevPageLines) break;
             newLineOnPage = prevPageLines.length - 1;
             if (newLineOnPage < 0) newLineOnPage = 0;
           }
         } else {
-          const currentPageLines = this.GET_SCRIPT_PAGE(newPage);
+          const currentPageLines = (this as any).GET_SCRIPT_PAGE(newPage);
           if (!currentPageLines) break;
           if (newLineOnPage >= currentPageLines.length) {
             newPage++;
@@ -611,7 +619,7 @@ export default {
           }
         }
 
-        const pageLines = this.GET_SCRIPT_PAGE(newPage);
+        const pageLines = (this as any).GET_SCRIPT_PAGE(newPage);
         if (pageLines && newLineOnPage < pageLines.length) {
           const currentLine = pageLines[newLineOnPage];
           if (!this.isWholeLineCut(currentLine)) {
@@ -629,7 +637,7 @@ export default {
     },
 
     // Input handlers
-    handleKeyPress(event) {
+    handleKeyPress(event: KeyboardEvent): void {
       if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
         this.handleKeyNavigation(event);
       } else if (event.key === 'PageUp' || event.key === 'PageDown') {
@@ -638,9 +646,9 @@ export default {
         this.handleCueEditToggle(event);
       }
     },
-    handleCueEditToggle(event) {
+    handleCueEditToggle(event: KeyboardEvent): void {
       event.preventDefault();
-      if (this.IS_SHOW_EDITOR) {
+      if ((this as any).IS_SHOW_EDITOR) {
         this.cueAddMode = !this.cueAddMode;
         this.$nextTick(() => {
           if (this.initialLoad) {
@@ -651,7 +659,7 @@ export default {
         this.cueAddMode = false;
       }
     },
-    handleKeyNavigation(event) {
+    handleKeyNavigation(event: KeyboardEvent): void {
       if (
         !this.isScriptLeader ||
         !this.initialLoad ||
@@ -666,7 +674,7 @@ export default {
       const delta = event.key === 'ArrowDown' ? 1 : -1;
       this.navigateRelative(0, delta);
     },
-    handlePageNavigation(event) {
+    handlePageNavigation(event: KeyboardEvent): void {
       if (
         !this.isScriptLeader ||
         !this.initialLoad ||
@@ -689,7 +697,7 @@ export default {
 
       this.navigateTo(targetPage, 0);
     },
-    handleWheelNavigation(event) {
+    handleWheelNavigation(event: WheelEvent): void {
       if (
         !this.isScriptLeader ||
         !this.initialLoad ||
@@ -700,9 +708,10 @@ export default {
         return;
 
       const scriptContainer = document.getElementById('script-container');
-      const isAtTop = scriptContainer.scrollTop === 0;
+      const isAtTop = scriptContainer!.scrollTop === 0;
       const isAtBottom =
-        scriptContainer.scrollHeight - scriptContainer.scrollTop === scriptContainer.clientHeight;
+        scriptContainer!.scrollHeight - scriptContainer!.scrollTop ===
+        scriptContainer!.clientHeight;
 
       if ((event.deltaY > 0 && !isAtBottom) || (event.deltaY < 0 && !isAtTop)) {
         event.preventDefault();
@@ -713,7 +722,7 @@ export default {
     },
 
     // Navigation initialization
-    initializeNavigation() {
+    initializeNavigation(): void {
       if (this.initialLineRef) {
         const parts = this.initialLineRef.split('_');
         if (parts.length >= 4) {
@@ -731,9 +740,9 @@ export default {
         this.navigateTo(1, 0);
       }
     },
-    resumeNavigation() {
-      if (this.sessionFollowData.current_line) {
-        const parts = this.sessionFollowData.current_line.split('_');
+    resumeNavigation(): void {
+      if ((this.sessionFollowData as any).current_line) {
+        const parts = (this.sessionFollowData as any).current_line.split('_');
         if (parts.length >= 4) {
           const page = parseInt(parts[1], 10);
           const line = parseInt(parts[3], 10);
@@ -749,7 +758,7 @@ export default {
     },
 
     // Script loading
-    async loadCompiledScript() {
+    async loadCompiledScript(): Promise<boolean> {
       const response = await fetch(`${makeURL('/api/v1/show/script/compiled')}`, {
         method: 'GET',
         headers: {
@@ -770,24 +779,24 @@ export default {
           if (pageNumber < minLoadedPage) {
             minLoadedPage = pageNumber;
           }
-          this.SET_SCRIPT_PAGE({
+          (this as any).SET_SCRIPT_PAGE({
             pageNumber,
             page: pageContents,
           });
-        }, this);
+        });
         this.currentLoadedPage = maxLoadedPage;
         this.currentMinLoadedPage = minLoadedPage;
         return true;
       }
       return false;
     },
-    async loadNextPage() {
+    async loadNextPage(): Promise<void> {
       if (this.currentLoadedPage < this.currentMaxPage) {
         this.currentLoadedPage += 1;
-        await this.LOAD_SCRIPT_PAGE(this.currentLoadedPage);
+        await (this as any).LOAD_SCRIPT_PAGE(this.currentLoadedPage);
       }
     },
-    async getMaxScriptPage() {
+    async getMaxScriptPage(): Promise<void> {
       const response = await fetch(`${makeURL('/api/v1/show/script/max_page')}`, {
         method: 'GET',
         headers: {
@@ -861,14 +870,13 @@ export default {
     },
 
     // Line/cue helpers
-    getPreviousLineForIndex(pageIndex, lineIndex) {
+    getPreviousLineForIndex(pageIndex: number, lineIndex: number): any {
       if (lineIndex > 0) {
-        return this.GET_SCRIPT_PAGE(pageIndex)[lineIndex - 1];
+        return (this as any).GET_SCRIPT_PAGE(pageIndex)[lineIndex - 1];
       }
       let loopPageNo = pageIndex - 1;
       while (loopPageNo >= 1) {
-        let loopPage = null;
-        loopPage = this.GET_SCRIPT_PAGE(loopPageNo);
+        const loopPage = (this as any).GET_SCRIPT_PAGE(loopPageNo);
         if (loopPage.length > 0) {
           return loopPage[loopPage.length - 1];
         }
@@ -876,14 +884,13 @@ export default {
       }
       return null;
     },
-    getPreviousLineIndex(pageIndex, lineIndex) {
+    getPreviousLineIndex(pageIndex: number, lineIndex: number): number | null {
       if (lineIndex > 0) {
         return lineIndex - 1;
       }
       let loopPageNo = pageIndex - 1;
       while (loopPageNo >= 1) {
-        let loopPage = null;
-        loopPage = this.GET_SCRIPT_PAGE(loopPageNo);
+        const loopPage = (this as any).GET_SCRIPT_PAGE(loopPageNo);
         if (loopPage.length > 0) {
           return loopPage.length - 1;
         }
@@ -891,28 +898,29 @@ export default {
       }
       return null;
     },
-    getCuesForLine(line) {
-      if (Object.keys(this.SCRIPT_CUES).includes(line.id.toString())) {
-        return this.SCRIPT_CUES[line.id.toString()];
+    getCuesForLine(line: any): any[] {
+      const scriptCues = (this as any).SCRIPT_CUES as Record<string, any[]>;
+      if (Object.keys(scriptCues).includes(line.id.toString())) {
+        return scriptCues[line.id.toString()];
       }
       return [];
     },
-    isWholeLineCut(line) {
-      return isWholeLineCutUtil(line, this.SCRIPT_CUTS);
+    isWholeLineCut(line: any): boolean {
+      return isWholeLineCutUtil(line, (this as any).SCRIPT_CUTS);
     },
-    getSpacingBefore(page, index) {
+    getSpacingBefore(page: number, index: number): number {
       let spacingCount = 0;
       let currentPage = page;
       let currentIndex = index - 1;
 
       while (currentPage >= 1) {
-        const pageLines = this.GET_SCRIPT_PAGE(currentPage);
+        const pageLines = (this as any).GET_SCRIPT_PAGE(currentPage);
 
         if (currentIndex < 0) {
           currentPage--;
           if (currentPage < 1) break;
 
-          const prevPageLines = this.GET_SCRIPT_PAGE(currentPage);
+          const prevPageLines = (this as any).GET_SCRIPT_PAGE(currentPage);
           if (!prevPageLines || prevPageLines.length === 0) break;
           currentIndex = prevPageLines.length - 1;
 
@@ -935,7 +943,7 @@ export default {
     },
 
     // Line change handlers
-    async handleLastLineChange(lastPage, lineIndex) {
+    async handleLastLineChange(lastPage: number, lineIndex: number): Promise<void> {
       this.previousLastPage = this.currentLastPage;
       this.currentLastPage = lastPage;
       const cutoffPage = this.currentLoadedPage - this.pageBatchSize;
@@ -953,54 +961,58 @@ export default {
       }
       await this.$nextTick();
     },
-    async handleFirstLineChange(firstPage, lineIndex, previousLine) {
+    async handleFirstLineChange(
+      firstPage: number,
+      lineIndex: number,
+      previousLine: string
+    ): Promise<void> {
       this.previousFirstPage = this.currentFirstPage;
       this.currentFirstPage = firstPage;
       this.previousLine = previousLine;
       this.currentLine = `page_${firstPage}_line_${lineIndex}`;
 
       const cutoffPage = firstPage - this.pageBatchSize;
-      if (this.currentMinLoadedPage > cutoffPage) {
+      if ((this.currentMinLoadedPage ?? 0) > cutoffPage) {
         for (let pageLoop = 0; pageLoop < this.pageBatchSize; pageLoop++) {
-          if (this.currentMinLoadedPage > 1) {
-            this.currentMinLoadedPage -= 1;
+          if ((this.currentMinLoadedPage ?? 0) > 1) {
+            this.currentMinLoadedPage = (this.currentMinLoadedPage ?? 1) - 1;
 
-            await this.LOAD_SCRIPT_PAGE(this.currentMinLoadedPage);
+            await (this as any).LOAD_SCRIPT_PAGE(this.currentMinLoadedPage);
           }
         }
       }
     },
 
     // Interval modal methods
-    configureInterval(actId) {
+    configureInterval(actId: number): void {
       this.intervalActId = actId;
-      this.$bvModal.show('start-interval-modal');
+      (this as any).$bvModal.show('start-interval-modal');
     },
-    resetIntervalState() {
+    resetIntervalState(): void {
       this.intervalTimerContext = null;
       this.intervalTimerValue = '00:00:00';
     },
-    onIntervalTimerContext(ctx) {
+    onIntervalTimerContext(ctx: any): void {
       this.intervalTimerContext = ctx;
     },
-    startInterval() {
-      this.$socket.sendObj({
+    startInterval(): void {
+      (this as any).$socket.sendObj({
         OP: 'BEGIN_INTERVAL',
         DATA: {
           actId: this.intervalActId,
           length: this.intervalTimerLength,
         },
       });
-      this.$toast.success('Interval started!');
+      (this as any).$toast.success('Interval started!');
     },
 
     // Cue modal methods
-    openNewCueModal(lineId) {
+    openNewCueModal(lineId: number): void {
       this.resetNewCueForm();
       this.newCueFormState.lineId = lineId;
-      this.$bvModal.show('new-cue-modal');
+      (this as any).$bvModal.show('new-cue-modal');
     },
-    resetNewCueForm() {
+    resetNewCueForm(): void {
       this.newCueFormState = {
         cueType: null,
         ident: null,
@@ -1009,24 +1021,24 @@ export default {
       this.submittingNewCue = false;
 
       this.$nextTick(() => {
-        this.$v.$reset();
+        (this as any).$v.$reset();
       });
     },
-    validateNewCueState(name) {
-      const { $dirty, $error } = this.$v.newCueFormState[name];
+    validateNewCueState(name: string): boolean | null {
+      const { $dirty, $error } = (this as any).$v.newCueFormState[name];
       return $dirty ? !$error : null;
     },
-    async onSubmitNewCue(event) {
-      this.$v.newCueFormState.$touch();
-      if (this.$v.newCueFormState.$anyError || this.submittingNewCue) {
+    async onSubmitNewCue(event: Event): Promise<void> {
+      (this as any).$v.newCueFormState.$touch();
+      if ((this as any).$v.newCueFormState.$anyError || this.submittingNewCue) {
         event.preventDefault();
         return;
       }
 
       this.submittingNewCue = true;
       try {
-        await this.ADD_NEW_CUE(this.newCueFormState);
-        this.$bvModal.hide('new-cue-modal');
+        await (this as any).ADD_NEW_CUE(this.newCueFormState);
+        (this as any).$bvModal.hide('new-cue-modal');
         this.resetNewCueForm();
       } catch (error) {
         log.error('Error submitting new cue:', error);
@@ -1037,38 +1049,35 @@ export default {
     },
 
     // Scroll helper - scrolls element into view within the script container only
-    scrollToElement(element) {
+    scrollToElement(element: Element | null): void {
       const container = document.getElementById('script-container');
       if (!container || !element) return;
 
-      // Calculate the element's position relative to the container
       const elementRect = element.getBoundingClientRect();
       const containerRect = container.getBoundingClientRect();
 
-      // Calculate where the element is relative to the container's scroll position
       const elementTopRelativeToContainer =
         elementRect.top - containerRect.top + container.scrollTop;
 
-      // Scroll the container to show the element at the top
       container.scrollTop = elementTopRelativeToContainer;
     },
 
     // Exposed methods (called via ref from parent)
-    focusScript() {
-      this.$refs['script-container']?.focus();
+    focusScript(): void {
+      (this.$refs['script-container'] as HTMLElement | undefined)?.focus();
     },
 
     // Session control
-    async stopShow() {
+    async stopShow(): Promise<void> {
       this.stoppingSession = true;
       const response = await fetch(`${makeURL('/api/v1/show/sessions/stop')}`, {
         method: 'POST',
       });
       if (response.ok) {
-        this.$toast.success('Stopped show session');
+        (this as any).$toast.success('Stopped show session');
       } else {
         log.error('Unable to stop show session');
-        this.$toast.error('Unable to stop show session');
+        (this as any).$toast.error('Unable to stop show session');
       }
       this.stoppingSession = false;
     },
@@ -1089,7 +1098,7 @@ export default {
     ]),
     ...mapMutations(['SET_SCRIPT_PAGE']),
   },
-};
+});
 </script>
 
 <style scoped>
diff --git a/client/src/vue_components/show/live/StageManagerPane.vue b/client/src/vue_components/show/live/StageManagerPane.vue
index 8e633037..6f9c530f 100644
--- a/client/src/vue_components/show/live/StageManagerPane.vue
+++ b/client/src/vue_components/show/live/StageManagerPane.vue
@@ -220,12 +220,13 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { mapGetters, mapActions } from 'vuex';
 import { debounce } from 'lodash';
 import Vue from 'vue';
 
-export default {
+export default defineComponent({
   name: 'StageManagerPane',
   props: {
     sessionFollowData: {
@@ -236,25 +237,25 @@ export default {
   data() {
     return {
       loaded: false,
-      expandedScenes: {},
-      pinnedScenes: {},
-      debounceContentSize: null,
-      smPlanScene: null,
+      expandedScenes: {} as Record<number, boolean>,
+      pinnedScenes: {} as Record<number, boolean>,
+      debounceContentSize: null as any,
+      smPlanScene: null as any,
       smPlanSet: true,
       smPlanStrike: true,
     };
   },
   computed: {
-    orderedScenes() {
-      return this.ORDERED_SCENES;
+    orderedScenes(): any[] {
+      return (this as any).ORDERED_SCENES || [];
     },
-    currentSceneId() {
-      if (!this.sessionFollowData?.current_line) {
+    currentSceneId(): number | null {
+      const followData = this.sessionFollowData as any;
+      if (!followData?.current_line) {
         return null;
       }
 
-      // Parse page_X_line_Y format
-      const parts = this.sessionFollowData.current_line.split('_');
+      const parts = followData.current_line.split('_');
       if (parts.length < 4) {
         return null;
       }
@@ -262,32 +263,32 @@ export default {
       const pageNumber = parseInt(parts[1], 10);
       const lineIndex = parseInt(parts[3], 10);
 
-      // Get the lines for this page
-      const pageLines = this.GET_SCRIPT_PAGE(pageNumber);
+      const pageLines = (this as any).GET_SCRIPT_PAGE(pageNumber);
       if (!pageLines || lineIndex >= pageLines.length) {
         return null;
       }
 
-      // Return the scene_id from the current line
       return pageLines[lineIndex]?.scene_id || null;
     },
-    nextSceneId() {
+    nextSceneId(): number | null {
       if (this.currentSceneId === null) {
         return null;
       }
-      const currentIndex = this.orderedScenes.findIndex((s) => s.id === this.currentSceneId);
+      const currentIndex = this.orderedScenes.findIndex((s: any) => s.id === this.currentSceneId);
       if (currentIndex === -1 || currentIndex >= this.orderedScenes.length - 1) {
         return null;
       }
       return this.orderedScenes[currentIndex + 1].id;
     },
-    propsDict() {
-      // Create a lookup dictionary for props by ID
-      return Object.fromEntries(this.PROPS_LIST.map((prop) => [prop.id, prop]));
+    propsDict(): Record<number, any> {
+      return Object.fromEntries(
+        ((this as any).PROPS_LIST as any[]).map((prop: any) => [prop.id, prop])
+      );
     },
-    sceneryDict() {
-      // Create a lookup dictionary for scenery by ID
-      return Object.fromEntries(this.SCENERY_LIST.map((item) => [item.id, item]));
+    sceneryDict(): Record<number, any> {
+      return Object.fromEntries(
+        ((this as any).SCENERY_LIST as any[]).map((item: any) => [item.id, item])
+      );
     },
     ...mapGetters([
       'ORDERED_SCENES',
@@ -305,30 +306,25 @@ export default {
     ]),
   },
   watch: {
-    currentSceneId(newSceneId, oldSceneId) {
+    currentSceneId(newSceneId: number | null, oldSceneId: number | null): void {
       if (newSceneId !== null && newSceneId !== oldSceneId) {
-        const currentIndex = this.orderedScenes.findIndex((s) => s.id === newSceneId);
+        const currentIndex = this.orderedScenes.findIndex((s: any) => s.id === newSceneId);
 
-        // Determine which scenes should be auto-expanded: current + next
         const autoExpandIds = new Set([newSceneId]);
         if (currentIndex !== -1 && currentIndex < this.orderedScenes.length - 1) {
           autoExpandIds.add(this.orderedScenes[currentIndex + 1].id);
         }
 
-        // Collapse all scenes that aren't current/next and aren't pinned
-        // This handles both forward and backward navigation
-        this.orderedScenes.forEach((scene) => {
+        this.orderedScenes.forEach((scene: any) => {
           if (!autoExpandIds.has(scene.id) && !this.pinnedScenes[scene.id]) {
             Vue.set(this.expandedScenes, scene.id, false);
           }
         });
 
-        // Expand current and next scenes
         autoExpandIds.forEach((sceneId) => {
           Vue.set(this.expandedScenes, sceneId, true);
         });
 
-        // Auto-scroll to keep current scene visible with previous scene above
         this.$nextTick(() => {
           this.autoScrollToCurrentScene(newSceneId);
         });
@@ -336,9 +332,8 @@ export default {
     },
     orderedScenes: {
       immediate: true,
-      handler(scenes) {
-        // Initialize expanded state for all scenes (expand first scene by default)
-        scenes.forEach((scene, index) => {
+      handler(scenes: any[]): void {
+        scenes.forEach((scene: any, index: number) => {
           if (this.expandedScenes[scene.id] === undefined) {
             Vue.set(this.expandedScenes, scene.id, index === 0);
           }
@@ -346,105 +341,96 @@ export default {
       },
     },
   },
-  created() {
+  created(): void {
     this.debounceContentSize = debounce(this.computeContentSize, 100);
   },
-  async mounted() {
-    // Load required data
+  async mounted(): Promise<void> {
     await Promise.all([
-      this.GET_ACT_LIST(),
-      this.GET_SCENE_LIST(),
-      this.GET_PROPS_LIST(),
-      this.GET_SCENERY_LIST(),
-      this.GET_PROPS_ALLOCATIONS(),
-      this.GET_SCENERY_ALLOCATIONS(),
-      this.GET_PROP_TYPES(),
-      this.GET_SCENERY_TYPES(),
-      this.GET_CREW_LIST(),
-      this.GET_CREW_ASSIGNMENTS(),
+      (this as any).GET_ACT_LIST(),
+      (this as any).GET_SCENE_LIST(),
+      (this as any).GET_PROPS_LIST(),
+      (this as any).GET_SCENERY_LIST(),
+      (this as any).GET_PROPS_ALLOCATIONS(),
+      (this as any).GET_SCENERY_ALLOCATIONS(),
+      (this as any).GET_PROP_TYPES(),
+      (this as any).GET_SCENERY_TYPES(),
+      (this as any).GET_CREW_LIST(),
+      (this as any).GET_CREW_ASSIGNMENTS(),
     ]);
     this.loaded = true;
 
-    // Compute initial size and listen for resize
     this.$nextTick(() => {
       this.computeContentSize();
     });
     window.addEventListener('resize', this.debounceContentSize);
   },
-  destroyed() {
+  destroyed(): void {
     window.removeEventListener('resize', this.debounceContentSize);
   },
   methods: {
-    computeContentSize() {
-      const container = this.$refs.paneContainer;
+    computeContentSize(): void {
+      const container = this.$refs.paneContainer as HTMLElement | undefined;
       if (!container) return;
 
-      // Calculate available height from viewport minus container's top position
       const containerTop = container.getBoundingClientRect().top;
       const availableHeight = document.documentElement.clientHeight - containerTop;
       container.style.height = `${availableHeight}px`;
     },
-    toggleScene(sceneId) {
+    toggleScene(sceneId: number): void {
       const isCurrentlyExpanded = this.expandedScenes[sceneId];
       Vue.set(this.expandedScenes, sceneId, !isCurrentlyExpanded);
 
-      // Track pinned state: opening = pin, closing = unpin
       if (isCurrentlyExpanded) {
-        // User is closing - unpin the scene
         Vue.set(this.pinnedScenes, sceneId, false);
       } else {
-        // User is opening - pin the scene so it won't auto-collapse
         Vue.set(this.pinnedScenes, sceneId, true);
       }
     },
-    getSceneDisplayName(scene) {
-      // Scene uses 'act' field, not 'act_id'
-      const act = this.ACT_BY_ID(scene.act);
+    getSceneDisplayName(scene: any): string {
+      const act = (this as any).ACT_BY_ID(scene.act);
       const actName = act?.name || 'Unknown Act';
       return `${actName}: ${scene.name}`;
     },
-    getPropsForScene(sceneId) {
-      // Filter props allocations for this scene and map to prop details
-      // Note: allocation uses 'props_id' not 'prop_id'
-      return this.PROPS_ALLOCATIONS.filter((alloc) => alloc.scene_id === sceneId)
-        .map((alloc) => this.propsDict[alloc.props_id])
-        .filter((prop) => prop != null);
+    getPropsForScene(sceneId: number): any[] {
+      const propsAllocations = (this as any).PROPS_ALLOCATIONS as any[];
+      return propsAllocations
+        .filter((alloc: any) => alloc.scene_id === sceneId)
+        .map((alloc: any) => this.propsDict[alloc.props_id])
+        .filter((prop: any) => prop != null);
     },
-    getSceneryForScene(sceneId) {
-      // Filter scenery allocations for this scene and map to scenery details
-      return this.SCENERY_ALLOCATIONS.filter((alloc) => alloc.scene_id === sceneId)
-        .map((alloc) => this.sceneryDict[alloc.scenery_id])
-        .filter((scenery) => scenery != null);
+    getSceneryForScene(sceneId: number): any[] {
+      const sceneryAllocations = (this as any).SCENERY_ALLOCATIONS as any[];
+      return sceneryAllocations
+        .filter((alloc: any) => alloc.scene_id === sceneId)
+        .map((alloc: any) => this.sceneryDict[alloc.scenery_id])
+        .filter((scenery: any) => scenery != null);
     },
-    getPropDisplayName(prop) {
-      const propType = this.PROP_TYPES_DICT[prop.prop_type_id];
+    getPropDisplayName(prop: any): string {
+      const propType = ((this as any).PROP_TYPES_DICT as Record<number, any>)[prop.prop_type_id];
       return propType ? `${propType.name}: ${prop.name}` : prop.name;
     },
-    getSceneryDisplayName(scenery) {
-      const sceneryType = this.SCENERY_TYPES_DICT[scenery.scenery_type_id];
+    getSceneryDisplayName(scenery: any): string {
+      const sceneryType = ((this as any).SCENERY_TYPES_DICT as Record<number, any>)[
+        scenery.scenery_type_id
+      ];
       return sceneryType ? `${sceneryType.name}: ${scenery.name}` : scenery.name;
     },
-    autoScrollToCurrentScene(currentSceneId) {
-      const container = this.$refs.scrollContainer;
+    autoScrollToCurrentScene(currentSceneId: number): void {
+      const container = this.$refs.scrollContainer as HTMLElement | undefined;
       if (!container) return;
 
-      // Find the index of the current scene
-      const currentIndex = this.orderedScenes.findIndex((s) => s.id === currentSceneId);
+      const currentIndex = this.orderedScenes.findIndex((s: any) => s.id === currentSceneId);
       if (currentIndex === -1) return;
 
-      // Determine target element: previous scene if exists, otherwise current scene
-      let targetSceneId;
+      let targetSceneId: number;
       if (currentIndex > 0) {
-        // Scroll to show previous scene at top, so current scene is visible below
         targetSceneId = this.orderedScenes[currentIndex - 1].id;
       } else {
-        // First scene - scroll to top
         targetSceneId = currentSceneId;
       }
 
-      const targetRef = this.$refs[`scene-card-${targetSceneId}`];
+      const targetRef = this.$refs[`scene-card-${targetSceneId}`] as any;
       if (targetRef && targetRef[0]) {
-        // Scroll within the container only, not the whole page
         const element = targetRef[0].$el || targetRef[0];
         const containerTop = container.getBoundingClientRect().top;
         const elementTop = element.getBoundingClientRect().top;
@@ -452,89 +438,91 @@ export default {
         container.scrollTo({ top: scrollOffset, behavior: 'smooth' });
       }
     },
-    resetSMPlanScene() {
+    resetSMPlanScene(): void {
       this.smPlanScene = null;
     },
-    showSMPlanModal(scene) {
+    showSMPlanModal(scene: any): void {
       this.smPlanScene = scene;
-      this.$bvModal.show('sm-plan-modal');
+      (this as any).$bvModal.show('sm-plan-modal');
     },
-    togglePlanSet() {
+    togglePlanSet(): void {
       this.smPlanSet = !this.smPlanSet;
     },
-    togglePlanStrike() {
+    togglePlanStrike(): void {
       this.smPlanStrike = !this.smPlanStrike;
     },
-    getPreviousScene(scene) {
-      const currentIndex = this.orderedScenes.findIndex((s) => s.id === scene.id);
+    getPreviousScene(scene: any): any | null {
+      const currentIndex = this.orderedScenes.findIndex((s: any) => s.id === scene.id);
       if (currentIndex <= 0) {
-        return null; // First scene or not found
+        return null;
       }
       return this.orderedScenes[currentIndex - 1];
     },
-    getSettingScenery(scene) {
+    getSettingScenery(scene: any): any[] {
       const currentScenery = this.getSceneryForScene(scene.id);
       const previousScene = this.getPreviousScene(scene);
       if (!previousScene) {
-        return currentScenery; // First scene - all items are being set
+        return currentScenery;
       }
       const previousSceneryIds = new Set(
-        this.getSceneryForScene(previousScene.id).map((s) => s.id)
+        this.getSceneryForScene(previousScene.id).map((s: any) => s.id)
       );
-      return currentScenery.filter((item) => !previousSceneryIds.has(item.id));
+      return currentScenery.filter((item: any) => !previousSceneryIds.has(item.id));
     },
-    getSettingProps(scene) {
+    getSettingProps(scene: any): any[] {
       const currentProps = this.getPropsForScene(scene.id);
       const previousScene = this.getPreviousScene(scene);
       if (!previousScene) {
-        return currentProps; // First scene - all items are being set
+        return currentProps;
       }
-      const previousPropsIds = new Set(this.getPropsForScene(previousScene.id).map((p) => p.id));
-      return currentProps.filter((item) => !previousPropsIds.has(item.id));
+      const previousPropsIds = new Set(
+        this.getPropsForScene(previousScene.id).map((p: any) => p.id)
+      );
+      return currentProps.filter((item: any) => !previousPropsIds.has(item.id));
     },
-    getStrikingScenery(scene) {
+    getStrikingScenery(scene: any): any[] {
       const previousScene = this.getPreviousScene(scene);
       if (!previousScene) {
-        return []; // First scene - nothing to strike
+        return [];
       }
-      const currentSceneryIds = new Set(this.getSceneryForScene(scene.id).map((s) => s.id));
+      const currentSceneryIds = new Set(this.getSceneryForScene(scene.id).map((s: any) => s.id));
       return this.getSceneryForScene(previousScene.id).filter(
-        (item) => !currentSceneryIds.has(item.id)
+        (item: any) => !currentSceneryIds.has(item.id)
       );
     },
-    getStrikingProps(scene) {
+    getStrikingProps(scene: any): any[] {
       const previousScene = this.getPreviousScene(scene);
       if (!previousScene) {
-        return []; // First scene - nothing to strike
+        return [];
       }
-      const currentPropsIds = new Set(this.getPropsForScene(scene.id).map((p) => p.id));
+      const currentPropsIds = new Set(this.getPropsForScene(scene.id).map((p: any) => p.id));
       return this.getPropsForScene(previousScene.id).filter(
-        (item) => !currentPropsIds.has(item.id)
+        (item: any) => !currentPropsIds.has(item.id)
       );
     },
-    formatCrewName(crew) {
+    formatCrewName(crew: any): string {
       if (!crew) return 'Unknown';
       return crew.last_name ? `${crew.first_name} ${crew.last_name}` : crew.first_name;
     },
-    getCrewNamesForSettingItem(item, itemType, scene) {
-      const assignments =
+    getCrewNamesForSettingItem(item: any, itemType: string, scene: any): string[] {
+      const assignmentsByCrew =
         itemType === 'scenery'
-          ? this.CREW_ASSIGNMENTS_BY_SCENERY[item.id] || []
-          : this.CREW_ASSIGNMENTS_BY_PROP[item.id] || [];
-      return assignments
-        .filter((a) => a.assignment_type === 'set' && a.scene_id === scene.id)
-        .map((a) => this.formatCrewName(this.CREW_MEMBER_BY_ID(a.crew_id)));
+          ? ((this as any).CREW_ASSIGNMENTS_BY_SCENERY as Record<number, any[]>)[item.id] || []
+          : ((this as any).CREW_ASSIGNMENTS_BY_PROP as Record<number, any[]>)[item.id] || [];
+      return assignmentsByCrew
+        .filter((a: any) => a.assignment_type === 'set' && a.scene_id === scene.id)
+        .map((a: any) => this.formatCrewName((this as any).CREW_MEMBER_BY_ID(a.crew_id)));
     },
-    getCrewNamesForStrikingItem(item, itemType, scene) {
+    getCrewNamesForStrikingItem(item: any, itemType: string, scene: any): string[] {
       const previousScene = this.getPreviousScene(scene);
       if (!previousScene) return [];
-      const assignments =
+      const assignmentsByCrew =
         itemType === 'scenery'
-          ? this.CREW_ASSIGNMENTS_BY_SCENERY[item.id] || []
-          : this.CREW_ASSIGNMENTS_BY_PROP[item.id] || [];
-      return assignments
-        .filter((a) => a.assignment_type === 'strike' && a.scene_id === previousScene.id)
-        .map((a) => this.formatCrewName(this.CREW_MEMBER_BY_ID(a.crew_id)));
+          ? ((this as any).CREW_ASSIGNMENTS_BY_SCENERY as Record<number, any[]>)[item.id] || []
+          : ((this as any).CREW_ASSIGNMENTS_BY_PROP as Record<number, any[]>)[item.id] || [];
+      return assignmentsByCrew
+        .filter((a: any) => a.assignment_type === 'strike' && a.scene_id === previousScene.id)
+        .map((a: any) => this.formatCrewName((this as any).CREW_MEMBER_BY_ID(a.crew_id)));
     },
     ...mapActions([
       'GET_ACT_LIST',
@@ -549,7 +537,7 @@ export default {
       'GET_CREW_ASSIGNMENTS',
     ]),
   },
-};
+});
 </script>
 
 <style scoped>
diff --git a/client/src/vue_components/user/ConfigRbac.vue b/client/src/vue_components/user/ConfigRbac.vue
index ac79910f..70fc0364 100644
--- a/client/src/vue_components/user/ConfigRbac.vue
+++ b/client/src/vue_components/user/ConfigRbac.vue
@@ -23,11 +23,12 @@
   </b-container>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { makeURL } from '@/js/utils';
 import RbacResource from '@/vue_components/user/RbacResource.vue';
 
-export default {
+export default defineComponent({
   name: 'ConfigRBAC',
   components: { RbacResource },
   props: {
@@ -40,16 +41,14 @@ export default {
     return {
       loaded: false,
       error: false,
-      rbacResources: null,
+      rbacResources: null as string[] | null,
     };
   },
   async mounted() {
     try {
       const response = await fetch(`${makeURL('/api/v1/rbac/user/resources')}`, {
         method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
       });
       if (response.ok) {
         const rbacResources = await response.json();
@@ -64,5 +63,5 @@ export default {
     }
     this.loaded = true;
   },
-};
+});
 </script>
diff --git a/client/src/vue_components/user/CreateUser.vue b/client/src/vue_components/user/CreateUser.vue
index bf3b2325..8cbd5cdf 100644
--- a/client/src/vue_components/user/CreateUser.vue
+++ b/client/src/vue_components/user/CreateUser.vue
@@ -62,19 +62,22 @@
   </b-form>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { required, minLength, sameAs } from 'vuelidate/lib/validators';
 import { mapActions, mapGetters } from 'vuex';
 
-function isUsernameUnique(value) {
+function isUsernameUnique(this: any, value: string): boolean {
   if (value === '') return true;
   if (this.USERS) {
-    return !this.USERS.map((x) => x.username.toLowerCase()).includes(value.toLowerCase());
+    return !this.USERS.map((x: { username: string }) => x.username.toLowerCase()).includes(
+      value.toLowerCase()
+    );
   }
   return true;
 }
 
-export default {
+export default defineComponent({
   name: 'CreateUser',
   props: {
     isFirstAdmin: {
@@ -98,39 +101,30 @@ export default {
   },
   validations: {
     state: {
-      username: {
-        required,
-        isUsernameUnique,
-      },
-      password: {
-        required,
-        minLength: minLength(6),
-      },
-      confirmPassword: {
-        required,
-        sameAsPassword: sameAs('password'),
-      },
+      username: { required, isUsernameUnique },
+      password: { required, minLength: minLength(6) },
+      confirmPassword: { required, sameAsPassword: sameAs('password') },
     },
   },
   computed: {
-    isDisabled() {
-      return Boolean(this.$v.state.$invalid);
+    isDisabled(): boolean {
+      return Boolean((this as any).$v.state.$invalid);
     },
     ...mapGetters(['USERS']),
   },
   methods: {
-    validateState(name) {
-      const { $dirty, $error } = this.$v.state[name];
+    validateState(name: string): boolean | null {
+      const { $dirty, $error } = (this as any).$v.state[name];
       return $dirty ? !$error : null;
     },
-    async createUser(event) {
-      this.$v.state.$touch();
-      if (this.$v.state.$anyError) {
+    async createUser(event: Event): Promise<void> {
+      (this as any).$v.state.$touch();
+      if ((this as any).$v.state.$anyError) {
         event.preventDefault();
       } else {
-        await this.CREATE_USER(this.state);
+        await (this as any).CREATE_USER(this.state);
         if (this.isFirstAdmin) {
-          await this.USER_LOGIN({
+          await (this as any).USER_LOGIN({
             username: this.state.username,
             password: this.state.password,
           });
@@ -140,5 +134,5 @@ export default {
     },
     ...mapActions(['CREATE_USER', 'USER_LOGIN']),
   },
-};
+});
 </script>
diff --git a/client/src/vue_components/user/RbacResource.vue b/client/src/vue_components/user/RbacResource.vue
index b584fce5..e4413413 100644
--- a/client/src/vue_components/user/RbacResource.vue
+++ b/client/src/vue_components/user/RbacResource.vue
@@ -40,10 +40,16 @@
   </b-container>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { makeURL } from '@/js/utils';
 
-export default {
+interface RbacRole {
+  key: string;
+  value: number;
+}
+
+export default defineComponent({
   name: 'RbacResource',
   props: {
     resource: {
@@ -59,19 +65,19 @@ export default {
     return {
       loaded: false,
       error: false,
-      rbacObjects: null,
-      displayFields: null,
-      roles: null,
+      rbacObjects: null as Array<[unknown, number]> | null,
+      displayFields: null as string[] | null,
+      roles: null as RbacRole[] | null,
       processing: false,
     };
   },
   computed: {
-    rbacRoles() {
-      return this.roles.map((x) => x.key);
+    rbacRoles(): string[] {
+      return (this.roles ?? []).map((x) => x.key);
     },
-    rbacRolesDict() {
-      const ret = {};
-      this.roles.forEach((role) => {
+    rbacRolesDict(): Record<string, number> {
+      const ret: Record<string, number> = {};
+      (this.roles ?? []).forEach((role) => {
         ret[role.key] = role.value;
       });
       return ret;
@@ -83,16 +89,14 @@ export default {
     this.loaded = true;
   },
   methods: {
-    getCellName(slot) {
+    getCellName(slot: string): string {
       return `cell(${slot})`;
     },
-    async getRoles() {
+    async getRoles(): Promise<void> {
       try {
         const response = await fetch(`${makeURL('/api/v1/rbac/roles')}`, {
           method: 'GET',
-          headers: {
-            'Content-Type': 'application/json',
-          },
+          headers: { 'Content-Type': 'application/json' },
         });
         if (response.ok) {
           const rbacRoles = await response.json();
@@ -106,17 +110,15 @@ export default {
         this.error = true;
       }
     },
-    async getObjects() {
+    async getObjects(): Promise<void> {
       const searchParams = new URLSearchParams({
         resource: this.resource,
-        user: this.userId,
+        user: String(this.userId),
       });
       try {
         const response = await fetch(`${makeURL('/api/v1/rbac/user/objects')}?${searchParams}`, {
           method: 'GET',
-          headers: {
-            'Content-Type': 'application/json',
-          },
+          headers: { 'Content-Type': 'application/json' },
         });
         if (response.ok) {
           const rbacObjects = await response.json();
@@ -131,20 +133,13 @@ export default {
         this.error = true;
       }
     },
-    async giveRole(object, role) {
+    async giveRole(object: unknown, role: number): Promise<void> {
       this.processing = true;
       try {
         const response = await fetch(`${makeURL('/api/v1/rbac/user/roles/grant')}`, {
           method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify({
-            resource: this.resource,
-            user: this.userId,
-            object,
-            role,
-          }),
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ resource: this.resource, user: this.userId, object, role }),
         });
         if (response.ok) {
           this.$toast.success('Granted role to user');
@@ -157,20 +152,13 @@ export default {
       await this.getObjects();
       this.processing = false;
     },
-    async revokeRole(object, role) {
+    async revokeRole(object: unknown, role: number): Promise<void> {
       this.processing = true;
       try {
         const response = await fetch(`${makeURL('/api/v1/rbac/user/roles/revoke')}`, {
           method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify({
-            resource: this.resource,
-            user: this.userId,
-            object,
-            role,
-          }),
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ resource: this.resource, user: this.userId, object, role }),
         });
         if (response.ok) {
           this.$toast.success('Revoked role from user');
@@ -184,5 +172,5 @@ export default {
       this.processing = false;
     },
   },
-};
+});
 </script>
diff --git a/client/src/vue_components/user/ResetPassword.vue b/client/src/vue_components/user/ResetPassword.vue
index 5348fb2a..46b1336c 100644
--- a/client/src/vue_components/user/ResetPassword.vue
+++ b/client/src/vue_components/user/ResetPassword.vue
@@ -59,10 +59,11 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { makeURL } from '@/js/utils';
 
-export default {
+export default defineComponent({
   name: 'ResetPassword',
   props: {
     userId: {
@@ -77,23 +78,19 @@ export default {
   data() {
     return {
       loading: false,
-      temporaryPassword: null,
+      temporaryPassword: null as string | null,
       showPassword: false,
     };
   },
   methods: {
-    async handleReset() {
+    async handleReset(): Promise<void> {
       this.loading = true;
 
       try {
         const response = await fetch(makeURL('/api/v1/auth/reset-password'), {
           method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify({
-            user_id: this.userId,
-          }),
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ user_id: this.userId }),
         });
 
         if (response.ok) {
@@ -105,20 +102,20 @@ export default {
           const error = await response.json();
           this.$toast.error(error.message || 'Failed to reset password');
         }
-      } catch (error) {
+      } catch {
         this.$toast.error('An error occurred while resetting password');
       } finally {
         this.loading = false;
       }
     },
-    async copyToClipboard() {
+    async copyToClipboard(): Promise<void> {
       try {
-        await navigator.clipboard.writeText(this.temporaryPassword);
+        await navigator.clipboard.writeText(this.temporaryPassword!);
         this.$toast.success('Password copied to clipboard');
-      } catch (error) {
+      } catch {
         this.$toast.error('Failed to copy to clipboard');
       }
     },
   },
-};
+});
 </script>
diff --git a/client/src/vue_components/user/settings/AboutUser.vue b/client/src/vue_components/user/settings/AboutUser.vue
index 2f0942cf..34c6ec3a 100644
--- a/client/src/vue_components/user/settings/AboutUser.vue
+++ b/client/src/vue_components/user/settings/AboutUser.vue
@@ -7,31 +7,32 @@
   </b-table-simple>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { mapActions, mapGetters } from 'vuex';
 import { titleCase } from '@/js/utils';
 
-export default {
+export default defineComponent({
   name: 'AboutUser',
   computed: {
-    tableData() {
-      const data = {};
-      Object.keys(this.CURRENT_USER).forEach(function updateTableDataKey(key) {
-        data[this.titleCase(key, '_')] = this.CURRENT_USER[key];
-      }, this);
+    tableData(): Record<string, unknown> {
+      const data: Record<string, unknown> = {};
+      Object.keys((this as any).CURRENT_USER).forEach((key) => {
+        data[titleCase(key, '_')] = (this as any).CURRENT_USER[key];
+      });
       return data;
     },
-    orderedKeys() {
+    orderedKeys(): string[] {
       return Object.keys(this.tableData).sort();
     },
     ...mapGetters(['CURRENT_USER']),
   },
-  async beforeMount() {
-    await this.GET_CURRENT_USER();
+  async beforeMount(): Promise<void> {
+    await (this as any).GET_CURRENT_USER();
   },
   methods: {
     titleCase,
     ...mapActions(['GET_CURRENT_USER']),
   },
-};
+});
 </script>
diff --git a/client/src/vue_components/user/settings/ApiToken.vue b/client/src/vue_components/user/settings/ApiToken.vue
index 6361fa48..134c20d5 100644
--- a/client/src/vue_components/user/settings/ApiToken.vue
+++ b/client/src/vue_components/user/settings/ApiToken.vue
@@ -118,12 +118,13 @@
   </b-container>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { mapActions } from 'vuex';
 import { baseURL } from '@/js/utils';
 import { BIconClipboard } from 'bootstrap-vue';
 
-export default {
+export default defineComponent({
   name: 'ApiToken',
   components: {
     BIconClipboard,
@@ -131,26 +132,26 @@ export default {
   data() {
     return {
       hasToken: false,
-      newlyGeneratedToken: null,
+      newlyGeneratedToken: null as string | null,
       loading: false,
       showRegenerateConfirm: false,
       showRevokeConfirm: false,
     };
   },
   computed: {
-    apiBaseUrl() {
+    apiBaseUrl(): string {
       return baseURL();
     },
   },
-  async mounted() {
+  async mounted(): Promise<void> {
     await this.checkTokenStatus();
   },
   methods: {
     ...mapActions(['GENERATE_API_TOKEN', 'REVOKE_API_TOKEN', 'GET_API_TOKEN']),
-    async checkTokenStatus() {
+    async checkTokenStatus(): Promise<void> {
       this.loading = true;
       try {
-        const data = await this.GET_API_TOKEN();
+        const data = await (this as any).GET_API_TOKEN();
         if (data) {
           this.hasToken = data.has_token;
         }
@@ -158,10 +159,10 @@ export default {
         this.loading = false;
       }
     },
-    async generateToken() {
+    async generateToken(): Promise<void> {
       this.loading = true;
       try {
-        const data = await this.GENERATE_API_TOKEN();
+        const data = await (this as any).GENERATE_API_TOKEN();
         if (data) {
           this.hasToken = true;
           this.newlyGeneratedToken = data.api_token;
@@ -170,11 +171,11 @@ export default {
         this.loading = false;
       }
     },
-    async regenerateToken() {
+    async regenerateToken(): Promise<void> {
       this.loading = true;
       this.showRegenerateConfirm = false;
       try {
-        const data = await this.GENERATE_API_TOKEN();
+        const data = await (this as any).GENERATE_API_TOKEN();
         if (data) {
           this.hasToken = true;
           this.newlyGeneratedToken = data.api_token;
@@ -183,11 +184,11 @@ export default {
         this.loading = false;
       }
     },
-    async revokeToken() {
+    async revokeToken(): Promise<void> {
       this.loading = true;
       this.showRevokeConfirm = false;
       try {
-        const success = await this.REVOKE_API_TOKEN();
+        const success = await (this as any).REVOKE_API_TOKEN();
         if (success) {
           this.hasToken = false;
           this.newlyGeneratedToken = null;
@@ -196,16 +197,16 @@ export default {
         this.loading = false;
       }
     },
-    async copyToken() {
+    async copyToken(): Promise<void> {
       try {
-        await navigator.clipboard.writeText(this.newlyGeneratedToken);
-        this.$toast.success('Token copied to clipboard!');
-      } catch (err) {
-        this.$toast.error('Failed to copy token to clipboard');
+        await navigator.clipboard.writeText(this.newlyGeneratedToken!);
+        (this as any).$toast.success('Token copied to clipboard!');
+      } catch {
+        (this as any).$toast.error('Failed to copy token to clipboard');
       }
     },
   },
-};
+});
 </script>
 
 <style scoped>
diff --git a/client/src/vue_components/user/settings/ChangePassword.vue b/client/src/vue_components/user/settings/ChangePassword.vue
index 2565322c..f39551a1 100644
--- a/client/src/vue_components/user/settings/ChangePassword.vue
+++ b/client/src/vue_components/user/settings/ChangePassword.vue
@@ -68,12 +68,13 @@
   </b-card>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { required } from 'vuelidate/lib/validators';
 import { makeURL } from '@/js/utils';
 import passwordValidationMixin from '@/mixins/passwordValidation';
 
-export default {
+export default defineComponent({
   name: 'ChangePassword',
   mixins: [passwordValidationMixin],
   data() {
@@ -92,20 +93,20 @@ export default {
         currentPassword: {
           required,
         },
-        newPassword: this.getPasswordValidations(),
-        confirmPassword: this.getConfirmPasswordValidations('newPassword'),
+        newPassword: (this as any).getPasswordValidations(),
+        confirmPassword: (this as any).getConfirmPasswordValidations('newPassword'),
       },
     };
   },
   computed: {
-    isDisabled() {
-      return Boolean(this.$v.state.$invalid);
+    isDisabled(): boolean {
+      return Boolean((this as any).$v.state.$invalid);
     },
   },
   methods: {
-    async handlePasswordChange() {
-      this.$v.state.$touch();
-      if (this.$v.state.$anyError) {
+    async handlePasswordChange(): Promise<void> {
+      (this as any).$v.state.$touch();
+      if ((this as any).$v.state.$anyError) {
         return;
       }
 
@@ -126,31 +127,28 @@ export default {
         if (response.ok) {
           const data = await response.json();
 
-          // Update auth token with new token
           if (data.access_token) {
             await this.$store.commit('SET_AUTH_TOKEN', data.access_token);
           }
 
-          // Refresh current user
           await this.$store.dispatch('GET_CURRENT_USER');
 
-          this.$toast.success('Password changed successfully!');
+          (this as any).$toast.success('Password changed successfully!');
 
-          // Reset form
           this.state.currentPassword = '';
           this.state.newPassword = '';
           this.state.confirmPassword = '';
-          this.$v.$reset();
+          (this as any).$v.$reset();
         } else {
           const error = await response.json();
-          this.$toast.error(error.message || 'Failed to change password');
+          (this as any).$toast.error(error.message || 'Failed to change password');
         }
-      } catch (error) {
-        this.$toast.error('An error occurred while changing password');
+      } catch {
+        (this as any).$toast.error('An error occurred while changing password');
       } finally {
         this.loading = false;
       }
     },
   },
-};
+});
 </script>
diff --git a/client/src/vue_components/user/settings/CueColourPreferences.vue b/client/src/vue_components/user/settings/CueColourPreferences.vue
index 8c1d5ef0..398d8e73 100644
--- a/client/src/vue_components/user/settings/CueColourPreferences.vue
+++ b/client/src/vue_components/user/settings/CueColourPreferences.vue
@@ -153,14 +153,15 @@
   <b-alert v-else variant="danger"> No show loaded. </b-alert>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { mapGetters, mapActions } from 'vuex';
 import { required } from 'vuelidate/lib/validators';
 import { contrastColor } from 'contrast-color';
 import log from 'loglevel';
 import formValidationMixin from '@/mixins/formValidationMixin';
 
-export default {
+export default defineComponent({
   name: 'CueColourPreferences',
   mixins: [formValidationMixin],
   data() {
@@ -173,12 +174,12 @@ export default {
       rowsPerPage: 15,
       currentPage: 1,
       newFormState: {
-        cueTypeId: null,
+        cueTypeId: null as number | null,
         colour: '#FF0000',
       },
       editFormState: {
-        id: null,
-        cueTypeId: null,
+        id: null as number | null,
+        cueTypeId: null as number | null,
         colour: '#FF0000',
       },
       isSubmittingNew: false,
@@ -187,42 +188,47 @@ export default {
     };
   },
   computed: {
-    overrideChoices() {
+    overrideChoices(): unknown[] {
       return [
         { value: null, text: 'Please select a cue type', disabled: true },
-        ...this.CUE_TYPES.filter(
-          (item) => !this.CUE_COLOUR_OVERRIDES.map((elem) => elem.settings.id).includes(item.id),
-          this
-        ).map((item) => ({ value: item.id, text: `${item.prefix} - ${item.description}` })),
+        ...(this as any).CUE_TYPES.filter(
+          (item: any) =>
+            !(this as any).CUE_COLOUR_OVERRIDES.map((elem: any) => elem.settings.id).includes(
+              item.id
+            )
+        ).map((item: any) => ({ value: item.id, text: `${item.prefix} - ${item.description}` })),
       ];
     },
-    tableData() {
-      return this.CUE_COLOUR_OVERRIDES.filter(
-        (item) => this.CUE_TYPES.map((elem) => elem.id).includes(item.settings.id),
-        this
+    tableData(): unknown[] {
+      return (this as any).CUE_COLOUR_OVERRIDES.filter((item: any) =>
+        (this as any).CUE_TYPES.map((elem: any) => elem.id).includes(item.settings.id)
       );
     },
-    newFormCueTypePrefix() {
+    newFormCueTypePrefix(): string {
       if (this.newFormState.cueTypeId) {
-        const cueType = this.CUE_TYPES.find((ct) => ct.id === this.newFormState.cueTypeId);
+        const cueType = (this as any).CUE_TYPES.find(
+          (ct: any) => ct.id === this.newFormState.cueTypeId
+        );
         return cueType ? cueType.prefix : '';
       }
       return '';
     },
-    editFormCueTypePrefix() {
+    editFormCueTypePrefix(): string {
       if (this.editFormState.cueTypeId) {
-        const cueType = this.CUE_TYPES.find((ct) => ct.id === this.editFormState.cueTypeId);
+        const cueType = (this as any).CUE_TYPES.find(
+          (ct: any) => ct.id === this.editFormState.cueTypeId
+        );
         return cueType ? cueType.prefix : '';
       }
       return '';
     },
-    createPayload() {
+    createPayload(): { cueTypeId: number | null; colour: string } {
       return {
         cueTypeId: this.newFormState.cueTypeId,
         colour: this.newFormState.colour,
       };
     },
-    editPayload() {
+    editPayload(): { id: number | null; colour: string } {
       return {
         id: this.editFormState.id,
         colour: this.editFormState.colour,
@@ -230,50 +236,49 @@ export default {
     },
     ...mapGetters(['CURRENT_SHOW', 'CUE_TYPES', 'CUE_COLOUR_OVERRIDES']),
   },
-  async beforeMount() {
-    await this.GET_SHOW_DETAILS();
-    if (this.CURRENT_SHOW != null) {
-      await this.GET_CUE_TYPES();
-      await this.GET_CUE_COLOUR_OVERRIDES();
+  async beforeMount(): Promise<void> {
+    await (this as any).GET_SHOW_DETAILS();
+    if ((this as any).CURRENT_SHOW != null) {
+      await (this as any).GET_CUE_TYPES();
+      await (this as any).GET_CUE_COLOUR_OVERRIDES();
     }
   },
   methods: {
     contrastColor,
-    resetOverrideSelect() {
+    resetOverrideSelect(): void {
       this.newFormState.cueTypeId = null;
     },
-    openNewOverrideModal(event) {
-      const cueTypeToOverride = this.CUE_TYPES.find(
-        (item) => item.id === this.newFormState.cueTypeId,
-        this
+    openNewOverrideModal(event: Event): void {
+      const cueTypeToOverride = (this as any).CUE_TYPES.find(
+        (item: any) => item.id === this.newFormState.cueTypeId
       );
       if (cueTypeToOverride == null) {
         log.error('Could not find cue type to override!');
-        this.$toast.error('Could not find cue type to override!');
+        (this as any).$toast.error('Could not find cue type to override!');
       } else {
         this.newFormState.cueTypeId = cueTypeToOverride.id;
         this.newFormState.colour = cueTypeToOverride.colour;
-        this.$bvModal.show('cue-colour-new-override-modal');
+        (this as any).$bvModal.show('cue-colour-new-override-modal');
       }
     },
-    resetNewFormState() {
-      this.resetForm('newFormState', {
+    resetNewFormState(): void {
+      (this as any).resetForm('newFormState', {
         cueTypeId: null,
         colour: '#FF0000',
       });
       this.isSubmittingNew = false;
     },
-    resetEditFormState() {
-      this.resetForm('editFormState', {
+    resetEditFormState(): void {
+      (this as any).resetForm('editFormState', {
         id: null,
         cueTypeId: null,
         colour: '#FF0000',
       });
       this.isSubmittingEdit = false;
     },
-    async onSubmitNewOverride(event) {
-      this.$v.newFormState.$touch();
-      if (this.$v.newFormState.$anyError) {
+    async onSubmitNewOverride(event: Event): Promise<void> {
+      (this as any).$v.newFormState.$touch();
+      if ((this as any).$v.newFormState.$anyError) {
         event.preventDefault();
         return;
       }
@@ -286,20 +291,20 @@ export default {
       this.isSubmittingNew = true;
 
       try {
-        await this.ADD_CUE_COLOUR_OVERRIDE(this.createPayload);
-        this.$refs['cue-colour-new-override-modal'].hide();
+        await (this as any).ADD_CUE_COLOUR_OVERRIDE(this.createPayload);
+        (this.$refs['cue-colour-new-override-modal'] as any).hide();
         this.resetNewFormState();
       } catch (error) {
         log.error('Error adding new cue colour override:', error);
-        this.$toast.error('Failed to add new override');
+        (this as any).$toast.error('Failed to add new override');
         event.preventDefault();
       } finally {
         this.isSubmittingNew = false;
       }
     },
-    async onSubmitEditOverride(event) {
-      this.$v.editFormState.$touch();
-      if (this.$v.editFormState.$anyError) {
+    async onSubmitEditOverride(event: Event): Promise<void> {
+      (this as any).$v.editFormState.$touch();
+      if ((this as any).$v.editFormState.$anyError) {
         event.preventDefault();
         return;
       }
@@ -312,43 +317,43 @@ export default {
       this.isSubmittingEdit = true;
 
       try {
-        await this.UPDATE_CUE_COLOUR_OVERRIDE(this.editPayload);
-        this.$refs['cue-colour-edit-override-modal'].hide();
+        await (this as any).UPDATE_CUE_COLOUR_OVERRIDE(this.editPayload);
+        (this.$refs['cue-colour-edit-override-modal'] as any).hide();
         this.resetEditFormState();
       } catch (error) {
         log.error('Error updating cue colour override:', error);
-        this.$toast.error('Failed to update override');
+        (this as any).$toast.error('Failed to update override');
         event.preventDefault();
       } finally {
         this.isSubmittingEdit = false;
       }
     },
-    async deleteOverride(override) {
+    async deleteOverride(override: any): Promise<void> {
       if (this.isDeleting) {
         return;
       }
 
       const msg = 'Are you sure you want to delete this override?';
-      const action = await this.$bvModal.msgBoxConfirm(msg, {});
+      const action = await (this as any).$bvModal.msgBoxConfirm(msg, {});
       if (action === true) {
         this.isDeleting = true;
         try {
-          await this.DELETE_CUE_COLOUR_OVERRIDE(override.item.id);
+          await (this as any).DELETE_CUE_COLOUR_OVERRIDE(override.item.id);
         } catch (error) {
           log.error('Error deleting cue colour override:', error);
-          this.$toast.error('Failed to delete override');
+          (this as any).$toast.error('Failed to delete override');
         } finally {
           this.isDeleting = false;
         }
       }
     },
-    openEditForm(override) {
+    openEditForm(override: any): void {
       if (override != null) {
         const { settings } = override.item;
         this.editFormState.id = override.item.id;
         this.editFormState.cueTypeId = settings.id;
         this.editFormState.colour = settings.colour;
-        this.$bvModal.show('cue-colour-edit-override-modal');
+        (this as any).$bvModal.show('cue-colour-edit-override-modal');
       }
     },
     ...mapActions([
@@ -372,7 +377,7 @@ export default {
       },
     },
   },
-};
+});
 </script>
 
 <style scoped>
diff --git a/client/src/vue_components/user/settings/Settings.vue b/client/src/vue_components/user/settings/Settings.vue
index 747de65e..ec1e68e1 100644
--- a/client/src/vue_components/user/settings/Settings.vue
+++ b/client/src/vue_components/user/settings/Settings.vue
@@ -95,7 +95,8 @@
   </b-container>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { mapGetters } from 'vuex';
 import { required, integer, minValue } from 'vuelidate/lib/validators';
 import log from 'loglevel';
@@ -103,7 +104,7 @@ import { makeURL } from '@/js/utils';
 import { notNull, notNullAndGreaterThanZero } from '@/js/customValidators';
 import { TEXT_ALIGNMENT } from '@/constants/textAlignment';
 
-export default {
+export default defineComponent({
   name: 'UserSettingsConfig',
   data() {
     return {
@@ -135,7 +136,7 @@ export default {
     ...mapGetters(['USER_SETTINGS']),
   },
   watch: {
-    USER_SETTINGS() {
+    USER_SETTINGS(): void {
       this.resetForm();
     },
   },
@@ -157,16 +158,16 @@ export default {
       console_log_level: { required },
     },
   },
-  mounted() {
-    this.editSettings = JSON.parse(JSON.stringify(this.USER_SETTINGS));
+  mounted(): void {
+    this.editSettings = JSON.parse(JSON.stringify((this as any).USER_SETTINGS));
     this.loaded = true;
   },
   methods: {
-    validateState(name) {
-      const { $dirty, $error } = this.$v.editSettings[name];
+    validateState(name: string): boolean | null {
+      const { $dirty, $error } = (this as any).$v.editSettings[name];
       return $dirty ? !$error : null;
     },
-    async handleSubmit() {
+    async handleSubmit(): Promise<void> {
       const response = await fetch(`${makeURL('/api/v1/user/settings')}`, {
         method: 'PATCH',
         headers: {
@@ -175,20 +176,20 @@ export default {
         body: JSON.stringify(this.editSettings),
       });
       if (!response.ok) {
-        this.$toast.error('Unable to save settings');
+        (this as any).$toast.error('Unable to save settings');
         log.error('Unable to save settings');
       } else {
-        this.$toast.success('Saved settings');
+        (this as any).$toast.success('Saved settings');
       }
     },
-    resetForm() {
+    resetForm(): void {
       this.loaded = false;
-      this.toggle = !this.toggle;
-      this.editSettings = JSON.parse(JSON.stringify(this.USER_SETTINGS));
+      this.toggle = Number(!this.toggle);
+      this.editSettings = JSON.parse(JSON.stringify((this as any).USER_SETTINGS));
       this.loaded = true;
     },
   },
-};
+});
 </script>
 
 <style scoped></style>
diff --git a/client/src/vue_components/user/settings/StageDirectionStyles.vue b/client/src/vue_components/user/settings/StageDirectionStyles.vue
index 8f5aceb8..1ef42715 100644
--- a/client/src/vue_components/user/settings/StageDirectionStyles.vue
+++ b/client/src/vue_components/user/settings/StageDirectionStyles.vue
@@ -265,12 +265,36 @@
   <b-alert v-else variant="danger"> No show loaded. </b-alert>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { mapGetters, mapActions } from 'vuex';
 import { required } from 'vuelidate/lib/validators';
 import log from 'loglevel';
 
-export default {
+interface StyleOption {
+  caption: string;
+  state: boolean;
+}
+
+interface StyleFormState {
+  styleId: number | null;
+  styleOptions: StyleOption[];
+  textFormat: string;
+  textColour: string;
+  enableBackgroundColour: boolean;
+  backgroundColour: string;
+}
+
+interface EditStyleFormState {
+  id: number | null;
+  styleOptions: StyleOption[];
+  textFormat: string;
+  textColour: string;
+  enableBackgroundColour: boolean;
+  backgroundColour: string;
+}
+
+export default defineComponent({
   name: 'StageDirectionStyles',
   data() {
     return {
@@ -283,63 +307,64 @@ export default {
       rowsPerPage: 15,
       currentPage: 1,
       newStyleFormState: {
-        styleId: null,
+        styleId: null as number | null,
         styleOptions: [
           { caption: 'Bold', state: false },
           { caption: 'Italic', state: false },
           { caption: 'Underline', state: false },
-        ],
+        ] as StyleOption[],
         textFormat: 'default',
         textColour: '#FFFFFF',
         enableBackgroundColour: false,
         backgroundColour: '#000000',
-      },
+      } as StyleFormState,
       editStyleFormState: {
-        id: null,
+        id: null as number | null,
         styleOptions: [
           { caption: 'Bold', state: false },
           { caption: 'Italic', state: false },
           { caption: 'Underline', state: false },
-        ],
+        ] as StyleOption[],
         textFormat: 'default',
         textColour: '#FFFFFF',
         enableBackgroundColour: false,
         backgroundColour: '#000000',
-      },
+      } as EditStyleFormState,
       isSubmittingNew: false,
       isSubmittingEdit: false,
       isDeleting: false,
     };
   },
   computed: {
-    overrideChoices() {
+    overrideChoices(): unknown[] {
       return [
         { value: null, text: 'Please select an option', disabled: true },
-        ...this.STAGE_DIRECTION_STYLES.filter(
-          (item) =>
-            !this.STAGE_DIRECTION_STYLE_OVERRIDES.map((elem) => elem.settings.id).includes(item.id),
-          this
-        ).map((item) => ({ value: item.id, text: item.description })),
+        ...(this as any).STAGE_DIRECTION_STYLES.filter(
+          (item: any) =>
+            !(this as any).STAGE_DIRECTION_STYLE_OVERRIDES.map(
+              (elem: any) => elem.settings.id
+            ).includes(item.id)
+        ).map((item: any) => ({ value: item.id, text: item.description })),
       ];
     },
-    tableData() {
-      return this.STAGE_DIRECTION_STYLE_OVERRIDES.filter(
-        (item) => this.STAGE_DIRECTION_STYLES.map((elem) => elem.id).includes(item.settings.id),
-        this
+    tableData(): unknown[] {
+      return (this as any).STAGE_DIRECTION_STYLE_OVERRIDES.filter((item: any) =>
+        (this as any).STAGE_DIRECTION_STYLES.map((elem: any) => elem.id).includes(item.settings.id)
       );
     },
-    newFormExampleCss() {
-      const style = {
-        'font-weight': this.newStyleFormState.styleOptions.find((el) => el.caption === 'Bold').state
+    newFormExampleCss(): Record<string, string> {
+      const style: Record<string, string> = {
+        'font-weight': this.newStyleFormState.styleOptions.find((el) => el.caption === 'Bold')!
+          .state
           ? 'bold'
           : 'normal',
-        'font-style': this.newStyleFormState.styleOptions.find((el) => el.caption === 'Italic')
+        'font-style': this.newStyleFormState.styleOptions.find((el) => el.caption === 'Italic')!
           .state
           ? 'italic'
           : 'normal',
         'text-decoration-line': this.newStyleFormState.styleOptions.find(
           (el) => el.caption === 'Underline'
-        ).state
+        )!.state
           ? 'underline'
           : 'none',
         color: this.newStyleFormState.textColour,
@@ -349,19 +374,19 @@ export default {
       }
       return style;
     },
-    editFormExampleCss() {
-      const style = {
-        'font-weight': this.editStyleFormState.styleOptions.find((el) => el.caption === 'Bold')
+    editFormExampleCss(): Record<string, string> {
+      const style: Record<string, string> = {
+        'font-weight': this.editStyleFormState.styleOptions.find((el) => el.caption === 'Bold')!
           .state
           ? 'bold'
           : 'normal',
-        'font-style': this.editStyleFormState.styleOptions.find((el) => el.caption === 'Italic')
+        'font-style': this.editStyleFormState.styleOptions.find((el) => el.caption === 'Italic')!
           .state
           ? 'italic'
           : 'normal',
         'text-decoration-line': this.editStyleFormState.styleOptions.find(
           (el) => el.caption === 'Underline'
-        ).state
+        )!.state
           ? 'underline'
           : 'none',
         color: this.editStyleFormState.textColour,
@@ -371,12 +396,12 @@ export default {
       }
       return style;
     },
-    createPayload() {
+    createPayload(): Record<string, unknown> {
       return {
         styleId: this.newStyleFormState.styleId,
-        bold: this.newStyleFormState.styleOptions.find((el) => el.caption === 'Bold').state,
-        italic: this.newStyleFormState.styleOptions.find((el) => el.caption === 'Italic').state,
-        underline: this.newStyleFormState.styleOptions.find((el) => el.caption === 'Underline')
+        bold: this.newStyleFormState.styleOptions.find((el) => el.caption === 'Bold')!.state,
+        italic: this.newStyleFormState.styleOptions.find((el) => el.caption === 'Italic')!.state,
+        underline: this.newStyleFormState.styleOptions.find((el) => el.caption === 'Underline')!
           .state,
         textFormat: this.newStyleFormState.textFormat,
         textColour: this.newStyleFormState.textColour,
@@ -384,12 +409,12 @@ export default {
         backgroundColour: this.newStyleFormState.backgroundColour,
       };
     },
-    editPayload() {
+    editPayload(): Record<string, unknown> {
       return {
         id: this.editStyleFormState.id,
-        bold: this.editStyleFormState.styleOptions.find((el) => el.caption === 'Bold').state,
-        italic: this.editStyleFormState.styleOptions.find((el) => el.caption === 'Italic').state,
-        underline: this.editStyleFormState.styleOptions.find((el) => el.caption === 'Underline')
+        bold: this.editStyleFormState.styleOptions.find((el) => el.caption === 'Bold')!.state,
+        italic: this.editStyleFormState.styleOptions.find((el) => el.caption === 'Italic')!.state,
+        underline: this.editStyleFormState.styleOptions.find((el) => el.caption === 'Underline')!
           .state,
         text_format: this.editStyleFormState.textFormat,
         text_colour: this.editStyleFormState.textColour,
@@ -399,16 +424,16 @@ export default {
     },
     ...mapGetters(['CURRENT_SHOW', 'STAGE_DIRECTION_STYLES', 'STAGE_DIRECTION_STYLE_OVERRIDES']),
   },
-  async beforeMount() {
-    await this.GET_SHOW_DETAILS();
-    if (this.CURRENT_SHOW != null) {
-      await this.GET_STAGE_DIRECTION_STYLES();
-      await this.GET_STAGE_DIRECTION_STYLE_OVERRIDES();
+  async beforeMount(): Promise<void> {
+    await (this as any).GET_SHOW_DETAILS();
+    if ((this as any).CURRENT_SHOW != null) {
+      await (this as any).GET_STAGE_DIRECTION_STYLES();
+      await (this as any).GET_STAGE_DIRECTION_STYLE_OVERRIDES();
     }
   },
   methods: {
-    exampleCss(data) {
-      const style = {
+    exampleCss(data: any): Record<string, string> {
+      const style: Record<string, string> = {
         'font-weight': data.bold ? 'bold' : 'normal',
         'font-style': data.italic ? 'italic' : 'normal',
         'text-decoration-line': data.underline ? 'underline' : 'none',
@@ -419,17 +444,16 @@ export default {
       }
       return style;
     },
-    resetOverrideSelect() {
+    resetOverrideSelect(): void {
       this.newStyleFormState.styleId = null;
     },
-    openNewOverrideModal(event) {
-      const styleToOverride = this.STAGE_DIRECTION_STYLES.find(
-        (item) => item.id === this.newStyleFormState.styleId,
-        this
+    openNewOverrideModal(event: Event): void {
+      const styleToOverride = (this as any).STAGE_DIRECTION_STYLES.find(
+        (item: any) => item.id === this.newStyleFormState.styleId
       );
       if (styleToOverride == null) {
         log.error('Could not find style to override!');
-        this.$toast.error('Could not find style to override!');
+        (this as any).$toast.error('Could not find style to override!');
       } else {
         this.newStyleFormState.styleId = styleToOverride.id;
         this.newStyleFormState.styleOptions = [
@@ -441,10 +465,10 @@ export default {
         this.newStyleFormState.textColour = styleToOverride.text_colour;
         this.newStyleFormState.enableBackgroundColour = styleToOverride.enable_background_colour;
         this.newStyleFormState.backgroundColour = styleToOverride.background_colour;
-        this.$bvModal.show('new-override-modal');
+        (this as any).$bvModal.show('new-override-modal');
       }
     },
-    resetNewFormState() {
+    resetNewFormState(): void {
       this.newStyleFormState = {
         styleId: null,
         styleOptions: [
@@ -459,10 +483,10 @@ export default {
       };
       this.isSubmittingNew = false;
       this.$nextTick(() => {
-        this.$v.$reset();
+        (this as any).$v.$reset();
       });
     },
-    resetEditFormState() {
+    resetEditFormState(): void {
       this.editStyleFormState = {
         id: null,
         styleOptions: [
@@ -477,12 +501,12 @@ export default {
       };
       this.isSubmittingEdit = false;
       this.$nextTick(() => {
-        this.$v.$reset();
+        (this as any).$v.$reset();
       });
     },
-    async onSubmitNewOverride(event) {
-      this.$v.newStyleFormState.$touch();
-      if (this.$v.newStyleFormState.$anyError) {
+    async onSubmitNewOverride(event: Event): Promise<void> {
+      (this as any).$v.newStyleFormState.$touch();
+      if ((this as any).$v.newStyleFormState.$anyError) {
         event.preventDefault();
         return;
       }
@@ -495,20 +519,20 @@ export default {
       this.isSubmittingNew = true;
 
       try {
-        await this.ADD_STAGE_DIRECTION_STYLE_OVERRIDE(this.createPayload);
-        this.$refs['new-override-modal'].hide();
+        await (this as any).ADD_STAGE_DIRECTION_STYLE_OVERRIDE(this.createPayload);
+        (this.$refs['new-override-modal'] as any).hide();
         this.resetNewFormState();
       } catch (error) {
         log.error('Error adding new stage direction style override:', error);
-        this.$toast.error('Failed to add new override');
+        (this as any).$toast.error('Failed to add new override');
         event.preventDefault();
       } finally {
         this.isSubmittingNew = false;
       }
     },
-    async onSubmitEditOverride(event) {
-      this.$v.editStyleFormState.$touch();
-      if (this.$v.editStyleFormState.$anyError) {
+    async onSubmitEditOverride(event: Event): Promise<void> {
+      (this as any).$v.editStyleFormState.$touch();
+      if ((this as any).$v.editStyleFormState.$anyError) {
         event.preventDefault();
         return;
       }
@@ -521,45 +545,45 @@ export default {
       this.isSubmittingEdit = true;
 
       try {
-        await this.UPDATE_STAGE_DIRECTION_STYLE_OVERRIDE(this.editPayload);
-        this.$refs['edit-override-modal'].hide();
+        await (this as any).UPDATE_STAGE_DIRECTION_STYLE_OVERRIDE(this.editPayload);
+        (this.$refs['edit-override-modal'] as any).hide();
         this.resetEditFormState();
       } catch (error) {
         log.error('Error updating stage direction style override:', error);
-        this.$toast.error('Failed to update override');
+        (this as any).$toast.error('Failed to update override');
         event.preventDefault();
       } finally {
         this.isSubmittingEdit = false;
       }
     },
-    validateNewStyleState(name) {
-      const { $dirty, $error } = this.$v.newStyleFormState[name];
+    validateNewStyleState(name: string): boolean | null {
+      const { $dirty, $error } = (this as any).$v.newStyleFormState[name];
       return $dirty ? !$error : null;
     },
-    validateEditStyleState(name) {
-      const { $dirty, $error } = this.$v.editStyleFormState[name];
+    validateEditStyleState(name: string): boolean | null {
+      const { $dirty, $error } = (this as any).$v.editStyleFormState[name];
       return $dirty ? !$error : null;
     },
-    async deleteStyleOverride(style) {
+    async deleteStyleOverride(style: any): Promise<void> {
       if (this.isDeleting) {
         return;
       }
 
       const msg = 'Are you sure you want to delete this override?';
-      const action = await this.$bvModal.msgBoxConfirm(msg, {});
+      const action = await (this as any).$bvModal.msgBoxConfirm(msg, {});
       if (action === true) {
         this.isDeleting = true;
         try {
-          await this.DELETE_STAGE_DIRECTION_STYLE_OVERRIDE(style.item.id);
+          await (this as any).DELETE_STAGE_DIRECTION_STYLE_OVERRIDE(style.item.id);
         } catch (error) {
           log.error('Error deleting stage direction style override:', error);
-          this.$toast.error('Failed to delete override');
+          (this as any).$toast.error('Failed to delete override');
         } finally {
           this.isDeleting = false;
         }
       }
     },
-    openEditStyleForm(style) {
+    openEditStyleForm(style: any): void {
       if (style != null) {
         const { settings } = style.item;
         this.editStyleFormState.id = style.item.id;
@@ -572,7 +596,7 @@ export default {
         this.editStyleFormState.textColour = settings.text_colour;
         this.editStyleFormState.enableBackgroundColour = settings.enable_background_colour;
         this.editStyleFormState.backgroundColour = settings.background_colour;
-        this.$bvModal.show('edit-override-modal');
+        (this as any).$bvModal.show('edit-override-modal');
       }
     },
     ...mapActions([
@@ -586,39 +610,19 @@ export default {
   },
   validations: {
     newStyleFormState: {
-      styleOptions: {
-        required,
-      },
-      textFormat: {
-        required,
-      },
-      textColour: {
-        required,
-      },
-      enableBackgroundColour: {
-        required,
-      },
-      backgroundColour: {
-        required,
-      },
+      styleOptions: { required },
+      textFormat: { required },
+      textColour: { required },
+      enableBackgroundColour: { required },
+      backgroundColour: { required },
     },
     editStyleFormState: {
-      styleOptions: {
-        required,
-      },
-      textFormat: {
-        required,
-      },
-      textColour: {
-        required,
-      },
-      enableBackgroundColour: {
-        required,
-      },
-      backgroundColour: {
-        required,
-      },
+      styleOptions: { required },
+      textFormat: { required },
+      textColour: { required },
+      enableBackgroundColour: { required },
+      backgroundColour: { required },
     },
   },
-};
+});
 </script>
diff --git a/client/tsconfig.json b/client/tsconfig.json
new file mode 100644
index 00000000..de571796
--- /dev/null
+++ b/client/tsconfig.json
@@ -0,0 +1,51 @@
+{
+  "compilerOptions": {
+    // ── Compilation target ──────────────────────────────────────────────────
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+
+    // ── Strictness ──────────────────────────────────────────────────────────
+    // Full strict mode is the end goal; currently deferred because Vue 2 Options
+    // API's (this as any) patterns and Vuex 3 lack typed dispatch/commit.
+    // Re-evaluate after migration to Vue 3 + Pinia/Vuex 4.
+    "strict": false,
+    //
+    // These individual strict sub-flags are safe to enable now:
+    "strictNullChecks": true,       // Null/undefined are distinct types — biggest safety win
+    "strictFunctionTypes": true,    // Correct contravariant function parameter checking
+    //
+    // Deferred until (this as any) patterns are removed:
+    //   "noImplicitAny": true      // Needs (this as any) cleanup in all SFCs
+    //   "strictPropertyInitialization": true  // Class properties must be initialised
+
+    // ── Code quality ────────────────────────────────────────────────────────
+    "noImplicitReturns": true,           // All code paths in typed functions must return
+    "noFallthroughCasesInSwitch": true,  // No accidental case fallthrough
+    "forceConsistentCasingInFileNames": true,  // Case-sensitive imports (safe on macOS, required on Linux CI)
+
+    // ── Interop & infrastructure ─────────────────────────────────────────────
+    // skipLibCheck: third-party packages (bootstrap-vue, vue-native-websocket,
+    // @types/vuelidate) carry incomplete or conflicting .d.ts files.
+    "skipLibCheck": true,
+    "jsx": "preserve",    // Vue template compiler handles JSX transform
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "types": ["vitest/globals", "node", "vite/client"],
+    "isolatedModules": true,      // Required: Vite/esbuild transpiles each file independently
+    "esModuleInterop": true,      // Needed for loglevel, lodash, and other CJS packages
+    "resolveJsonModule": true,    // Allow importing .json files
+    // REQUIRED for Vue 2 reactivity: defineProperty semantics, not defineField.
+    // Removing this breaks Vue 2's observed data() properties.
+    "useDefineForClassFields": false,
+    "noEmit": true  // Type-checking only; Vite handles emit via esbuild
+  },
+  "include": ["src/**/*.ts", "src/**/*.vue"],
+  // Test files use partial object literals as mocks; vitest type-checks them independently.
+  // browser.test.ts and electron.test.ts also mutate window in ways that conflict with
+  // strict DOM types (location reassignment, electronAPI access).
+  "exclude": ["node_modules", "dist", "dist-electron", "src/**/*.test.ts"]
+}
diff --git a/client/vite.config.js b/client/vite.config.ts
similarity index 98%
rename from client/vite.config.js
rename to client/vite.config.ts
index dd9e6d18..f2d477f7 100644
--- a/client/vite.config.js
+++ b/client/vite.config.ts
@@ -75,7 +75,7 @@ export default defineConfig({
         replacement: path.resolve(__dirname, 'src'),
       },
     ],
-    extensions: ['.js', '.vue', '.json'],
+    extensions: ['.ts', '.js', '.vue', '.json'],
   },
   css: {
     preprocessorOptions: {
diff --git a/client/vitest.config.js b/client/vitest.config.ts
similarity index 100%
rename from client/vitest.config.js
rename to client/vitest.config.ts
diff --git a/documentation/development.md b/documentation/development.md
index b1b317d3..9908e23e 100644
--- a/documentation/development.md
+++ b/documentation/development.md
@@ -99,9 +99,10 @@ The `BUILD_TARGET` environment variable controls how the Vue client is built:
 Contributions are welcome! Please ensure all client and server code passes linting checks before submitting pull requests:
 
 ```shell
-# Client linting
+# Client linting and type checking
 cd client
 npm run lint
+npm run typecheck
 
 # Server linting
 cd server
@@ -131,7 +132,7 @@ Messages should be structured with the following data format:
 }
 ```
 
-On the client side, the messages are handled in 2 places (in the [Vuex store](client/src/store/store.js)):
+On the client side, the messages are handled in 2 places (in the [Vuex store](client/src/store/store.ts)):
 
 1. Vuex mutation `SOCKET_ONMESSAGE` is called for every message, and should handle each OP code as needed
 2. Vuex action `SOME_ACTION` needs to be defined, and is called only if the data contains an `ACTION` key/value pair

From 70f7861dbfc2b47da7c5bcce2c97161f2c5916fd Mon Sep 17 00:00:00 2001
From: Tim Bradgate <timbradgate@hotmail.co.uk>
Date: Tue, 12 May 2026 18:29:23 +0100
Subject: [PATCH 5/9] [npm] Update dependencies

---
 client/package-lock.json | 104 +++++++++++++++++++--------------------
 client/package.json      |   6 +--
 2 files changed, 55 insertions(+), 55 deletions(-)

diff --git a/client/package-lock.json b/client/package-lock.json
index c61a6ee7..81691151 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -35,13 +35,13 @@
       },
       "devDependencies": {
         "@eslint/js": "^9.39.2",
-        "@types/lodash": "~4.17.7",
+        "@types/lodash": "~4.17.24",
         "@types/node": "~20.14.0",
         "@types/vuelidate": "^0.7.22",
         "@typescript-eslint/eslint-plugin": "~7.18.0",
         "@typescript-eslint/parser": "~7.18.0",
         "@vitejs/plugin-vue2": "2.3.4",
-        "@vitest/ui": "^4.1.5",
+        "@vitest/ui": "^4.1.6",
         "@vue/test-utils": "^2.4.10",
         "eslint": "^9.39.2",
         "eslint-config-prettier": "^10.1.8",
@@ -54,7 +54,7 @@
         "sass": "1.99.0",
         "typescript": "~5.4.5",
         "vite": "^7.3.3",
-        "vitest": "^4.1.5"
+        "vitest": "^4.1.6"
       },
       "engines": {
         "node": ">=24.0.0 <25",
@@ -2147,16 +2147,16 @@
       }
     },
     "node_modules/@vitest/expect": {
-      "version": "4.1.5",
-      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.1.5.tgz",
-      "integrity": "sha512-PWBaRY5JoKuRnHlUHfpV/KohFylaDZTupcXN1H9vYryNLOnitSw60Mw9IAE2r67NbwwzBw/Cc/8q9BK3kIX8Kw==",
+      "version": "4.1.6",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.1.6.tgz",
+      "integrity": "sha512-7EHDquPthALSV0jhhjgEW8FXaviMx7rSqu8W6oqCoAuOhKov814P99QDV1pxMA3QPv21YudvJngIhjrNI4opLg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@standard-schema/spec": "^1.1.0",
         "@types/chai": "^5.2.2",
-        "@vitest/spy": "4.1.5",
-        "@vitest/utils": "4.1.5",
+        "@vitest/spy": "4.1.6",
+        "@vitest/utils": "4.1.6",
         "chai": "^6.2.2",
         "tinyrainbow": "^3.1.0"
       },
@@ -2165,13 +2165,13 @@
       }
     },
     "node_modules/@vitest/mocker": {
-      "version": "4.1.5",
-      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.1.5.tgz",
-      "integrity": "sha512-/x2EmFC4mT4NNzqvC3fmesuV97w5FC903KPmey4gsnJiMQ3Be1IlDKVaDaG8iqaLFHqJ2FVEkxZk5VmeLjIItw==",
+      "version": "4.1.6",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.1.6.tgz",
+      "integrity": "sha512-MCFc63czMjEInOlcY2cpQCvCN+KgbAn+60xu9cMgP4sKaLC5JNAKw7JH8QdAnoAC88hW1IiSNZ+GgVXlN1UcMQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/spy": "4.1.5",
+        "@vitest/spy": "4.1.6",
         "estree-walker": "^3.0.3",
         "magic-string": "^0.30.21"
       },
@@ -2192,9 +2192,9 @@
       }
     },
     "node_modules/@vitest/pretty-format": {
-      "version": "4.1.5",
-      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.1.5.tgz",
-      "integrity": "sha512-7I3q6l5qr03dVfMX2wCo9FxwSJbPdwKjy2uu/YPpU3wfHvIL4QHwVRp57OfGrDFeUJ8/8QdfBKIV12FTtLn00g==",
+      "version": "4.1.6",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.1.6.tgz",
+      "integrity": "sha512-h5SxD/IzNhZYnrSZRsUZQIC+vD0GY8cUvq0iwsmkFKixRCKLLWqCXa/FIQ4S1R+sI+PGoojkHsdNrbZiM9Qpgw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2205,13 +2205,13 @@
       }
     },
     "node_modules/@vitest/runner": {
-      "version": "4.1.5",
-      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.1.5.tgz",
-      "integrity": "sha512-2D+o7Pr82IEO46YPpoA/YU0neeyr6FTerQb5Ro7BUnBuv6NQtT/kmVnczngiMEBhzgqz2UZYl5gArejsyERDSQ==",
+      "version": "4.1.6",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.1.6.tgz",
+      "integrity": "sha512-nOPCmn2+yD0ZNmKdsXGv/UxMMWbMuKeD6GyYncNwdkYDxpQvrPSKYj2rWuDjC2Y4b6w6hjip5dBKFzEUuZe3vA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/utils": "4.1.5",
+        "@vitest/utils": "4.1.6",
         "pathe": "^2.0.3"
       },
       "funding": {
@@ -2219,14 +2219,14 @@
       }
     },
     "node_modules/@vitest/snapshot": {
-      "version": "4.1.5",
-      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.1.5.tgz",
-      "integrity": "sha512-zypXEt4KH/XgKGPUz4eC2AvErYx0My5hfL8oDb1HzGFpEk1P62bxSohdyOmvz+d9UJwanI68MKwr2EquOaOgMQ==",
+      "version": "4.1.6",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.1.6.tgz",
+      "integrity": "sha512-YhsdE6xAVfTDmzjxL2ZDUvjj+ZsgyOKe+TdQzqkD72wIOmHka8NuGQ6NpTNZv9D2Z63fbwWKJPeVpEw4EQgYxw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/pretty-format": "4.1.5",
-        "@vitest/utils": "4.1.5",
+        "@vitest/pretty-format": "4.1.6",
+        "@vitest/utils": "4.1.6",
         "magic-string": "^0.30.21",
         "pathe": "^2.0.3"
       },
@@ -2235,9 +2235,9 @@
       }
     },
     "node_modules/@vitest/spy": {
-      "version": "4.1.5",
-      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.1.5.tgz",
-      "integrity": "sha512-2lNOsh6+R2Idnf1TCZqSwYlKN2E/iDlD8sgU59kYVl+OMDmvldO1VDk39smRfpUNwYpNRVn3w4YfuC7KfbBnkQ==",
+      "version": "4.1.6",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.1.6.tgz",
+      "integrity": "sha512-JFKxMx6udhwKh/Ldo270e17QX710vgunMkuPAvXjHSvC6oqLWAHhVhjg/I71q0u0CBSErIODV1Kjv0FQNSWjdg==",
       "dev": true,
       "license": "MIT",
       "funding": {
@@ -2245,13 +2245,13 @@
       }
     },
     "node_modules/@vitest/ui": {
-      "version": "4.1.5",
-      "resolved": "https://registry.npmjs.org/@vitest/ui/-/ui-4.1.5.tgz",
-      "integrity": "sha512-3Z9HNFiV0IF1fk0JPiK+7kE1GcaIPefQQIBYur6PM5yFIq6agys3uqP/0t966e1wXfmjbRCHDe7qW236Xjwnag==",
+      "version": "4.1.6",
+      "resolved": "https://registry.npmjs.org/@vitest/ui/-/ui-4.1.6.tgz",
+      "integrity": "sha512-wiu5em68DfGv/2HFvI1Njr7JI2CHcBlQvereSzVG8my53PRxjTNOCsD9VOkRKrsJBDHmyuXvosxWZw7T91a2mw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/utils": "4.1.5",
+        "@vitest/utils": "4.1.6",
         "fflate": "^0.8.2",
         "flatted": "^3.4.2",
         "pathe": "^2.0.3",
@@ -2263,17 +2263,17 @@
         "url": "https://opencollective.com/vitest"
       },
       "peerDependencies": {
-        "vitest": "4.1.5"
+        "vitest": "4.1.6"
       }
     },
     "node_modules/@vitest/utils": {
-      "version": "4.1.5",
-      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.1.5.tgz",
-      "integrity": "sha512-76wdkrmfXfqGjueGgnb45ITPyUi1ycZ4IHgC2bhPDUfWHklY/q3MdLOAB+TF1e6xfl8NxNY0ZYaPCFNWSsw3Ug==",
+      "version": "4.1.6",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.1.6.tgz",
+      "integrity": "sha512-FxIY+U81R3LGKCxaHHFRQ5+g6/iRgGLmeHWdp2Amj4ljQRrEIWHmZyDfDYBRZlpyqA7qKxtS9DD1dhk8RnRIVQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/pretty-format": "4.1.5",
+        "@vitest/pretty-format": "4.1.6",
         "convert-source-map": "^2.0.0",
         "tinyrainbow": "^3.1.0"
       },
@@ -5270,19 +5270,19 @@
       }
     },
     "node_modules/vitest": {
-      "version": "4.1.5",
-      "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.1.5.tgz",
-      "integrity": "sha512-9Xx1v3/ih3m9hN+SbfkUyy0JAs72ap3r7joc87XL6jwF0jGg6mFBvQ1SrwaX+h8BlkX6Hz9shdd1uo6AF+ZGpg==",
+      "version": "4.1.6",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.1.6.tgz",
+      "integrity": "sha512-6lvjbS3p9b4CrdCmguzbh2/4uoXhGE2q71R4OX5sqF9R1bo9Xd6fGrMAfvp5wnCzlBnFVdCOp6onuTQVbo8iUQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/expect": "4.1.5",
-        "@vitest/mocker": "4.1.5",
-        "@vitest/pretty-format": "4.1.5",
-        "@vitest/runner": "4.1.5",
-        "@vitest/snapshot": "4.1.5",
-        "@vitest/spy": "4.1.5",
-        "@vitest/utils": "4.1.5",
+        "@vitest/expect": "4.1.6",
+        "@vitest/mocker": "4.1.6",
+        "@vitest/pretty-format": "4.1.6",
+        "@vitest/runner": "4.1.6",
+        "@vitest/snapshot": "4.1.6",
+        "@vitest/spy": "4.1.6",
+        "@vitest/utils": "4.1.6",
         "es-module-lexer": "^2.0.0",
         "expect-type": "^1.3.0",
         "magic-string": "^0.30.21",
@@ -5310,12 +5310,12 @@
         "@edge-runtime/vm": "*",
         "@opentelemetry/api": "^1.9.0",
         "@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0",
-        "@vitest/browser-playwright": "4.1.5",
-        "@vitest/browser-preview": "4.1.5",
-        "@vitest/browser-webdriverio": "4.1.5",
-        "@vitest/coverage-istanbul": "4.1.5",
-        "@vitest/coverage-v8": "4.1.5",
-        "@vitest/ui": "4.1.5",
+        "@vitest/browser-playwright": "4.1.6",
+        "@vitest/browser-preview": "4.1.6",
+        "@vitest/browser-webdriverio": "4.1.6",
+        "@vitest/coverage-istanbul": "4.1.6",
+        "@vitest/coverage-v8": "4.1.6",
+        "@vitest/ui": "4.1.6",
         "happy-dom": "*",
         "jsdom": "*",
         "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
diff --git a/client/package.json b/client/package.json
index 75adc7b1..7dd641df 100644
--- a/client/package.json
+++ b/client/package.json
@@ -55,13 +55,13 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.39.2",
-    "@types/lodash": "~4.17.7",
+    "@types/lodash": "~4.17.24",
     "@types/node": "~20.14.0",
     "@types/vuelidate": "^0.7.22",
     "@typescript-eslint/eslint-plugin": "~7.18.0",
     "@typescript-eslint/parser": "~7.18.0",
     "@vitejs/plugin-vue2": "2.3.4",
-    "@vitest/ui": "^4.1.5",
+    "@vitest/ui": "^4.1.6",
     "@vue/test-utils": "^2.4.10",
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
@@ -74,7 +74,7 @@
     "sass": "1.99.0",
     "typescript": "~5.4.5",
     "vite": "^7.3.3",
-    "vitest": "^4.1.5"
+    "vitest": "^4.1.6"
   },
   "browserslist": [
     "> 1%",

From 23c6bc0561a1d3bceb145b1d33fcafd918dee8ef Mon Sep 17 00:00:00 2001
From: Tim Bradgate <timbradgate@hotmail.co.uk>
Date: Tue, 12 May 2026 19:20:12 +0100
Subject: [PATCH 6/9] Fix stage direction text input not auto-focusing on add
 (#1017) (#1019)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Fix stage direction text input not auto-focusing on add (#1017)

Wrap the focus() call in $nextTick so it fires after Vue's DOM update
cycle is fully committed. When a new stage direction is added,
ScriptLineEditor.created() is async — it awaits previousLineFn before
calling addLinePart(), so ScriptLinePart mounts during a reactive
re-render rather than the initial mount sequence. A synchronous focus()
during mid-flush is unreliable; deferring to $nextTick fixes this.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Fix auto-focus for new stage direction using rAF + $nextTick (#1017)

Bootstrap Vue's b-dropdown-item calls closeDropdown() → requestAF(() =>
hide(true)) after emitting the click. hide(true) triggers focusToggler()
which uses $nextTick to restore focus to the toggle button. This ran after
our plain $nextTick, stealing focus from the newly added input.

Fix: use requestAnimationFrame + $nextTick in ScriptLinePart.mounted().
Our rAF is registered during the post-click microtask phase (ScriptLinePart
mounts as part of Vue's reactive flush), so it fires after the dropdown's
earlier-registered rAF in the same animation frame. Our subsequent $nextTick
is therefore queued after focusToggler's $nextTick, so input focus wins.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../show/config/script/ScriptLinePart.vue            | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/client/src/vue_components/show/config/script/ScriptLinePart.vue b/client/src/vue_components/show/config/script/ScriptLinePart.vue
index 17062eee..1cda1208 100644
--- a/client/src/vue_components/show/config/script/ScriptLinePart.vue
+++ b/client/src/vue_components/show/config/script/ScriptLinePart.vue
@@ -146,7 +146,17 @@ export default defineComponent({
   mounted(): void {
     (this as any).$v.state.$touch();
     if (this.focusInput) {
-      (this.$refs.partInput as HTMLElement).focus();
+      // Use rAF + $nextTick so our focus fires after Bootstrap Vue's dropdown
+      // focusToggler (which runs in its own rAF → $nextTick chain). Our rAF is
+      // registered during the post-click microtask phase, so it fires after the
+      // dropdown's earlier-registered rAF. Our $nextTick then runs last and wins.
+      requestAnimationFrame(() => {
+        this.$nextTick(() => {
+          if (this.$refs.partInput) {
+            (this.$refs.partInput as HTMLElement).focus();
+          }
+        });
+      });
     }
   },
   methods: {

From 4480b177dc4c39a9621bc2c5e77ee87df65194b1 Mon Sep 17 00:00:00 2001
From: Tim Bradgate <timbradgate@hotmail.co.uk>
Date: Wed, 13 May 2026 00:44:18 +0100
Subject: [PATCH 7/9] Add character MRU sort setting (#1018) (#1021)

Adds an optional user setting to sort character and character group
dropdowns in the script editor by frequency of appearance across the
5 most recently loaded pages, so the most relevant characters for a
given scene surface at the top without manual scrolling.

- Backend: `character_mru_sort` bool field on UserSettings + Alembic migration
- Frontend: user settings toggle; `mruSortUtils.ts` pure sort helpers
  with 13 Vitest unit tests; ScriptLinePart reads TMP_SCRIPT for counts;
  ScriptEditor pre-loads 4 look-back pages into TMP_SCRIPT on navigation
- Docs: user_settings.md updated

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 client/src/js/mruSortUtils.test.ts            | 118 ++++++++++++++++++
 client/src/js/mruSortUtils.ts                 |  51 ++++++++
 client/src/types/api/user.ts                  |   1 +
 .../show/config/script/ScriptEditor.vue       |  11 +-
 .../show/config/script/ScriptLinePart.vue     |  20 ++-
 .../vue_components/user/settings/Settings.vue |  14 +++
 docs/pages/user_settings.md                   |  10 +-
 ...add_character_mru_sort_to_user_settings.py |  43 +++++++
 server/models/user.py                         |   1 +
 9 files changed, 259 insertions(+), 10 deletions(-)
 create mode 100644 client/src/js/mruSortUtils.test.ts
 create mode 100644 client/src/js/mruSortUtils.ts
 create mode 100644 server/alembic_config/versions/c515969c1a51_add_character_mru_sort_to_user_settings.py

diff --git a/client/src/js/mruSortUtils.test.ts b/client/src/js/mruSortUtils.test.ts
new file mode 100644
index 00000000..8b4412ae
--- /dev/null
+++ b/client/src/js/mruSortUtils.test.ts
@@ -0,0 +1,118 @@
+import { describe, it, expect } from 'vitest';
+import { buildMruCharacterOptions, buildMruCharacterGroupOptions } from './mruSortUtils';
+
+const CHARS = [
+  { id: 1, name: 'Alice' },
+  { id: 2, name: 'Bob' },
+  { id: 3, name: 'Carol' },
+];
+
+const GROUPS = [
+  { id: 10, name: 'Ensemble' },
+  { id: 11, name: 'Chorus' },
+];
+
+function makePage(
+  entries: Array<{ character_id?: number | null; character_group_id?: number | null }>
+) {
+  return entries.map((e) => ({ line_parts: [e] }));
+}
+
+describe('buildMruCharacterOptions', () => {
+  it('returns null when tmpScript is empty', () => {
+    expect(buildMruCharacterOptions(CHARS, {})).toBeNull();
+  });
+
+  it('returns null when no line parts have a character_id set', () => {
+    const script = { '1': makePage([{ character_id: null }, { character_group_id: 10 }]) };
+    expect(buildMruCharacterOptions(CHARS, script)).toBeNull();
+  });
+
+  it('sorts characters by descending frequency', () => {
+    const script = {
+      '1': makePage([{ character_id: 2 }, { character_id: 2 }, { character_id: 1 }]),
+    };
+    const result = buildMruCharacterOptions(CHARS, script)!;
+    const ids = result.slice(1).map((o) => o.value);
+    expect(ids).toEqual([2, 1, 3]);
+  });
+
+  it('always prepends the N/A null option', () => {
+    const script = { '1': makePage([{ character_id: 1 }]) };
+    const result = buildMruCharacterOptions(CHARS, script)!;
+    expect(result[0]).toEqual({ value: null, text: 'N/A' });
+  });
+
+  it('preserves original order for characters with equal frequency', () => {
+    const script = {
+      '1': makePage([{ character_id: 1 }, { character_id: 2 }]),
+    };
+    const result = buildMruCharacterOptions(CHARS, script)!;
+    const ids = result.slice(1).map((o) => o.value);
+    expect(ids).toEqual([1, 2, 3]);
+  });
+
+  it('places characters absent from script after those that appear', () => {
+    const script = { '1': makePage([{ character_id: 3 }]) };
+    const result = buildMruCharacterOptions(CHARS, script)!;
+    const ids = result.slice(1).map((o) => o.value);
+    expect(ids[0]).toBe(3);
+  });
+
+  it('aggregates counts across multiple pages', () => {
+    const script = {
+      '1': makePage([{ character_id: 1 }]),
+      '2': makePage([{ character_id: 2 }, { character_id: 2 }]),
+      '3': makePage([{ character_id: 1 }]),
+    };
+    const result = buildMruCharacterOptions(CHARS, script)!;
+    const ids = result.slice(1).map((o) => o.value);
+    // Bob (2): count 2, Alice (1): count 2, Carol: 0 — equal count keeps original order
+    expect(ids).toEqual([1, 2, 3]);
+  });
+
+  it('handles lines with no line_parts gracefully', () => {
+    const script = { '1': [{ line_parts: undefined as any }, { line_parts: [] }] };
+    expect(buildMruCharacterOptions(CHARS, script)).toBeNull();
+  });
+});
+
+describe('buildMruCharacterGroupOptions', () => {
+  it('returns null when tmpScript is empty', () => {
+    expect(buildMruCharacterGroupOptions(GROUPS, {})).toBeNull();
+  });
+
+  it('returns null when no line parts have a character_group_id set', () => {
+    const script = { '1': makePage([{ character_id: 1 }]) };
+    expect(buildMruCharacterGroupOptions(GROUPS, script)).toBeNull();
+  });
+
+  it('sorts groups by descending frequency', () => {
+    const script = {
+      '1': makePage([
+        { character_group_id: 11 },
+        { character_group_id: 11 },
+        { character_group_id: 10 },
+      ]),
+    };
+    const result = buildMruCharacterGroupOptions(GROUPS, script)!;
+    const ids = result.slice(1).map((o) => o.value);
+    expect(ids).toEqual([11, 10]);
+  });
+
+  it('always prepends the N/A null option', () => {
+    const script = { '1': makePage([{ character_group_id: 10 }]) };
+    const result = buildMruCharacterGroupOptions(GROUPS, script)!;
+    expect(result[0]).toEqual({ value: null, text: 'N/A' });
+  });
+
+  it('aggregates counts across multiple pages', () => {
+    const script = {
+      '1': makePage([{ character_group_id: 10 }]),
+      '2': makePage([{ character_group_id: 11 }, { character_group_id: 11 }]),
+    };
+    const result = buildMruCharacterGroupOptions(GROUPS, script)!;
+    const ids = result.slice(1).map((o) => o.value);
+    expect(ids).toEqual([11, 10]);
+  });
+});
diff --git a/client/src/js/mruSortUtils.ts b/client/src/js/mruSortUtils.ts
new file mode 100644
index 00000000..aa332114
--- /dev/null
+++ b/client/src/js/mruSortUtils.ts
@@ -0,0 +1,51 @@
+type NamedItem = { id: number; name: string };
+type LinePart = { character_id?: number | null; character_group_id?: number | null };
+type ScriptLine = { line_parts?: LinePart[] };
+type TmpScript = Record<string, ScriptLine[]>;
+export type SelectOption = { value: number | null; text: string };
+
+function countOccurrences(
+  tmpScript: TmpScript,
+  field: 'character_id' | 'character_group_id'
+): Record<number, number> {
+  const counts: Record<number, number> = {};
+  Object.values(tmpScript).forEach((page) => {
+    page.forEach((line) => {
+      (line.line_parts ?? []).forEach((part) => {
+        const id = part[field];
+        if (id != null) {
+          counts[id] = (counts[id] || 0) + 1;
+        }
+      });
+    });
+  });
+  return counts;
+}
+
+/**
+ * Returns character options sorted by frequency across the loaded script pages,
+ * or null if no character data is present in tmpScript (caller should use default order).
+ */
+export function buildMruCharacterOptions(
+  characters: NamedItem[],
+  tmpScript: TmpScript
+): SelectOption[] | null {
+  const counts = countOccurrences(tmpScript, 'character_id');
+  if (Object.keys(counts).length === 0) return null;
+  const sorted = [...characters].sort((a, b) => (counts[b.id] || 0) - (counts[a.id] || 0));
+  return [{ value: null, text: 'N/A' }, ...sorted.map((c) => ({ value: c.id, text: c.name }))];
+}
+
+/**
+ * Returns character group options sorted by frequency across the loaded script pages,
+ * or null if no group data is present in tmpScript (caller should use default order).
+ */
+export function buildMruCharacterGroupOptions(
+  characterGroups: NamedItem[],
+  tmpScript: TmpScript
+): SelectOption[] | null {
+  const counts = countOccurrences(tmpScript, 'character_group_id');
+  if (Object.keys(counts).length === 0) return null;
+  const sorted = [...characterGroups].sort((a, b) => (counts[b.id] || 0) - (counts[a.id] || 0));
+  return [{ value: null, text: 'N/A' }, ...sorted.map((g) => ({ value: g.id, text: g.name }))];
+}
diff --git a/client/src/types/api/user.ts b/client/src/types/api/user.ts
index b406073c..7642c68d 100644
--- a/client/src/types/api/user.ts
+++ b/client/src/types/api/user.ts
@@ -20,4 +20,5 @@ export interface UserSettings {
   cue_position_right: boolean | null;
   script_text_alignment: number;
   console_log_level: string;
+  character_mru_sort: boolean;
 }
diff --git a/client/src/vue_components/show/config/script/ScriptEditor.vue b/client/src/vue_components/show/config/script/ScriptEditor.vue
index fee47e58..9945b5ab 100644
--- a/client/src/vue_components/show/config/script/ScriptEditor.vue
+++ b/client/src/vue_components/show/config/script/ScriptEditor.vue
@@ -228,6 +228,8 @@ import { makeURL, randInt } from '@/js/utils';
 import { notNull, notNullAndGreaterThanZero } from '@/js/customValidators';
 import { LINE_TYPES } from '@/constants/lineTypes';
 
+const MRU_LOOK_BACK = 4;
+
 export default defineComponent({
   name: 'ScriptConfig',
   components: { BulkActSceneModal, ScriptLineViewer, ScriptLineEditor },
@@ -829,8 +831,13 @@ export default defineComponent({
       this.changingPage = false;
     },
     async goToPageInner(pageNo: number): Promise<void> {
-      if (pageNo > 1) {
-        await (this as any).LOAD_SCRIPT_PAGE(pageNo - 1);
+      const loadedPages = new Set(Object.keys((this as any).TMP_SCRIPT).map(Number));
+      const lookBackStart = Math.max(1, pageNo - MRU_LOOK_BACK);
+      for (let p = lookBackStart; p < pageNo; p++) {
+        if (!loadedPages.has(p)) {
+          await (this as any).LOAD_SCRIPT_PAGE(p);
+          (this as any).ADD_BLANK_PAGE(p);
+        }
       }
       await (this as any).LOAD_SCRIPT_PAGE(pageNo);
       this.currentEditPage = pageNo;
diff --git a/client/src/vue_components/show/config/script/ScriptLinePart.vue b/client/src/vue_components/show/config/script/ScriptLinePart.vue
index 1cda1208..233130d9 100644
--- a/client/src/vue_components/show/config/script/ScriptLinePart.vue
+++ b/client/src/vue_components/show/config/script/ScriptLinePart.vue
@@ -61,8 +61,10 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import { mapGetters } from 'vuex';
 import { required, requiredIf } from 'vuelidate/lib/validators';
 import { LINE_TYPES } from '@/constants/lineTypes';
+import { buildMruCharacterOptions, buildMruCharacterGroupOptions } from '@/js/mruSortUtils';
 
 export default defineComponent({
   name: 'ScriptLinePart',
@@ -127,19 +129,27 @@ export default defineComponent({
     };
   },
   computed: {
+    ...mapGetters(['USER_SETTINGS', 'TMP_SCRIPT']),
     characterOptions(): any[] {
+      const chars = this.characters as any[];
+      if ((this.USER_SETTINGS as any)?.character_mru_sort) {
+        const sorted = buildMruCharacterOptions(chars, this.TMP_SCRIPT);
+        if (sorted) return sorted;
+      }
       return [
         { value: null, text: 'N/A' },
-        ...(this.characters as any[]).map((char: any) => ({ value: char.id, text: char.name })),
+        ...chars.map((c: any) => ({ value: c.id, text: c.name })),
       ];
     },
     characterGroupOptions(): any[] {
+      const groups = this.characterGroups as any[];
+      if ((this.USER_SETTINGS as any)?.character_mru_sort) {
+        const sorted = buildMruCharacterGroupOptions(groups, this.TMP_SCRIPT);
+        if (sorted) return sorted;
+      }
       return [
         { value: null, text: 'N/A' },
-        ...(this.characterGroups as any[]).map((char: any) => ({
-          value: char.id,
-          text: char.name,
-        })),
+        ...groups.map((g: any) => ({ value: g.id, text: g.name })),
       ];
     },
   },
diff --git a/client/src/vue_components/user/settings/Settings.vue b/client/src/vue_components/user/settings/Settings.vue
index ec1e68e1..35fc6f09 100644
--- a/client/src/vue_components/user/settings/Settings.vue
+++ b/client/src/vue_components/user/settings/Settings.vue
@@ -78,6 +78,18 @@
                   :state="validateState('console_log_level')"
                 />
               </b-form-group>
+              <b-form-group
+                :label-cols="true"
+                label="Sort characters by most recently used"
+                label-for="character-mru-sort-input"
+              >
+                <b-form-checkbox
+                  id="character-mru-sort-input"
+                  v-model="$v.editSettings.character_mru_sort.$model"
+                  name="character-mru-sort-input"
+                  :switch="true"
+                />
+              </b-form-group>
               <b-button-group size="md" style="float: right">
                 <b-button type="reset" variant="danger" :disabled="!$v.$anyDirty"> Reset </b-button>
                 <b-button type="submit" variant="primary" :disabled="!$v.$anyDirty || $v.$anyError">
@@ -115,6 +127,7 @@ export default defineComponent({
         cue_position_right: false,
         script_text_alignment: TEXT_ALIGNMENT.CENTER,
         console_log_level: 'WARN',
+        character_mru_sort: false,
       },
       textAlignmentOptions: [
         { value: TEXT_ALIGNMENT.LEFT, text: 'Left' },
@@ -156,6 +169,7 @@ export default defineComponent({
         integer,
       },
       console_log_level: { required },
+      character_mru_sort: {},
     },
   },
   mounted(): void {
diff --git a/docs/pages/user_settings.md b/docs/pages/user_settings.md
index 1160336b..3d874b30 100644
--- a/docs/pages/user_settings.md
+++ b/docs/pages/user_settings.md
@@ -18,12 +18,16 @@ The Settings tab allows you to configure personal preferences for your DigiScrip
 
 Configure the script autosave interval to automatically save your script changes while editing. You can set the autosave interval in minutes, or disable autosave entirely if you prefer manual saves.
 
-####
-
- Cue Position
+#### Cue Position
 
 Choose whether cues are displayed on the left or right side of the script during live shows. This allows you to customize the layout to match your workflow or screen arrangement.
 
+#### Sort Characters by Most Recently Used
+
+When enabled, the character and character group dropdown menus in the script editor are reordered so that the characters you have used most frequently appear at the top. The ordering is based on how many times you have selected each character across the last 5 pages you have edited, so characters that appear heavily in the current scene naturally rise to the top.
+
+This setting is particularly useful when entering a scene with a known cast, as it reduces the need to scroll through the full character list. The ordering updates automatically as you make selections and resets when you load a different show.
+
 ### Stage Direction Styles
 
 DigiScript allows you to customize how stage directions appear in the script with personal color and style preferences:
diff --git a/server/alembic_config/versions/c515969c1a51_add_character_mru_sort_to_user_settings.py b/server/alembic_config/versions/c515969c1a51_add_character_mru_sort_to_user_settings.py
new file mode 100644
index 00000000..047b3b40
--- /dev/null
+++ b/server/alembic_config/versions/c515969c1a51_add_character_mru_sort_to_user_settings.py
@@ -0,0 +1,43 @@
+"""add_character_mru_sort_to_user_settings
+
+Revision ID: c515969c1a51
+Revises: 897ae2963f6d
+Create Date: 2026-05-12 19:48:43.975135
+
+"""
+
+from typing import Sequence, Union
+
+import sqlalchemy as sa
+from alembic import op
+
+
+# revision identifiers, used by Alembic.
+revision: str = "c515969c1a51"
+down_revision: Union[str, None] = "897ae2963f6d"
+branch_labels: Union[str, Sequence[str], None] = None
+depends_on: Union[str, Sequence[str], None] = None
+
+
+def upgrade() -> None:
+    # Add column as nullable first so existing rows can be backfilled
+    with op.batch_alter_table("user_settings", schema=None) as batch_op:
+        batch_op.add_column(
+            sa.Column("character_mru_sort", sa.Boolean(), nullable=True)
+        )
+
+    # Backfill existing rows to False
+    op.execute(
+        "UPDATE user_settings SET character_mru_sort = 0 WHERE character_mru_sort IS NULL"
+    )
+
+    # Make column non-nullable
+    with op.batch_alter_table("user_settings", schema=None) as batch_op:
+        batch_op.alter_column(
+            "character_mru_sort", existing_type=sa.Boolean(), nullable=False
+        )
+
+
+def downgrade() -> None:
+    with op.batch_alter_table("user_settings", schema=None) as batch_op:
+        batch_op.drop_column("character_mru_sort")
diff --git a/server/models/user.py b/server/models/user.py
index 258655c9..bd775d59 100644
--- a/server/models/user.py
+++ b/server/models/user.py
@@ -87,6 +87,7 @@ class UserSettings(db.Model):
         TextAlignmentCol, default=TextAlignment.CENTER
     )
     console_log_level: Mapped[str] = mapped_column(default="WARN")
+    character_mru_sort: Mapped[bool] = mapped_column(default=False)
 
     __table_args__ = (
         CheckConstraint(

From a8a070c3bd73bac49133bf9c3773de8c1cb0d16a Mon Sep 17 00:00:00 2001
From: Tim Bradgate <timbradgate@hotmail.co.uk>
Date: Wed, 13 May 2026 01:09:19 +0100
Subject: [PATCH 8/9] Add combined character/group dropdown setting (#1020)
 (#1022)

* Add combined character/group dropdown setting (#1020)

Adds an optional user setting to merge the separate Character and
Character Group dropdowns in the script editor into a single grouped
dropdown with two labelled sections. Integrates with the existing MRU
sort setting so each section is independently frequency-sorted when both
options are active. Includes Alembic migration, TypeScript types, 8 new
Vitest tests, and user documentation.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Fix ruff import order in migration file

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 client/src/js/mruSortUtils.test.ts            |  78 ++++++++++-
 client/src/js/mruSortUtils.ts                 |  49 +++++++
 client/src/types/api/user.ts                  |   1 +
 .../show/config/script/ScriptLinePart.vue     | 132 +++++++++++++-----
 .../vue_components/user/settings/Settings.vue |  14 ++
 docs/pages/user_settings.md                   |   6 +
 ...dd_character_combined_dropdown_to_user_.py |  46 ++++++
 server/models/user.py                         |   1 +
 8 files changed, 291 insertions(+), 36 deletions(-)
 create mode 100644 server/alembic_config/versions/4fbfeaba60ae_add_character_combined_dropdown_to_user_.py

diff --git a/client/src/js/mruSortUtils.test.ts b/client/src/js/mruSortUtils.test.ts
index 8b4412ae..685d8d92 100644
--- a/client/src/js/mruSortUtils.test.ts
+++ b/client/src/js/mruSortUtils.test.ts
@@ -1,5 +1,9 @@
 import { describe, it, expect } from 'vitest';
-import { buildMruCharacterOptions, buildMruCharacterGroupOptions } from './mruSortUtils';
+import {
+  buildMruCharacterOptions,
+  buildMruCharacterGroupOptions,
+  buildCombinedCharacterOptions,
+} from './mruSortUtils';
 
 const CHARS = [
   { id: 1, name: 'Alice' },
@@ -77,6 +81,78 @@ describe('buildMruCharacterOptions', () => {
   });
 });
 
+describe('buildCombinedCharacterOptions', () => {
+  it('always starts with N/A option', () => {
+    const result = buildCombinedCharacterOptions(CHARS, GROUPS, {}, false);
+    expect(result[0]).toEqual({ value: null, text: 'N/A' });
+  });
+
+  it('produces two optgroup sections when both arrays are non-empty', () => {
+    const result = buildCombinedCharacterOptions(CHARS, GROUPS, {}, false);
+    expect(result).toHaveLength(3);
+    expect(result[1]).toHaveProperty('label', 'Characters');
+    expect(result[2]).toHaveProperty('label', 'Character Groups');
+  });
+
+  it('encodes character values as c:<id>', () => {
+    const result = buildCombinedCharacterOptions(CHARS, GROUPS, {}, false);
+    const charSection = result[1] as { label: string; options: { value: string; text: string }[] };
+    expect(charSection.options[0]).toEqual({ value: 'c:1', text: 'Alice' });
+  });
+
+  it('encodes group values as g:<id>', () => {
+    const result = buildCombinedCharacterOptions(CHARS, GROUPS, {}, false);
+    const groupSection = result[2] as { label: string; options: { value: string; text: string }[] };
+    expect(groupSection.options[0]).toEqual({ value: 'g:10', text: 'Ensemble' });
+  });
+
+  it('omits Characters section when characters array is empty', () => {
+    const result = buildCombinedCharacterOptions([], GROUPS, {}, false);
+    expect(result).toHaveLength(2);
+    expect(result[1]).toHaveProperty('label', 'Character Groups');
+  });
+
+  it('omits Character Groups section when groups array is empty', () => {
+    const result = buildCombinedCharacterOptions(CHARS, [], {}, false);
+    expect(result).toHaveLength(2);
+    expect(result[1]).toHaveProperty('label', 'Characters');
+  });
+
+  it('preserves original order when useMru is false', () => {
+    const script = {
+      '1': makePage([{ character_id: 3 }, { character_id: 3 }, { character_id: 3 }]),
+    };
+    const result = buildCombinedCharacterOptions(CHARS, GROUPS, script, false);
+    const charSection = result[1] as { label: string; options: { value: string; text: string }[] };
+    expect(charSection.options.map((o) => o.value)).toEqual(['c:1', 'c:2', 'c:3']);
+  });
+
+  it('sorts each section by frequency when useMru is true', () => {
+    const script = {
+      '1': makePage([
+        { character_id: 3 },
+        { character_id: 3 },
+        { character_group_id: 11 },
+        { character_group_id: 11 },
+      ]),
+    };
+    const result = buildCombinedCharacterOptions(CHARS, GROUPS, script, true);
+    const charSection = result[1] as { label: string; options: { value: string; text: string }[] };
+    const groupSection = result[2] as {
+      label: string;
+      options: { value: string; text: string }[];
+    };
+    expect(charSection.options[0].value).toBe('c:3');
+    expect(groupSection.options[0].value).toBe('g:11');
+  });
+
+  it('preserves original section order when useMru is true but tmpScript is empty', () => {
+    const result = buildCombinedCharacterOptions(CHARS, GROUPS, {}, true);
+    const charSection = result[1] as { label: string; options: { value: string; text: string }[] };
+    expect(charSection.options.map((o) => o.value)).toEqual(['c:1', 'c:2', 'c:3']);
+  });
+});
+
 describe('buildMruCharacterGroupOptions', () => {
   it('returns null when tmpScript is empty', () => {
     expect(buildMruCharacterGroupOptions(GROUPS, {})).toBeNull();
diff --git a/client/src/js/mruSortUtils.ts b/client/src/js/mruSortUtils.ts
index aa332114..a0ecf3bb 100644
--- a/client/src/js/mruSortUtils.ts
+++ b/client/src/js/mruSortUtils.ts
@@ -3,6 +3,9 @@ type LinePart = { character_id?: number | null; character_group_id?: number | nu
 type ScriptLine = { line_parts?: LinePart[] };
 type TmpScript = Record<string, ScriptLine[]>;
 export type SelectOption = { value: number | null; text: string };
+export type CombinedSelectOption =
+  | { value: null; text: string }
+  | { label: string; options: { value: string; text: string }[] };
 
 function countOccurrences(
   tmpScript: TmpScript,
@@ -49,3 +52,49 @@ export function buildMruCharacterGroupOptions(
   const sorted = [...characterGroups].sort((a, b) => (counts[b.id] || 0) - (counts[a.id] || 0));
   return [{ value: null, text: 'N/A' }, ...sorted.map((g) => ({ value: g.id, text: g.name }))];
 }
+
+/**
+ * Builds a grouped options list for a combined character + character group dropdown.
+ * Each section is independently sorted by MRU frequency when useMru is true and
+ * frequency data is available; otherwise original order is preserved.
+ * Option values use "c:<id>" for characters and "g:<id>" for groups.
+ */
+export function buildCombinedCharacterOptions(
+  characters: NamedItem[],
+  characterGroups: NamedItem[],
+  tmpScript: TmpScript,
+  useMru: boolean
+): CombinedSelectOption[] {
+  let sortedChars = [...characters];
+  let sortedGroups = [...characterGroups];
+
+  if (useMru) {
+    const charCounts = countOccurrences(tmpScript, 'character_id');
+    if (Object.keys(charCounts).length > 0) {
+      sortedChars = [...characters].sort(
+        (a, b) => (charCounts[b.id] || 0) - (charCounts[a.id] || 0)
+      );
+    }
+    const groupCounts = countOccurrences(tmpScript, 'character_group_id');
+    if (Object.keys(groupCounts).length > 0) {
+      sortedGroups = [...characterGroups].sort(
+        (a, b) => (groupCounts[b.id] || 0) - (groupCounts[a.id] || 0)
+      );
+    }
+  }
+
+  const result: CombinedSelectOption[] = [{ value: null, text: 'N/A' }];
+  if (sortedChars.length > 0) {
+    result.push({
+      label: 'Characters',
+      options: sortedChars.map((c) => ({ value: `c:${c.id}`, text: c.name })),
+    });
+  }
+  if (sortedGroups.length > 0) {
+    result.push({
+      label: 'Character Groups',
+      options: sortedGroups.map((g) => ({ value: `g:${g.id}`, text: g.name })),
+    });
+  }
+  return result;
+}
diff --git a/client/src/types/api/user.ts b/client/src/types/api/user.ts
index 7642c68d..98e204a2 100644
--- a/client/src/types/api/user.ts
+++ b/client/src/types/api/user.ts
@@ -21,4 +21,5 @@ export interface UserSettings {
   script_text_alignment: number;
   console_log_level: string;
   character_mru_sort: boolean;
+  character_combined_dropdown: boolean;
 }
diff --git a/client/src/vue_components/show/config/script/ScriptLinePart.vue b/client/src/vue_components/show/config/script/ScriptLinePart.vue
index 233130d9..9d804da5 100644
--- a/client/src/vue_components/show/config/script/ScriptLinePart.vue
+++ b/client/src/vue_components/show/config/script/ScriptLinePart.vue
@@ -1,40 +1,61 @@
 <template>
   <b-col>
     <b-form-row v-if="lineType === LINE_TYPES.DIALOGUE">
-      <b-col v-show="$v.state.character_group_id.$model == null">
-        <b-form-group
-          id="character-input-group"
-          label-size="sm"
-          label="Character"
-          label-for="character-input"
-        >
-          <b-form-select
-            id="character-input"
-            v-model="$v.state.character_id.$model"
-            name="character-input"
-            :options="characterOptions"
-            :state="validateState('character_id')"
-            @change="stateChange"
-          />
-        </b-form-group>
-      </b-col>
-      <b-col v-show="$v.state.character_id.$model == null">
-        <b-form-group
-          id="character-group-input-group"
-          label-size="sm"
-          label="Character Group"
-          label-for="character-group-input"
-        >
-          <b-form-select
-            id="character-group-input"
-            v-model="$v.state.character_group_id.$model"
-            name="character-group-input"
-            :options="characterGroupOptions"
-            :state="validateState('character_group_id')"
-            @change="stateChange"
-          />
-        </b-form-group>
-      </b-col>
+      <template v-if="USER_SETTINGS && USER_SETTINGS.character_combined_dropdown">
+        <b-col>
+          <b-form-group
+            id="character-combined-input-group"
+            label-size="sm"
+            label="Character / Character Group"
+            label-for="character-combined-input"
+          >
+            <b-form-select
+              id="character-combined-input"
+              v-model="combinedValue"
+              name="character-combined-input"
+              :options="combinedOptions"
+              :state="validateCombinedState()"
+              @change="stateChange"
+            />
+          </b-form-group>
+        </b-col>
+      </template>
+      <template v-else>
+        <b-col v-show="$v.state.character_group_id.$model == null">
+          <b-form-group
+            id="character-input-group"
+            label-size="sm"
+            label="Character"
+            label-for="character-input"
+          >
+            <b-form-select
+              id="character-input"
+              v-model="$v.state.character_id.$model"
+              name="character-input"
+              :options="characterOptions"
+              :state="validateState('character_id')"
+              @change="stateChange"
+            />
+          </b-form-group>
+        </b-col>
+        <b-col v-show="$v.state.character_id.$model == null">
+          <b-form-group
+            id="character-group-input-group"
+            label-size="sm"
+            label="Character Group"
+            label-for="character-group-input"
+          >
+            <b-form-select
+              id="character-group-input"
+              v-model="$v.state.character_group_id.$model"
+              name="character-group-input"
+              :options="characterGroupOptions"
+              :state="validateState('character_group_id')"
+              @change="stateChange"
+            />
+          </b-form-group>
+        </b-col>
+      </template>
     </b-form-row>
     <b-form-row>
       <b-col style="display: inline-flex">
@@ -64,7 +85,12 @@ import { defineComponent } from 'vue';
 import { mapGetters } from 'vuex';
 import { required, requiredIf } from 'vuelidate/lib/validators';
 import { LINE_TYPES } from '@/constants/lineTypes';
-import { buildMruCharacterOptions, buildMruCharacterGroupOptions } from '@/js/mruSortUtils';
+import {
+  buildMruCharacterOptions,
+  buildMruCharacterGroupOptions,
+  buildCombinedCharacterOptions,
+  type CombinedSelectOption,
+} from '@/js/mruSortUtils';
 
 export default defineComponent({
   name: 'ScriptLinePart',
@@ -152,6 +178,36 @@ export default defineComponent({
         ...groups.map((g: any) => ({ value: g.id, text: g.name })),
       ];
     },
+    combinedOptions(): CombinedSelectOption[] {
+      return buildCombinedCharacterOptions(
+        this.characters as any[],
+        this.characterGroups as any[],
+        this.TMP_SCRIPT,
+        !!(this.USER_SETTINGS as any)?.character_mru_sort
+      );
+    },
+    combinedValue: {
+      get(): string | null {
+        const s = (this as any).state;
+        if (s.character_id != null) return `c:${s.character_id}`;
+        if (s.character_group_id != null) return `g:${s.character_group_id}`;
+        return null;
+      },
+      set(val: string | null): void {
+        const s = (this as any).state;
+        if (val == null) {
+          s.character_id = null;
+          s.character_group_id = null;
+        } else if (val.startsWith('c:')) {
+          s.character_id = parseInt(val.slice(2), 10);
+          s.character_group_id = null;
+        } else if (val.startsWith('g:')) {
+          s.character_id = null;
+          s.character_group_id = parseInt(val.slice(2), 10);
+        }
+        (this as any).$v.state.$touch();
+      },
+    },
   },
   mounted(): void {
     (this as any).$v.state.$touch();
@@ -174,6 +230,12 @@ export default defineComponent({
       const { $dirty, $error } = (this as any).$v.state[name];
       return $dirty ? !$error : null;
     },
+    validateCombinedState(): boolean | null {
+      const charV = (this as any).$v.state.character_id;
+      const groupV = (this as any).$v.state.character_group_id;
+      if (!charV.$dirty && !groupV.$dirty) return null;
+      return !(charV.$error && groupV.$error);
+    },
     addLinePart(): void {
       this.$emit('addLinePart');
     },
diff --git a/client/src/vue_components/user/settings/Settings.vue b/client/src/vue_components/user/settings/Settings.vue
index 35fc6f09..6dabe84f 100644
--- a/client/src/vue_components/user/settings/Settings.vue
+++ b/client/src/vue_components/user/settings/Settings.vue
@@ -90,6 +90,18 @@
                   :switch="true"
                 />
               </b-form-group>
+              <b-form-group
+                :label-cols="true"
+                label="Use combined character/group dropdown"
+                label-for="character-combined-dropdown-input"
+              >
+                <b-form-checkbox
+                  id="character-combined-dropdown-input"
+                  v-model="$v.editSettings.character_combined_dropdown.$model"
+                  name="character-combined-dropdown-input"
+                  :switch="true"
+                />
+              </b-form-group>
               <b-button-group size="md" style="float: right">
                 <b-button type="reset" variant="danger" :disabled="!$v.$anyDirty"> Reset </b-button>
                 <b-button type="submit" variant="primary" :disabled="!$v.$anyDirty || $v.$anyError">
@@ -128,6 +140,7 @@ export default defineComponent({
         script_text_alignment: TEXT_ALIGNMENT.CENTER,
         console_log_level: 'WARN',
         character_mru_sort: false,
+        character_combined_dropdown: false,
       },
       textAlignmentOptions: [
         { value: TEXT_ALIGNMENT.LEFT, text: 'Left' },
@@ -170,6 +183,7 @@ export default defineComponent({
       },
       console_log_level: { required },
       character_mru_sort: {},
+      character_combined_dropdown: {},
     },
   },
   mounted(): void {
diff --git a/docs/pages/user_settings.md b/docs/pages/user_settings.md
index 3d874b30..d758d4f9 100644
--- a/docs/pages/user_settings.md
+++ b/docs/pages/user_settings.md
@@ -28,6 +28,12 @@ When enabled, the character and character group dropdown menus in the script edi
 
 This setting is particularly useful when entering a scene with a known cast, as it reduces the need to scroll through the full character list. The ordering updates automatically as you make selections and resets when you load a different show.
 
+#### Use Combined Character/Group Dropdown
+
+When enabled, the separate Character and Character Group dropdowns in the script editor are merged into a single dropdown with two clearly labelled sections — **Characters** and **Character Groups**. Selecting an entry from either section automatically clears the other field, so you can switch freely between assigning a line to an individual character or a group.
+
+When combined with the **Sort Characters by Most Recently Used** setting, each section is independently sorted by frequency so your most-used characters appear at the top of their respective section.
+
 ### Stage Direction Styles
 
 DigiScript allows you to customize how stage directions appear in the script with personal color and style preferences:
diff --git a/server/alembic_config/versions/4fbfeaba60ae_add_character_combined_dropdown_to_user_.py b/server/alembic_config/versions/4fbfeaba60ae_add_character_combined_dropdown_to_user_.py
new file mode 100644
index 00000000..42881952
--- /dev/null
+++ b/server/alembic_config/versions/4fbfeaba60ae_add_character_combined_dropdown_to_user_.py
@@ -0,0 +1,46 @@
+"""add_character_combined_dropdown_to_user_settings
+
+Revision ID: 4fbfeaba60ae
+Revises: c515969c1a51
+Create Date: 2026-05-13 00:56:16.000156
+
+"""
+
+from typing import Sequence, Union
+
+import sqlalchemy as sa
+from alembic import op
+
+
+# revision identifiers, used by Alembic.
+revision: str = "4fbfeaba60ae"
+down_revision: Union[str, None] = "c515969c1a51"
+branch_labels: Union[str, Sequence[str], None] = None
+depends_on: Union[str, Sequence[str], None] = None
+
+
+def upgrade() -> None:
+    # Add column as nullable first so existing rows can be backfilled
+    with op.batch_alter_table("user_settings", schema=None) as batch_op:
+        batch_op.add_column(
+            sa.Column("character_combined_dropdown", sa.Boolean(), nullable=True)
+        )
+
+    # Backfill existing rows to False
+    op.execute(
+        "UPDATE user_settings SET character_combined_dropdown = 0 WHERE character_combined_dropdown IS NULL"
+    )
+
+    # Make column non-nullable
+    with op.batch_alter_table("user_settings", schema=None) as batch_op:
+        batch_op.alter_column(
+            "character_combined_dropdown", existing_type=sa.Boolean(), nullable=False
+        )
+
+
+def downgrade() -> None:
+    # ### commands auto generated by Alembic - please adjust! ###
+    with op.batch_alter_table("user_settings", schema=None) as batch_op:
+        batch_op.drop_column("character_combined_dropdown")
+
+    # ### end Alembic commands ###
diff --git a/server/models/user.py b/server/models/user.py
index bd775d59..def17546 100644
--- a/server/models/user.py
+++ b/server/models/user.py
@@ -88,6 +88,7 @@ class UserSettings(db.Model):
     )
     console_log_level: Mapped[str] = mapped_column(default="WARN")
     character_mru_sort: Mapped[bool] = mapped_column(default=False)
+    character_combined_dropdown: Mapped[bool] = mapped_column(default=False)
 
     __table_args__ = (
         CheckConstraint(

From febb20f8c7f8082096c76f51a2331697375b321d Mon Sep 17 00:00:00 2001
From: Tim Bradgate <timbradgate@hotmail.co.uk>
Date: Wed, 13 May 2026 01:09:46 +0100
Subject: [PATCH 9/9] Bump version to 0.29.0

---
 client/package-lock.json   | 4 ++--
 client/package.json        | 2 +-
 electron/package-lock.json | 4 ++--
 electron/package.json      | 2 +-
 server/pyproject.toml      | 2 +-
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/client/package-lock.json b/client/package-lock.json
index 81691151..def452da 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "client",
-  "version": "0.28.0",
+  "version": "0.29.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "client",
-      "version": "0.28.0",
+      "version": "0.29.0",
       "dependencies": {
         "bootstrap": "4.6.2",
         "bootstrap-vue": "2.23.1",
diff --git a/client/package.json b/client/package.json
index 7dd641df..56aaf492 100644
--- a/client/package.json
+++ b/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "client",
-  "version": "0.28.0",
+  "version": "0.29.0",
   "description": "DigiScript front end",
   "author": "DreamTeamProd",
   "private": true,
diff --git a/electron/package-lock.json b/electron/package-lock.json
index d9ba4371..3daab0ff 100644
--- a/electron/package-lock.json
+++ b/electron/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "digiscript-electron",
-  "version": "0.28.0",
+  "version": "0.29.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "digiscript-electron",
-      "version": "0.28.0",
+      "version": "0.29.0",
       "license": "GPL-3.0",
       "dependencies": {
         "bonjour-service": "^1.3.0",
diff --git a/electron/package.json b/electron/package.json
index e46a65ea..3a44ac12 100644
--- a/electron/package.json
+++ b/electron/package.json
@@ -1,6 +1,6 @@
 {
   "name": "digiscript-electron",
-  "version": "0.28.0",
+  "version": "0.29.0",
   "description": "DigiScript Electron Desktop Application",
   "author": "DreamTeamProd",
   "license": "GPL-3.0",
diff --git a/server/pyproject.toml b/server/pyproject.toml
index 7e35f203..3355095e 100644
--- a/server/pyproject.toml
+++ b/server/pyproject.toml
@@ -11,7 +11,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "digiscript-server"
-version = "0.28.0"
+version = "0.29.0"
 description = "DigiScript server - Digital script management for theatrical shows"
 readme = "../README.md"
 requires-python = ">=3.13"