Make cloneEntryData fail to compile when an entry shape changes

cloneEntryData relies on a spread plus a hand-written list of the nested containers to copy. Nothing tied that list to the real types, so adding a reference-typed field to an entry - or a new entry type - would silently produce a clone that aliases the new field back to the source, which is the exact bug the custom clone exists to avoid. Two compile-time guards, both verified by temporarily mutating the shared types: - ClonedReferenceFields declares, per entry type, the reference-typed fields the switch copies. UnclonedReferenceFields diffs that against the fields the types actually have, computed via ReferenceKeys. Adding `attachments: string[]` to OntimeEvent now fails with `Type '"attachments"' does not satisfy the constraint 'never'`, naming the offending field. Adding a primitive field stays silent, since the spread already copies it by value and no action is needed. - A default branch in the switch asserts the entry is never. Adding a SupportedEntry member fails with `Type 'OntimeMarker' is not assignable to type 'never'`, and separately at the ClonedReferenceFields index, which is no longer total. Branded primitives such as Day (number & Brand<'day'>) correctly classify as primitives, so they are not flagged. Typecheck, lint, format and the full suite (695 tests) pass unchanged.
Make createTransaction's rundown deep-readonly when not mutable
2026-08-24 08:29:14 +00:00 · 2026-08-23 19:59:56 +00:00 · 2026-08-23 18:19:18 +00:00 · 2026-08-23 16:21:53 +00:00 · 2026-08-23 13:42:21 +02:00 · 2026-08-23 13:28:24 +02:00
75 changed files with 2502 additions and 2718 deletions
@@ -4,7 +4,7 @@
  "private": true,
  "type": "module",
  "dependencies": {
-    "@base-ui/react": "1.6.0",
+    "@base-ui/react": "1.7.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": "^8.3.7",
+    "@mantine/hooks": "^9.5.1",
    "@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": "^8.21.3",
+    "@tanstack/react-table": "^9.1.2",
    "@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.6.0",
+    "react-icons": "5.7.0",
    "react-router": "^8.0.1",
    "react-virtuoso": "^4.18.7",
    "zustand": "^5.0.14"
@@ -60,7 +60,8 @@
    ]
  },
  "devDependencies": {
-    "@sentry/vite-plugin": "5.1.1",
+    "@sentry/vite-plugin": "5.4.0",
+    "@types/node": "catalog:",
    "@types/qrcode": "^1.5.6",
    "@types/react": "^19.1.12",
    "@types/react-dom": "^19.1.9",
@@ -72,8 +73,8 @@
    "ontime-utils": "workspace:*",
    "sass": "^1.57.1",
    "typescript": "catalog:",
-    "vite": "8.0.1",
-    "vite-plugin-compression2": "2.5.1",
+    "vite": "8.2.1",
+    "vite-plugin-compression2": "2.5.3",
    "vite-plugin-svgr": "4.5.0",
    "vitest": "catalog:"
  }
@@ -0,0 +1,6 @@
+.eyebrow {
+  font-size: $aux-text-size;
+  font-weight: 400;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
@@ -0,0 +1,13 @@
+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,7 +1,3 @@
-.separator {
-  border-color: $border-color-ondark;
-}
-
 .backdrop {
  position: fixed;
  inset: 0;
@@ -23,14 +19,15 @@

  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%);
@@ -50,22 +47,51 @@
 }

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

+.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;
 }

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

@@ -14,9 +14,11 @@ 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';
@@ -33,7 +35,7 @@ function NavigationMenu({ isOpen, onClose }: NavigationMenuProps) {
  const isSmallScreen = useIsSmallScreen();

  const [isRenameOpen, handlers] = useDisclosure(false);
-  const { fullscreen, toggle } = useFullscreen();
+  const { fullscreen, toggle } = useFullscreenDocument();
  const { mirror, toggleMirror } = useViewOptionsStore();
  const { keepAwake, toggleKeepAwake } = useKeepAwakeOptions();
  const location = useLocation();
@@ -52,75 +54,93 @@ function NavigationMenu({ isOpen, onClose }: NavigationMenuProps) {
        <RenameClientModal id={id} name={name} isOpen={isRenameOpen} onClose={handlers.close} />
        <Dialog.Popup className={style.drawer}>
          <div className={style.header}>
-            <Dialog.Title>Ontime</Dialog.Title>
-            <IconButton variant='subtle-white' size='large' onClick={onClose}>
+            <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}>
              <IoClose />
            </IconButton>
          </div>
          <div className={style.body}>
-            {supportsFullscreen && (
-              <NavigationMenuItem active={fullscreen} onClick={toggle}>
-                Toggle Fullscreen
-                {fullscreen ? <IoContract /> : <IoExpand />}
+            <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
              </NavigationMenuItem>
-            )}
-            <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>

-            <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) => (
+            <MenuGroup label='Ontime app'>
+              <EditorNavigation />
              <ClientLink
-                key={route.url}
-                to={route.url}
-                current={location.pathname === `/${route.url}`}
+                to='cuesheet'
+                current={location.pathname === '/cuesheet'}
                postAction={isSmallScreen ? onClose : undefined}
              >
-                {route.label}
+                <IoLockClosedOutline />
+                Cuesheet
              </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 && (
-            <div>
-              <OtherAddresses currentLocation={location.pathname} />
-            </div>
-          )}
+          {isLocalhost && <OtherAddresses currentLocation={location.pathname} />}
        </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();
@@ -129,8 +149,7 @@ function PresetNavigation({ isSmallScreen, onClose }: { isSmallScreen: boolean;
  if (navPresets.length === 0) return null;

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

 import { hasCustomParams } from '../../stores/savedViewParams';
@@ -15,21 +15,37 @@ 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, menuHandler] = useDisclosure();
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const { open: showEditFormDrawer } = useViewParamsEditorStore();
  const [searchParams] = useSearchParams();
  const hasSavedChanges = hasCustomParams(searchParams);

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

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

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

  cursor: pointer;

-  transition-property: color;
+  transition-property: color, background-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 {
-    color: $ontime-color;
-    background-color: $gray-1350;
+    background-color: $white-3;
+    color: $ui-white;
+
+    > svg {
+      color: $gray-300;
+    }
  }

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

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

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

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

 import style from './NavigationMenuItem.module.scss';
@@ -11,6 +11,7 @@ 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,
@@ -24,7 +25,9 @@ export default function NavigationMenuItem({
      role='button'
      onClick={onClick}
      onKeyDown={(event) => {
-        if (isKeyEnter(event)) {
+        if (isKeyEnter(event) || isKeySpace(event)) {
+          event.preventDefault();
+          event.stopPropagation();
          onClick();
        }
      }}
@@ -0,0 +1,23 @@
+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,22 +1,52 @@
+.footer {
+  flex: 0 0 auto;
+  padding: 0.75rem 0;
+  border-top: 1px solid $white-10;
+}
+
 .header {
-  font-size: calc(1rem - 2px);
-  margin-left: 1rem;
+  padding: 0 1.25rem 0.25rem;
  color: $gray-700;
 }

 .interfaces {
-  padding: 0.5rem 0.5rem;
+  padding: 0.25rem 1.25rem 0;
  display: flex;
  flex-wrap: wrap;
-  gap: 0.5rem;
+  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;
+    }
+  }
 }

 .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,6 +3,8 @@ 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';

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

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

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

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

          return (
-            <CopyTag key={nif.name} copyValue={address} onClick={() => openLink(address)} size='small'>
-              <span className={style.interfaceCopy}>
-                {nif.address} <IoArrowUp className={style.goIcon} />
-              </span>
-            </CopyTag>
+            <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>
          );
        })}
      </div>
-    </>
+    </div>
  );
 }
@@ -0,0 +1,31 @@
+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' },
+    ]);
+  });
+});
@@ -0,0 +1,6 @@
+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,6 +2,12 @@
  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,37 +1,77 @@
-.inline {
-  display: inline-flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 1rem;
+.multiOptionList {
+  overflow-y: auto;
+  max-height: 12rem;
+  background: $gray-1200;
+  border: 1px solid $gray-1100;
+  border-radius: $component-border-radius-md;
 }

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

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

-  &:active:not(:disabled) {
+  &:active {
    background: $gray-1100;
-    border-color: $gray-1250;
+  }
+
+  &: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;
+    }
  }

  &::after {
    content: '';
-    margin-left: 0.25rem;
-    width: 0.75em;
-    height: 0.75em;
+    flex: 0 0 auto;
+    margin-left: auto;
+    width: 0.625rem;
+    height: 0.625rem;
    background: var(--user-bg, $gray-900);
    border-radius: 50%;
  }
@@ -2,6 +2,7 @@ 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';
@@ -107,18 +108,20 @@ function MultiOption({ paramField, options }: EditFormMultiOptionProps) {
  return (
    <>
      <input name={id} hidden readOnly value={paramState.join(',')} />
-      <div className={style.inline}>
+      <div className={style.multiOptionList}>
        {values.map((option) => {
+          const selected = paramState.includes(option.value);
+
          return (
            <label
              key={option.value}
-              className={style.toggleSelect}
+              className={cx([style.toggleSelect, selected && style.selected])}
              style={{
                '--user-bg': option.colour,
              }}
            >
              <Checkbox
-                checked={paramState.includes(option.value)}
+                checked={selected}
                onCheckedChange={(checked) => toggleValue(option.value, checked as boolean)}
              />
              {option.label}
@@ -1,13 +1,3 @@
-.drawerFooter {
-  display: flex;
-  justify-content: end;
-  gap: $section-spacing;
-
-  button {
-    padding: 0 2em;
-  }
-}
-
 .backdrop {
  position: fixed;
  inset: 0;
@@ -34,11 +24,11 @@

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

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

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

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

+.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-inline: 1rem;
-  padding-bottom: 10vh;
+  padding: 1rem;
  overflow-y: auto;
 }

 .footer {
+  flex: 0 0 auto;
  display: flex;
-  padding-inline: 1rem;
+  padding: 0.75rem 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: 2rem;
-  padding-right: 0.5rem;
+  gap: 0.75rem;
 }

 .info {
@@ -4,6 +4,7 @@ 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';
@@ -71,8 +72,17 @@ function ViewParamsEditor({ target, viewOptions }: EditFormDrawerProps) {
        <Dialog.Backdrop className={style.backdrop} />
        <Dialog.Popup className={style.drawer}>
          <div className={style.header}>
-            <Dialog.Title>Customise</Dialog.Title>
-            <IconButton variant='subtle-white' size='large' data-testid='close-view-params' onClick={handleClose}>
+            <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}
+            >
              <IoClose />
            </IconButton>
          </div>
@@ -1,10 +1,21 @@
 .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;
-  flex-direction: column;
-  gap: 0.25rem;
-  padding: 1rem 0.5rem;
-  margin-bottom: 1rem;
+  align-items: center;
+
+  color: $gray-300;
+}
+
+.presetList {
+  border-top: 1px solid $white-7;
  max-height: 10rem;
  overflow-y: auto;
  scrollbar-gutter: stable;
@@ -14,12 +25,39 @@
  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 {
-    color: $blue-500;
+    background-color: $bg-active;
+    box-shadow: inset 3px 0 $blue-400;
+    color: $ui-white;
+    font-weight: 600;
  }
 }

+.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,6 +4,7 @@ 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';

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

  return (
    <div className={style.presetSection}>
-      {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 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>
    </div>
  );
 }
@@ -1,48 +1,118 @@
 .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;
-  height: 2rem;
+  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;

  &.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 {
-  margin-top: $section-spacing;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  row-gap: 0.25rem;
+  padding: 0.75rem 0;
  font-size: $inner-section-text-size;
-  color: $label-gray;
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
+
+  &: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;
+  }
 }

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

 .description {
-  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;
+  color: $gray-400;
+  font-size: $aux-text-size;
+  line-height: 1.4;
 }

 .hidden {
@@ -1,7 +1,9 @@
 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';
@@ -14,50 +16,74 @@ 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();

-  const handleCollapse = () => {
-    if (collapsible) {
-      setCollapsed((prev) => !prev);
-    }
-  };
+  // 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);

  return (
    <section className={style.section}>
-      {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 SectionContentsProps {
-  options: ParamField[];
-  collapsed: boolean;
-}
-
-function SectionContents({ options, collapsed }: SectionContentsProps) {
-  return (
-    <>
-      {options.map((option) => {
-        return (
-          <label key={option.title} className={cx([style.label, collapsed && style.hidden])}>
+      <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>
+    </section>
+  );
+}
+
+interface SectionHeaderProps {
+  title: string;
+  isCustomised: boolean;
+  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>;
+  }
+
+  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>
  );
 }

@@ -4,6 +4,10 @@ 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,5 +1,3 @@
-import { AppMode } from '../ontimeConfig';
-
 declare module '*.scss' {
  const content: Record<string, string>;
  export default content;
@@ -32,39 +30,6 @@ 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: rgba($blue-500, 0.16);
+    background-color: $bg-active;
    font-weight: 600;
  }

@@ -79,7 +79,7 @@ ul {
  &.active {
    color: $ui-white;
    border-left-color: $blue-400;
-    background-color: rgba($blue-500, 0.16);
+    background-color: $bg-active;
    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: rgba($blue-500, 0.16);
+    background-color: $bg-active;

    > td:first-child {
      box-shadow: inset 3px 0 $blue-400;
@@ -200,8 +200,7 @@ $card-padding: 2rem;
 .overlay {
  position: absolute;
  z-index: $zindex-backdrop;
-  width: 100%;
-  height: 100%;
+  inset: 0;
  backdrop-filter: blur(2px);
  display: grid;
  place-content: center;
@@ -0,0 +1,7 @@
+.updateIndicator {
+  width: 0.5em;
+  height: 0.5em;
+  flex: 0 0 auto;
+  border-radius: 99px;
+  background-color: $red-400;
+}
@@ -3,6 +3,8 @@ 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();

@@ -18,7 +20,12 @@ export default function AppVersion() {
    return (
      <Panel.ListItem>
        <Panel.Field
-          title={`Ontime ${appVersion}`}
+          title={
+            <>
+              <span className={style.updateIndicator} aria-hidden='true' />
+              {`Ontime ${appVersion}`}
+            </>
+          }
          description={
            isOntimeCloud
              ? `Version ${data.version} is available. Restart your stage to update.`
@@ -26,7 +33,7 @@ export default function AppVersion() {
          }
        />
        {!isOntimeCloud && (
-          <ExternalLink href={websiteUrl}>Visit Ontime's page to download the latest version.</ExternalLink>
+          <ExternalLink href={websiteUrl}>Download the latest version from Ontime's page</ExternalLink>
        )}
      </Panel.ListItem>
    );
@@ -12,20 +12,21 @@ 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: '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' },
+  { 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] },
 ];

 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,15 +1,14 @@
-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): ColumnDef<ExtendedEntry>[] {
+export function makeRundownColumns(customFields: CustomFields): CuesheetColumnDef[] {
  // 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,6 +48,7 @@ $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,12 +1,30 @@
-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' },
+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 = 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,14 +7,13 @@ import {
  useSensor,
  useSensors,
 } from '@dnd-kit/core';
-import { ColumnDef } from '@tanstack/react-table';
 import { PropsWithChildren } from 'react';

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

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

@@ -1,5 +1,5 @@
 import { useTableNav } from '@table-nav/react';
-import { ColumnDef, Table, getCoreRowModel, useReactTable } from '@tanstack/react-table';
+import { useTable } 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,12 +29,17 @@ 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: ColumnDef<ExtendedEntry>[];
+  columns: CuesheetColumnDef[];
  cuesheetMode: AppMode;
  source: RundownSource;
  insertElement?: ReactNode;
@@ -120,7 +125,8 @@ export default function CuesheetTable({
  const { columnSizing, setColumnSizing } = useColumnSizes(tableRoot);
  const { columnVisibility, setColumnVisibility } = useColumnVisibility(tableRoot);

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

@@ -195,7 +200,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
-  }, [table.getState().columnSizingInfo, table.getState().columnSizing]);
+  }, [columns, table.state.columnResizing, table.state.columnSizing]);

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

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

@@ -1,16 +1,16 @@
 import { SortableContext, horizontalListSortingStrategy } from '@dnd-kit/sortable';
-import { HeaderGroup, flexRender } from '@tanstack/react-table';
+import { 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: HeaderGroup<ExtendedEntry>;
+  headerGroup: CuesheetHeaderGroup;
  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.column.columnDef.header, header.getContext())}
+              {header.isPlaceholder ? null : <FlexRender header={header} />}
            </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.column.columnDef.header, header.getContext())}
+            {header.isPlaceholder ? null : <FlexRender header={header} />}
          </TableCell>
        );
      })}
@@ -1,14 +1,14 @@
-import { Table, flexRender } from '@tanstack/react-table';
-import { EntryId, OntimeEntry, RGBColour, SupportedEntry } from 'ontime-types';
+import { FlexRender } from '@tanstack/react-table';
+import { EntryId, 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: Table<ExtendedEntry<OntimeEntry>>;
+  table: CuesheetTable;
  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.column.columnDef.cell, cell.getContext())}
+              <FlexRender cell={cell} />
            </td>
          );
        })}
@@ -1,12 +1,12 @@
-import { Table, flexRender } from '@tanstack/react-table';
+import { 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: Table<ExtendedEntry>;
+  table: CuesheetTable;
  injectedStyles?: CSSProperties;
  hasCursor?: boolean;
 }
@@ -76,7 +76,7 @@ function GroupRow({
              }}
              role='cell'
            >
-              {flexRender(cell.column.columnDef.cell, cell.getContext())}
+              <FlexRender cell={cell} />
            </td>
          );
        })}
@@ -1,14 +1,14 @@
-import { Table, flexRender } from '@tanstack/react-table';
+import { 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: Table<ExtendedEntry>;
+  table: CuesheetTable;
  injectedStyles?: CSSProperties;
  hasCursor?: boolean;
 }
@@ -102,7 +102,7 @@ function MilestoneRow({
              }}
              tabIndex={-1}
            >
-              {canRender && flexRender(cell.column.columnDef.cell, cell.getContext())}
+              {canRender && <FlexRender cell={cell} />}
            </td>
          );
        })}
@@ -1,9 +1,8 @@
 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 { ExtendedEntry } from '../../../../common/utils/rundownMetadata';
+import type { CuesheetHeaderCell } from '../cuesheetTable.features';

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

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

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

 export function Draggable({ header }: DraggableProps) {
@@ -1,4 +1,3 @@
-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';
@@ -8,6 +7,7 @@ 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: CellContext<ExtendedEntry, unknown>['column']): string {
+function getColumnLabel(column: CuesheetCellContext['column']): string {
  return typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id;
 }

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

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

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

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

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

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

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

-function MakeCustomField({ row, column, table }: CellContext<ExtendedEntry, unknown>) {
+function MakeCustomField({ row, column, table }: CuesheetCellContext) {
  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,
-): ColumnDef<ExtendedEntry>[] {
-  const columnsDef: ColumnDef<ExtendedEntry>[] = [];
+): CuesheetColumnDef[] {
+  const columnsDef: CuesheetColumnDef[] = [];
  const { canRead, canWrite } = getCuesheetColumnAccessPolicy(preset, cuesheetMode);

  if (canRead('flag')) {
@@ -2,7 +2,6 @@ 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';

@@ -10,9 +9,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';
@@ -37,7 +36,7 @@ type TableModeControls = {
 };

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

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

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

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

    .apart::before {
      content: 'BACKGROUND EDIT';
@@ -0,0 +1,74 @@
+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 { ColumnDef, ColumnSizingState, Updater } from '@tanstack/react-table';
+import { 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 { ExtendedEntry } from '../../../common/utils/rundownMetadata';
+import type { CuesheetColumnDef } from './cuesheetTable.features';

 type TableRoot = 'editor' | 'cuesheet';

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

-export function useColumnOrder(columns: ColumnDef<ExtendedEntry>[], tableRoot: TableRoot = 'cuesheet') {
+export function useColumnOrder(columns: CuesheetColumnDef[], 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.9.1",
-    "wait-on": "^7.2.0"
+    "electron-builder": "26.15.3",
+    "wait-on": "^9.0.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__manage&new=true'),
+        click: () => redirectWindow('/editor?settings=project__create'),
      },
      {
        label: 'Load...',
@@ -202,6 +202,18 @@ 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": "^16.0.1",
+    "dotenv": "^17.0.0",
    "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.24.0",
+    "esbuild": "^0.28.0",
    "ontime-types": "workspace:*",
    "server-timing": "^3.3.3",
    "ts-essentials": "catalog:",
-    "tsx": "^4.19.2",
+    "tsx": "^4.23.12",
    "typescript": "catalog:",
    "vitest": "catalog:"
  },
@@ -27,6 +27,7 @@ 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';
@@ -34,6 +35,7 @@ import { ProcessedRundownMetadata, makeRundownMetadata } from './rundown.parser.
 import type { RundownMetadata } from './rundown.types.js';
 import {
  applyPatchToEntry,
+  cloneRundown,
  cloneSimpleRundownEntry,
  deleteById,
  doesInvalidateMetadata,
@@ -79,9 +81,16 @@ export const getRundownMetadata = (): Readonly<RundownMetadata> => rundownMetada
 export const getProjectCustomFields = (): Readonly<CustomFields> => projectCustomFields;
 export const getEntryWithId = (entryId: EntryId): OntimeEntry | undefined => cachedRundown.entries[entryId];

-type Transaction = {
+/**
+ * @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> = {
  customFields: CustomFields;
-  rundown: Rundown;
+  rundown: R;

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

-export function createTransaction(options: TransactionOptions): Transaction {
+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>> {
  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 ? structuredClone(sourceRundown) : sourceRundown;
+  const rundown = options.mutableRundown ? cloneRundown(sourceRundown) : sourceRundown;
  const customFields = options.mutableCustomFields ? structuredClone(projectCustomFields) : projectCustomFields;

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

@@ -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 } from './rundown.utils.js';
+import { calculateDayOffset, cleanupCustomFields, cloneEntryData } 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 : structuredClone(entry), childOfGroup);
+    return processEntry(rundownMeta, customFields, mutate ? entry : cloneEntryData(entry), childOfGroup);
  }

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

-  const duplicatedRundown: Rundown = structuredClone(rundown);
+  const duplicatedRundown: Rundown = cloneRundown(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] = structuredClone({ ...merged, ...structure });
+    entries[id] = cloneEntryData({ ...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,6 +499,97 @@ export function cloneSimpleRundownEntry(entry: OntimeEntry, newId: EntryId): Ont
  throw new Error(`Unsupported entry type for cloning: ${entry}`);
 }

+type Primitive = string | number | boolean | bigint | symbol | null | undefined;
+
+/**
+ * The keys of `T` holding a reference (object or array) rather than a primitive: exactly the
+ * fields a shallow spread aliases instead of copying, and so exactly the fields
+ * `cloneEntryData` has to give a fresh copy to.
+ * Branded primitives (eg. `Day`) resolve as primitives, which is what we want - they are
+ * plain numbers at runtime.
+ */
+type ReferenceKeys<T> = { [K in keyof T]-?: T[K] extends Primitive ? never : K }[keyof T];
+
+/** The member of the `OntimeEntry` union carrying a given `type` tag */
+type EntryOfType<K extends SupportedEntry> = Extract<OntimeEntry, { type: K }>;
+
+/**
+ * The reference-typed fields that `cloneEntryData` below gives a fresh copy to, per entry type.
+ * This is the one place to update when an entry gains or loses such a field - the shape is
+ * checked against the real types by `UnclonedReferenceFields`.
+ */
+type ClonedReferenceFields = {
+  [SupportedEntry.Event]: 'custom' | 'triggers';
+  [SupportedEntry.Group]: 'custom' | 'entries';
+  [SupportedEntry.Milestone]: 'custom';
+  [SupportedEntry.Delay]: never;
+};
+
+/**
+ * Every reference-typed field `cloneEntryData` would alias instead of copy. Stays `never`
+ * while the clone is complete, so `AssertEntryClonesEveryReference` fails the build when:
+ * - an entry type gains a reference-typed field -> the field name resolves here, and is
+ *   named in the error, until it is copied in the switch and listed above
+ * - `SupportedEntry` gains a member -> indexing `ClonedReferenceFields` fails here
+ * A new primitive field needs no action: the spread already copies it by value.
+ */
+type UnclonedReferenceFields = {
+  [K in SupportedEntry]: Exclude<ReferenceKeys<EntryOfType<K>>, ClonedReferenceFields[K]>;
+}[SupportedEntry];
+
+type AssertNever<T extends never> = T;
+
+/**
+ * Compile-time guard only, with no runtime meaning - see `UnclonedReferenceFields`.
+ * Exported because `noUnusedLocals` rejects an unreferenced local type.
+ */
+export type AssertEntryClonesEveryReference = AssertNever<UnclonedReferenceFields>;
+
+/**
+ * Fast, shape-aware clone of a single entry, preserving its identity (id, revision, etc).
+ * Drop-in replacement for `structuredClone(entry)`: the generic structured-clone
+ * algorithm does far more work than the plain object spreads an entry this shallow needs.
+ */
+export function cloneEntryData<T extends OntimeEntry>(entry: T): T {
+  switch (entry.type) {
+    case SupportedEntry.Event:
+      return { ...entry, custom: { ...entry.custom }, triggers: entry.triggers?.slice() ?? [] } as T;
+    case SupportedEntry.Group:
+      return { ...entry, custom: { ...entry.custom }, entries: entry.entries?.slice() ?? [] } as T;
+    case SupportedEntry.Milestone:
+      return { ...entry, custom: { ...entry.custom } } 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,9 +464,8 @@ 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;
-      const entry = isGroupEnd
-        ? ({ id: entryId, type: SupportedEntry.Group } as OntimeGroup)
-        : structuredClone(rundown.entries[id]);
+      // 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];
      updateRundown.push(cellRequestFromEvent(entry, index, worksheetId, sheetMetadata));
    });
  } catch (e) {
@@ -1,21 +0,0 @@
-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,12 +20,9 @@ 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,7 +13,6 @@ 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
@@ -102,7 +101,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`, makeMcpAuthenticate(authenticate), mcpRouter); // router for MCP agent integration
+app.use(`${prefix}/mcp`, authenticate, mcpRouter); // router for MCP agent integration

 // serve static external files
 app.use(
@@ -12,6 +12,7 @@ import {
  ViewSettings,
 } from 'ontime-types';

+import { cloneRundown } from '../../api-data/rundown/rundown.utils.js';
 import { isTest } from '../../setup/environment.js';
 import { shouldCrashDev } from '../../utils/development.js';
 import { isPath } from '../../utils/fileManagement.js';
@@ -102,7 +103,7 @@ function getCustomFields(): Readonly<CustomFields> {
 }

 async function setRundown(rundownKey: string, newData: Rundown): ReadonlyPromise<ProjectRundowns> {
-  db.data.rundowns[rundownKey] = structuredClone(newData);
+  db.data.rundowns[rundownKey] = cloneRundown(newData);
  await persist();
  return db.data.rundowns;
 }
@@ -4,12 +4,17 @@ import { DatabaseModel } from 'ontime-types';
 * Merges a partial ontime project into a given ontime project
 */
 export function safeMerge(existing: DatabaseModel, newData: Partial<DatabaseModel>): DatabaseModel {
-  const deepExisting = structuredClone(existing);
-  const deepNewData = structuredClone(newData);
+  // 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);

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

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

-import { isPublicAssetRequest } from '../authenticate.js';
+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');
+    },
+  };
+}

 describe('isPublicAssetRequest()', () => {
  it('allows root public assets without a prefix', () => {
@@ -18,3 +43,144 @@ 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,17 +77,16 @@ export function makeAuthenticateMiddleware(prefix: string) {
  const loginRedirectBase = `${prefix}/login?redirect=`;

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

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

    res.status(401).send('Unauthorized');
@@ -105,17 +104,17 @@ export function makeAuthenticateMiddleware(prefix: string) {
      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();
-      }
+    if (getTokenFromCookies(req.cookies) === hashedPassword) {
+      return next();
+    }
+
+    if (getTokenFromAuthHeader(req.headers.authorization) === 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 (req.query.token === hashedPassword) {
+    if (getTokenFromParams(req.query) === hashedPassword) {
      if (hashedPassword !== undefined) {
        setSessionCookie(res, hashedPassword, prefix);
      }
@@ -136,33 +135,16 @@ export function authenticateSocket(_ws: WebSocket, req: IncomingMessage, next: (
    return next();
  }

-  // 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}`)) {
+  if (getTokenFromCookies(req.headers.cookie) === 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
+  if (getTokenFromAuthHeader(req.headers.authorization) === hashedPassword) {
+    return next();
+  }
+
+  if (getTokenFromParams(req.url, req.headers.host) === hashedPassword) {
+    return next();
  }

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

-/**
- * 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 + '}"';
+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 + '"';
  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') {
@@ -203,3 +184,19 @@ function getTokenFromCookie(cookieContents: string): string | undefined {
    // 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,7 +1,6 @@
-import { EndAction, Instant, Playback, TimeOfDay, TimeStrategy, TimerPhase, TimerType } from 'ontime-types';
+import { EndAction, 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,
@@ -54,12 +53,11 @@ 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: timeCore.toInstant((7 * MILLIS_PER_MINUTE) as TimeOfDay, timeCore.now()),
+        pausedAt: 7 * MILLIS_PER_MINUTE,
        pausedDuration: 1 * MILLIS_PER_MINUTE,
      },
    } as RuntimeState;
@@ -977,40 +975,6 @@ 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,6 +20,7 @@ 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';
@@ -754,7 +755,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] = structuredClone(currentEntry);
+      RuntimeService.previousState[key] = currentEntry ? cloneEntryData(currentEntry) : null;
      return true;
    }

@@ -1,7 +1,6 @@
 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';

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

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

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

  return Math.max(0, activeElapsed);
 }
@@ -1,11 +1,10 @@
-import { Instant, OffsetMode, Playback, type TimeOfDay, TimerPhase } from 'ontime-types';
+import { 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._now);
+      expect(newState._timer.pausedAt).toEqual(newState.clock);

      success = pause();
      expect(success).toBe(false);
@@ -248,59 +248,6 @@ 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,9 +63,7 @@ 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<Instant>;
-
-    /** Accumulate pause duration but dose not include the current pause */
+    pausedAt: Maybe<TimeOfDay>;
    pausedDuration: number;
    secondaryTarget: Maybe<TimeOfDay>;
    hasFinished: boolean;
@@ -78,12 +76,10 @@ 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,
@@ -108,12 +104,6 @@ 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 {
@@ -146,7 +136,7 @@ export function clearEventData() {
  runtimeState.rundown.selectedEventIndex = null;

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

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

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

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

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

  // add paused time if it exists
  if (state._timer.pausedAt) {
-    const timeToAdd = state._now - state._timer.pausedAt;
+    const timeToAdd = state.clock - state._timer.pausedAt;
    state.timer.addedTime += timeToAdd;
    state._timer.pausedDuration += timeToAdd;
    state._timer.pausedAt = null;
@@ -454,7 +447,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 = state._now;
+    state._startEpoch = epoch;
    state.rundown.actualStart = state.clock;
  }

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

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

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

  // 1. is playback idle?
  if (!isPlaybackActive(runtimeState.timer.playback)) {
@@ -563,13 +558,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, runtimeState._now);
+    const daysSinceStart = timeCore.daysSinceStart(runtimeState._startEpoch, epoch);
    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, runtimeState.clock);
+    const clockHasCrossedMidnight = hasCrossedMidnight(previousClock, now);
    return updateIfWaitingToRoll(clockHasCrossedMidnight);
  }

@@ -48,6 +48,47 @@ 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,6 +6,25 @@ 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.getByRole('button', { name: 'Applied' })).toBeVisible();
+    await expect(page.getByText('Current')).toBeVisible();

    // 2. the URL contains the preset
    expect(page.url().includes('hideTimerSeconds=true')).toBeTruthy();
@@ -13,3 +13,28 @@ 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.60.0",
+    "@playwright/test": "1.62.1",
    "@types/node": "catalog:",
    "cross-env": "^7.0.3",
-    "oxfmt": "^0.42.0",
-    "oxlint": "^1.57.0",
-    "oxlint-tsgolint": "^0.17.4",
+    "oxfmt": "^0.63.0",
+    "oxlint": "^1.78.0",
+    "oxlint-tsgolint": "^7.0.2001",
    "rimraf": "catalog:",
-    "turbo": "2.8.20",
+    "turbo": "2.10.10",
    "typescript": "catalog:"
  },
  "packageManager": "pnpm@11.1.2+sha512.415a1cc25974731e75455c1468371be74c5aa5fb7621b50d4056d222451609f11412f23fd602e6169f1e060466641f798597e1be961a10688836a67b16569499",
@@ -14,6 +14,7 @@
    "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.0.1
-  ts-essentials: 10.1.1
+  rimraf: 6.1.3
+  ts-essentials: 10.2.1
  typescript: 7.0.2
-  vitest: 4.0.17
+  vitest: 4.1.10

 allowBuilds:
  '@parcel/watcher': true
Author	SHA1	Message	Date
Claude	45487985be	Make cloneEntryData fail to compile when an entry shape changes cloneEntryData relies on a spread plus a hand-written list of the nested containers to copy. Nothing tied that list to the real types, so adding a reference-typed field to an entry - or a new entry type - would silently produce a clone that aliases the new field back to the source, which is the exact bug the custom clone exists to avoid. Two compile-time guards, both verified by temporarily mutating the shared types: - ClonedReferenceFields declares, per entry type, the reference-typed fields the switch copies. UnclonedReferenceFields diffs that against the fields the types actually have, computed via ReferenceKeys. Adding `attachments: string[]` to OntimeEvent now fails with `Type '"attachments"' does not satisfy the constraint 'never'`, naming the offending field. Adding a primitive field stays silent, since the spread already copies it by value and no action is needed. - A default branch in the switch asserts the entry is never. Adding a SupportedEntry member fails with `Type 'OntimeMarker' is not assignable to type 'never'`, and separately at the ClonedReferenceFields index, which is no longer total. Branded primitives such as Day (number & Brand<'day'>) correctly classify as primitives, so they are not flagged. Typecheck, lint, format and the full suite (695 tests) pass unchanged.	2026-08-23 19:59:56 +00:00
Claude	c6c25cebcc	Make createTransaction's rundown deep-readonly when not mutable Overload createTransaction() on the literal mutableRundown option: with mutableRundown: true it returns rundown: Rundown as before; otherwise it returns rundown: DeepReadonly<Rundown> (ts-essentials, already a convention in this codebase for read-only snapshots). Previously a non-mutable transaction's rundown was typed as plain Rundown even though it's the live cachedRundown reference itself (or a background rundown read straight from disk) - nothing stopped a future mutation function from writing into it outside the commit() flow, since Readonly<T> (used elsewhere for the same purpose) only blocks top-level reassignment, not nested writes like array.push() or entry.field = x. Scoped to rundown.dao.ts only: every existing call site in rundown.service.ts passes a literal mutableRundown: true, so this changes no call-site types. The one mutableRundown: false site doesn't destructure rundown at all. Verified with a throwaway probe file (removed) that mutating a non-mutable transaction's rundown is now a compile error, and that a mutable one still compiles as before. Typecheck, lint and full test suite (695 tests) pass unchanged.	2026-08-23 18:19:18 +00:00
Claude	b1059e7bff	Replace structuredClone with shape-aware clones in rundown/data hot paths structuredClone's generic serialization algorithm does far more work than plain object spreads need for these known shapes. Adds cloneEntryData() and cloneRundown() as drop-in replacements (same "independent copy" contract, same call sites) and swaps them in everywhere a rundown or a single entry was being deep-cloned via structuredClone: - createTransaction()/init() in rundown.dao.ts - the main per-mutation clone - DataProvider.setRundown() - was re-cloning the whole rundown a second time on every single commit - rundown.service.ts background-rundown clones (custom field rename/remove, duplicateExistingRundown) - the per-entry clone in processRundown's non-mutating path (rundown.parser.ts) - mergeRundownPreservingFields's per-entry clone Also: - safeMerge() (DataProvider.utils.ts) was deep-cloning the entire DatabaseModel, including all rundowns, just to read a handful of small config properties that never touch rundowns - it now only clones the properties it actually merges. - sheets.service.ts's per-row clone before building a (read-only) Google Sheets cell request was unnecessary and is removed. - runtime.service.ts's previous-state snapshot for eventNow/eventNext/ eventFlag/groupNow now uses cloneEntryData. Benchmarked on a synthetic 1000-event rundown: a cue-only edit (no reprocessing needed) went from ~5ms to ~1.2ms end to end, including the DataProvider clone. Verified against the existing test suite (695 passing) plus typecheck and lint.	2026-08-23 16:21:53 +00:00
Carlos Valente	a84b8b5530	refactor(ui): polish navigation menu and view params editor	2026-08-23 13:42:21 +02:00
Carlos Valente	c19aa4ca28	fix(cuesheet): prevent stale column width on refresh	2026-08-23 13:28:24 +02:00
Carlos Valente	805663e2ea	chore(deps): migrate to @tanstack/react-table v9	2026-08-23 13:28:24 +02:00
Carlos Valente	0f0b32d444	accept bearer token	2026-08-21 20:52:11 +02:00
Carlos Valente	703dee35a4	style: bump oxfmt to 0.63 and reformat	2026-08-18 13:56:53 +02:00
Carlos Valente	2a7f5b7872	chore(deps): upgrade dependencies	2026-08-18 13:56:53 +02:00
Carlos Valente	c6eccec30e	refactor(settings): show new app indicator	2026-08-09 16:48:20 +02:00
Carlos Valente	5220c2c374	fix(settings): prevent loader overflow	2026-08-09 16:48:20 +02:00
Carlos Valente	4eeeb294f7	chore: update electron navigation	2026-08-09 16:48:20 +02:00