configured typescript strict mode in the frontend

documentation/project-improvement-todo.ru.md

@@ -35,15 +35,17 @@ Frontend:
 
 Цель: включить strict TypeScript как обязательный стандарт для frontend и закрыть legacy errors без сохранения JS/CommonJS как допустимого направления. Новый и изменённый код должен быть strict-compatible.
 
+Статус: выполнено 2026-07-06 для strict TypeScript baseline и frontend lint-warning cleanup. Первичный запуск `strict: true` давал 294 ошибки; после исправлений `frontend/tsconfig.json` использует общий `strict: true`, `npm run typecheck` проходит, `npm run lint` проходит без warnings, `npm run test` проходит (307 tests), `npm run test:e2e` проходит (10 tests), `npm run build` проходит.
+
 TODO:
 
-- Посчитать текущий frontend typecheck baseline: сколько ошибок даёт `strict: true`.
-- Включать strictness по шагам: сначала отдельный strict config для selected folders/new code, затем общий `strict: true`, когда baseline закрыт.
-- Для новых/изменённых файлов запрещать новый `any` без явной причины.
-- Запретить новые type assertions/casts (`as`, angle-bracket assertions, non-null `!`) в feature code. Исключения: validated external boundaries, DOM/library interop, discriminated unions после guard; исключение должно быть локальным и объяснённым.
-- Вернуть `no-unused-vars`/unused imports как warning, затем поднять до error после cleanup.
-- Добавить frontend `typecheck` script и включить его в minimal checks, когда baseline проходит.
-- `react-hooks/exhaustive-deps` включать file-by-file после исправления конкретных hooks.
+- [x] Посчитать текущий frontend typecheck baseline: сколько ошибок даёт `strict: true`.
+- [x] Включать strictness по шагам: сначала отдельный strict config для selected folders/new code, затем общий `strict: true`, когда baseline закрыт.
+- [x] Для новых/изменённых файлов запрещать новый `any` без явной причины через `@typescript-eslint/no-explicit-any` warning.
+- [x] Вернуть guardrails для type assertions/casts (`as`, angle-bracket assertions, non-null `!`) как warnings. Исключения: validated external boundaries, DOM/library interop, discriminated unions после guard; исключение должно быть локальным и объяснённым.
+- [x] Вернуть `no-unused-vars`/unused imports как warning и очистить текущие warnings.
+- [x] Добавить frontend `typecheck` script и включить его в minimal checks, когда baseline проходит.
+- [x] Вернуть `react-hooks/exhaustive-deps` как warning и очистить текущие hook dependency warnings.
 
 ### Auth storage
 

frontend/.eslintrc.cjs

@@ -14,10 +14,26 @@ module.exports = {
   },
   rules: {
     'react/no-children-prop': 'off',
-    '@typescript-eslint/no-explicit-any': 'off',
-    '@typescript-eslint/no-unused-vars': 'off', // Turned off to reduce noise
+    '@typescript-eslint/no-explicit-any': 'warn',
+    '@typescript-eslint/no-unused-vars': [
+      'warn',
+      {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+        caughtErrorsIgnorePattern: '^_',
+        ignoreRestSiblings: true,
+      },
+    ],
+    '@typescript-eslint/consistent-type-assertions': [
+      'warn',
+      {
+        assertionStyle: 'as',
+        objectLiteralTypeAssertions: 'allow',
+      },
+    ],
+    '@typescript-eslint/no-non-null-assertion': 'warn',
     '@typescript-eslint/ban-types': 'off',
-    'react-hooks/exhaustive-deps': 'off', // Turned off to reduce noise
+    'react-hooks/exhaustive-deps': 'warn',
     'import/named': 'error',
     'import/no-duplicates': 'error',
     'import/no-unresolved': 'error',

frontend/docs/frontend-architecture.md

@@ -16,7 +16,7 @@ The frontend is a **Next.js 15** application with **React 19**, **TypeScript**,
 |------------|---------|---------|
 | Next.js | 15.3.1 | React framework with Pages Router |
 | React | 19.0.0 | UI library |
-| TypeScript | 5.x | Type safety |
+| TypeScript | 5.x | Strict type safety |
 | Redux Toolkit | 2.1.0 | State management |
 | MUI X DataGrid | 7.0.0 | Data tables |
 | Tailwind CSS | 3.4.1 | Utility-first styling |

frontend/docs/types-module.md

@@ -6,6 +6,8 @@ The types module provides **TypeScript type definitions** used throughout the fr
 
 **Location:** `frontend/src/types/`
 
+**Strictness:** Frontend TypeScript runs with `strict: true` in `frontend/tsconfig.json`. `npm run typecheck` is the strict type gate for changed frontend code. ESLint also reports explicit `any`, type assertions/non-null assertions, unused variables/imports, and React hook dependency issues as warnings; the current frontend lint baseline has no warnings.
+
 **Statistics:**
 - **20 files** (~2,205 LOC total)
 - **6 categories**: Domain Entities, Runtime/Presentation, Infrastructure, Forms/Filters, Specialized, Module Declarations

frontend/package-lock.json

@@ -45,7 +45,10 @@
       "devDependencies": {
         "@playwright/test": "^1.61.1",
         "@tailwindcss/forms": "^0.5.7",
+        "@types/file-saver": "^2.0.7",
+        "@types/lodash": "^4.17.24",
         "@types/node": "18.7.16",
+        "@types/react-dom": "^19.2.3",
         "@typescript-eslint/eslint-plugin": "^8.62.1",
         "@typescript-eslint/parser": "^8.62.1",
         "autoprefixer": "^10.4.0",
@@ -2573,6 +2576,13 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/file-saver": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.7.tgz",
+      "integrity": "sha512-dNKVfHd/jk0SkR/exKGj2ggkB45MAkzvWCaqLUUgkyjITkGNzH8H+yUwr+BLJUBjZOe9w8X3wgmXhZDRg1ED6A==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/hoist-non-react-statics": {
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.7.tgz",
@@ -2592,6 +2602,13 @@
       "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": "18.7.16",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.7.16.tgz",
@@ -2621,6 +2638,16 @@
         "csstype": "^3.2.2"
       }
     },
+    "node_modules/@types/react-dom": {
+      "version": "19.2.3",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
+      "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^19.2.0"
+      }
+    },
     "node_modules/@types/react-transition-group": {
       "version": "4.4.12",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz",

frontend/package.json

@@ -57,7 +57,10 @@
   "devDependencies": {
     "@playwright/test": "^1.61.1",
     "@tailwindcss/forms": "^0.5.7",
+    "@types/file-saver": "^2.0.7",
+    "@types/lodash": "^4.17.24",
     "@types/node": "18.7.16",
+    "@types/react-dom": "^19.2.3",
     "@typescript-eslint/eslint-plugin": "^8.62.1",
     "@typescript-eslint/parser": "^8.62.1",
     "autoprefixer": "^10.4.0",

frontend/src/colors.ts

@@ -105,6 +105,9 @@ export const getButtonColor = (
       info: 'border-blue-600  border-blue-600 dark:border-pavitra-blue',
     },
     text: {
+      white: 'text-black dark:text-white',
+      whiteDark: 'text-black dark:text-white',
+      lightDark: 'text-black dark:text-white',
       contrast: 'dark:text-slate-100',
       success: 'text-emerald-600 dark:text-pavitra-blue',
       danger: 'text-red-600 dark:text-red-500',
@@ -112,6 +115,9 @@ export const getButtonColor = (
       info: 'text-blue-600  dark:text-pavitra-blue',
     },
     outlineHover: {
+      white: 'hover:bg-gray-100 hover:dark:bg-dark-800',
+      whiteDark: 'hover:bg-gray-100 hover:dark:bg-dark-800',
+      lightDark: 'hover:bg-gray-200 hover:dark:bg-slate-700',
       contrast:
         'hover:bg-gray-800 hover:text-gray-100 hover:dark:bg-slate-100 hover:dark:text-black',
       success:

frontend/src/components/Access_logs/CardAccess_logs.tsx

@@ -1,12 +1,9 @@
-import React from 'react';
-import ImageField from '../ImageField';
-import ListActionsPopover from '../ListActionsPopover';
-import { useAppSelector } from '../../stores/hooks';
-import dataFormatter from '../../helpers/dataFormatter';
-import { Pagination } from '../Pagination';
-import { saveFile } from '../../helpers/fileSaver';
-import LoadingSpinner from '../LoadingSpinner';
 import Link from 'next/link';
+import dataFormatter from '../../helpers/dataFormatter';
+import { useAppSelector } from '../../stores/hooks';
+import ListActionsPopover from '../ListActionsPopover';
+import LoadingSpinner from '../LoadingSpinner';
+import { Pagination } from '../Pagination';
 
 import { hasPermission } from '../../helpers/userPermissions';
 import type { AccessLog } from '../../types/entities';
@@ -47,7 +44,7 @@ const CardAccess_logs = ({
         className='grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 2xl:grid-cols-4 xl:gap-x-8'
       >
         {!loading &&
-          access_logs.map((item, index) => (
+          access_logs.map((item) => (
             <li
               key={item.id}
               className={`overflow-hidden ${corners !== 'rounded-full' ? corners : 'rounded-3xl'} border  ${focusRing} border-gray-200 dark:border-dark-700 ${

frontend/src/components/Access_logs/ListAccess_logs.tsx

@@ -1,13 +1,10 @@
-import React from 'react';
-import CardBox from '../CardBox';
-import ImageField from '../ImageField';
-import dataFormatter from '../../helpers/dataFormatter';
-import { saveFile } from '../../helpers/fileSaver';
-import ListActionsPopover from '../ListActionsPopover';
-import { useAppSelector } from '../../stores/hooks';
-import { Pagination } from '../Pagination';
-import LoadingSpinner from '../LoadingSpinner';
 import Link from 'next/link';
+import dataFormatter from '../../helpers/dataFormatter';
+import { useAppSelector } from '../../stores/hooks';
+import CardBox from '../CardBox';
+import ListActionsPopover from '../ListActionsPopover';
+import LoadingSpinner from '../LoadingSpinner';
+import { Pagination } from '../Pagination';
 
 import { hasPermission } from '../../helpers/userPermissions';
 import type { AccessLog } from '../../types/entities';
@@ -32,9 +29,6 @@ const ListAccess_logs = ({
   const currentUser = useAppSelector((state) => state.auth.currentUser);
   const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_ACCESS_LOGS');
 
-  const corners = useAppSelector((state) => state.style.corners);
-  const bgColor = useAppSelector((state) => state.style.cardsColor);
-
   return (
     <>
       <div className='relative overflow-x-auto p-4 space-y-4'>

frontend/src/components/Access_logs/TableAccess_logs.tsx

@@ -1,13 +1,13 @@
-import { createTableComponent } from '../Factory/createTableComponent';
 import {
-  fetch,
-  update,
   deleteItem,
-  setRefetch,
   deleteItemsByIds,
+  fetch,
+  setRefetch,
+  update,
 } from '../../stores/access_logs/access_logsSlice';
-import { loadColumns } from './configureAccess_logsCols';
 import type { AccessLog } from '../../types/entities';
+import { createTableComponent } from '../Factory/createTableComponent';
+import { loadColumns } from './configureAccess_logsCols';
 
 const TableAccess_logs = createTableComponent<AccessLog>({
   entityName: 'access_logs',

frontend/src/components/Access_logs/configureAccess_logsCols.tsx

@@ -1,6 +1,6 @@
 import {
-  createColumnLoader,
   ColumnMetadata,
+  createColumnLoader,
 } from '../DataGrid/configBuilderFactory';
 
 const ACCESS_LOGS_COLUMNS: ColumnMetadata[] = [

frontend/src/components/AsideMenu.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { MenuAsideItem } from '../types/menu';
 import AsideMenuLayer from './AsideMenuLayer';
 import OverlayLayer from './OverlayLayer';

frontend/src/components/AsideMenuItem.tsx

@@ -1,12 +1,12 @@
-import React, { useEffect, useState } from 'react';
 import { mdiMinus, mdiPlus } from '@mdi/js';
-import BaseIcon from './BaseIcon';
 import Link from 'next/link';
-import { getButtonColor } from '../colors';
-import AsideMenuList from './AsideMenuList';
-import { MenuAsideItem } from '../types/menu';
-import { useAppSelector } from '../stores/hooks';
 import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+import { getButtonColor } from '../colors';
+import { useAppSelector } from '../stores/hooks';
+import { MenuAsideItem } from '../types/menu';
+import AsideMenuList from './AsideMenuList';
+import BaseIcon from './BaseIcon';
 
 type Props = {
   item: MenuAsideItem;

frontend/src/components/AsideMenuLayer.tsx

@@ -1,10 +1,9 @@
+import { mdiClose } from '@mdi/js';
 import React from 'react';
-import { mdiLogout, mdiClose } from '@mdi/js';
-import BaseIcon from './BaseIcon';
-import AsideMenuList from './AsideMenuList';
-import { MenuAsideItem } from '../types/menu';
 import { useAppSelector } from '../stores/hooks';
-import Link from 'next/link';
+import { MenuAsideItem } from '../types/menu';
+import AsideMenuList from './AsideMenuList';
+import BaseIcon from './BaseIcon';
 
 type Props = {
   menu: MenuAsideItem[];

frontend/src/components/AsideMenuList.tsx

@@ -1,8 +1,7 @@
-import React from 'react';
+import { hasPermission } from '../helpers/userPermissions';
+import { useAppSelector } from '../stores/hooks';
 import { MenuAsideItem } from '../types/menu';
 import AsideMenuItem from './AsideMenuItem';
-import { useAppSelector } from '../stores/hooks';
-import { hasPermission } from '../helpers/userPermissions';
 
 type Props = {
   menu: MenuAsideItem[];
@@ -22,7 +21,9 @@ export default function AsideMenuList({
   return (
     <ul className={className}>
       {menu.map((item, index) => {
-        if (!hasPermission(currentUser, item.permissions)) return null;
+        if (item.permissions && !hasPermission(currentUser, item.permissions)) {
+          return null;
+        }
 
         return (
           <div key={index}>

frontend/src/components/Asset_variants/CardAsset_variants.tsx

@@ -1,12 +1,9 @@
-import React from 'react';
-import ImageField from '../ImageField';
-import ListActionsPopover from '../ListActionsPopover';
-import { useAppSelector } from '../../stores/hooks';
-import dataFormatter from '../../helpers/dataFormatter';
-import { Pagination } from '../Pagination';
-import { saveFile } from '../../helpers/fileSaver';
-import LoadingSpinner from '../LoadingSpinner';
 import Link from 'next/link';
+import dataFormatter from '../../helpers/dataFormatter';
+import { useAppSelector } from '../../stores/hooks';
+import ListActionsPopover from '../ListActionsPopover';
+import LoadingSpinner from '../LoadingSpinner';
+import { Pagination } from '../Pagination';
 
 import { hasPermission } from '../../helpers/userPermissions';
 import type { AssetVariant } from '../../types/entities';
@@ -50,7 +47,7 @@ const CardAsset_variants = ({
         className='grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 2xl:grid-cols-4 xl:gap-x-8'
       >
         {!loading &&
-          asset_variants.map((item, index) => (
+          asset_variants.map((item) => (
             <li
               key={item.id}
               className={`overflow-hidden ${corners !== 'rounded-full' ? corners : 'rounded-3xl'} border  ${focusRing} border-gray-200 dark:border-dark-700 ${

frontend/src/components/Asset_variants/ListAsset_variants.tsx

@@ -1,13 +1,10 @@
-import React from 'react';
-import CardBox from '../CardBox';
-import ImageField from '../ImageField';
-import dataFormatter from '../../helpers/dataFormatter';
-import { saveFile } from '../../helpers/fileSaver';
-import ListActionsPopover from '../ListActionsPopover';
-import { useAppSelector } from '../../stores/hooks';
-import { Pagination } from '../Pagination';
-import LoadingSpinner from '../LoadingSpinner';
 import Link from 'next/link';
+import dataFormatter from '../../helpers/dataFormatter';
+import { useAppSelector } from '../../stores/hooks';
+import CardBox from '../CardBox';
+import ListActionsPopover from '../ListActionsPopover';
+import LoadingSpinner from '../LoadingSpinner';
+import { Pagination } from '../Pagination';
 
 import { hasPermission } from '../../helpers/userPermissions';
 import type { AssetVariant } from '../../types/entities';
@@ -35,9 +32,6 @@ const ListAsset_variants = ({
     'UPDATE_ASSET_VARIANTS',
   );
 
-  const corners = useAppSelector((state) => state.style.corners);
-  const bgColor = useAppSelector((state) => state.style.cardsColor);
-
   return (
     <>
       <div className='relative overflow-x-auto p-4 space-y-4'>

frontend/src/components/Asset_variants/TableAsset_variants.tsx

@@ -1,13 +1,13 @@
-import { createTableComponent } from '../Factory/createTableComponent';
 import {
-  fetch,
-  update,
   deleteItem,
-  setRefetch,
   deleteItemsByIds,
+  fetch,
+  setRefetch,
+  update,
 } from '../../stores/asset_variants/asset_variantsSlice';
-import { loadColumns } from './configureAsset_variantsCols';
 import type { AssetVariant } from '../../types/entities';
+import { createTableComponent } from '../Factory/createTableComponent';
+import { loadColumns } from './configureAsset_variantsCols';
 
 const TableAsset_variants = createTableComponent<AssetVariant>({
   entityName: 'asset_variants',

frontend/src/components/Asset_variants/configureAsset_variantsCols.tsx

@@ -1,6 +1,6 @@
 import {
-  createColumnLoader,
   ColumnMetadata,
+  createColumnLoader,
 } from '../DataGrid/configBuilderFactory';
 
 const ASSET_VARIANTS_COLUMNS: ColumnMetadata[] = [

frontend/src/components/Assets/AssetSectionCard.tsx

@@ -92,7 +92,7 @@ const AssetSectionCard: React.FC<AssetSectionCardProps> = ({
       <input
         type='file'
         multiple
-        accept={section.accept}
+        accept={section.accept ?? undefined}
         className='w-full border border-gray-300 rounded px-2 py-2 mb-3 bg-white dark:bg-dark-800'
         disabled={isUploading || disabled || !hasCreatePermission}
         onChange={handleFileChange}

frontend/src/components/Assets/CardAssets.tsx

@@ -1,12 +1,9 @@
-import React from 'react';
-import ImageField from '../ImageField';
-import ListActionsPopover from '../ListActionsPopover';
-import { useAppSelector } from '../../stores/hooks';
-import dataFormatter from '../../helpers/dataFormatter';
-import { Pagination } from '../Pagination';
-import { saveFile } from '../../helpers/fileSaver';
-import LoadingSpinner from '../LoadingSpinner';
 import Link from 'next/link';
+import dataFormatter from '../../helpers/dataFormatter';
+import { useAppSelector } from '../../stores/hooks';
+import ListActionsPopover from '../ListActionsPopover';
+import LoadingSpinner from '../LoadingSpinner';
+import { Pagination } from '../Pagination';
 
 import { hasPermission } from '../../helpers/userPermissions';
 import type { Asset } from '../../types/entities';
@@ -47,7 +44,7 @@ const CardAssets = ({
         className='grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 2xl:grid-cols-4 xl:gap-x-8'
       >
         {!loading &&
-          assets.map((item, index) => (
+          assets.map((item) => (
             <li
               key={item.id}
               className={`overflow-hidden ${corners !== 'rounded-full' ? corners : 'rounded-3xl'} border  ${focusRing} border-gray-200 dark:border-dark-700 ${

frontend/src/components/Assets/EmbedAssetSection.tsx

@@ -5,13 +5,13 @@
  * Validates embed URLs against a trusted domain allowlist on the backend.
  */
 
-import React, { useState, useCallback } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
-import { useAppDispatch, useAppSelector } from '../../stores/hooks';
-import { create, deleteItem } from '../../stores/assets/assetsSlice';
+import React, { useCallback, useState } from 'react';
 import { queryKeys } from '../../lib/queryClient';
-import CardBox from '../CardBox';
+import { create, deleteItem } from '../../stores/assets/assetsSlice';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
 import BaseButton from '../BaseButton';
+import CardBox from '../CardBox';
 import type { Asset } from './AssetSectionCard';
 
 interface EmbedAssetSectionProps {

frontend/src/components/Assets/ListAssets.tsx

@@ -1,13 +1,10 @@
-import React from 'react';
-import CardBox from '../CardBox';
-import ImageField from '../ImageField';
-import dataFormatter from '../../helpers/dataFormatter';
-import { saveFile } from '../../helpers/fileSaver';
-import ListActionsPopover from '../ListActionsPopover';
-import { useAppSelector } from '../../stores/hooks';
-import { Pagination } from '../Pagination';
-import LoadingSpinner from '../LoadingSpinner';
 import Link from 'next/link';
+import dataFormatter from '../../helpers/dataFormatter';
+import { useAppSelector } from '../../stores/hooks';
+import CardBox from '../CardBox';
+import ListActionsPopover from '../ListActionsPopover';
+import LoadingSpinner from '../LoadingSpinner';
+import { Pagination } from '../Pagination';
 
 import { hasPermission } from '../../helpers/userPermissions';
 import type { Asset } from '../../types/entities';
@@ -32,9 +29,6 @@ const ListAssets = ({
   const currentUser = useAppSelector((state) => state.auth.currentUser);
   const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_ASSETS');
 
-  const corners = useAppSelector((state) => state.style.corners);
-  const bgColor = useAppSelector((state) => state.style.cardsColor);
-
   return (
     <>
       <div className='relative overflow-x-auto p-4 space-y-4'>

frontend/src/components/Assets/TableAssets.tsx

@@ -1,13 +1,13 @@
-import { createTableComponent } from '../Factory/createTableComponent';
 import {
-  fetch,
-  update,
   deleteItem,
-  setRefetch,
   deleteItemsByIds,
+  fetch,
+  setRefetch,
+  update,
 } from '../../stores/assets/assetsSlice';
-import { loadColumns } from './configureAssetsCols';
 import type { Asset } from '../../types/entities';
+import { createTableComponent } from '../Factory/createTableComponent';
+import { loadColumns } from './configureAssetsCols';
 
 const TableAssets = createTableComponent<Asset>({
   entityName: 'assets',

frontend/src/components/Assets/configureAssetsCols.tsx

@@ -1,6 +1,6 @@
 import {
-  createColumnLoader,
   ColumnMetadata,
+  createColumnLoader,
 } from '../DataGrid/configBuilderFactory';
 
 const ASSETS_COLUMNS: ColumnMetadata[] = [

frontend/src/components/Assets/useAssetUploader.ts

@@ -1,15 +1,15 @@
 import axios from 'axios';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { toast } from 'react-toastify';
+import { logger } from '../../lib/logger';
+import {
+  isAudioMimeType,
+  isVideoMimeType,
+  probeMediaDuration,
+} from '../../lib/mediaDuration';
 import FileUploader from '../Uploaders/UploadService';
 import type { AssetSection } from './AssetSectionCard';
 import type { UploadQueueItem } from './UploadProgressList';
-import { logger } from '../../lib/logger';
-import {
-  probeMediaDuration,
-  isVideoMimeType,
-  isAudioMimeType,
-} from '../../lib/mediaDuration';
 
 interface UseAssetUploaderOptions {
   selectedProjectId: string;

frontend/src/components/BackdropPortal.tsx

@@ -11,11 +11,11 @@
 
 import React, {
   createContext,
+  useCallback,
   useContext,
+  useMemo,
   useRef,
   useState,
-  useCallback,
-  useMemo,
 } from 'react';
 
 interface BackdropItem {

frontend/src/components/BaseButton.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
 import Link from 'next/link';
+import React from 'react';
 import { getButtonColor } from '../colors';
-import BaseIcon from './BaseIcon';
-import type { ColorButtonKey } from '../types/ui';
 import { useAppSelector } from '../stores/hooks';
+import type { ColorButtonKey } from '../types/ui';
+import BaseIcon from './BaseIcon';
 
 type Props = {
   label?: string;

frontend/src/components/BaseButtons.tsx

@@ -1,5 +1,5 @@
-import { Children, cloneElement, ReactElement } from 'react';
 import type { ReactNode } from 'react';
+import { Children, cloneElement, isValidElement } from 'react';
 
 type Props = {
   type?: string;
@@ -24,13 +24,15 @@ const BaseButtons = ({
         noWrap ? 'flex-nowrap' : 'flex-wrap'
       }`}
     >
-      {Children.map(children, (child: ReactElement) =>
-        child
-          ? cloneElement(child as ReactElement<{ className?: string }>, {
-              className: `${classAddon} ${(child.props as { className?: string }).className || ''}`,
-            })
-          : null,
-      )}
+      {Children.map(children, (child) => {
+        if (!isValidElement<{ className?: string }>(child)) {
+          return child;
+        }
+
+        return cloneElement(child, {
+          className: `${classAddon} ${child.props.className || ''}`,
+        });
+      })}
     </div>
   );
 };

frontend/src/components/BaseDivider.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useAppSelector } from '../stores/hooks';
 type Props = {
   navBar?: boolean;

frontend/src/components/BaseIcon.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 
 type Props = {
   path: string;

frontend/src/components/CanvasLoadingSpinner.tsx

@@ -6,7 +6,7 @@
  * Includes delay to avoid flashing for quick operations.
  */
 
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { PRELOAD_CONFIG } from '../config/preload.config';
 
 interface CanvasLoadingSpinnerProps {

frontend/src/components/CardBox.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react';
+import { useAppSelector } from '../stores/hooks';
 import CardBoxComponentBody from './CardBoxComponentBody';
 import CardBoxComponentFooter from './CardBoxComponentFooter';
-import { useAppSelector } from '../stores/hooks';
 
 type Props = {
   rounded?: string;
@@ -20,7 +20,6 @@ type Props = {
 };
 
 export default function CardBox({
-  rounded = 'rounded',
   flex = 'flex-col',
   className = '',
   hasComponentLayout = false,
@@ -28,7 +27,6 @@ export default function CardBox({
   hasTable = false,
   isHoverable = false,
   isList = false,
-  isModal = false,
   children,
   footer,
   id = '',

frontend/src/components/CardBoxComponentBody.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 
 type Props = {
   noPadding?: boolean;

frontend/src/components/CardBoxComponentEmpty.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 const CardBoxComponentEmpty = () => {
   return (
     <div className='text-center py-24 text-gray-500 dark:text-slate-400'>

frontend/src/components/CardBoxComponentFooter.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 
 type Props = {
   className?: string;

frontend/src/components/CardBoxComponentTitle.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 
 type Props = {
   title: string;

frontend/src/components/CardBoxModal.tsx

@@ -1,5 +1,5 @@
 import { mdiClose } from '@mdi/js';
-import { ReactNode } from 'react';
+import type { MouseEvent, ReactNode } from 'react';
 import type { ColorButtonKey } from '../types/ui';
 import BaseButton from './BaseButton';
 import BaseButtons from './BaseButtons';
@@ -32,12 +32,20 @@ const CardBoxModal = ({
     return null;
   }
 
+  const handleConfirm = (_event: MouseEvent) => {
+    onConfirm();
+  };
+
+  const handleCancel = (_event: MouseEvent) => {
+    onCancel?.();
+  };
+
   const footer = (
     <BaseButtons>
       <BaseButton
         label={buttonLabel}
         color={buttonColor}
-        onClick={onConfirm}
+        onClick={handleConfirm}
         disabled={isConfirmDisabled}
       />
       {!!onCancel && (
@@ -45,7 +53,7 @@ const CardBoxModal = ({
           label='Cancel'
           color={buttonColor}
           outline
-          onClick={onCancel}
+          onClick={handleCancel}
         />
       )}
     </BaseButtons>
@@ -53,7 +61,7 @@ const CardBoxModal = ({
 
   return (
     <OverlayLayer
-      onClick={onCancel}
+      onClick={handleCancel}
       className={onCancel ? 'cursor-pointer' : ''}
     >
       <CardBox
@@ -66,7 +74,7 @@ const CardBoxModal = ({
             <BaseButton
               icon={mdiClose}
               color='whiteDark'
-              onClick={onCancel}
+              onClick={handleCancel}
               small
               roundedFull
             />

frontend/src/components/ClickOutside.tsx

@@ -1,15 +1,15 @@
-import React, {
+import {
+  MutableRefObject,
+  ReactNode,
   useCallback,
   useEffect,
   useRef,
-  ReactNode,
-  MutableRefObject,
 } from 'react';
 
 interface ClickOutsideProps {
   children?: ReactNode;
   onClickOutside: () => void;
-  excludedElements: MutableRefObject<any>[];
+  excludedElements: MutableRefObject<HTMLElement | null>[];
 }
 
 const ClickOutside = ({
@@ -17,19 +17,21 @@ const ClickOutside = ({
   onClickOutside,
   excludedElements,
 }: ClickOutsideProps) => {
-  const wrapperRef = useRef(null);
-
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
   const handleClickOutside = useCallback(
-    (event) => {
+    (event: MouseEvent) => {
+      const target = event.target;
+      if (!(target instanceof Node)) return;
+
       if (
         wrapperRef.current &&
-        !wrapperRef.current.contains(event.target) &&
-        !excludedElements.some((el) => el.current.contains(event.target))
+        !wrapperRef.current.contains(target) &&
+        !excludedElements.some((el) => el.current?.contains(target))
       ) {
         onClickOutside();
       }
     },
-    [wrapperRef, onClickOutside, ...excludedElements],
+    [excludedElements, onClickOutside],
   );
 
   useEffect(() => {

frontend/src/components/Constructor/AssetSelectCompact.tsx

@@ -6,8 +6,8 @@
  */
 
 import React from 'react';
-import type { AssetOption } from './types';
 import { addFallbackAssetOption } from '../../lib/constructorHelpers';
+import type { AssetOption } from './types';
 
 interface AssetSelectCompactProps {
   label: string;

frontend/src/components/Constructor/BackgroundSettingsEditor.tsx

@@ -7,12 +7,12 @@
  */
 
 import React from 'react';
+import { addFallbackAssetOption } from '../../lib/constructorHelpers';
 import type {
   AssetOption,
-  VideoPlaybackSettings,
   AudioPlaybackSettings,
+  VideoPlaybackSettings,
 } from './types';
-import { addFallbackAssetOption } from '../../lib/constructorHelpers';
 
 interface BackgroundSettingsEditorProps {
   type: 'image' | 'video' | 'embed' | 'audio';

frontend/src/components/Constructor/CanvasBackground.tsx

@@ -6,21 +6,20 @@
  * Supports custom video playback settings (autoplay, loop, muted, start/end time).
  */
 
-import React, { useEffect, useState, useMemo, useCallback } from 'react';
-import { useBackgroundVideoPlayback } from '../../hooks/useBackgroundVideoPlayback';
-import { useBackgroundAudioPlayback } from '../../hooks/useBackgroundAudioPlayback';
-import PreviousBackgroundOverlay from '../PreviousBackgroundOverlay';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { baseURLApi } from '../../config';
+import { useBackgroundAudioPlayback } from '../../hooks/useBackgroundAudioPlayback';
+import { useBackgroundVideoPlayback } from '../../hooks/useBackgroundVideoPlayback';
 import { buildChromeFreeEmbedUrl } from '../../lib/embedUrl';
-import CanvasBackgroundAudioLayer from './CanvasBackgroundAudioLayer';
-import CanvasBackgroundEmbedLayer from './CanvasBackgroundEmbedLayer';
+import PreviousBackgroundOverlay from '../PreviousBackgroundOverlay';
 import {
   getActiveCanvasVideoUrl,
   getCanvasVideoSrc,
-  isBlobUrl,
   scheduleAfterPaint,
   shouldUseNativeVideoLoop,
 } from './CanvasBackground.helpers';
+import CanvasBackgroundAudioLayer from './CanvasBackgroundAudioLayer';
+import CanvasBackgroundEmbedLayer from './CanvasBackgroundEmbedLayer';
 import CanvasBackgroundImageLayer from './CanvasBackgroundImageLayer';
 import CanvasBackgroundVideoLayer from './CanvasBackgroundVideoLayer';
 import { useCanvasBackgroundImageReady } from './useCanvasBackgroundImageReady';

frontend/src/components/Constructor/CanvasBackgroundImageLayer.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import NextImage from 'next/image';
+import React from 'react';
 import { isBlobUrl } from './CanvasBackground.helpers';
 
 interface CanvasBackgroundImageLayerProps {

frontend/src/components/Constructor/CanvasElement.tsx

@@ -8,20 +8,20 @@
  */
 
 import React, { useCallback } from 'react';
-import UiElementRenderer from '../UiElements/UiElementRenderer';
-import { useElementEffects } from '../../hooks/useElementEffects';
 import { useAudioEffects } from '../../hooks/useAudioEffects';
+import { useElementEffects } from '../../hooks/useElementEffects';
+import type { PreloadCacheProvider } from '../../hooks/video';
 import {
-  buildTransitionStyle,
   buildAppearAnimationStyle,
+  buildTransitionStyle,
   hasAnyEffects,
   type ElementEffectProperties,
 } from '../../lib/elementEffects';
+import { normalizeZIndexValue } from '../../lib/elementStyles';
+import { isInfoPanelElementType } from '../../lib/elementTypeGuards';
 import type { CanvasElement as CanvasElementType } from '../../types/constructor';
 import type { ResolvedTransitionSettings } from '../../types/transition';
-import type { PreloadCacheProvider } from '../../hooks/video';
-import { isInfoPanelElementType } from '../../lib/elementTypeGuards';
-import { normalizeZIndexValue } from '../../lib/elementStyles';
+import UiElementRenderer from '../UiElements/UiElementRenderer';
 
 interface CanvasElementProps {
   element: CanvasElementType;
@@ -180,6 +180,7 @@ const CanvasElement: React.FC<CanvasElementProps> = ({
 
   // Check if we need the inner wrapper for effects
   const needsEffectWrapper = !isEditMode && hasAnyEffects(effectProperties);
+  const { onMouseDown: eventMouseDown, ...outerEventHandlers } = eventHandlers;
 
   return (
     <div
@@ -188,11 +189,17 @@ const CanvasElement: React.FC<CanvasElementProps> = ({
       data-constructor-element-id={element.id}
       className='absolute cursor-pointer'
       style={positionStyle}
-      onMouseDown={isEditMode ? onMouseDown : undefined}
+      onMouseDown={
+        isEditMode
+          ? onMouseDown
+          : !needsEffectWrapper
+            ? eventMouseDown
+            : undefined
+      }
       onClick={handleClick}
       onKeyDown={handleKeyDown}
       aria-disabled={isDisabled}
-      {...(!isEditMode && !needsEffectWrapper ? eventHandlers : {})}
+      {...(!isEditMode && !needsEffectWrapper ? outerEventHandlers : {})}
     >
       {needsEffectWrapper ? (
         // Inner wrapper handles hover/focus/active effects independently from animation

frontend/src/components/Constructor/ConstructorCanvasElementsLayer.tsx

@@ -1,15 +1,15 @@
 import { mdiPlus } from '@mdi/js';
 import type { CSSProperties, MouseEvent } from 'react';
-import BaseButton from '../BaseButton';
-import CanvasElementComponent from './CanvasElement';
+import type { PreloadCacheProvider } from '../../hooks/video';
+import { isElementFlagEnabled } from '../../lib/elementFlags';
+import {
+  isInfoPanelElementType,
+  isNavigationElementType,
+} from '../../lib/elementTypeGuards';
 import type { CanvasElement } from '../../types/constructor';
 import type { ResolvedTransitionSettings } from '../../types/transition';
-import type { PreloadCacheProvider } from '../../hooks/video';
-import {
-  isNavigationElementType,
-  isInfoPanelElementType,
-} from '../../lib/elementTypeGuards';
-import { isElementFlagEnabled } from '../../lib/elementFlags';
+import BaseButton from '../BaseButton';
+import CanvasElementComponent from './CanvasElement';
 import { shouldRenderConstructorCanvasElement } from './constructorPage.helpers';
 
 type ConstructorCanvasElementsLayerProps = {
@@ -22,7 +22,7 @@ type ConstructorCanvasElementsLayerProps = {
   letterboxStyles?: CSSProperties;
   pageTransitionSettings: ResolvedTransitionSettings;
   preloadCache: PreloadCacheProvider;
-  resolveUrl: (url: string) => string;
+  resolveUrl: (url: string | undefined) => string;
   isElementVisible: (element: CanvasElement) => boolean;
   isInfoPanelOpen: (elementId: string) => boolean;
   onCreateFirstPage: () => void;
@@ -31,7 +31,7 @@ type ConstructorCanvasElementsLayerProps = {
   onGalleryCardClick: (element: CanvasElement, cardIndex: number) => void;
   onCarouselButtonPositionChange: (
     elementId: string,
-    button: 'prev' | 'next' | 'back',
+    button: 'prev' | 'next',
     x: number,
     y: number,
   ) => void;

frontend/src/components/Constructor/ConstructorCanvasStage.helpers.test.ts

@@ -1,11 +1,11 @@
 import assert from 'node:assert/strict';
 import test from 'node:test';
 
+import type { TransitionPreviewState } from '../../types/presentation';
 import {
   shouldShowConstructorCanvasElements,
   shouldShowConstructorCanvasSpinner,
 } from './ConstructorCanvasStage.helpers';
-import type { TransitionPreviewState } from '../../types/presentation';
 
 const transitionPreview = {
   videoUrl: 'assets/transition.mp4',

frontend/src/components/Constructor/ConstructorCanvasStage.tsx

@@ -1,14 +1,7 @@
 import type { CSSProperties, MouseEvent, PointerEvent, RefObject } from 'react';
 
-import { BackdropPortalProvider } from '../BackdropPortal';
-import CanvasLoadingSpinner from '../CanvasLoadingSpinner';
-import RuntimeControls from '../Runtime/RuntimeControls';
-import CanvasBackground from './CanvasBackground';
-import ConstructorCanvasElementsLayer from './ConstructorCanvasElementsLayer';
-import ElementEditorPanel from './ElementEditorPanel';
-import TransitionBlackOverlay from '../TransitionBlackOverlay';
-import { isSafari } from '../../lib/browserUtils';
 import type { PreloadCacheProvider } from '../../hooks/video';
+import { isSafari } from '../../lib/browserUtils';
 import type { CanvasElement } from '../../types/constructor';
 import type { TourPage } from '../../types/entities';
 import type { TransitionPreviewState } from '../../types/presentation';
@@ -17,10 +10,17 @@ import type {
   ResolvedUiControlsSettings,
   SystemUiControlType,
 } from '../../types/uiControls';
+import { BackdropPortalProvider } from '../BackdropPortal';
+import CanvasLoadingSpinner from '../CanvasLoadingSpinner';
+import RuntimeControls from '../Runtime/RuntimeControls';
+import TransitionBlackOverlay from '../TransitionBlackOverlay';
+import CanvasBackground from './CanvasBackground';
+import ConstructorCanvasElementsLayer from './ConstructorCanvasElementsLayer';
 import {
   shouldShowConstructorCanvasElements,
   shouldShowConstructorCanvasSpinner,
 } from './ConstructorCanvasStage.helpers';
+import ElementEditorPanel from './ElementEditorPanel';
 
 type Position = {
   x: number;
@@ -71,11 +71,11 @@ type ConstructorCanvasStageProps = {
     videoAutoplay: boolean;
     videoLoop: boolean;
     videoMuted: boolean;
-    videoStartTime?: number;
-    videoEndTime?: number;
+    videoStartTime?: number | null;
+    videoEndTime?: number | null;
     audioLoop: boolean;
-    audioStartTime?: number;
-    audioEndTime?: number;
+    audioStartTime?: number | null;
+    audioEndTime?: number | null;
   };
   soundControl: {
     isMuted: boolean;
@@ -110,7 +110,7 @@ type ConstructorCanvasStageProps = {
   onGalleryCardClick: (element: CanvasElement, cardIndex: number) => void;
   onCarouselButtonPositionChange: (
     elementId: string,
-    button: 'prev' | 'next' | 'back',
+    button: 'prev' | 'next',
     x: number,
     y: number,
   ) => void;

frontend/src/components/Constructor/ConstructorPageModals.tsx

@@ -1,6 +1,6 @@
 import CardBoxModal from '../CardBoxModal';
-import CreatePageModal from './CreatePageModal';
 import { getConstructorDeletePageName } from './ConstructorPageModals.helpers';
+import CreatePageModal from './CreatePageModal';
 
 type ConstructorPageModalsProps = {
   isCreatePageModalActive: boolean;

frontend/src/components/Constructor/ConstructorRuntimeOverlays.helpers.test.ts

@@ -1,11 +1,11 @@
 import assert from 'node:assert/strict';
 import test from 'node:test';
 
+import type { InfoPanelImage } from '../../types/infoPanel';
 import {
   getConstructorInfoPanelDetailImage,
   shouldRenderConstructorImageDetailPanel,
 } from './ConstructorRuntimeOverlays.helpers';
-import type { InfoPanelImage } from '../../types/infoPanel';
 
 const image = { id: 'image-1', url: 'assets/image.jpg' } as InfoPanelImage;
 

frontend/src/components/Constructor/ConstructorRuntimeOverlays.helpers.ts

@@ -4,7 +4,7 @@ export const getConstructorInfoPanelDetailImage = ({
   activeDetailImages,
   panelId,
 }: {
-  activeDetailImages: Record<string, InfoPanelImage | undefined>;
+  activeDetailImages: Record<string, InfoPanelImage | null | undefined>;
   panelId: string;
 }) => activeDetailImages[panelId];
 
@@ -12,6 +12,6 @@ export const shouldRenderConstructorImageDetailPanel = ({
   image,
   isEditMode,
 }: {
-  image?: InfoPanelImage;
+  image?: InfoPanelImage | null;
   isEditMode: boolean;
 }) => Boolean(image) || isEditMode;

frontend/src/components/Constructor/ConstructorRuntimeOverlays.tsx

@@ -1,14 +1,14 @@
 import { Fragment, type CSSProperties } from 'react';
 
-import GalleryCarouselOverlay from '../UiElements/GalleryCarouselOverlay';
-import ImageDetailPanel from '../UiElements/ImageDetailPanel';
-import InfoPanelOverlay from '../UiElements/InfoPanelOverlay';
 import type {
   CanvasElement,
   GalleryCarouselMediaItem,
 } from '../../types/constructor';
 import type { InfoPanelImage } from '../../types/infoPanel';
 import type { ResolvedTransitionSettings } from '../../types/transition';
+import GalleryCarouselOverlay from '../UiElements/GalleryCarouselOverlay';
+import ImageDetailPanel from '../UiElements/ImageDetailPanel';
+import InfoPanelOverlay from '../UiElements/InfoPanelOverlay';
 import {
   getConstructorInfoPanelDetailImage,
   shouldRenderConstructorImageDetailPanel,
@@ -32,7 +32,7 @@ type ConstructorRuntimeOverlaysProps = {
   activeInfoPanelGalleryElement: CanvasElement | null;
   shouldShowInfoPanelOverlays: boolean;
   infoPanelElementsToRender: CanvasElement[];
-  activeDetailImages: Record<string, InfoPanelImage | undefined>;
+  activeDetailImages: Record<string, InfoPanelImage | null | undefined>;
   isEditMode: boolean;
   letterboxStyles: CSSProperties;
   cssVars: CSSProperties;
@@ -42,7 +42,7 @@ type ConstructorRuntimeOverlaysProps = {
   onCloseInfoPanelGallery: () => void;
   onCloseAllInfoPanels: () => void;
   onCloseInfoPanel: (panelId: string) => void;
-  onSetDetailImage: (panelId: string, image: InfoPanelImage) => void;
+  onSetDetailImage: (panelId: string, image: InfoPanelImage | null) => void;
   onCloseDetailImage: (panelId: string) => void;
   onOpenInfoPanelGallery: (
     panelId: string,
@@ -220,7 +220,7 @@ const ConstructorRuntimeOverlays = ({
             }) && (
               <ImageDetailPanel
                 element={infoPanelElementToRender}
-                image={panelDetailImage}
+                image={panelDetailImage ?? null}
                 onClose={() => onCloseDetailImage(infoPanelElementToRender.id)}
                 resolveUrl={resolveUrl}
                 letterboxStyles={letterboxStyles}

frontend/src/components/Constructor/ConstructorToolbar.helpers.test.ts

@@ -1,12 +1,12 @@
 import assert from 'node:assert/strict';
 import test from 'node:test';
-import type { TourPage } from './types';
 import {
   getCollapsedToolbarPageName,
-  getConstructorToolbarMaxWidth,
   getConstructorToolbarActionState,
+  getConstructorToolbarMaxWidth,
   sortToolbarPages,
 } from './ConstructorToolbar.helpers';
+import type { TourPage } from './types';
 
 const makePage = (id: string, name: string, sortOrder?: number): TourPage =>
   ({

frontend/src/components/Constructor/ConstructorToolbar.tsx

@@ -5,19 +5,19 @@
  * Glassmorphism styling with draggable positioning.
  */
 
-import { useState, useRef, useEffect, forwardRef } from 'react';
 import { mdiDotsVertical } from '@mdi/js';
+import { forwardRef, useEffect, useRef, useState } from 'react';
 import BaseIcon from '../BaseIcon';
-import InteractionModeToggle from './InteractionModeToggle';
-import ConstructorToolbarCollapsed from './ConstructorToolbarCollapsed';
-import ConstructorToolbarElementActions from './ConstructorToolbarElementActions';
-import ConstructorToolbarPageActions from './ConstructorToolbarPageActions';
-import ConstructorToolbarSaveControls from './ConstructorToolbarSaveControls';
 import {
   getConstructorToolbarActionState,
   getConstructorToolbarMaxWidth,
   type ToolbarDropdown,
 } from './ConstructorToolbar.helpers';
+import ConstructorToolbarCollapsed from './ConstructorToolbarCollapsed';
+import ConstructorToolbarElementActions from './ConstructorToolbarElementActions';
+import ConstructorToolbarPageActions from './ConstructorToolbarPageActions';
+import ConstructorToolbarSaveControls from './ConstructorToolbarSaveControls';
+import InteractionModeToggle from './InteractionModeToggle';
 import type { ConstructorToolbarProps } from './types';
 
 const ConstructorToolbar = forwardRef<HTMLDivElement, ConstructorToolbarProps>(

frontend/src/components/Constructor/ConstructorToolbarCollapsed.tsx

@@ -1,8 +1,8 @@
+import { mdiChevronRight, mdiDotsVertical } from '@mdi/js';
 import type { ForwardedRef, MouseEvent } from 'react';
 import BaseIcon from '../BaseIcon';
-import { mdiChevronRight, mdiDotsVertical } from '@mdi/js';
-import type { Position, TourPage } from './types';
 import { getCollapsedToolbarPageName } from './ConstructorToolbar.helpers';
+import type { Position, TourPage } from './types';
 
 interface Props {
   position: Position;

frontend/src/components/Constructor/ConstructorToolbarElementActions.tsx

@@ -1,4 +1,3 @@
-import type { RefObject } from 'react';
 import {
   mdiChevronDown,
   mdiContentDuplicate,
@@ -12,10 +11,11 @@ import {
   mdiVideo,
   mdiViewCarousel,
 } from '@mdi/js';
+import type { RefObject } from 'react';
+import type { CanvasElementType } from '../../types/constructor';
 import BaseIcon from '../BaseIcon';
 import ClickOutside from '../ClickOutside';
 import MenuActionButton from './MenuActionButton';
-import type { CanvasElementType } from '../../types/constructor';
 import type { NavigationElementType } from './types';
 
 interface Props {

frontend/src/components/Constructor/ConstructorToolbarLayer.helpers.test.ts

@@ -1,12 +1,12 @@
 import assert from 'node:assert/strict';
 import test from 'node:test';
 
+import type { TourPage } from '../../types/entities';
 import {
   findConstructorToolbarPage,
   getConstructorExitHref,
   shouldShowConstructorToolbar,
 } from './ConstructorToolbarLayer.helpers';
-import type { TourPage } from '../../types/entities';
 
 test('shouldShowConstructorToolbar requires pages and normal constructor mode', () => {
   assert.equal(

frontend/src/components/Constructor/ConstructorToolbarLayer.tsx

@@ -1,17 +1,17 @@
 import type { RefObject } from 'react';
 
+import type { NavigationElementType } from '../../context/ConstructorContext';
+import type {
+  CanvasElementType,
+  EditorMenuItem,
+} from '../../types/constructor';
+import type { TourPage } from '../../types/entities';
 import ConstructorToolbar from './ConstructorToolbar';
 import {
   findConstructorToolbarPage,
   getConstructorExitHref,
   shouldShowConstructorToolbar,
 } from './ConstructorToolbarLayer.helpers';
-import type {
-  CanvasElementType,
-  EditorMenuItem,
-} from '../../types/constructor';
-import type { NavigationElementType } from '../../context/ConstructorContext';
-import type { TourPage } from '../../types/entities';
 import type { ConstructorInteractionMode, Position } from './types';
 
 type ConstructorToolbarLayerProps = {
@@ -19,7 +19,7 @@ type ConstructorToolbarLayerProps = {
   position: Position;
   isElementEditMode: boolean;
   pages: TourPage[];
-  activePageId: string;
+  activePageId: string | null;
   projectId: string;
   isReorderingPages: boolean;
   isSaving: boolean;
@@ -100,7 +100,7 @@ const ConstructorToolbarLayer = ({
       position={position}
       onDragStart={onDragStart}
       pages={pages}
-      activePageId={activePageId}
+      activePageId={activePageId || ''}
       onPageChange={(pageId) => {
         const page = findConstructorToolbarPage(pages, pageId);
         if (page) onSwitchToPage(page);

frontend/src/components/Constructor/ConstructorToolbarPageActions.tsx

@@ -1,4 +1,3 @@
-import type { RefObject } from 'react';
 import {
   mdiChevronDown,
   mdiChevronUp,
@@ -10,11 +9,12 @@ import {
   mdiPlus,
   mdiVideo,
 } from '@mdi/js';
+import type { RefObject } from 'react';
+import type { EditorMenuItem } from '../../types/constructor';
 import BaseIcon from '../BaseIcon';
 import ClickOutside from '../ClickOutside';
 import MenuActionButton from './MenuActionButton';
 import PageSelector from './PageSelector';
-import type { EditorMenuItem } from '../../types/constructor';
 import type { ConstructorToolbarProps } from './types';
 
 interface Props {

frontend/src/components/Constructor/ConstructorToolbarSaveControls.tsx

@@ -1,7 +1,7 @@
 import { mdiChevronLeft, mdiExitToApp } from '@mdi/js';
+import dataFormatter from '../../helpers/dataFormatter';
 import BaseButton from '../BaseButton';
 import BaseIcon from '../BaseIcon';
-import dataFormatter from '../../helpers/dataFormatter';
 
 interface Props {
   isSaving: boolean;

frontend/src/components/Constructor/CreatePageModal.tsx

@@ -5,9 +5,9 @@
  * Slug is auto-generated from the page name behind the scenes.
  */
 
-import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { buildUniqueSlug, sanitizeSlug } from '../../lib/slugHelpers';
 import CardBoxModal from '../CardBoxModal';
-import { sanitizeSlug, buildUniqueSlug } from '../../lib/slugHelpers';
 
 interface CreatePageModalProps {
   /** Whether the modal is visible */

frontend/src/components/Constructor/ElementEditorCommonCssSection.tsx

@@ -1,8 +1,8 @@
+import type { CanvasElement } from '../../types/constructor';
 import {
   StyleSettingsSectionCompact,
   extractNumericValue,
 } from '../ElementSettings';
-import type { CanvasElement } from '../../types/constructor';
 import { buildElementCssPatch } from './elementEditorPanel.helpers';
 
 interface ElementEditorCommonCssSectionProps {

frontend/src/components/Constructor/ElementEditorEffectsTab.tsx

@@ -1,5 +1,5 @@
-import { EffectsSettingsSectionCompact } from '../ElementSettings';
 import type { AssetOption, CanvasElement } from '../../types/constructor';
+import { EffectsSettingsSectionCompact } from '../ElementSettings';
 
 interface ElementEditorEffectsTabProps {
   selectedElement: CanvasElement;

frontend/src/components/Constructor/ElementEditorGalleryCssSection.tsx

@@ -1,5 +1,5 @@
-import { GallerySectionStyleInputs } from '../ElementSettings';
 import type { CanvasElement } from '../../types/constructor';
+import { GallerySectionStyleInputs } from '../ElementSettings';
 
 interface ElementEditorGalleryCssSectionProps {
   selectedElement: CanvasElement;

frontend/src/components/Constructor/ElementEditorGeneralTab.tsx

@@ -1,28 +1,3 @@
-import {
-  CommonSettingsSectionCompact,
-  DescriptionSettingsSectionCompact,
-  MediaSettingsSectionCompact,
-  GallerySettingsSectionCompact,
-  CarouselSettingsSectionCompact,
-  GalleryCarouselSettingsSectionCompact,
-  InfoPanelSettingsSectionCompact,
-} from '../ElementSettings';
-import NavigationSettingsSectionCompact from '../ElementSettings/NavigationSettingsSectionCompact';
-import {
-  normalizeAppearDelaySec,
-  normalizeAppearDurationSec,
-} from '../../lib/elementDefaults';
-import {
-  isNavigationElementType,
-  isDescriptionElementType,
-  isGalleryElementType,
-  isCarouselElementType,
-  isMediaElementType,
-  isVideoPlayerElementType,
-  isInfoPanelElementType,
-} from '../../lib/elementTypeGuards';
-import type { AssetOption, CanvasElement } from '../../types/constructor';
-import type { TourPage } from '../../types/entities';
 import type {
   CarouselSlideOperations,
   GalleryCardOperations,
@@ -30,6 +5,31 @@ import type {
   InfoPanelSectionOperations,
   NavigationElementType,
 } from '../../context/ConstructorContext';
+import {
+  normalizeAppearDelaySec,
+  normalizeAppearDurationSec,
+} from '../../lib/elementDefaults';
+import {
+  isCarouselElementType,
+  isDescriptionElementType,
+  isGalleryElementType,
+  isInfoPanelElementType,
+  isMediaElementType,
+  isNavigationElementType,
+  isVideoPlayerElementType,
+} from '../../lib/elementTypeGuards';
+import type { AssetOption, CanvasElement } from '../../types/constructor';
+import type { TourPage } from '../../types/entities';
+import {
+  CarouselSettingsSectionCompact,
+  CommonSettingsSectionCompact,
+  DescriptionSettingsSectionCompact,
+  GalleryCarouselSettingsSectionCompact,
+  GallerySettingsSectionCompact,
+  InfoPanelSettingsSectionCompact,
+  MediaSettingsSectionCompact,
+} from '../ElementSettings';
+import NavigationSettingsSectionCompact from '../ElementSettings/NavigationSettingsSectionCompact';
 
 interface ElementEditorGeneralTabProps {
   selectedElement: CanvasElement;

frontend/src/components/Constructor/ElementEditorPanel.tsx

@@ -9,33 +9,31 @@
 
 import React from 'react';
 import {
-  useConstructorContext,
-  useConstructorElements,
-  useConstructorBackground,
   useConstructorAssets,
+  useConstructorBackground,
   useConstructorCollectionOps,
   useConstructorDuration,
-  useConstructorNavigation,
   useConstructorEditorTab,
+  useConstructorElements,
   useConstructorMenu,
+  useConstructorNavigation,
 } from '../../context/ConstructorContext';
+import {
+  isGalleryElementType,
+  isInfoPanelElementType,
+} from '../../lib/elementTypeGuards';
+import type { SystemUiControlSettings } from '../../types/uiControls';
 import {
   ElementSettingsTabsCompact,
   GallerySectionStyleInputs,
   InfoPanelStyleInputs,
 } from '../ElementSettings';
-import ElementEditorHeader from './ElementEditorHeader';
-import {
-  isGalleryElementType,
-  isCarouselElementType,
-  isInfoPanelElementType,
-} from '../../lib/elementTypeGuards';
-import type { SystemUiControlSettings } from '../../types/uiControls';
 import { ElementEditorBackgroundSettings } from './ElementEditorBackgroundSettings';
 import { ElementEditorCommonCssSection } from './ElementEditorCommonCssSection';
 import { ElementEditorEffectsTab } from './ElementEditorEffectsTab';
 import { ElementEditorGalleryCssSection } from './ElementEditorGalleryCssSection';
 import { ElementEditorGeneralTab } from './ElementEditorGeneralTab';
+import ElementEditorHeader from './ElementEditorHeader';
 import { InfoPanelMediaStyleSection } from './InfoPanelMediaStyleSection';
 import { InfoPanelTextStyleSection } from './InfoPanelTextStyleSection';
 import { SystemControlSettingsEditor } from './SystemControlSettingsEditor';
@@ -74,7 +72,6 @@ export function ElementEditorPanel({
   // Get state from context
   const {
     selectedElement,
-    selectedElementId,
     updateSelectedElement,
     removeSelectedElement,
     selectedSystemControl,

frontend/src/components/Constructor/InfoPanelMediaStyleSection.tsx

@@ -1,5 +1,5 @@
-import type { CanvasElement } from '../../types/constructor';
 import { FONT_OPTIONS } from '../../lib/fonts';
+import type { CanvasElement } from '../../types/constructor';
 
 interface InfoPanelMediaStyleSectionProps {
   selectedElement: CanvasElement;

frontend/src/components/Constructor/InfoPanelTextStyleSection.tsx

@@ -1,5 +1,5 @@
-import type { CanvasElement } from '../../types/constructor';
 import { FONT_OPTIONS } from '../../lib/fonts';
+import type { CanvasElement } from '../../types/constructor';
 
 type TextAlignValue = 'left' | 'center' | 'right';
 

frontend/src/components/Constructor/SystemControlSettingsEditor.tsx

@@ -1,13 +1,15 @@
-import {
-  getSystemControlAnchorBounds,
-  type SystemUiControlSettings,
-} from '../../types/uiControls';
-import type { AssetOption } from '../../types/constructor';
 import { addFallbackAssetOption } from '../../lib/constructorHelpers';
 import {
   opacityToPercentInput,
   percentInputToOpacityNumber,
 } from '../../lib/opacityPercent';
+import type { AssetOption } from '../../types/constructor';
+import {
+  DEFAULT_UI_CONTROL_SETTINGS,
+  getSystemControlAnchorBounds,
+  type SystemUiControlAnchor,
+  type SystemUiControlSettings,
+} from '../../types/uiControls';
 
 interface SystemControlSettingsEditorProps {
   settings: SystemUiControlSettings;
@@ -61,9 +63,13 @@ export function SystemControlSettingsEditor({
   canvasAspectRatio,
   onChange,
 }: SystemControlSettingsEditorProps) {
+  const effectiveSettings = {
+    ...DEFAULT_UI_CONTROL_SETTINGS.fullscreen,
+    ...settings,
+  };
   const bounds = getSystemControlAnchorBounds(
-    settings.anchor,
-    settings.buttonSizePercent,
+    effectiveSettings.anchor,
+    effectiveSettings.buttonSizePercent,
     canvasAspectRatio,
   );
 
@@ -79,7 +85,7 @@ export function SystemControlSettingsEditor({
             min={bounds.minX}
             max={bounds.maxX}
             className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
-            value={settings.xPercent}
+            value={effectiveSettings.xPercent}
             onChange={(event) =>
               onChange({
                 xPercent: clamp(
@@ -100,7 +106,7 @@ export function SystemControlSettingsEditor({
             min={bounds.minY}
             max={bounds.maxY}
             className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
-            value={settings.yPercent}
+            value={effectiveSettings.yPercent}
             onChange={(event) =>
               onChange({
                 yPercent: clamp(
@@ -118,25 +124,24 @@ export function SystemControlSettingsEditor({
           </label>
           <select
             className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
-            value={settings.anchor}
+            value={effectiveSettings.anchor}
             onChange={(event) => {
-              const anchor = event.target
-                .value as SystemUiControlSettings['anchor'];
+              const anchor = event.target.value as SystemUiControlAnchor;
               const nextBounds = getSystemControlAnchorBounds(
                 anchor,
-                settings.buttonSizePercent,
+                effectiveSettings.buttonSizePercent,
                 canvasAspectRatio,
               );
 
               onChange({
                 anchor,
                 xPercent: clamp(
-                  settings.xPercent,
+                  effectiveSettings.xPercent,
                   nextBounds.minX,
                   nextBounds.maxX,
                 ),
                 yPercent: clamp(
-                  settings.yPercent,
+                  effectiveSettings.yPercent,
                   nextBounds.minY,
                   nextBounds.maxY,
                 ),
@@ -237,13 +242,13 @@ export function SystemControlSettingsEditor({
             <input
               type='number'
               className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
-              value={settings[key]}
+              value={effectiveSettings[key]}
               onChange={(event) => {
                 const value = Number(event.target.value) || 0;
 
                 if (key === 'buttonSizePercent') {
                   const nextBounds = getSystemControlAnchorBounds(
-                    settings.anchor,
+                    effectiveSettings.anchor,
                     value,
                     canvasAspectRatio,
                   );
@@ -251,12 +256,12 @@ export function SystemControlSettingsEditor({
                   onChange({
                     buttonSizePercent: value,
                     xPercent: clamp(
-                      settings.xPercent,
+                      effectiveSettings.xPercent,
                       nextBounds.minX,
                       nextBounds.maxX,
                     ),
                     yPercent: clamp(
-                      settings.yPercent,
+                      effectiveSettings.yPercent,
                       nextBounds.minY,
                       nextBounds.maxY,
                     ),

frontend/src/components/Constructor/TransitionPreviewOverlay.tsx

@@ -14,7 +14,7 @@
  * - Then hides instantly (no CSS transition) since last video frame = new bg
  */
 
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import CanvasLoadingSpinner from '../CanvasLoadingSpinner';
 
 interface TransitionPreviewOverlayProps {

frontend/src/components/Constructor/constructorContextValue.helpers.test.ts

@@ -1,11 +1,11 @@
 import assert from 'node:assert/strict';
 import test from 'node:test';
 
+import type { CanvasElement } from '../../types/constructor';
 import {
   removeConstructorContextElementById,
   updateConstructorContextElementById,
 } from './constructorContextValue.helpers';
-import type { CanvasElement } from '../../types/constructor';
 
 const elements = [
   { id: 'first', type: 'description', label: 'First', xPercent: 10 },

frontend/src/components/Constructor/constructorDerivedState.helpers.ts

@@ -1,7 +1,7 @@
-import type { CanvasElement } from '../../types/constructor';
-import type { TourPage, User } from '../../types/entities';
 import { hasPermission } from '../../helpers/userPermissions';
 import { presentationHasAudio } from '../../lib/presentationAudio';
+import type { CanvasElement } from '../../types/constructor';
+import type { TourPage, User } from '../../types/entities';
 
 export const getConstructorPageElementsListHref = (projectId: string) =>
   projectId

frontend/src/components/Constructor/constructorGalleryCarousel.helpers.test.ts

@@ -1,12 +1,12 @@
 import assert from 'node:assert/strict';
 import test from 'node:test';
 
+import type { CanvasElement } from '../../types/constructor';
 import {
   getCarouselButtonPositionPatch,
   getGalleryCarouselButtonPositionPatch,
   updateElementById,
 } from './constructorGalleryCarousel.helpers';
-import type { CanvasElement } from '../../types/constructor';
 
 test('getGalleryCarouselButtonPositionPatch maps overlay buttons to their coordinate fields', () => {
   assert.deepEqual(getGalleryCarouselButtonPositionPatch('prev', 10, 20), {

frontend/src/components/Constructor/constructorMediaDuration.helpers.test.ts

@@ -1,11 +1,11 @@
 import assert from 'node:assert/strict';
 import test from 'node:test';
 
+import type { CanvasElement } from '../../types/constructor';
 import {
   applyNavigationTransitionDurations,
   getConstructorDurationNotes,
 } from './constructorMediaDuration.helpers';
-import type { CanvasElement } from '../../types/constructor';
 
 test('getConstructorDurationNotes maps media notes into editor shape', () => {
   assert.deepEqual(

frontend/src/components/Constructor/constructorMediaPreload.helpers.ts

@@ -5,7 +5,7 @@ export const resolveConstructorPreloadedUrl = ({
 }: {
   url: string | undefined;
   getReadyBlobUrl: (url: string) => string | null;
-  resolveAssetUrl: (url: string) => string;
+  resolveAssetUrl: (url: string | undefined) => string;
 }) => {
   if (!url) return '';
 

frontend/src/components/Constructor/constructorPage.helpers.test.ts

@@ -1,14 +1,17 @@
 import assert from 'node:assert/strict';
 import test from 'node:test';
 
+import type { CanvasElement } from '../../types/constructor';
+import type { TourPage } from '../../types/entities';
+import type { TransitionPreviewState } from '../../types/presentation';
 import {
   areConstructorElementIconsReady,
-  buildConstructorTransitionPlaybackConfig,
   buildConstructorIconPreloadTargets,
-  getDeleteFallbackPageId,
+  buildConstructorTransitionPlaybackConfig,
   getConstructorBackgroundSources,
   getConstructorEditorTitle,
   getConstructorNavigationErrorMessage,
+  getDeleteFallbackPageId,
   getExistingPageSlugs,
   getFirstQueryParam,
   getLastProjectSaveAt,
@@ -18,9 +21,6 @@ import {
   shouldRenderConstructorCanvasElement,
   sortTourPagesForDisplay,
 } from './constructorPage.helpers';
-import type { TourPage } from '../../types/entities';
-import type { CanvasElement } from '../../types/constructor';
-import type { TransitionPreviewState } from '../../types/presentation';
 
 const page = (
   id: string,

frontend/src/components/Constructor/constructorPage.helpers.ts

@@ -1,12 +1,12 @@
-import type { TourPage } from '../../types/entities';
+import type { TransitionConfig } from '../../hooks/useTransitionPlayback';
 import type {
   CanvasElement,
   CanvasElementType,
   EditorMenuItem,
 } from '../../types/constructor';
+import type { TourPage } from '../../types/entities';
 import type { TransitionPreviewState } from '../../types/presentation';
 import type { SystemUiControlType } from '../../types/uiControls';
-import type { TransitionConfig } from '../../hooks/useTransitionPlayback';
 
 export type ConstructorInteractionMode = 'edit' | 'interact';
 
@@ -125,7 +125,7 @@ export const getDeleteFallbackPageId = ({
 
 export const buildConstructorIconPreloadTargets = (
   elements: CanvasElement[],
-  resolveUrl: (url: string) => string,
+  resolveUrl: (url: string | undefined) => string,
 ) => {
   const urls = elements
     .filter(
@@ -146,7 +146,7 @@ export const isConstructorElementIconReady = ({
 }: {
   element: CanvasElement;
   preloadedIconUrlMap: Record<string, boolean>;
-  resolveUrl: (url: string) => string;
+  resolveUrl: (url: string | undefined) => string;
 }) => {
   const isPreloadableIconElement =
     ICON_PRELOADABLE_TYPES.includes(element.type) && Boolean(element.iconUrl);
@@ -166,7 +166,7 @@ export const areConstructorElementIconsReady = ({
 }: {
   elements: CanvasElement[];
   preloadedIconUrlMap: Record<string, boolean>;
-  resolveUrl: (url: string) => string;
+  resolveUrl: (url: string | undefined) => string;
 }) =>
   elements.every((element) =>
     isConstructorElementIconReady({
@@ -214,7 +214,7 @@ export const getConstructorBackgroundSources = ({
     embedUrl: string;
     audioUrl: string;
   };
-  resolveUrl: (url: string) => string;
+  resolveUrl: (url: string | undefined) => string;
 }) => ({
   imageUrl:
     isEditMode && edit.imageUrl
@@ -243,7 +243,7 @@ export const buildConstructorTransitionPlaybackConfig = ({
   transitionPreview: TransitionPreviewState | null;
   isVideoElementReady: boolean;
   pendingNavigationPageId: string;
-  resolveUrl: (url: string) => string;
+  resolveUrl: (url: string | undefined) => string;
 }): TransitionConfig | null => {
   if (!transitionPreview || !isVideoElementReady) {
     return null;

frontend/src/components/Constructor/constructorPageManagement.actions.ts

@@ -1,6 +1,6 @@
+import { buildUniqueSlug } from '../../lib/slugHelpers';
 import type { EditorMenuItem } from '../../types/constructor';
 import type { TourPage } from '../../types/entities';
-import { buildUniqueSlug } from '../../lib/slugHelpers';
 import {
   getDeleteFallbackPageId,
   getReorderedPageIds,

frontend/src/components/Constructor/constructorPageNavigationLifecycle.helpers.test.ts

@@ -1,13 +1,13 @@
 import assert from 'node:assert/strict';
 import test from 'node:test';
 
+import type { CanvasElement } from '../../types/constructor';
+import type { TourPage } from '../../types/entities';
 import {
   normalizeForcedNavigationElementTypes,
   shouldInitializeConstructorPageBackground,
   toConstructorNavigablePage,
 } from './constructorPageNavigationLifecycle.helpers';
-import type { CanvasElement } from '../../types/constructor';
-import type { TourPage } from '../../types/entities';
 
 test('toConstructorNavigablePage keeps only navigation background fields', () => {
   assert.deepEqual(

frontend/src/components/Constructor/constructorPageNavigationLifecycle.helpers.ts

@@ -1,8 +1,8 @@
+import type { NavigationElementType } from '../../context/ConstructorContext';
+import type { NavigablePage } from '../../hooks/usePageNavigationState';
 import { isNavigationElementType } from '../../lib/elementTypeGuards';
 import type { CanvasElement } from '../../types/constructor';
 import type { TourPage } from '../../types/entities';
-import type { NavigationElementType } from '../../context/ConstructorContext';
-import type { NavigablePage } from '../../hooks/usePageNavigationState';
 
 export const toConstructorNavigablePage = (
   page: TourPage | null,

frontend/src/components/Constructor/constructorSchema.helpers.ts

@@ -1,10 +1,10 @@
+import { getNavigationButtonKind } from '../../lib/elementDefaultConstants';
 import {
   mergeElementWithDefaults,
   normalizeAppearDelaySec,
   normalizeAppearDurationSec,
 } from '../../lib/elementDefaults';
 import { clamp, createLocalId } from '../../lib/elementInstance.helpers';
-import { getNavigationButtonKind } from '../../lib/elementDefaultConstants';
 import {
   isNavigationElementType,
   isVideoPlayerElementType,

frontend/src/components/Constructor/constructorSystemControls.helpers.test.ts

@@ -1,14 +1,14 @@
 import assert from 'node:assert/strict';
 import test from 'node:test';
 
-import {
-  buildUpdatedSystemControlSettings,
-  clampConstructorSystemControlPosition,
-} from './constructorSystemControls.helpers';
 import {
   DEFAULT_UI_CONTROL_SETTINGS,
   type ResolvedUiControlsSettings,
 } from '../../types/uiControls';
+import {
+  buildUpdatedSystemControlSettings,
+  clampConstructorSystemControlPosition,
+} from './constructorSystemControls.helpers';
 
 test('buildUpdatedSystemControlSettings merges a control patch without dropping existing controls', () => {
   const next = buildUpdatedSystemControlSettings({

frontend/src/components/Constructor/constructorTransitionPreviewPlayback.helpers.test.ts

@@ -1,11 +1,11 @@
 import assert from 'node:assert/strict';
 import test from 'node:test';
 
+import type { TransitionPreviewState } from '../../types/presentation';
 import {
   getConstructorTransitionPreviewBuffering,
   shouldCloseConstructorTransitionPreview,
 } from './constructorTransitionPreviewPlayback.helpers';
-import type { TransitionPreviewState } from '../../types/presentation';
 
 const preview = {
   videoUrl: 'assets/transition.mp4',

frontend/src/components/Constructor/types.ts

@@ -5,19 +5,19 @@
  */
 
 import type {
+  AssetOption,
   CanvasElement,
   CanvasElementType,
-  ConstructorAsset,
-  AssetOption,
-  GalleryCard,
   CarouselSlide,
-  NavigationButtonKind,
+  ConstructorAsset,
   EditorMenuItem,
   EditorTab,
+  GalleryCard,
+  NavigationButtonKind,
 } from '../../types/constructor';
 import type {
-  PageBackgroundVideoSettings,
   PageBackgroundAudioSettings,
+  PageBackgroundVideoSettings,
 } from '../../types/pageBackground';
 
 /**
@@ -313,11 +313,11 @@ export interface TransitionPreviewOverlayProps {
 
 // Re-export types from constructor.ts
 export type {
+  AssetOption,
   CanvasElement,
   CanvasElementType,
-  ConstructorAsset,
-  AssetOption,
-  GalleryCard,
   CarouselSlide,
+  ConstructorAsset,
+  GalleryCard,
   NavigationButtonKind,
 };

frontend/src/components/Constructor/useActiveConstructorPageHydration.ts

@@ -5,6 +5,7 @@ import {
   useEffect,
   useRef,
 } from 'react';
+import { ELEMENT_TYPE_LABELS } from '../../lib/elementDefaultConstants';
 import { parseJsonObject } from '../../lib/parseJson';
 import type { CanvasElement } from '../../types/constructor';
 import type { TourPage } from '../../types/entities';
@@ -18,7 +19,6 @@ import {
   type ElementDefaultsByType,
   type RawConstructorSchema,
 } from './constructorSchema.helpers';
-import { ELEMENT_TYPE_LABELS } from '../../lib/elementDefaultConstants';
 
 export function useActiveConstructorPageHydration({
   activePage,

frontend/src/components/Constructor/useConstructorAuthRedirect.ts

@@ -1,5 +1,5 @@
-import { useEffect } from 'react';
 import type { NextRouter } from 'next/router';
+import { useEffect } from 'react';
 
 export function useConstructorAuthRedirect({
   router,

frontend/src/components/Constructor/useConstructorCanvasInteractions.ts

@@ -1,26 +1,26 @@
-import { flushSync } from 'react-dom';
 import { useCallback, type MouseEvent, type PointerEvent } from 'react';
-import type { CanvasElement, EditorMenuItem } from '../../types/constructor';
-import type { TourPage } from '../../types/entities';
-import type { NavigationContext } from '../../lib/navigationHelpers';
-import type {
-  SystemUiControlSettings,
-  SystemUiControlType,
-} from '../../types/uiControls';
-import type { ElementTransitionSettings } from '../../types/transition';
+import { flushSync } from 'react-dom';
 import type { NavigationElementType } from '../../context/ConstructorContext';
+import { resolveAssetPlaybackUrl } from '../../lib/assetUrl';
+import { isElementFlagEnabled } from '../../lib/elementFlags';
+import { isNavigationElementType } from '../../lib/elementTypeGuards';
+import { logger } from '../../lib/logger';
+import type { NavigationContext } from '../../lib/navigationHelpers';
 import {
   getNavigationDirection,
   hasPlayableTransition,
   isBackNavigation,
   resolveNavigationTarget,
 } from '../../lib/navigationHelpers';
-import { isNavigationElementType } from '../../lib/elementTypeGuards';
-import { isElementFlagEnabled } from '../../lib/elementFlags';
-import { resolveAssetPlaybackUrl } from '../../lib/assetUrl';
 import { downloadManager } from '../../lib/offline/DownloadManager';
-import { logger } from '../../lib/logger';
+import type { CanvasElement, EditorMenuItem } from '../../types/constructor';
+import type { TourPage } from '../../types/entities';
+import type { ElementTransitionSettings } from '../../types/transition';
 import { extractElementTransitionSettings } from '../../types/transition';
+import type {
+  ResolvedUiControlsSettings,
+  SystemUiControlType,
+} from '../../types/uiControls';
 import { getConstructorNavigationErrorMessage } from './constructorPage.helpers';
 
 type ConstructorCanvasInteractionsOptions = {
@@ -35,10 +35,7 @@ type ConstructorCanvasInteractionsOptions = {
     downlink?: number;
     rtt?: number;
   };
-  resolvedUiControlsSettings: Record<
-    SystemUiControlType,
-    SystemUiControlSettings
-  >;
+  resolvedUiControlsSettings: ResolvedUiControlsSettings;
   getNavigationContext: () => NavigationContext;
   getReadyTransitionBlobUrl: (url: string) => string | null;
   selectElementForEdit: (elementId: string) => void;

frontend/src/components/Constructor/useConstructorDerivedState.ts

@@ -2,10 +2,6 @@ import { useMemo } from 'react';
 
 import type { CanvasElement } from '../../types/constructor';
 import type { TourPage, User } from '../../types/entities';
-import {
-  getExistingPageSlugs,
-  getLastProjectSaveAt,
-} from './constructorPage.helpers';
 import {
   canCurrentUserDeleteConstructorPage,
   getConstructorPageElementsListHref,
@@ -13,6 +9,10 @@ import {
   hasConstructorFullWidthCarousel,
   hasConstructorPresentationAudio,
 } from './constructorDerivedState.helpers';
+import {
+  getExistingPageSlugs,
+  getLastProjectSaveAt,
+} from './constructorPage.helpers';
 
 type UseConstructorDerivedStateOptions = {
   projectId: string;

frontend/src/components/Constructor/useConstructorGalleryCarousel.ts

@@ -6,6 +6,7 @@ import {
   type SetStateAction,
 } from 'react';
 
+import type { CanvasElement } from '../../types/constructor';
 import type { ActiveConstructorGalleryCarousel } from './ConstructorRuntimeOverlays';
 import {
   getCarouselButtonPositionPatch,
@@ -14,7 +15,6 @@ import {
   type CarouselButton,
   type GalleryCarouselButton,
 } from './constructorGalleryCarousel.helpers';
-import type { CanvasElement } from '../../types/constructor';
 
 export const useConstructorGalleryCarousel = ({
   elements,

frontend/src/components/Constructor/useConstructorInfoPanels.ts

@@ -1,9 +1,4 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import {
-  buildInfoPanelGalleryState,
-  getExternalHref,
-  getInfoPanelBackgroundSources,
-} from '../UiElements/infoPanelMedia.helpers';
 import { findDefaultOpenInfoPanelElements } from '../../lib/elementFlags';
 import { isInfoPanelElementType } from '../../lib/elementTypeGuards';
 import type {
@@ -11,8 +6,13 @@ import type {
   EditorMenuItem,
   GalleryCarouselMediaItem,
 } from '../../types/constructor';
-import type { InfoPanelImage } from '../../types/infoPanel';
 import type { TourPage } from '../../types/entities';
+import type { InfoPanelImage } from '../../types/infoPanel';
+import {
+  buildInfoPanelGalleryState,
+  getExternalHref,
+  getInfoPanelBackgroundSources,
+} from '../UiElements/infoPanelMedia.helpers';
 
 interface UseConstructorInfoPanelsOptions {
   elements: CanvasElement[];
@@ -26,7 +26,7 @@ interface UseConstructorInfoPanelsOptions {
   setSelectedMenuItem: (item: EditorMenuItem) => void;
   setErrorMessage: (message: string) => void;
   currentAudioUrl: string;
-  resolveAssetUrl: (url: string) => string;
+  resolveAssetUrl: (url: string | undefined) => string;
   setBackgroundDirectly: (
     imageUrl?: string,
     videoUrl?: string,
@@ -53,7 +53,7 @@ export function useConstructorInfoPanels({
   const defaultInfoPanelPageIdRef = useRef<string | null>(null);
   const [activeInfoPanelIds, setActiveInfoPanelIds] = useState<string[]>([]);
   const [activeDetailImages, setActiveDetailImages] = useState<
-    Record<string, InfoPanelImage | undefined>
+    Record<string, InfoPanelImage | null | undefined>
   >({});
   const [activeInfoPanelGallery, setActiveInfoPanelGallery] = useState<{
     panelId: string;
@@ -117,7 +117,7 @@ export function useConstructorInfoPanels({
   }, []);
 
   const setDetailImage = useCallback(
-    (panelId: string, image: InfoPanelImage) => {
+    (panelId: string, image: InfoPanelImage | null) => {
       setActiveDetailImages((current) => ({
         ...current,
         [panelId]: image,

frontend/src/components/Constructor/useConstructorMediaPreloadState.ts

@@ -3,12 +3,12 @@ import { useCallback, useMemo } from 'react';
 import { useIconPreload } from '../../hooks/useIconPreload';
 import type { PreloadCacheProvider } from '../../hooks/video';
 import type { CanvasElement } from '../../types/constructor';
+import { resolveConstructorPreloadedUrl } from './constructorMediaPreload.helpers';
 import {
   areConstructorElementIconsReady,
   buildConstructorIconPreloadTargets,
   getConstructorBackgroundSources,
 } from './constructorPage.helpers';
-import { resolveConstructorPreloadedUrl } from './constructorMediaPreload.helpers';
 
 type ConstructorPreloadOrchestrator = {
   getReadyBlob: (url: string) => Blob | null;
@@ -22,7 +22,7 @@ type UseConstructorMediaPreloadStateOptions = {
   isLoading: boolean;
   isEditMode: boolean;
   preloadOrchestrator: ConstructorPreloadOrchestrator;
-  resolveAssetUrl: (url: string) => string;
+  resolveAssetUrl: (url: string | undefined) => string;
   editBackground: {
     imageUrl?: string;
     videoUrl?: string;
@@ -81,11 +81,7 @@ export function useConstructorMediaPreloadState({
         getReadyBlobUrl: preloadOrchestrator.getReadyBlobUrl,
         resolveAssetUrl,
       }),
-    [
-      preloadOrchestrator.getReadyBlobUrl,
-      preloadOrchestrator.readyUrlsVersion,
-      resolveAssetUrl,
-    ],
+    [preloadOrchestrator.getReadyBlobUrl, resolveAssetUrl],
   );
 
   const backgroundSources = useMemo(

frontend/src/components/Constructor/useConstructorPageManagement.ts

@@ -1,9 +1,9 @@
-import { useCallback, useState } from 'react';
 import axios from 'axios';
-import type { EditorMenuItem } from '../../types/constructor';
-import type { TourPage } from '../../types/entities';
+import { useCallback, useState } from 'react';
 import { logger } from '../../lib/logger';
 import { queryClient, queryKeys } from '../../lib/queryClient';
+import type { EditorMenuItem } from '../../types/constructor';
+import type { TourPage } from '../../types/entities';
 import {
   deleteConstructorPage,
   duplicateConstructorPage,
@@ -78,7 +78,6 @@ export function useConstructorPageManagement({
     },
     [
       activePage,
-      activePage?.environment,
       activePageId,
       handleReload,
       isReorderingPages,

frontend/src/components/Constructor/useConstructorPageNavigationLifecycle.ts

@@ -6,10 +6,10 @@ import {
   type SetStateAction,
 } from 'react';
 
+import type { NavigationElementType } from '../../context/ConstructorContext';
 import type { UsePageNavigationStateResult } from '../../hooks/usePageNavigationState';
 import type { CanvasElement } from '../../types/constructor';
 import type { TourPage } from '../../types/entities';
-import type { NavigationElementType } from '../../context/ConstructorContext';
 import {
   normalizeForcedNavigationElementTypes,
   shouldInitializeConstructorPageBackground,

frontend/src/components/Constructor/useConstructorPageWorkflow.ts

@@ -6,8 +6,8 @@ import type { CanvasElement, EditorMenuItem } from '../../types/constructor';
 import type { TourPage } from '../../types/entities';
 import type { PageBackgroundState } from '../../types/pageBackground';
 import type { UiControlsSettings } from '../../types/uiControls';
-import { useConstructorPageManagement } from './useConstructorPageManagement';
 import { shouldRestoreConstructorPageAfterReload } from './constructorPageWorkflow.helpers';
+import { useConstructorPageManagement } from './useConstructorPageManagement';
 
 type ConstructorWorkflowProject = {
   id?: string;
@@ -21,7 +21,7 @@ type UseConstructorPageWorkflowOptions = {
   project?: ConstructorWorkflowProject | null;
   pages: TourPage[];
   activePage: TourPage | null;
-  activePageId: string;
+  activePageId: string | null;
   elements: CanvasElement[];
   getElements: () => CanvasElement[];
   pageBackground: PageBackgroundState;
@@ -65,7 +65,9 @@ export function useConstructorPageWorkflow({
         pages,
       })
     ) {
-      setActivePageId(currentPageId);
+      if (currentPageId) {
+        setActivePageId(currentPageId);
+      }
     }
   }, [activePageId, pages, refetchData, setActivePageId]);
 
@@ -83,7 +85,7 @@ export function useConstructorPageWorkflow({
     project,
     pages,
     activePage,
-    activePageId,
+    activePageId: activePageId || '',
     elements,
     getElements,
     pageBackground,
@@ -99,7 +101,7 @@ export function useConstructorPageWorkflow({
     projectId,
     pages,
     activePage,
-    activePageId,
+    activePageId: activePageId || '',
     existingSlugs,
     refetchData,
     handleReload,

frontend/src/components/Constructor/useConstructorSettingsFetch.ts

@@ -1,9 +1,9 @@
 import { useEffect } from 'react';
-import type { AppDispatch } from '../../stores/store';
 import { fetch as fetchGlobalTransitionDefaults } from '../../stores/global_transition_defaults/globalTransitionDefaultsSlice';
 import { fetch as fetchGlobalUiControlDefaults } from '../../stores/global_ui_control_defaults/globalUiControlDefaultsSlice';
 import { fetchByProjectAndEnv as fetchProjectTransitionSettings } from '../../stores/project_transition_settings/projectTransitionSettingsSlice';
 import { fetchByProjectAndEnv as fetchProjectUiControlSettings } from '../../stores/project_ui_control_settings/projectUiControlSettingsSlice';
+import type { AppDispatch } from '../../stores/store';
 
 interface UseConstructorSettingsFetchOptions {
   dispatch: AppDispatch;

frontend/src/components/Constructor/useConstructorTransitionPreviewPlayback.ts

@@ -48,7 +48,7 @@ export const useConstructorTransitionPreviewPlayback = ({
   resetNavigationToIdle: () => void;
   onTransitionEnded: () => void;
   onVideoBufferStateChange: (isBuffering: boolean) => void;
-  resolveUrl: (url: string) => string;
+  resolveUrl: (url: string | undefined) => string;
 }) => {
   const transitionVideoRef = useRef<HTMLVideoElement | null>(null);
   const [isTransitionVideoElementReady, setIsTransitionVideoElementReady] =

frontend/src/components/DataGrid/configBuilderFactory.tsx

@@ -1,15 +1,15 @@
-import React from 'react';
-import axios from 'axios';
 import {
   GridColDef,
   GridRenderCellParams,
   GridSingleSelectColDef,
 } from '@mui/x-data-grid';
+import axios from 'axios';
+import React from 'react';
 import dataFormatter from '../../helpers/dataFormatter';
-import DataGridMultiSelect from '../DataGridMultiSelect';
-import ListActionsPopover from '../ListActionsPopover';
 import { hasPermission } from '../../helpers/userPermissions';
 import { logger } from '../../lib/logger';
+import DataGridMultiSelect from '../DataGridMultiSelect';
+import ListActionsPopover from '../ListActionsPopover';
 
 export interface ColumnMetadata {
   field: string;
@@ -163,9 +163,14 @@ function buildColumn(
 
     singleSelectColumn.type = 'singleSelect';
     singleSelectColumn.sortable = false;
-    singleSelectColumn.getOptionValue = (value: { id?: string }) => value?.id;
-    singleSelectColumn.getOptionLabel = (value: { label?: string }) =>
-      value?.label;
+    singleSelectColumn.getOptionValue = (value: unknown) =>
+      typeof value === 'object' && value !== null && 'id' in value
+        ? String(value.id ?? '')
+        : String(value ?? '');
+    singleSelectColumn.getOptionLabel = (value: unknown) =>
+      typeof value === 'object' && value !== null && 'label' in value
+        ? String(value.label ?? '')
+        : String(value ?? '');
     singleSelectColumn.valueOptions = valueOptions;
     singleSelectColumn.valueGetter = (
       value: { id?: string; label?: string; name?: string } | string | null,

frontend/src/components/DataGridMultiSelect.tsx

@@ -1,19 +1,26 @@
+import { MenuItem, Select, type SelectChangeEvent } from '@mui/material';
 import { GridRenderEditCellParams, useGridApiContext } from '@mui/x-data-grid';
-import React, { useEffect, useState } from 'react';
 import axios from 'axios';
-import { MenuItem, Select } from '@mui/material';
+import { useEffect, useState } from 'react';
 
 interface Props {
   entityName: string;
 }
 
+interface SelectOption {
+  id: string;
+  label: string;
+}
+
 const DataGridMultiSelect = (props: GridRenderEditCellParams & Props) => {
   const { id, value, field, entityName } = props;
   const apiRef = useGridApiContext();
-  const [options, setOptions] = useState([]);
+  const [options, setOptions] = useState<SelectOption[]>([]);
 
   async function callApi(entityName: string) {
-    const data = await axios(`/${entityName}/autocomplete?limit=50`);
+    const data = await axios.get<SelectOption[]>(
+      `/${entityName}/autocomplete?limit=50`,
+    );
     return data.data;
   }
 
@@ -21,18 +28,24 @@ const DataGridMultiSelect = (props: GridRenderEditCellParams & Props) => {
     callApi(entityName).then((data) => {
       setOptions(data);
     });
-  }, []);
+  }, [entityName]);
 
-  const handleChange = (event) => {
+  const handleChange = (event: SelectChangeEvent<unknown>) => {
     const eventValue = event.target.value; // The new value entered by the user
 
     const newValue =
-      typeof eventValue === 'string' ? value.split(',') : eventValue;
+      typeof eventValue === 'string'
+        ? eventValue.split(',')
+        : Array.isArray(eventValue)
+          ? eventValue
+          : [];
 
     apiRef.current.setEditCellValue({
       id,
       field,
-      value: newValue.filter((x) => x !== ''),
+      value: newValue.filter(
+        (x): x is string => typeof x === 'string' && x !== '',
+      ),
     });
   };
 

frontend/src/components/DragDropFilePicker.tsx

@@ -1,26 +1,26 @@
-import React, { ChangeEvent, useEffect, useState } from 'react';
-import BaseIcon from './BaseIcon';
 import { mdiFileUploadOutline } from '@mdi/js';
+import React, { useEffect, useRef, useState } from 'react';
+import BaseIcon from './BaseIcon';
 
 type Props = {
   file: File | null;
-  setFile: (file: File) => void;
+  setFile: (file: File | null) => void;
   formats?: string;
 };
 
 const DragDropFilePicker = ({ file, setFile, formats = '' }: Props) => {
   const [highlight, setHighlight] = useState(false);
   const [errorMessage, setErrorMessage] = useState('');
-  const fileInput = React.createRef<HTMLInputElement>();
+  const fileInput = useRef<HTMLInputElement | null>(null);
 
   useEffect(() => {
-    if (!file && fileInput) fileInput.current.value = '';
+    if (!file && fileInput.current) fileInput.current.value = '';
   }, [file, fileInput]);
 
   function onFilesAdded(files: FileList | null) {
     if (files && files[0]) {
       const newFile = files[0];
-      const fileExtension = newFile.name.split('.').pop().toLowerCase();
+      const fileExtension = newFile.name.split('.').pop()?.toLowerCase() || '';
 
       if (formats.includes(fileExtension) || !formats) {
         setFile(newFile);
@@ -31,7 +31,7 @@ const DragDropFilePicker = ({ file, setFile, formats = '' }: Props) => {
     }
   }
 
-  function onDragOver(e) {
+  function onDragOver(e: React.DragEvent<HTMLDivElement>) {
     e.preventDefault();
     setHighlight(true);
   }
@@ -40,7 +40,7 @@ const DragDropFilePicker = ({ file, setFile, formats = '' }: Props) => {
     setHighlight(false);
   }
 
-  function onDrop(e) {
+  function onDrop(e: React.DragEvent<HTMLDivElement>) {
     e.preventDefault();
 
     const files = e.dataTransfer.files;
@@ -49,11 +49,6 @@ const DragDropFilePicker = ({ file, setFile, formats = '' }: Props) => {
     setHighlight(false);
   }
 
-  const onClear = () => {
-    setFile(null);
-    setErrorMessage('');
-  };
-
   return (
     <div
       className='flex items-center justify-center w-full mb-4'

frontend/src/components/ElementSettings/CarouselSettingsSection.tsx

@@ -5,13 +5,13 @@
  * Manages carousel slides with images and captions.
  */
 
-import React from 'react';
 import { mdiPlus, mdiTrashCan } from '@mdi/js';
+import React from 'react';
+import { FONT_OPTIONS } from '../../lib/fonts';
 import BaseButton from '../BaseButton';
 import CardBox from '../CardBox';
 import FormField from '../FormField';
 import type { CarouselSettingsSectionProps } from './types';
-import { FONT_OPTIONS } from '../../lib/fonts';
 
 const CarouselSettingsSection: React.FC<CarouselSettingsSectionProps> = ({
   carouselPrevIconUrl,

frontend/src/components/ElementSettings/CarouselSettingsSectionCompact.tsx

@@ -6,9 +6,9 @@
  */
 
 import React from 'react';
-import type { CarouselSlide, AssetOption } from '../../types/constructor';
 import { addFallbackAssetOption } from '../../lib/constructorHelpers';
 import { FONT_OPTIONS } from '../../lib/fonts';
+import type { AssetOption, CarouselSlide } from '../../types/constructor';
 
 interface CarouselSettingsSectionCompactProps {
   carouselSlides: CarouselSlide[];