bump version to 3.15.1

refactor: create hash of table state
chore: upgrade table dependencies
2026-07-26 10:38:55 +00:00 · 2025-04-30 20:28:42 +02:00 · 2025-04-30 20:23:49 +02:00 · 2025-04-30 20:23:49 +02:00 · 2025-04-30 20:23:49 +02:00 · 2025-04-20 13:52:43 +02:00
230 changed files with 7717 additions and 5294 deletions
@@ -0,0 +1,5 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
@@ -0,0 +1,51 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="CssUnknownProperty" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="myCustomPropertiesEnabled" value="true" />
+      <option name="myIgnoreVendorSpecificProperties" value="false" />
+      <option name="myCustomPropertiesList">
+        <value>
+          <list size="3">
+            <item index="0" class="java.lang.String" itemvalue="scrollbar-color" />
+            <item index="1" class="java.lang.String" itemvalue="scrollbar-width" />
+            <item index="2" class="java.lang.String" itemvalue="app-region" />
+          </list>
+        </value>
+      </option>
+    </inspection_tool>
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+    <inspection_tool class="HttpUrlsUsage" enabled="true" level="WEAK WARNING" enabled_by_default="true">
+      <option name="ignoredUrls">
+        <list>
+          <option value="http://localhost" />
+          <option value="http://127.0.0.1" />
+          <option value="http://0.0.0.0" />
+          <option value="http://www.w3.org/" />
+          <option value="http://json-schema.org/draft" />
+          <option value="http://java.sun.com/" />
+          <option value="http://xmlns.jcp.org/" />
+          <option value="http://javafx.com/javafx/" />
+          <option value="http://javafx.com/fxml" />
+          <option value="http://maven.apache.org/xsd/" />
+          <option value="http://maven.apache.org/POM/" />
+          <option value="http://www.springframework.org/schema/" />
+          <option value="http://www.springframework.org/tags" />
+          <option value="http://www.springframework.org/security/tags" />
+          <option value="http://www.thymeleaf.org" />
+          <option value="http://www.jboss.org/j2ee/schema/" />
+          <option value="http://www.jboss.com/xml/ns/" />
+          <option value="http://www.ibm.com/webservices/xsd" />
+          <option value="http://activemq.apache.org/schema/" />
+          <option value="http://schema.cloudfoundry.org/spring/" />
+          <option value="http://schemas.xmlsoap.org/" />
+          <option value="http://cxf.apache.org/schemas/" />
+          <option value="http://primefaces.org/ui" />
+          <option value="http://tiles.apache.org/" />
+          <option value="http://__IP__" />
+        </list>
+      </option>
+    </inspection_tool>
+    <inspection_tool class="Stylelint" enabled="true" level="ERROR" enabled_by_default="true" />
+  </profile>
+</component>
@@ -1,6 +1,6 @@
 {
    "name": "@getontime/cli",
-    "version": "3.14.3",
+    "version": "3.15.1",
    "author": "Carlos Valente",
    "description": "Time keeping for live events",
    "repository": "https://github.com/cpvalente/ontime",
@@ -1,6 +1,6 @@
 {
  "name": "ontime-ui",
-  "version": "3.14.3",
+  "version": "3.15.1",
  "private": true,
  "type": "module",
  "dependencies": {
@@ -17,12 +17,13 @@
    "@table-nav/react": "^0.0.7",
    "@tanstack/react-query": "^5.62.7",
    "@tanstack/react-query-devtools": "^5.62.7",
-    "@tanstack/react-table": "^8.20.5",
+    "@tanstack/react-table": "^8.21.3",
    "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",
@@ -31,6 +32,7 @@
    "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"
  },
@@ -65,6 +67,7 @@
    "@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:",
@@ -0,0 +1,30 @@
+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;
+}
@@ -10,6 +10,7 @@ export const PROJECT_DATA = ['project'];
 export const PROJECT_LIST = ['projectList'];
 export const RUNDOWN = ['rundown'];
 export const RUNTIME = ['runtimeStore'];
+export const SHEET_STATE = ['sheetState'];
 export const URL_PRESETS = ['urlpresets'];
 export const VIEW_SETTINGS = ['viewSettings'];
 export const CLIENT_LIST = ['clientList'];
@@ -18,8 +19,11 @@ export const REPORT = ['report'];
 // API URLs
 export const apiEntryUrl = `${serverURL}/data`;

-const userAssetsPath = 'user';
-const cssOverridePath = 'styles/override.css';
+export const projectDataURL = `${serverURL}/project`;
+export const rundownURL = `${serverURL}/events`;
+export const ontimeURL = `${serverURL}/ontime`;

+export const userAssetsPath = 'user';
+export const cssOverridePath = 'styles/override.css';
 export const overrideStylesURL = `${serverURL}/${userAssetsPath}/${cssOverridePath}`;
 export const projectLogoPath = `${serverURL}/${userAssetsPath}/logo`;
@@ -2,7 +2,7 @@ import axios, { AxiosResponse } from 'axios';
 import { DatabaseModel, MessageResponse, ProjectData, ProjectFileListResponse, QuickStartData } from 'ontime-types';

 import { makeTable } from '../../views/cuesheet/cuesheet.utils';
-import { aggregateRundowns, makeCSVFromArrayOfArrays } from '../utils/csv';
+import { makeCSVFromArrayOfArrays } from '../utils/csv';

 import { apiEntryUrl } from './constants';
 import { createBlob, downloadBlob } from './utils';
@@ -40,11 +40,9 @@ export async function downloadProject(fileName: string) {
 export async function downloadCSV(fileName: string = 'rundown') {
  try {
    const { data, name } = await fileDownload(fileName);
-    const { project, rundowns, customFields } = data;
-
-    const flatRundowns = aggregateRundowns(rundowns);
-    const sheetData = makeTable(project, flatRundowns, customFields);
+    const { project, rundown, customFields } = data;

+    const sheetData = makeTable(project, rundown, customFields);
    const fileContent = makeCSVFromArrayOfArrays(sheetData);

    const blob = createBlob(fileContent, 'text/csv;charset=utf-8;');
@@ -1,11 +1,16 @@
 import axios, { AxiosResponse } from 'axios';
-import { CustomFields, Rundown } from 'ontime-types';
+import { CustomFields, OntimeRundown } from 'ontime-types';
 import { ImportMap } from 'ontime-utils';

 import { apiEntryUrl } from './constants';

 const excelPath = `${apiEntryUrl}/excel`;

+type PreviewSpreadsheetResponse = {
+  rundown: OntimeRundown;
+  customFields: CustomFields;
+};
+
 /**
 * upload Excel file to server
 * @return string - file ID op the uploaded file
@@ -29,10 +34,6 @@ export async function getWorksheetNames(): Promise<string[]> {
  return response.data;
 }

-type PreviewSpreadsheetResponse = {
-  rundown: Rundown;
-  customFields: CustomFields;
-};
 export async function importRundownPreview(options: ImportMap): Promise<PreviewSpreadsheetResponse> {
  const response: AxiosResponse<PreviewSpreadsheetResponse> = await axios.post(`${excelPath}/preview`, {
    options,
@@ -1,44 +1,29 @@
 import axios, { AxiosResponse } from 'axios';
-import {
-  MessageResponse,
-  OntimeEntry,
-  OntimeEvent,
-  ProjectRundownsList,
-  Rundown,
-  TransientEventPayload,
-} from 'ontime-types';
+import { MessageResponse, OntimeEvent, OntimeRundownEntry, RundownCached, TransientEventPayload } from 'ontime-types';

 import { apiEntryUrl } from './constants';

 const rundownPath = `${apiEntryUrl}/rundown`;

-/**
- * HTTP request to fetch a list of existing rundowns
- */
-export async function fetchProjectRundownList(): Promise<ProjectRundownsList> {
-  const res = await axios.get(`${rundownPath}/`);
-  return res.data;
-}
-
 /**
 * HTTP request to fetch all events
 */
-export async function fetchCurrentRundown(): Promise<Rundown> {
-  const res = await axios.get(`${rundownPath}/current`);
+export async function fetchNormalisedRundown(): Promise<RundownCached> {
+  const res = await axios.get(`${rundownPath}/normalised`);
  return res.data;
 }

 /**
 * HTTP request to post new event
 */
-export async function requestPostEvent(data: TransientEventPayload): Promise<AxiosResponse<OntimeEntry>> {
+export async function requestPostEvent(data: TransientEventPayload): Promise<AxiosResponse<OntimeRundownEntry>> {
  return axios.post(rundownPath, data);
 }

 /**
 * HTTP request to put new event
 */
-export async function requestPutEvent(data: Partial<OntimeEntry>): Promise<AxiosResponse<OntimeEntry>> {
+export async function requestPutEvent(data: Partial<OntimeRundownEntry>): Promise<AxiosResponse<OntimeRundownEntry>> {
  return axios.put(rundownPath, data);
 }

@@ -63,7 +48,7 @@ export type ReorderEntry = {
 /**
 * HTTP request to reorder events
 */
-export async function requestReorderEvent(data: ReorderEntry): Promise<AxiosResponse<OntimeEntry>> {
+export async function requestReorderEvent(data: ReorderEntry): Promise<AxiosResponse<OntimeRundownEntry>> {
  return axios.patch(`${rundownPath}/reorder`, data);
 }

@@ -1,5 +1,5 @@
 import axios, { AxiosResponse } from 'axios';
-import { AuthenticationStatus, CustomFields, Rundown } from 'ontime-types';
+import { AuthenticationStatus, CustomFields, OntimeRundown } from 'ontime-types';
 import { ImportMap } from 'ontime-utils';

 import { apiEntryUrl } from './constants';
@@ -54,7 +54,7 @@ export const previewRundown = async (
  sheetId: string,
  options: ImportMap,
 ): Promise<{
-  rundown: Rundown;
+  rundown: OntimeRundown;
  customFields: CustomFields;
 }> => {
  const response = await axios.post(`${sheetsPath}/${sheetId}/read`, { options });
@@ -23,7 +23,7 @@ export type OptionWithoutGroup = {
  withDivider?: boolean;
 };

-type OptionWithGroup = {
+export type OptionWithGroup = {
  label: string;
  group: Omit<OptionWithoutGroup, 'isGroup'>[];
 };
@@ -4,12 +4,13 @@ import { IoCopy } from 'react-icons/io5';
 import { Button, ButtonGroup, IconButton, Tooltip } from '@chakra-ui/react';

 import { tooltipDelayFast } from '../../../ontimeConfig';
+import { Size } from '../../models/Util.type';
 import copyToClipboard from '../../utils/copyToClipboard';

 interface CopyTagProps {
  copyValue: string;
  label: string;
-  size?: 'xs' | 'sm' | 'md' | 'lg';
+  size?: Size;
  disabled?: boolean;
  onClick?: () => void;
 }
@@ -3,8 +3,8 @@ import React from 'react';
 // skipcq: JS-C1003 - sentry does not expose itself as an ES Module.
 import * as Sentry from '@sentry/react';

-import { hasConnected, reconnectAttempts } from '../../../common/utils/socket';
-import { runtimeStore } from '../../stores/runtime';
+import { runtimeStore } from '@/common/stores/runtime';
+import { hasConnected, reconnectAttempts, shouldReconnect } from '@/common/utils/socket';

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

@@ -37,7 +37,7 @@ class ErrorBoundary extends React.Component {
      scope.setExtras({
        error,
        store: appState,
-        hasSocket: { hasConnected, reconnectAttempts },
+        hasSocket: { hasConnected, shouldReconnect, reconnectAttempts },
      });
      const eventId = Sentry.captureException(error);
      this.setState({ eventId, info });
@@ -3,8 +3,9 @@
  font-size: $text-body-size;
  text-decoration: underline;
  text-underline-offset: 2px;
+  color: $blue-400;

  &:hover {
-    color: $blue-400;
+    color: $blue-500;
  }
 }
@@ -0,0 +1,45 @@
+$loader-size: 4rem;
+
+.overlay {
+  position: absolute;
+  z-index: 10;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-content: center;
+  background-color: $black-10;
+  backdrop-filter: blur(5px);
+}
+
+
+.loader {
+  width: $loader-size;
+  height: $loader-size;
+  background: $blue-500;
+  display: inline-block;
+  border-radius: 50%;
+  box-sizing: border-box;
+  animation: animloader 1s ease-in infinite;
+}
+
+@keyframes animloader {
+  0% {
+    transform: scale(0);
+    opacity: 0.6;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
+
+@keyframes animloader {
+  0% {
+    transform: scale(0);
+    opacity: 0.6;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
@@ -0,0 +1,9 @@
+import style from './LoaderOverlay.module.scss';
+
+export default function LoaderOverlay() {
+  return (
+    <div className={style.overlay}>
+      <span className={style.loader} />
+    </div>
+  );
+}
@@ -0,0 +1,16 @@
+import { memo } from 'react';
+
+import NavigationMenu from './NavigationMenu';
+
+interface ProductionNavigationMenuProps {
+  isMenuOpen: boolean;
+  onMenuClose: () => void;
+}
+
+function ProductionNavigationMenu(props: ProductionNavigationMenuProps) {
+  const { isMenuOpen, onMenuClose } = props;
+
+  return <NavigationMenu isOpen={isMenuOpen} onClose={onMenuClose} />;
+}
+
+export default memo(ProductionNavigationMenu);
@@ -4,10 +4,10 @@ import type { MultiselectOptions, ParamField } from './types';

 export const makeOptionsFromCustomFields = (
  customFields: CustomFields,
-  additionalOptions: Record<string, string> = {},
+  additionalOptions: Readonly<Record<string, string>> = {},
  filterImageType = true,
 ) => {
-  const options = structuredClone(additionalOptions);
+  const options = { ...additionalOptions };
  for (const [key, value] of Object.entries(customFields)) {
    if (filterImageType && value.type === 'image') {
      continue;
@@ -12,7 +12,7 @@ type OptionsField = {
  defaultValue?: string;
 };

-type MultiselectOption = { value: string; label: string; colour: string };
+export type MultiselectOption = { value: string; label: string; colour: string };
 export type MultiselectOptions = Record<string, MultiselectOption>;
 type MultiOptionsField = {
  type: 'multi-option';
@@ -0,0 +1,32 @@
+// roughly from https://github.com/juliencrn/usehooks-ts/blob/master/packages/usehooks-ts/src/useMediaQuery/useMediaQuery.ts
+
+import { useCallback, useEffect, useState } from 'react';
+
+function getMatches(query: string): boolean {
+  return window.matchMedia(query).matches;
+}
+
+// TODO: debounce handleChange
+export default function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState<boolean>(getMatches(query));
+
+  const handleChange = useCallback(() => {
+    setMatches(getMatches(query));
+  }, [query]);
+
+  useEffect(() => {
+    const matchMedia = window.matchMedia(query);
+
+    // Triggered at the first client-side load and if query changes
+    handleChange();
+
+    // Listen matchMedia
+    matchMedia.addEventListener('change', handleChange);
+
+    return () => {
+      matchMedia.removeEventListener('change', handleChange);
+    };
+  }, [handleChange, query]);
+
+  return matches;
+}
@@ -1,9 +1,11 @@
-import { useQuery } from '@tanstack/react-query';
+import { useMutation, useQuery } from '@tanstack/react-query';

 import { queryRefetchIntervalSlow } from '../../ontimeConfig';
-import { getAutomationSettings } from '../api/automation';
+import { editAutomationSettings, getAutomationSettings } from '../api/automation';
 import { AUTOMATION } from '../api/constants';
+import { logAxiosError } from '../api/utils';
 import { automationPlaceholderSettings } from '../models/AutomationSettings';
+import { ontimeQueryClient } from '../queryClient';

 export default function useAutomationSettings() {
  const { data, status, isFetching, isError, refetch } = useQuery({
@@ -18,3 +20,15 @@ export default function useAutomationSettings() {

  return { data: data ?? automationPlaceholderSettings, status, isFetching, isError, refetch };
 }
+
+export function useAutomationSettingsMutation() {
+  const { isPending, mutateAsync } = useMutation({
+    mutationFn: editAutomationSettings,
+    onError: (error) => logAxiosError('Error saving Automation settings', error),
+    onSuccess: (data) => {
+      ontimeQueryClient.setQueryData(AUTOMATION, data);
+    },
+    onSettled: () => ontimeQueryClient.invalidateQueries({ queryKey: AUTOMATION }),
+  });
+  return { isPending, mutateAsync };
+}
@@ -11,7 +11,7 @@ const placeholderProjectList: ProjectFileListResponse = {
  lastLoadedProject: '',
 };

-function useProjectList() {
+export function useProjectList() {
  const { data, status, refetch } = useQuery({
    queryKey: PROJECT_LIST,
    queryFn: getProjects,
@@ -1,29 +1,23 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
-import { OntimeEntry, Rundown } from 'ontime-types';
+import { NormalisedRundown, OntimeRundown, OntimeRundownEntry, RundownCached } from 'ontime-types';

 import { queryRefetchIntervalSlow } from '../../ontimeConfig';
 import { RUNDOWN } from '../api/constants';
-import { fetchCurrentRundown } from '../api/rundown';
+import { fetchNormalisedRundown } from '../api/rundown';

 import useProjectData from './useProjectData';

 // revision is -1 so that the remote revision is higher
-const cachedRundownPlaceholder: Rundown = {
-  id: 'default',
-  title: '',
-  order: [],
-  entries: {},
-  revision: -1,
-};
+const cachedRundownPlaceholder = { order: [] as string[], rundown: {} as NormalisedRundown, revision: -1 };

 /**
 * Normalised rundown data
 */
 export default function useRundown() {
-  const { data, status, isError, refetch, isFetching } = useQuery<Rundown>({
+  const { data, status, isError, refetch, isFetching } = useQuery<RundownCached>({
    queryKey: RUNDOWN,
-    queryFn: fetchCurrentRundown,
+    queryFn: fetchNormalisedRundown,
    placeholderData: (previousData, _previousQuery) => previousData,
    retry: 5,
    retryDelay: (attempt) => attempt * 2500,
@@ -43,16 +37,16 @@ export function useFlatRundown() {

  const loadedProject = useRef<string>('');
  const [prevRevision, setPrevRevision] = useState<number>(-1);
-  const [flatRundown, setFlatRundown] = useState<OntimeEntry[]>([]);
+  const [flatRunDown, setFlatRunDown] = useState<OntimeRundown>([]);

  // update data whenever the revision changes
  useEffect(() => {
    if (data.revision !== -1 && data.revision !== prevRevision) {
-      const flatRundown = data.order.map((id) => data.entries[id]);
-      setFlatRundown(flatRundown);
+      const flatRundown = data.order.map((id) => data.rundown[id]);
+      setFlatRunDown(flatRundown);
      setPrevRevision(data.revision);
    }
-  }, [data.entries, data.order, data.revision, prevRevision]);
+  }, [data.order, data.revision, data.rundown, prevRevision]);

  // TODO: should we have a project id field?
  // invalidate current version if project changes
@@ -63,13 +57,13 @@ export function useFlatRundown() {
    }
  }, [projectData]);

-  return { data: flatRundown, status };
+  return { data: flatRunDown, status };
 }

 /**
 * Provides access to a partial rundown based on a filter callback
 */
-export function usePartialRundown(cb: (event: OntimeEntry) => boolean) {
+export function usePartialRundown(cb: (event: OntimeRundownEntry) => boolean) {
  const { data, status } = useFlatRundown();
  const filteredData = useMemo(() => {
    return data.filter(cb);
@@ -2,12 +2,11 @@ import { useCallback } from 'react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import {
  isOntimeEvent,
-  MaybeString,
  OntimeBlock,
  OntimeDelay,
-  OntimeEntry,
  OntimeEvent,
-  Rundown,
+  OntimeRundownEntry,
+  RundownCached,
  TimeField,
  TimeStrategy,
  TransientEventPayload,
@@ -32,12 +31,12 @@ import { useEditorSettings } from '../stores/editorSettings';

 export type EventOptions = Partial<{
  // options to any new block (event / delay / block)
-  after: MaybeString;
-  before: MaybeString;
+  after: string;
+  before: string;
  // options to blocks of type OntimeEvent
  defaultPublic: boolean;
  linkPrevious: boolean;
-  lastEventId: MaybeString;
+  lastEventId: string;
 }>;

 /**
@@ -58,11 +57,11 @@ export const useEventAction = () => {

  const getEventById = useCallback(
    (eventId: string) => {
-      const cachedRundown = queryClient.getQueryData<Rundown>(RUNDOWN);
-      if (!cachedRundown?.entries) {
+      const cachedRundown = queryClient.getQueryData<RundownCached>(RUNDOWN);
+      if (!cachedRundown?.rundown) {
        return;
      }
-      return cachedRundown.entries[eventId];
+      return cachedRundown.rundown[eventId];
    },
    [queryClient],
  );
@@ -101,8 +100,9 @@ export const useEventAction = () => {
          newEvent.linkStart = applicationOptions.lastEventId;
        } else if (applicationOptions?.lastEventId) {
          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- we know this is a value
-          const rundownData = queryClient.getQueryData<Rundown>(RUNDOWN)!;
-          const previousEvent = rundownData.entries[applicationOptions.lastEventId];
+          const rundownData = queryClient.getQueryData<RundownCached>(RUNDOWN)!;
+          const { rundown } = rundownData;
+          const previousEvent = rundown[applicationOptions.lastEventId];
          if (isOntimeEvent(previousEvent)) {
            newEvent.timeStart = previousEvent.timeEnd;
          }
@@ -180,21 +180,15 @@ export const useEventAction = () => {
      await queryClient.cancelQueries({ queryKey: RUNDOWN });

      // Snapshot the previous value
-      const previousData = queryClient.getQueryData<Rundown>(RUNDOWN);
+      const previousData = queryClient.getQueryData<RundownCached>(RUNDOWN);
      const eventId = newEvent.id;

      if (previousData && eventId) {
        // optimistically update object
-        const newRundown = { ...previousData.entries };
+        const newRundown = { ...previousData.rundown };
        // @ts-expect-error -- we expect the events to be of same type
        newRundown[eventId] = { ...newRundown[eventId], ...newEvent };
-        queryClient.setQueryData<Rundown>(RUNDOWN, {
-          id: previousData.id,
-          title: previousData.title,
-          order: previousData.order,
-          entries: newRundown,
-          revision: -1,
-        });
+        queryClient.setQueryData(RUNDOWN, { order: previousData.order, rundown: newRundown, revision: -1 });
      }

      // Return a context with the previous and new events
@@ -202,7 +196,7 @@ export const useEventAction = () => {
    },
    // Mutation fails, rollback undoes optimist update
    onError: (_error, _newEvent, context) => {
-      queryClient.setQueryData<Rundown>(RUNDOWN, context?.previousData);
+      queryClient.setQueryData(RUNDOWN, context?.previousData);
    },
    // Mutation finished, failed or successful
    // Fetch anyway, just to be sure
@@ -216,7 +210,7 @@ export const useEventAction = () => {
   * Updates existing event
   */
  const updateEvent = useCallback(
-    async (event: Partial<OntimeEntry>) => {
+    async (event: Partial<OntimeRundownEntry>) => {
      try {
        await _updateEventMutation.mutateAsync(event);
      } catch (error) {
@@ -302,9 +296,9 @@ export const useEventAction = () => {
       * Utility function to get the previous event end time
       */
      function getPreviousEnd(): number {
-        const cachedRundown = queryClient.getQueryData<Rundown>(RUNDOWN);
+        const cachedRundown = queryClient.getQueryData<RundownCached>(RUNDOWN);

-        if (!cachedRundown?.order || !cachedRundown?.entries) {
+        if (!cachedRundown?.order || !cachedRundown?.rundown) {
          return 0;
        }

@@ -314,7 +308,7 @@ export const useEventAction = () => {
        }
        let previousEnd = 0;
        for (let i = index - 1; i >= 0; i--) {
-          const event = cachedRundown.entries[cachedRundown.order[i]];
+          const event = cachedRundown.rundown[cachedRundown.order[i]];
          if (isOntimeEvent(event)) {
            previousEnd = event.timeEnd;
            break;
@@ -337,11 +331,11 @@ export const useEventAction = () => {
      await queryClient.cancelQueries({ queryKey: RUNDOWN });

      // Snapshot the previous value
-      const previousRundown = queryClient.getQueryData<Rundown>(RUNDOWN);
+      const previousEvents = queryClient.getQueryData<RundownCached>(RUNDOWN);

-      if (previousRundown) {
+      if (previousEvents) {
        const eventIds = new Set(ids);
-        const newRundown = { ...previousRundown.entries };
+        const newRundown = { ...previousEvents.rundown };

        eventIds.forEach((eventId) => {
          if (Object.hasOwn(newRundown, eventId)) {
@@ -355,22 +349,16 @@ export const useEventAction = () => {
          }
        });

-        queryClient.setQueryData<Rundown>(RUNDOWN, {
-          id: previousRundown.id,
-          title: previousRundown.title,
-          order: previousRundown.order,
-          entries: newRundown,
-          revision: -1,
-        });
+        queryClient.setQueryData(RUNDOWN, { order: previousEvents.order, rundown: newRundown, revision: -1 });
      }
-      // Return a context with the previous rundown
-      return { previousRundown };
+      // Return a context with the previous and new events
+      return { previousEvents };
    },
    onSettled: async () => {
      await queryClient.invalidateQueries({ queryKey: RUNDOWN });
    },
    onError: (_error, _newEvent, context) => {
-      queryClient.setQueryData<Rundown>(RUNDOWN, context?.previousRundown);
+      queryClient.setQueryData(RUNDOWN, context?.previousEvents);
    },
    networkMode: 'always',
  });
@@ -398,21 +386,19 @@ export const useEventAction = () => {
      await queryClient.cancelQueries({ queryKey: RUNDOWN });

      // Snapshot the previous value
-      const previousData = queryClient.getQueryData<Rundown>(RUNDOWN);
+      const previousData = queryClient.getQueryData<RundownCached>(RUNDOWN);

      if (previousData) {
        // optimistically update object
        const newOrder = previousData.order.filter((id) => !eventIds.includes(id));
-        const newRundown = { ...previousData.entries };
+        const newRundown = { ...previousData.rundown };
        for (const eventId of eventIds) {
          delete newRundown[eventId];
        }

-        queryClient.setQueryData<Rundown>(RUNDOWN, {
-          id: previousData.id,
-          title: previousData.title,
+        queryClient.setQueryData(RUNDOWN, {
          order: newOrder,
-          entries: newRundown,
+          rundown: newRundown,
          revision: -1,
        });
      }
@@ -423,7 +409,7 @@ export const useEventAction = () => {

    // Mutation fails, rollback undoes optimist update
    onError: (_error, _eventId, context) => {
-      queryClient.setQueryData<Rundown>(RUNDOWN, context?.previousData);
+      queryClient.setQueryData(RUNDOWN, context?.previousData);
    },
    // Mutation finished, failed or successful
    // Fetch anyway, just to be sure
@@ -459,16 +445,10 @@ export const useEventAction = () => {
      await queryClient.cancelQueries({ queryKey: RUNDOWN });

      // Snapshot the previous value
-      const previousData = queryClient.getQueryData<Rundown>(RUNDOWN);
+      const previousData = queryClient.getQueryData<RundownCached>(RUNDOWN);

      // optimistically update object
-      queryClient.setQueryData<Rundown>(RUNDOWN, {
-        id: previousData?.id ?? 'default',
-        title: previousData?.title ?? '',
-        entries: {},
-        order: [],
-        revision: -1,
-      });
+      queryClient.setQueryData(RUNDOWN, { rundown: {}, order: [], revision: -1 });

      // Return a context with the previous and new events
      return { previousData };
@@ -476,7 +456,7 @@ export const useEventAction = () => {

    // Mutation fails, rollback undos optimist update
    onError: (_error, _eventId, context) => {
-      queryClient.setQueryData<Rundown>(RUNDOWN, context?.previousData);
+      queryClient.setQueryData(RUNDOWN, context?.previousData);
    },
    // Mutation finished, failed or successful
    // Fetch anyway, just to be sure
@@ -536,18 +516,13 @@ export const useEventAction = () => {
      await queryClient.cancelQueries({ queryKey: RUNDOWN });

      // Snapshot the previous value
-      const previousData = queryClient.getQueryData<Rundown>(RUNDOWN);
+      const previousData = queryClient.getQueryData<RundownCached>(RUNDOWN);

      if (previousData) {
        // optimistically update object
        const newOrder = reorderArray(previousData.order, data.from, data.to);
-        queryClient.setQueryData<Rundown>(RUNDOWN, {
-          id: previousData.id,
-          title: previousData.title,
-          order: newOrder,
-          entries: previousData.entries,
-          revision: -1,
-        });
+
+        queryClient.setQueryData(RUNDOWN, { order: newOrder, rundown: previousData.rundown, revision: -1 });
      }

      // Return a context with the previous and new events
@@ -556,7 +531,7 @@ export const useEventAction = () => {

    // Mutation fails, rollback undoes optimist update
    onError: (_error, _eventId, context) => {
-      queryClient.setQueryData<Rundown>(RUNDOWN, context?.previousData);
+      queryClient.setQueryData(RUNDOWN, context?.previousData);
    },
    // Mutation finished, failed or successful
    // Fetch anyway, just to be sure
@@ -597,28 +572,22 @@ export const useEventAction = () => {
      await queryClient.cancelQueries({ queryKey: RUNDOWN });

      // Snapshot the previous value
-      const previousData = queryClient.getQueryData<Rundown>(RUNDOWN);
+      const previousData = queryClient.getQueryData<RundownCached>(RUNDOWN);
      if (previousData) {
        // optimistically update object
-        const newRundown = { ...previousData.entries };
-        const eventA = previousData.entries[from];
-        const eventB = previousData.entries[to];
+        const newRundown = { ...previousData.rundown };
+        const eventA = previousData.rundown[from];
+        const eventB = previousData.rundown[to];

        if (!isOntimeEvent(eventA) || !isOntimeEvent(eventB)) {
          return;
        }

-        const [newA, newB] = swapEventData(eventA, eventB);
+        const { newA, newB } = swapEventData(eventA, eventB);
        newRundown[from] = newA;
        newRundown[to] = newB;

-        queryClient.setQueryData<Rundown>(RUNDOWN, {
-          id: previousData.id,
-          title: previousData.title,
-          order: previousData.order,
-          entries: newRundown,
-          revision: -1,
-        });
+        queryClient.setQueryData(RUNDOWN, { order: previousData.order, rundown: newRundown, revision: -1 });
      }

      // Return a context with the previous events
@@ -627,7 +596,7 @@ export const useEventAction = () => {

    // Mutation fails, rollback undoes optimist update
    onError: (_error, _eventId, context) => {
-      queryClient.setQueryData<Rundown>(RUNDOWN, context?.previousData);
+      queryClient.setQueryData(RUNDOWN, context?.previousData);
    },
    // Mutation finished, failed or successful
    // Fetch anyway, just to be sure
@@ -12,7 +12,7 @@ type noop = (this: any, ...args: any[]) => any;

 type PickFunction<T extends noop> = (this: ThisParameterType<T>, ...args: Parameters<T>) => ReturnType<T>;

-const isFunction = (value: unknown): value is (...args: any) => any => typeof value === 'function';
+export const isFunction = (value: unknown): value is (...args: any) => any => typeof value === 'function';

 export default function useMemoisedFn<T extends noop>(fn: T) {
  if (isDev) {
@@ -1,4 +1,4 @@
-import { RuntimeStore, SimpleDirection, SimplePlayback, TimerMessage } from 'ontime-types';
+import { OffsetMode, RuntimeStore, SimpleDirection, SimplePlayback, TimerMessage } from 'ontime-types';

 import { useRuntimeStore } from '../stores/runtime';
 import { socketSendJson } from '../utils/socket';
@@ -91,6 +91,14 @@ export const setPlayback = {
  },
 };

+export const useInfoPanel = createSelector((state: RuntimeStore) => ({
+  eventNow: state.eventNow,
+  eventNext: state.eventNext,
+  playback: state.timer.playback,
+  selectedEventIndex: state.runtime.selectedEventIndex,
+  numEvents: state.runtime.numEvents,
+}));
+
 export const useAuxTimerTime = createSelector((state: RuntimeStore) => state.auxtimer1.current);

 export const useAuxTimerControl = createSelector((state: RuntimeStore) => ({
@@ -137,6 +145,8 @@ export const useProgressData = createSelector((state: RuntimeStore) => ({
  timeDanger: state.eventNow?.timeDanger ?? null,
 }));

+export const setClientName = (newName: string) => socketSendJson('set-client-name', newName);
+
 export const useRuntimeOverview = createSelector((state: RuntimeStore) => ({
  plannedStart: state.runtime.plannedStart,
  actualStart: state.runtime.actualStart,
@@ -150,7 +160,7 @@ export const useRuntimePlaybackOverview = createSelector((state: RuntimeStore) =

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

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

 export const useTimeUntilData = createSelector((state: RuntimeStore) => ({
  clock: state.clock,
-  offset: state.runtime.offset,
+  offset: state.runtime.offsetMode === OffsetMode.Absolute ? state.runtime.offset : state.runtime.relativeOffset,
+  offsetMode: state.runtime.offsetMode,
  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) => ({
@@ -179,6 +192,12 @@ 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,
@@ -0,0 +1 @@
+export type Size = 'xs' | 'sm' | 'md' | 'lg';
@@ -11,7 +11,7 @@ type LogStore = {
  logs: Log[];
 };

-const logger = createStore<LogStore>(() => ({
+export const logger = createStore<LogStore>(() => ({
  logs: [],
 }));

@@ -1,6 +1,4 @@
-import { OntimeEntry, ProjectRundowns, Rundown } from 'ontime-types';
-
-import { aggregateRundowns, makeCSVFromArrayOfArrays } from '../csv';
+import { makeCSVFromArrayOfArrays } from '../csv';

 describe('makeCSVFromArrayOfArrays()', () => {
  it('joins an array of arrays with commas and newlines', () => {
@@ -13,32 +11,3 @@ after newline,after comma
 `);
  });
 });
-
-describe('aggregateRundowns()', () => {
-  it('flattens an object of rundowns into a single array', () => {
-    const rundowns = {
-      first: {
-        id: '',
-        title: '',
-        revision: 0,
-        order: ['1', '2'],
-        entries: {
-          '1': { id: '1' } as OntimeEntry,
-          '2': { id: '2' } as OntimeEntry,
-        },
-      },
-      second: {
-        id: '',
-        title: '',
-        revision: 0,
-        order: ['3', '4'],
-        entries: {
-          '3': { id: '3' } as OntimeEntry,
-          '4': { id: '4' } as OntimeEntry,
-        },
-      } as Rundown,
-    } as ProjectRundowns;
-
-    expect(aggregateRundowns(rundowns)).toStrictEqual([{ id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }]);
-  });
-});
@@ -1,4 +1,4 @@
-import { EndAction, EntryCustomFields, OntimeEvent, SupportedEvent, TimerType, TimeStrategy } from 'ontime-types';
+import { EndAction, EventCustomFields, OntimeEvent, SupportedEvent, TimerType, TimeStrategy } from 'ontime-types';

 import { cloneEvent } from '../eventsManager';

@@ -29,7 +29,7 @@ describe('cloneEvent()', () => {
      gap: 0,
      custom: {
        lighting: '3',
-      } as EntryCustomFields,
+      } as EventCustomFields,
    };

    const cloned = cloneEvent(original);
@@ -1,3 +1,6 @@
+import { OffsetMode } from 'ontime-types';
+import { dayInMs } from 'ontime-utils';
+
 import { calculateTimeUntilStart, formatTime, nowInMillis } from '../time';

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

 describe('calculateTimeUntilStart()', () => {
-  test('ontime', () => {
+  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', () => {
    const test = {
-      timeStart: 100,
      dayOffset: 0,
      delay: 0,
      currentDay: 0,
-      totalGap: 0,
-      clock: 90,
+      clock: 100,
+      actualStart: 100,
+      plannedStart: 0,
      offset: 0,
+      offsetMode: OffsetMode.Relative,
+      isLinkedToLoaded: false,
    };

-    expect(calculateTimeUntilStart({ ...test, isLinkedToLoaded: false })).toBe(10);
-    expect(calculateTimeUntilStart({ ...test, isLinkedToLoaded: true })).toBe(10);
+    // the overlap will be pushed out to the expected available time
+    expect(calculateTimeUntilStart({ ...test, timeStart: 5, totalGap: -5 })).toBe(10);
+
+    test.clock = 105;
  });
-
-  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?
 });
@@ -64,13 +64,13 @@ describe('getRouteFromPreset()', () => {
  describe('handle url sharing edge cases', () => {
    it('finds the correct preset when the url contains extra arguments', () => {
      const location = resolvePath('/demopage?locked=true&token=123');
-      expect(getRouteFromPreset(location, presets)?.startsWith('timer?user=guest&alias=demopage')).toBeTruthy();
-    });
+      expect(getRouteFromPreset(location, presets)?.startsWith('timer?user=guest&alias=demopage')).toBeTruthy()
+    })

    it('appends the feature params to the alias', () => {
      const location = resolvePath('/demopage?locked=true&token=123');
-      expect(getRouteFromPreset(location, presets)).toBe('timer?user=guest&alias=demopage&locked=true&token=123');
-    });
+      expect(getRouteFromPreset(location, presets)).toBe('timer?user=guest&alias=demopage&locked=true&token=123')
+    })
  });
 });

@@ -83,26 +83,25 @@ describe('generatePathFromPreset()', () => {
  });

  test('appends the feature params to the alias', () => {
-    expect(generatePathFromPreset('timer?user=guest', 'demopage', 'true', '123')).toBe(
-      'timer?user=guest&alias=demopage&locked=true&token=123',
-    );
+    expect(generatePathFromPreset('timer?user=guest', 'demopage', 'true', '123')).toBe('timer?user=guest&alias=demopage&locked=true&token=123');
  });
 });

 describe('arePathsEquivalent()', () => {
-  it('checks whether the paths match', () => {
+  it("checks whether the paths match",  () => {
    expect(arePathsEquivalent('demopage', 'timer')).toBeFalsy();
    expect(arePathsEquivalent('timer', 'timer')).toBeTruthy();
    expect(arePathsEquivalent('timer?user=guest', 'timer?user=guest')).toBeTruthy();
-  });
+  })

-  it('checks whether the params match', () => {
+  it("checks whether the params match",  () => {
    expect(arePathsEquivalent('timer?test=a', 'timer?test=b')).toBeFalsy();
    expect(arePathsEquivalent('timer?test=a', 'timer?test=a')).toBeTruthy();
-  });
+  })

-  it('considers edge cases for the url sharing feature', () => {
+  it("considers edge cases for the url sharing feature",  () => {
    expect(arePathsEquivalent('timer?test=a&locked=true=token=123', 'timer?test=b')).toBeFalsy();
    expect(arePathsEquivalent('timer?test=a&locked=true=token=123', 'timer?test=a')).toBeTruthy();
-  });
+  })
 });
+
@@ -1,31 +1,10 @@
 import { stringify } from 'csv-stringify/browser/esm/sync';
-import { OntimeEntry, ProjectRundowns } from 'ontime-types';

 /**
- * Converts an array of arrays to a CSV file
+ * @description Converts an array of arrays to a CSV file
+ * @param {string[][]} arrayOfArrays
+ * @return {string}
 */
 export function makeCSVFromArrayOfArrays(arrayOfArrays: string[][]): string {
  return stringify(arrayOfArrays);
 }
-
-/**
- * Receives an object of rundowns, and flattens them into a single, linear rundown
- * Used for CSV export
- */
-export function aggregateRundowns(rundowns: ProjectRundowns): OntimeEntry[] {
-  const rundownKeys = Object.keys(rundowns);
-  if (rundownKeys.length === 0) return [];
-  const flatRundown: OntimeEntry[] = [];
-
-  for (const key of rundownKeys) {
-    const { order, entries } = rundowns[key];
-
-    for (let i = 0; i < order.length; i++) {
-      const entryId = order[i];
-      const entry = entries[entryId];
-
-      flatRundown.push(entry);
-    }
-  }
-  return flatRundown;
-}
@@ -23,7 +23,6 @@ export const cloneEvent = (event: OntimeEvent): ClonedEvent => {
    isPublic: event.isPublic,
    skip: event.skip,
    colour: event.colour,
-    currentBlock: event.currentBlock,
    revision: 0,
    delay: event.delay, // the events will be collocated, so having the same metadata is a good start
    dayOffset: event.dayOffset,
@@ -0,0 +1,8 @@
+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;
+}
@@ -1,4 +1,4 @@
-import { Log, Rundown, RuntimeStore } from 'ontime-types';
+import { Log, RundownCached, RuntimeStore } from 'ontime-types';

 import { isProduction, websocketUrl } from '../../externals';
 import { CLIENT_LIST, CUSTOM_FIELDS, REPORT, RUNDOWN, RUNTIME } from '../api/constants';
@@ -16,10 +16,11 @@ import { addDialog } from '../stores/dialogStore';
 import { addLog } from '../stores/logger';
 import { addToBatchUpdates, flushBatchUpdates, patchRuntime, patchRuntimeProperty } from '../stores/runtime';

-let websocket: WebSocket | null = null;
+export let websocket: WebSocket | null = null;
 let reconnectTimeout: NodeJS.Timeout | null = null;
 const reconnectInterval = 1000;

+export let shouldReconnect = true;
 export let hasConnected = false;
 export let reconnectAttempts = 0;

@@ -47,16 +48,19 @@ export const connectSocket = () => {

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

-    // we decide to allows reconnect
-    reconnectTimeout = setTimeout(() => {
-      console.warn('WebSocket: attempting reconnect');
-      if (websocket && websocket.readyState === WebSocket.CLOSED) {
-        reconnectAttempts += 1;
-        connectSocket();
-      }
-    }, reconnectInterval);
+    if (shouldReconnect) {
+      reconnectTimeout = setTimeout(() => {
+        if (reconnectAttempts > 2) {
+          setOnlineStatus(false);
+        }
+        console.warn('WebSocket: attempting reconnect');
+        if (websocket && websocket.readyState === WebSocket.CLOSED) {
+          reconnectAttempts += 1;
+          connectSocket();
+        }
+      }, reconnectInterval);
+    }
  };

  websocket.onerror = (error) => {
@@ -201,7 +205,7 @@ export const connectSocket = () => {
            invalidateAllCaches();
          } else if (target === 'RUNDOWN') {
            const { revision } = payload;
-            const currentRevision = ontimeQueryClient.getQueryData<Rundown>(RUNDOWN)?.revision ?? -1;
+            const currentRevision = ontimeQueryClient.getQueryData<RundownCached>(RUNDOWN)?.revision ?? -1;
            if (revision > currentRevision) {
              ontimeQueryClient.invalidateQueries({ queryKey: RUNDOWN });
              ontimeQueryClient.invalidateQueries({ queryKey: CUSTOM_FIELDS });
@@ -222,6 +226,11 @@ export const connectSocket = () => {
  };
 };

+export const disconnectSocket = () => {
+  shouldReconnect = false;
+  websocket?.close();
+};
+
 export const socketSend = (message: any) => {
  if (websocket && websocket.readyState === WebSocket.OPEN) {
    websocket.send(message);
@@ -1,4 +1,4 @@
-import { MaybeNumber, OntimeEvent, Settings, TimeFormat } from 'ontime-types';
+import { MaybeNumber, OffsetMode, 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';
@@ -35,7 +35,7 @@ function getFormatFromParams() {
 * Gets the format options from the applicaton settings
 * @returns a string equivalent to the format, ie: hh:mm:ss a or HH:mm:ss
 */
-function getFormatFromSettings(): TimeFormat {
+export function getFormatFromSettings(): TimeFormat {
  const settings: Settings | undefined = ontimeQueryClient.getQueryData(APP_SETTINGS);
  return settings?.timeFormat ?? '24';
 }
@@ -140,8 +140,8 @@ export function useTimeUntilStart(
    isLinkedToLoaded: boolean;
  },
 ): number {
-  const { offset, clock, currentDay } = useTimeUntilData();
-  return calculateTimeUntilStart({ ...data, currentDay, clock, offset });
+  const { offset, clock, currentDay, offsetMode, actualStart, plannedStart } = useTimeUntilData();
+  return calculateTimeUntilStart({ ...data, currentDay, clock, offset, offsetMode, actualStart, plannedStart });
 }

 /**
@@ -160,9 +160,24 @@ 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 } = data;
+  const {
+    timeStart,
+    dayOffset,
+    currentDay,
+    totalGap,
+    isLinkedToLoaded,
+    clock,
+    offset,
+    delay,
+    offsetMode,
+    actualStart,
+    plannedStart,
+  } = data;

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

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

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

-  const scheduledTimeUntil = normalisedTimeStart - clock;
-
-  const isAheadOfSchedule = offset >= 0;
-  const gapsCanCompensadeForOffset = totalGap + offset >= 0;
-
-  if (isAheadOfSchedule || gapsCanCompensadeForOffset) {
+  const gapsCanCompensateForOffset = totalGap + offset >= 0;
+  if (gapsCanCompensateForOffset) {
    // 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;
  }
@@ -0,0 +1,11 @@
+import { TestingLibraryMatchers } from '@testing-library/jest-dom/matchers';
+
+import 'vitest';
+
+// ugly hack because vite and pnpm are not playing ball with jest
+// https://github.com/testing-library/jest-dom/issues/123
+declare global {
+  namespace Vi {
+    type Assertion<T = any> = TestingLibraryMatchers<T, void>;
+  }
+}
@@ -207,6 +207,9 @@ $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 }: { children: ReactNode }) {
-  return <div className={style.fieldError}>{children}</div>;
+export function Error({ children, className }: { children: ReactNode } & JSX.IntrinsicElements['div']) {
+  return <div className={cx([style.fieldError, className])}>{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';
+  align?: 'start' | 'end' | 'apart';
  className?: string;
 };

@@ -29,8 +29,8 @@ export default function ReportSettings() {
  };

  const combinedReport = useMemo(() => {
-    return getCombinedReport(reportData, data.entries, data.order);
-  }, [reportData, data.entries, data.order]);
+    return getCombinedReport(reportData, data.rundown, data.order);
+  }, [reportData, data.rundown, data.order]);

  return (
    <Panel.Section>
@@ -1,4 +1,4 @@
-import { EntryId, isOntimeEvent, MaybeNumber, OntimeReport, RundownEntries } from 'ontime-types';
+import { isOntimeEvent, MaybeNumber, NormalisedRundown, OntimeReport } from 'ontime-types';

 import { makeCSVFromArrayOfArrays } from '../../../../common/utils/csv';
 import { formatTime } from '../../../../common/utils/time';
@@ -16,7 +16,7 @@ export type CombinedReport = {
 /**
 * Creates a combined report with the rundown data
 */
-export function getCombinedReport(report: OntimeReport, rundown: RundownEntries, order: EntryId[]): CombinedReport[] {
+export function getCombinedReport(report: OntimeReport, rundown: NormalisedRundown, order: string[]): CombinedReport[] {
  if (Object.keys(report).length === 0) return [];
  if (order.length === 0) return [];

@@ -13,6 +13,10 @@ import * as Panel from '../../panel-utils/PanelUtils';

 import GeneralPinInput from './GeneralPinInput';

+export type GeneralPanelFormValues = {
+  filename: string;
+};
+
 export default function GeneralPanelForm() {
  const { data, status, refetch } = useSettings();
  const {
@@ -0,0 +1,4 @@
+.wrapper {
+  max-height: 500px;
+  overflow-y: auto;
+}
@@ -0,0 +1,72 @@
+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);
@@ -0,0 +1,14 @@
+.editorActions {
+  width: 100%;
+}
+
+.right {
+  align-self: end;
+  text-align: right
+}
+
+.column {
+  align-items: start;
+  display: flex;
+  flex-direction: column;
+}
@@ -0,0 +1,129 @@
+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 } from '@chakra-ui/react';
+import { Button, Input, Switch, useDisclosure } from '@chakra-ui/react';
 import { ViewSettings } from 'ontime-types';

 import { maybeAxiosError } from '../../../../common/api/utils';
@@ -14,11 +14,14 @@ 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,
@@ -103,6 +106,7 @@ 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'
@@ -115,6 +119,15 @@ 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>
@@ -0,0 +1,5 @@
+declare module 'prismjs/components/prism-core' {
+  export * from 'prismjs';
+}
+
+declare module 'prismjs/components/prism-css';
@@ -102,6 +102,7 @@ export default function EditorSettingsForm() {
                onChange={(event) => setDefaultEndAction(event.target.value as EndAction)}
              >
                <option value={EndAction.None}>None</option>
+                <option value={EndAction.Stop}>Stop</option>
                <option value={EndAction.LoadNext}>Load next</option>
                <option value={EndAction.PlayNext}>Play next</option>
              </Select>
@@ -6,7 +6,7 @@ export async function makeProjectPatch(data: DatabaseModel, mergeKeys: Record<st
  for (const key in mergeKeys) {
    if (isKeyOfType(key, data) && mergeKeys[key]) {
      // if the rundown is merged we also need the custom fields
-      if (key === 'rundowns') {
+      if (key === 'rundown') {
        patchObject.customFields = data['customFields'];
      }
      Object.assign(patchObject, { [key]: data[key] });
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Button } from '@chakra-ui/react';
-import { CustomFields, Rundown } from 'ontime-types';
+import { CustomFields, OntimeRundown } from 'ontime-types';

 import * as Panel from '../../panel-utils/PanelUtils';

@@ -9,7 +9,7 @@ import useGoogleSheet from './useGoogleSheet';
 import { useSheetStore } from './useSheetStore';

 interface ImportReviewProps {
-  rundown: Rundown;
+  rundown: OntimeRundown;
  customFields: CustomFields;
  onFinished: () => void;
  onCancel: () => void;
@@ -29,12 +29,7 @@ export default function ImportReview(props: ImportReviewProps) {

  const applyImport = async () => {
    setLoading(true);
-    await importRundown(
-      {
-        [rundown.id]: rundown,
-      },
-      customFields,
-    );
+    await importRundown(rundown, customFields);
    setLoading(false);
    onFinished();
  };
@@ -3,7 +3,7 @@ import { ImportCustom, ImportMap } from 'ontime-utils';
 export type NamedImportMap = typeof namedImportMap;

 // Record of label and import name
-const namedImportMap = {
+export const namedImportMap = {
  Worksheet: 'event schedule',
  Start: 'time start',
  'Link start': 'link start',
@@ -1,6 +1,6 @@
 import { Fragment } from 'react';
 import { IoLink } from 'react-icons/io5';
-import { CustomFields, isOntimeBlock, isOntimeEvent, Rundown } from 'ontime-types';
+import { CustomFields, isOntimeBlock, isOntimeEvent, OntimeRundown } from 'ontime-types';
 import { millisToString } from 'ontime-utils';

 import Tag from '../../../../../common/components/tag/Tag';
@@ -10,7 +10,7 @@ import * as Panel from '../../../panel-utils/PanelUtils';
 import style from './PreviewRundown.module.scss';

 interface PreviewRundownProps {
-  rundown: Rundown;
+  rundown: OntimeRundown;
  customFields: CustomFields;
 }

@@ -53,76 +53,75 @@ export default function PreviewRundown(props: PreviewRundownProps) {
        </tr>
      </thead>
      <tbody>
-        {rundown.order.map((entryId) => {
-          const entry = rundown.entries[entryId];
-          if (isOntimeBlock(entry)) {
+        {rundown.map((event) => {
+          if (isOntimeBlock(event)) {
            return (
-              <tr key={entry.id}>
+              <tr key={event.id}>
                <td className={style.center}>
                  <Tag>-</Tag>
                </td>
                <td className={style.center}>
-                  <Tag>{entry.type}</Tag>
+                  <Tag>{event.type}</Tag>
                </td>
                <td />
-                <td colSpan={99}>{entry.title}</td>
+                <td colSpan={99}>{event.title}</td>
              </tr>
            );
          }
-          if (!isOntimeEvent(entry)) {
+          if (!isOntimeEvent(event)) {
            return null;
          }
          eventIndex += 1;
-          const colour = entry.colour ? getAccessibleColour(entry.colour) : {};
-          const countToEnd = booleanToText(entry.countToEnd);
-          const isPublic = booleanToText(entry.isPublic);
-          const skip = booleanToText(entry.skip);
+          const colour = event.colour ? getAccessibleColour(event.colour) : {};
+          const countToEnd = booleanToText(event.countToEnd);
+          const isPublic = booleanToText(event.isPublic);
+          const skip = booleanToText(event.skip);

          return (
-            <Fragment key={entry.id}>
+            <Fragment key={event.id}>
              <tr>
                <td className={style.center}>
                  <Tag>{eventIndex}</Tag>
                </td>
                <td className={style.center}>
-                  <Tag>{entry.type}</Tag>
+                  <Tag>{event.type}</Tag>
                </td>
-                <td className={style.nowrap}>{entry.cue}</td>
-                <td>{entry.title}</td>
+                <td className={style.nowrap}>{event.cue}</td>
+                <td>{event.title}</td>
                <td className={style.flex}>
-                  <span className={entry.linkStart ? style.subdued : undefined}>{millisToString(entry.timeStart)}</span>
-                  {entry.linkStart && <IoLink className={style.linkStartActive} />}
+                  <span className={event.linkStart ? style.subdued : undefined}>{millisToString(event.timeStart)}</span>
+                  {event.linkStart && <IoLink className={style.linkStartActive} />}
                </td>
-                <td>{millisToString(entry.timeEnd)}</td>
-                <td>{millisToString(entry.duration)}</td>
-                <td>{millisToString(entry.timeWarning)}</td>
-                <td>{millisToString(entry.timeDanger)}</td>
+                <td>{millisToString(event.timeEnd)}</td>
+                <td>{millisToString(event.duration)}</td>
+                <td>{millisToString(event.timeWarning)}</td>
+                <td>{millisToString(event.timeDanger)}</td>
                <td className={style.center}>{countToEnd && <Tag>{countToEnd}</Tag>}</td>
                <td className={style.center}>{isPublic && <Tag>{isPublic}</Tag>}</td>
                <td>{skip && <Tag>{skip}</Tag>}</td>
-                <td style={{ ...colour }}>{entry.colour}</td>
+                <td style={{ ...colour }}>{event.colour}</td>
                <td className={style.center}>
-                  <Tag>{entry.timerType}</Tag>
+                  <Tag>{event.timerType}</Tag>
                </td>
                <td className={style.center}>
-                  <Tag>{entry.endAction}</Tag>
+                  <Tag>{event.endAction}</Tag>
                </td>
-                {isOntimeEvent(entry) &&
+                {isOntimeEvent(event) &&
                  fieldKeys.map((field) => {
                    let value = '';
-                    if (field in entry.custom) {
-                      value = entry.custom[field];
+                    if (field in event.custom) {
+                      value = event.custom[field];
                    }
                    return <td key={field}>{value}</td>;
                  })}
                <td className={style.center}>
-                  <Tag>{entry.id}</Tag>
+                  <Tag>{event.id}</Tag>
                </td>
              </tr>
-              {entry.note && (
+              {event.note && (
                <tr>
                  <td colSpan={99} className={style.secondaryRow}>
-                    Note: {entry.note}
+                    Note: {event.note}
                  </td>
                </tr>
              )}
@@ -1,5 +1,5 @@
 import { useQueryClient } from '@tanstack/react-query';
-import { AuthenticationStatus, CustomFields, ProjectRundowns } from 'ontime-types';
+import { AuthenticationStatus, CustomFields, OntimeRundown } from 'ontime-types';
 import { ImportMap } from 'ontime-utils';

 import { CUSTOM_FIELDS, RUNDOWN } from '../../../../common/api/constants';
@@ -75,9 +75,9 @@ export default function useGoogleSheet() {
  };

  /** applies rundown and customFields to current project */
-  const importRundown = async (rundowns: ProjectRundowns, customFields: CustomFields) => {
+  const importRundown = async (rundown: OntimeRundown, customFields: CustomFields) => {
    try {
-      await patchData({ rundowns, customFields });
+      await patchData({ rundown, customFields });
      // we are unable to optimistically set the rundown since we need
      // it to be normalised
      await queryClient.invalidateQueries({
@@ -1,4 +1,4 @@
-import { AuthenticationStatus, CustomFields, Rundown } from 'ontime-types';
+import { AuthenticationStatus, CustomFields, OntimeRundown } from 'ontime-types';
 import { defaultImportMap, ImportMap } from 'ontime-utils';
 import { create } from 'zustand';

@@ -15,8 +15,8 @@ type SheetStore = {
  setAuthenticationStatus: (status: AuthenticationStatus) => void;

  // we get this from a preview response
-  rundown: Rundown | null;
-  setRundown: (rundown: Rundown | null) => void;
+  rundown: OntimeRundown | null;
+  setRundown: (rundown: OntimeRundown | null) => void;

  // we get this from a preview response
  customFields: CustomFields | null;
@@ -60,7 +60,7 @@ export const useSheetStore = create<SheetStore>((set, get) => ({

  setAuthenticationStatus: (status: AuthenticationStatus) => set({ authenticationStatus: status }),

-  setRundown: (rundown: Rundown | null) => set({ rundown }),
+  setRundown: (rundown: OntimeRundown | null) => set({ rundown }),

  setCustomFields: (customFields: CustomFields | null) => set({ customFields }),

@@ -1,9 +1,7 @@
-import { useEffect, useRef } from 'react';
-import { IoEye, IoEyeOffOutline } from 'react-icons/io5';
+import { PropsWithChildren, useEffect, useRef, useState } from 'react';
 import { Input } from '@chakra-ui/react';

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

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

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

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

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

  // sync cursor position with text
  useEffect(() => {
-    if (inputRef.current) {
+    if (inputRef.current && inputRef.current !== document.activeElement) {
      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={`${style.label} ${visible ? style.active : ''}`}>{label}</label>
+      <label className={cx([style.label, visible ?? style.active])} htmlFor={label}>
+        {label}
+      </label>
      <div className={style.inputItems}>
        <Input
+          id={label}
          ref={inputRef}
          size='sm'
          variant='ontime-filled'
-          value={text}
+          value={value}
          onChange={handleInputChange}
          placeholder={placeholder}
        />
-        <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'
-        />
+        {children}
      </div>
    </div>
  );
@@ -1,4 +1,8 @@
+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';
@@ -23,8 +27,17 @@ function TimerMessageInput() {
      text={text}
      visible={visible}
      changeHandler={(newValue) => setMessage.timerText(newValue)}
-      actionHandler={() => setMessage.timerVisible(!visible)}
-    />
+    >
+      <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>
  );
 }

@@ -46,7 +59,16 @@ function ExternalInput() {
      text={text}
      visible={visible}
      changeHandler={(newValue) => setMessage.externalText(newValue)}
-      actionHandler={toggleExternal}
-    />
+    >
+      <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>
  );
 }
@@ -126,8 +126,8 @@ export default function Operator() {
  let isPast = Boolean(featureData.selectedEventId);
  const hidePast = isStringBoolean(searchParams.get('hidepast'));

-  const { firstEvent } = getFirstEventNormal(data.entries, data.order);
-  const { lastEvent } = getLastEventNormal(data.entries, data.order);
+  const { firstEvent } = getFirstEventNormal(data.rundown, data.order);
+  const { lastEvent } = getLastEventNormal(data.rundown, data.order);

  return (
    <div className={style.operatorContainer}>
@@ -152,7 +152,7 @@ export default function Operator() {

      <div className={style.operatorEvents} onWheel={handleScroll} onTouchMove={handleScroll} ref={scrollRef}>
        {data.order.map((eventId) => {
-          const entry = data.entries[eventId];
+          const entry = data.rundown[eventId];
          if (isOntimeEvent(entry)) {
            const isSelected = featureData.selectedEventId === entry.id;
            if (isSelected) {
@@ -170,7 +170,7 @@ function RuntimeOverview() {

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

-export function TimeColumn({ label, value, muted, className }: TimeLayoutProps) {
+export function TimeColumn({ label, value, muted, className, testId }: TimeLayoutProps) {
  return (
    <div className={style.column}>
      <span className={style.label}>{label}</span>
-      <span className={cx([style.clock, muted && style.muted, className])}>{value}</span>
+      <span className={cx([style.clock, muted && style.muted, className])} data-testid={testId}>
+        {value}
+      </span>
    </div>
  );
 }
@@ -7,6 +7,7 @@
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
+  padding-right: 4px; // size of scrollbar
  overflow-y: scroll;
  height: 100%;
 }
@@ -15,7 +16,6 @@
  overflow-x: clip;
  display: flex;
  flex-direction: column;
-  padding-inline: 1rem;
 }

 .empty {
@@ -1,16 +1,15 @@
 import { Fragment, lazy, useCallback, useEffect, useRef, useState } from 'react';
 import { closestCenter, DndContext, DragEndEvent, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
-import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { useHotkeys } from '@mantine/hooks';
 import {
-  type EntryId,
-  type MaybeString,
-  type PlayableEvent,
-  type Rundown,
  isOntimeBlock,
  isOntimeEvent,
  isPlayableEvent,
+  MaybeString,
+  PlayableEvent,
  Playback,
+  RundownCached,
  SupportedEvent,
 } from 'ontime-types';
 import {
@@ -22,7 +21,6 @@ import {
  getPreviousBlockNormal,
  getPreviousNormal,
  isNewLatest,
-  reorderArray,
 } from 'ontime-utils';

 import { type EventOptions, useEventAction } from '../../common/hooks/useEventAction';
@@ -41,12 +39,12 @@ import style from './Rundown.module.scss';
 const RundownEntry = lazy(() => import('./RundownEntry'));

 interface RundownProps {
-  data: Rundown;
+  data: RundownCached;
 }

 export default function Rundown({ data }: RundownProps) {
-  const { order, entries } = data;
-  const [statefulEntries, setStatefulEntries] = useState<EntryId[]>(order);
+  const { order, rundown } = data;
+  const [statefulEntries, setStatefulEntries] = useState(order);

  const featureData = useRundownEditor();
  const { addEvent, reorderEvent, deleteEvent } = useEventAction();
@@ -67,30 +65,30 @@ export default function Rundown({ data }: RundownProps) {
  const deleteAtCursor = useCallback(
    (cursor: string | null) => {
      if (!cursor) return;
-      const { entry, index } = getPreviousNormal(entries, order, cursor);
+      const { entry, index } = getPreviousNormal(rundown, order, cursor);
      deleteEvent([cursor]);
      if (entry && index !== null) {
        setSelectedEvents({ id: entry.id, selectMode: 'click', index });
      }
    },
-    [entries, order, deleteEvent, setSelectedEvents],
+    [rundown, order, deleteEvent, setSelectedEvents],
  );

  const insertCopyAtId = useCallback(
    (atId: string | null, copyId: string | null, above = false) => {
-      const adjustedCursor = above ? getPreviousNormal(entries, order, atId ?? '').entry?.id ?? null : atId;
+      const adjustedCursor = above ? getPreviousNormal(rundown, order, atId ?? '').entry?.id ?? null : atId;
      if (copyId === null) {
        // we cant clone without selection
        return;
      }
-      const cloneEntry = entries[copyId];
+      const cloneEntry = rundown[copyId];
      if (cloneEntry?.type === SupportedEvent.Event) {
        //if we don't have a cursor add the new event on top
        const newEvent = cloneEvent(cloneEntry);
        addEvent(newEvent, { after: adjustedCursor ?? undefined });
      }
    },
-    [addEvent, order, entries],
+    [addEvent, order, rundown],
  );

  const insertAtId = useCallback(
@@ -126,7 +124,7 @@ export default function Rundown({ data }: RundownProps) {
      let newCursor = cursor;
      if (cursor === null) {
        // there is no cursor, we select the first or last depending on direction
-        const selected = direction === 'up' ? getLastNormal(entries, order) : getFirstNormal(entries, order);
+        const selected = direction === 'up' ? getLastNormal(rundown, order) : getFirstNormal(rundown, order);

        if (isOntimeBlock(selected)) {
          setSelectedEvents({ id: selected.id, selectMode: 'click', index: direction === 'up' ? order.length : 0 });
@@ -142,14 +140,14 @@ export default function Rundown({ data }: RundownProps) {
      // otherwise we select the next or previous
      const selected =
        direction === 'up'
-          ? getPreviousBlockNormal(entries, order, newCursor)
-          : getNextBlockNormal(entries, order, newCursor);
+          ? getPreviousBlockNormal(rundown, order, newCursor)
+          : getNextBlockNormal(rundown, order, newCursor);

      if (selected.entry !== null && selected.index !== null) {
        setSelectedEvents({ id: selected.entry.id, selectMode: 'click', index: selected.index });
      }
    },
-    [order, entries, setSelectedEvents],
+    [order, rundown, setSelectedEvents],
  );

  const selectEntry = useCallback(
@@ -160,7 +158,7 @@ export default function Rundown({ data }: RundownProps) {

      if (cursor === null) {
        // there is no cursor, we select the first or last depending on direction if it exists
-        const selected = direction === 'up' ? getLastNormal(entries, order) : getFirstNormal(entries, order);
+        const selected = direction === 'up' ? getLastNormal(rundown, order) : getFirstNormal(rundown, order);
        if (selected !== null) {
          setSelectedEvents({ id: selected.id, selectMode: 'click', index: direction === 'up' ? order.length : 0 });
        }
@@ -169,13 +167,13 @@ export default function Rundown({ data }: RundownProps) {

      // otherwise we select the next or previous
      const selected =
-        direction === 'up' ? getPreviousNormal(entries, order, cursor) : getNextNormal(entries, order, cursor);
+        direction === 'up' ? getPreviousNormal(rundown, order, cursor) : getNextNormal(rundown, order, cursor);

      if (selected.entry !== null && selected.index !== null) {
        setSelectedEvents({ id: selected.entry.id, selectMode: 'click', index: selected.index });
      }
    },
-    [order, entries, setSelectedEvents],
+    [order, rundown, setSelectedEvents],
  );

  const moveEntry = useCallback(
@@ -184,14 +182,14 @@ export default function Rundown({ data }: RundownProps) {
        return;
      }
      const { index } =
-        direction === 'up' ? getPreviousNormal(entries, order, cursor) : getNextNormal(entries, order, cursor);
+        direction === 'up' ? getPreviousNormal(rundown, order, cursor) : getNextNormal(rundown, order, cursor);

      if (index !== null) {
        const offsetIndex = direction === 'up' ? index + 1 : index - 1;
        reorderEvent(cursor, offsetIndex, index);
      }
    },
-    [order, reorderEvent, entries],
+    [order, reorderEvent, rundown],
  );

  // shortcuts
@@ -240,9 +238,6 @@ export default function Rundown({ data }: RundownProps) {
    setSelectedEvents({ id: featureData.selectedEventId, selectMode: 'click', index });
  }, [appMode, featureData.selectedEventId, order, setSelectedEvents]);

-  /**
-   * On drag end, we reorder the events
-   */
  const handleOnDragEnd = (event: DragEndEvent) => {
    const { active, over } = event;

@@ -250,10 +245,9 @@ export default function Rundown({ data }: RundownProps) {
      if (active.id !== over?.id) {
        const fromIndex = active.data.current?.sortable.index;
        const toIndex = over.data.current?.sortable.index;
-
-        // we keep a copy of the state as a hack to handle inconsistencies between dnd-kit and async store updates
+        // ugly hack to handle inconsistencies between dnd-kit and async store updates
        setStatefulEntries((currentEntries) => {
-          return reorderArray(currentEntries, fromIndex, toIndex);
+          return arrayMove(currentEntries, fromIndex, toIndex);
        });
        reorderEvent(String(active.id), fromIndex, toIndex);
      }
@@ -265,11 +259,11 @@ export default function Rundown({ data }: RundownProps) {
  }

  // last event is used to calculate relative timings
-  let lastEvent: PlayableEvent | null = null; // used by indicators
-  let thisEvent: PlayableEvent | null = null;
+  let lastEvent: PlayableEvent | undefined; // used by indicators
+  let thisEvent: PlayableEvent | undefined;
  // previous entry is used to infer position in the rundown for new events
-  let previousEntryId: MaybeString = null;
-  let thisId: MaybeString = null;
+  let previousEntryId: string | undefined;
+  let thisId = previousEntryId;

  let eventIndex = 0;
  // all events before the current selected are in the past
@@ -278,7 +272,6 @@ export default function Rundown({ data }: RundownProps) {
  let totalGap = 0;
  const isEditMode = appMode === AppMode.Edit;
  let isLinkedToLoaded = true; //check if the event can link all the way back to the currently playing event
-
  return (
    <div className={style.rundownContainer} ref={scrollRef} data-testid='rundown'>
      <DndContext onDragEnd={handleOnDragEnd} sensors={sensors} collisionDetection={closestCenter}>
@@ -288,7 +281,7 @@ export default function Rundown({ data }: RundownProps) {
              // we iterate through a stateful copy of order to make the operations smoother
              // this means that this can be out of sync with order until the useEffect runs
              // instead of writing all the logic guards, we simply short circuit rendering here
-              const entry = entries[entryId];
+              const entry = rundown[entryId];
              if (!entry) {
                return null;
              }
@@ -307,7 +300,8 @@ export default function Rundown({ data }: RundownProps) {
                  isNextDay = checkIsNextDay(entry, lastEvent);
                  if (!isPast) {
                    totalGap += entry.gap;
-                    isLinkedToLoaded = isLinkedToLoaded && entry.linkStart !== null;
+                    // 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;
                  }
                  if (isNewLatest(entry, lastEvent)) {
                    // populate previous entry
@@ -1,14 +1,5 @@
 import { useCallback } from 'react';
-import {
-  isOntimeBlock,
-  isOntimeDelay,
-  isOntimeEvent,
-  MaybeString,
-  OntimeEntry,
-  OntimeEvent,
-  Playback,
-  SupportedEvent,
-} from 'ontime-types';
+import { OntimeEvent, OntimeRundownEntry, Playback, SupportedEvent } from 'ontime-types';

 import { useEventAction } from '../../common/hooks/useEventAction';
 import useMemoisedFn from '../../common/hooks/useMemoisedFn';
@@ -37,13 +28,13 @@ export type EventItemActions =
 interface RundownEntryProps {
  type: SupportedEvent;
  isPast: boolean;
-  data: OntimeEntry;
+  data: OntimeRundownEntry;
  loaded: boolean;
  eventIndex: number;
  hasCursor: boolean;
  isNext: boolean;
  isNextDay: boolean;
-  previousEntryId: MaybeString;
+  previousEntryId?: string;
  previousEventId?: string;
  playback?: Playback; // we only care about this if this event is playing
  isRolling: boolean; // we need to know even if not related to this event
@@ -159,7 +150,7 @@ export default function RundownEntry(props: RundownEntryProps) {
    }
  });

-  if (isOntimeEvent(data)) {
+  if (data.type === SupportedEvent.Event) {
    return (
      <EventBlock
        eventId={data.id}
@@ -176,7 +167,7 @@ export default function RundownEntry(props: RundownEntryProps) {
        timerType={data.timerType}
        title={data.title}
        note={data.note}
-        delay={data.delay}
+        delay={data.delay ?? 0}
        colour={data.colour}
        isPast={isPast}
        isNext={isNext}
@@ -193,15 +184,9 @@ export default function RundownEntry(props: RundownEntryProps) {
        actionHandler={actionHandler}
      />
    );
-  } else if (isOntimeBlock(data)) {
-    return (
-      <BlockBlock data={data} hasCursor={hasCursor}>
-        {data.events.map((eventId) => {
-          return <div key={eventId}>{eventId}</div>;
-        })}
-      </BlockBlock>
-    );
-  } else if (isOntimeDelay(data)) {
+  } else if (data.type === SupportedEvent.Block) {
+    return <BlockBlock data={data} hasCursor={hasCursor} onDelete={() => actionHandler('delete')} />;
+  } else if (data.type === SupportedEvent.Delay) {
    return <DelayBlock data={data} hasCursor={hasCursor} />;
  }
  return null;
@@ -25,7 +25,7 @@
 .list {
  @include editor.panel;
  height: inherit;
-  padding-inline: 0;
+  padding-left: 0;
  box-shadow: $box-shadow-right;

  flex: 1 2 auto; /* flex-grow: 1, flex-shrink: 2, flex-basis: auto */
@@ -21,12 +21,18 @@ $block-cursor-color: $orange-400;
  border: 1px solid $white-7;
  border-radius: $block-border-radius;
  margin-block: 0.25rem;
+  margin-right: 0.125rem;
  position: relative;
  color: $block-text-color;

  min-width: $block-width;
 }

+@mixin block-spacing() {
+  padding-right: 0.5rem;
+  gap: 2px;
+}
+
@mixin drag-style() {
  font-size: 20px;
  justify-self: center;
@@ -1,7 +1,9 @@
@use '../blockMixins' as *;

 .block {
+  @include block-spacing;
  @include block-styling;
+  margin-left: 0.5rem;

  background-color: $block-bg2;

@@ -20,3 +22,7 @@
 .drag {
  @include drag-style;
 }
+
+.actionMenu {
+  justify-self: flex-end;
+}
@@ -1,4 +1,4 @@
-import { PropsWithChildren, useRef } from 'react';
+import { useRef } from 'react';
 import { IoReorderTwo } from 'react-icons/io5';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
@@ -7,15 +7,18 @@ import { OntimeBlock } from 'ontime-types';
 import { cx } from '../../../common/utils/styleUtils';
 import EditableBlockTitle from '../common/EditableBlockTitle';

+import BlockDelete from './BlockDelete';
+
 import style from './BlockBlock.module.scss';

 interface BlockBlockProps {
  data: OntimeBlock;
  hasCursor: boolean;
+  onDelete: () => void;
 }

-export default function BlockBlock(props: PropsWithChildren<BlockBlockProps>) {
-  const { data, hasCursor, children } = props;
+export default function BlockBlock(props: BlockBlockProps) {
+  const { data, hasCursor, onDelete } = props;

  const handleRef = useRef<null | HTMLSpanElement>(null);

@@ -43,8 +46,7 @@ export default function BlockBlock(props: PropsWithChildren<BlockBlockProps>) {
        <IoReorderTwo />
      </span>
      <EditableBlockTitle title={data.title} eventId={data.id} placeholder='Block title' />
-      <button>+++</button>
-      <div>{children}</div>
+      <BlockDelete onDelete={onDelete} />
    </div>
  );
 }
@@ -0,0 +1,27 @@
+import { IoTrash } from 'react-icons/io5';
+import { IconButton } from '@chakra-ui/react';
+
+import { AppMode, useAppMode } from '../../../common/stores/appModeStore';
+
+interface BlockDeleteProps {
+  onDelete: () => void;
+}
+
+export default function BlockDelete(props: BlockDeleteProps) {
+  const { onDelete } = props;
+  const mode = useAppMode((state) => state.mode);
+
+  const isRunMode = mode === AppMode.Run;
+
+  return (
+    <IconButton
+      aria-label='Delete'
+      size='sm'
+      icon={<IoTrash />}
+      variant='ontime-subtle'
+      color='#FA5656'
+      onClick={onDelete}
+      isDisabled={isRunMode}
+    />
+  );
+}
@@ -1,10 +1,11 @@
@use '../blockMixins' as *;

 .delay {
+  @include block-spacing;
  @include block-styling;
+  margin-left: 0.5rem;

  background-color: $block-bg2;
-  padding-right: 0.5rem;

  display: grid;
  grid-template-columns: 2rem 1fr auto;
@@ -8,6 +8,7 @@ import {
  IoPlay,
  IoPlayForward,
  IoPlaySkipForward,
+  IoStop,
  IoTime,
 } from 'react-icons/io5';
 import { Tooltip } from '@chakra-ui/react';
@@ -176,6 +177,9 @@ function EndActionIcon(props: { action: EndAction; className: string }) {
  if (action === EndAction.PlayNext) {
    return <IoPlayForward className={maybeActiveClasses} />;
  }
+  if (action === EndAction.Stop) {
+    return <IoStop className={maybeActiveClasses} />;
+  }
  return <IoPlay className={className} />;
 }

@@ -15,22 +15,23 @@ interface CuesheetEventEditorProps {
 export default function CuesheetEventEditor(props: CuesheetEventEditorProps) {
  const { eventId } = props;
  const { data } = useRundown();
+  const { order, rundown } = data;

  const [event, setEvent] = useState<OntimeEvent | null>(null);

  useEffect(() => {
-    if (data.order.length === 0) {
+    if (order.length === 0) {
      setEvent(null);
      return;
    }

-    const event = data.entries[eventId];
+    const event = rundown[eventId];
    if (event && isOntimeEvent(event)) {
      setEvent(event);
    } else {
      setEvent(null);
    }
-  }, [eventId, data.order, data.entries]);
+  }, [data, eventId, order, rundown]);

  if (!event) {
    return null;
@@ -1,21 +1,21 @@
-import { CSSProperties, useCallback } from 'react';
+import { 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 EventEditorImage from './composite/EventEditorImage';
+import EventCustom from './composite/EventEditorCustom';
 import EventEditorTimes from './composite/EventEditorTimes';
 import EventEditorTitles from './composite/EventEditorTitles';
-import EventTextArea from './composite/EventTextArea';
-import EventTextInput from './composite/EventTextInput';
+import EventEditorTriggers from './composite/EventEditorTriggers';
 import EventEditorEmpty from './EventEditorEmpty';

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

+export type EventEditorSubmitActions = keyof OntimeEvent;
+
 export type EditorUpdateFields = 'cue' | 'title' | 'note' | 'colour' | CustomFieldLabel;

 interface EventEditorProps {
@@ -75,52 +75,16 @@ export default function EventEditor(props: EventEditorProps) {
      <div className={style.column}>
        <Editor.Title>
          Custom Fields
-          {isEditor && <AppLink search='settings=feature_settings__custom'>Manage</AppLink>}
+          {isEditor && <AppLink search='settings=feature_settings__custom'>Manage Custom Fields</AppLink>}
        </Editor.Title>
-
-        {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;
-        })}
+        <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} />
      </div>
    </div>
  );
@@ -13,28 +13,29 @@ import style from './EventEditor.module.scss';
 export default function RundownEventEditor() {
  const selectedEvents = useEventSelection((state) => state.selectedEvents);
  const { data } = useRundown();
+  const { order, rundown } = data;

  const [event, setEvent] = useState<OntimeEvent | null>(null);

  useEffect(() => {
-    if (data.order.length === 0) {
+    if (order.length === 0) {
      setEvent(null);
      return;
    }

-    const selectedEventId = data.order.find((entryId) => selectedEvents.has(entryId));
+    const selectedEventId = order.find((eventId) => selectedEvents.has(eventId));
    if (!selectedEventId) {
      setEvent(null);
      return;
    }
-    const event = data.entries[selectedEventId];
+    const event = rundown[selectedEventId];

    if (event && isOntimeEvent(event)) {
      setEvent(event);
    } else {
      setEvent(null);
    }
-  }, [data.order, data.entries, selectedEvents]);
+  }, [order, rundown, selectedEvents]);

  if (!event) {
    return <EventEditorEmpty />;
@@ -0,0 +1,68 @@
+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>
+  );
+}
@@ -114,6 +114,7 @@ function EventEditorTimes(props: EventEditorTimesProps) {
              variant='ontime'
            >
              <option value={EndAction.None}>None</option>
+              <option value={EndAction.Stop}>Stop rundown</option>
              <option value={EndAction.LoadNext}>Load next event</option>
              <option value={EndAction.PlayNext}>Play next event</option>
            </Select>
@@ -0,0 +1,30 @@
+.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;
+}
@@ -0,0 +1,173 @@
+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>
+  );
+}
@@ -0,0 +1,10 @@
+import { TimerLifeCycle } from 'ontime-types';
+
+export const eventTriggerOptions: TimerLifeCycle[] = [
+  TimerLifeCycle.onLoad,
+  TimerLifeCycle.onStart,
+  TimerLifeCycle.onPause,
+  TimerLifeCycle.onFinish,
+  TimerLifeCycle.onWarning,
+  TimerLifeCycle.onDanger,
+];
@@ -5,6 +5,7 @@

  margin: 0.25rem 0;
  font-size: calc(1rem - 3px);
+  padding-inline: calc(2em + 0.5rem) 0.75rem;
 }

 .quickBtn {
@@ -1,7 +1,7 @@
 import { memo, useCallback, useRef } from 'react';
 import { IoAdd } from 'react-icons/io5';
 import { Button } from '@chakra-ui/react';
-import { MaybeString, SupportedEvent } from 'ontime-types';
+import { SupportedEvent } from 'ontime-types';

 import { useEventAction } from '../../../common/hooks/useEventAction';
 import { useEmitLog } from '../../../common/stores/logger';
@@ -9,7 +9,7 @@ import { useEmitLog } from '../../../common/stores/logger';
 import style from './QuickAddBlock.module.scss';

 interface QuickAddBlockProps {
-  previousEventId: MaybeString;
+  previousEventId?: string;
 }

 export default memo(QuickAddBlock);
@@ -1,5 +1,5 @@
 .header {
-  padding-inline: 1rem 2rem;
+  padding-inline: calc(2rem - 6px + 0.5rem) calc(1rem + 2px);
  
  display: flex;
  align-items: center;
@@ -1,5 +1,7 @@
 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';
@@ -12,6 +14,8 @@ export default function RundownHeader() {
  const setRunMode = () => setAppMode(AppMode.Run);
  const setEditMode = () => setAppMode(AppMode.Edit);

+  const { offsetMode } = useOffsetMode();
+
  return (
    <div className={style.header}>
      <ButtonGroup isAttached>
@@ -22,6 +26,22 @@ 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>
  );
@@ -1,12 +1,12 @@
 import { MouseEvent } from 'react';
-import { isOntimeEvent, MaybeNumber, MaybeString, OntimeEvent, Rundown } from 'ontime-types';
+import { isOntimeEvent, MaybeNumber, MaybeString, OntimeEvent, RundownCached } from 'ontime-types';
 import { create } from 'zustand';

 import { RUNDOWN } from '../../common/api/constants';
 import { ontimeQueryClient } from '../../common/queryClient';
 import { isMacOS } from '../../common/utils/deviceUtils';

-type SelectionMode = 'shift' | 'click' | 'ctrl';
+export type SelectionMode = 'shift' | 'click' | 'ctrl';

 interface EventSelectionStore {
  selectedEvents: Set<string>;
@@ -33,7 +33,7 @@ export const useEventSelection = create<EventSelectionStore>()((set, get) => ({

    // on ctrl + click, we toggle the selection of that event
    if (selectMode === 'ctrl') {
-      const rundownData = ontimeQueryClient.getQueryData<Rundown>(RUNDOWN);
+      const rundownData = ontimeQueryClient.getQueryData<RundownCached>(RUNDOWN);
      if (!rundownData) return;

      // if it doesnt exist, simply add to the list and set an anchor
@@ -50,7 +50,7 @@ export const useEventSelection = create<EventSelectionStore>()((set, get) => ({
      selectedEvents.delete(id);

      const nextIndex = rundownData.order.findIndex(
-        (eventId, i) => i > index && isOntimeEvent(rundownData.entries[eventId]) && selectedEvents.has(eventId),
+        (eventId, i) => i > index && isOntimeEvent(rundownData.rundown[eventId]) && selectedEvents.has(eventId),
      );

      // if we didnt find anything after, set the anchor to the last event
@@ -62,13 +62,13 @@ export const useEventSelection = create<EventSelectionStore>()((set, get) => ({

    // on shift + click, we select a range of events up to the clicked event
    if (selectMode === 'shift') {
-      const rundownData = ontimeQueryClient.getQueryData<Rundown>(RUNDOWN);
+      const rundownData = ontimeQueryClient.getQueryData<RundownCached>(RUNDOWN);
      if (!rundownData) return;

      // get list of rundown with only ontime events
      const events: OntimeEvent[] = [];
      rundownData.order.forEach((eventId) => {
-        const event = rundownData.entries[eventId];
+        const event = rundownData.rundown[eventId];
        if (isOntimeEvent(event)) {
          events.push(event);
        }
@@ -0,0 +1,15 @@
+// used in both sm and public views
+export const titleVariants = {
+  hidden: {
+    x: -1500,
+  },
+  visible: {
+    x: 0,
+    transition: {
+      duration: 1,
+    },
+  },
+  exit: {
+    x: -1500,
+  },
+};
@@ -1,8 +1,8 @@
 import { useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import {
-  OntimeEntry,
  OntimeEvent,
+  OntimeRundownEntry,
  Playback,
  ProjectData,
  Runtime,
@@ -72,7 +72,7 @@ export default function Countdown(props: CountdownProps) {
    }
    if (followThis !== null) {
      setFollow(followThis);
-      const idx: number = backstageEvents.findIndex((event: OntimeEntry) => event.id === followThis?.id);
+      const idx: number = backstageEvents.findIndex((event: OntimeRundownEntry) => event.id === followThis?.id);
      const delayToEvent = backstageEvents[idx]?.delay ?? 0;
      setDelay(delayToEvent);
    }
@@ -1,5 +1,5 @@
 import { Link } from 'react-router-dom';
-import { OntimeEntry, OntimeEvent, SupportedEvent } from 'ontime-types';
+import { OntimeEvent, OntimeRundownEntry, SupportedEvent } from 'ontime-types';

 import Empty from '../../../common/components/state/Empty';
 import { formatTime } from '../../../common/utils/time';
@@ -10,7 +10,7 @@ import { sanitiseTitle } from './countdown.helpers';
 import './Countdown.scss';

 interface CountdownSelectProps {
-  events: OntimeEntry[];
+  events: OntimeRundownEntry[];
 }

 const scheduleFormat = { format12: 'hh:mm a', format24: 'HH:mm' };
@@ -19,7 +19,9 @@ export default function CountdownSelect(props: CountdownSelectProps) {
  const { events } = props;
  const { getLocalizedString } = useTranslation();

-  const filteredEvents = events.filter((event: OntimeEntry) => event.type === SupportedEvent.Event) as OntimeEvent[];
+  const filteredEvents = events.filter(
+    (event: OntimeRundownEntry) => event.type === SupportedEvent.Event,
+  ) as OntimeEvent[];

  return (
    <div className='event-select' data-testid='countdown__select'>
@@ -9,57 +9,9 @@
    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(--bottomThird-line-height-override, 0.5vh);
+      height: var(--lowerThird-line-height-override, 0.5vh);
    }

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

    .data-bottom {
-      font-weight: var(--lowerThird-bottom-font-weight-override, normal);
+      font-weight: var(--lowerThird-bottom-font-weight-override, 540);
      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,204 +1,123 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useCallback, useEffect, useRef, useState } from 'react';
 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 } from './lowerThird.options';
+import { getLowerThirdOptions, useLowerOptions } 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 } = props;
-  const [searchParams] = useSearchParams();
+  const { customFields, eventNow, viewSettings, time } = props;
  const previousId = useRef<string>();
  const animationTimeout = useRef<NodeJS.Timeout>();
-  const [playState, setPlayState] = useState<'pre' | 'in' | 'out'>('pre');
+  const [playState, setPlayState] = useState<boolean>(false);
+  const [textValue, setTextValue] = useState<{ top: string; bottom: string }>({ top: '', bottom: '' });
  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(() => {
-    return () => {
-      // eslint-disable-next-line react-hooks/exhaustive-deps
+    // if hold is negative then force animate in
+    if (options.hold < 0) {
      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) {
-      return;
+    if (hasChanged) {
+      previousId.current = eventNow?.id;
+      if (eventNow?.id) animateIn();
    }
+  }, [animateIn, eventNow?.id]);

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

-    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`;
+  const textDuration = playState ? `${options.transitionIn * 0.5}s` : `${options.transitionOut * 0.5}s`;
+  const textDelay = playState ? `${options.delay + options.transitionIn * 0.5}s` : '0s';

  return (
    <div className='lower-third' style={{ backgroundColor: `#${options.key}` }}>
      <ViewParamsEditor viewOptions={getLowerThirdOptions(customFields)} />
      <div
-        className={`container container--${playState}`}
-        style={{ minWidth: `${options.width}vw`, animationDuration: transition }}
+        className={`container ${playState ? 'container--in' : 'container--out'}`}
+        style={{
+          minWidth: `${options.width}vw`,
+          transitionDuration: boxDuration,
+          transitionDelay: boxDelay,
+        }}
      >
        <div className='clip'>
          <div
            className='data-top'
            style={{
-              animationDuration: transition,
+              transitionDuration: textDuration,
+              transitionDelay: textDelay,
              color: `#${options.topColour}`,
              backgroundColor: `#${options.topBg}`,
-              fontSize: options.topSize,
+              fontSize: `${options.topSize}em`,
            }}
          >
-            {topText}
+            {textValue.top}
          </div>
        </div>
        <div
@@ -211,13 +130,14 @@ export default function LowerThird(props: LowerProps) {
          <div
            className='data-bottom'
            style={{
-              animationDuration: transition,
+              transitionDuration: textDuration,
+              transitionDelay: textDelay,
              color: `#${options.bottomColour}`,
              backgroundColor: `#${options.bottomBg}`,
-              fontSize: options.bottomSize,
+              fontSize: `${options.bottomSize}em`,
            }}
          >
-            {bottomText}
+            {textValue.bottom}
          </div>
        </div>
      </div>
@@ -1,7 +1,10 @@
+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, {
@@ -44,18 +47,32 @@ export const getLowerThirdOptions = (customFields: CustomFields): ViewOption[] =
      collapsible: true,
      options: [
        {
-          id: 'transition',
-          title: 'Transition',
-          description: 'Transition in time in seconds (default 3)',
+          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) ',
          type: 'number',
          placeholder: '3 (default)',
        },
        {
          id: 'delay',
          title: 'Delay',
-          description: 'Delay between transition in and out in seconds (default 3)',
+          description: 'Delay between trigger and transition in (default 0 seconds)',
          type: 'number',
-          placeholder: '3 (default)',
+          placeholder: '0 (default)',
        },
      ],
    },
@@ -69,14 +86,14 @@ export const getLowerThirdOptions = (customFields: CustomFields): ViewOption[] =
          title: 'Top Text Size',
          description: 'Font size of the top text',
          type: 'string',
-          placeholder: '65px',
+          placeholder: '5em',
        },
        {
          id: 'bottom-size',
          title: 'Bottom Text Size',
          description: 'Font size of the bottom text',
          type: 'string',
-          placeholder: '64px',
+          placeholder: '4em',
        },
        {
          id: 'width',
@@ -132,3 +149,73 @@ 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) / 5);
+    font-size: calc(var(--clock-size) / 6);
    line-height: 1em;

    color: var(--studio-active, $red-active);
@@ -1,5 +1,5 @@
 import { useSearchParams } from 'react-router-dom';
-import type { MaybeString, OntimeEntry, OntimeEvent, ProjectData, Settings } from 'ontime-types';
+import type { MaybeString, OntimeEvent, OntimeRundown, ProjectData, Settings } from 'ontime-types';
 import { Playback } from 'ontime-types';
 import { millisToString, removeSeconds, secondsInMillis } from 'ontime-utils';

@@ -17,7 +17,7 @@ import StudioClockSchedule from './StudioClockSchedule';
 import './StudioClock.scss';

 interface StudioClockProps {
-  backstageEvents: OntimeEntry[];
+  backstageEvents: OntimeRundown;
  eventNext: OntimeEvent | null;
  general: ProjectData;
  isMirrored: boolean;
@@ -1,4 +1,4 @@
-import { isOntimeEvent, MaybeString, OntimeEntry, OntimeEvent } from 'ontime-types';
+import { isOntimeEvent, MaybeString, OntimeEvent, OntimeRundown } from 'ontime-types';

 import { formatTime } from '../../../common/utils/time';
 import SuperscriptTime from '../common/superscript-time/SuperscriptTime';
@@ -8,7 +8,7 @@ import { trimRundown } from './studioClock.utils';
 import './StudioClock.scss';

 interface StudioClockScheduleProps {
-  rundown: OntimeEntry[];
+  rundown: OntimeRundown;
  selectedId: MaybeString;
  nextId: MaybeString;
  onAir: boolean;
@@ -32,7 +32,7 @@ interface TranslationContextValue {
  getLocalizedString: (key: keyof typeof langEn, lang?: string) => string;
 }

-const TranslationContext = createContext<TranslationContextValue>({
+export const TranslationContext = createContext<TranslationContextValue>({
  getLocalizedString: () => '',
 });

@@ -8,7 +8,7 @@ import {
  useRef,
  useState,
 } from 'react';
-import { isOntimeEvent, OntimeEntry, OntimeEvent } from 'ontime-types';
+import { isOntimeEvent, OntimeEvent, OntimeRundownEntry } from 'ontime-types';

 import { usePartialRundown } from '../../../common/hooks-query/useRundown';

@@ -36,7 +36,7 @@ export const ScheduleProvider = ({
  isBackstage = false,
 }: PropsWithChildren<ScheduleProviderProps>) => {
  const { cycleInterval, stopCycle } = useScheduleOptions();
-  const { data: events } = usePartialRundown((event: OntimeEntry) => {
+  const { data: events } = usePartialRundown((event: OntimeRundownEntry) => {
    if (isBackstage) {
      return isOntimeEvent(event);
    }
@@ -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.toSpliced(0, selectedEventIndex + 1);
+  const viewEvents = events.slice(selectedEventIndex + 1);
  selectedEventIndex = 0;

  return (
@@ -9,12 +9,12 @@ import {
  useSensors,
 } from '@dnd-kit/core';
 import { ColumnDef } from '@tanstack/react-table';
-import { OntimeEntry } from 'ontime-types';
+import { OntimeRundownEntry } from 'ontime-types';

 import useColumnManager from '../cuesheet-table/useColumnManager';

 interface CuesheetDndProps {
-  columns: ColumnDef<OntimeEntry>[];
+  columns: ColumnDef<OntimeRundownEntry>[];
 }

 export default function CuesheetDnd(props: PropsWithChildren<CuesheetDndProps>) {
@@ -1,7 +1,7 @@
 import { useCallback, useRef } from 'react';
 import { useTableNav } from '@table-nav/react';
 import { ColumnDef, getCoreRowModel, useReactTable } from '@tanstack/react-table';
-import { isOntimeEvent, MaybeString, OntimeEntry, OntimeEvent, TimeField } from 'ontime-types';
+import { isOntimeEvent, MaybeString, OntimeEvent, OntimeRundown, OntimeRundownEntry, TimeField } from 'ontime-types';

 import { useEventAction } from '../../../common/hooks/useEventAction';
 import useFollowComponent from '../../../common/hooks/useFollowComponent';
@@ -16,8 +16,8 @@ import useColumnManager from './useColumnManager';
 import style from './CuesheetTable.module.scss';

 interface CuesheetTableProps {
-  data: OntimeEntry[];
-  columns: ColumnDef<OntimeEntry>[];
+  data: OntimeRundown;
+  columns: ColumnDef<OntimeRundownEntry>[];
  showModal: (eventId: MaybeString) => void;
 }

@@ -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} columnSizing={columnSizing} />
+          <CuesheetBody rowModel={rowModel} selectedRef={selectedRef} table={table} />
        </table>
      </div>
      <CuesheetTableMenu showModal={showModal} />
@@ -19,7 +19,10 @@ function BlockRow(props: BlockRowProps) {
    return null;
  }

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

  return (
    <tr className={style.blockRow}>
@@ -1,7 +1,7 @@
 import { MutableRefObject } from 'react';
 import { RowModel, Table } from '@tanstack/react-table';
 import Color from 'color';
-import { isOntimeBlock, isOntimeDelay, isOntimeEvent, OntimeEntry } from 'ontime-types';
+import { isOntimeBlock, isOntimeDelay, isOntimeEvent, OntimeRundownEntry } from 'ontime-types';

 import { useSelectedEventId } from '../../../../common/hooks/useSocket';
 import { lazyEvaluate } from '../../../../common/utils/lazyEvaluate';
@@ -13,19 +13,27 @@ import DelayRow from './DelayRow';
 import EventRow from './EventRow';

 interface CuesheetBodyProps {
-  rowModel: RowModel<OntimeEntry>;
+  rowModel: RowModel<OntimeRundownEntry>;
  selectedRef: MutableRefObject<HTMLTableRowElement | null>;
-  table: Table<OntimeEntry>;
-  columnSizing: Record<string, number>;
+  table: Table<OntimeRundownEntry>;
 }

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

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

-  const getColumnCount = lazyEvaluate(() => table.getVisibleFlatColumns().length);
+  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;
+  });

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

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

          if (isPast && hidePast) {
            return null;
@@ -87,7 +96,7 @@ export default function CuesheetBody(props: CuesheetBodyProps) {
              selectedRef={isSelected ? selectedRef : undefined}
              rowBgColour={rowBgColour}
              table={table}
-              columnSizing={columnSizing}
+              columnHash={columnHash}
            />
          );
        }
@@ -1,6 +1,6 @@
 import { horizontalListSortingStrategy, SortableContext } from '@dnd-kit/sortable';
 import { flexRender, HeaderGroup } from '@tanstack/react-table';
-import { OntimeEntry } from 'ontime-types';
+import { OntimeRundownEntry } from 'ontime-types';

 import { getAccessibleColour } from '../../../../common/utils/styleUtils';
 import { useCuesheetOptions } from '../../cuesheet.options';
@@ -10,7 +10,7 @@ import { SortableCell } from './SortableCell';
 import style from '../CuesheetTable.module.scss';

 interface CuesheetHeaderProps {
-  headerGroups: HeaderGroup<OntimeEntry>[];
+  headerGroups: HeaderGroup<OntimeRundownEntry>[];
 }

 export default function CuesheetHeader(props: CuesheetHeaderProps) {
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Carlos Valente	c4b66a9ed3	bump version to 3.15.1	2025-04-30 20:28:42 +02:00
Carlos Valente	133b3aa819	refactor: create hash of table state	2025-04-30 20:23:49 +02:00
Carlos Valente	9566fadbbb	chore: upgrade table dependencies	2025-04-30 20:23:49 +02:00
Carlos Valente	62570899e8	fix: issue when user hides all columns	2025-04-30 20:23:49 +02:00
Carlos Valente	c1f25f8dba	bump version to 3.15.0	2025-04-20 13:52:43 +02:00
Alex Christoffer Rasmussen	37a91026d8	FIX: editing event data clears delay value (#1591 ) * leave data in place in case it is not regenerated * update comments	2025-04-20 13:51:25 +02:00
Bastian Widmer	c62ce213f5	fix - fix studio clock sizing when timer seconds are hidden !1585	2025-04-20 13:28:22 +02:00
Alex Christoffer Rasmussen	529751578d	refactor: lower third (#1507 ) * refactor * separate in and out time * keep element on screen * animate on play * spelling * explain animation decisions * guard numbers from url params * spelling Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com> * rename safeParseNumber * use view data * refactor getOptionsFromParams * rebalance animation timing --------- Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com>	2025-04-20 12:50:16 +02:00
Alex Christoffer Rasmussen	dce87c3a81	Relative run mode (#1512 ) * inti relative mode * send imediat update on mode change * add relative to test * don't persist offset mode * add test relative and update calc function * pass data from ssocket * add dev guard * spelling and comments * show relative in offset overview * remove comments * refactor: move totalDelay to _rundown * update clear naming and comments * remove old testing values	2025-04-19 21:36:54 +02:00
Alex Christoffer Rasmussen	a94b10cb0f	Event trigger (#1557 ) * crude UI * add server functionalety * better event trigger list * fix default value * remove log * add trigger to recalculate whitelist * use DTO type * fix rebase * one callback for delete and submit * refactor * add invalid description * clean up commits * cleanup * refactor: find event triggers in `triggerAutomations` * refactor: switch to flat array for event triggers * prevent deleting a automation that is in use * refactor * refactor: extract EventEditorCustom * move trigger options to separate file * move trigger edit down a file level * cleanup * spelling * refactor: ui review proposal * change default value * fix delete filter --------- Co-authored-by: Carlos Valente <carlosvalente@pm.me>	2025-04-19 21:27:07 +02:00
Shobhit Nagpal	6817263123	feat: css editor (#1542 ) * feat: allow editing CSS from settings --------- Co-authored-by: Carlos Valente <carlosvalente@pm.me> refactor: style tweaks	2025-04-19 20:40:18 +02:00
Alex Christoffer Rasmussen	ddd629d7db	in cloud force port 4001 (#1575 ) * force 4001 * only log if there is anything to change * skip port retry in cloud	2025-04-15 21:36:59 +02:00
Carlos Valente	9d2a3d5a12	bump version to 3.14.5	2025-04-15 21:25:46 +02:00
Carlos Valente	4bc271208e	refactor: improve synchronisation of external text	2025-04-15 21:25:33 +02:00
Carlos Valente	dbd535dd6c	refactor: timeout for offline status	2025-04-15 21:25:33 +02:00
Carlos Valente	57b7fe214a	refactor: avoid old language features	2025-04-15 21:25:33 +02:00
cv	b136e2856a	refactor: simplify logic	2025-04-15 21:25:33 +02:00
Carlos Valente	03e68c03a9	refactor: allow cloud in iframe	2025-04-10 21:28:43 +02:00
Carlos Valente	44048a889d	bump version to 3.14.4	2025-04-10 21:28:27 +02:00
arc-alex	f72db62e08	add comment	2025-04-10 21:21:33 +02:00
arc-alex	333f2623a5	Fix: timeUntil past coutToEnd events	2025-04-10 21:21:33 +02:00
Alex Christoffer Rasmussen	3ebb3451e4	better browser compatibility for view params (#1566 )	2025-04-09 12:39:59 +02:00
				`@@ -0,0 +1 @@`
				`export type Size = 'xs' \| 'sm' \| 'md' \| 'lg';`