fix: pause timer over midnight

test(timer): assert elapsed stays frozen while paused over midnight
Make the midnight pause test's intent explicit: elapsed is active time since start and must not advance during a pause (even one crossing midnight). Add a frozen-elapsed assertion while paused and keep pausedDuration - the corrupted pause count - as the headline assertion. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0136N3FnyuUmLJbMNJiZd6YX
2026-08-25 17:09:09 +00:00 · 2026-08-09 16:46:31 +02:00 · 2026-08-09 16:46:31 +02:00 · 2026-08-09 16:46:31 +02:00
76 changed files with 2723 additions and 2569 deletions
@@ -4,7 +4,7 @@
  "private": true,
  "type": "module",
  "dependencies": {
-    "@base-ui/react": "1.7.0",
+    "@base-ui/react": "1.6.0",
    "@codemirror/commands": "^6.0.0",
    "@codemirror/lang-css": "^6.0.0",
    "@codemirror/state": "^6.0.0",
@@ -13,12 +13,12 @@
    "@dnd-kit/sortable": "^10.0.0",
    "@dnd-kit/utilities": "^3.2.2",
    "@fontsource/open-sans": "^5.2.7",
-    "@mantine/hooks": "^9.5.1",
+    "@mantine/hooks": "^8.3.7",
    "@sentry/react": "^10.59.0",
    "@table-nav/react": "^0.0.7",
    "@tanstack/react-query": "^5.101.0",
    "@tanstack/react-query-devtools": "^5.101.0",
-    "@tanstack/react-table": "^9.1.2",
+    "@tanstack/react-table": "^8.21.3",
    "@uiw/codemirror-theme-vscode": "^4.25.10",
    "autosize": "^6.0.1",
    "axios": "^1.18.0",
@@ -29,7 +29,7 @@
    "react-dom": "^19.2.7",
    "react-fast-compare": "^3.2.2",
    "react-hook-form": "^7.80.0",
-    "react-icons": "5.7.0",
+    "react-icons": "5.6.0",
    "react-router": "^8.0.1",
    "react-virtuoso": "^4.18.7",
    "zustand": "^5.0.14"
@@ -60,8 +60,7 @@
    ]
  },
  "devDependencies": {
-    "@sentry/vite-plugin": "5.4.0",
-    "@types/node": "catalog:",
+    "@sentry/vite-plugin": "5.1.1",
    "@types/qrcode": "^1.5.6",
    "@types/react": "^19.1.12",
    "@types/react-dom": "^19.1.9",
@@ -73,8 +72,8 @@
    "ontime-utils": "workspace:*",
    "sass": "^1.57.1",
    "typescript": "catalog:",
-    "vite": "8.2.1",
-    "vite-plugin-compression2": "2.5.3",
+    "vite": "8.0.1",
+    "vite-plugin-compression2": "2.5.1",
    "vite-plugin-svgr": "4.5.0",
    "vitest": "catalog:"
  }
@@ -1,6 +0,0 @@
-.eyebrow {
-  font-size: $aux-text-size;
-  font-weight: 400;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-}
@@ -1,13 +0,0 @@
-import { PropsWithChildren } from 'react';
-
-import { cx } from '../../utils/styleUtils';
-
-import style from './Eyebrow.module.scss';
-
-interface EyebrowProps {
-  className?: string;
-}
-
-export default function Eyebrow({ children, className }: PropsWithChildren<EyebrowProps>) {
-  return <span className={cx([style.eyebrow, className])}>{children}</span>;
-}
@@ -1,3 +1,7 @@
+.separator {
+  border-color: $border-color-ondark;
+}
+
 .backdrop {
  position: fixed;
  inset: 0;
@@ -19,15 +23,14 @@

  width: 22rem;
  height: 100vh;
-  height: 100dvh;

  display: flex;
  flex-direction: column;
+  padding-block: 1rem;

  background-color: $gray-1250;
  color: $ui-white;
  border-right: 1px solid $gray-1100;
-  box-shadow: $box-shadow-right;

  &[data-open] {
    transform: translateX(0%);
@@ -47,51 +50,22 @@
 }

 .header {
-  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
-  gap: 1rem;
-  min-height: 4rem;
-  padding: 0.75rem 1rem 0.75rem 1.25rem;
-  border-bottom: 1px solid $white-10;
-}
+  height: 3.5rem;
+  padding-inline: 1.5rem;

-.headerText {
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-}
-
-.title {
  font-weight: 600;
  font-size: 1.25rem;
-  line-height: 1.2;
-}
-
-.clientName {
-  font-size: $aux-text-size;
-  color: $gray-600;
-  @include ellipsis-text;
 }

 .body {
  flex: 1;
-  min-height: 0;
  overflow-y: auto;
-  padding-block: 0.5rem 1rem;
 }

-.group {
-  display: flex;
-  flex-direction: column;
-
-  &:not(:first-child) {
-    margin-top: 0.75rem;
-  }
-}
-
-.groupLabel {
-  padding: 0.5rem 1.25rem 0.25rem;
-  color: $gray-700;
+.note {
+  margin-left: auto;
+  color: $white-20;
 }
@@ -1,7 +1,7 @@
 import { Dialog } from '@base-ui/react/dialog';
-import { useDisclosure, useFullscreenDocument } from '@mantine/hooks';
-import { memo, PropsWithChildren } from 'react';
-import { IoClose, IoExpand, IoLockClosedOutline, IoPencilOutline, IoSwapVertical } from 'react-icons/io5';
+import { useDisclosure, useFullscreen } from '@mantine/hooks';
+import { memo } from 'react';
+import { IoClose, IoContract, IoExpand, IoLockClosedOutline, IoSwapVertical } from 'react-icons/io5';
 import { LuCoffee } from 'react-icons/lu';
 import { useLocation } from 'react-router';

@@ -14,11 +14,9 @@ import { useClientStore } from '../../stores/clientStore';
 import { useViewOptionsStore } from '../../stores/viewOptions';
 import IconButton from '../buttons/IconButton';
 import { RenameClientModal } from '../client-modal/RenameClientModal';
-import Eyebrow from '../eyebrow/Eyebrow';
 import ClientLink from './client-link/ClientLink';
 import EditorNavigation from './editor-navigation/EditorNavigation';
 import NavigationMenuItem from './navigation-menu-item/NavigationMenuItem';
-import NavigationMenuToggle from './navigation-menu-item/NavigationMenuToggle';
 import OtherAddresses from './other-addresses/OtherAddresses';

 import style from './NavigationMenu.module.scss';
@@ -35,7 +33,7 @@ function NavigationMenu({ isOpen, onClose }: NavigationMenuProps) {
  const isSmallScreen = useIsSmallScreen();

  const [isRenameOpen, handlers] = useDisclosure(false);
-  const { fullscreen, toggle } = useFullscreenDocument();
+  const { fullscreen, toggle } = useFullscreen();
  const { mirror, toggleMirror } = useViewOptionsStore();
  const { keepAwake, toggleKeepAwake } = useKeepAwakeOptions();
  const location = useLocation();
@@ -54,93 +52,75 @@ function NavigationMenu({ isOpen, onClose }: NavigationMenuProps) {
        <RenameClientModal id={id} name={name} isOpen={isRenameOpen} onClose={handlers.close} />
        <Dialog.Popup className={style.drawer}>
          <div className={style.header}>
-            <div className={style.headerText}>
-              <Dialog.Title className={style.title}>Ontime</Dialog.Title>
-              {name && <span className={style.clientName}>{name}</span>}
-            </div>
-            <IconButton variant='subtle-white' size='large' aria-label='Close menu' onClick={onClose}>
+            <Dialog.Title>Ontime</Dialog.Title>
+            <IconButton variant='subtle-white' size='large' onClick={onClose}>
              <IoClose />
            </IconButton>
          </div>
          <div className={style.body}>
-            <MenuGroup label='This screen'>
-              {supportsFullscreen && (
-                <NavigationMenuToggle checked={fullscreen} icon={<IoExpand />} label='Fullscreen' onToggle={toggle} />
-              )}
-              <NavigationMenuToggle
-                checked={mirror}
-                icon={<IoSwapVertical />}
-                label='Flip Screen'
-                onToggle={() => toggleMirror()}
-              />
-              {canUseWakeLock && (
-                <NavigationMenuToggle
-                  checked={keepAwake}
-                  icon={<LuCoffee />}
-                  label='Keep Awake'
-                  onToggle={toggleKeepAwake}
-                />
-              )}
-              <NavigationMenuItem onClick={handlers.open}>
-                <IoPencilOutline />
-                Rename Client
+            {supportsFullscreen && (
+              <NavigationMenuItem active={fullscreen} onClick={toggle}>
+                Toggle Fullscreen
+                {fullscreen ? <IoContract /> : <IoExpand />}
              </NavigationMenuItem>
-            </MenuGroup>
+            )}
+            <NavigationMenuItem active={mirror} onClick={() => toggleMirror()}>
+              Flip Screen
+              <IoSwapVertical />
+              {mirror && <span className={style.note}>Active</span>}
+            </NavigationMenuItem>
+            {canUseWakeLock && (
+              <NavigationMenuItem active={keepAwake} onClick={toggleKeepAwake}>
+                Keep Awake
+                <LuCoffee />
+                {keepAwake && <span className={style.note}>Active</span>}
+              </NavigationMenuItem>
+            )}
+            <NavigationMenuItem onClick={handlers.open}>Rename Client</NavigationMenuItem>

-            <MenuGroup label='Ontime app'>
-              <EditorNavigation />
+            <hr className={style.separator} />
+
+            <EditorNavigation />
+            <ClientLink
+              to='cuesheet'
+              current={location.pathname === '/cuesheet'}
+              postAction={isSmallScreen ? onClose : undefined}
+            >
+              <IoLockClosedOutline />
+              Cuesheet
+            </ClientLink>
+            <ClientLink to='op' current={location.pathname === '/op'} postAction={isSmallScreen ? onClose : undefined}>
+              <IoLockClosedOutline />
+              Operator
+            </ClientLink>
+
+            <hr className={style.separator} />
+
+            {navigatorConstants.map((route) => (
              <ClientLink
-                to='cuesheet'
-                current={location.pathname === '/cuesheet'}
+                key={route.url}
+                to={route.url}
+                current={location.pathname === `/${route.url}`}
                postAction={isSmallScreen ? onClose : undefined}
              >
-                <IoLockClosedOutline />
-                Cuesheet
+                {route.label}
              </ClientLink>
-              <ClientLink
-                to='op'
-                current={location.pathname === '/op'}
-                postAction={isSmallScreen ? onClose : undefined}
-              >
-                <IoLockClosedOutline />
-                Operator
-              </ClientLink>
-            </MenuGroup>
-
-            <MenuGroup label='Views'>
-              {navigatorConstants.map((route) => (
-                <ClientLink
-                  key={route.url}
-                  to={route.url}
-                  current={location.pathname === `/${route.url}`}
-                  postAction={isSmallScreen ? onClose : undefined}
-                >
-                  {route.label}
-                </ClientLink>
-              ))}
-            </MenuGroup>
+            ))}

            <PresetNavigation isSmallScreen={isSmallScreen} onClose={onClose} />
          </div>

-          {isLocalhost && <OtherAddresses currentLocation={location.pathname} />}
+          {isLocalhost && (
+            <div>
+              <OtherAddresses currentLocation={location.pathname} />
+            </div>
+          )}
        </Dialog.Popup>
      </Dialog.Portal>
    </Dialog.Root>
  );
 }

-function MenuGroup({ label, children }: PropsWithChildren<{ label: string }>) {
-  return (
-    <div className={style.group}>
-      <div className={style.groupLabel}>
-        <Eyebrow>{label}</Eyebrow>
-      </div>
-      {children}
-    </div>
-  );
-}
-
 function PresetNavigation({ isSmallScreen, onClose }: { isSmallScreen: boolean; onClose: () => void }) {
  const location = useLocation();
  const { data: urlPresets } = useUrlPresets();
@@ -149,7 +129,8 @@ function PresetNavigation({ isSmallScreen, onClose }: { isSmallScreen: boolean;
  if (navPresets.length === 0) return null;

  return (
-    <MenuGroup label='Presets'>
+    <>
+      <hr className={style.separator} />
      {navPresets.map((preset) => (
        <ClientLink
          key={preset.alias}
@@ -160,6 +141,6 @@ function PresetNavigation({ isSmallScreen, onClose }: { isSmallScreen: boolean;
          {preset.alias}
        </ClientLink>
      ))}
-    </MenuGroup>
+    </>
  );
 }
@@ -1,5 +1,5 @@
-import { useHotkeys } from '@mantine/hooks';
-import { memo, useCallback, useState } from 'react';
+import { useDisclosure, useHotkeys } from '@mantine/hooks';
+import { memo } from 'react';
 import { useSearchParams } from 'react-router';

 import { hasCustomParams } from '../../stores/savedViewParams';
@@ -15,37 +15,21 @@ interface ViewNavigationMenuProps {
  suppressSettings?: boolean;
 }

-function isInteractiveKeyboardAction(target: EventTarget | null): boolean {
-  if (!(target instanceof HTMLElement)) {
-    return false;
-  }
-
-  return (
-    target.closest(
-      'button, a, input, textarea, select, [role="button"], [role="checkbox"], [role="switch"], [contenteditable]:not([contenteditable="false"])',
-    ) !== null
-  );
-}
-
 export default memo(ViewNavigationMenu);
 function ViewNavigationMenu({ isNavigationLocked, suppressSettings }: ViewNavigationMenuProps) {
-  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isMenuOpen, menuHandler] = useDisclosure();
  const { open: showEditFormDrawer } = useViewParamsEditorStore();
  const [searchParams] = useSearchParams();
  const hasSavedChanges = hasCustomParams(searchParams);

-  const toggleMenu = useCallback(() => setIsMenuOpen((prev) => !prev), []);
-  const closeMenu = useCallback(() => setIsMenuOpen(false), []);
-
  useHotkeys([
    [
      'Space',
-      (event) => {
-        if (isNavigationLocked || isInteractiveKeyboardAction(event.target)) return;
-        event.preventDefault();
-        toggleMenu();
+      () => {
+        if (isNavigationLocked) return;
+        menuHandler.toggle();
      },
-      { preventDefault: false },
+      { preventDefault: true },
    ],
    [
      'mod + ,',
@@ -64,11 +48,11 @@ function ViewNavigationMenu({ isNavigationLocked, suppressSettings }: ViewNaviga
  return (
    <>
      <FloatingNavigation
-        toggleMenu={isNavigationLocked ? undefined : toggleMenu}
+        toggleMenu={isNavigationLocked ? undefined : menuHandler.toggle}
        toggleSettings={suppressSettings ? undefined : showEditFormDrawer}
        hasSavedChanges={hasSavedChanges}
      />
-      {!isNavigationLocked && <NavigationMenu isOpen={isMenuOpen} onClose={closeMenu} />}
+      {!isNavigationLocked && <NavigationMenu isOpen={isMenuOpen} onClose={menuHandler.close} />}
    </>
  );
 }
@@ -2,68 +2,35 @@
  display: flex;
  align-items: center;

-  padding: 0.625rem 1.25rem;
-  gap: 0.625rem;
+  padding: 0.75rem 1.5rem;
+  gap: 0.5rem;
  width: 100%;

-  border-left: 3px solid transparent;
-  color: $gray-200;
-  font-size: $text-body-size;
+  border-left: 4px solid transparent;
+  color: $action-text-color;
  white-space: nowrap;
-  text-align: left;

  cursor: pointer;

-  transition-property: color, background-color;
+  transition-property: color;
  transition-duration: $transition-time-action;

-  // keep icons on a fixed box so labels align regardless of the glyph
-  > svg {
-    flex-shrink: 0;
-    width: 1.125rem;
-    height: 1.125rem;
-    color: $gray-500;
-    transition: color $transition-time-action;
-  }
-
  &:hover {
-    background-color: $white-3;
-    color: $ui-white;
-
-    > svg {
-      color: $gray-300;
-    }
+    color: $ontime-color;
+    background-color: $gray-1350;
  }

  &:active {
-    background-color: $white-7;
+    background-color: $border-color-ondark;
  }

-  &:focus-visible {
+  &:focus {
    outline: 2px solid $blue-500;
-    outline-offset: -2px;
-    background-color: $white-3;
-  }
-
-  // toggle rows are labels, the focusable control sits inside them
-  &:focus-within {
-    background-color: $white-3;
+    background-color: $gray-1350;
  }

  &.current {
-    background-color: $bg-active;
-    border-left-color: $blue-400;
-    color: $ui-white;
-    font-weight: 600;
-
-    > svg {
-      color: $blue-300;
-    }
+    background-color: $gray-1300;
+    border-left: 4px solid $action-text-color;
  }
 }
-
-.label {
-  flex: 1;
-  min-width: 0;
-  @include ellipsis-text;
-}
@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react';

-import { isKeyEnter, isKeySpace } from '../../../utils/keyEvent';
+import { isKeyEnter } from '../../../utils/keyEvent';
 import { cx } from '../../../utils/styleUtils';

 import style from './NavigationMenuItem.module.scss';
@@ -11,7 +11,6 @@ interface NavigationMenuItemProps {
  onClick: () => void;
 }

-/** A row in the navigation menu, and the single place which decides how a row reacts to input */
 export default function NavigationMenuItem({
  active,
  className,
@@ -25,9 +24,7 @@ export default function NavigationMenuItem({
      role='button'
      onClick={onClick}
      onKeyDown={(event) => {
-        if (isKeyEnter(event) || isKeySpace(event)) {
-          event.preventDefault();
-          event.stopPropagation();
+        if (isKeyEnter(event)) {
          onClick();
        }
      }}
@@ -1,23 +0,0 @@
-import { ReactNode } from 'react';
-
-import Switch from '../../switch/Switch';
-
-import style from './NavigationMenuItem.module.scss';
-
-interface NavigationMenuToggleProps {
-  checked: boolean;
-  icon: ReactNode;
-  label: string;
-  onToggle: () => void;
-}
-
-/** A menu row which reflects, and toggles, an on/off state */
-export default function NavigationMenuToggle({ checked, icon, label, onToggle }: NavigationMenuToggleProps) {
-  return (
-    <label className={style.link}>
-      {icon}
-      <span className={style.label}>{label}</span>
-      <Switch checked={checked} onCheckedChange={onToggle} />
-    </label>
-  );
-}
@@ -1,52 +1,22 @@
-.footer {
-  flex: 0 0 auto;
-  padding: 0.75rem 0;
-  border-top: 1px solid $white-10;
-}
-
 .header {
-  padding: 0 1.25rem 0.25rem;
+  font-size: calc(1rem - 2px);
+  margin-left: 1rem;
  color: $gray-700;
 }

 .interfaces {
-  padding: 0.25rem 1.25rem 0;
+  padding: 0.5rem 0.5rem;
  display: flex;
  flex-wrap: wrap;
-  gap: 0.25rem;
-}
-
-.interface {
-  min-width: 0;
-  max-width: 100%;
-
-  > div {
-    max-width: 100%;
-
-    > button:first-child {
-      min-width: 0;
-      max-width: calc(100% - 1.5rem);
-      justify-content: flex-start;
-      padding-inline: 0.5rem;
-    }
-  }
+  gap: 0.5rem;
 }

 .interfaceCopy {
  display: flex;
  align-items: center;
-  min-width: 0;
-  width: 100%;
-}
-
-.address {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }

 .goIcon {
-  flex: 0 0 auto;
  @include rotate-fourty-five;
  margin-left: 0.25rem;
  margin-bottom: 0.25rem;
@@ -3,8 +3,6 @@ import { IoArrowUp } from 'react-icons/io5';
 import useInfo from '../../../hooks-query/useInfo';
 import { linkToOtherHost, openLink } from '../../../utils/linkUtils';
 import CopyTag from '../../copy-tag/CopyTag';
-import Eyebrow from '../../eyebrow/Eyebrow';
-import { getExternalInterfaces } from './otherAddresses.utils';

 import style from './OtherAddresses.module.scss';

@@ -14,33 +12,32 @@ interface OtherAddressesProps {

 export default function OtherAddresses({ currentLocation }: OtherAddressesProps) {
  const { data } = useInfo();
-  const externalInterfaces = getExternalInterfaces(data.networkInterfaces);

-  if (externalInterfaces.length === 0) {
+  // there is no point showing this if we only have one interface
+  if (data.networkInterfaces.length < 2) {
    return null;
  }

  return (
-    <div className={style.footer}>
-      <div className={style.header}>
-        <Eyebrow>Also available at</Eyebrow>
-      </div>
+    <>
+      <div className={style.header}>Accessible on external networks</div>
      <div className={style.interfaces}>
-        {externalInterfaces.map((nif) => {
+        {data?.networkInterfaces?.map((nif) => {
+          if (nif.name === 'localhost') {
+            return null;
+          }
+
          const address = linkToOtherHost(nif.address, currentLocation);

          return (
-            <div key={nif.name} className={style.interface}>
-              <CopyTag copyValue={address} onClick={() => openLink(address)} size='small'>
-                <span className={style.interfaceCopy}>
-                  <span className={style.address}>{nif.address}</span>
-                  <IoArrowUp className={style.goIcon} />
-                </span>
-              </CopyTag>
-            </div>
+            <CopyTag key={nif.name} copyValue={address} onClick={() => openLink(address)} size='small'>
+              <span className={style.interfaceCopy}>
+                {nif.address} <IoArrowUp className={style.goIcon} />
+              </span>
+            </CopyTag>
          );
        })}
      </div>
-    </div>
+    </>
  );
 }
@@ -1,31 +0,0 @@
-import { describe, expect, test } from 'vitest';
-
-import { getExternalInterfaces } from '../otherAddresses.utils';
-
-describe('getExternalInterfaces', () => {
-  test('returns no alternatives when localhost is the only interface', () => {
-    expect(getExternalInterfaces([{ name: 'localhost', address: '127.0.0.1' }])).toEqual([]);
-  });
-
-  test('does not treat an interface name as deployment information', () => {
-    expect(
-      getExternalInterfaces([
-        { name: 'localhost', address: '127.0.0.1' },
-        { name: 'cloud', address: '192.168.1.42' },
-      ]),
-    ).toEqual([{ name: 'cloud', address: '192.168.1.42' }]);
-  });
-
-  test('returns non-local interfaces when local and external interfaces are available', () => {
-    expect(
-      getExternalInterfaces([
-        { name: 'localhost', address: '127.0.0.1' },
-        { name: 'Wi-Fi', address: '192.168.1.42' },
-        { name: 'Ethernet', address: '10.0.0.42' },
-      ]),
-    ).toEqual([
-      { name: 'Wi-Fi', address: '192.168.1.42' },
-      { name: 'Ethernet', address: '10.0.0.42' },
-    ]);
-  });
-});
@@ -1,6 +0,0 @@
-import { type NetworkInterface } from 'ontime-types';
-
-/** Returns network addresses other than the localhost address injected by the info endpoint. */
-export function getExternalInterfaces(interfaces: NetworkInterface[]) {
-  return interfaces.filter((networkInterface) => networkInterface.name !== 'localhost');
-}
@@ -2,12 +2,6 @@
  display: flex;
  align-items: center;
  gap: 0.5rem;
-
-  > span {
-    font-variant-numeric: tabular-nums;
-    text-align: right;
-    text-transform: uppercase;
-  }
 }

 // attempt to match with ontimeTextInputs
@@ -1,77 +1,37 @@
-.multiOptionList {
-  overflow-y: auto;
-  max-height: 12rem;
-  background: $gray-1200;
-  border: 1px solid $gray-1100;
-  border-radius: $component-border-radius-md;
+.inline {
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 1rem;
 }

+// styles from subtle button
 .toggleSelect {
-  box-sizing: border-box;
  display: flex;
  align-items: center;
-  gap: 0.75rem;
-  min-height: 2.5rem;
-  padding: 0.5rem 0.75rem;
-  background: transparent;
-  border: 0;
-  color: $gray-300;
+  gap: 0.25rem;
+  padding-inline: 0.5rem;
+  height: 2.5rem;
+  background: $gray-1050;
+  color: $ui-white;
  line-height: 1em;
-  cursor: pointer;
-  transition:
-    background-color $transition-time-action,
-    border-color $transition-time-action,
-    color $transition-time-action;
+  border-radius: $component-border-radius-md;

-  &:hover {
+  &:hover:not(:disabled):not(:active) {
    background: $gray-1000;
-    color: $ui-white;
+    color: $blue-500;
  }

-  &:active {
+  &:active:not(:disabled) {
    background: $gray-1100;
-  }
-
-  &:focus-within {
-    outline: 2px solid $blue-500;
-    outline-offset: -2px;
-  }
-
-  &.selected {
-    background: $bg-active;
-    box-shadow: inset 3px 0 $blue-400;
-    color: $ui-white;
-  }
-
-  &:not(:last-child) {
-    border-bottom: 1px solid $white-7;
-  }
-
-  > [role='checkbox'] {
-    flex: 0 0 auto;
-    width: 1.125rem;
-    height: 1.125rem;
-    border: 1px solid $gray-400;
-
-    &[data-unchecked] {
-      background: $gray-1100;
-    }
-
-    &[data-checked] {
-      border-color: $blue-400;
-    }
-
-    &:focus-visible {
-      outline: 0;
-    }
+    border-color: $gray-1250;
  }

  &::after {
    content: '';
-    flex: 0 0 auto;
-    margin-left: auto;
-    width: 0.625rem;
-    height: 0.625rem;
+    margin-left: 0.25rem;
+    width: 0.75em;
+    height: 0.75em;
    background: var(--user-bg, $gray-900);
    border-radius: 50%;
  }
@@ -2,7 +2,6 @@ import { ComponentProps, useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router';

 import { isStringBoolean } from '../../../views/common/viewUtils';
-import { cx } from '../../utils/styleUtils';
 import Checkbox from '../checkbox/Checkbox';
 import Input from '../input/input/Input';
 import Select, { SelectOption } from '../select/Select';
@@ -108,20 +107,18 @@ function MultiOption({ paramField, options }: EditFormMultiOptionProps) {
  return (
    <>
      <input name={id} hidden readOnly value={paramState.join(',')} />
-      <div className={style.multiOptionList}>
+      <div className={style.inline}>
        {values.map((option) => {
-          const selected = paramState.includes(option.value);
-
          return (
            <label
              key={option.value}
-              className={cx([style.toggleSelect, selected && style.selected])}
+              className={style.toggleSelect}
              style={{
                '--user-bg': option.colour,
              }}
            >
              <Checkbox
-                checked={selected}
+                checked={paramState.includes(option.value)}
                onCheckedChange={(checked) => toggleValue(option.value, checked as boolean)}
              />
              {option.label}
@@ -1,3 +1,13 @@
+.drawerFooter {
+  display: flex;
+  justify-content: end;
+  gap: $section-spacing;
+
+  button {
+    padding: 0 2em;
+  }
+}
+
 .backdrop {
  position: fixed;
  inset: 0;
@@ -24,11 +34,11 @@

  display: flex;
  flex-direction: column;
+  padding-block: 1rem 1.5rem;

-  background-color: $ui-black;
+  background-color: $gray-1250;
  color: $ui-white;
  border-left: 1px solid $gray-1100;
-  box-shadow: $box-shadow-l1;

  &[data-open] {
    transform: translateX(0%);
@@ -48,54 +58,36 @@
 }

 .header {
-  flex: 0 0 auto;
+  padding-inline: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
-  gap: 1rem;
-  min-height: 4rem;
-  padding: 0.75rem 1rem;
-}
+  height: 3.5rem;

-.headerText {
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-}
-
-.title {
  font-weight: 600;
  font-size: 1.25rem;
-  line-height: 1.2;
-}
-
-.target {
-  font-size: $aux-text-size;
-  color: $gray-600;
 }

 .body {
  flex: 1;
-  padding: 1rem;
+  padding-inline: 1rem;
+  padding-bottom: 10vh;
  overflow-y: auto;
 }

 .footer {
-  flex: 0 0 auto;
  display: flex;
-  padding: 0.75rem 1rem;
+  padding-inline: 1rem;
  gap: 1rem;
  align-items: center;
  justify-content: flex-end;
-
-  background-color: $ui-black;
-  border-top: 1px solid $white-10;
 }

 .sectionList {
  display: flex;
  flex-direction: column;
-  gap: 0.75rem;
+  gap: 2rem;
+  padding-right: 0.5rem;
 }

 .info {
@@ -4,7 +4,6 @@ import { FormEvent, memo } from 'react';
 import { IoClose } from 'react-icons/io5';
 import { useSearchParams } from 'react-router';

-import { viewLabels } from '../../../viewerConfig';
 import useViewSettings from '../../hooks-query/useViewSettings';
 import { useIsSmallScreen } from '../../hooks/useIsSmallScreen';
 import { useSavedViewParams } from '../../stores/savedViewParams';
@@ -72,17 +71,8 @@ function ViewParamsEditor({ target, viewOptions }: EditFormDrawerProps) {
        <Dialog.Backdrop className={style.backdrop} />
        <Dialog.Popup className={style.drawer}>
          <div className={style.header}>
-            <div className={style.headerText}>
-              <Dialog.Title className={style.title}>Customise</Dialog.Title>
-              <span className={style.target}>{viewLabels[target]}</span>
-            </div>
-            <IconButton
-              variant='subtle-white'
-              size='large'
-              aria-label='Close'
-              data-testid='close-view-params'
-              onClick={handleClose}
-            >
+            <Dialog.Title>Customise</Dialog.Title>
+            <IconButton variant='subtle-white' size='large' data-testid='close-view-params' onClick={handleClose}>
              <IoClose />
            </IconButton>
          </div>
@@ -1,21 +1,10 @@
 .presetSection {
  background-color: $gray-1350;
-  border: 1px solid $white-10;
-  border-radius: $component-border-radius-md;
-  margin-bottom: 0.75rem;
-}
-
-.header {
-  padding: 0.5rem 1rem;
-  min-height: 2.25rem;
  display: flex;
-  align-items: center;
-
-  color: $gray-300;
-}
-
-.presetList {
-  border-top: 1px solid $white-7;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 1rem 0.5rem;
+  margin-bottom: 1rem;
  max-height: 10rem;
  overflow-y: auto;
  scrollbar-gutter: stable;
@@ -25,39 +14,12 @@
  display: flex;
  align-items: center;
  gap: 0.5rem;
-  min-height: 2.5rem;
-  padding: 0.375rem 1rem;
-  font-size: $inner-section-text-size;
-
-  &:not(:last-child) {
-    border-bottom: 1px solid $white-7;
-  }

  &.active {
-    background-color: $bg-active;
-    box-shadow: inset 3px 0 $blue-400;
-    color: $ui-white;
-    font-weight: 600;
+    color: $blue-500;
  }
 }

-.presetName {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .presetActions {
  margin-left: auto;
 }
-
-.current {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  margin-left: auto;
-  color: $blue-400;
-  font-size: $aux-text-size;
-  font-weight: 600;
-}
@@ -4,7 +4,6 @@ import { useSearchParams } from 'react-router';
 import { useViewUrlPresets } from '../../hooks-query/useUrlPresets';
 import { cx } from '../../utils/styleUtils';
 import Button from '../buttons/Button';
-import Eyebrow from '../eyebrow/Eyebrow';

 import style from './ViewParamsPresets.module.scss';

@@ -27,31 +26,22 @@ export function ViewParamsPresets({ target }: { target: OntimeView }) {

  return (
    <div className={style.presetSection}>
-      <div className={style.header}>
-        <Eyebrow>Saved presets</Eyebrow>
-      </div>
-      <div className={style.presetList}>
-        {viewPresets.map((preset) => {
-          const active = searchParams.get('alias') === preset.alias;
-          return (
-            <div key={preset.alias} className={cx([style.preset, active && style.active])}>
-              <span className={style.presetName}>{preset.alias}</span>
-              {active ? (
-                <span className={style.current}>Current</span>
-              ) : (
-                <Button
-                  variant='ghosted'
-                  size='small'
-                  onClick={() => handleRecall(preset)}
-                  className={style.presetActions}
-                >
-                  Apply
-                </Button>
-              )}
-            </div>
-          );
-        })}
-      </div>
+      {viewPresets.map((preset) => {
+        const active = searchParams.get('alias') === preset.alias;
+        return (
+          <div key={preset.alias} className={cx([style.preset, active && style.active])}>
+            <div>{preset.alias}</div>
+            <Button
+              variant={active ? 'ghosted' : 'subtle-white'}
+              onClick={() => handleRecall(preset)}
+              disabled={active}
+              className={style.presetActions}
+            >
+              {active ? 'Applied' : 'Apply'}
+            </Button>
+          </div>
+        );
+      })}
    </div>
  );
 }
@@ -1,118 +1,48 @@
 .section {
-  overflow: hidden;
-
  color: $ui-white;
  font-size: 1rem;
-  background-color: $white-3;
-  border: 1px solid $gray-1100;
-  border-radius: $component-border-radius-md;
 }

 .sectionHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
-  gap: 0.5rem;
-  width: 100%;
-  min-height: 2.75rem;
-  padding: 0.5rem 1rem;
-
-  background: transparent;
-  border: 0;
-  font: inherit;
-  text-align: left;
-
-  color: $gray-300;
+  height: 2rem;

  &.collapsible {
    cursor: pointer;
-    transition-property: color, background-color;
-    transition-duration: $transition-time-action;
-
-    &:hover {
-      background-color: $white-3;
-      color: $ui-white;
-    }
-
-    &:focus-visible {
-      outline: 2px solid $blue-500;
-      outline-offset: -2px;
-    }
  }
 }

-.sectionTitle {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-/** marks a section which holds values coming from the URL */
-.customised {
-  width: 0.4rem;
-  height: 0.4rem;
-  border-radius: 50%;
-  background-color: $active-indicator;
-  flex-shrink: 0;
-}
-
-.chevron {
-  flex-shrink: 0;
-  rotate: 180deg;
-  transition: rotate 300ms cubic-bezier(0.45, 1.005, 0, 1.005);
-
-  &.closed {
-    rotate: 0deg;
-  }
-}
-
-.options {
-  padding-inline: 1rem;
-  border-top: 1px solid $white-7;
-}
-
 .label {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  row-gap: 0.25rem;
-  padding: 0.75rem 0;
+  margin-top: $section-spacing;
  font-size: $inner-section-text-size;
-
-  &:not(:last-child) {
-    border-bottom: 1px solid $white-7;
-  }
-}
-
-/**
- * Compact controls sit beside their label instead of below it.
- * Placement is done with grid areas so that the markup stays flat.
- */
-.inline {
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: center;
-  column-gap: 1rem;
-
-  > .title {
-    grid-area: 1 / 1;
-  }
-
-  > .description {
-    grid-area: 2 / 1;
-  }
-
-  > *:last-child {
-    grid-area: 1 / 2 / span 2;
-  }
+  color: $label-gray;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
 }

 .title {
-  color: $ui-white;
+  font-size: $inner-section-text-size;
+  display: block;
+  width: 100%;
 }

 .description {
-  color: $gray-400;
-  font-size: $aux-text-size;
-  line-height: 1.4;
+  font-size: $inner-section-text-size;
+  display: block;
+  color: $modal-note-color;
+}
+
+.closed {
+  transition: rotate 300ms cubic-bezier(0.45, 1.005, 0, 1.005);
+  rotate: 0deg;
+}
+
+.open {
+  transition: rotate 300ms cubic-bezier(0.45, 1.005, 0, 1.005);
+  rotate: 180deg;
 }

 .hidden {
@@ -1,9 +1,7 @@
 import { useLocalStorage } from '@mantine/hooks';
 import { IoChevronDown } from 'react-icons/io5';
-import { useSearchParams } from 'react-router';

 import { cx } from '../../utils/styleUtils';
-import Eyebrow from '../eyebrow/Eyebrow';
 import { OptionTitle } from './constants';
 import ParamInput from './ParamInput';
 import { type ParamField } from './viewParams.types';
@@ -16,74 +14,50 @@ interface ViewParamsSectionProps {
  options: ParamField[];
 }

-/** Fields which are compact enough to share a row with their label */
-function isInlineField(option: ParamField): boolean {
-  return option.type === 'boolean' || option.type === 'colour';
-}
-
 export default function ViewParamsSection({ title, collapsible, options }: ViewParamsSectionProps) {
  const [collapsed, setCollapsed] = useLocalStorage({ key: `params-${title}`, defaultValue: false });
-  const [searchParams] = useSearchParams();

-  // hidden options are inputs without a UI, there is nothing to frame them with
-  if (title === OptionTitle.Hidden) {
-    return <HiddenContents options={options} />;
-  }
-
-  const isCollapsed = Boolean(collapsible && collapsed);
+  const handleCollapse = () => {
+    if (collapsible) {
+      setCollapsed((prev) => !prev);
+    }
+  };

  return (
    <section className={style.section}>
-      <SectionHeader
-        title={title}
-        isCustomised={options.some((option) => searchParams.has(option.id))}
-        collapsed={isCollapsed}
-        onToggle={collapsible ? () => setCollapsed((prev) => !prev) : undefined}
-      />
-      {/* collapsed options stay mounted: the form reads its values from the DOM */}
-      <div className={cx([style.options, isCollapsed && style.hidden])}>
-        {options.map((option) => (
-          <label key={option.title} className={cx([style.label, isInlineField(option) && style.inline])}>
-            <span className={style.title}>{option.title}</span>
-            <span className={style.description}>{option.description}</span>
-            <ParamInput paramField={option} />
-          </label>
-        ))}
-      </div>
+      {title === OptionTitle.Hidden ? (
+        <HiddenContents options={options} />
+      ) : (
+        <>
+          <div className={cx([style.sectionHeader, collapsible && style.collapsible])} onClick={handleCollapse}>
+            {title}
+            {collapsible && <IoChevronDown className={cx([collapsed ? style.closed : style.open])} />}
+          </div>
+          <SectionContents options={options} collapsed={collapsed} />
+        </>
+      )}
    </section>
  );
 }

-interface SectionHeaderProps {
-  title: string;
-  isCustomised: boolean;
+interface SectionContentsProps {
+  options: ParamField[];
  collapsed: boolean;
-  /** a header without a toggle belongs to a section which cannot collapse */
-  onToggle?: () => void;
 }

-function SectionHeader({ title, isCustomised, collapsed, onToggle }: SectionHeaderProps) {
-  const label = (
-    <Eyebrow className={style.sectionTitle}>
-      {title}
-      {isCustomised && <span className={style.customised} title='Contains custom values' />}
-    </Eyebrow>
-  );
-
-  if (!onToggle) {
-    return <div className={style.sectionHeader}>{label}</div>;
-  }
-
+function SectionContents({ options, collapsed }: SectionContentsProps) {
  return (
-    <button
-      type='button'
-      className={cx([style.sectionHeader, style.collapsible])}
-      aria-expanded={!collapsed}
-      onClick={onToggle}
-    >
-      {label}
-      <IoChevronDown className={cx([style.chevron, collapsed && style.closed])} />
-    </button>
+    <>
+      {options.map((option) => {
+        return (
+          <label key={option.title} className={cx([style.label, collapsed && style.hidden])}>
+            <span className={style.title}>{option.title}</span>
+            <span className={style.description}>{option.description}</span>
+            <ParamInput paramField={option} />
+          </label>
+        );
+      })}
+    </>
  );
 }

@@ -4,10 +4,6 @@ export function isKeyEnter<T>(event: KeyboardEvent<T>): boolean {
  return event.key === 'Enter';
 }

-export function isKeySpace<T>(event: KeyboardEvent<T>): boolean {
-  return event.key === ' ' || event.code === 'Space';
-}
-
 export function isKeyEscape<T>(event: KeyboardEvent<T>): boolean {
  return event.key === 'Escape';
 }
@@ -1,3 +1,5 @@
+import { AppMode } from '../ontimeConfig';
+
 declare module '*.scss' {
  const content: Record<string, string>;
  export default content;
@@ -30,6 +32,39 @@ declare global {
  }
 }

+/**
+ * Declare custom data we pass to the table
+ * - `handleUpdate` callback to update the entry when the user edits a cell
+ * - `handleUpdateTimer` callback to update the timer for a specific event
+ * - `options-showDelayedTimes` whether to show or hide delayed times
+ * - `options-hideTableSeconds` whether to hide seconds in the table
+ * - `options-hideIndexColumn` whether to hide the index column
+ * - `options-cuesheetMode` run or edit mode
+ *
+ * And metadata specific for each column
+ * - `canWrite` whether the user can write to this column
+ * - `colour` background colour associated with a custom field
+ */
+declare module '@tanstack/react-table' {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface TableMeta<TData extends RowData> {
+    handleUpdate: (rowIndex: number, accessor: string, payload: string, isCustom: boolean) => void;
+    handleUpdateTimer: (eventId: string, field: TimeField, payload: string) => void;
+    options: {
+      showDelayedTimes: boolean;
+      hideTableSeconds: boolean;
+      hideIndexColumn: boolean;
+      cuesheetMode: AppMode;
+    };
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface ColumnMeta<TData extends RowData, TValue> {
+    canWrite: boolean;
+    colour?: string;
+  }
+}
+
 /**
 * Allow passing CSS Properties
 */
@@ -53,7 +53,7 @@ ul {
  &.active {
    color: $ui-white;
    border-left-color: $blue-400;
-    background-color: $bg-active;
+    background-color: rgba($blue-500, 0.16);
    font-weight: 600;
  }

@@ -79,7 +79,7 @@ ul {
  &.active {
    color: $ui-white;
    border-left-color: $blue-400;
-    background-color: $bg-active;
+    background-color: rgba($blue-500, 0.16);
    font-weight: 600;
  }
 }
@@ -124,7 +124,7 @@ $card-padding: 2rem;
  // active rows use a panel-local class today; keep the treatment here so all
  // settings tables share the same state without each panel owning its colours
  tr[class*='current'] {
-    background-color: $bg-active;
+    background-color: rgba($blue-500, 0.16);

    > td:first-child {
      box-shadow: inset 3px 0 $blue-400;
@@ -200,7 +200,8 @@ $card-padding: 2rem;
 .overlay {
  position: absolute;
  z-index: $zindex-backdrop;
-  inset: 0;
+  width: 100%;
+  height: 100%;
  backdrop-filter: blur(2px);
  display: grid;
  place-content: center;
@@ -1,7 +0,0 @@
-.updateIndicator {
-  width: 0.5em;
-  height: 0.5em;
-  flex: 0 0 auto;
-  border-radius: 99px;
-  background-color: $red-400;
-}
@@ -3,8 +3,6 @@ import useAppVersion from '../../../../common/hooks-query/useAppVersion';
 import { appVersion, isOntimeCloud, websiteUrl } from '../../../../externals';
 import * as Panel from '../../panel-utils/PanelUtils';

-import style from './AppVersion.module.scss';
-
 export default function AppVersion() {
  const { data, isError } = useAppVersion();

@@ -20,12 +18,7 @@ export default function AppVersion() {
    return (
      <Panel.ListItem>
        <Panel.Field
-          title={
-            <>
-              <span className={style.updateIndicator} aria-hidden='true' />
-              {`Ontime ${appVersion}`}
-            </>
-          }
+          title={`Ontime ${appVersion}`}
          description={
            isOntimeCloud
              ? `Version ${data.version} is available. Restart your stage to update.`
@@ -33,7 +26,7 @@ export default function AppVersion() {
          }
        />
        {!isOntimeCloud && (
-          <ExternalLink href={websiteUrl}>Download the latest version from Ontime's page</ExternalLink>
+          <ExternalLink href={websiteUrl}>Visit Ontime's page to download the latest version.</ExternalLink>
        )}
      </Panel.ListItem>
    );
@@ -12,21 +12,20 @@ import { useUpdateUrlPreset } from '../../../../../common/hooks-query/useUrlPres
 import { isUrlSafe } from '../../../../../common/utils/regex';
 import { enDash } from '../../../../../common/utils/styleUtils';
 import { generateUrlPresetOptions } from '../../../../../common/utils/urlPresets';
-import { viewLabels } from '../../../../../viewerConfig';
 import CuesheetLinkOptions, { CuesheetPermissionValues } from '../../../../sharing/composite/CuesheetLinkOptions';
 import * as Panel from '../../../panel-utils/PanelUtils';

 import style from './URLPresetForm.module.scss';

 const targetOptions: SelectOption<OntimeViewPresettable>[] = [
-  { value: OntimeView.Cuesheet, label: viewLabels[OntimeView.Cuesheet] },
-  { value: OntimeView.Operator, label: viewLabels[OntimeView.Operator] },
-  { value: OntimeView.Timer, label: viewLabels[OntimeView.Timer] },
-  { value: OntimeView.Backstage, label: viewLabels[OntimeView.Backstage] },
-  { value: OntimeView.Timeline, label: viewLabels[OntimeView.Timeline] },
-  { value: OntimeView.StudioClock, label: viewLabels[OntimeView.StudioClock] },
-  { value: OntimeView.Countdown, label: viewLabels[OntimeView.Countdown] },
-  { value: OntimeView.ProjectInfo, label: viewLabels[OntimeView.ProjectInfo] },
+  { value: OntimeView.Cuesheet, label: 'Cuesheet' },
+  { value: OntimeView.Operator, label: 'Operator' },
+  { value: OntimeView.Timer, label: 'Timer' },
+  { value: OntimeView.Backstage, label: 'Backstage' },
+  { value: OntimeView.Timeline, label: 'Timeline' },
+  { value: OntimeView.StudioClock, label: 'Studio Clock' },
+  { value: OntimeView.Countdown, label: 'Countdown' },
+  { value: OntimeView.ProjectInfo, label: 'Project Info' },
 ];

 const formId = 'url-preset-form';
@@ -85,10 +85,10 @@ export default function ServerPortSettings() {
            </Button>
          </Panel.InlineElements>
        </Panel.SubHeader>
+        <Panel.Loader isLoading={status === 'pending'} />
        {rootError && <Panel.Error>{rootError}</Panel.Error>}
        <Panel.Divider />
        <Panel.Section>
-          <Panel.Loader isLoading={status === 'pending'} />
          {data.pendingRestart && (
            <Info type='warning'>A port change is pending and will happen on the next restart.</Info>
          )}
@@ -1,14 +1,15 @@
+import type { ColumnDef } from '@tanstack/react-table';
 import type { CustomFields } from 'ontime-types';

+import type { ExtendedEntry } from '../../../common/utils/rundownMetadata';
 import { AppMode } from '../../../ontimeConfig';
 import { makeCuesheetColumns } from '../../../views/cuesheet/cuesheet-table/cuesheet-table-elements/cuesheetColsFactory';
-import type { CuesheetColumnDef } from '../../../views/cuesheet/cuesheet-table/cuesheetTable.features';

 /**
 * Creates column definitions for the rundown table
 * Reuses cuesheetColsFactory with preset=undefined for full access
 */
-export function makeRundownColumns(customFields: CustomFields): CuesheetColumnDef[] {
+export function makeRundownColumns(customFields: CustomFields): ColumnDef<ExtendedEntry>[] {
  // When preset=undefined, factory defaults to fullRead=true, fullWrite=true
  // canWrite is determined by editorMode (AppMode.Edit vs AppMode.Run)
  return makeCuesheetColumns(customFields, AppMode.Edit, undefined);
@@ -48,7 +48,6 @@ $playback-under: $green-500;
 // interface panels
 $bg-container-l1: $gray-1350;
 $bg-container-l2: $gray-1300;
-$bg-active: rgba($action-blue, 0.16);

 $backdrop-color: rgba(0, 0, 0, 0.7);
 $box-shadow-l1: rgba(0, 0, 0, 0.15) 0 3px 3px 0;
@@ -1,30 +1,12 @@
-import { OntimeView } from 'ontime-types';
-
-/** User facing name of each view, the single source for view naming in the UI */
-export const viewLabels: Record<OntimeView, string> = {
-  [OntimeView.Editor]: 'Editor',
-  [OntimeView.Cuesheet]: 'Cuesheet',
-  [OntimeView.Operator]: 'Operator',
-  [OntimeView.Timer]: 'Timer',
-  [OntimeView.Backstage]: 'Backstage',
-  [OntimeView.Timeline]: 'Timeline',
-  [OntimeView.StudioClock]: 'Studio Clock',
-  [OntimeView.Countdown]: 'Countdown',
-  [OntimeView.ProjectInfo]: 'Project Info',
-};
-
-/** Views offered in the navigation menu, in the order they are shown. Their value is also their route */
-const navigatorViews = [
-  OntimeView.Timer,
-  OntimeView.Backstage,
-  OntimeView.Timeline,
-  OntimeView.StudioClock,
-  OntimeView.Countdown,
-  OntimeView.ProjectInfo,
+export const navigatorConstants = [
+  { url: 'timer', label: 'Timer' },
+  { url: 'backstage', label: 'Backstage' },
+  { url: 'timeline', label: 'Timeline' },
+  { url: 'studio', label: 'Studio Clock' },
+  { url: 'countdown', label: 'Countdown' },
+  { url: 'info', label: 'Project Info' },
 ];

-export const navigatorConstants = navigatorViews.map((view) => ({ url: view, label: viewLabels[view] }));
-
 // default time format to use for users in 12 hour clocks
 export const FORMAT_12 = 'h:mm:ss a';
 // default time format to use for users in 24 hour clocks
@@ -7,13 +7,14 @@ import {
  useSensor,
  useSensors,
 } from '@dnd-kit/core';
+import { ColumnDef } from '@tanstack/react-table';
 import { PropsWithChildren } from 'react';

-import type { CuesheetColumnDef } from '../cuesheet-table/cuesheetTable.features';
+import type { ExtendedEntry } from '../../../common/utils/rundownMetadata';
 import { useColumnOrder } from '../cuesheet-table/useColumnManager';

 interface CuesheetDndProps {
-  columns: CuesheetColumnDef[];
+  columns: ColumnDef<ExtendedEntry>[];
  tableRoot?: 'editor' | 'cuesheet';
 }

@@ -1,5 +1,5 @@
 import { useTableNav } from '@table-nav/react';
-import { useTable } from '@tanstack/react-table';
+import { ColumnDef, Table, getCoreRowModel, useReactTable } from '@tanstack/react-table';
 import { OntimeEntry, SupportedEntry, TimeField, isOntimeDelay, isOntimeGroup, isOntimeMilestone } from 'ontime-types';
 import { ComponentProps, ReactNode, memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import {
@@ -29,17 +29,12 @@ import GroupRow from './cuesheet-table-elements/GroupRow';
 import MilestoneRow from './cuesheet-table-elements/MilestoneRow';
 import TableMenu from './cuesheet-table-menu/TableMenu';
 import CuesheetTableHeaderToolbar from './cuesheet-table-settings/CuesheetTableHeaderToolbar';
-import {
-  CuesheetColumnDef,
-  CuesheetTable as CuesheetTableInstance,
-  cuesheetTableFeatures,
-} from './cuesheetTable.features';
 import { useColumnOrder, useColumnSizes, useColumnVisibility } from './useColumnManager';

 import style from './CuesheetTable.module.scss';

 type CuesheetTableBaseProps = {
-  columns: CuesheetColumnDef[];
+  columns: ColumnDef<ExtendedEntry>[];
  cuesheetMode: AppMode;
  source: RundownSource;
  insertElement?: ReactNode;
@@ -125,8 +120,7 @@ export default function CuesheetTable({
  const { columnSizing, setColumnSizing } = useColumnSizes(tableRoot);
  const { columnVisibility, setColumnVisibility } = useColumnVisibility(tableRoot);

-  const table = useTable({
-    features: cuesheetTableFeatures,
+  const table = useReactTable({
    data: flatRundown,
    columns,
    columnResizeMode: 'onChange',
@@ -137,6 +131,7 @@ export default function CuesheetTable({
    },
    onColumnVisibilityChange: setColumnVisibility,
    onColumnSizingChange: setColumnSizing,
+    getCoreRowModel: getCoreRowModel(),
    meta,
  });

@@ -200,7 +195,7 @@ export default function CuesheetTable({
    return colSizes;
    // eslint-disable-next-line react-compiler/react-compiler -- unfortunately this is what we need
    // eslint-disable-next-line react-hooks/exhaustive-deps -- this works well and follows documentation
-  }, [columns, table.state.columnResizing, table.state.columnSizing]);
+  }, [table.getState().columnSizingInfo, table.getState().columnSizing]);

  const allLeafColumns = table.getAllLeafColumns();
  const { rows } = table.getRowModel();
@@ -219,7 +214,9 @@ export default function CuesheetTable({
  const computeItemKey = useCallback((_: number, item: ExtendedEntry) => item.id, []);
  const fixedHeaderContent = useCallback(() => {
    return table.getHeaderGroups().map((headerGroup) => {
-      const HeaderComponent = table.state.columnResizing.isResizingColumn ? CuesheetHeader : SortableCuesheetHeader;
+      const HeaderComponent = table.getState().columnSizingInfo.isResizingColumn
+        ? CuesheetHeader
+        : SortableCuesheetHeader;

      // if the table is being resized, we render non-sortable headers to avoid performance issues
      return (
@@ -282,8 +279,8 @@ interface CuesheetVirtuosoContext {
  columnSizeVars: { [key: string]: number };
  cursor: string | null;
  listeners: ReturnType<typeof useTableNav>['listeners'];
-  rows: ReturnType<CuesheetTableInstance['getRowModel']>['rows'];
-  table: CuesheetTableInstance;
+  rows: ReturnType<Table<ExtendedEntry>['getRowModel']>['rows'];
+  table: Table<ExtendedEntry>;
  handleAddNew?: (type: SupportedEntry) => void;
 }

@@ -1,16 +1,16 @@
 import { SortableContext, horizontalListSortingStrategy } from '@dnd-kit/sortable';
-import { FlexRender } from '@tanstack/react-table';
+import { HeaderGroup, flexRender } from '@tanstack/react-table';
 import { CSSProperties } from 'react';

+import type { ExtendedEntry } from '../../../../common/utils/rundownMetadata';
 import { getAccessibleColour } from '../../../../common/utils/styleUtils';
 import { AppMode } from '../../../../ontimeConfig';
-import type { CuesheetHeaderGroup } from '../cuesheetTable.features';
 import { Draggable, SortableCell, TableCell } from './SortableCell';

 import style from '../CuesheetTable.module.scss';

 interface CuesheetHeaderProps {
-  headerGroup: CuesheetHeaderGroup;
+  headerGroup: HeaderGroup<ExtendedEntry>;
  cuesheetMode: AppMode;
  hideIndexColumn: boolean;
 }
@@ -46,7 +46,7 @@ export function SortableCuesheetHeader({ headerGroup, cuesheetMode, hideIndexCol
              injectedStyles={{ width: `calc(var(--header-${header?.id}-size) * 1px)`, ...customStyles }}
              draggable={<Draggable header={header} />}
            >
-              {header.isPlaceholder ? null : <FlexRender header={header} />}
+              {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
            </SortableCell>
          );
        })}
@@ -85,7 +85,7 @@ export function CuesheetHeader({ headerGroup, cuesheetMode, hideIndexColumn }: C
            injectedStyles={{ width: `calc(var(--header-${header?.id}-size) * 1px)`, ...customStyles }}
            draggable={<Draggable header={header} />}
          >
-            {header.isPlaceholder ? null : <FlexRender header={header} />}
+            {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
          </TableCell>
        );
      })}
@@ -1,14 +1,14 @@
-import { FlexRender } from '@tanstack/react-table';
-import { EntryId, RGBColour, SupportedEntry } from 'ontime-types';
+import { Table, flexRender } from '@tanstack/react-table';
+import { EntryId, OntimeEntry, RGBColour, SupportedEntry } from 'ontime-types';
 import { colourToHex, cssOrHexToColour } from 'ontime-utils';
 import { CSSProperties, memo, useMemo } from 'react';
 import { IoEllipsisHorizontal } from 'react-icons/io5';

 import IconButton from '../../../../common/components/buttons/IconButton';
+import type { ExtendedEntry } from '../../../../common/utils/rundownMetadata';
 import { cx, getAccessibleColour } from '../../../../common/utils/styleUtils';
 import { AppMode } from '../../../../ontimeConfig';
 import { useCuesheetTableMenu } from '../cuesheet-table-menu/useCuesheetTableMenu';
-import type { CuesheetTable } from '../cuesheetTable.features';

 import style from './EventRow.module.scss';

@@ -25,7 +25,7 @@ interface EventRowProps {
  skip: boolean;
  parent: EntryId | null;
  rowIndex: number;
-  table: CuesheetTable;
+  table: Table<ExtendedEntry<OntimeEntry>>;
  injectedStyles?: CSSProperties;
  hasCursor?: boolean;
 }
@@ -133,7 +133,7 @@ function EventRow({
              data-testid={`cuesheet-cell-${cell.column.id}`}
              data-column-id={cell.column.id}
            >
-              <FlexRender cell={cell} />
+              {flexRender(cell.column.columnDef.cell, cell.getContext())}
            </td>
          );
        })}
@@ -1,12 +1,12 @@
-import { FlexRender } from '@tanstack/react-table';
+import { Table, flexRender } from '@tanstack/react-table';
 import { EntryId, SupportedEntry } from 'ontime-types';
 import { CSSProperties, memo } from 'react';
 import { IoEllipsisHorizontal } from 'react-icons/io5';

 import IconButton from '../../../../common/components/buttons/IconButton';
+import type { ExtendedEntry } from '../../../../common/utils/rundownMetadata';
 import { AppMode } from '../../../../ontimeConfig';
 import { useCuesheetTableMenu } from '../cuesheet-table-menu/useCuesheetTableMenu';
-import type { CuesheetTable } from '../cuesheetTable.features';

 import style from './GroupRow.module.scss';

@@ -15,7 +15,7 @@ interface GroupRowProps {
  colour: string;
  rowId: string;
  rowIndex: number;
-  table: CuesheetTable;
+  table: Table<ExtendedEntry>;
  injectedStyles?: CSSProperties;
  hasCursor?: boolean;
 }
@@ -76,7 +76,7 @@ function GroupRow({
              }}
              role='cell'
            >
-              <FlexRender cell={cell} />
+              {flexRender(cell.column.columnDef.cell, cell.getContext())}
            </td>
          );
        })}
@@ -1,14 +1,14 @@
-import { FlexRender } from '@tanstack/react-table';
+import { Table, flexRender } from '@tanstack/react-table';
 import { EntryId, SupportedEntry } from 'ontime-types';
 import { colourToHex, cssOrHexToColour } from 'ontime-utils';
 import { CSSProperties, memo, useMemo } from 'react';
 import { IoEllipsisHorizontal } from 'react-icons/io5';

 import IconButton from '../../../../common/components/buttons/IconButton';
+import type { ExtendedEntry } from '../../../../common/utils/rundownMetadata';
 import { cx, enDash, getAccessibleColour } from '../../../../common/utils/styleUtils';
 import { AppMode } from '../../../../ontimeConfig';
 import { useCuesheetTableMenu } from '../cuesheet-table-menu/useCuesheetTableMenu';
-import type { CuesheetTable } from '../cuesheetTable.features';

 import style from './MilestoneRow.module.scss';

@@ -20,7 +20,7 @@ interface MilestoneRowProps {
  colour: string;
  rowId: string;
  rowIndex: number;
-  table: CuesheetTable;
+  table: Table<ExtendedEntry>;
  injectedStyles?: CSSProperties;
  hasCursor?: boolean;
 }
@@ -102,7 +102,7 @@ function MilestoneRow({
              }}
              tabIndex={-1}
            >
-              {canRender && <FlexRender cell={cell} />}
+              {canRender && flexRender(cell.column.columnDef.cell, cell.getContext())}
            </td>
          );
        })}
@@ -1,8 +1,9 @@
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
+import { Header } from '@tanstack/react-table';
 import { CSSProperties, ReactNode } from 'react';

-import type { CuesheetHeaderCell } from '../cuesheetTable.features';
+import type { ExtendedEntry } from '../../../../common/utils/rundownMetadata';

 import style from '../CuesheetTable.module.scss';

@@ -47,7 +48,7 @@ export function TableCell({ colSpan, injectedStyles, children, draggable }: Sort
 }

 interface DraggableProps {
-  header: CuesheetHeaderCell;
+  header: Header<ExtendedEntry, unknown>;
 }

 export function Draggable({ header }: DraggableProps) {
@@ -1,3 +1,4 @@
+import { CellContext, ColumnDef } from '@tanstack/react-table';
 import { CustomFields, TimeStrategy, URLPreset, isOntimeDelay, isOntimeEvent } from 'ontime-types';
 import { millisToString } from 'ontime-utils';
 import { useCallback } from 'react';
@@ -7,7 +8,6 @@ import type { ExtendedEntry } from '../../../../common/utils/rundownMetadata';
 import { formatDuration, formatTime } from '../../../../common/utils/time';
 import { AppMode } from '../../../../ontimeConfig';
 import { getCuesheetColumnAccessPolicy } from '../../cuesheet.policies';
-import type { CuesheetCellContext, CuesheetColumnDef } from '../cuesheetTable.features';
 import DurationInput from './DurationInput';
 import EditableImage from './EditableImage';
 import FlagCell from './FlagCell';
@@ -17,11 +17,11 @@ import MutedText from './MutedText';
 import SingleLineCell from './SingleLineCell';
 import TimeInput from './TimeInput';

-function getColumnLabel(column: CuesheetCellContext['column']): string {
+function getColumnLabel(column: CellContext<ExtendedEntry, unknown>['column']): string {
  return typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id;
 }

-function MakeStart({ getValue, row, table, column }: CuesheetCellContext) {
+function MakeStart({ getValue, row, table, column }: CellContext<ExtendedEntry, unknown>) {
  if (!table.options.meta) {
    return null;
  }
@@ -60,7 +60,7 @@ function MakeStart({ getValue, row, table, column }: CuesheetCellContext) {
  );
 }

-function MakeEnd({ getValue, row, table, column }: CuesheetCellContext) {
+function MakeEnd({ getValue, row, table, column }: CellContext<ExtendedEntry, unknown>) {
  if (!table.options.meta) {
    return null;
  }
@@ -100,7 +100,7 @@ function MakeEnd({ getValue, row, table, column }: CuesheetCellContext) {
  );
 }

-function MakeDuration({ getValue, row, table, column }: CuesheetCellContext) {
+function MakeDuration({ getValue, row, table, column }: CellContext<ExtendedEntry, unknown>) {
  if (!table.options.meta) {
    return null;
  }
@@ -131,7 +131,7 @@ function MakeDuration({ getValue, row, table, column }: CuesheetCellContext) {
  );
 }

-function MakeMultiLineField({ row, column, table }: CuesheetCellContext) {
+function MakeMultiLineField({ row, column, table }: CellContext<ExtendedEntry, unknown>) {
  const update = useCallback(
    (newValue: string) => {
      table.options.meta?.handleUpdate(row.index, column.id, newValue, false);
@@ -160,7 +160,7 @@ function MakeMultiLineField({ row, column, table }: CuesheetCellContext) {
  );
 }

-function LazyImage({ row, column, table }: CuesheetCellContext) {
+function LazyImage({ row, column, table }: CellContext<ExtendedEntry, unknown>) {
  const update = useCallback(
    (newValue: string) => {
      table.options.meta?.handleUpdate(row.index, column.id, newValue, true);
@@ -178,7 +178,7 @@ function LazyImage({ row, column, table }: CuesheetCellContext) {
  return <EditableImage initialValue={initialValue} updateValue={update} readOnly={!canWrite} />;
 }

-function MakeSingleLineField({ row, column, table }: CuesheetCellContext) {
+function MakeSingleLineField({ row, column, table }: CellContext<ExtendedEntry, unknown>) {
  const update = useCallback(
    (newValue: string) => {
      table.options.meta?.handleUpdate(row.index, column.id, newValue, false);
@@ -207,7 +207,7 @@ function MakeSingleLineField({ row, column, table }: CuesheetCellContext) {
  );
 }

-function MakeFlagField({ row }: CuesheetCellContext) {
+function MakeFlagField({ row }: CellContext<ExtendedEntry, unknown>) {
  const event = row.original;
  if (!isOntimeEvent(event) || !event.flag) {
    return null;
@@ -215,7 +215,7 @@ function MakeFlagField({ row }: CuesheetCellContext) {
  return <FlagCell />;
 }

-function MakeCustomField({ row, column, table }: CuesheetCellContext) {
+function MakeCustomField({ row, column, table }: CellContext<ExtendedEntry, unknown>) {
  const update = useCallback(
    (newValue: string) => {
      table.options.meta?.handleUpdate(row.index, column.id, newValue, true);
@@ -255,8 +255,8 @@ export function makeCuesheetColumns(
  customFields: CustomFields,
  cuesheetMode: AppMode,
  preset: URLPreset | undefined,
-): CuesheetColumnDef[] {
-  const columnsDef: CuesheetColumnDef[] = [];
+): ColumnDef<ExtendedEntry>[] {
+  const columnsDef: ColumnDef<ExtendedEntry>[] = [];
  const { canRead, canWrite } = getCuesheetColumnAccessPolicy(preset, cuesheetMode);

  if (canRead('flag')) {
@@ -2,6 +2,7 @@ import { Popover } from '@base-ui/react/popover';
 import { Toggle } from '@base-ui/react/toggle';
 import { ToggleGroup } from '@base-ui/react/toggle-group';
 import { Toolbar } from '@base-ui/react/toolbar';
+import type { Column } from '@tanstack/react-table';
 import { ReactNode } from 'react';
 import { IoBookOutline, IoChevronDown, IoOptions } from 'react-icons/io5';

@@ -9,9 +10,9 @@ import Button from '../../../../common/components/buttons/Button';
 import Checkbox from '../../../../common/components/checkbox/Checkbox';
 import * as Editor from '../../../../common/components/editor-utils/EditorUtils';
 import PopoverContents from '../../../../common/components/popover/Popover';
+import type { ExtendedEntry } from '../../../../common/utils/rundownMetadata';
 import { AppMode } from '../../../../ontimeConfig';
 import { useCuesheetPermissions } from '../../useTablePermissions';
-import type { CuesheetColumn } from '../cuesheetTable.features';
 import CuesheetShareModal from './CuesheetShareModal';

 import style from './CuesheetTableSettings.module.scss';
@@ -36,7 +37,7 @@ type TableModeControls = {
 };

 interface CuesheetTableHeaderToolbarProps {
-  columns: CuesheetColumn[];
+  columns: Column<ExtendedEntry, unknown>[];
  optionsStore: TableHeaderOptionsStore;
  handleResetResizing: () => void;
  handleResetReordering: () => void;
@@ -110,7 +111,7 @@ interface ViewSettingsProps {
 }

 interface ColumnSettingsProps {
-  columns: CuesheetColumn[];
+  columns: Column<ExtendedEntry, unknown>[];
  handleResetResizing: () => void;
  handleResetReordering: () => void;
  handleClearToggles: () => void;
@@ -202,7 +203,7 @@ function ColumnSettings({

            return (
              <Editor.Label key={`${column.id}-${visible}`} className={style.option}>
-                <Checkbox defaultChecked={visible} onCheckedChange={(checked) => column.toggleVisibility(checked)} />
+                <Checkbox defaultChecked={visible} onCheckedChange={column.toggleVisibility} />
                {columnHeader as ReactNode}
              </Editor.Label>
            );
@@ -12,7 +12,7 @@
  transition: background-color 0.2s ease-in-out;

  &[data-background-rundown='true'] {
-    background-color: $bg-active;
+    background-color: rgba($ontime-color, 0.5);

    .apart::before {
      content: 'BACKGROUND EDIT';
@@ -1,74 +0,0 @@
-import {
-  columnOrderingFeature,
-  columnResizingFeature,
-  columnSizingFeature,
-  columnVisibilityFeature,
-  metaHelper,
-  tableFeatures,
-} from '@tanstack/react-table';
-import type { CellContext, Column, ColumnDef, Header, HeaderGroup, Table } from '@tanstack/react-table';
-import type { TimeField } from 'ontime-types';
-
-import type { ExtendedEntry } from '../../../common/utils/rundownMetadata';
-import type { AppMode } from '../../../ontimeConfig';
-
-/**
- * Custom data we pass to the table
- * - `handleUpdate` callback to update the entry when the user edits a cell
- * - `handleUpdateTimer` callback to update the timer for a specific event
- * - `options-showDelayedTimes` whether to show or hide delayed times
- * - `options-hideTableSeconds` whether to hide seconds in the table
- * - `options-hideIndexColumn` whether to hide the index column
- * - `options-cuesheetMode` run or edit mode
- */
-export interface CuesheetTableMeta {
-  handleUpdate: (rowIndex: number, accessor: string, payload: string, isCustom: boolean) => void;
-  handleUpdateTimer: (eventId: string, field: TimeField, payload: string) => void;
-  options: {
-    showDelayedTimes: boolean;
-    hideTableSeconds: boolean;
-    hideIndexColumn: boolean;
-    cuesheetMode: AppMode;
-  };
-}
-
-/**
- * Metadata specific for each column
- * - `canWrite` whether the user can write to this column
- * - `colour` background colour associated with a custom field
- */
-export interface CuesheetColumnMeta {
-  canWrite: boolean;
-  colour?: string;
-}
-
-/**
- * Features registered in the cuesheet and rundown tables.
- * In v9 an API only exists once its feature is registered, so this list is the
- * source of truth for what the table can do:
- * - `columnOrderingFeature`: user reorders columns by dragging the headers
- * - `columnVisibilityFeature`: user toggles columns in the table settings
- * - `columnSizingFeature`: column widths, exposed to CSS as custom properties
- * - `columnResizingFeature`: the drag handle in the header (requires sizing)
- *
- * The `tableMeta` / `columnMeta` slots replace the v8 global module augmentation:
- * they scope our meta types to this table instead of every table in the app.
- */
-export const cuesheetTableFeatures = tableFeatures({
-  columnOrderingFeature,
-  columnVisibilityFeature,
-  columnSizingFeature,
-  columnResizingFeature,
-  tableMeta: metaHelper<CuesheetTableMeta>(),
-  columnMeta: metaHelper<CuesheetColumnMeta>(),
-});
-
-export type CuesheetFeatures = typeof cuesheetTableFeatures;
-
-/** Convenience aliases so consumers do not need to repeat the feature generic */
-export type CuesheetColumnDef = ColumnDef<CuesheetFeatures, ExtendedEntry>;
-export type CuesheetTable = Table<CuesheetFeatures, ExtendedEntry>;
-export type CuesheetCellContext = CellContext<CuesheetFeatures, ExtendedEntry>;
-export type CuesheetHeaderGroup = HeaderGroup<CuesheetFeatures, ExtendedEntry>;
-export type CuesheetHeaderCell = Header<CuesheetFeatures, ExtendedEntry, unknown>;
-export type CuesheetColumn = Column<CuesheetFeatures, ExtendedEntry, unknown>;
@@ -1,10 +1,10 @@
 import { useLocalStorage } from '@mantine/hooks';
-import { ColumnSizingState, Updater } from '@tanstack/react-table';
+import { ColumnDef, ColumnSizingState, Updater } from '@tanstack/react-table';
 import { useCallback, useEffect, useMemo, useState } from 'react';

 import { debounce } from '../../../common/utils/debounce';
 import { makeStageKey } from '../../../common/utils/localStorage';
-import type { CuesheetColumnDef } from './cuesheetTable.features';
+import type { ExtendedEntry } from '../../../common/utils/rundownMetadata';

 type TableRoot = 'editor' | 'cuesheet';

@@ -38,7 +38,7 @@ export function useColumnSizes(tableRoot: TableRoot = 'cuesheet') {
  };
 }

-export function useColumnOrder(columns: CuesheetColumnDef[], tableRoot: TableRoot = 'cuesheet') {
+export function useColumnOrder(columns: ColumnDef<ExtendedEntry>[], tableRoot: TableRoot = 'cuesheet') {
  const tableOrderKey = useMemo(() => makeStageKey(`${tableRoot}-table-order`), [tableRoot]);

  const [columnOrder, saveColumnOrder] = useLocalStorage<string[]>({
@@ -169,7 +169,7 @@ export const getTimerOptions = (timeFormat: string, customFields: CustomFields):
        {
          id: 'timerColour',
          title: 'Timer Colour',
-          description: 'Timer colour. Default: #F6F6F6',
+          description: 'Timer colour. Default: #f6f6f6',
          type: 'colour',
          defaultValue: 'f6f6f6',
        },
@@ -14,8 +14,8 @@
  "main": "src/main.js",
  "devDependencies": {
    "electron": "38.2.1",
-    "electron-builder": "26.15.3",
-    "wait-on": "^9.0.0"
+    "electron-builder": "26.9.1",
+    "wait-on": "^7.2.0"
  },
  "scripts": {
    "dev:electron": "wait-on http://localhost:3000 && cross-env NODE_ENV=development electron .",
@@ -100,7 +100,7 @@ function makeFileMenu(askToQuit, serverUrl, redirectWindow, showDialog, download
    submenu: [
      {
        label: 'New project...',
-        click: () => redirectWindow('/editor?settings=project__create'),
+        click: () => redirectWindow('/editor?settings=project__manage&new=true'),
      },
      {
        label: 'Load...',
@@ -202,18 +202,6 @@ function makeSettingsMenu(redirectWindow) {
            label: 'View settings',
            click: () => redirectWindow('/editor?settings=settings__view'),
          },
-          {
-            label: 'Custom views',
-            click: () => redirectWindow('/editor?settings=settings__custom-views'),
-          },
-          {
-            label: 'MCP Server',
-            click: () => redirectWindow('/editor?settings=settings__mcp'),
-          },
-          {
-            label: 'Server port',
-            click: () => redirectWindow('/editor?settings=settings__port'),
-          },
        ],
      },
      {
@@ -10,7 +10,7 @@
    "cookie": "1.0.2",
    "cookie-parser": "1.4.7",
    "cors": "2.8.6",
-    "dotenv": "^17.0.0",
+    "dotenv": "^16.0.1",
    "express": "5.2.1",
    "express-static-gzip": "3.0.1",
    "express-validator": "7.3.2",
@@ -31,11 +31,11 @@
    "@types/multer": "2.1.0",
    "@types/node": "catalog:",
    "@types/ws": "^8.5.10",
-    "esbuild": "^0.28.0",
+    "esbuild": "^0.24.0",
    "ontime-types": "workspace:*",
    "server-timing": "^3.3.3",
    "ts-essentials": "catalog:",
-    "tsx": "^4.23.12",
+    "tsx": "^4.19.2",
    "typescript": "catalog:",
    "vitest": "catalog:"
  },
@@ -1,7 +1,5 @@
-import { deepEqual } from 'fast-equals';
 import {
  EndAction,
-  OntimeEntry,
  OntimeEvent,
  OntimeGroup,
  OntimeMilestone,
@@ -10,21 +8,13 @@ import {
  TimerType,
  Trigger,
 } from 'ontime-types';
-import {
-  MILLIS_PER_HOUR,
-  MILLIS_PER_MINUTE,
-  createDelay,
-  createEvent,
-  createGroup,
-  createMilestone,
-} from 'ontime-utils';
+import { MILLIS_PER_HOUR, MILLIS_PER_MINUTE, createEvent } from 'ontime-utils';
 import { assertType } from 'vitest';

 import { makeOntimeEvent, makeOntimeGroup, makeOntimeMilestone, makeRundown } from '../__mocks__/rundown.mocks.js';
 import { parseRundown } from '../rundown.parser.js';
 import {
  calculateDayOffset,
-  cloneEntryData,
  deleteById,
  doesInvalidateMetadata,
  getIntegerAndFraction,
@@ -725,68 +715,3 @@ describe('eventDurationMatchGroupTarget()', () => {
    expect(result).toStrictEqual(null);
  });
 });
-
-describe('cloneEntryData()', () => {
-  const trigger: Trigger = {
-    id: 'trigger-1',
-    title: 'Go on air',
-    trigger: TimerLifeCycle.onStart,
-    automationId: 'automation-1',
-  };
-
-  // the real factories, so these are complete entries exactly as the rundown holds them
-  const entries: [string, OntimeEntry][] = [
-    ['event', createEvent({ custom: { sponsor: 'a value' }, triggers: [trigger] }, 'cue-1') as OntimeEvent],
-    ['group', createGroup({ id: 'group-1', entries: ['a', 'b'], custom: { sponsor: 'a value' } })],
-    ['milestone', createMilestone({ id: 'milestone-1', custom: { sponsor: 'a value' } })],
-    ['delay', createDelay({ id: 'delay-1', duration: 10 })],
-  ];
-
-  /**
-   * Fails if any nested object or array in the clone is the same reference as the source,
-   * so a field added later that needs a copy of its own is caught here without the clone
-   * having to enumerate fields.
-   */
-  function expectNoSharedReferences(clone: unknown, source: unknown, path: string) {
-    if (typeof source !== 'object' || source === null) return;
-    expect(clone, `${path} is shared with the source`).not.toBe(source);
-    const cloneRecord = clone as Record<string, unknown>;
-    const sourceRecord = source as Record<string, unknown>;
-    for (const key of Object.keys(sourceRecord)) {
-      expectNoSharedReferences(cloneRecord[key], sourceRecord[key], `${path}.${key}`);
-    }
-  }
-
-  /** the two halves of the structuredClone contract: same value, no shared references */
-  it.each(entries)('clones a %s to the same value structuredClone would produce', (_type, entry) => {
-    expect(cloneEntryData(entry)).toStrictEqual(structuredClone(entry));
-  });
-
-  it.each(entries)('shares no nested object or array with the source %s', (_type, entry) => {
-    expectNoSharedReferences(cloneEntryData(entry), entry, 'entry');
-  });
-
-  /**
-   * Regression: normalising an absent container to an empty one makes deepEqual report a
-   * change on every comparison, which would have the runtime re-broadcast and re-save the
-   * restore point on every tick. See PR #2178.
-   */
-  it.each([
-    ['event', makeOntimeEvent({ id: 'partial' })],
-    ['group', makeOntimeGroup({ id: 'partial', entries: undefined })],
-  ])('gives a partial %s exactly the keys structuredClone would, so it stays deep-equal', (_type, entry) => {
-    const clone = cloneEntryData(entry);
-    // asserting on keys, not values: `toBeUndefined()` cannot tell an absent key from an own
-    // key holding undefined, and it is key presence that decides the deepEqual below
-    expect(Object.keys(clone).sort()).toEqual(Object.keys(structuredClone(entry)).sort());
-    // this is the comparison runtime.service.ts uses to decide whether to re-broadcast an
-    // entry; if the clone gains a key, every tick looks like a change
-    expect(deepEqual(clone, entry)).toBe(true);
-  });
-
-  it('throws on an entry type it does not know how to clone', () => {
-    expect(() => cloneEntryData({ id: 'x', type: 'unknown' } as unknown as OntimeEvent)).toThrow(
-      'Unsupported entry type for cloning',
-    );
-  });
-});
@@ -27,7 +27,6 @@ import {
  isPlayableEvent,
 } from 'ontime-types';
 import { addToRundown, createGroup, customFieldLabelToKey, getInsertAfterId, insertAtIndex } from 'ontime-utils';
-import type { DeepReadonly } from 'ts-essentials';

 import { getDataProvider } from '../../classes/data-provider/DataProvider.js';
 import { consoleError } from '../../utils/console.js';
@@ -35,7 +34,6 @@ import { ProcessedRundownMetadata, makeRundownMetadata } from './rundown.parser.
 import type { RundownMetadata } from './rundown.types.js';
 import {
  applyPatchToEntry,
-  cloneRundown,
  cloneSimpleRundownEntry,
  deleteById,
  doesInvalidateMetadata,
@@ -45,14 +43,9 @@ import {
 } from './rundown.utils.js';

 /**
- * The currently loaded rundown in cache.
- *
- * Reassigned - never mutated in place - when a different rundown is loaded: the persistence
- * layer stores this object by reference, so repurposing it for another rundown would rewrite
- * the previously loaded rundown's stored record. Mutating it in place while it represents the
- * same rundown (ie. from commit) is intended, and is what keeps the stored record current.
+ * The currently loaded rundown in cache
 */
-let cachedRundown: Rundown = {
+const cachedRundown: Rundown = {
  id: '',
  title: '',
  order: [],
@@ -86,16 +79,9 @@ export const getRundownMetadata = (): Readonly<RundownMetadata> => rundownMetada
 export const getProjectCustomFields = (): Readonly<CustomFields> => projectCustomFields;
 export const getEntryWithId = (entryId: EntryId): OntimeEntry | undefined => cachedRundown.entries[entryId];

-/**
- * @param R the type callers see for `rundown` - a plain, mutable `Rundown` when the
- * transaction was opened with `mutableRundown: true`, otherwise a `DeepReadonly<Rundown>`
- * so that accidentally mutating an entry (or an order array) on a non-mutable transaction
- * - which would silently corrupt the live cache without going through commit() - is a
- * compile-time error instead of a runtime bug.
- */
-type Transaction<R> = {
+type Transaction = {
  customFields: CustomFields;
-  rundown: R;
+  rundown: Rundown;

  commit: (shouldProcess?: boolean) => Promise<{
    rundown: Readonly<Rundown>;
@@ -116,17 +102,11 @@ type TransactionOptions = {
  rundownId?: string;
 };

-export function createTransaction(options: TransactionOptions & { mutableRundown: true }): Transaction<Rundown>;
-export function createTransaction(
-  options: TransactionOptions & { mutableRundown?: false },
-): Transaction<DeepReadonly<Rundown>>;
-export function createTransaction(
-  options: TransactionOptions,
-): Transaction<Rundown> | Transaction<DeepReadonly<Rundown>> {
+export function createTransaction(options: TransactionOptions): Transaction {
  const targetId = options.rundownId ?? cachedRundown.id;
  const isLoaded = targetId === cachedRundown.id;
  const sourceRundown: Rundown = isLoaded ? cachedRundown : (getDataProvider().getRundown(targetId) as Rundown);
-  const rundown = options.mutableRundown ? cloneRundown(sourceRundown) : sourceRundown;
+  const rundown = options.mutableRundown ? structuredClone(sourceRundown) : sourceRundown;
  const customFields = options.mutableCustomFields ? structuredClone(projectCustomFields) : projectCustomFields;

  /**
@@ -727,25 +707,21 @@ export const customFieldMutation = {
 * Expose function to add an initial rundown to the system
 */
 export function init(initialRundown: Readonly<Rundown>, initialCustomFields: Readonly<CustomFields>) {
-  const rundown = cloneRundown(initialRundown);
+  const rundown = structuredClone(initialRundown);
  const customFields = structuredClone(initialCustomFields);
  const processedData = processRundown(rundown, customFields, { mutate: true });

+  // update the cache values
+  cachedRundown.id = rundown.id;
+  cachedRundown.title = rundown.title;
  projectCustomFields = customFields;

  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- we are not interested in the iteration data
  const { previousEvent, latestEvent, previousEntry, entries, order, ...metadata } = processedData;
-
-  // a fresh object, so that the record already stored for a previously loaded rundown keeps
-  // pointing at that rundown's data - see the note on cachedRundown
-  cachedRundown = {
-    id: rundown.id,
-    title: rundown.title,
-    entries,
-    order,
-    flatOrder: metadata.flatEntryOrder,
-    revision: rundown.revision,
-  };
+  cachedRundown.entries = entries;
+  cachedRundown.order = order;
+  cachedRundown.flatOrder = metadata.flatEntryOrder;
+  cachedRundown.revision = rundown.revision;
  rundownMetadata = metadata;

  // defer writing to the database
@@ -33,7 +33,7 @@ import {
 import { makeNewRundown } from '../../models/dataModel.js';
 import type { ErrorEmitter } from '../../utils/parserUtils.js';
 import { RundownMetadata } from './rundown.types.js';
-import { calculateDayOffset, cleanupCustomFields, cloneEntryData } from './rundown.utils.js';
+import { calculateDayOffset, cleanupCustomFields } from './rundown.utils.js';

 /**
 * Parse a rundowns object along with the project custom fields
@@ -234,7 +234,7 @@ export function makeRundownMetadata(customFields: CustomFields, options?: { muta
  };

  function process<T extends OntimeEntry>(entry: T, childOfGroup: EntryId | null): T {
-    return processEntry(rundownMeta, customFields, mutate ? entry : cloneEntryData(entry), childOfGroup);
+    return processEntry(rundownMeta, customFields, mutate ? entry : structuredClone(entry), childOfGroup);
  }

  function getMetadata(): ProcessedRundownMetadata {
@@ -39,7 +39,6 @@ import {
 import { parseRundown } from './rundown.parser.js';
 import type { RundownMetadata } from './rundown.types.js';
 import {
-  cloneRundown,
  generateEvent,
  getFirstInsertId,
  getIntegerAndFraction,
@@ -627,7 +626,7 @@ export async function editCustomField(
    // ... reassign references in the background rundowns
    for (const rundownId of Object.keys(projectRundowns)) {
      if (rundownId !== rundown.id) {
-        const backgroundRundown = cloneRundown(projectRundowns[rundownId]);
+        const backgroundRundown = structuredClone(projectRundowns[rundownId]);
        customFieldMutation.renameUsages(backgroundRundown, oldKey, newKey);
        await updateBackgroundRundown(rundownId, backgroundRundown);
      }
@@ -667,7 +666,7 @@ export async function deleteCustomField(key: CustomFieldKey, projectRundowns: Pr
  // remove references in the background rundowns
  for (const rundownId of Object.keys(projectRundowns)) {
    if (rundownId !== rundown.id) {
-      const backgroundRundown = cloneRundown(projectRundowns[rundownId]);
+      const backgroundRundown = structuredClone(projectRundowns[rundownId]);
      customFieldMutation.removeUsages(backgroundRundown, key);
      await updateBackgroundRundown(rundownId, backgroundRundown);
    }
@@ -847,7 +846,7 @@ export async function duplicateExistingRundown(id: string) {
  const dataProvider = getDataProvider();
  const rundown = dataProvider.getRundown(id);

-  const duplicatedRundown: Rundown = cloneRundown(rundown);
+  const duplicatedRundown: Rundown = structuredClone(rundown);
  duplicatedRundown.id = generateId();
  duplicatedRundown.title = `Copy of ${rundown.title}`;
  duplicatedRundown.revision = 0;
@@ -329,7 +329,7 @@ export function mergeRundownPreservingFields(
    const structure = isOntimeGroup(incomingEntry)
      ? { entries: incomingEntry.entries }
      : { parent: incomingEntry.parent };
-    entries[id] = cloneEntryData({ ...merged, ...structure });
+    entries[id] = structuredClone({ ...merged, ...structure });
  }

  return {
@@ -353,19 +353,19 @@ export function isLoadedPlayable(loadedEventId: EntryId, rundown: Readonly<Rundo

 /** List of event properties which do not need the rundown to be regenerated */
 enum RegenerateWhitelist {
-  id, // adding it for completeness, users cannot change ID
-  type, // adding it for completeness, users cannot change ID
-  cue,
-  title,
-  note,
-  endAction,
-  timerType,
-  countToEnd,
-  colour,
-  timeWarning,
-  timeDanger,
-  custom,
-  triggers,
+  'id', // adding it for completeness, users cannot change ID
+  'type', // adding it for completeness, users cannot change ID
+  'cue',
+  'title',
+  'note',
+  'endAction',
+  'timerType',
+  'countToEnd',
+  'colour',
+  'timeWarning',
+  'timeDanger',
+  'custom',
+  'triggers',
 }

 /**
@@ -499,68 +499,6 @@ export function cloneSimpleRundownEntry(entry: OntimeEntry, newId: EntryId): Ont
  throw new Error(`Unsupported entry type for cloning: ${entry}`);
 }

-/**
- * Fast, shape-aware clone of a single entry, preserving its identity (id, revision, etc).
- * Drop-in replacement for `structuredClone(entry)`, at a fraction of the cost: the spread
- * already copies every primitive field by value, so only the nested containers need work.
- * `custom` and `entries` hold primitives, so copying the container is enough. `triggers`
- * holds objects, which are copied too - otherwise a mutable transaction could edit a trigger
- * of the cached rundown before commit.
- * A container is only replaced when the entry actually carries it, so the clone has exactly
- * the same keys as the source. Adding a key here would make the clone compare unequal to the
- * entry it came from, and the runtime uses that comparison to decide whether to re-broadcast.
- */
-export function cloneEntryData<T extends OntimeEntry>(entry: T): T {
-  switch (entry.type) {
-    case SupportedEntry.Event: {
-      const clone: OntimeEvent = { ...entry };
-      if (clone.custom) clone.custom = { ...clone.custom };
-      if (clone.triggers) clone.triggers = clone.triggers.map((trigger) => ({ ...trigger }));
-      return clone as T;
-    }
-    case SupportedEntry.Group: {
-      const clone: OntimeGroup = { ...entry };
-      if (clone.custom) clone.custom = { ...clone.custom };
-      if (clone.entries) clone.entries = clone.entries.slice();
-      return clone as T;
-    }
-    case SupportedEntry.Milestone: {
-      const clone: OntimeMilestone = { ...entry };
-      if (clone.custom) clone.custom = { ...clone.custom };
-      return clone as T;
-    }
-    case SupportedEntry.Delay:
-      return { ...entry } as T;
-    default: {
-      // exhaustiveness guard: a new member of `SupportedEntry` is named in the error here
-      const unhandled: never = entry;
-      throw new Error(`Unsupported entry type for cloning: ${(unhandled as OntimeEntry).type}`);
-    }
-  }
-}
-
-/**
- * Fast, shape-aware clone of a whole rundown.
- * Drop-in replacement for `structuredClone(rundown)`: every entry (and its nested
- * `custom` / `triggers` / `entries` containers) gets its own copy, so callers can mutate
- * the result freely without touching the source - same contract as structuredClone,
- * at a fraction of the cost since we skip the generic serialization algorithm.
- */
-export function cloneRundown(rundown: Readonly<Rundown>): Rundown {
-  const entries: RundownEntries = {};
-  for (const id in rundown.entries) {
-    entries[id] = cloneEntryData(rundown.entries[id]);
-  }
-  return {
-    id: rundown.id,
-    title: rundown.title,
-    revision: rundown.revision,
-    order: rundown.order.slice(),
-    flatOrder: rundown.flatOrder.slice(),
-    entries,
-  };
-}
-
 /**
 * Utility for calculating if the current events should have a day offset
 * @param current the current event under test
@@ -464,8 +464,9 @@ export async function upload(sheetId: string, options: ImportMap) {
    sheetOrder.forEach((entryId, index) => {
      const isGroupEnd = entryId.startsWith('group-end-');
      const id = isGroupEnd ? entryId.split('group-end-')[1] : entryId;
-      // cellRequestFromEvent only reads the entry to build a cell request, no clone is needed
-      const entry = isGroupEnd ? ({ id: entryId, type: SupportedEntry.Group } as OntimeGroup) : rundown.entries[id];
+      const entry = isGroupEnd
+        ? ({ id: entryId, type: SupportedEntry.Group } as OntimeGroup)
+        : structuredClone(rundown.entries[id]);
      updateRundown.push(cellRequestFromEvent(entry, index, worksheetId, sheetMetadata));
    });
  } catch (e) {
@@ -0,0 +1,21 @@
+import type { NextFunction, Request, RequestHandler, Response } from 'express';
+
+import { hasPassword, hashedPassword } from '../api-data/session/session.service.js';
+
+/**
+ * Wraps the app authenticate middleware with support for the Authorization header.
+ * MCP clients conventionally authenticate with `Authorization: Bearer <token>`
+ * rather than cookies or query params; any other request falls through to the
+ * app middleware, keeping the behaviour of the shared middleware untouched.
+ */
+export function makeMcpAuthenticate(fallback: RequestHandler): RequestHandler {
+  return function mcpAuthenticate(req: Request, res: Response, next: NextFunction) {
+    if (hasPassword) {
+      const authHeader = req.headers.authorization;
+      if (authHeader?.startsWith('Bearer ') && authHeader.slice(7) === hashedPassword) {
+        return next();
+      }
+    }
+    return fallback(req, res, next);
+  };
+}
@@ -20,9 +20,12 @@ export function createMcpServer(): Server {
    { capabilities: { tools: {}, prompts: {}, resources: {} } },
  );

-  server.setRequestHandler(ListToolsRequestSchema, async (): Promise<ListToolsResult> => ({
-    tools: TOOL_DEFINITIONS as unknown as ListToolsResult['tools'],
-  }));
+  server.setRequestHandler(
+    ListToolsRequestSchema,
+    async (): Promise<ListToolsResult> => ({
+      tools: TOOL_DEFINITIONS as unknown as ListToolsResult['tools'],
+    }),
+  );

  server.setRequestHandler(CallToolRequestSchema, async (request): Promise<CallToolResult> => {
    const { name, arguments: args = {} } = request.params;
@@ -13,6 +13,7 @@ import { socket } from './adapters/WebsocketAdapter.js';
 // Import Routers
 import { appRouter } from './api-data/index.js';
 import { integrationRouter } from './api-integration/integration.router.js';
+import { makeMcpAuthenticate } from './api-mcp/mcp.auth.js';
 import { mcpRouter } from './api-mcp/mcp.router.js';
 import { flushPendingWrites, getDataProvider } from './classes/data-provider/DataProvider.js';
 // Services
@@ -101,7 +102,7 @@ app.get(`${prefix}/ready`, (_req, res) => {
 app.use(`${prefix}/login`, loginRouter); // router for login flow
 app.use(`${prefix}/data`, authenticate, appRouter); // router for application data
 app.use(`${prefix}/api`, authenticate, integrationRouter); // router for integrations
-app.use(`${prefix}/mcp`, authenticate, mcpRouter); // router for MCP agent integration
+app.use(`${prefix}/mcp`, makeMcpAuthenticate(authenticate), mcpRouter); // router for MCP agent integration

 // serve static external files
 app.use(
@@ -101,16 +101,8 @@ function getCustomFields(): Readonly<CustomFields> {
  return db.data.customFields;
 }

-/**
- * Stores a rundown, replacing any existing entry for the same key.
- * Takes ownership of `newData` and stores it by reference - the caller must not mutate it
- * afterward. Every call site either hands over a freshly-built object it never touches again,
- * or (for the loaded rundown) the cache's own long-lived object, which is already the single
- * source of truth for that data - aliasing it here costs nothing and avoids a second full
- * deep copy of the rundown on every commit.
- */
 async function setRundown(rundownKey: string, newData: Rundown): ReadonlyPromise<ProjectRundowns> {
-  db.data.rundowns[rundownKey] = newData;
+  db.data.rundowns[rundownKey] = structuredClone(newData);
  await persist();
  return db.data.rundowns;
 }
@@ -4,17 +4,12 @@ import { DatabaseModel } from 'ontime-types';
 * Merges a partial ontime project into a given ontime project
 */
 export function safeMerge(existing: DatabaseModel, newData: Partial<DatabaseModel>): DatabaseModel {
-  // rundowns are merged separately below by reference (only the top-level map is copied,
-  // same as the other properties here) - deep-cloning them here would be wasted work,
-  // since a project's rundowns are by far the largest part of this object
-  const { rundowns: existingRundowns, ...existingRest } = existing;
-  const { rundowns: newRundowns = {}, ...newDataRest } = newData;
-
-  const deepExisting = structuredClone(existingRest);
-  const deepNewData = structuredClone(newDataRest);
+  const deepExisting = structuredClone(existing);
+  const deepNewData = structuredClone(newData);

  // destructure each property to simplify merging not provided ie: ...{} has no effect
  const {
+    rundowns = {},
    project = {},
    settings = {},
    viewSettings = {},
@@ -24,7 +19,7 @@ export function safeMerge(existing: DatabaseModel, newData: Partial<DatabaseMode
  } = deepNewData;

  return {
-    rundowns: { ...existingRundowns, ...newRundowns },
+    rundowns: { ...existing.rundowns, ...rundowns },
    project: { ...deepExisting.project, ...project },
    settings: { ...deepExisting.settings, ...settings },
    viewSettings: { ...deepExisting.viewSettings, ...viewSettings },
@@ -1,31 +1,6 @@
-import type { IncomingMessage } from 'node:http';
+import { describe, expect, it } from 'vitest';

-import type { NextFunction, Request, Response } from 'express';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-
-vi.mock('../../api-data/session/session.service.js', () => ({
-  hasPassword: true,
-  hashedPassword: 'valid-token',
-}));
-
-import { authenticateSocket, isPublicAssetRequest, makeAuthenticateMiddleware } from '../authenticate.js';
-
-function makeResponse() {
-  return {
-    redirect: vi.fn(),
-    send: vi.fn(),
-    status: vi.fn().mockReturnThis(),
-  } as unknown as Response;
-}
-
-function makeHeadersWithFailingAuthorization(cookie?: string) {
-  return {
-    cookie,
-    get authorization(): never {
-      throw new Error('Authorization header should not be read');
-    },
-  };
-}
+import { isPublicAssetRequest } from '../authenticate.js';

 describe('isPublicAssetRequest()', () => {
  it('allows root public assets without a prefix', () => {
@@ -43,144 +18,3 @@ describe('isPublicAssetRequest()', () => {
    expect(isPublicAssetRequest('/backstage', '')).toBe(false);
  });
 });
-
-describe('bearer authentication', () => {
-  const next = vi.fn() as NextFunction;
-
-  beforeEach(() => {
-    next.mockClear();
-  });
-
-  it('prioritises cookie authentication for API requests', () => {
-    const { authenticate } = makeAuthenticateMiddleware('');
-    const req = {
-      cookies: { token: JSON.stringify({ token: 'valid-token' }) },
-      headers: makeHeadersWithFailingAuthorization(),
-      query: {},
-    } as unknown as Request;
-
-    expect(() => authenticate(req, makeResponse(), next)).not.toThrow();
-    expect(next).toHaveBeenCalledOnce();
-  });
-
-  it('prioritises cookie authentication for redirecting routes', () => {
-    const { authenticateAndRedirect } = makeAuthenticateMiddleware('');
-    const req = {
-      cookies: { token: JSON.stringify({ token: 'valid-token' }) },
-      headers: makeHeadersWithFailingAuthorization(),
-      originalUrl: '/external/image.png',
-      query: {},
-    } as unknown as Request;
-
-    expect(() => authenticateAndRedirect(req, makeResponse(), next)).not.toThrow();
-    expect(next).toHaveBeenCalledOnce();
-  });
-
-  it('prioritises cookie authentication for WebSocket handshakes', () => {
-    const cookie = `token=${encodeURIComponent(JSON.stringify({ token: 'valid-token' }))}`;
-    const req = { headers: makeHeadersWithFailingAuthorization(cookie) } as IncomingMessage;
-
-    expect(() => authenticateSocket({} as never, req, next)).not.toThrow();
-    expect(next).toHaveBeenCalledOnce();
-  });
-
-  it('authenticates API requests with a bearer token', () => {
-    const { authenticate } = makeAuthenticateMiddleware('');
-    const req = {
-      cookies: {},
-      headers: { authorization: 'Bearer valid-token' },
-      query: {},
-    } as unknown as Request;
-    const res = makeResponse();
-
-    authenticate(req, res, next);
-
-    expect(next).toHaveBeenCalledOnce();
-    expect(res.status).not.toHaveBeenCalled();
-  });
-
-  it('accepts case-insensitive bearer schemes and extra whitespace', () => {
-    const { authenticate } = makeAuthenticateMiddleware('');
-    const req = {
-      cookies: {},
-      headers: { authorization: 'bearer   valid-token ' },
-      query: {},
-    } as unknown as Request;
-
-    authenticate(req, makeResponse(), next);
-
-    expect(next).toHaveBeenCalledOnce();
-  });
-
-  it('authenticates redirecting routes with a bearer token', () => {
-    const { authenticateAndRedirect } = makeAuthenticateMiddleware('/stage');
-    const req = {
-      cookies: {},
-      headers: { authorization: 'Bearer valid-token' },
-      originalUrl: '/stage/external/image.png',
-      query: {},
-    } as unknown as Request;
-    const res = makeResponse();
-
-    authenticateAndRedirect(req, res, next);
-
-    expect(next).toHaveBeenCalledOnce();
-    expect(res.redirect).not.toHaveBeenCalled();
-  });
-
-  it('authenticates WebSocket handshakes with a bearer token', () => {
-    const req = {
-      headers: { authorization: 'Bearer valid-token' },
-    } as IncomingMessage;
-
-    authenticateSocket({} as never, req, next);
-
-    expect(next).toHaveBeenCalledOnce();
-    expect(next).toHaveBeenCalledWith();
-  });
-
-  it('rejects an invalid bearer token', () => {
-    const { authenticate, authenticateAndRedirect } = makeAuthenticateMiddleware('');
-    const req = {
-      cookies: {},
-      headers: { authorization: 'Bearer invalid-token' },
-      query: {},
-    } as unknown as Request;
-    const res = makeResponse();
-
-    authenticate(req, res, next);
-
-    expect(next).not.toHaveBeenCalled();
-    expect(res.status).toHaveBeenCalledWith(401);
-    expect(res.send).toHaveBeenCalledWith('Unauthorized');
-
-    const redirectReq = { ...req, originalUrl: '/external/image.png' } as Request;
-    const redirectRes = makeResponse();
-    authenticateAndRedirect(redirectReq, redirectRes, next);
-
-    expect(next).not.toHaveBeenCalled();
-    expect(redirectRes.redirect).toHaveBeenCalledWith('/login?redirect=/external/image.png');
-
-    const socketNext = vi.fn();
-    authenticateSocket(
-      {} as never,
-      { headers: { authorization: 'Bearer invalid-token' } } as IncomingMessage,
-      socketNext,
-    );
-
-    expect(socketNext).toHaveBeenCalledOnce();
-    expect(socketNext.mock.calls[0][0]).toEqual(new Error('Unauthorized'));
-  });
-
-  it.each(['/socket?not_token=valid-token', '/socket?token=valid-token-suffix'])(
-    'rejects lookalike WebSocket query tokens in %s',
-    (url) => {
-      const socketNext = vi.fn();
-
-      authenticateSocket({} as never, { headers: { host: 'localhost' }, url } as IncomingMessage, socketNext);
-
-      expect(socketNext).toHaveBeenCalledOnce();
-      expect(socketNext.mock.calls[0][0]).toEqual(new Error('Unauthorized'));
-    },
-  );
-});
@@ -77,16 +77,17 @@ export function makeAuthenticateMiddleware(prefix: string) {
  const loginRedirectBase = `${prefix}/login?redirect=`;

  function authenticate(req: Request, res: Response, next: NextFunction) {
-    if (getTokenFromCookies(req.cookies) === hashedPassword) {
-      return next();
+    if (req.query.token) {
+      if (req.query.token === hashedPassword) {
+        return next();
+      }
    }

-    if (getTokenFromAuthHeader(req.headers.authorization) === hashedPassword) {
-      return next();
-    }
-
-    if (getTokenFromParams(req.query) === hashedPassword) {
-      return next();
+    if (req.cookies?.token) {
+      const tokenFromCookie = getTokenFromCookie(req.cookies.token);
+      if (tokenFromCookie === hashedPassword) {
+        return next();
+      }
    }

    res.status(401).send('Unauthorized');
@@ -104,17 +105,17 @@ export function makeAuthenticateMiddleware(prefix: string) {
      return next();
    }

-    if (getTokenFromCookies(req.cookies) === hashedPassword) {
-      return next();
-    }
-
-    if (getTokenFromAuthHeader(req.headers.authorization) === hashedPassword) {
-      return next();
+    // we expect the token to be in the cookies
+    if (req.cookies?.token) {
+      const tokenFromCookie = getTokenFromCookie(req.cookies.token);
+      if (tokenFromCookie === hashedPassword) {
+        return next();
+      }
    }

    // we use query params for generating authenticated URLs and for clients like the companion module
    // if the user gives is a token in the query params, we set the cookie to be used in further requests
-    if (getTokenFromParams(req.query) === hashedPassword) {
+    if (req.query.token === hashedPassword) {
      if (hashedPassword !== undefined) {
        setSessionCookie(res, hashedPassword, prefix);
      }
@@ -135,16 +136,33 @@ export function authenticateSocket(_ws: WebSocket, req: IncomingMessage, next: (
    return next();
  }

-  if (getTokenFromCookies(req.headers.cookie) === hashedPassword) {
+  // check if the token is in the cookie
+  const cookieString = req.headers.cookie;
+  if (typeof cookieString === 'string') {
+    const cookies = parseCookie(cookieString);
+    if (cookies.token) {
+      const token = getTokenFromCookie(cookies.token);
+      if (token === hashedPassword) {
+        return next();
+      }
+    }
+  }
+
+  // check if token is in the params - simple string check first
+  const urlString = req.url || '';
+  if (urlString.includes(`token=${hashedPassword}`)) {
    return next();
  }

-  if (getTokenFromAuthHeader(req.headers.authorization) === hashedPassword) {
-    return next();
-  }
-
-  if (getTokenFromParams(req.url, req.headers.host) === hashedPassword) {
-    return next();
+  // fallback to full URL parsing for other formats
+  try {
+    const url = new URL(urlString, `http://${req.headers.host}`);
+    const token = url.searchParams.get('token');
+    if (token === hashedPassword) {
+      return next();
+    }
+  } catch (_) {
+    // ignore URL parsing errors
  }

  return next(new Error('Unauthorized'));
@@ -163,18 +181,19 @@ function setSessionCookie(res: Response, token: string, prefix: string) {
  });
 }

-function getTokenFromCookies(cookies: string | Record<string, unknown> | undefined): string | undefined {
-  const cookieContents = typeof cookies === 'string' ? parseCookie(cookies).token : cookies?.token;
-  if (typeof cookieContents !== 'string') {
-    return undefined;
-  }
-
-  // Fast path: avoid JSON parsing when the expected token can be found directly
-  const cookieTokenString = '"token":"' + hashedPassword + '"';
+/**
+ * When calling this function we already know a cookie called 'token' exists
+ * And want to extract its value
+ */
+function getTokenFromCookie(cookieContents: string): string | undefined {
+  // Fast path: check if the hashed password is directly in the cookie string
+  // This avoids JSON parsing for the common case
+  const cookieTokenString = '"token":"' + hashedPassword + '}"';
  if (cookieTokenString && cookieContents.includes(cookieTokenString)) {
    return hashedPassword;
  }

+  // Fallback to JSON parsing for other cases or validation
  try {
    const cookie = JSON.parse(cookieContents);
    if (cookie && typeof cookie.token === 'string') {
@@ -184,19 +203,3 @@ function getTokenFromCookies(cookies: string | Record<string, unknown> | undefin
    // no error handling to do here
  }
 }
-
-function getTokenFromAuthHeader(authorization: string | undefined): string | undefined {
-  return authorization?.match(/^Bearer\s+(\S+)\s*$/i)?.[1];
-}
-
-function getTokenFromParams(params: string | Record<string, unknown> | undefined, host?: string): string | undefined {
-  if (typeof params !== 'string') {
-    return typeof params?.token === 'string' ? params.token : undefined;
-  }
-
-  try {
-    return new URL(params, `http://${host}`).searchParams.get('token') ?? undefined;
-  } catch (_) {
-    return undefined;
-  }
-}
@@ -1,6 +1,7 @@
-import { EndAction, Playback, TimeOfDay, TimeStrategy, TimerPhase, TimerType } from 'ontime-types';
+import { EndAction, Instant, Playback, TimeOfDay, TimeStrategy, TimerPhase, TimerType } from 'ontime-types';
 import { MILLIS_PER_HOUR, MILLIS_PER_MINUTE, MILLIS_PER_SECOND, dayInMs, millisToString } from 'ontime-utils';

+import * as timeCore from '../../lib/time-core/timeCore.js';
 import type { RuntimeState } from '../../stores/runtimeState.js';
 import {
  findDayOffset,
@@ -53,11 +54,12 @@ describe('getElapsed()', () => {
  it('uses the current pause start while paused', () => {
    const state = {
      clock: 10 * MILLIS_PER_MINUTE,
+      _now: timeCore.toInstant((10 * MILLIS_PER_MINUTE) as TimeOfDay, timeCore.now()),
      timer: {
        startedAt: 2 * MILLIS_PER_MINUTE,
      },
      _timer: {
-        pausedAt: 7 * MILLIS_PER_MINUTE,
+        pausedAt: timeCore.toInstant((7 * MILLIS_PER_MINUTE) as TimeOfDay, timeCore.now()),
        pausedDuration: 1 * MILLIS_PER_MINUTE,
      },
    } as RuntimeState;
@@ -975,6 +977,40 @@ describe('getRuntimeOffset()', () => {
    expect(absolute).toBe(25);
  });

+  it('paused time is delayed time when the pause spans midnight', () => {
+    const state = {
+      eventNow: {
+        id: '1',
+        timeStart: 23 * MILLIS_PER_HOUR, // 23:00
+        timeEnd: 1 * MILLIS_PER_HOUR, // 01:00
+        dayOffset: 0,
+      },
+      clock: 3 * MILLIS_PER_MINUTE, // 00:03 (after midnight)
+      _now: timeCore.toInstant((3 * MILLIS_PER_MINUTE) as TimeOfDay, timeCore.now()),
+      timer: {
+        startedAt: 23 * MILLIS_PER_HOUR, // started on time at 23:00
+        current: 25, // still counting down
+        addedTime: 0,
+      },
+      _timer: {
+        pausedAt: timeCore.toInstant(
+          (23 * MILLIS_PER_HOUR + 58 * MILLIS_PER_MINUTE) as TimeOfDay,
+          (timeCore.now() - dayInMs) as Instant,
+        ), // 23:58, before midnight
+        pausedDuration: 0,
+      },
+      rundown: {
+        actualStart: 23 * MILLIS_PER_HOUR,
+        plannedStart: 23 * MILLIS_PER_HOUR,
+        currentDay: 0,
+      },
+      _startDayOffset: 0,
+    } as RuntimeState;
+
+    // paused from 23:58 to 00:03 -> so elapsed should still be 58 minutes
+    expect(getElapsed(state)).toBe(58 * MILLIS_PER_MINUTE);
+  });
+
  it('offset doesnt exist if we havent started', () => {
    const state = {
      clock: 78480789,
@@ -20,7 +20,6 @@ import { triggerAutomations } from '../../api-data/automation/automation.service
 import { triggerReportEntry } from '../../api-data/report/report.service.js';
 import { getCurrentRundown, getEntryWithId, getRundownMetadata } from '../../api-data/rundown/rundown.dao.js';
 import { RundownMetadata } from '../../api-data/rundown/rundown.types.js';
-import { cloneEntryData } from '../../api-data/rundown/rundown.utils.js';
 import { logger } from '../../classes/Logger.js';
 import { timerConfig } from '../../setup/config.js';
 import { eventStore } from '../../stores/EventStore.js';
@@ -755,7 +754,7 @@ function broadcastResult(_target: any, _propertyKey: string, descriptor: Propert
      }
      // at this point we know that either the id or the contents has changed
      batch.add(key, currentEntry as RuntimeStore[K]); // we know that there is the necessary overlap in the types to cast this
-      RuntimeService.previousState[key] = currentEntry ? cloneEntryData(currentEntry) : null;
+      RuntimeService.previousState[key] = structuredClone(currentEntry);
      return true;
    }

@@ -1,6 +1,7 @@
 import { Day, MaybeNumber, TimeOfDay, TimerPhase } from 'ontime-types';
 import { MILLIS_PER_HOUR, checkIsNow, dayInMs, isPlaybackActive } from 'ontime-utils';

+import * as timeCore from '../lib/time-core/timeCore.js';
 import type { RuntimeState } from '../stores/runtimeState.js';

 /**
@@ -96,17 +97,18 @@ export function getCurrent(state: RuntimeState): number {
 * Calculates active time elapsed since the timer started.
 */
 export function getElapsed(state: RuntimeState): MaybeNumber {
-  const { clock } = state;
+  const { clock, _now } = state;
  const { startedAt } = state.timer;
-  const { pausedAt, pausedDuration } = state._timer;
+  const { pausedDuration, pausedAt } = state._timer;

  if (startedAt === null) {
    return null;
  }

-  const referenceClock = pausedAt ?? clock;
-  const elapsedSinceStart = getTimeSinceStart(referenceClock, startedAt);
-  const activeElapsed = elapsedSinceStart - pausedDuration;
+  const currentPauseDuration = pausedAt !== null ? timeCore.timeSince(_now, pausedAt) : 0;
+
+  const elapsedSinceStart = getTimeSinceStart(clock, startedAt);
+  const activeElapsed = elapsedSinceStart - pausedDuration - currentPauseDuration;

  return Math.max(0, activeElapsed);
 }
@@ -1,10 +1,11 @@
-import { OffsetMode, Playback, type TimeOfDay, TimerPhase } from 'ontime-types';
+import { Instant, OffsetMode, Playback, type TimeOfDay, TimerPhase } from 'ontime-types';
 import { deepmerge } from 'ontime-utils';

 import type { RuntimeState } from '../runtimeState.js';

 const baseState: RuntimeState = {
  clock: 0 as TimeOfDay,
+  _now: 0 as Instant,
  eventNow: null,
  eventNext: null,
  eventFlag: null,
@@ -135,7 +135,7 @@ describe('mutation on runtimeState', () => {
        playback: Playback.Pause,
        addedTime: 0,
      });
-      expect(newState._timer.pausedAt).toEqual(newState.clock);
+      expect(newState._timer.pausedAt).toEqual(newState._now);

      success = pause();
      expect(success).toBe(false);
@@ -248,6 +248,59 @@ describe('mutation on runtimeState', () => {
      state = getState();
      expect(state.timer.elapsed).toBe(3 * MILLIS_PER_MINUTE);
    });
+
+    test('elapsed excludes a pause that spans midnight', async () => {
+      clearState();
+      // an event that runs over midnight (23:00 -> 01:00)
+      const event = {
+        ...mockEvent,
+        id: 'elapsed-pause-midnight',
+        timeStart: 23 * MILLIS_PER_HOUR,
+        timeEnd: 1 * MILLIS_PER_HOUR,
+        duration: 2 * MILLIS_PER_HOUR,
+      };
+      const mockRundown = makeRundown({
+        entries: { [event.id]: event },
+        order: [event.id],
+      });
+
+      await initRundown(mockRundown, {});
+      vi.runAllTimers();
+
+      const { metadata, rundown } = rundownCache.get();
+
+      // start before midnight
+      vi.setSystemTime('jan 1 23:50');
+      load(event, rundown, metadata);
+      start();
+
+      // 8 minutes of active running before we pause
+      vi.setSystemTime('jan 1 23:58');
+      update();
+      expect(getState().timer.elapsed).toBe(8 * MILLIS_PER_MINUTE);
+      pause();
+
+      // elapsed is active time since start, so it must not advance while paused,
+      // not even when the pause itself crosses midnight
+      vi.setSystemTime('jan 2 00:01');
+      update();
+      expect(getState().timer.elapsed).toBe(8 * MILLIS_PER_MINUTE);
+
+      // resume 5 minutes after pausing, having crossed midnight (23:58 -> 00:03)
+      vi.setSystemTime('jan 2 00:03');
+      start();
+      let state = getState();
+      // the accumulated pause count is 5 minutes, regardless of the midnight wrap
+      expect(state._timer.pausedDuration).toBe(5 * MILLIS_PER_MINUTE);
+      // and elapsed still reflects only the 8 active minutes
+      expect(state.timer.elapsed).toBe(8 * MILLIS_PER_MINUTE);
+
+      // 2 more active minutes after resume -> 10 minutes elapsed
+      vi.setSystemTime('jan 2 00:05');
+      update();
+      state = getState();
+      expect(state.timer.elapsed).toBe(10 * MILLIS_PER_MINUTE);
+    });
  });

  test('runtime offset', async () => {
@@ -63,7 +63,9 @@ export type RuntimeState = {
  // private properties of the timer calculations
  _timer: {
    forceFinish: Maybe<TimeOfDay>; // whether we should declare an event as finished, will contain the finish time
-    pausedAt: Maybe<TimeOfDay>;
+    pausedAt: Maybe<Instant>;
+
+    /** Accumulate pause duration but dose not include the current pause */
    pausedDuration: number;
    secondaryTarget: Maybe<TimeOfDay>;
    hasFinished: boolean;
@@ -76,10 +78,12 @@ export type RuntimeState = {
  _end: ExpectedMetadata;
  _startEpoch: Maybe<Instant>;
  _startDayOffset: Maybe<Day>;
+  _now: Instant;
 };

 const runtimeState: RuntimeState = {
  clock: timeCore.timeOfDayNow(),
+  _now: timeCore.now(),
  groupNow: null,
  eventNow: null,
  eventNext: null,
@@ -104,6 +108,12 @@ const runtimeState: RuntimeState = {
  _startDayOffset: null,
 };

+/** set the current clock to ensure parity between _now and clock */
+function setClock(state: RuntimeState) {
+  state._now = timeCore.now();
+  state.clock = timeCore.toTimeOfDay(state._now);
+}
+
 export function getState(): Readonly<RuntimeState> {
  // create a shallow copy of the state
  return {
@@ -136,7 +146,7 @@ export function clearEventData() {
  runtimeState.rundown.selectedEventIndex = null;

  runtimeState.timer.playback = Playback.Stop;
-  runtimeState.clock = timeCore.timeOfDayNow();
+  setClock(runtimeState);
  runtimeState.timer = { ...runtimeStorePlaceholder.timer };

  // when clearing, we maintain the total delay from the rundown
@@ -169,7 +179,7 @@ export function clearState() {
  runtimeState._end = null;

  runtimeState.timer.playback = Playback.Stop;
-  runtimeState.clock = timeCore.timeOfDayNow();
+  setClock(runtimeState);
  runtimeState.timer = { ...runtimeStorePlaceholder.timer };

  // when clearing, we maintain the total delay from the rundown
@@ -422,15 +432,12 @@ export function start(state: RuntimeState = runtimeState): boolean {
    return false;
  }

-  const epoch = timeCore.now();
-  const now = timeCore.toTimeOfDay(epoch);
-
-  state.clock = now;
+  setClock(state);
  state.timer.secondaryTimer = null;

  // add paused time if it exists
  if (state._timer.pausedAt) {
-    const timeToAdd = state.clock - state._timer.pausedAt;
+    const timeToAdd = state._now - state._timer.pausedAt;
    state.timer.addedTime += timeToAdd;
    state._timer.pausedDuration += timeToAdd;
    state._timer.pausedAt = null;
@@ -447,7 +454,7 @@ export function start(state: RuntimeState = runtimeState): boolean {
  if (state.rundown.actualStart === null) {
    state._startDayOffset = (findDayOffset(state.eventNow.timeStart, state.clock) + state.eventNow.dayOffset) as Day;
    state.rundown.currentDay = state._startDayOffset;
-    state._startEpoch = epoch;
+    state._startEpoch = state._now;
    state.rundown.actualStart = state.clock;
  }

@@ -481,8 +488,8 @@ export function pause(state: RuntimeState = runtimeState): boolean {
  }

  state.timer.playback = Playback.Pause;
-  state.clock = timeCore.timeOfDayNow();
-  state._timer.pausedAt = state.clock;
+  setClock(state);
+  state._timer.pausedAt = state._now;
  return true;
 }

@@ -547,9 +554,7 @@ export type UpdateResult = {
 export function update(): UpdateResult {
  // 0. there are some things we always do
  const previousClock = runtimeState.clock;
-  const epoch = timeCore.now();
-  const now = timeCore.toTimeOfDay(epoch);
-  runtimeState.clock = now; // we update the clock on every update call
+  setClock(runtimeState); // we update the clock on every update call

  // 1. is playback idle?
  if (!isPlaybackActive(runtimeState.timer.playback)) {
@@ -558,13 +563,13 @@ export function update(): UpdateResult {

  // calculate currentDay from epoch (days elapsed since playback was started)
  if (runtimeState._startEpoch !== null && runtimeState._startDayOffset !== null) {
-    const daysSinceStart = timeCore.daysSinceStart(runtimeState._startEpoch, epoch);
+    const daysSinceStart = timeCore.daysSinceStart(runtimeState._startEpoch, runtimeState._now);
    runtimeState.rundown.currentDay = runtimeState._startDayOffset + daysSinceStart;
  }

  // 2. are we waiting to roll?
  if (runtimeState.timer.playback === Playback.Roll && runtimeState.timer.secondaryTimer !== null) {
-    const clockHasCrossedMidnight = hasCrossedMidnight(previousClock, now);
+    const clockHasCrossedMidnight = hasCrossedMidnight(previousClock, runtimeState.clock);
    return updateIfWaitingToRoll(clockHasCrossedMidnight);
  }

@@ -48,47 +48,6 @@ test.describe('test view navigation feature', () => {
    await expect(page).toHaveURL('/timer');
  });

-  /**
-   * The shortcut has to read the current open state, not the one captured when it was
-   * registered, otherwise it only ever opens the menu.
-   */
-  test('Space closes the menu as well as opening it', async ({ page }) => {
-    const menu = page.getByRole('dialog');
-    await expect(menu).toBeHidden();
-
-    await openNavigationMenu(page);
-    await expect(menu).toBeVisible();
-
-    await page.keyboard.press('Space');
-    await expect(menu).toBeHidden();
-  });
-
-  test('Space closes a menu opened with the button', async ({ page }) => {
-    await page.mouse.move(Math.random() * 100, Math.random() * 100);
-    await page.getByTestId('navigation__toggle-menu').click();
-
-    const menu = page.getByRole('dialog');
-    await expect(menu).toBeVisible();
-
-    await page.keyboard.press('Space');
-    await expect(menu).toBeHidden();
-  });
-
-  test('Space toggles a focused menu switch without closing the menu', async ({ page }) => {
-    await openNavigationMenu(page);
-
-    const menu = page.getByRole('dialog');
-    const flipScreen = page.getByRole('switch', { name: 'Flip Screen' });
-    await expect(menu).toBeVisible();
-
-    const initiallyChecked = await flipScreen.getAttribute('aria-checked');
-    await flipScreen.focus();
-    await page.keyboard.press('Space');
-
-    await expect(flipScreen).toHaveAttribute('aria-checked', initiallyChecked === 'true' ? 'false' : 'true');
-    await expect(menu).toBeVisible();
-  });
-
  test('not-found', async ({ page }) => {
    await page.goto('/not-found');

@@ -6,25 +6,6 @@ test('cuesheet displays events', async ({ page }) => {
  await expect(page.getByTestId('cuesheet-event').first()).toBeVisible();
 });

-test('cuesheet persists column visibility', async ({ page }) => {
-  await page.goto('/cuesheet');
-
-  const noteHeader = page.getByRole('columnheader', { name: 'Note', exact: true });
-  const noteCell = page.getByTestId('cuesheet-event').first().getByTestId('cuesheet-cell-note');
-  await expect(noteHeader).toBeVisible();
-  await expect(noteCell).toBeVisible();
-
-  await page.getByRole('button', { name: 'Columns' }).click();
-  await page.getByRole('checkbox', { name: 'Note', exact: true }).click();
-
-  await expect(noteHeader).toBeHidden();
-  await expect(noteCell).toBeHidden();
-
-  await page.reload();
-  await expect(noteHeader).toBeHidden();
-  await expect(noteCell).toBeHidden();
-});
-
 test('cuesheet datagrid does not submit timer cells on tab-out or escape', async ({ page }) => {
  await page.goto('/cuesheet');

@@ -44,7 +44,7 @@ test.describe('URL Preset', () => {
      .filter({ hasText: /^testingApply$/ })
      .getByRole('button')
      .click();
-    await expect(page.getByText('Current')).toBeVisible();
+    await expect(page.getByRole('button', { name: 'Applied' })).toBeVisible();

    // 2. the URL contains the preset
    expect(page.url().includes('hideTimerSeconds=true')).toBeTruthy();
@@ -13,28 +13,3 @@ test('View params configures timer view', async ({ page }) => {
  await expect(page.getByText('TIME NOW', { exact: true })).not.toBeInViewport();
  await expect(page).toHaveURL(/.*hideClock=true/);
 });
-
-/**
- * The form gathers its values from the DOM, so a collapsed section has to stay mounted.
- * Unmounting it would quietly drop everything the user set in it on the next apply.
- */
-test('View params keeps the values of collapsed sections', async ({ page }) => {
-  // hideClock lives in the section we are about to collapse
-  await page.goto('/timer?hideClock=true');
-  await expect(page.getByText('TIME NOW', { exact: true })).not.toBeInViewport();
-
-  await page.mouse.move(Math.random() * 100, Math.random() * 100);
-  await page.getByTestId('navigation__toggle-settings').click();
-
-  const section = page.getByRole('button', { name: /Element visibility/ });
-  await expect(section).toHaveAttribute('aria-expanded', 'true');
-  await section.focus();
-  await page.keyboard.press('Space');
-  await expect(section).toHaveAttribute('aria-expanded', 'false');
-  await expect(page.getByRole('dialog', { name: 'Ontime' })).toBeHidden();
-
-  await page.getByTestId('apply-view-params').click();
-
-  await expect(page).toHaveURL(/.*hideClock=true/);
-  await expect(page.getByText('TIME NOW', { exact: true })).not.toBeInViewport();
-});
@@ -41,14 +41,14 @@
    "format:check": "oxfmt --check"
  },
  "devDependencies": {
-    "@playwright/test": "1.62.1",
+    "@playwright/test": "1.60.0",
    "@types/node": "catalog:",
    "cross-env": "^7.0.3",
-    "oxfmt": "^0.63.0",
-    "oxlint": "^1.78.0",
-    "oxlint-tsgolint": "^7.0.2001",
+    "oxfmt": "^0.42.0",
+    "oxlint": "^1.57.0",
+    "oxlint-tsgolint": "^0.17.4",
    "rimraf": "catalog:",
-    "turbo": "2.10.10",
+    "turbo": "2.8.20",
    "typescript": "catalog:"
  },
  "packageManager": "pnpm@11.1.2+sha512.415a1cc25974731e75455c1468371be74c5aa5fb7621b50d4056d222451609f11412f23fd602e6169f1e060466641f798597e1be961a10688836a67b16569499",
@@ -14,7 +14,6 @@
    "nanoid": "^6.0.0"
  },
  "devDependencies": {
-    "@types/node": "catalog:",
    "ontime-types": "workspace:*",
    "typescript": "catalog:",
    "vitest": "catalog:"
@@ -4,10 +4,10 @@ packages:

 catalog:
  '@types/node': 22.19.11
-  rimraf: 6.1.3
-  ts-essentials: 10.2.1
+  rimraf: 6.0.1
+  ts-essentials: 10.1.1
  typescript: 7.0.2
-  vitest: 4.1.10
+  vitest: 4.0.17

 allowBuilds:
  '@parcel/watcher': true