refactor: UI indexes are 1 based

2026-07-26 10:38:55 +00:00 · 2025-03-28 22:18:22 +01:00
76 changed files with 576 additions and 1772 deletions
@@ -1,6 +1,6 @@
 {
    "name": "@getontime/cli",
-    "version": "3.15.2",
+    "version": "3.14.3",
    "author": "Carlos Valente",
    "description": "Time keeping for live events",
    "repository": "https://github.com/cpvalente/ontime",
@@ -1,6 +1,6 @@
 {
  "name": "ontime-ui",
-  "version": "3.15.2",
+  "version": "3.14.3",
  "private": true,
  "type": "module",
  "dependencies": {
@@ -17,13 +17,12 @@
    "@table-nav/react": "^0.0.7",
    "@tanstack/react-query": "^5.62.7",
    "@tanstack/react-query-devtools": "^5.62.7",
-    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-table": "^8.20.5",
    "autosize": "^6.0.1",
    "axios": "^1.2.0",
    "color": "^4.2.3",
    "csv-stringify": "^6.4.5",
    "framer-motion": "^10.10.0",
-    "prismjs": "^1.29.0",
    "react": "^18.3.1",
    "react-colorful": "^5.6.1",
    "react-dom": "^18.3.1",
@@ -32,7 +31,6 @@
    "react-icons": "5.4.0",
    "react-qr-code": "^2.0.12",
    "react-router-dom": "^6.3.0",
-    "react-simple-code-editor": "^0.14.1",
    "web-vitals": "^3.1.1",
    "zustand": "^5.0.3"
  },
@@ -67,7 +65,6 @@
    "@sentry/vite-plugin": "^2.16.1",
    "@tanstack/eslint-plugin-query": "^5.8.4",
    "@types/color": "^3.0.3",
-    "@types/prismjs": "^1.26.5",
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.10",
    "@typescript-eslint/eslint-plugin": "catalog:",
@@ -1,30 +0,0 @@
-import axios from 'axios';
-
-import { apiEntryUrl } from './constants';
-
-const assetsPath = `${apiEntryUrl}/assets`;
-
-/**
- * HTTP request to get css contents
- */
-export async function getCSSContents(): Promise<string> {
-  const res = await axios.get(`${assetsPath}/css`);
-  return res.data;
-}
-
-/**
- * HTTP request to post css contents
- */
-export async function postCSSContents(css: string): Promise<void> {
-  await axios.post(`${assetsPath}/css`, {
-    css,
-  });
-}
-
-/**
- * HTTP request to restore default css
- */
-export async function restoreCSSContents(): Promise<string> {
-  const res = await axios.post(`${assetsPath}/css/restore`);
-  return res.data;
-}
@@ -3,9 +3,8 @@
  font-size: $text-body-size;
  text-decoration: underline;
  text-underline-offset: 2px;
-  color: $blue-400;

  &:hover {
-    color: $blue-500;
+    color: $blue-400;
  }
 }
@@ -4,10 +4,10 @@ import type { MultiselectOptions, ParamField } from './types';

 export const makeOptionsFromCustomFields = (
  customFields: CustomFields,
-  additionalOptions: Readonly<Record<string, string>> = {},
+  additionalOptions: Record<string, string> = {},
  filterImageType = true,
 ) => {
-  const options = { ...additionalOptions };
+  const options = structuredClone(additionalOptions);
  for (const [key, value] of Object.entries(customFields)) {
    if (filterImageType && value.type === 'image') {
      continue;
@@ -1,4 +1,4 @@
-import { OffsetMode, RuntimeStore, SimpleDirection, SimplePlayback, TimerMessage } from 'ontime-types';
+import { RuntimeStore, SimpleDirection, SimplePlayback, TimerMessage } from 'ontime-types';

 import { useRuntimeStore } from '../stores/runtime';
 import { socketSendJson } from '../utils/socket';
@@ -160,7 +160,7 @@ export const useRuntimePlaybackOverview = createSelector((state: RuntimeStore) =

  numEvents: state.runtime.numEvents,
  selectedEventIndex: state.runtime.selectedEventIndex,
-  offset: state.runtime.offsetMode === OffsetMode.Absolute ? state.runtime.offset : state.runtime.relativeOffset,
+  offset: state.runtime.offset,

  currentBlock: state.currentBlock,
 }));
@@ -172,11 +172,8 @@ export const useTimelineStatus = createSelector((state: RuntimeStore) => ({

 export const useTimeUntilData = createSelector((state: RuntimeStore) => ({
  clock: state.clock,
-  offset: state.runtime.offsetMode === OffsetMode.Absolute ? state.runtime.offset : state.runtime.relativeOffset,
-  offsetMode: state.runtime.offsetMode,
+  offset: state.runtime.offset,
  currentDay: state.eventNow?.dayOffset ?? 0, //The day of the currently running event
-  actualStart: state.runtime.actualStart,
-  plannedStart: state.runtime.plannedStart,
 }));

 export const useRuntimeOffset = createSelector((state: RuntimeStore) => ({
@@ -192,12 +189,6 @@ export const useIsOnline = createSelector((state: RuntimeStore) => ({
  isOnline: state.ping > 0,
 }));

-export const useOffsetMode = createSelector((state: RuntimeStore) => ({
-  offsetMode: state.runtime.offsetMode,
-}));
-
-export const setOffsetMode = (payload: OffsetMode) => socketSendJson('offsetmode', payload);
-
 export const usePlayback = () => {
  const featureSelector = (state: RuntimeStore) => ({
    playback: state.timer.playback,
@@ -1,6 +1,3 @@
-import { OffsetMode } from 'ontime-types';
-import { dayInMs } from 'ontime-utils';
-
 import { calculateTimeUntilStart, formatTime, nowInMillis } from '../time';

 describe('nowInMillis()', () => {
@@ -43,255 +40,82 @@ describe('formatTime()', () => {
 });

 describe('calculateTimeUntilStart()', () => {
-  describe('Absolute offset mode', () => {
-    test('ontime', () => {
-      const test = {
-        timeStart: 100,
-        dayOffset: 0,
-        delay: 0,
-        currentDay: 0,
-        totalGap: 0,
-        clock: 90,
-        offset: 0,
-        offsetMode: OffsetMode.Absolute,
-        actualStart: null,
-        plannedStart: null,
-      };
-
-      expect(calculateTimeUntilStart({ ...test, isLinkedToLoaded: false })).toBe(10);
-      expect(calculateTimeUntilStart({ ...test, isLinkedToLoaded: true })).toBe(10);
-    });
-
-    test('running behind', () => {
-      const test = {
-        timeStart: 100,
-        dayOffset: 0,
-        delay: 0,
-        currentDay: 0,
-        totalGap: 0,
-        clock: 90,
-        offset: -20,
-        offsetMode: OffsetMode.Absolute,
-        actualStart: null,
-        plannedStart: null,
-      };
-
-      expect(calculateTimeUntilStart({ ...test, isLinkedToLoaded: false })).toBe(30);
-      expect(calculateTimeUntilStart({ ...test, isLinkedToLoaded: true })).toBe(30);
-    });
-
-    test('running ahead', () => {
-      const test = {
-        timeStart: 100,
-        dayOffset: 0,
-        delay: 0,
-        currentDay: 0,
-        totalGap: 0,
-        clock: 80,
-        offset: 10,
-        offsetMode: OffsetMode.Absolute,
-        actualStart: null,
-        plannedStart: null,
-      };
-
-      expect(calculateTimeUntilStart({ ...test, isLinkedToLoaded: false })).toBe(20); // <-- when running ahead the unlinked timer stays put
-      expect(calculateTimeUntilStart({ ...test, isLinkedToLoaded: true })).toBe(10);
-    });
-
-    test('running behind with enough gaps', () => {
-      const test = {
-        timeStart: 100,
-        dayOffset: 0,
-        delay: 0,
-        currentDay: 0,
-        totalGap: 20,
-        clock: 50,
-        offset: -20,
-        offsetMode: OffsetMode.Absolute,
-        actualStart: null,
-        plannedStart: null,
-      };
-
-      expect(calculateTimeUntilStart({ ...test, isLinkedToLoaded: false })).toBe(50); // <-- when gap is enough to compensate for the running behind
-      expect(calculateTimeUntilStart({ ...test, isLinkedToLoaded: true })).toBe(70); // This should not be possible
-    });
-
-    test('running behind with too little gaps', () => {
-      const test = {
-        timeStart: 100,
-        dayOffset: 0,
-        delay: 0,
-        currentDay: 0,
-        totalGap: 10,
-        clock: 50,
-        offset: -20,
-        offsetMode: OffsetMode.Absolute,
-        actualStart: 0,
-        plannedStart: 0,
-      };
-
-      expect(calculateTimeUntilStart({ ...test, isLinkedToLoaded: false })).toBe(60); // <-- when gap is not enough to compensate for the running behind it absorbs at much as possible
-      expect(calculateTimeUntilStart({ ...test, isLinkedToLoaded: true })).toBe(70); // This should not be possible
-    });
-  });
-
-  describe('Relative offset mode', () => {
-    test('basic function', () => {
-      const test = {
-        timeStart: 0,
-        dayOffset: 0,
-        delay: 0,
-        currentDay: 0,
-        totalGap: 0,
-        clock: 100,
-        actualStart: 100,
-        plannedStart: 0,
-        offset: 0,
-        offsetMode: OffsetMode.Relative,
-      };
-
-      const timeStartEvent2 = 10;
-      const timeStartEvent3 = 20;
-
-      //event 1 is the currently running event
-
-      //event 2
-      expect(calculateTimeUntilStart({ ...test, timeStart: timeStartEvent2, isLinkedToLoaded: true })).toBe(10);
-      expect(calculateTimeUntilStart({ ...test, timeStart: timeStartEvent2, isLinkedToLoaded: false })).toBe(10);
-
-      //event 3
-      expect(calculateTimeUntilStart({ ...test, timeStart: timeStartEvent3, isLinkedToLoaded: true })).toBe(20);
-      expect(calculateTimeUntilStart({ ...test, timeStart: timeStartEvent3, isLinkedToLoaded: false })).toBe(20);
-
-      // When clock advances by 5ms, time until start should decrease by 5ms
-      test.clock = 105;
-
-      //event 2
-      expect(calculateTimeUntilStart({ ...test, timeStart: timeStartEvent2, isLinkedToLoaded: true })).toBe(5);
-      expect(calculateTimeUntilStart({ ...test, timeStart: timeStartEvent2, isLinkedToLoaded: false })).toBe(5);
-
-      //event 3
-      expect(calculateTimeUntilStart({ ...test, timeStart: timeStartEvent3, isLinkedToLoaded: true })).toBe(15);
-      expect(calculateTimeUntilStart({ ...test, timeStart: timeStartEvent3, isLinkedToLoaded: false })).toBe(15);
-    });
-
-    test('gaps', () => {
-      const test = {
-        timeStart: 20,
-        dayOffset: 0,
-        delay: 0,
-        currentDay: 0,
-        totalGap: 10,
-        clock: 100,
-        actualStart: 100,
-        plannedStart: 0,
-        offset: 0,
-        offsetMode: OffsetMode.Relative,
-      };
-
-      expect(calculateTimeUntilStart({ ...test, isLinkedToLoaded: true })).toBe(20);
-      expect(calculateTimeUntilStart({ ...test, isLinkedToLoaded: false })).toBe(20);
-
-      // When clock advances by 5ms, time until start should decrease by 5ms
-      test.clock = 105;
-      expect(calculateTimeUntilStart({ ...test, isLinkedToLoaded: true })).toBe(15);
-      expect(calculateTimeUntilStart({ ...test, isLinkedToLoaded: false })).toBe(15);
-    });
-
-    test('added/remove time', () => {
-      const test = {
-        timeStart: 20,
-        dayOffset: 0,
-        delay: 0,
-        currentDay: 0,
-        totalGap: 0,
-        clock: 100,
-        actualStart: 100,
-        plannedStart: 0,
-        offset: 0,
-        offsetMode: OffsetMode.Relative,
-      };
-
-      expect(calculateTimeUntilStart({ ...test, isLinkedToLoaded: true })).toBe(20);
-      expect(calculateTimeUntilStart({ ...test, isLinkedToLoaded: false })).toBe(20);
-
-      test.offset = 5; // remove 5 with addtime - we are ahead of time
-
-      expect(calculateTimeUntilStart({ ...test, isLinkedToLoaded: true })).toBe(15);
-      expect(calculateTimeUntilStart({ ...test, isLinkedToLoaded: false })).toBe(20); // unlocked evets will stay on schedule
-
-      test.offset = -5; // add 5 with addtime - we are behind
-
-      expect(calculateTimeUntilStart({ ...test, isLinkedToLoaded: true })).toBe(25);
-      expect(calculateTimeUntilStart({ ...test, isLinkedToLoaded: false })).toBe(25);
-    });
-
-    test('next day', () => {
-      const test = {
-        delay: 0,
-        currentDay: 0,
-        clock: 100,
-        actualStart: 100,
-        plannedStart: 0,
-        offset: 0,
-        offsetMode: OffsetMode.Relative,
-      };
-
-      // this event will start the current day
-      expect(
-        calculateTimeUntilStart({
-          ...test,
-          timeStart: 10,
-          dayOffset: 0,
-          totalGap: 0,
-          isLinkedToLoaded: false,
-        }),
-      ).toBe(10);
-
-      // this event will start the next day
-      // in absolute mode this would start in dayInMs - 100 since the gap would compensate
-      // but in relative mode with and actual start that is 100 offset it starts in dayInMs
-      expect(
-        calculateTimeUntilStart({
-          ...test,
-          timeStart: 0,
-          dayOffset: 1,
-          totalGap: dayInMs - 20,
-          isLinkedToLoaded: false,
-        }),
-      ).toBe(dayInMs);
-
-      // advancing 100ms
-      test.clock = 200;
-
-      expect(
-        calculateTimeUntilStart({
-          ...test,
-          timeStart: 0,
-          dayOffset: 1,
-          totalGap: dayInMs - 20,
-          isLinkedToLoaded: false,
-        }),
-      ).toBe(dayInMs - 100);
-    });
-  });
-
-  test('overlap with negative total gap', () => {
+  test('ontime', () => {
    const test = {
+      timeStart: 100,
      dayOffset: 0,
      delay: 0,
      currentDay: 0,
-      clock: 100,
-      actualStart: 100,
-      plannedStart: 0,
+      totalGap: 0,
+      clock: 90,
      offset: 0,
-      offsetMode: OffsetMode.Relative,
-      isLinkedToLoaded: false,
    };

-    // the overlap will be pushed out to the expected available time
-    expect(calculateTimeUntilStart({ ...test, timeStart: 5, totalGap: -5 })).toBe(10);
-
-    test.clock = 105;
+    expect(calculateTimeUntilStart({ ...test, isLinkedToLoaded: false })).toBe(10);
+    expect(calculateTimeUntilStart({ ...test, isLinkedToLoaded: true })).toBe(10);
  });
+
+  test('running behind', () => {
+    const test = {
+      timeStart: 100,
+      dayOffset: 0,
+      delay: 0,
+      currentDay: 0,
+      totalGap: 0,
+      clock: 90,
+      offset: -20,
+    };
+
+    expect(calculateTimeUntilStart({ ...test, isLinkedToLoaded: false })).toBe(30);
+    expect(calculateTimeUntilStart({ ...test, isLinkedToLoaded: true })).toBe(30);
+  });
+
+  test('running ahead', () => {
+    const test = {
+      timeStart: 100,
+      dayOffset: 0,
+      delay: 0,
+      currentDay: 0,
+      totalGap: 0,
+      clock: 80,
+      offset: 10,
+    };
+
+    expect(calculateTimeUntilStart({ ...test, isLinkedToLoaded: false })).toBe(20); // <-- when running ahead the unlinked timer stays put
+    expect(calculateTimeUntilStart({ ...test, isLinkedToLoaded: true })).toBe(10);
+  });
+
+  test('running behind with enough gaps', () => {
+    const test = {
+      timeStart: 100,
+      dayOffset: 0,
+      delay: 0,
+      currentDay: 0,
+      totalGap: 20,
+      clock: 50,
+      offset: -20,
+    };
+
+    expect(calculateTimeUntilStart({ ...test, isLinkedToLoaded: false })).toBe(50);
+    expect(calculateTimeUntilStart({ ...test, isLinkedToLoaded: true })).toBe(70); // This should not be possible
+  });
+
+  test('running behind with to little gaps', () => {
+    const test = {
+      timeStart: 100,
+      dayOffset: 0,
+      delay: 0,
+      currentDay: 0,
+      totalGap: 10,
+      clock: 50,
+      offset: -20,
+    };
+
+    expect(calculateTimeUntilStart({ ...test, isLinkedToLoaded: false })).toBe(60);
+    expect(calculateTimeUntilStart({ ...test, isLinkedToLoaded: true })).toBe(70); // This should not be possible
+  });
+
+  //TODO: more indepth testing,
+  // including day offset handling
+  // and more?
 });
@@ -1,8 +0,0 @@
-import { MaybeString } from 'ontime-types';
-
-export default function safeParseNumber(value: MaybeString, defaultValue: number = 0): number {
-  if (!value) return defaultValue;
-  const number = Number(value);
-  if (isNaN(number)) return defaultValue;
-  return number;
-}
@@ -48,12 +48,10 @@ export const connectSocket = () => {

  websocket.onclose = () => {
    console.warn('WebSocket disconnected');
+    setOnlineStatus(false);

    if (shouldReconnect) {
      reconnectTimeout = setTimeout(() => {
-        if (reconnectAttempts > 2) {
-          setOnlineStatus(false);
-        }
        console.warn('WebSocket: attempting reconnect');
        if (websocket && websocket.readyState === WebSocket.CLOSED) {
          reconnectAttempts += 1;
@@ -1,4 +1,4 @@
-import { MaybeNumber, OffsetMode, OntimeEvent, Settings, TimeFormat } from 'ontime-types';
+import { MaybeNumber, OntimeEvent, Settings, TimeFormat } from 'ontime-types';
 import { dayInMs, formatFromMillis, MILLIS_PER_HOUR, MILLIS_PER_MINUTE, MILLIS_PER_SECOND } from 'ontime-utils';

 import { FORMAT_12, FORMAT_24 } from '../../viewerConfig';
@@ -140,8 +140,8 @@ export function useTimeUntilStart(
    isLinkedToLoaded: boolean;
  },
 ): number {
-  const { offset, clock, currentDay, offsetMode, actualStart, plannedStart } = useTimeUntilData();
-  return calculateTimeUntilStart({ ...data, currentDay, clock, offset, offsetMode, actualStart, plannedStart });
+  const { offset, clock, currentDay } = useTimeUntilData();
+  return calculateTimeUntilStart({ ...data, currentDay, clock, offset });
 }

 /**
@@ -160,24 +160,9 @@ export function calculateTimeUntilStart(
    isLinkedToLoaded: boolean;
    clock: number;
    offset: number;
-    offsetMode: OffsetMode;
-    actualStart: MaybeNumber;
-    plannedStart: MaybeNumber;
  },
 ): number {
-  const {
-    timeStart,
-    dayOffset,
-    currentDay,
-    totalGap,
-    isLinkedToLoaded,
-    clock,
-    offset,
-    delay,
-    offsetMode,
-    actualStart,
-    plannedStart,
-  } = data;
+  const { timeStart, dayOffset, currentDay, totalGap, isLinkedToLoaded, clock, offset, delay } = data;

  //How many days from the currently running event to this one
  const relativeDayOffset = dayOffset - currentDay;
@@ -187,23 +172,20 @@ export function calculateTimeUntilStart(
  //The normalised start time of this event relative to the currently running event
  const normalisedTimeStart = delayedStart + relativeDayOffset * dayInMs;

-  let relativeStartOffset = 0;
-
-  if (offsetMode === OffsetMode.Relative) {
-    relativeStartOffset = (actualStart ?? 0) - (plannedStart ?? 0);
-  }
-
-  const scheduledTimeUntil = normalisedTimeStart - clock + relativeStartOffset;
-
-  const offsetTimeUntil = scheduledTimeUntil - offset;
+  const offsetTimestart = normalisedTimeStart - offset;
+  const offsetTimeUntil = offsetTimestart - clock;

  if (isLinkedToLoaded) {
    //if we are directly linked back to the loaded event we just follow the offset
    return offsetTimeUntil;
  }

-  const gapsCanCompensateForOffset = totalGap + offset >= 0;
-  if (gapsCanCompensateForOffset) {
+  const scheduledTimeUntil = normalisedTimeStart - clock;
+
+  const isAheadOfSchedule = offset >= 0;
+  const gapsCanCompensadeForOffset = totalGap + offset >= 0;
+
+  if (isAheadOfSchedule || gapsCanCompensadeForOffset) {
    // if we are ahead of schedule or the gap can compensate for the amount we are behind then expect to start at the scheduled time
    return scheduledTimeUntil;
  }
@@ -207,9 +207,6 @@ $inner-padding: 1rem;
  &.end {
    justify-content: flex-end;
  }
-  &.apart {
-    justify-content: space-between;
-  }
 }

@keyframes animloader {
@@ -113,8 +113,8 @@ export function BlockQuote({ children }: { children: ReactNode }) {
  return <blockquote className={style.blockquote}>{children}</blockquote>;
 }

-export function Error({ children, className }: { children: ReactNode } & JSX.IntrinsicElements['div']) {
-  return <div className={cx([style.fieldError, className])}>{children}</div>;
+export function Error({ children }: { children: ReactNode }) {
+  return <div className={style.fieldError}>{children}</div>;
 }

 export function Divider() {
@@ -136,7 +136,7 @@ type AllowedInlineTags = 'div' | 'td';
 type InlineProps<C extends AllowedInlineTags> = {
  as?: C;
  relation?: 'inner' | 'component' | 'section';
-  align?: 'start' | 'end' | 'apart';
+  align?: 'start' | 'end';
  className?: string;
 };

@@ -94,7 +94,7 @@ export default function ReportSettings() {
                })();
                return (
                  <tr key={entry.index}>
-                    <th>{entry.index}</th>
+                    <th>{entry.index + 1}</th>
                    <th>{entry.cue}</th>
                    <th>{entry.title}</th>
                    <th className={cx([start && style[start]])}>{formatTime(entry.scheduledStart)}</th>
@@ -1,4 +0,0 @@
-.wrapper {
-  max-height: 500px;
-  overflow-y: auto;
-}
@@ -1,72 +0,0 @@
-import { forwardRef, memo, useEffect, useImperativeHandle, useState } from 'react';
-import Editor from 'react-simple-code-editor';
-import Prism from 'prismjs/components/prism-core';
-
-import 'prismjs/components/prism-css';
-import 'prismjs/themes/prism-tomorrow.min.css';
-import style from './StyleEditor.module.scss';
-
-interface CodeEditorProps {
-  language: string;
-  initialValue: string;
-  isDirty: boolean;
-  setIsDirty: (value: boolean) => void;
-}
-
-const CodeEditor = forwardRef((props: CodeEditorProps, cssRef) => {
-  const { language, initialValue, isDirty, setIsDirty } = props;
-
-  const [code, setCode] = useState(initialValue);
-
-  const highlight = (code: string) => {
-    const grammar = Prism.languages[language];
-    return grammar ? Prism.highlight(code, grammar, language) : code;
-  };
-
-  const handleChange = (newCode: string) => {
-    setCode(newCode);
-  };
-
-  useImperativeHandle(cssRef, () => {
-    return {
-      getCss: () => code,
-    };
-  });
-
-  // add contents to editor on mount and any change in initialValue
-  useEffect(() => {
-    setCode(initialValue);
-  }, [initialValue]);
-
-  // handle dirty state on change
-  useEffect(() => {
-    if (initialValue.trim() !== code.trim() && !isDirty && code.length !== 0) {
-      setIsDirty(true);
-    }
-
-    if (initialValue.trim() === code.trim() && isDirty) {
-      setIsDirty(false);
-    }
-  }, [initialValue, code, isDirty, setIsDirty]);
-
-  return (
-    <div className={style.wrapper}>
-      <Editor
-        value={code}
-        padding={15}
-        onValueChange={handleChange}
-        highlight={highlight}
-        style={{
-          fontFamily: 'monospace',
-          fontSize: 12,
-          minHeight: 500,
-          background: '#2d2d2d', // Background of tomorrow theme
-        }}
-      />
-    </div>
-  );
-});
-
-CodeEditor.displayName = 'StyleEditor';
-
-export default memo(CodeEditor);
@@ -1,14 +0,0 @@
-.editorActions {
-  width: 100%;
-}
-
-.right {
-  align-self: end;
-  text-align: right
-}
-
-.column {
-  align-items: start;
-  display: flex;
-  flex-direction: column;
-}
@@ -1,129 +0,0 @@
-import { lazy, useEffect, useRef, useState } from 'react';
-import {
-  Button,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-} from '@chakra-ui/react';
-
-import { getCSSContents, postCSSContents, restoreCSSContents } from '../../../../common/api/assets';
-import Info from '../../../../common/components/info/Info';
-import * as Panel from '../../panel-utils/PanelUtils';
-
-import style from './StyleEditorModal.module.scss';
-
-const CodeEditor = lazy(() => import('./StyleEditor'));
-
-interface CodeEditorModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-}
-
-interface CSSRef {
-  getCss: () => string;
-}
-
-export default function CodeEditorModal(props: CodeEditorModalProps) {
-  const { isOpen, onClose } = props;
-
-  const [css, setCSS] = useState('');
-  const [isDirty, setIsDirty] = useState(false);
-  const [saveLoading, setSaveLoading] = useState(false);
-  const [resetLoading, setResetLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const cssRef = useRef<CSSRef>(null);
-
-  const handleRestore = async () => {
-    try {
-      setResetLoading(true);
-      const defaultCss = await restoreCSSContents();
-      setCSS(defaultCss);
-    } catch (_error) {
-      /** no error handling for now */
-    } finally {
-      setResetLoading(false);
-    }
-  };
-
-  const handleSave = async () => {
-    try {
-      setSaveLoading(true);
-      if (cssRef.current) {
-        await postCSSContents(cssRef.current.getCss());
-        setCSS(cssRef.current.getCss());
-        setIsDirty(false);
-      }
-    } catch (_error) {
-      /** no error handling for now */
-    } finally {
-      setSaveLoading(false);
-    }
-  };
-
-  const clear = () => setCSS('');
-
-  useEffect(() => {
-    async function fetchServerCSS() {
-      // check for isOpen to fetch recent css
-      if (isOpen) {
-        try {
-          const css = await getCSSContents();
-          setCSS(css);
-        } catch (_error) {
-          setError('Failed to load CSS from server');
-          /** no error handling for now */
-        }
-      }
-    }
-    fetchServerCSS();
-  }, [isOpen]);
-
-  return (
-    <Modal isOpen={isOpen} onClose={onClose} variant='ontime' isCentered>
-      <ModalOverlay />
-      <ModalContent maxWidth='max(800px, 40vw)'>
-        <ModalHeader>Edit CSS override</ModalHeader>
-        <ModalCloseButton />
-        <ModalBody>
-          <CodeEditor ref={cssRef} initialValue={css} language='css' isDirty={isDirty} setIsDirty={setIsDirty} />
-        </ModalBody>
-
-        <ModalFooter className={style.column}>
-          <Info>Invalid CSS will be refused by the browser</Info>
-          {error && <Panel.Error className={style.right}>{`Error: ${error}`}</Panel.Error>}
-          <Panel.InlineElements align='apart' className={style.editorActions}>
-            <Button
-              variant='ontime-ghosted'
-              onClick={handleRestore}
-              isDisabled={saveLoading || resetLoading}
-              isLoading={resetLoading}
-            >
-              Reset to example
-            </Button>
-            <Panel.InlineElements>
-              <Button variant='ontime-ghosted' onClick={clear}>
-                Clear
-              </Button>
-              <Button variant='ontime-subtle' onClick={onClose}>
-                Cancel
-              </Button>
-              <Button
-                variant='ontime-filled'
-                onClick={handleSave}
-                isDisabled={saveLoading || resetLoading || !isDirty}
-                isLoading={saveLoading}
-              >
-                Save changes
-              </Button>
-            </Panel.InlineElements>
-          </Panel.InlineElements>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
-  );
-}
@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { Button, Input, Switch, useDisclosure } from '@chakra-ui/react';
+import { Button, Input, Switch } from '@chakra-ui/react';
 import { ViewSettings } from 'ontime-types';

 import { maybeAxiosError } from '../../../../common/api/utils';
@@ -14,14 +14,11 @@ import { preventEscape } from '../../../../common/utils/keyEvent';
 import { isOntimeCloud } from '../../../../externals';
 import * as Panel from '../../panel-utils/PanelUtils';

-import CodeEditorModal from './StyleEditorModal';
-
 const cssOverrideDocsUrl = 'https://docs.getontime.no/features/custom-styling/';

 export default function ViewSettingsForm() {
  const { data, status, refetch } = useViewSettings();
  const { data: info, status: infoStatus } = useInfo();
-  const { isOpen: isCodeEditorOpen, onOpen: onCodeEditorOpen, onClose: onCodeEditorClose } = useDisclosure();

  const {
    control,
@@ -106,7 +103,6 @@ export default function ViewSettingsForm() {
        <Panel.Section>
          <Panel.Loader isLoading={isLoading} />
          <Panel.ListGroup>
-            <CodeEditorModal isOpen={isCodeEditorOpen} onClose={onCodeEditorClose} />
            <Panel.ListItem>
              <Panel.Field
                title='Override CSS styles'
@@ -119,15 +115,6 @@ export default function ViewSettingsForm() {
                  <Switch variant='ontime' size='lg' isChecked={value} onChange={onChange} ref={ref} />
                )}
              />
-              <Button
-                onClick={onCodeEditorOpen}
-                variant='ontime-subtle'
-                size='sm'
-                isDisabled={!data.overrideStyles}
-                width='fit-content'
-              >
-                Edit CSS override
-              </Button>
            </Panel.ListItem>
          </Panel.ListGroup>
          <Panel.ListGroup>
@@ -1,5 +0,0 @@
-declare module 'prismjs/components/prism-core' {
-  export * from 'prismjs';
-}
-
-declare module 'prismjs/components/prism-css';
@@ -103,7 +103,6 @@ export default function SourcesPanel() {
  };

  const handleSubmitImportPreview = async (importMap: ImportMap) => {
-    setError(''); // to clear previous error
    if (importFlow === 'excel') {
      try {
        const previewData = await importRundownPreviewExcel(importMap);
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useFieldArray, useForm } from 'react-hook-form';
 import { IoAdd, IoTrash } from 'react-icons/io5';
 import { Button, IconButton, Input, Select, Tooltip } from '@chakra-ui/react';
@@ -28,7 +28,6 @@ export default function ImportMapForm(props: ImportMapFormProps) {
    control,
    handleSubmit,
    register,
-    setValue,
    formState: { errors, isValid },
  } = useForm<NamedImportMap>({
    mode: 'onChange',
@@ -46,14 +45,6 @@ export default function ImportMapForm(props: ImportMapFormProps) {

  const [loading, setLoading] = useState<'' | 'export' | 'import'>('');

-  // Set first sheet as default worksheet when 'event schedule' sheet is not there
-  useEffect(() => {
-    if (!worksheetNames || worksheetNames.length === 0) return;
-    if (!worksheetNames.includes(namedImportMap.Worksheet)) {
-      setValue('Worksheet', worksheetNames[0], { shouldValidate: true, shouldDirty: true });
-    }
-  }, [worksheetNames, setValue, namedImportMap.Worksheet]);
-
  const handleExport = async (values: NamedImportMap) => {
    setLoading('export');
    const importMap = convertToImportMap(values);
@@ -1,7 +1,9 @@
-import { PropsWithChildren, useEffect, useRef, useState } from 'react';
+import { useEffect, useRef } from 'react';
+import { IoEye, IoEyeOffOutline } from 'react-icons/io5';
 import { Input } from '@chakra-ui/react';

-import { cx } from '../../../common/utils/styleUtils';
+import TooltipActionBtn from '../../../common/components/buttons/TooltipActionBtn';
+import { tooltipDelayMid } from '../../../ontimeConfig';

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

@@ -10,53 +12,50 @@ interface InputRowProps {
  placeholder: string;
  text: string;
  visible: boolean;
+  actionHandler: () => void;
  changeHandler: (newValue: string) => void;
 }

-export default function InputRow(props: PropsWithChildren<InputRowProps>) {
-  const { label, placeholder, text, visible, changeHandler, children } = props;
+export default function InputRow(props: InputRowProps) {
+  const { label, placeholder, text, visible, actionHandler, changeHandler } = props;

-  const [value, setValue] = useState(text);
  const inputRef = useRef<HTMLInputElement>(null);
  const cursorPositionRef = useRef(0);

  // sync cursor position with text
  useEffect(() => {
-    if (inputRef.current && inputRef.current !== document.activeElement) {
+    if (inputRef.current) {
      inputRef.current.selectionStart = cursorPositionRef.current;
      inputRef.current.selectionEnd = cursorPositionRef.current;
    }
  }, [text]);

-  // synchronise external text
-  useEffect(() => {
-    if (inputRef.current !== document.activeElement) {
-      setValue(text);
-    }
-  }, [text]);
-
  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    cursorPositionRef.current = event.target.selectionStart ?? 0;
-    setValue(event.target.value);
    changeHandler(event.target.value);
  };

  return (
    <div className={style.inputRow}>
-      <label className={cx([style.label, visible ?? style.active])} htmlFor={label}>
-        {label}
-      </label>
+      <label className={`${style.label} ${visible ? style.active : ''}`}>{label}</label>
      <div className={style.inputItems}>
        <Input
-          id={label}
          ref={inputRef}
          size='sm'
          variant='ontime-filled'
-          value={value}
+          value={text}
          onChange={handleInputChange}
          placeholder={placeholder}
        />
-        {children}
+        <TooltipActionBtn
+          clickHandler={actionHandler}
+          tooltip={visible ? 'Make invisible' : 'Make visible'}
+          aria-label={`Toggle ${label}`}
+          openDelay={tooltipDelayMid}
+          icon={visible ? <IoEye size='18px' /> : <IoEyeOffOutline size='18px' />}
+          variant={visible ? 'ontime-filled' : 'ontime-subtle'}
+          size='sm'
+        />
      </div>
    </div>
  );
@@ -1,8 +1,4 @@
-import { IoEye, IoEyeOffOutline } from 'react-icons/io5';
-
-import TooltipActionBtn from '../../../common/components/buttons/TooltipActionBtn';
 import { setMessage, useExternalMessageInput, useTimerMessageInput } from '../../../common/hooks/useSocket';
-import { tooltipDelayMid } from '../../../ontimeConfig';

 import InputRow from './InputRow';
 import TimerControlsPreview from './TimerViewControl';
@@ -27,17 +23,8 @@ function TimerMessageInput() {
      text={text}
      visible={visible}
      changeHandler={(newValue) => setMessage.timerText(newValue)}
-    >
-      <TooltipActionBtn
-        clickHandler={() => setMessage.timerVisible(!visible)}
-        tooltip={visible ? 'Make invisible' : 'Make visible'}
-        aria-label='Toggle timer message visibility'
-        openDelay={tooltipDelayMid}
-        icon={visible ? <IoEye size='18px' /> : <IoEyeOffOutline size='18px' />}
-        variant={visible ? 'ontime-filled' : 'ontime-subtle'}
-        size='sm'
-      />
-    </InputRow>
+      actionHandler={() => setMessage.timerVisible(!visible)}
+    />
  );
 }

@@ -59,16 +46,7 @@ function ExternalInput() {
      text={text}
      visible={visible}
      changeHandler={(newValue) => setMessage.externalText(newValue)}
-    >
-      <TooltipActionBtn
-        clickHandler={toggleExternal}
-        tooltip={visible ? 'Make invisible' : 'Make visible'}
-        aria-label='Toggle external message visibility'
-        openDelay={tooltipDelayMid}
-        icon={visible ? <IoEye size='18px' /> : <IoEyeOffOutline size='18px' />}
-        variant={visible ? 'ontime-filled' : 'ontime-subtle'}
-        size='sm'
-      />
-    </InputRow>
+      actionHandler={toggleExternal}
+    />
  );
 }
@@ -170,7 +170,7 @@ function RuntimeOverview() {

  return (
    <>
-      <TimeColumn label='Offset' value={offsetText} className={offsetClasses} testId='offset' />
+      <TimeColumn label='Offset' value={offsetText} className={offsetClasses} />
      <TimeColumn label='Time now' value={formatedTime(clock)} />
    </>
  );
@@ -10,16 +10,13 @@ interface TimeLayoutProps {
  muted?: boolean;
  daySpan?: number;
  className?: string;
-  testId?: string;
 }

-export function TimeColumn({ label, value, muted, className, testId }: TimeLayoutProps) {
+export function TimeColumn({ label, value, muted, className }: TimeLayoutProps) {
  return (
    <div className={style.column}>
      <span className={style.label}>{label}</span>
-      <span className={cx([style.clock, muted && style.muted, className])} data-testid={testId}>
-        {value}
-      </span>
+      <span className={cx([style.clock, muted && style.muted, className])}>{value}</span>
    </div>
  );
 }
@@ -300,8 +300,7 @@ export default function Rundown({ data }: RundownProps) {
                  isNextDay = checkIsNextDay(entry, lastEvent);
                  if (!isPast) {
                    totalGap += entry.gap;
-                    // We also include countToEnd in this test as the behavior of a linked event coming after a countToEnd is simelar to an unlinked event
-                    isLinkedToLoaded = isLinkedToLoaded && entry.linkStart !== null && !lastEvent?.countToEnd;
+                    isLinkedToLoaded = isLinkedToLoaded && entry.linkStart !== null;
                  }
                  if (isNewLatest(entry, lastEvent)) {
                    // populate previous entry
@@ -1,15 +1,17 @@
-import { useCallback } from 'react';
+import { CSSProperties, useCallback } from 'react';
 import { CustomFieldLabel, OntimeEvent } from 'ontime-types';

 import AppLink from '../../../common/components/link/app-link/AppLink';
 import { useEventAction } from '../../../common/hooks/useEventAction';
 import useCustomFields from '../../../common/hooks-query/useCustomFields';
+import { getAccessibleColour } from '../../../common/utils/styleUtils';
 import * as Editor from '../../editors/editor-utils/EditorUtils';

-import EventCustom from './composite/EventEditorCustom';
+import EventEditorImage from './composite/EventEditorImage';
 import EventEditorTimes from './composite/EventEditorTimes';
 import EventEditorTitles from './composite/EventEditorTitles';
-import EventEditorTriggers from './composite/EventEditorTriggers';
+import EventTextArea from './composite/EventTextArea';
+import EventTextInput from './composite/EventTextInput';
 import EventEditorEmpty from './EventEditorEmpty';

 import style from './EventEditor.module.scss';
@@ -75,16 +77,52 @@ export default function EventEditor(props: EventEditorProps) {
      <div className={style.column}>
        <Editor.Title>
          Custom Fields
-          {isEditor && <AppLink search='settings=feature_settings__custom'>Manage Custom Fields</AppLink>}
+          {isEditor && <AppLink search='settings=feature_settings__custom'>Manage</AppLink>}
        </Editor.Title>
-        <EventCustom fields={customFields} handleSubmit={handleSubmit} event={event} />
-      </div>
-      <div className={style.column}>
-        <Editor.Title>
-          Automations
-          {isEditor && <AppLink search='settings=automation__automations'>Manage Automations</AppLink>}
-        </Editor.Title>
-        <EventEditorTriggers triggers={event.triggers} eventId={event.id} />
+
+        {Object.keys(customFields).map((fieldKey) => {
+          const key = `${event.id}-${fieldKey}`;
+          const fieldName = `custom-${fieldKey}`;
+          const initialValue = event.custom[fieldKey] ?? '';
+          const { backgroundColor, color } = getAccessibleColour(customFields[fieldKey].colour);
+          const labelText = customFields[fieldKey].label;
+
+          if (customFields[fieldKey].type === 'string') {
+            return (
+              <EventTextArea
+                key={key}
+                field={fieldName}
+                label={labelText}
+                initialValue={initialValue}
+                submitHandler={handleSubmit}
+                className={style.decorated}
+                style={{ '--decorator-bg': backgroundColor, '--decorator-color': color } as CSSProperties}
+              />
+            );
+          }
+
+          if (customFields[fieldKey].type === 'image') {
+            return (
+              <div key={key} className={style.customImage}>
+                <EventTextInput
+                  key={key}
+                  field={fieldName}
+                  label={labelText}
+                  initialValue={initialValue}
+                  placeholder='Paste image URL'
+                  submitHandler={handleSubmit}
+                  className={style.decorated}
+                  maxLength={255}
+                  style={{ '--decorator-bg': backgroundColor, '--decorator-color': color } as CSSProperties}
+                />
+                <EventEditorImage src={initialValue} />
+              </div>
+            );
+          }
+
+          // we should have exhausted all types by now
+          return null;
+        })}
      </div>
    </div>
  );
@@ -1,68 +0,0 @@
-import { CSSProperties, Fragment } from 'react';
-import { CustomFields, OntimeEvent } from 'ontime-types';
-
-import { getAccessibleColour } from '../../../../common/utils/styleUtils';
-import { EditorUpdateFields } from '../EventEditor';
-
-import EventEditorImage from './EventEditorImage';
-import EventTextArea from './EventTextArea';
-import EventTextInput from './EventTextInput';
-
-import style from '../EventEditor.module.scss';
-
-interface EventEditorCustomProps {
-  fields: CustomFields;
-  event: OntimeEvent;
-  handleSubmit: (field: EditorUpdateFields, value: string) => void;
-}
-
-export default function EventEditorCustom(props: EventEditorCustomProps) {
-  const { fields: customFields, handleSubmit, event } = props;
-  return (
-    <Fragment>
-      {Object.keys(customFields).map((fieldKey) => {
-        const key = `${event.id}-${fieldKey}`;
-        const fieldName = `custom-${fieldKey}`;
-        const initialValue = event.custom[fieldKey] ?? '';
-        const { backgroundColor, color } = getAccessibleColour(customFields[fieldKey].colour);
-        const labelText = customFields[fieldKey].label;
-
-        if (customFields[fieldKey].type === 'string') {
-          return (
-            <EventTextArea
-              key={key}
-              field={fieldName}
-              label={labelText}
-              initialValue={initialValue}
-              submitHandler={handleSubmit}
-              className={style.decorated}
-              style={{ '--decorator-bg': backgroundColor, '--decorator-color': color } as CSSProperties}
-            />
-          );
-        }
-
-        if (customFields[fieldKey].type === 'image') {
-          return (
-            <div key={key} className={style.customImage}>
-              <EventTextInput
-                key={key}
-                field={fieldName}
-                label={labelText}
-                initialValue={initialValue}
-                placeholder='Paste image URL'
-                submitHandler={handleSubmit}
-                className={style.decorated}
-                maxLength={255}
-                style={{ '--decorator-bg': backgroundColor, '--decorator-color': color } as CSSProperties}
-              />
-              <EventEditorImage src={initialValue} />
-            </div>
-          );
-        }
-
-        // we should have exhausted all types by now
-        return null;
-      })}
-    </Fragment>
-  );
-}
@@ -1,30 +0,0 @@
-.triggerForm {
-  padding-block: 0.5rem;
-  display: grid;
-  grid-template-columns: 1fr 1fr auto auto;
-  gap: 0.5rem;
-  align-items: center;
-}
-
-.trigger {
-  padding: 0.25rem 0.5rem;
-  display: grid;
-  grid-template-columns: 1fr 1fr auto;
-  align-items: center;
-
-  &:nth-child(even) {
-    background-color: $white-1;
-  }
-
-  & > span {
-    width: fit-content;
-  }
-}
-
-.errorLabel {
-  color: $red-500;
-}
-
-.success {
-  color: $green-500;
-}
@@ -1,173 +0,0 @@
-import { Fragment, useCallback, useState } from 'react';
-import { IoAlertCircle, IoCheckmarkCircle, IoTrash } from 'react-icons/io5';
-import { Button, IconButton, Select, Tooltip } from '@chakra-ui/react';
-import { TimerLifeCycle, timerLifecycleValues, Trigger } from 'ontime-types';
-import { generateId } from 'ontime-utils';
-
-import Tag from '../../../../common/components/tag/Tag';
-import { useEventAction } from '../../../../common/hooks/useEventAction';
-import useAutomationSettings from '../../../../common/hooks-query/useAutomationSettings';
-
-import { eventTriggerOptions } from './eventTrigger.constants';
-
-import style from './EventEditorTriggers.module.scss';
-
-interface EventEditorTriggersProps {
-  eventId: string;
-  triggers?: Trigger[];
-}
-
-export default function EventEditorTriggers(props: EventEditorTriggersProps) {
-  const { triggers, eventId } = props;
-  const showTriggers = triggers !== undefined && triggers.length > 0;
-
-  return (
-    <>
-      {showTriggers && <ExistingEventTriggers triggers={triggers} eventId={eventId} />}
-      <EventTriggerForm triggers={triggers} eventId={eventId} />
-    </>
-  );
-}
-
-interface EventTriggerFormProps {
-  eventId: string;
-  triggers?: Trigger[];
-}
-
-function EventTriggerForm(props: EventTriggerFormProps) {
-  const { eventId, triggers } = props;
-  const { data: automationSettings } = useAutomationSettings();
-  const { updateEvent } = useEventAction();
-  const [automationId, setAutomationId] = useState<string | undefined>(undefined);
-  const [cycleValue, setCycleValue] = useState(TimerLifeCycle.onStart);
-
-  const handleSubmit = (triggerLifeCycle: TimerLifeCycle, automationId: string) => {
-    const newTriggers = triggers ?? new Array<Trigger>();
-    const id = generateId();
-    newTriggers.push({ id, title: '', trigger: triggerLifeCycle, automationId });
-    updateEvent({ id: eventId, triggers: newTriggers });
-  };
-
-  const getValidationError = (cycle: TimerLifeCycle, automationId?: string): string | undefined => {
-    if (automationId === undefined) {
-      return 'Select an automation';
-    }
-    if (!Object.keys(automationSettings.automations).includes(automationId)) {
-      return 'This automation does not exist';
-    }
-    if (triggers === undefined) {
-      return;
-    }
-    return Object.values(triggers).some((t) => t.automationId === automationId && t.trigger === cycle)
-      ? 'Automation can only be used once'
-      : undefined;
-  };
-
-  const validationError = getValidationError(cycleValue, automationId);
-
-  return (
-    <div className={style.triggerForm}>
-      <Select
-        size='sm'
-        variant='ontime'
-        value={cycleValue}
-        onChange={(e) => setCycleValue(e.target.value as TimerLifeCycle)}
-        defaultValue={TimerLifeCycle.onStart}
-      >
-        <option disabled>Lifecycle Trigger</option>
-        {eventTriggerOptions.map((cycle) => (
-          <option key={cycle} value={cycle}>
-            {cycle}
-          </option>
-        ))}
-      </Select>
-      <Select
-        size='sm'
-        variant='ontime'
-        value={automationId}
-        defaultValue='«invalid»'
-        onChange={(e) => setAutomationId(e.target.value)}
-      >
-        <option disabled value='«invalid»'>
-          Automation
-        </option>
-        {Object.values(automationSettings.automations).map(({ id, title }) => (
-          <option key={id} value={id}>
-            {title}
-          </option>
-        ))}
-      </Select>
-      <Button
-        variant='ontime-subtle'
-        size='sm'
-        isDisabled={validationError !== undefined}
-        onClick={() => automationId && handleSubmit(cycleValue, automationId)}
-      >
-        Add
-      </Button>
-      {validationError !== undefined ? (
-        <Tooltip label={validationError} shouldWrapChildren>
-          <IoAlertCircle className={style.errorLabel} />
-        </Tooltip>
-      ) : (
-        <IoCheckmarkCircle className={style.success} />
-      )}
-    </div>
-  );
-}
-
-interface ExistingEventTriggersProps {
-  eventId: string;
-  triggers: Trigger[];
-}
-
-function ExistingEventTriggers(props: ExistingEventTriggersProps) {
-  const { eventId, triggers } = props;
-  const { updateEvent } = useEventAction();
-  const { data: automationSettings } = useAutomationSettings();
-
-  const handleDelete = useCallback(
-    (triggerId: string) => {
-      const newTriggers = triggers.filter((trigger) => trigger.id !== triggerId);
-      updateEvent({ id: eventId, triggers: newTriggers });
-    },
-    [eventId, triggers, updateEvent],
-  );
-
-  const filteredTriggers: Record<string, Trigger[]> = {};
-
-  // sort triggers out into groups by the Lifecycle they are on
-  timerLifecycleValues.forEach((triggerType) => {
-    const thisTriggerType = triggers.filter((trigger) => trigger.trigger === triggerType);
-    if (thisTriggerType.length) {
-      Object.assign(filteredTriggers, { [triggerType]: thisTriggerType });
-    }
-  });
-
-  return (
-    <div>
-      {Object.entries(filteredTriggers).map(([triggerLifeCycle, triggerGroup]) => (
-        <Fragment key={triggerLifeCycle}>
-          {triggerGroup.map((trigger) => {
-            const { id, automationId } = trigger;
-            const automationTitle = automationSettings.automations[automationId]?.title ?? '<MISSING AUTOMATION>';
-            return (
-              <div key={id} className={style.trigger}>
-                <Tag>{triggerLifeCycle}</Tag>
-                <Tag>{automationTitle}</Tag>
-                <IconButton
-                  size='sm'
-                  variant='ontime-ghosted'
-                  color='#FA5656' // $red-500
-                  icon={<IoTrash />}
-                  aria-label='Delete entry'
-                  onClick={() => handleDelete(id)}
-                />
-              </div>
-            );
-          })}
-        </Fragment>
-      ))}
-    </div>
-  );
-}
@@ -1,10 +0,0 @@
-import { TimerLifeCycle } from 'ontime-types';
-
-export const eventTriggerOptions: TimerLifeCycle[] = [
-  TimerLifeCycle.onLoad,
-  TimerLifeCycle.onStart,
-  TimerLifeCycle.onPause,
-  TimerLifeCycle.onFinish,
-  TimerLifeCycle.onWarning,
-  TimerLifeCycle.onDanger,
-];
@@ -1,7 +1,5 @@
 import { Button, ButtonGroup } from '@chakra-ui/react';
-import { OffsetMode } from 'ontime-types';

-import { setOffsetMode, useOffsetMode } from '../../../common/hooks/useSocket';
 import { AppMode, useAppMode } from '../../../common/stores/appModeStore';

 import RundownMenu from './RundownMenu';
@@ -14,8 +12,6 @@ export default function RundownHeader() {
  const setRunMode = () => setAppMode(AppMode.Run);
  const setEditMode = () => setAppMode(AppMode.Edit);

-  const { offsetMode } = useOffsetMode();
-
  return (
    <div className={style.header}>
      <ButtonGroup isAttached>
@@ -26,22 +22,6 @@ export default function RundownHeader() {
          Edit
        </Button>
      </ButtonGroup>
-      <ButtonGroup isAttached>
-        <Button
-          size='sm'
-          variant={offsetMode === OffsetMode.Absolute ? 'ontime-filled' : 'ontime-subtle'}
-          onClick={() => setOffsetMode(OffsetMode.Absolute)}
-        >
-          Absolute
-        </Button>
-        <Button
-          size='sm'
-          variant={offsetMode === OffsetMode.Relative ? 'ontime-filled' : 'ontime-subtle'}
-          onClick={() => setOffsetMode(OffsetMode.Relative)}
-        >
-          Relative
-        </Button>
-      </ButtonGroup>
      <RundownMenu />
    </div>
  );
@@ -9,9 +9,57 @@
    top: 75vh;
    line-height: normal;

+    animation-fill-mode: both;
+    animation-timing-function: ease-out;
+
+    &--pre {
+      animation-name: in;
+      animation-play-state: paused;
+
+      .data-top {
+        animation-play-state: paused;
+        animation-name: top-in;
+      }
+
+      .data-lower {
+        animation-play-state: paused;
+        animation-name: bottom-in;
+      }
+    }
+
+    &--in {
+      animation-name: in;
+      animation-play-state: running;
+
+      .data-top {
+        animation-play-state: running;
+        animation-name: top-in;
+      }
+
+      .data-bottom {
+        animation-play-state: running;
+        animation-name: bottom-in;
+      }
+    }
+
+    &--out {
+      animation-name: out;
+      animation-play-state: running;
+
+      .data-top {
+        animation-play-state: running;
+        animation-name: top-out;
+      }
+
+      .data-bottom {
+        animation-play-state: running;
+        animation-name: bottom-out;
+      }
+    }
+
    .line {
      width: 100%;
-      height: var(--lowerThird-line-height-override, 0.5vh);
+      height: var(--bottomThird-line-height-override, 0.5vh);
    }

    .clip {
@@ -22,10 +70,10 @@
    .data-top {
      padding: 0 3vw;
      font-family: var(--lowerThird-font-family-override), Lato, Arial, sans-serif;
-      text-align: var(--lowerThird-text-align-override, right);
+      text-align: var(--lowerThird-text-align-override, left);
      white-space: nowrap;
      @include ellipsis-text();
-
+      
      &::after {
        content: '\200b';
      }
@@ -37,24 +85,72 @@
    }

    .data-bottom {
-      font-weight: var(--lowerThird-bottom-font-weight-override, 540);
+      font-weight: var(--lowerThird-bottom-font-weight-override, normal);
      font-style: var(--lowerThird-bottom-font-style-override, normal);
    }
-
-    &--in {
-      transition-timing-function: cubic-bezier(0.25, 0.5, 0.5, 1);
-    }
-
-    &--out {
-      transition-timing-function: cubic-bezier(0.5, 0, 0.75, 0.5);
-      transform: translateX(-100%);
-      opacity: 0;
-      .data-top {
-        transform: translateY(100%);
-      }
-      .data-bottom {
-        transform: translateY(-100%);
-      }
-    }
+  }
+}
+
+@keyframes in {
+  0% {
+    transform: translateX(-100%);
+    opacity: 0%;
+  }
+  50%,
+  100% {
+    transform: translateX(0%);
+    opacity: 100%;
+  }
+}
+
+@keyframes out {
+  0%,
+  30% {
+    transform: translateX(0%);
+    opacity: 100%;
+  }
+  100% {
+    transform: translateX(-100%);
+    opacity: 0%;
+  }
+}
+
+@keyframes top-in {
+  0%,
+  50% {
+    transform: translateY(100%);
+  }
+  100% {
+    transform: translateY(0%);
+  }
+}
+
+@keyframes top-out {
+  0% {
+    transform: translateY(0%);
+  }
+  50%,
+  100% {
+    transform: translateY(100%);
+  }
+}
+
+@keyframes bottom-in {
+  0%,
+  50% {
+    transform: translateY(-100%);
+  }
+  100% {
+    transform: translateY(0%);
+  }
+}
+
+@keyframes bottom-out {
+  0% {
+    transform: translateY(0%);
+  }
+  50%,
+  100% {
+    transform: translateY(-100%);
  }
 }
@@ -1,123 +1,204 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
 import { CustomFields, OntimeEvent, ViewSettings } from 'ontime-types';
-import { isPlaybackActive, MILLIS_PER_SECOND } from 'ontime-utils';

 import { overrideStylesURL } from '../../../common/api/constants';
 import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
 import { useWindowTitle } from '../../../common/hooks/useWindowTitle';
-import { ViewExtendedTimer } from '../../../common/models/TimeManager.type';
 import { getPropertyValue } from '../common/viewUtils';

-import { getLowerThirdOptions, useLowerOptions } from './lowerThird.options';
+import { getLowerThirdOptions } from './lowerThird.options';

 import './LowerThird.scss';

+type LowerOptions = {
+  width: number;
+  topSrc: string;
+  bottomSrc: string;
+  topColour: string;
+  bottomColour: string;
+  topBg: string;
+  bottomBg: string;
+  topSize: string;
+  bottomSize: string;
+  transition: number;
+  delay: number;
+  key: string;
+  lineColour: string;
+  lineHeight: string;
+};
+
 interface LowerProps {
  customFields: CustomFields;
  eventNow: OntimeEvent | null;
  viewSettings: ViewSettings;
-  time: ViewExtendedTimer;
 }

+const defaultOptions: Readonly<LowerOptions> = {
+  width: 45,
+  topSrc: 'title',
+  bottomSrc: 'lowerMsg',
+  topColour: '000000',
+  bottomColour: '000000',
+  topBg: 'FFF0',
+  bottomBg: 'FFF0',
+  topSize: '65px',
+  bottomSize: '40px',
+  transition: 3,
+  delay: 3,
+  key: 'FFF0',
+  lineColour: 'FF0000',
+  lineHeight: '0.4em',
+};
+
 export default function LowerThird(props: LowerProps) {
-  const { customFields, eventNow, viewSettings, time } = props;
+  const { customFields, eventNow, viewSettings } = props;
+  const [searchParams] = useSearchParams();
  const previousId = useRef<string>();
  const animationTimeout = useRef<NodeJS.Timeout>();
-  const [playState, setPlayState] = useState<boolean>(false);
-  const [textValue, setTextValue] = useState<{ top: string; bottom: string }>({ top: '', bottom: '' });
+  const [playState, setPlayState] = useState<'pre' | 'in' | 'out'>('pre');
  useRuntimeStylesheet(viewSettings?.overrideStyles && overrideStylesURL);
-  const options = useLowerOptions();
-  const { playback } = time;

  useWindowTitle('Lower Third');

+  const options = useMemo(() => {
+    const newOptions = { ...defaultOptions };
+
+    const width = searchParams.get('width');
+    if (width !== null) {
+      newOptions.width = Number(width);
+    }
+
+    const topSrc = searchParams.get('top-src');
+    if (topSrc) {
+      newOptions.topSrc = topSrc;
+    }
+
+    const bottomSrc = searchParams.get('bottom-src');
+    if (bottomSrc) {
+      newOptions.bottomSrc = bottomSrc;
+    }
+
+    const topColour = searchParams.get('top-colour');
+    if (topColour !== null) {
+      newOptions.topColour = topColour;
+    }
+
+    const bottomColour = searchParams.get('bottom-colour');
+    if (bottomColour !== null) {
+      newOptions.bottomColour = bottomColour;
+    }
+
+    const topBg = searchParams.get('top-bg');
+    if (topBg !== null) {
+      newOptions.topBg = topBg;
+    }
+
+    const bottomBg = searchParams.get('bottom-bg');
+    if (bottomBg !== null) {
+      newOptions.bottomBg = bottomBg;
+    }
+
+    const topSize = searchParams.get('top-size');
+    if (topSize !== null) {
+      newOptions.topSize = topSize;
+    }
+
+    const bottomSize = searchParams.get('bottom-size');
+    if (bottomSize && bottomSize != newOptions.bottomSize) {
+      newOptions.bottomSize = bottomSize;
+    }
+
+    const transition = searchParams.get('transition');
+    if (transition !== null) {
+      newOptions.transition = Number(transition);
+    }
+
+    const delay = searchParams.get('delay');
+    if (delay !== null) {
+      newOptions.delay = Number(delay);
+    }
+
+    const key = searchParams.get('key');
+    if (key !== null) {
+      newOptions.key = key;
+    }
+
+    const lineColour = searchParams.get('line-colour');
+    if (lineColour !== null) {
+      newOptions.lineColour = lineColour;
+    }
+
+    return newOptions;
+  }, [searchParams]);
+
  // on unmount, cancel any ongoing animations
  useEffect(() => {
-    // if hold is negative then force animate in
-    if (options.hold < 0) {
+    return () => {
+      // eslint-disable-next-line react-hooks/exhaustive-deps
      clearTimeout(animationTimeout.current);
-      setTextValue({
-        top: getPropertyValue(eventNow, options.topSrc) ?? '',
-        bottom: getPropertyValue(eventNow, options.bottomSrc) ?? '',
-      });
-      setPlayState(true);
-      return;
-    }
-  }, [eventNow, options.bottomSrc, options.hold, options.topSrc]);
-
-  const animateIn = useCallback(() => {
-    // if hold skip
-    if (options.hold < 0) return;
-
-    //clear any pending timeouts
-    clearTimeout(animationTimeout.current);
-    // set the values
-    setTextValue({
-      top: getPropertyValue(eventNow, options.topSrc) ?? '',
-      bottom: getPropertyValue(eventNow, options.bottomSrc) ?? '',
-    });
-    // start animation
-    setPlayState(true);
-    // reschedule out animation, should animate out after the in animation time + hold time
-    setTimeout(() => setPlayState(false), (options.hold + options.transitionIn) * MILLIS_PER_SECOND);
-  }, [eventNow, options.bottomSrc, options.hold, options.topSrc, options.transitionIn]);
-
-  const animateOut = useCallback(() => {
-    if (options.hold < 0) return; // if hold is negative then we never animate out
-    //clear any pending timeouts
-    clearTimeout(animationTimeout.current);
-    // start animation
-    setPlayState(false);
-  }, [options.hold]);
-
-  // check if playback has changed and schedule animations
-  useEffect(() => {
-    if (isPlaybackActive(playback)) {
-      animateIn();
-    } else {
-      animateOut();
-    }
-  }, [animateIn, animateOut, playback]);
+    };
+  }, []);

  // check if data has changed and schedule animations
  useEffect(() => {
    const hasChanged = eventNow?.id !== previousId.current;
-    if (hasChanged) {
-      previousId.current = eventNow?.id;
-      if (eventNow?.id) animateIn();
+    if (!hasChanged) {
+      return;
    }
-  }, [animateIn, eventNow?.id]);

-  const boxDuration = playState ? `${options.transitionIn * 0.5}s` : `${options.transitionOut * 0.5}s`;
-  const boxDelay = playState ? `${options.delay}s` : `${options.transitionOut * 0.5}s`;
+    previousId.current = eventNow?.id;
+    const animateOutInMs = options.delay * 1000 + options.transition * 1000;

-  const textDuration = playState ? `${options.transitionIn * 0.5}s` : `${options.transitionOut * 0.5}s`;
-  const textDelay = playState ? `${options.delay + options.transitionIn * 0.5}s` : '0s';
+    const reschedule = (newState: 'pre' | 'in' | 'out') => {
+      clearTimeout(animationTimeout.current);
+      animationTimeout.current = setTimeout(() => setPlayState(newState), animateOutInMs);
+    };
+    if (eventNow?.id == null) {
+      setPlayState('out');
+      reschedule('pre');
+      return;
+    }
+
+    if (eventNow.id && !previousId.current) {
+      setPlayState('in');
+      reschedule('out');
+      return;
+    }
+
+    if (playState === 'in') {
+      // event has changed, we just reschedule the timeout
+      reschedule('out');
+      return;
+    }
+    setPlayState('in');
+    reschedule('out');
+  }, [eventNow?.id, options.delay, options.transition, playState, previousId]);
+
+  const topText = getPropertyValue(eventNow, options.topSrc) ?? '';
+  const bottomText = getPropertyValue(eventNow, options.bottomSrc) ?? '';
+
+  const transition = `${options.transition}s`;

  return (
    <div className='lower-third' style={{ backgroundColor: `#${options.key}` }}>
      <ViewParamsEditor viewOptions={getLowerThirdOptions(customFields)} />
      <div
-        className={`container ${playState ? 'container--in' : 'container--out'}`}
-        style={{
-          minWidth: `${options.width}vw`,
-          transitionDuration: boxDuration,
-          transitionDelay: boxDelay,
-        }}
+        className={`container container--${playState}`}
+        style={{ minWidth: `${options.width}vw`, animationDuration: transition }}
      >
        <div className='clip'>
          <div
            className='data-top'
            style={{
-              transitionDuration: textDuration,
-              transitionDelay: textDelay,
+              animationDuration: transition,
              color: `#${options.topColour}`,
              backgroundColor: `#${options.topBg}`,
-              fontSize: `${options.topSize}em`,
+              fontSize: options.topSize,
            }}
          >
-            {textValue.top}
+            {topText}
          </div>
        </div>
        <div
@@ -130,14 +211,13 @@ export default function LowerThird(props: LowerProps) {
          <div
            className='data-bottom'
            style={{
-              transitionDuration: textDuration,
-              transitionDelay: textDelay,
+              animationDuration: transition,
              color: `#${options.bottomColour}`,
              backgroundColor: `#${options.bottomBg}`,
-              fontSize: `${options.bottomSize}em`,
+              fontSize: options.bottomSize,
            }}
          >
-            {textValue.bottom}
+            {bottomText}
          </div>
        </div>
      </div>
@@ -1,10 +1,7 @@
-import { useMemo } from 'react';
-import { useSearchParams } from 'react-router-dom';
 import { CustomFields } from 'ontime-types';

 import { makeOptionsFromCustomFields, OptionTitle } from '../../../common/components/view-params-editor/constants';
 import { ViewOption } from '../../../common/components/view-params-editor/types';
-import safeParseNumber from '../../../common/utils/safeParseNumber';

 export const getLowerThirdOptions = (customFields: CustomFields): ViewOption[] => {
  const topSourceOptions = makeOptionsFromCustomFields(customFields, {
@@ -47,32 +44,18 @@ export const getLowerThirdOptions = (customFields: CustomFields): ViewOption[] =
      collapsible: true,
      options: [
        {
-          id: 'transition-in',
-          title: 'Transition In',
-          description: 'Transition in time (default 3 seconds)',
-          type: 'number',
-          placeholder: '3 (default)',
-        },
-        {
-          id: 'transition-out',
-          title: 'Transition Out',
-          description: 'Transition out time (default 3 seconds)',
-          type: 'number',
-          placeholder: '3 (default)',
-        },
-        {
-          id: 'hold',
-          title: 'Hold',
-          description: 'Time on screen before transition out. Set to -1 to stop transition (default 3 seconds) ',
+          id: 'transition',
+          title: 'Transition',
+          description: 'Transition in time in seconds (default 3)',
          type: 'number',
          placeholder: '3 (default)',
        },
        {
          id: 'delay',
          title: 'Delay',
-          description: 'Delay between trigger and transition in (default 0 seconds)',
+          description: 'Delay between transition in and out in seconds (default 3)',
          type: 'number',
-          placeholder: '0 (default)',
+          placeholder: '3 (default)',
        },
      ],
    },
@@ -86,14 +69,14 @@ export const getLowerThirdOptions = (customFields: CustomFields): ViewOption[] =
          title: 'Top Text Size',
          description: 'Font size of the top text',
          type: 'string',
-          placeholder: '5em',
+          placeholder: '65px',
        },
        {
          id: 'bottom-size',
          title: 'Bottom Text Size',
          description: 'Font size of the bottom text',
          type: 'string',
-          placeholder: '4em',
+          placeholder: '64px',
        },
        {
          id: 'width',
@@ -149,73 +132,3 @@ export const getLowerThirdOptions = (customFields: CustomFields): ViewOption[] =
    },
  ];
 };
-
-type LowerOptions = {
-  width: number;
-  topSrc: string;
-  bottomSrc: string;
-  topColour: string;
-  bottomColour: string;
-  topBg: string;
-  bottomBg: string;
-  topSize: number;
-  bottomSize: number;
-  transitionIn: number;
-  transitionOut: number;
-  hold: number;
-  delay: number;
-  key: string;
-  lineColour: string;
-};
-
-const defaultOptions: Readonly<LowerOptions> = {
-  width: 45,
-  topSrc: 'title',
-  bottomSrc: 'lowerMsg',
-  topColour: '000000',
-  bottomColour: '000000',
-  topBg: 'FFF0',
-  bottomBg: 'FFF0',
-  topSize: 5,
-  bottomSize: 4,
-  transitionIn: 3,
-  transitionOut: 3,
-  hold: 3,
-  delay: 0,
-  key: 'FFF0',
-  lineColour: 'FF0000',
-};
-
-/**
- * Utility extract the view options from URL Params
- * the names and fallbacks are manually matched with defaultOptions
- */
-function getOptionsFromParams(searchParams: URLSearchParams): LowerOptions {
-  // we manually make an object that matches the key above
-  return {
-    width: safeParseNumber(searchParams.get('width'), defaultOptions.width),
-    topSrc: searchParams.get('top-src') ?? defaultOptions.topSrc,
-    bottomSrc: searchParams.get('bottom-src') ?? defaultOptions.bottomSrc,
-    topColour: searchParams.get('top-colour') ?? defaultOptions.topColour,
-    bottomColour: searchParams.get('bottom-colour') ?? defaultOptions.bottomColour,
-    topBg: searchParams.get('top-bg') ?? defaultOptions.topBg,
-    bottomBg: searchParams.get('bottom-bg') ?? defaultOptions.bottomBg,
-    topSize: safeParseNumber(searchParams.get('top-size'), defaultOptions.topSize),
-    bottomSize: safeParseNumber(searchParams.get('bottom-size'), defaultOptions.bottomSize),
-    transitionIn: safeParseNumber(searchParams.get('transition-in'), defaultOptions.transitionIn),
-    transitionOut: safeParseNumber(searchParams.get('transition-out'), defaultOptions.transitionOut),
-    hold: safeParseNumber(searchParams.get('hold'), defaultOptions.hold),
-    delay: safeParseNumber(searchParams.get('hold'), defaultOptions.delay),
-    key: searchParams.get('key') ?? defaultOptions.key,
-    lineColour: searchParams.get('line-colour') ?? defaultOptions.lineColour,
-  };
-}
-
-/**
- * Hook exposes the timer view options
- */
-export function useLowerOptions(): LowerOptions {
-  const [searchParams] = useSearchParams();
-  const options = useMemo(() => getOptionsFromParams(searchParams), [searchParams]);
-  return options;
-}
@@ -93,7 +93,7 @@ $orange-active: #f60;
  }

  .studio-timer {
-    font-size: calc(var(--clock-size) / 6);
+    font-size: calc(var(--clock-size) / 5);
    line-height: 1em;

    color: var(--studio-active, $red-active);
@@ -140,7 +140,7 @@ export const ScheduleProvider = ({
  let selectedEventIndex = events.findIndex((event) => event.id === selectedEventId);

  // we want to show the event after the current
-  const viewEvents = events.slice(selectedEventIndex + 1);
+  const viewEvents = events.toSpliced(0, selectedEventIndex + 1);
  selectedEventIndex = 0;

  return (
@@ -104,7 +104,7 @@ export default function CuesheetTable(props: CuesheetTableProps) {
      <div ref={tableContainerRef} className={style.cuesheetContainer}>
        <table className={style.cuesheet} id='cuesheet' {...listeners}>
          <CuesheetHeader headerGroups={headerGroups} />
-          <CuesheetBody rowModel={rowModel} selectedRef={selectedRef} table={table} />
+          <CuesheetBody rowModel={rowModel} selectedRef={selectedRef} table={table} columnSizing={columnSizing} />
        </table>
      </div>
      <CuesheetTableMenu showModal={showModal} />
@@ -19,10 +19,7 @@ function BlockRow(props: BlockRowProps) {
    return null;
  }

-  // guard the use case where user has hidden all columns
-  const fillColumns = Math.min(columnCount, 1);
-
-  const paddingRows = new Array(fillColumns).fill(null);
+  const paddingRows = new Array(columnCount - 1).fill(null);

  return (
    <tr className={style.blockRow}>
@@ -16,24 +16,16 @@ interface CuesheetBodyProps {
  rowModel: RowModel<OntimeRundownEntry>;
  selectedRef: MutableRefObject<HTMLTableRowElement | null>;
  table: Table<OntimeRundownEntry>;
+  columnSizing: Record<string, number>;
 }

 export default function CuesheetBody(props: CuesheetBodyProps) {
-  const { rowModel, selectedRef, table } = props;
+  const { rowModel, selectedRef, table, columnSizing } = props;

  const { selectedEventId } = useSelectedEventId();
  const { hideDelays, hidePast } = useCuesheetOptions();

-  const getVisibleColumns = lazyEvaluate(() => table.getVisibleFlatColumns());
-  const getColumnHash = lazyEvaluate(() => {
-    let columnHash = '';
-    const columns = getVisibleColumns();
-
-    for (let i = 0; i < columns.length; i++) {
-      columnHash += `${columns[i].getIndex()}-${columns[i].getSize()} `;
-    }
-    return columnHash;
-  });
+  const getColumnCount = lazyEvaluate(() => table.getVisibleFlatColumns().length);

  let eventIndex = 0;
  // for the first event, it will be past if there is something selected
@@ -49,7 +41,7 @@ export default function CuesheetBody(props: CuesheetBodyProps) {
        }

        if (isOntimeBlock(entry)) {
-          const columnCount = getVisibleColumns().length;
+          const columnCount = getColumnCount();
          return <BlockRow columnCount={columnCount} key={key} title={entry.title} hidePast={isPast && hidePast} />;
        }
        if (isOntimeDelay(entry)) {
@@ -66,7 +58,6 @@ export default function CuesheetBody(props: CuesheetBodyProps) {
        if (isOntimeEvent(entry)) {
          eventIndex++;
          const isSelected = key === selectedEventId;
-          const columnHash = getColumnHash();

          if (isPast && hidePast) {
            return null;
@@ -96,7 +87,7 @@ export default function CuesheetBody(props: CuesheetBodyProps) {
              selectedRef={isSelected ? selectedRef : undefined}
              rowBgColour={rowBgColour}
              table={table}
-              columnHash={columnHash}
+              columnSizing={columnSizing}
            />
          );
        }
@@ -23,7 +23,7 @@ interface EventRowProps {
  rowBgColour?: string;
  table: Table<OntimeRundownEntry>;
  /** hack to force re-rendering of the row when the column sizes change */
-  columnHash: string;
+  columnSizing: Record<string, number>;
 }

 export default memo(EventRow, (prevProps, nextProps) => {
@@ -35,7 +35,8 @@ export default memo(EventRow, (prevProps, nextProps) => {
    prevProps.isPast === nextProps.isPast &&
    prevProps.selectedRef === nextProps.selectedRef &&
    prevProps.rowBgColour === nextProps.rowBgColour &&
-    prevProps.columnHash === nextProps.columnHash
+    prevProps.table === nextProps.table &&
+    prevProps.columnSizing === nextProps.columnSizing
  );
 });

@@ -1,6 +1,6 @@
 {
  "name": "ontime-electron",
-  "version": "3.15.2",
+  "version": "3.14.3",
  "author": "Carlos Valente",
  "description": "Time keeping for live events",
  "repository": "https://github.com/cpvalente/ontime",
@@ -2,7 +2,7 @@
  "name": "ontime-server",
  "type": "module",
  "main": "src/index.ts",
-  "version": "3.15.2",
+  "version": "3.14.3",
  "exports": "./src/index.js",
  "dependencies": {
    "@googleapis/sheets": "^5.0.5",
@@ -52,7 +52,6 @@
    "dev": "cross-env NODE_ENV=development tsx watch ./src/index.ts",
    "dev:inspect": "cross-env NODE_ENV=development tsx watch --inspect ./src/index.ts",
    "dev:test": "cross-env IS_TEST=true tsx ./src/index.ts",
-    "prebuild": "tsx ./scripts/bundleCss.ts",
    "build": "node esbuild.electron.js",
    "build:electron": "node esbuild.electron.js",
    "build:local": "node esbuild.dev.js",
@@ -1,24 +0,0 @@
-import { existsSync } from 'fs';
-import { writeFile } from 'node:fs/promises';
-import { defaultCss } from '../src/user/styles/bundledCss';
-import path from 'path';
-
-/**
- * Script to write contents of bundledCss to override.css
- */
-async function bundleCss() {
-  try {
-    const stylesDir = path.resolve(process.cwd(), 'src', 'user', 'styles');
-    const cssFile = path.resolve(stylesDir, 'override.css');
-
-    if (!existsSync(cssFile)) {
-      throw new Error('File does not exist');
-    }
-
-    await writeFile(cssFile, defaultCss, { encoding: 'utf8' });
-  } catch (error) {
-    console.error('Failed writing to CSS file: ', error);
-  }
-}
-
-bundleCss();
@@ -1,41 +0,0 @@
-import { defaultCss } from '../../user/styles/bundledCss.js';
-import type { Request, Response } from 'express';
-import { readCssFile, writeCssFile } from './assets.service.js';
-
-/**
- * Exposes the contents of the cssOverride.css file
- */
-export async function getCssOverride(_req: Request, res: Response) {
-  try {
-    const data = await readCssFile();
-    res.status(200).send(data);
-  } catch (error) {
-    res.status(500).send({ message: error });
-  }
-}
-
-/**
- * Allows modifying the cssOverride.css file
- */
-export async function postCssOverride(req: Request, res: Response) {
-  const { css } = req.body;
-
-  try {
-    await writeCssFile(css);
-    res.status(204).send();
-  } catch (error) {
-    res.status(500).send({ message: error });
-  }
-}
-
-/**
- * Restores the default cssOverride.css file
- */
-export async function restoreCss(_req: Request, res: Response) {
-  try {
-    await writeCssFile(defaultCss);
-    res.status(200).send(defaultCss);
-  } catch (error) {
-    res.status(500).send({ message: error });
-  }
-}
@@ -1,10 +0,0 @@
-import express from 'express';
-
-import { getCssOverride, postCssOverride, restoreCss } from './assets.controller.js';
-import { validatePostCss } from './assets.validation.js';
-
-export const router = express.Router();
-
-router.get('/css', getCssOverride);
-router.post('/css', validatePostCss, postCssOverride);
-router.post('/css/restore', restoreCss);
@@ -1,33 +0,0 @@
-import { publicFiles } from '../../setup/index.js';
-import { existsSync } from 'node:fs';
-import { readFile, writeFile } from 'node:fs/promises';
-import { defaultCss } from '../../user/styles/bundledCss.js';
-
-/**
- * Reads the user's css file
- * @returns css contents in the file
- */
-export async function readCssFile(): Promise<string> {
-  const path = publicFiles.cssOverride;
-  if (!existsSync(path)) {
-    await writeFile(path, defaultCss, { encoding: 'utf8' });
-  }
-
-  const css = await readFile(path, { encoding: 'utf8' });
-
-  return css;
-}
-
-/**
- * Writes the user's css file
- * @param css the updated css to write to file
- */
-export async function writeCssFile(css: string) {
-  const path = publicFiles.cssOverride;
-  if (!existsSync(path)) {
-    await writeFile(path, css, { encoding: 'utf8' });
-    return;
-  }
-
-  await writeFile(path, css, { encoding: 'utf8' });
-}
@@ -1,12 +0,0 @@
-import { Request, Response, NextFunction } from 'express';
-import { body, validationResult } from 'express-validator';
-
-export const validatePostCss = [
-  body('css').exists().isString().trim(),
-
-  (req: Request, res: Response, next: NextFunction) => {
-    const errors = validationResult(req);
-    if (!errors.isEmpty()) return res.status(422).json({ errors: errors.array() });
-    next();
-  },
-];
@@ -9,13 +9,12 @@ import type {
 import { deleteAtIndex, generateId } from 'ontime-utils';

 import { getDataProvider } from '../../classes/data-provider/DataProvider.js';
-import { getTimedEvents } from '../../services/rundown-service/rundownUtils.js';

 /**
 * Gets a copy of the stored automation settings
 */
 export function getAutomationSettings(): AutomationSettings {
-  return getDataProvider().getAutomation();
+  return structuredClone(getDataProvider().getAutomation());
 }

 /**
@@ -139,25 +138,14 @@ export async function deleteAutomation(id: string): Promise<void> {
  if (!Object.hasOwn(automations, id)) {
    return;
  }
-
-  // prevent deleting a automation that is in use in triggers
-  const triggers = getAutomationTriggers().filter((trigger) => trigger.automationId === id);
-  if (triggers.length) {
-    throw new Error(
-      `Unable to delete automation used in trigger ${triggers[0].title}${triggers.length > 1 ? ` and ${triggers.length - 1} more` : ''}`,
-    );
+  // prevent deleting a automation that is in use
+  const triggers = getAutomationTriggers();
+  for (let i = 0; i < triggers.length; i++) {
+    const trigger = triggers[i];
+    if (trigger.automationId === id) {
+      throw new Error(`Unable to delete automation used in trigger ${trigger.title}`);
+    }
  }
-
-  // prevent deleting a automation that is in use in events
-  const events = getTimedEvents().filter(
-    (event) => event.triggers && event.triggers.some((trigger) => trigger.automationId === id),
-  );
-  if (events.length) {
-    throw new Error(
-      `Unable to delete automation used in event: ${events[0].id}${events.length > 1 ? ` and ${events.length - 1} more` : ''}`,
-    );
-  }
-
  delete automations[id];
  await saveChanges({ automations });
 }
@@ -3,10 +3,10 @@ import {
  isOntimeAction,
  isOSCOutput,
  LogOrigin,
-  TimerLifeCycle,
  type AutomationFilter,
  type AutomationOutput,
  type FilterRule,
+  type TimerLifeCycle,
 } from 'ontime-types';
 import { getPropertyFromPath } from 'ontime-utils';

@@ -23,21 +23,14 @@ import { toOntimeAction } from './clients/ontime.client.js';
 /**
 * Exposes a method for triggering actions based on a TimerLifeCycle event
 */
-export function triggerAutomations(cycle: TimerLifeCycle, state: RuntimeState) {
+export function triggerAutomations(event: TimerLifeCycle, state: RuntimeState) {
  if (!getAutomationsEnabled()) {
    return;
  }

-  let triggers = getAutomationTriggers();
-
-  // get triggers from event
-  if (state.eventNow?.triggers) {
-    triggers = triggers.concat(state.eventNow.triggers);
-  }
-
-  // note: there are no onStop triggers in event
-  const filteredTrigger = triggers.filter((trigger) => trigger.trigger === cycle);
-  if (filteredTrigger.length === 0) {
+  const triggers = getAutomationTriggers();
+  const triggerAutomations = triggers.filter((trigger) => trigger.trigger === event);
+  if (triggerAutomations.length === 0) {
    return;
  }

@@ -46,7 +39,7 @@ export function triggerAutomations(cycle: TimerLifeCycle, state: RuntimeState) {
    return;
  }

-  filteredTrigger.forEach((trigger) => {
+  triggerAutomations.forEach((trigger) => {
    const automation = automations[trigger.automationId];
    if (!automation || automation.outputs.length === 0) {
      return;
@@ -12,7 +12,6 @@ import { router as excelRouter } from './excel/excel.router.js';
 import { router as sessionRouter } from './session/session.router.js';
 import { router as viewSettingsRouter } from './view-settings/viewSettings.router.js';
 import { router as reportRouter } from './report/report.router.js';
-import { router as assetsRouter } from './assets/assets.router.js';

 export const appRouter = express.Router();

@@ -28,7 +27,6 @@ appRouter.use('/url-presets', urlPresetsRouter);
 appRouter.use('/session', sessionRouter);
 appRouter.use('/view-settings', viewSettingsRouter);
 appRouter.use('/report', reportRouter);
-appRouter.use('/assets', assetsRouter);

 //we don't want to redirect to react index when using api routes
 appRouter.all('/*', (_req, res) => {
@@ -1,4 +1,4 @@
-import { MessageState, OffsetMode, OntimeEvent, SimpleDirection, SimplePlayback } from 'ontime-types';
+import { MessageState, OntimeEvent, SimpleDirection, SimplePlayback } from 'ontime-types';
 import { MILLIS_PER_HOUR, MILLIS_PER_SECOND } from 'ontime-utils';

 import { DeepPartial } from 'ts-essentials';
@@ -17,7 +17,6 @@ import { throttle } from '../utils/throttle.js';
 import { willCauseRegeneration } from '../services/rundown-service/rundownCacheUtils.js';

 import { handleLegacyMessageConversion } from './integration.legacy.js';
-import { coerceEnum } from '../utils/coerceType.js';

 const throttledUpdateEvent = throttle(updateEvent, 20);
 let lastRequest: Date | null = null;
@@ -287,11 +286,6 @@ const actionHandlers: Record<string, ActionHandler> = {

    throw new Error('No matching method provided');
  },
-  offsetmode: (payload) => {
-    const mode = coerceEnum<OffsetMode>(payload, OffsetMode);
-    runtimeService.setOffsetMode(mode);
-    return { payload: 'success' };
-  },
 };

 /**
@@ -124,6 +124,6 @@ function setSessionCookie(res: Response, token: string) {
    httpOnly: false, // allow websocket to access cookie
    secure: true,
    path: '/', // allow cookie to be accessed from any path
-    sameSite: 'none', // allow cookies to be sent in cross-origin requests (e.g., iframes)
+    sameSite: 'strict',
  });
 }
@@ -740,8 +740,8 @@ describe('getRuntimeOffset()', () => {
      },
    } as RuntimeState;

-    const { absoluteOffset } = getRuntimeOffset(state);
-    expect(absoluteOffset).toBe(-50);
+    const offset = getRuntimeOffset(state);
+    expect(offset).toBe(-50);
  });

  it('added time subtracts time offset (positive offset)', () => {
@@ -763,8 +763,8 @@ describe('getRuntimeOffset()', () => {
      },
    } as RuntimeState;

-    const { absoluteOffset } = getRuntimeOffset(state);
-    expect(absoluteOffset).toBe(-60);
+    const offset = getRuntimeOffset(state);
+    expect(offset).toBe(-60);
  });

  it('considers running overtime (negative offset)', () => {
@@ -787,8 +787,8 @@ describe('getRuntimeOffset()', () => {
      },
    } as RuntimeState;

-    const { absoluteOffset } = getRuntimeOffset(state);
-    expect(absoluteOffset).toBe(-10);
+    const offset = getRuntimeOffset(state);
+    expect(offset).toBe(-10);
  });

  it('paused time is delayed time (negative offset)', () => {
@@ -812,8 +812,8 @@ describe('getRuntimeOffset()', () => {
      },
    } as RuntimeState;

-    const { absoluteOffset } = getRuntimeOffset(state);
-    expect(absoluteOffset).toBe(-25);
+    const offset = getRuntimeOffset(state);
+    expect(offset).toBe(-25);
  });

  it('offset doesnt exist if we havent started', () => {
@@ -850,8 +850,8 @@ describe('getRuntimeOffset()', () => {
      _timer: { pausedAt: null },
    } as RuntimeState;

-    const { absoluteOffset } = getRuntimeOffset(state);
-    expect(absoluteOffset).toBe(0);
+    const offset = getRuntimeOffset(state);
+    expect(offset).toBe(0);
  });

  it('handles loaded event', () => {
@@ -891,8 +891,8 @@ describe('getRuntimeOffset()', () => {
      _timer: { pausedAt: null },
    } as RuntimeState;

-    const { absoluteOffset } = getRuntimeOffset(state);
-    expect(absoluteOffset).toBe(81000000 - 79521653); // clock - timestart
+    const offset = getRuntimeOffset(state);
+    expect(offset).toBe(81000000 - 79521653); // clock - timestart
  });

  it('with time-to-end, offsets dont exist if we are not in overtime', () => {
@@ -944,8 +944,8 @@ describe('getRuntimeOffset()', () => {
      _timer: { pausedAt: null },
    } as RuntimeState;

-    const { absoluteOffset } = getRuntimeOffset(state);
-    expect(absoluteOffset).toBe(0);
+    const offset = getRuntimeOffset(state);
+    expect(offset).toBe(0);
  });

  it('with time-to-end, offset is the overtime', () => {
@@ -997,8 +997,8 @@ describe('getRuntimeOffset()', () => {
      _timer: { pausedAt: null },
    } as RuntimeState;

-    const { absoluteOffset } = getRuntimeOffset(state);
-    expect(absoluteOffset).toBe(-400000); // <--- offset is always the overtime
+    const offset = getRuntimeOffset(state);
+    expect(offset).toBe(-400000); // <--- offset is always the overtime
  });

  it('handles time-to-end started after the end time', () => {
@@ -1040,84 +1040,9 @@ describe('getRuntimeOffset()', () => {

    const updateCurrent = getCurrent(state);
    state.timer.current = updateCurrent;
-    const { absoluteOffset } = getRuntimeOffset(state);
-    expect(millisToString(absoluteOffset)).toBe('-00:16:40');
-    expect(absoluteOffset).toBe(81000000 - 82000000); // <-- planned end - now
-  });
-});
-
-describe('getRelativeOffset()', () => {
-  it('relative offset is 0 when starting at the planed time', () => {
-    const state = {
-      eventNow: {
-        id: '1',
-        timeStart: 150,
-      },
-      timer: {
-        startedAt: 150,
-        addedTime: 0,
-        current: 0,
-      },
-      _timer: {
-        pausedAt: null,
-      },
-      runtime: {
-        actualStart: 150,
-        plannedStart: 150,
-      },
-    } as RuntimeState;
-
-    const { absoluteOffset, relativeOffset } = getRuntimeOffset(state);
-    expect(absoluteOffset).toBe(0);
-    expect(relativeOffset).toBe(0);
-  });
-  it('relative offset is 0 when starting after the planed time', () => {
-    const state = {
-      eventNow: {
-        id: '1',
-        timeStart: 100,
-      },
-      timer: {
-        startedAt: 150,
-        addedTime: 0,
-        current: 0,
-      },
-      _timer: {
-        pausedAt: null,
-      },
-      runtime: {
-        actualStart: 150,
-        plannedStart: 100,
-      },
-    } as RuntimeState;
-
-    const { absoluteOffset, relativeOffset } = getRuntimeOffset(state);
-    expect(absoluteOffset).toBe(-50);
-    expect(relativeOffset).toBe(0);
-  });
-  it('relative offset is 0 when starting before the planed time', () => {
-    const state = {
-      eventNow: {
-        id: '1',
-        timeStart: 150,
-      },
-      timer: {
-        startedAt: 100,
-        addedTime: 0,
-        current: 0,
-      },
-      _timer: {
-        pausedAt: null,
-      },
-      runtime: {
-        actualStart: 100,
-        plannedStart: 150,
-      },
-    } as RuntimeState;
-
-    const { absoluteOffset, relativeOffset } = getRuntimeOffset(state);
-    expect(absoluteOffset).toBe(50);
-    expect(relativeOffset).toBe(0);
+    const offset = getRuntimeOffset(state);
+    expect(millisToString(offset)).toBe('-00:16:40');
+    expect(offset).toBe(81000000 - 82000000); // <-- planned end - now
  });
 });

@@ -1244,10 +1169,8 @@ describe('getTimerPhase()', () => {
      },
      _timer: {
        forceFinish: null,
-        pausedAt: null,
-      },
-      _rundown: {
        totalDelay: 0,
+        pausedAt: null,
      },
    } as RuntimeState;

@@ -1285,10 +1208,8 @@ describe('getTimerPhase()', () => {
      },
      _timer: {
        forceFinish: null,
-        pausedAt: null,
-      },
-      _rundown: {
        totalDelay: 0,
+        pausedAt: null,
      },
    } as RuntimeState;

@@ -108,7 +108,7 @@ export async function deleteEvent(eventIds: string[]) {
  const scopedMutation = cache.mutateCache(cache.remove);
  const { didMutate } = await scopedMutation({ eventIds });

-  if (!didMutate) {
+  if (didMutate === false) {
    return;
  }

@@ -146,7 +146,7 @@ export async function editEvent(patch: PatchWithId) {
  const { newEvent, didMutate } = await scopedMutation({ patch, eventId: patch.id });

  // short circuit if nothing changed
-  if (!didMutate) {
+  if (didMutate === false) {
    return newEvent;
  }

@@ -118,7 +118,6 @@ export enum regenerateWhitelist {
  'timeWarning',
  'timeDanger',
  'custom',
-  'triggers',
 }

 /**
@@ -4,7 +4,6 @@ import {
  isPlayableEvent,
  LogOrigin,
  MaybeNumber,
-  OffsetMode,
  OntimeEvent,
  Playback,
  TimerLifeCycle,
@@ -69,11 +68,6 @@ class RuntimeService {
    RuntimeService.previousState = {} as RuntimeState;
  }

-  @broadcastResult
-  setOffsetMode(mode: OffsetMode) {
-    runtimeState.setOffsetMode(mode);
-  }
-
  /**
   * Checks result of an update and notifies integrations as needed
   * This is the only exception of a private method that has broadcast result
@@ -703,14 +697,11 @@ function broadcastResult(_target: any, _propertyKey: string, descriptor: Propert
    // for the very fist run there will be nothing in the previousState so we force an update
    const justStarted = !RuntimeService.previousState?.timer;

-    // offset mode has been changed
-    const offsetModeChanged = RuntimeService.previousState?.runtime?.offsetMode !== state.runtime.offsetMode;
-
    // if playback changes most things should update
    const hasChangedPlayback = RuntimeService.previousState.timer?.playback !== state.timer.playback;

    // combine all big changes
-    const hasImmediateChanges = hasNewLoaded || justStarted || hasChangedPlayback || offsetModeChanged;
+    const hasImmediateChanges = hasNewLoaded || justStarted || hasChangedPlayback;

    /**
     * Timer should be updated if
@@ -116,10 +116,10 @@ export function skippedOutOfEvent(state: RuntimeState, previousTime: number, ski
 * Positive offset is time ahead
 * Negative offset is time delayed
 */
-export function getRuntimeOffset(state: RuntimeState): { absoluteOffset: number; relativeOffset: number } {
+export function getRuntimeOffset(state: RuntimeState): number {
  // nothing to calculate if there are no loaded events or if we havent started
  if (state.eventNow === null || state.runtime.actualStart === null) {
-    return { absoluteOffset: 0, relativeOffset: 0 };
+    return 0;
  }

  // eslint-disable-next-line no-unused-labels -- dev code path
@@ -133,16 +133,18 @@ export function getRuntimeOffset(state: RuntimeState): { absoluteOffset: number;
  const { clock } = state;
  const { countToEnd, timeStart } = state.eventNow;
  const { addedTime, current, startedAt } = state.timer;
-  const { actualStart, plannedStart } = state.runtime;

  // if we havent started, but the timer is armed
  // the offset is the difference to the schedule
  if (startedAt === null) {
-    return { absoluteOffset: timeStart - clock, relativeOffset: 0 };
+    return timeStart - clock;
  }

  const overtime = Math.min(current, 0);
  // in time-to-end, offset is overtime
+  if (countToEnd) {
+    return overtime;
+  }

  const startOffset = timeStart - startedAt;
  const pausedTime = state._timer.pausedAt === null ? 0 : clock - state._timer.pausedAt;
@@ -151,20 +153,7 @@ export function getRuntimeOffset(state: RuntimeState): { absoluteOffset: number;
  // addedTime - time added by user (negative offset)
  // pausedTime - time the playback was paused (negative offset)
  // overtime - how long the timer has been over-running (negative offset)
-  const offset = startOffset - addedTime - pausedTime + overtime;
-
-  // offset between planned rundown start and actual rundown start
-  const rundownStartOffset = actualStart - plannedStart;
-
-  // offset offset relative to the actual rundown start
-  const relativeOffset = offset + rundownStartOffset;
-
-  // in time-to-end, offset is overtime
-  if (countToEnd) {
-    return { absoluteOffset: overtime, relativeOffset };
-  }
-
-  return { absoluteOffset: offset, relativeOffset };
+  return startOffset - addedTime - pausedTime + overtime;
 }

 /**
@@ -175,7 +164,7 @@ export function getExpectedEnd(state: RuntimeState): MaybeNumber {
  if (state.runtime.actualStart === null || state.runtime.plannedEnd === null) {
    return null;
  }
-  return state.runtime.plannedEnd - state.runtime.offset + state._rundown.totalDelay;
+  return state.runtime.plannedEnd - state.runtime.offset + state._timer.totalDelay;
 }

 /**
@@ -1,4 +1,4 @@
-import { TimerPhase, Playback, OffsetMode } from 'ontime-types';
+import { TimerPhase, Playback } from 'ontime-types';
 import { deepmerge } from 'ontime-utils';
 import type { RuntimeState } from '../runtimeState.js';

@@ -16,12 +16,10 @@ const baseState: RuntimeState = {
    selectedEventIndex: null,
    numEvents: 0,
    offset: 0,
-    relativeOffset: 0,
    plannedStart: 0,
    plannedEnd: 0,
    actualStart: null,
    expectedEnd: null,
-    offsetMode: OffsetMode.Absolute,
  },
  timer: {
    addedTime: 0,
@@ -37,12 +35,10 @@ const baseState: RuntimeState = {
  },
  _timer: {
    forceFinish: null,
+    totalDelay: 0,
    pausedAt: null,
    secondaryTarget: null,
  },
-  _rundown: {
-    totalDelay: 0,
-  },
 };

 export function makeRuntimeStateData(patch?: Partial<RuntimeState>): RuntimeState {
@@ -4,7 +4,7 @@ import { deepmerge } from 'ontime-utils';
 import {
  type RuntimeState,
  addTime,
-  clearState,
+  clear,
  getState,
  load,
  loadBlock,
@@ -71,7 +71,7 @@ beforeAll(() => {

 describe('mutation on runtimeState', () => {
  beforeEach(() => {
-    clearState();
+    clear();

    vi.mock('../../services/rundown-service/RundownService.js', async (importOriginal) => {
      const actual = (await importOriginal()) as object;
@@ -246,7 +246,7 @@ describe('roll mode', () => {
  beforeEach(() => {
    vi.useFakeTimers();
    vi.setSystemTime('jan 1 00:00');
-    clearState();
+    clear();
  });
  afterEach(() => {
    vi.useRealTimers();
@@ -3,7 +3,6 @@ import {
  isPlayableEvent,
  MaybeNumber,
  MaybeString,
-  OffsetMode,
  OntimeEvent,
  OntimeRundown,
  PlayableEvent,
@@ -46,12 +45,10 @@ export type RuntimeState = {
  // private properties of the timer calculations
  _timer: {
    forceFinish: MaybeNumber; // whether we should declare an event as finished, will contain the finish time
+    totalDelay: number; // this value comes from rundown service
    pausedAt: MaybeNumber;
    secondaryTarget: MaybeNumber;
  };
-  _rundown: {
-    totalDelay: number; // this value comes from rundown service
-  };
 };

 const runtimeState: RuntimeState = {
@@ -65,12 +62,10 @@ const runtimeState: RuntimeState = {
  timer: { ...runtimeStorePlaceholder.timer },
  _timer: {
    forceFinish: null,
+    totalDelay: 0,
    pausedAt: null,
    secondaryTarget: null,
  },
-  _rundown: {
-    totalDelay: 0,
-  },
 };

 export function getState(): Readonly<RuntimeState> {
@@ -84,36 +79,10 @@ export function getState(): Readonly<RuntimeState> {
    runtime: { ...runtimeState.runtime },
    timer: { ...runtimeState.timer },
    _timer: { ...runtimeState._timer },
-    _rundown: { ...runtimeState._rundown },
  };
 }

-/* clear data related to the current event, but leave in place data about the global run state
- * used when loading a new event but the playback is not interrupted
- */
-export function clearEventData() {
-  runtimeState.eventNow = null;
-  runtimeState.publicEventNow = null;
-  runtimeState.eventNext = null;
-  runtimeState.publicEventNext = null;
-
-  runtimeState.runtime.offset = 0;
-  runtimeState.runtime.relativeOffset = 0;
-  runtimeState.runtime.expectedEnd = null;
-  runtimeState.runtime.selectedEventIndex = null;
-
-  runtimeState.timer.playback = Playback.Stop;
-  runtimeState.clock = clock.timeNow();
-  runtimeState.timer = { ...runtimeStorePlaceholder.timer };
-
-  // when clearing, we maintain the total delay from the rundown
-  runtimeState._timer.forceFinish = null;
-  runtimeState._timer.pausedAt = null;
-  runtimeState._timer.secondaryTarget = null;
-}
-
-// clear all necessary data when doing a full stop and the event is unloaded
-export function clearState() {
+export function clear() {
  runtimeState.eventNow = null;
  runtimeState.publicEventNow = null;
  runtimeState.eventNext = null;
@@ -124,7 +93,6 @@ export function clearState() {
  runtimeState.publicEventNext = null;

  runtimeState.runtime.offset = 0;
-  runtimeState.runtime.relativeOffset = 0;
  runtimeState.runtime.actualStart = null;
  runtimeState.runtime.expectedEnd = null;
  runtimeState.runtime.selectedEventIndex = null;
@@ -169,7 +137,7 @@ type RundownData = {
 */
 export function updateRundownData(rundownData: RundownData) {
  // we keep this in private state since there is no UI use case for it
-  runtimeState._rundown.totalDelay = rundownData.totalDelay;
+  runtimeState._timer.totalDelay = rundownData.totalDelay;

  runtimeState.runtime.numEvents = rundownData.numEvents;
  runtimeState.runtime.plannedStart = rundownData.firstStart;
@@ -186,7 +154,10 @@ export function load(
  rundown: OntimeRundown,
  initialData?: Partial<TimerState & RestorePoint>,
 ): boolean {
-  clearEventData();
+  // we need to persist the current block state across loads
+  const prevCurrentBlock = { ...runtimeState.currentBlock };
+  clear();
+  runtimeState.currentBlock = prevCurrentBlock;

  // filter rundown
  const timedEvents = filterTimedEvents(rundown);
@@ -213,9 +184,7 @@ export function load(
    const firstStart = initialData?.firstStart;
    if (firstStart === null || typeof firstStart === 'number') {
      runtimeState.runtime.actualStart = firstStart;
-      const { absoluteOffset, relativeOffset } = getRuntimeOffset(runtimeState);
-      runtimeState.runtime.offset = absoluteOffset;
-      runtimeState.runtime.relativeOffset = relativeOffset;
+      runtimeState.runtime.offset = getRuntimeOffset(runtimeState);
      runtimeState.runtime.expectedEnd = getExpectedEnd(runtimeState);
    }
    if (typeof initialData.blockStartAt === 'number') {
@@ -420,9 +389,7 @@ export function start(state: RuntimeState = runtimeState): boolean {
  runtimeState.timer.phase = getTimerPhase(runtimeState);

  // update offset
-  const { absoluteOffset, relativeOffset } = getRuntimeOffset(runtimeState);
-  runtimeState.runtime.offset = absoluteOffset;
-  runtimeState.runtime.relativeOffset = relativeOffset;
+  state.runtime.offset = getRuntimeOffset(state);
  state.runtime.expectedEnd = state.runtime.plannedEnd - state.runtime.offset;
  return true;
 }
@@ -442,7 +409,9 @@ export function stop(state: RuntimeState = runtimeState): boolean {
  if (state.timer.playback === Playback.Stop) {
    return false;
  }
-  clearState();
+  clear();
+  runtimeState.runtime.actualStart = null;
+  runtimeState.runtime.expectedEnd = null;
  return true;
 }

@@ -483,9 +452,7 @@ export function addTime(amount: number) {
  runtimeState.timer.current += amount;

  // update runtime delays: over - under
-  const { absoluteOffset, relativeOffset } = getRuntimeOffset(runtimeState);
-  runtimeState.runtime.offset = absoluteOffset;
-  runtimeState.runtime.relativeOffset = relativeOffset;
+  runtimeState.runtime.offset = getRuntimeOffset(runtimeState);
  runtimeState.runtime.expectedEnd = getExpectedEnd(runtimeState);

  return true;
@@ -530,9 +497,7 @@ export function update(): UpdateResult {
  runtimeState.timer.elapsed = runtimeState.timer.duration - runtimeState.timer.current;

  // update runtime, needs up-to-date timer state
-  const { absoluteOffset, relativeOffset } = getRuntimeOffset(runtimeState);
-  runtimeState.runtime.offset = absoluteOffset;
-  runtimeState.runtime.relativeOffset = relativeOffset;
+  runtimeState.runtime.offset = getRuntimeOffset(runtimeState);
  runtimeState.runtime.expectedEnd = getExpectedEnd(runtimeState);

  const finishedNow =
@@ -639,7 +604,9 @@ export function roll(rundown: OntimeRundown, offset = 0): { eventId: MaybeString
  }

  // we need to persist the current block state across loads
-  clearEventData();
+  const prevCurrentBlock = { ...runtimeState.currentBlock };
+  clear();
+  runtimeState.currentBlock = prevCurrentBlock;

  //account for offset but we only keep it if passed to us
  runtimeState.runtime.offset = offset;
@@ -729,7 +696,3 @@ export function loadBlock(rundown: OntimeRundown, state = runtimeState) {
  // update the block anyway
  state.currentBlock.block = newCurrentBlock === null ? null : { ...newCurrentBlock };
 }
-
-export function setOffsetMode(mode: OffsetMode) {
-  runtimeState.runtime.offsetMode = mode;
-}
@@ -1,79 +0,0 @@
-export const defaultCss = `
-/** 
- * This CSS file allows user customisation of the UI
- * We expose some CSS properties to facilitate this (see below in :root)
- * In the cases where this is missing, you can add your selectors here
- */
-
-:root {
-  /** Background colour for the views */
-  --background-color-override: #ececec;
-
-  /** Main text colour for the views */
-  --color-override: #101010;
-
-  /** Text colour for the views */
-  --secondary-color-override: #404040;
-
-  /** Accent text colour, used on active elements */
-  --accent-color-override: #fa5656;
-
-  /** Label text colour, used on active elements */
-  --label-color-override: #6c6c6c;
-
-  /** Timer text colour */
-  --timer-color-override: #202020;
-  --timer-warning-color-override: #ffbc56;
-  --timer-danger-color-override: #e69000;
-  --timer-overtime-color-override: #fa5656;
-  --timer-pending-color-override: #578AF4;
-
-  /** Background for card elements on background */
-  --card-background-color-override: #fff;
-
-  /** Font used for all text in views */
-  --font-family-override: 'Open Sans';
-
-  /** Font used for clock in /minimal and /clock views */
-  --font-family-bold-override: 'Arial Black';
-
-  /** Colour used for external message and aux timer in /timer */
-  --external-color-override: #161616;
-
-  /** View specific features: /backstage */
-  /** ---- Background highlight for blink behaviour */
-  --card-background-color-blink-override: #339e4e;
-  /** ---- Colour used for progress bar background */
-  --timer-progress-bg-override: #fff;
-  /** ---- Colour used for progress bar progress */
-  --timer-progress-override: #202020;
-
-  /** View specific features: /op */
-  --operator-customfield-font-size-override: 1.25rem;
-  --operator-running-bg-override: #339e4e;
-
-  /** View specific features: /studio */
-  --studio-active: #101010;
-  --studio-idle: #cfcfcf;
-  --studio-active-label: #101010;
-  --studio-idle-label: #595959;
-  --studio-overtime: #101010;
-
-  /** View specific features: /lower */
-  --lowerThird-font-family-override: 'Courier New';
-  --lowerThird-top-font-weight-override: bold;
-  --lowerThird-bottom-font-weight-override: bold;
-  --lowerThird-top-font-style-override: normal;
-  --lowerThird-bottom-font-style-override: italic;
-  --lowerThird-line-height-override: 1vh;
-  --lowerThird-text-align-override: end;
-}
-
-/** 
- * You can inspect the page in your browser and add the selectors here.
- * In the below example, we change the colour of the overlay message in the stage-timer view.
- */
-.stage-timer > .message-overlay--active > div {
-  color: red;
-}
-`;
@@ -838,7 +838,6 @@ describe('getCustomFieldData()', () => {
        lighting: 'lx',
        sound: 'sound',
        video: 'av',
-        ontime_label: 'excel label',
      },
      entryId: 'id',
    } as ImportMap;
@@ -846,7 +845,6 @@ describe('getCustomFieldData()', () => {
    const customFields: CustomFields = {
      lighting: { label: 'lx', type: 'string', colour: 'red' },
      sound: { label: 'sound', type: 'string', colour: 'green' },
-      ontime_key: { label: 'ontime_label', type: 'string', colour: 'blue' },
    };

    const result = getCustomFieldData(importMap, customFields);
@@ -866,11 +864,6 @@ describe('getCustomFieldData()', () => {
        colour: '',
        label: 'video',
      },
-      ontime_key: {
-        type: 'string',
-        colour: 'blue',
-        label: 'ontime_label',
-      },
    });

    // it is an inverted record of <importKey, ontimeKey>
@@ -878,7 +871,6 @@ describe('getCustomFieldData()', () => {
      lx: 'lighting',
      sound: 'sound',
      av: 'video',
-      'excel label': 'ontime_key',
    });
  });
 });
@@ -1030,8 +1022,8 @@ describe('parseExcel()', () => {
      user2: { type: 'string', colour: 'blue', label: 'user2' },
    };

-    const { customFields, rundown } = parseExcel(testdata, existingCustomFields, importMap);
-    expect(customFields).toStrictEqual({
+    const parsedData = parseExcel(testdata, existingCustomFields, importMap);
+    expect(parsedData.customFields).toStrictEqual({
      user0: {
        type: 'string',
        colour: 'red',
@@ -1083,9 +1075,9 @@ describe('parseExcel()', () => {
        label: 'user9',
      },
    });
-    expect(rundown.length).toBe(2);
-    expect(rundown[0]).toMatchObject(expectedParsedRundown[0]);
-    expect(rundown[1]).toMatchObject(expectedParsedRundown[1]);
+    expect(parsedData.rundown.length).toBe(2);
+    expect(parsedData.rundown[0]).toMatchObject(expectedParsedRundown[0]);
+    expect(parsedData.rundown[1]).toMatchObject(expectedParsedRundown[1]);
  });

  it('parses a file without custom fields', () => {
@@ -4,7 +4,7 @@ import type { Server } from 'http';
 import { networkInterfaces } from 'os';
 import type { AddressInfo } from 'net';

-import { isDocker, isOntimeCloud, isProduction } from '../externals.js';
+import { isDocker, isProduction } from '../externals.js';
 import { logger } from '../classes/Logger.js';

 /**
@@ -42,10 +42,6 @@ export function getNetworkInterfaces(): { name: string; address: string }[] {
 * @throws any other server errors will result in a throw
 */
 export function serverTryDesiredPort(server: Server, desiredPort: number): Promise<number> {
-  if (isOntimeCloud) {
-    return forceCloudPort(server);
-  }
-
  return new Promise((resolve, reject) => {
    server.once('error', (error) => {
      // we should only move ports if we are in a desktop environment
@@ -88,19 +84,6 @@ export function serverTryDesiredPort(server: Server, desiredPort: number): Promi
  });
 }

-function forceCloudPort(server: Server): Promise<number> {
-  return new Promise((resolve, reject) => {
-    server.listen(4001, '0.0.0.0', () => {
-      const address = server.address();
-      if (!isAddressInfo(address)) {
-        reject(new Error('Unknown port type, unable to proceed'));
-        return;
-      }
-      resolve(address.port);
-    });
-  });
-}
-
 /**
 * Guard verifies that the given address is a usable AddressInfo object
 */
@@ -1,6 +1,5 @@
 import {
  customFieldLabelToKey,
-  customKeyFromLabel,
  defaultImportMap,
  generateId,
  type ImportMap,
@@ -61,7 +60,7 @@ export function getCustomFieldData(
  const customFields = {};
  const customFieldImportKeys = {};
  for (const ontimeLabel in importMap.custom) {
-    const ontimeKey = customKeyFromLabel(ontimeLabel, existingCustomFields) ?? customFieldLabelToKey(ontimeLabel);
+    const ontimeKey = customFieldLabelToKey(ontimeLabel);
    const importLabel = importMap.custom[ontimeLabel].toLowerCase();
    const colour = ontimeKey in existingCustomFields ? existingCustomFields[ontimeKey].colour : '';
    customFields[ontimeKey] = {
@@ -199,9 +198,9 @@ export const parseExcel = (
        entryIdIndex = col;
        rundownMetadata['id'] = { row, col };
      },
-      custom: (row: number, col: number, columnText: string, ontimeKey: string) => {
+      custom: (row: number, col: number, columnText: string) => {
        customFieldIndexes[col] = columnText;
-        rundownMetadata[`custom:${ontimeKey}`] = { row, col };
+        rundownMetadata[`custom:${columnText}`] = { row, col };
      },
    } as const;

@@ -267,13 +266,12 @@ export const parseExcel = (

          // check if it is an ontime column
          if (handlers[columnText]) {
-            handlers[columnText](rowIndex, j, undefined, undefined);
+            handlers[columnText](rowIndex, j, undefined);
          }

          // check if it is a custom field
          if (columnText in customFieldImportKeys) {
-            const ontimeKey = customFieldImportKeys[columnText];
-            handlers.custom(rowIndex, j, columnText, ontimeKey);
+            handlers.custom(rowIndex, j, columnText);
          }

          // else. we don't know how to handle this column
@@ -389,16 +387,15 @@ export function createPatch(originalEvent: OntimeEvent, patchEvent: Partial<Onti
    skip: typeof patchEvent.skip === 'boolean' ? patchEvent.skip : originalEvent.skip,
    note: makeString(patchEvent.note, originalEvent.note),
    colour: makeString(patchEvent.colour, originalEvent.colour),
-    delay: originalEvent.delay, // is regenerated if timer related data is changed
-    dayOffset: originalEvent.dayOffset, // is regenerated if timer related data is changed
-    gap: originalEvent.gap, // is regenerated if timer related data is changed
+    delay: 0, // is always regenerated by the cache
+    dayOffset: 0, // is always regenerated by the cache
+    gap: 0, // is always regenerated by the cache
    // short circuit empty string
    cue: makeString(patchEvent.cue ?? null, originalEvent.cue),
    revision: originalEvent.revision,
    timeWarning: patchEvent.timeWarning ?? originalEvent.timeWarning,
    timeDanger: patchEvent.timeDanger ?? originalEvent.timeDanger,
    custom: { ...originalEvent.custom, ...patchEvent.custom },
-    triggers: patchEvent.triggers ?? originalEvent.triggers,
  };
 }

@@ -1,6 +1,6 @@
 import { expect, test } from '@playwright/test';

-test('time until absolute', async ({ page }) => {
+test('linked time until', async ({ page }) => {
  await page.goto('http://localhost:4001/editor');

  await page.getByRole('button', { name: 'Clear rundown' }).click();
@@ -11,46 +11,7 @@ test('time until absolute', async ({ page }) => {
  await page.getByRole('button', { name: 'Event', exact: true }).nth(1).click();
  await page.getByRole('button', { name: 'Event', exact: true }).nth(1).click();

-  await page.getByRole('button', { name: 'Absolute' }).click();
  await page.getByTestId('entry-1').getByLabel('Start event').click();
-  await expect(page.getByTestId('offset')).not.toContainText('00:00:00'); // This might be a bad test requires that the test is not run at 0h
-  await page.getByLabel('Pause event').click();
-
-  await expect(page.getByTestId('entry-2').locator('#event-block')).toContainText('9m');
-  await expect(page.getByTestId('entry-3').locator('#event-block')).toContainText('19m');
-  await expect(page.getByTestId('entry-4').locator('#event-block')).toContainText('29m');
-
-  await page.getByTestId('entry-1').getByTestId('time-input-duration').click();
-  await page.getByTestId('entry-1').getByTestId('time-input-duration').fill('6h');
-  await page.getByTestId('entry-1').getByTestId('time-input-duration').press('Enter');
-
-  await expect(page.getByTestId('entry-2').locator('#event-block')).toContainText('5h59m');
-  await expect(page.getByTestId('entry-3').locator('#event-block')).toContainText('6h9m');
-  await expect(page.getByTestId('entry-4').locator('#event-block')).toContainText('6h19m');
-
-  await page.getByTestId('entry-1').getByTestId('time-input-duration').click();
-  await page.getByTestId('entry-1').getByTestId('time-input-duration').fill('30s');
-  await page.getByTestId('entry-1').getByTestId('time-input-duration').press('Enter');
-
-  await expect(page.getByTestId('entry-2').locator('#event-block')).toContainText('29s');
-  await expect(page.getByTestId('entry-3').locator('#event-block')).toContainText('10m');
-  await expect(page.getByTestId('entry-4').locator('#event-block')).toContainText('20m');
-});
-
-test('time until relative', async ({ page }) => {
-  await page.goto('http://localhost:4001/editor');
-
-  await page.getByRole('button', { name: 'Clear rundown' }).click();
-  await page.getByRole('button', { name: 'Delete all' }).click();
-
-  await page.getByRole('button', { name: 'Create Event' }).click();
-  await page.getByRole('button', { name: 'Event' }).nth(4).click();
-  await page.getByRole('button', { name: 'Event', exact: true }).nth(1).click();
-  await page.getByRole('button', { name: 'Event', exact: true }).nth(1).click();
-
-  await page.getByRole('button', { name: 'Relative' }).click();
-  await page.getByTestId('entry-1').getByLabel('Start event').click();
-  await expect(page.getByTestId('offset')).toContainText('00:00:00'); // This might be a bad test as it ruires the evaluation to happen within 1s
  await page.getByLabel('Pause event').click();

  await expect(page.getByTestId('entry-2').locator('#event-block')).toContainText('9m');
@@ -1,6 +1,6 @@
 {
  "name": "ontime",
-  "version": "3.15.2",
+  "version": "3.14.3",
  "description": "Time keeping for live events",
  "keywords": [
    "ontime",
@@ -1,4 +1,4 @@
-import type { EndAction, EventCustomFields, MaybeString, TimerType, TimeStrategy, Trigger } from '../../index.js';
+import type { EndAction, EventCustomFields, MaybeString, TimerType, TimeStrategy } from '../../index.js';

 export enum SupportedEvent {
  Event = 'event',
@@ -44,7 +44,6 @@ export type OntimeEvent = OntimeBaseEvent & {
  timeWarning: number;
  timeDanger: number;
  custom: EventCustomFields;
-  triggers?: Trigger[];
 };

 export type PlayableEvent = OntimeEvent & { skip: false };
@@ -1,18 +1,11 @@
 import type { MaybeNumber } from '../../utils/utils.type.js';

-export enum OffsetMode {
-  Absolute = 'absolute',
-  Relative = 'relative',
-}
-
 export type Runtime = {
  numEvents: number;
  selectedEventIndex: MaybeNumber;
  offset: number;
-  relativeOffset: number;
  plannedStart: MaybeNumber;
  actualStart: MaybeNumber;
  plannedEnd: MaybeNumber;
  expectedEnd: MaybeNumber;
-  offsetMode: OffsetMode;
 };
@@ -1,10 +1,9 @@
 import { SimpleDirection, SimplePlayback } from './AuxTimer.type.js';
 import { Playback } from './Playback.type.js';
-import { OffsetMode } from './Runtime.type.js';
 import type { RuntimeStore } from './RuntimeStore.type.js';
 import { TimerPhase } from './TimerState.type.js';

-export const runtimeStorePlaceholder: Readonly<RuntimeStore> = {
+export const runtimeStorePlaceholder: RuntimeStore = {
  clock: 0,
  timer: {
    addedTime: 0,
@@ -33,12 +32,10 @@ export const runtimeStorePlaceholder: Readonly<RuntimeStore> = {
    selectedEventIndex: null, // changes if rundown changes or we load a new event
    numEvents: 0, // change initiated by user
    offset: 0, // changes at runtime
-    relativeOffset: 0, // changes at runtime
    plannedStart: 0, // only changes if event changes
    plannedEnd: 0, // only changes if event changes, overflows over dayInMs
    actualStart: null, // set once we start the timer
    expectedEnd: null, // changes with runtime, based on offset, overflows over dayInMs
-    offsetMode: OffsetMode.Absolute,
  },
  currentBlock: {
    block: null,
@@ -87,7 +87,6 @@ export { TimerLifeCycle, timerLifecycleValues } from './definitions/core/TimerLi
 export type { TimerMessage, MessageState, SecondarySource } from './definitions/runtime/MessageControl.type.js';

 export type { Runtime } from './definitions/runtime/Runtime.type.js';
-export { OffsetMode } from './definitions/runtime/Runtime.type.js';
 export type { RuntimeStore } from './definitions/runtime/RuntimeStore.type.js';
 export { runtimeStorePlaceholder } from './definitions/runtime/RuntimeStore.js';
 export { type TimerState, TimerPhase } from './definitions/runtime/TimerState.type.js';
@@ -105,10 +104,10 @@ export {
  isOntimeDelay,
  isOntimeEvent,
  isPlayableEvent,
+  isOntimeCycle,
  isKeyOfType,
  isOSCOutput,
  isHTTPOutput,
  isOntimeAction,
-  isTimerLifeCycle,
 } from './utils/guards.js';
 export type { MaybeNumber, MaybeString } from './utils/utils.type.js';
@@ -2,7 +2,8 @@ import type { AutomationOutput, HTTPOutput, OntimeAction, OSCOutput } from '../d
 import type { OntimeBlock, OntimeDelay, OntimeEvent, PlayableEvent } from '../definitions/core/OntimeEvent.type.js';
 import { SupportedEvent } from '../definitions/core/OntimeEvent.type.js';
 import type { OntimeRundownEntry } from '../definitions/core/Rundown.type.js';
-import { type TimerLifeCycle, timerLifecycleValues } from '../definitions/core/TimerLifecycle.type.js';
+import type { TimerLifeCycleKey } from '../definitions/core/TimerLifecycle.type.js';
+import { TimerLifeCycle } from '../definitions/core/TimerLifecycle.type.js';

 type MaybeEvent = OntimeRundownEntry | Partial<OntimeRundownEntry> | null | undefined;

@@ -28,6 +29,11 @@ export function isKeyOfType<T extends object>(key: PropertyKey, obj: T): key is
  return key in obj;
 }

+export function isOntimeCycle(maybeCycle: unknown): maybeCycle is TimerLifeCycleKey {
+  if (typeof maybeCycle !== 'string') return false;
+  return Object.values(TimerLifeCycle).includes(maybeCycle as TimerLifeCycle);
+}
+
 export function isOSCOutput(output: AutomationOutput): output is OSCOutput {
  return output.type === 'osc';
 }
@@ -39,8 +45,3 @@ export function isHTTPOutput(output: AutomationOutput): output is HTTPOutput {
 export function isOntimeAction(output: AutomationOutput): output is OntimeAction {
  return output.type === 'ontime';
 }
-
-export function isTimerLifeCycle(maybeCycle: unknown): maybeCycle is TimerLifeCycle {
-  if (typeof maybeCycle !== 'string') return false;
-  return timerLifecycleValues.includes(maybeCycle);
-}
@@ -58,7 +58,7 @@ export { isAlphanumeric, isAlphanumericWithSpace } from './src/regex-utils/isAlp
 export { isColourHex } from './src/regex-utils/isColourHex.js';
 export { splitWhitespace } from './src/regex-utils/splitWhitespace.js';

-export { customFieldLabelToKey, customKeyFromLabel } from './src/customField-utils/customFieldLabelToKey.js';
+export { customFieldLabelToKey } from './src/customField-utils/customFieldLabelToKey.js';

 // helpers from externals
 export { deepmerge } from './src/externals/deepmerge.js';
@@ -31,7 +31,7 @@ export function insertAtIndex<T>(index: number, item: T, array: T[]): T[] {
 * @param array
 */
 export function deleteAtIndex<T>(index: number, array: T[]) {
-  return array.filter((_, i) => i !== index);
+  return array.toSpliced(index, 1);
 }

 /**
@@ -1,5 +1,3 @@
-import type { CustomFields } from 'ontime-types';
-
 import { isAlphanumericWithSpace } from '../regex-utils/isAlphanumeric.js';

 /**
@@ -11,11 +9,3 @@ export const customFieldLabelToKey = (label: string): string | null => {
  }
  return null;
 };
-
-export const customKeyFromLabel = (label: string, fields: CustomFields): string | null => {
-  const maybeMatchingKey = Object.keys(fields).find((key) => fields[key].label === label);
-  if (maybeMatchingKey) {
-    return maybeMatchingKey;
-  }
-  return null;
-};
@@ -126,8 +126,8 @@ importers:
        specifier: ^5.62.7
        version: 5.62.7(@tanstack/react-query@5.62.7(react@18.3.1))(react@18.3.1)
      '@tanstack/react-table':
-        specifier: ^8.21.3
-        version: 8.21.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: ^8.20.5
+        version: 8.20.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
      autosize:
        specifier: ^6.0.1
        version: 6.0.1
@@ -143,9 +143,6 @@ importers:
      framer-motion:
        specifier: ^10.10.0
        version: 10.11.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      prismjs:
-        specifier: ^1.29.0
-        version: 1.29.0
      react:
        specifier: ^18.3.1
        version: 18.3.1
@@ -170,9 +167,6 @@ importers:
      react-router-dom:
        specifier: ^6.3.0
        version: 6.6.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react-simple-code-editor:
-        specifier: ^0.14.1
-        version: 0.14.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
      web-vitals:
        specifier: ^3.1.1
        version: 3.1.1
@@ -189,9 +183,6 @@ importers:
      '@types/color':
        specifier: ^3.0.3
        version: 3.0.3
-      '@types/prismjs':
-        specifier: ^1.26.5
-        version: 1.26.5
      '@types/react':
        specifier: ^18.0.26
        version: 18.0.26
@@ -1986,15 +1977,15 @@ packages:
    peerDependencies:
      react: ^18 || ^19

-  '@tanstack/react-table@8.21.3':
-    resolution: {integrity: sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww==}
+  '@tanstack/react-table@8.20.6':
+    resolution: {integrity: sha512-w0jluT718MrOKthRcr2xsjqzx+oEM7B7s/XXyfs19ll++hlId3fjTm+B2zrR3ijpANpkzBAr15j1XGVOMxpggQ==}
    engines: {node: '>=12'}
    peerDependencies:
      react: '>=16.8'
      react-dom: '>=16.8'

-  '@tanstack/table-core@8.21.3':
-    resolution: {integrity: sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==}
+  '@tanstack/table-core@8.20.5':
+    resolution: {integrity: sha512-P9dF7XbibHph2PFRz8gfBKEXEY/HJPOhym8CHmjF8y3q5mWpKx9xtZapXQUWCgkqvsK0R46Azuz+VaxD4Xl+Tg==}
    engines: {node: '>=12'}

  '@tootallnate/once@2.0.0':
@@ -2085,9 +2076,6 @@ packages:
  '@types/plist@3.0.5':
    resolution: {integrity: sha512-E6OCaRmAe4WDmWNsL/9RMqdkkzDCY1etutkflWk4c+AcjDU07Pcz1fQwTX0TQz+Pxqn9i4L1TU3UFpjnrcDgxA==}

-  '@types/prismjs@1.26.5':
-    resolution: {integrity: sha512-AUZTa7hQ2KY5L7AmtSiqxlhWxb4ina0yd8hNbl4TWuqnv/pFP0nDMb3YrfSBf4hJVGLh2YEIBfKaBW/9UEl6IQ==}
-
  '@types/prop-types@15.7.5':
    resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==}

@@ -4135,10 +4123,6 @@ packages:
    engines: {node: '>=14'}
    hasBin: true

-  prismjs@1.29.0:
-    resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==}
-    engines: {node: '>=6'}
-
  process-nextick-args@2.0.1:
    resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}

@@ -4294,12 +4278,6 @@ packages:
    peerDependencies:
      react: '>=16.8'

-  react-simple-code-editor@0.14.1:
-    resolution: {integrity: sha512-BR5DtNRy+AswWJECyA17qhUDvrrCZ6zXOCfkQY5zSmb96BVUbpVAv03WpcjcwtCwiLbIANx3gebHOcXYn1EHow==}
-    peerDependencies:
-      react: '>=16.8.0'
-      react-dom: '>=16.8.0'
-
  react-style-singleton@2.2.1:
    resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==}
    engines: {node: '>=10'}
@@ -6750,13 +6728,13 @@ snapshots:
      '@tanstack/query-core': 5.62.7
      react: 18.3.1

-  '@tanstack/react-table@8.21.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@tanstack/react-table@8.20.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
    dependencies:
-      '@tanstack/table-core': 8.21.3
+      '@tanstack/table-core': 8.20.5
      react: 18.3.1
      react-dom: 18.3.1(react@18.3.1)

-  '@tanstack/table-core@8.21.3': {}
+  '@tanstack/table-core@8.20.5': {}

  '@tootallnate/once@2.0.0': {}

@@ -6872,8 +6850,6 @@ snapshots:
      xmlbuilder: 15.1.1
    optional: true

-  '@types/prismjs@1.26.5': {}
-
  '@types/prop-types@15.7.5': {}

  '@types/qs@6.9.7': {}
@@ -9311,8 +9287,6 @@ snapshots:

  prettier@3.3.1: {}

-  prismjs@1.29.0: {}
-
  process-nextick-args@2.0.1: {}

  progress@2.0.3: {}
@@ -9457,11 +9431,6 @@ snapshots:
      '@remix-run/router': 1.2.1
      react: 18.3.1

-  react-simple-code-editor@0.14.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
-    dependencies:
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-
  react-style-singleton@2.2.1(@types/react@18.0.26)(react@18.3.1):
    dependencies:
      get-nonce: 1.0.1