refactor(cuesheet): reserve the space an image will actually take

We were remembering the aspect ratio and reserving the full width of the column, which over-reserves for an image smaller than the column: the row would settle to a smaller size once the image was shown. We now remember the size of the image and express the reservation in CSS as min(100%, width), which is what the image itself resolves to at any column width. Column sizes are applied as CSS variables and do not re-render the cells, so the reservation follows a resize on its own. Also groups the tests around the behaviour they describe. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01CKXcDrZoQXbJpaXiLi1aff
refactor(cuesheet): images are referenced by link only
2026-09-10 16:49:41 +00:00 · 2026-08-30 10:52:39 +00:00 · 2026-08-30 10:37:25 +00:00 · 2026-08-29 14:03:29 +00:00 · 2026-08-29 14:02:34 +00:00 · 2026-07-25 19:28:58 +00:00
50 changed files with 703 additions and 790 deletions
@@ -3,7 +3,6 @@ import { ComponentType, Suspense, lazy, useEffect, useMemo } from 'react';
 import { Navigate, Route, useLocation, useNavigate, useParams } from 'react-router';
 import ViewNavigationMenu from './common/components/navigation-menu/ViewNavigationMenu';
 import { EditableRundownScopeProvider } from './common/context/EditableRundownScopeProvider';
 import { PresetContext } from './common/context/PresetContext';
 import useUrlPresets from './common/hooks-query/useUrlPresets';
 import { useClientPath } from './common/hooks/useClientPath';
@@ -113,9 +112,7 @@ export default function AppRouter() {
          path='rundown'
          element={
            <EditorFeatureWrapper>
-              <EditableRundownScopeProvider rundownId={null}>
+              <RundownPanel />
                <RundownPanel />
              </EditableRundownScopeProvider>
            </EditorFeatureWrapper>
          }
        />
@@ -22,14 +22,6 @@ export const CLIENT_LIST = ['clientList'];
 export const REPORT = ['report'];
 export const TRANSLATION = ['translation'];
 /**
 * Cache key holding the data for a rundown.
 * Before the loaded rundown is known there is no id to key by,
 * and the data lives under the bootstrap alias.
 */
 export const getRundownCacheKey = (rundownId: string) =>
  rundownId ? getRundownQueryKey(rundownId) : CURRENT_RUNDOWN_QUERY_KEY;
 // API URLs
 export const apiEntryUrl = `${serverURL}/data`;
@@ -1,24 +0,0 @@
 import { PropsWithChildren } from 'react';
 import { useScopedEntryActions } from '../hooks/useEntryAction';
 import { EntryActionsProvider } from './EntryActionsContext';
 import { RundownScopeProvider, useRundownScope, type RundownScopeProviderProps } from './RundownScopeContext';
 /**
 * Rundown scope for subtrees which mutate entries.
 * Actions are bound to the same rundown as the data, so the two cannot disagree.
 */
 export function EditableRundownScopeProvider({ children, rundownId }: RundownScopeProviderProps) {
  return (
    <RundownScopeProvider rundownId={rundownId}>
      <ScopedEntryActions>{children}</ScopedEntryActions>
    </RundownScopeProvider>
  );
 }
 function ScopedEntryActions({ children }: PropsWithChildren) {
  const { rundownId } = useRundownScope();
  const actions = useScopedEntryActions(rundownId);
  return <EntryActionsProvider actions={actions}>{children}</EntryActionsProvider>;
 }
@@ -1,77 +0,0 @@
 import { MaybeString, Rundown } from 'ontime-types';
 import { PropsWithChildren, createContext, useContext, useEffect, useMemo, useRef } from 'react';
 import { getRundownCacheKey } from '../api/constants';
 import { useProjectRundowns } from '../hooks-query/useProjectRundowns';
 import { ontimeQueryClient } from '../queryClient';
 import { createEventSelectionStore, type EventSelectionStoreApi } from '../stores/eventSelectionStore';
 export type RundownScopeValue = {
  /** the rundown this subtree operates on */
  rundownId: string;
  /** whether this scope targets the rundown the runtime is playing */
  isLoaded: boolean;
  /** selection and cursor, scoped to this rundown */
  selectionStore: EventSelectionStoreApi;
 };
 const RundownScopeContext = createContext<RundownScopeValue | null>(null);
 export interface RundownScopeProviderProps extends PropsWithChildren {
  /** rundown to operate on, null follows the loaded rundown */
  rundownId: MaybeString;
 }
 /**
 * Declares which rundown a subtree reads from.
 *
 * Data hooks resolve their rundown from here, so components never need to know
 * which rundown they operate on. Nest a provider to point part of the tree at a
 * different rundown; the app mounts one at the root that follows the loaded rundown.
 */
 export function RundownScopeProvider({ children, rundownId }: RundownScopeProviderProps) {
  const {
    data: { loaded },
  } = useProjectRundowns();
  const targetId = rundownId ?? loaded;
  // the store reads the rundown lazily, the ref keeps it pointing at the current target
  const targetIdRef = useRef(targetId);
  const selectionStoreRef = useRef<EventSelectionStoreApi | null>(null);
  if (selectionStoreRef.current === null) {
    selectionStoreRef.current = createEventSelectionStore(() =>
      ontimeQueryClient.getQueryData<Rundown>(getRundownCacheKey(targetIdRef.current)),
    );
  }
  const selectionStore = selectionStoreRef.current;
  // a selection refers to entries of a single rundown, it cannot survive a change of target
  useEffect(() => {
    targetIdRef.current = targetId;
    selectionStore.getState().clearSelectedEvents();
  }, [selectionStore, targetId]);
  const value = useMemo(
    (): RundownScopeValue => ({
      rundownId: targetId,
      // an unresolved target is not the loaded rundown, it is not yet any rundown
      isLoaded: Boolean(loaded) && targetId === loaded,
      selectionStore,
    }),
    [targetId, loaded, selectionStore],
  );
  return <RundownScopeContext.Provider value={value}>{children}</RundownScopeContext.Provider>;
 }
 export function useRundownScope(): RundownScopeValue {
  const context = useContext(RundownScopeContext);
  if (!context) {
    throw new Error('useRundownScope must be used within a RundownScopeProvider');
  }
  return context;
 }
@@ -1,81 +0,0 @@
 import { EntryId, OntimeEntry } from 'ontime-types';
 import { useMemo } from 'react';
 import { useSelectedEventId } from '../hooks/useSocket';
 import { ExtendedEntry, getFlatRundownMetadata, getRundownMetadata } from '../utils/rundownMetadata';
 import { useProjectRundowns } from './useProjectRundowns';
 import { flattenRundown, useRundownById } from './useRundownById';
 /**
 * Rundown data for surfaces which only ever work against the rundown being played:
 * the viewers, the operator, app settings and the runtime overview.
 *
 * These take no part in a rundown scope, they resolve the loaded rundown directly.
 * Anything which can be pointed at a background rundown reads from its scope instead.
 */
 export function useLoadedRundown() {
  const {
    data: { loaded },
  } = useProjectRundowns();
  return useRundownById(loaded);
 }
 export function useLoadedRundownWithMetadata() {
  const { data, status } = useLoadedRundown();
  const selectedEventId = useSelectedEventId();
  const { entries, flatOrder } = data;
  const rundownMetadata = useMemo(
    () => getRundownMetadata({ entries, flatOrder }, selectedEventId),
    [entries, flatOrder, selectedEventId],
  );
  return { data, status, rundownMetadata };
 }
 export function useLoadedFlatRundown() {
  const { data, status } = useLoadedRundown();
  const flatRundown = useMemo(() => flattenRundown(data), [data]);
  return { data: flatRundown, rundownId: data.id, status };
 }
 export function useLoadedFlatRundownWithMetadata() {
  const { data, status } = useLoadedRundown();
  const selectedEventId = useSelectedEventId();
  const { entries, flatOrder } = data;
  const rundownWithMetadata = useMemo(
    () => getFlatRundownMetadata({ entries, flatOrder }, selectedEventId),
    [entries, flatOrder, selectedEventId],
  );
  return { data: rundownWithMetadata, status };
 }
 /**
 * Provides access to a partial rundown based on a filter callback
 *
 * Callers MUST memoize the callback with useCallback to prevent
 * re-filtering on every render.
 */
 export function useLoadedPartialRundown(cb: (event: ExtendedEntry<OntimeEntry>) => boolean) {
  const { data, status } = useLoadedFlatRundownWithMetadata();
  const filteredData = useMemo(() => data.filter(cb), [data, cb]);
  return { data: filteredData, status };
 }
 /**
 * Hook to get a specific entry by ID from the loaded rundown.
 * Runtime ids (the playing event, its group, the next flag) only exist here.
 */
 export function useLoadedEntry(entryId: EntryId | null): OntimeEntry | null {
  const { data: rundown } = useLoadedRundown();
  if (entryId === null) return null;
  return rundown.entries[entryId] ?? null;
 }
 export function useLoadedRundownAuxData() {
  const { data, status } = useLoadedRundown();
  const filteredData = useMemo(() => {
    const { title, id } = data;
    return { title, id };
  }, [data]);
  return { data: filteredData, status };
 }
@@ -1,38 +1,62 @@
-import { EntryId, OntimeEntry } from 'ontime-types';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { useMemo } from 'react';
+import { EntryId, OntimeEntry, Rundown } from 'ontime-types';
 import { useEffect, useMemo } from 'react';
-import { useRundownScope } from '../context/RundownScopeContext';
+import { queryRefetchIntervalSlow } from '../../ontimeConfig';
 import { CURRENT_RUNDOWN_QUERY_KEY, getRundownQueryKey } from '../api/constants';
 import { fetchCurrentRundown, fetchRundown } from '../api/rundown';
 import { useSelectedEventId } from '../hooks/useSocket';
-import { getFlatRundownMetadata, getRundownMetadata } from '../utils/rundownMetadata';
+import { ExtendedEntry, getFlatRundownMetadata, getRundownMetadata } from '../utils/rundownMetadata';
-import { flattenRundown, useRundownById } from './useRundownById';
+import { useProjectRundowns } from './useProjectRundowns';
 // revision is -1 so that the remote revision is higher
 const cachedRundownPlaceholder: Rundown = {
  id: 'default',
  title: '',
  order: [],
  flatOrder: [],
  entries: {},
  revision: -1,
 };
 /**
- * Normalised rundown data for the rundown of the enclosing scope
+ * Normalised rundown data for the currently loaded rundown.
 *
 * Bootstraps via the `/current` alias so the first paint is a single round-trip,
 * independent of the project rundown list. Once the loaded id is known, the
 * query key swaps to the id-keyed cache that is shared with `useRundownById`.
 */
 export default function useRundown() {
-  const { rundownId } = useRundownScope();
+  const queryClient = useQueryClient();
-  return useRundownById(rundownId);
+  const {
-}
+    data: { loaded: loadedRundownId },
  } = useProjectRundowns();
-/**
+  const { data, status, isError, refetch, isFetching } = useQuery<Rundown>({
- * Runtime state only describes the loaded rundown,
+    queryKey: loadedRundownId ? getRundownQueryKey(loadedRundownId) : CURRENT_RUNDOWN_QUERY_KEY,
- * a scope pointed elsewhere must not show a playing event
+    queryFn: ({ signal }) => fetchCurrentRundown({ signal }),
- */
+    refetchInterval: queryRefetchIntervalSlow,
-export function useScopedSelectedEventId(): EntryId | null {
+  });
-  const { isLoaded } = useRundownScope();
+
-  const selectedEventId = useSelectedEventId();
+  // Seed the id-keyed cache when fetching via the bootstrap alias
-  return isLoaded ? selectedEventId : null;
+  useEffect(() => {
    if (!data || loadedRundownId) return;
    queryClient.setQueryData(getRundownQueryKey(data.id), data);
  }, [data, loadedRundownId, queryClient]);
  // Once we have the ID, drop the temporary current cache
  useEffect(() => {
    if (!loadedRundownId) return;
    queryClient.removeQueries({ queryKey: CURRENT_RUNDOWN_QUERY_KEY, exact: true });
  }, [loadedRundownId, queryClient]);
  return { data: data ?? cachedRundownPlaceholder, status, isError, refetch, isFetching };
 }
 export function useRundownWithMetadata() {
  const { data, status } = useRundown();
-  const selectedEventId = useScopedSelectedEventId();
+  const selectedEventId = useSelectedEventId();
-  // key on the fields the derivation reads, a revision only change must not churn the list
+  const rundownMetadata = useMemo(() => getRundownMetadata(data, selectedEventId), [data, selectedEventId]);
  const { entries, flatOrder } = data;
  const rundownMetadata = useMemo(
    () => getRundownMetadata({ entries, flatOrder }, selectedEventId),
    [entries, flatOrder, selectedEventId],
  );
  return { data, status, rundownMetadata };
 }
@@ -42,23 +66,41 @@ export function useRundownWithMetadata() {
 */
 export function useFlatRundown() {
  const { data, status } = useRundown();
-  const flatRundown = useMemo(() => flattenRundown(data), [data]);
+
  const flatRundown = useMemo(() => {
    if (data.revision === -1) {
      return [];
    }
    return data.flatOrder.map((id) => data.entries[id]).filter((entry): entry is OntimeEntry => entry !== undefined);
  }, [data]);
  return { data: flatRundown, rundownId: data.id, status };
 }
 export function useFlatRundownWithMetadata() {
  const { data, status } = useRundown();
-  const selectedEventId = useScopedSelectedEventId();
+  const selectedEventId = useSelectedEventId();
-  const { entries, flatOrder } = data;
+  const rundownWithMetadata = useMemo(() => getFlatRundownMetadata(data, selectedEventId), [data, selectedEventId]);
  const rundownWithMetadata = useMemo(
    () => getFlatRundownMetadata({ entries, flatOrder }, selectedEventId),
    [entries, flatOrder, selectedEventId],
  );
  return { data: rundownWithMetadata, status };
 }
 /**
 * Provides access to a partial rundown based on a filter callback
 *
 * Callers MUST memoize the callback with useCallback to prevent
 * re-filtering on every render.
 *
 */
 export function usePartialRundown(cb: (event: ExtendedEntry<OntimeEntry>) => boolean) {
  const { data, status } = useFlatRundownWithMetadata();
  const filteredData = useMemo(() => {
    return data.filter(cb);
  }, [data, cb]);
  return { data: filteredData, status };
 }
 /**
 * Hook to get a specific entry by ID from the rundown
 */
@@ -68,3 +110,30 @@ export function useEntry(entryId: EntryId | null): OntimeEntry | null {
  if (entryId === null) return null;
  return rundown.entries[entryId] ?? null;
 }
 export function useRundownAuxData() {
  const { data, status } = useRundown();
  const filteredData = useMemo(() => {
    const { title, id } = data;
    return { title, id };
  }, [data]);
  return { data: filteredData, status };
 }
 /**
 * Provides access to a specific rundown by ID.
 * When rundownId is null/undefined the query is disabled and returns the placeholder.
 */
 export function useRundownById(rundownId: string | null | undefined) {
  const enabled = Boolean(rundownId);
  const { data, status, isError, refetch, isFetching } = useQuery<Rundown>({
    queryKey: getRundownQueryKey(rundownId ?? ''),
    queryFn: ({ signal }) => fetchRundown(rundownId!, { signal }),
    enabled,
    placeholderData: (previousData, _previousQuery) => previousData,
    refetchInterval: queryRefetchIntervalSlow,
  });
  return { data: data ?? cachedRundownPlaceholder, status, isError, refetch, isFetching };
 }
@@ -1,66 +0,0 @@
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { OntimeEntry, Rundown } from 'ontime-types';
 import { useEffect, useRef } from 'react';
 import { queryRefetchIntervalSlow } from '../../ontimeConfig';
 import { CURRENT_RUNDOWN_QUERY_KEY, getRundownCacheKey, getRundownQueryKey } from '../api/constants';
 import { fetchCurrentRundown, fetchRundown } from '../api/rundown';
 // revision is -1 so that the remote revision is higher
 const cachedRundownPlaceholder: Rundown = {
  id: 'default',
  title: '',
  order: [],
  flatOrder: [],
  entries: {},
  revision: -1,
 };
 /**
 * Provides access to a specific rundown by ID.
 *
 * Without an ID we do not yet know which rundown is loaded, so we bootstrap via
 * the `/current` alias to keep the first paint to a single round-trip, then seed
 * the id-keyed cache that every other reader shares.
 */
 export function useRundownById(rundownId: string | null | undefined) {
  const queryClient = useQueryClient();
  const id = rundownId ?? '';
  const isBootstrap = id === '';
  const { data, status, isError, refetch, isFetching } = useQuery<Rundown>({
    queryKey: getRundownCacheKey(id),
    queryFn: ({ signal }) => (isBootstrap ? fetchCurrentRundown({ signal }) : fetchRundown(id, { signal })),
    placeholderData: (previousData, _previousQuery) => previousData,
    refetchInterval: queryRefetchIntervalSlow,
  });
  // Seed the id-keyed cache when fetching via the bootstrap alias
  useEffect(() => {
    if (!data || !isBootstrap) return;
    queryClient.setQueryData(getRundownQueryKey(data.id), data);
  }, [data, isBootstrap, queryClient]);
  // Once we have the ID, drop the temporary current cache.
  // Only the reader which bootstrapped may do so, others are still relying on it.
  const didBootstrap = useRef(isBootstrap);
  useEffect(() => {
    if (isBootstrap || !didBootstrap.current) return;
    didBootstrap.current = false;
    queryClient.removeQueries({ queryKey: CURRENT_RUNDOWN_QUERY_KEY, exact: true });
  }, [isBootstrap, queryClient]);
  return { data: data ?? cachedRundownPlaceholder, status, isError, refetch, isFetching };
 }
 /**
 * Builds a flat rundown from the order and entries fields
 */
 export function flattenRundown(rundown: Rundown): OntimeEntry[] {
  if (rundown.revision === -1) {
    return [];
  }
  return rundown.flatOrder
    .map((id) => rundown.entries[id])
    .filter((entry): entry is OntimeEntry => entry !== undefined);
 }
@@ -0,0 +1,54 @@
 import { EntryId, Rundown } from 'ontime-types';
 import { useMemo } from 'react';
 import { useSelectedEventId } from '../hooks/useSocket';
 import { getFlatRundownMetadata, type ExtendedEntry } from '../utils/rundownMetadata';
 import { useProjectRundowns } from './useProjectRundowns';
 import { useRundownById } from './useRundown';
 export type RundownSource = {
  rundownId: string | null;
  rundown: Rundown;
  flatRundown: ExtendedEntry[];
  status: string;
  selectedEventId: EntryId | null;
 };
 /**
 * Explicitly scoped rundown data for views that may operate on a non-loaded rundown.
 */
 export function useScopedRundown(rundownId: string | null): RundownSource {
  const { data: projectRundowns } = useProjectRundowns();
  return useRundownSource(rundownId, projectRundowns.loaded || null);
 }
 /**
 * Loaded-rundown source for views that must follow the active runtime rundown.
 */
 export function useLoadedRundownSource(): RundownSource {
  const { data: projectRundowns } = useProjectRundowns();
  const loadedRundownId = projectRundowns.loaded || null;
  return useRundownSource(loadedRundownId, loadedRundownId);
 }
 function useRundownSource(rundownId: string | null, loadedRundownId: string | null): RundownSource {
  const isLoadedTarget = rundownId !== null && rundownId === loadedRundownId;
  const runtimeSelectedEventId = useSelectedEventId();
  const effectiveSelectedEventId = isLoadedTarget ? runtimeSelectedEventId : null;
  const { data: rundown, status } = useRundownById(rundownId);
  const flatRundown = useMemo(
    () => getFlatRundownMetadata(rundown, effectiveSelectedEventId),
    [effectiveSelectedEventId, rundown],
  );
  return useMemo(
    () => ({
      rundownId,
      rundown,
      flatRundown,
      status,
      selectedEventId: effectiveSelectedEventId,
    }),
    [effectiveSelectedEventId, flatRundown, rundown, rundownId, status],
  );
 }
@@ -8,6 +8,7 @@ import {
  OntimeGroup,
  OntimeMilestone,
  PatchWithId,
  ProjectRundownsList,
  Rundown,
  SupportedEntry,
  TimeField,
@@ -31,10 +32,9 @@ import {
  swapEventData,
 } from 'ontime-utils';
 import { useCallback, useMemo } from 'react';
 import isEqual from 'react-fast-compare';
 import { moveDown, moveUp, orderEntries } from '../../features/rundown/rundown.utils';
-import { getRundownCacheKey } from '../api/constants';
+import { CURRENT_RUNDOWN_QUERY_KEY, PROJECT_RUNDOWNS, getRundownQueryKey } from '../api/constants';
 import {
  ReorderEntry,
  deleteEntries,
@@ -52,7 +52,6 @@ import {
  requestFitGroupTarget,
 } from '../api/rundown';
 import { logAxiosError } from '../api/utils';
 import { useRundownScope } from '../context/RundownScopeContext';
 import { useEditorSettings } from '../stores/editorSettings';
 export type EventOptions = Partial<{
@@ -65,38 +64,22 @@ export type EventOptions = Partial<{
  lastEventId: MaybeString;
 }>;
 /**
 * Applies a patch the way the server does, revision included.
 *
 * An entry revision advances on every change to that entry, which makes it a
 * cheap marker for whether an entry has moved on. The optimistic entry has to
 * carry the revision the server will return, otherwise the two disagree and the
 * refetch resolves to a different object for no reason.
 * Mirrors applyPatchToEntry in the rundown service: delays carry no revision.
 */
 function patchEntry(entry: OntimeEntry, patch: Partial<OntimeEntry>): OntimeEntry {
  if (isOntimeEvent(entry) || isOntimeGroup(entry) || isOntimeMilestone(entry)) {
    return { ...entry, ...patch, revision: entry.revision + 1 } as OntimeEntry;
  }
  return { ...entry, ...patch } as OntimeEntry;
 }
 type ClientInsertOptions = {
  after?: EntryId;
  before?: EntryId;
 };
 /**
- * Gather utilities for actions on entries in the rundown of the enclosing scope.
+ * Gather utilities for actions on entries in the loaded rundown.
 */
-export const useEntryActions = () => useEntryActionsForRundown(useRundownScope().rundownId);
+export const useEntryActions = () => useEntryActionsForRundown(undefined);
 /**
 * Gather utilities for actions on entries in an explicitly selected rundown.
 */
-export const useScopedEntryActions = (rundownId: MaybeString) => useEntryActionsForRundown(rundownId ?? '');
+export const useScopedEntryActions = (rundownId: string | null) => useEntryActionsForRundown(rundownId ?? '');
-function useEntryActionsForRundown(scopedRundownId: string) {
+function useEntryActionsForRundown(scopedRundownId: string | undefined) {
  const queryClient = useQueryClient();
  const {
    linkPrevious,
@@ -110,8 +93,12 @@ function useEntryActionsForRundown(scopedRundownId: string) {
  } = useEditorSettings();
  const resolveCurrentRundownQueryKey = useCallback(() => {
-    return getRundownCacheKey(scopedRundownId);
+    if (scopedRundownId !== undefined) {
-  }, [scopedRundownId]);
+      return getRundownQueryKey(scopedRundownId);
    }
    const loadedRundownId = queryClient.getQueryData<ProjectRundownsList>(PROJECT_RUNDOWNS)?.loaded;
    return loadedRundownId ? getRundownQueryKey(loadedRundownId) : CURRENT_RUNDOWN_QUERY_KEY;
  }, [queryClient, scopedRundownId]);
  /**
   * Returns the currently loaded rundown
@@ -338,10 +325,8 @@ function useEntryActionsForRundown(scopedRundownId: string) {
      if (previousData && eventId) {
        // optimistically update object
        const newRundown = { ...previousData.entries };
-        const previousEntry = newRundown[eventId];
+        // @ts-expect-error -- we expect the events to be of same type
-        if (previousEntry) {
+        newRundown[eventId] = { ...newRundown[eventId], ...newEvent };
          newRundown[eventId] = patchEntry(previousEntry, newEvent);
        }
        queryClient.setQueryData<Rundown>(queryKey, {
          id: previousData.id,
          title: previousData.title,
@@ -355,23 +340,6 @@ function useEntryActionsForRundown(scopedRundownId: string) {
      // Return a context with the previous and new events
      return { previousData, newEvent, queryKey };
    },
    // the server is the authority on the applied patch, it may normalise what we sent
    onSuccess: (response, _variables, context) => {
      const serverEntry = response.data;
      if (!serverEntry || !context?.queryKey) return;
      const cachedRundown = queryClient.getQueryData<Rundown>(context.queryKey);
      if (!cachedRundown) return;
      // our optimistic entry usually describes the change exactly, writing an
      // identical entry would discard the cached reference for nothing
      if (isEqual(cachedRundown.entries[serverEntry.id], serverEntry)) return;
      queryClient.setQueryData<Rundown>(context.queryKey, {
        ...cachedRundown,
        entries: { ...cachedRundown.entries, [serverEntry.id]: serverEntry },
      });
    },
    // Mutation fails, rollback undoes optimist update
    onError: (_error, _newEvent, context) => {
      if (context?.previousData && context?.queryKey) {
@@ -544,7 +512,10 @@ function useEntryActionsForRundown(scopedRundownId: string) {
          if (Object.hasOwn(newRundown, eventId)) {
            const event = newRundown[eventId];
            if (isOntimeEvent(event)) {
-              newRundown[eventId] = patchEntry(event, data.data);
+              newRundown[eventId] = {
                ...event,
                ...data,
              };
            }
          }
        });
@@ -1,64 +0,0 @@
 import { Rundown, SupportedEntry } from 'ontime-types';
 import { createEventSelectionStore } from '../eventSelectionStore';
 function makeRundown(id: string, eventIds: string[]): Rundown {
  return {
    id,
    title: id,
    order: eventIds,
    flatOrder: eventIds,
    entries: Object.fromEntries(eventIds.map((entryId) => [entryId, { id: entryId, type: SupportedEntry.Event }])),
    revision: 1,
  } as unknown as Rundown;
 }
 describe('createEventSelectionStore', () => {
  it('keeps selections of separate instances independent', () => {
    const first = createEventSelectionStore(() => makeRundown('rundown-a', ['a1', 'a2']));
    const second = createEventSelectionStore(() => makeRundown('rundown-b', ['b1', 'b2']));
    first.getState().setSingleEntrySelection({ id: 'a1' });
    second.getState().setSingleEntrySelection({ id: 'b2' });
    expect(first.getState().cursor).toBe('a1');
    expect(second.getState().cursor).toBe('b2');
    expect(first.getState().selectedEvents).toEqual(new Set(['a1']));
    expect(second.getState().selectedEvents).toEqual(new Set(['b2']));
  });
  it('resolves a shift range against the injected rundown', () => {
    const store = createEventSelectionStore(() => makeRundown('rundown-a', ['a1', 'a2', 'a3']));
    store.getState().setSelectedEvents({ id: 'a3', index: 2, selectMode: 'shift' });
    // without an anchor the range runs from the top up to the clicked index
    expect(store.getState().selectedEvents).toEqual(new Set(['a1', 'a2']));
    expect(store.getState().anchoredIndex).toBe(2);
  });
  it('replaces the selection set so subscribers on the set re-render', () => {
    const store = createEventSelectionStore(() => makeRundown('rundown-a', ['a1', 'a2']));
    store.getState().setSelectedEvents({ id: 'a1', index: 0, selectMode: 'click' });
    const afterClick = store.getState().selectedEvents;
    store.getState().setSelectedEvents({ id: 'a2', index: 1, selectMode: 'ctrl' });
    const afterAdd = store.getState().selectedEvents;
    expect(afterAdd).not.toBe(afterClick);
    expect(afterAdd).toEqual(new Set(['a1', 'a2']));
    store.getState().unselect('a1');
    const afterUnselect = store.getState().selectedEvents;
    expect(afterUnselect).not.toBe(afterAdd);
    expect(afterUnselect).toEqual(new Set(['a2']));
  });
  it('does not select when the rundown is unavailable', () => {
    const store = createEventSelectionStore(() => undefined);
    store.getState().setSelectedEvents({ id: 'a1', index: 0, selectMode: 'shift' });
    expect(store.getState().selectedEvents).toEqual(new Set());
  });
 });
@@ -1,21 +1,14 @@
 import { MaybeString } from 'ontime-types';
 import { create } from 'zustand';
 type EntryCopyStore = {
-  entryCopyId: MaybeString;
+  entryCopyId: string | null;
  /** rundown the copied entry belongs to, so a paste knows whether it crosses rundowns */
  entryCopyRundownId: MaybeString;
  entryCopyMode: 'copy' | 'cut';
-  setEntryCopyId: (eventId: MaybeString, rundownId: MaybeString, mode?: 'copy' | 'cut') => void;
+  setEntryCopyId: (eventId: string | null, mode?: 'copy' | 'cut') => void;
 };
 /**
 * The clipboard is shared across rundowns so entries can be moved between them
 */
 export const useEntryCopy = create<EntryCopyStore>()((set) => ({
  entryCopyId: null,
  entryCopyRundownId: null,
  entryCopyMode: 'copy',
-  setEntryCopyId: (entryCopyId: MaybeString, entryCopyRundownId: MaybeString, mode: 'copy' | 'cut' = 'copy') =>
+  setEntryCopyId: (entryCopyId: string | null, mode: 'copy' | 'cut' = 'copy') =>
-    set({ entryCopyId, entryCopyRundownId, entryCopyMode: mode }),
+    set({ entryCopyId, entryCopyMode: mode }),
 }));
@@ -1,158 +0,0 @@
 import { EntryId, MaybeNumber, Rundown, isOntimeEvent } from 'ontime-types';
 import { MouseEvent } from 'react';
 import { StoreApi } from 'zustand';
 import { createStore } from 'zustand/vanilla';
 import { isMacOS } from '../utils/deviceUtils';
 export type SelectionMode = 'shift' | 'click' | 'ctrl';
 export interface EventSelectionStore {
  selectedEvents: Set<EntryId>;
  anchoredIndex: MaybeNumber;
  cursor: EntryId | null;
  entryMode: 'event' | 'single' | null;
  scrollHandler: ((id: EntryId) => void) | null;
  setSingleEntrySelection: (selectionArgs: { id: EntryId }) => void;
  setSelectedEvents: (selectionArgs: { id: EntryId; index: number; selectMode: SelectionMode }) => void;
  clearSelectedEvents: () => void;
  clearMultiSelect: () => void;
  unselect: (id: EntryId) => void;
  setScrollHandler: (handler: ((id: EntryId) => void) | null) => void;
  scrollToEntry: (id: EntryId) => void;
 }
 export type EventSelectionStoreApi = StoreApi<EventSelectionStore>;
 /**
 * Keeps track of the selected entries and selection mode
 * Provides methods to update the selection based on user interactions
 *
 * One store instance exists per rundown scope, so panels showing different
 * rundowns keep independent selections. The rundown the selection refers to is
 * injected as `getRundown` rather than resolved from the loaded rundown.
 */
 export function createEventSelectionStore(getRundown: () => Rundown | undefined): EventSelectionStoreApi {
  return createStore<EventSelectionStore>()((set, get) => ({
    selectedEvents: new Set(),
    anchoredIndex: null,
    cursor: null,
    entryMode: null,
    scrollHandler: null,
    setSingleEntrySelection: ({ id }) => {
      set({ selectedEvents: new Set([id]), anchoredIndex: null, cursor: id, entryMode: 'single' });
    },
    setSelectedEvents: ({ id, index, selectMode }) => {
      const { selectedEvents, anchoredIndex, entryMode } = get();
      // if we are in single mode, we replace the selection and change the mode
      if (entryMode === 'single') {
        return set({ selectedEvents: new Set([id]), anchoredIndex: index, cursor: id, entryMode: 'event' });
      }
      // on click, we replace selection with event
      if (selectMode === 'click') {
        return set({ selectedEvents: new Set([id]), anchoredIndex: index, cursor: id, entryMode: 'event' });
      }
      // on ctrl + click, we toggle the selection of that event
      if (selectMode === 'ctrl') {
        const rundownData = getRundown();
        if (!rundownData) return;
        // if it doesnt exist, simply add to the list and set an anchor
        if (!selectedEvents.has(id)) {
          return set({
            selectedEvents: new Set(selectedEvents).add(id),
            anchoredIndex: index,
            cursor: id,
            entryMode: 'event',
          });
        }
        // if event is already selected, we remove it from selection
        // and set the anchor to the event after
        const withoutId = new Set(selectedEvents);
        withoutId.delete(id);
        const nextIndex = rundownData.order.findIndex(
          (eventId, i) => i > index && isOntimeEvent(rundownData.entries[eventId]) && withoutId.has(eventId),
        );
        // if we didnt find anything after, set the anchor to the last event
        return set({
          selectedEvents: withoutId,
          anchoredIndex: nextIndex < 0 ? rundownData.order.length - 1 : nextIndex,
          entryMode: 'event',
        });
      }
      // on shift + click, we select a range of events up to the clicked event
      if (selectMode === 'shift') {
        const rundownData = getRundown();
        if (!rundownData) return;
        // get list of rundown with only ontime events
        const eventIds: EntryId[] = [];
        rundownData.flatOrder.forEach((eventId) => {
          const event = rundownData.entries[eventId];
          if (isOntimeEvent(event)) {
            eventIds.push(event.id);
          }
        });
        const start = anchoredIndex === null ? 0 : Math.min(anchoredIndex, index);
        const end = anchoredIndex === null ? index : Math.max(anchoredIndex, index + 1);
        // create new set with range of ids from start to end
        const selectedEventIds = eventIds.slice(start, end);
        return set({
          selectedEvents: new Set([...selectedEvents, ...selectedEventIds]),
          anchoredIndex: index,
          entryMode: 'event',
        });
      }
    },
    clearSelectedEvents: () => set({ selectedEvents: new Set(), anchoredIndex: null, cursor: null, entryMode: null }),
    clearMultiSelect: () => {
      const { selectedEvents } = get();
      const [firstSelected] = selectedEvents;
      set({
        selectedEvents: new Set(firstSelected ? [firstSelected] : []),
        anchoredIndex: null,
        entryMode: null,
      });
    },
    unselect: (id: string) => {
      const { entryMode, selectedEvents } = get();
      const remaining = new Set(selectedEvents);
      remaining.delete(id);
      set({
        selectedEvents: remaining,
        entryMode: remaining.size === 0 ? null : entryMode,
      });
    },
    // Sets the scroll handler for programmatic scrolling to entries
    setScrollHandler: (handler) => set({ scrollHandler: handler }),
    // Scrolls to the specified entry using the registered scroll handler
    scrollToEntry: (id: EntryId) => {
      const handler = get().scrollHandler;
      if (handler) {
        handler(id);
      }
    },
  }));
 }
 export function getSelectionMode(event: MouseEvent): SelectionMode {
  if ((isMacOS() && event.metaKey) || event.ctrlKey) {
    return 'ctrl';
  }
  if (event.shiftKey) {
    return 'shift';
  }
  return 'click';
 }
@@ -0,0 +1,26 @@
 import { getRememberedDimensions, rememberDimensions } from '../imageDimensions';
 /** stand-in for a loaded HTMLImageElement */
 function makeImage(naturalWidth: number, naturalHeight: number) {
  return { naturalWidth, naturalHeight } as HTMLImageElement;
 }
 test('We remember the size of an image, so that we can reserve its space when it comes back', () => {
  expect(getRememberedDimensions('http://ontime.local/unseen.png')).toBe(null);
  rememberDimensions('http://ontime.local/image.png', makeImage(1920, 1080));
  expect(getRememberedDimensions('http://ontime.local/image.png')).toMatchObject({ width: 1920, height: 1080 });
  // an image which failed to load has no size to offer
  rememberDimensions('http://ontime.local/broken.png', makeImage(0, 0));
  expect(getRememberedDimensions('http://ontime.local/broken.png')).toBe(null);
 });
 test('We keep the most recently seen images, older entries are forgotten', () => {
  for (let i = 0; i < 600; i++) {
    rememberDimensions(`http://ontime.local/${i}.png`, makeImage(100, 50));
  }
  expect(getRememberedDimensions('http://ontime.local/0.png')).toBe(null);
  expect(getRememberedDimensions('http://ontime.local/599.png')).toMatchObject({ width: 100, height: 50 });
 });
@@ -0,0 +1,49 @@
 /**
 * Images in the cuesheet live inside a virtualised table:
 * rows are unmounted when they leave the viewport and mounted again when they come back.
 * A re-mounted image has no dimensions until it is available,
 * which makes the row change height and the table shift under the user.
 *
 * We remember the size of the images we have already seen
 * so that we can reserve the space they will take.
 * This only holds two numbers per image: we leave the image data itself to the browser cache,
 * which knows better than us when memory should be released.
 */
 export interface ImageDimensions {
  width: number;
  height: number;
 }
 /** how many sizes we remember, this is only a few bytes per entry */
 const maxSize = 500;
 const dimensions = new Map<string, ImageDimensions>();
 /**
 * @returns the size of a previously loaded image, if we have seen it before
 */
 export function getRememberedDimensions(src: string): ImageDimensions | null {
  return dimensions.get(src) ?? null;
 }
 /**
 * Records the size of a loaded image
 */
 export function rememberDimensions(src: string, image: HTMLImageElement) {
  if (image.naturalHeight === 0) {
    return;
  }
  // the map iteration order is our LRU queue, re-adding the entry marks it as recently used
  dimensions.delete(src);
  dimensions.set(src, { width: image.naturalWidth, height: image.naturalHeight });
  while (dimensions.size > maxSize) {
    const oldest = dimensions.keys().next();
    if (oldest.done) {
      return;
    }
    dimensions.delete(oldest.value);
  }
 }
@@ -242,12 +242,12 @@ export function maybeInvalidateRundownCache(revision: MaybeNumber, rundownId?: s
    return;
  }
  // skip if we dont recognise the ID the revision is lower
  const queryKey = getRundownQueryKey(rundownId);
  const cachedRundown = ontimeQueryClient.getQueryData<{ revision: number }>(queryKey);
-  // we already have this change, or something newer
+  if (revision === cachedRundown?.revision) {
-  // messages can arrive after a refetch has already brought in a later revision
+    // we already have the latest change
  if (revision !== null && cachedRundown !== undefined && revision <= cachedRundown.revision) {
    return;
  }
@@ -4,8 +4,8 @@ import { IoTrashBin } from 'react-icons/io5';
 import { deleteAllReport } from '../../../../common/api/report';
 import { createBlob, downloadBlob } from '../../../../common/api/utils';
 import Button from '../../../../common/components/buttons/Button';
 import { useLoadedRundown } from '../../../../common/hooks-query/useLoadedRundown';
 import useReport from '../../../../common/hooks-query/useReport';
 import useRundown from '../../../../common/hooks-query/useRundown';
 import { cx } from '../../../../common/utils/styleUtils';
 import { formatTime } from '../../../../common/utils/time';
 import * as Panel from '../../panel-utils/PanelUtils';
@@ -15,7 +15,7 @@ import style from './ReportSettings.module.scss';
 export default function ReportSettings() {
  const { data: reportData } = useReport();
-  const { data } = useLoadedRundown();
+  const { data } = useRundown();
  const clearReport = async () => await deleteAllReport();
  const downloadCSV = (combinedReport: CombinedReport[]) => {
@@ -19,8 +19,8 @@ import Dialog from '../../../../common/components/dialog/Dialog';
 import { DropdownMenu } from '../../../../common/components/dropdown-menu/DropdownMenu';
 import Tag from '../../../../common/components/tag/Tag';
 import { useMutateProjectRundowns, useProjectRundowns } from '../../../../common/hooks-query/useProjectRundowns';
 import { useDirectLinkToBackgroundEdit } from '../../../../common/hooks/useRundownSelection';
 import { cx } from '../../../../common/utils/styleUtils';
 import { useDirectLinkToBackgroundEdit } from '../../../../views/cuesheet/useCuesheetRundownSelection';
 import * as Panel from '../../panel-utils/PanelUtils';
 import RundownRenameForm from './composite/RundownRenameForm';
 import { ManageRundownForm } from './ManageRundownForm';
@@ -24,7 +24,7 @@ import Button from '../../../../../common/components/buttons/Button';
 import Info from '../../../../../common/components/info/Info';
 import ExternalLink from '../../../../../common/components/link/external-link/ExternalLink';
 import Modal from '../../../../../common/components/modal/Modal';
-import { useLoadedRundown } from '../../../../../common/hooks-query/useLoadedRundown';
+import useRundown from '../../../../../common/hooks-query/useRundown';
 import { removeFileExtension, validateExcelImport } from '../../../../../common/utils/uploadUtils';
 import * as Panel from '../../../panel-utils/PanelUtils';
 import GSheetSetup from './GSheetSetup';
@@ -59,7 +59,7 @@ export default function SourcesPanel() {
  const [activeSource, setActiveSource] = useState<ActiveSource | null>(null);
  const [completedRundownTitle, setCompletedRundownTitle] = useState('');
-  const { data: currentRundown } = useLoadedRundown();
+  const { data: currentRundown } = useRundown();
  const { applyImport } = useSpreadsheetImport();
  const navigate = useNavigate();
@@ -1,7 +1,7 @@
 import { CustomFields, Rundown, Settings } from 'ontime-types';
 import useCustomFields from '../../common/hooks-query/useCustomFields';
-import { useLoadedRundownWithMetadata } from '../../common/hooks-query/useLoadedRundown';
+import { useRundownWithMetadata } from '../../common/hooks-query/useRundown';
 import useSettings from '../../common/hooks-query/useSettings';
 import { RundownMetadataObject } from '../../common/utils/rundownMetadata';
 import { ViewData, aggregateQueryStatus } from '../../views/utils/viewLoader.utils';
@@ -14,7 +14,7 @@ export interface OperatorData {
 }
 export function useOperatorData(): ViewData<OperatorData> {
-  const { data: rundown, rundownMetadata, status: rundownStatus } = useLoadedRundownWithMetadata();
+  const { data: rundown, rundownMetadata, status: rundownStatus } = useRundownWithMetadata();
  const { data: customFields, status: customFieldStatus } = useCustomFields();
  const { data: settings, status: settingsStatus } = useSettings();
@@ -12,7 +12,7 @@ import {
 } from 'react-icons/tb';
 import Tooltip from '../../../common/components/tooltip/Tooltip';
-import { useLoadedEntry } from '../../../common/hooks-query/useLoadedRundown';
+import { useEntry } from '../../../common/hooks-query/useRundown';
 import { useAutoTickingClock } from '../../../common/hooks/useAutoTickingClock';
 import {
  useCurrentGroupId,
@@ -210,7 +210,7 @@ export function MetadataTimes() {
 function GroupTimes() {
  const { clock, mode, groupExpectedEnd, actualGroupStart, currentDay, playback, phase } = useGroupTimerOverView();
  const currentGroupId = useCurrentGroupId();
-  const group = useLoadedEntry(currentGroupId) as OntimeGroup | null;
+  const group = useEntry(currentGroupId) as OntimeGroup | null;
  const hasRunningTimer = phase !== TimerPhase.Pending && isPlaybackActive(playback);
@@ -266,7 +266,7 @@ function GroupTimes() {
 function FlagTimes() {
  const { clock, mode, actualStart, plannedStart, playback, currentDay, phase } = useFlagTimerOverView();
  const { id, expectedStart } = useNextFlag();
-  const entry = useLoadedEntry(id) as OntimeEvent | null;
+  const entry = useEntry(id) as OntimeEvent | null;
  const hasRunningTimer = phase !== TimerPhase.Pending && isPlaybackActive(playback);
@@ -1,12 +1,12 @@
 import { useLoadedRundownAuxData } from '../../../common/hooks-query/useLoadedRundown';
 import useProjectData from '../../../common/hooks-query/useProjectData';
 import { useRundownAuxData } from '../../../common/hooks-query/useRundown';
 import style from './TitleOverview.module.scss';
 export default function TitleOverview() {
  'use memo';
  const { data: projectData } = useProjectData();
-  const { data: rundownData } = useLoadedRundownAuxData();
+  const { data: rundownData } = useRundownAuxData();
  const projectTitle = projectData.title.trim();
  const rundownTitle = rundownData.title.trim();
@@ -67,11 +67,7 @@ export default function Rundown({ order, flatOrder, entries, id, rundownMetadata
  const { getIsCollapsed, collapseGroup, expandGroup } = useCollapsedGroups(id);
  const entryActions = useEntryActionsContext();
-  const setEntryCopy = useEntryCopy((state) => state.setEntryCopyId);
+  const setEntryCopyId = useEntryCopy((state) => state.setEntryCopyId);
  const setEntryCopyId = useCallback(
    (entryId: EntryId | null, mode?: 'copy' | 'cut') => setEntryCopy(entryId, id, mode),
    [setEntryCopy, id],
  );
  // cursor
  const { editorMode } = useEditorFollowMode();
@@ -5,6 +5,9 @@ import * as Editor from '../../common/components/editor-utils/EditorUtils';
 import ErrorBoundary from '../../common/components/error-boundary/ErrorBoundary';
 import ViewNavigationMenu from '../../common/components/navigation-menu/ViewNavigationMenu';
 import ProtectRoute from '../../common/components/protect-route/ProtectRoute';
 import { EntryActionsProvider } from '../../common/context/EntryActionsContext';
 import { useLoadedRundownSource } from '../../common/hooks-query/useScopedRundown';
 import { useEntryActions } from '../../common/hooks/useEntryAction';
 import { useIsSmallDevice } from '../../common/hooks/useIsSmallDevice';
 import { handleLinks } from '../../common/utils/linkUtils';
 import { cx } from '../../common/utils/styleUtils';
@@ -36,25 +39,28 @@ function RundownExport() {
    defaultValue: RundownViewMode.List,
  });
  const isSmallDevice = useIsSmallDevice();
  const entryActions = useEntryActions();
  if (isSmallDevice && isExtracted) {
    return (
-      <ProtectRoute permission='editor'>
+      <EntryActionsProvider actions={entryActions}>
-        <div
+        <ProtectRoute permission='editor'>
-          className={cx([style.rundownExport, style.extracted])}
+          <div
-          data-target='small-device'
+            className={cx([style.rundownExport, style.extracted])}
-          data-testid='panel-rundown'
+            data-target='small-device'
-        >
+            data-testid='panel-rundown'
-          <FinderPlacement />
+          >
-          <ViewNavigationMenu suppressSettings />
+            <FinderPlacement />
-          <div className={style.rundown}>
+            <ViewNavigationMenu suppressSettings />
-            <ErrorBoundary>
+            <div className={style.rundown}>
-              <RundownRoot isSmallDevice isExtracted viewMode={viewMode} setViewMode={setViewMode} />
+              <ErrorBoundary>
-              <RundownContextMenu />
+                <RundownRoot isSmallDevice isExtracted viewMode={viewMode} setViewMode={setViewMode} />
-            </ErrorBoundary>
+                <RundownContextMenu />
              </ErrorBoundary>
            </div>
          </div>
-        </div>
+        </ProtectRoute>
-      </ProtectRoute>
+      </EntryActionsProvider>
    );
  }
@@ -64,28 +70,30 @@ function RundownExport() {
    viewMode === RundownViewMode.Table;
  return (
-    <ProtectRoute permission='editor'>
+    <EntryActionsProvider actions={entryActions}>
-      <div className={cx([style.rundownExport, isExtracted && style.extracted])} data-testid='panel-rundown'>
+      <ProtectRoute permission='editor'>
-        <FinderPlacement />
+        <div className={cx([style.rundownExport, isExtracted && style.extracted])} data-testid='panel-rundown'>
-        {isExtracted && <ViewNavigationMenu suppressSettings isNavigationLocked={getIsNavigationLocked()} />}
+          <FinderPlacement />
-        <div className={style.rundown}>
+          {isExtracted && <ViewNavigationMenu suppressSettings isNavigationLocked={getIsNavigationLocked()} />}
-          <Editor.Panel className={style.list}>
+          <div className={style.rundown}>
-            <ErrorBoundary>
+            <Editor.Panel className={style.list}>
              {!isExtracted && <Editor.CornerExtract onClick={(event) => handleLinks('rundown', event)} />}
              <RundownRoot isExtracted={isExtracted} viewMode={viewMode} setViewMode={setViewMode} />
              <RundownContextMenu />
            </ErrorBoundary>
          </Editor.Panel>
          {!hideSideBar && (
            <div className={style.side}>
              <ErrorBoundary>
-                <RundownEntryEditor />
+                {!isExtracted && <Editor.CornerExtract onClick={(event) => handleLinks('rundown', event)} />}
                <RundownRoot isExtracted={isExtracted} viewMode={viewMode} setViewMode={setViewMode} />
                <RundownContextMenu />
              </ErrorBoundary>
-            </div>
+            </Editor.Panel>
-          )}
+            {!hideSideBar && (
              <div className={style.side}>
                <ErrorBoundary>
                  <RundownEntryEditor />
                </ErrorBoundary>
              </div>
            )}
          </div>
        </div>
-      </div>
+      </ProtectRoute>
-    </ProtectRoute>
+    </EntryActionsProvider>
  );
 }
@@ -97,6 +105,8 @@ interface RundownRootProps {
 }
 function RundownRoot({ isSmallDevice, isExtracted, viewMode, setViewMode }: RundownRootProps) {
  const source = useLoadedRundownSource();
  return (
    <div className={style.rundownRoot}>
      {isSmallDevice ? (
@@ -105,7 +115,7 @@ function RundownRoot({ isSmallDevice, isExtracted, viewMode, setViewMode }: Rund
        <RundownHeader isExtracted={isExtracted} viewMode={viewMode} setViewMode={setViewMode} />
      )}
      {viewMode === RundownViewMode.List ? <RundownList /> : <RundownTable />}
-      {viewMode === RundownViewMode.Table && <EntryEditModal />}
+      {viewMode === RundownViewMode.Table && <EntryEditModal rundown={source.rundown} />}
      <RenumberCuesDialog />
    </div>
  );
@@ -1,22 +1,15 @@
 import { Playback } from 'ontime-types';
 import { memo } from 'react';
 import EmptyFill from '../../common/components/state/EmptyFill';
 import { useRundownScope } from '../../common/context/RundownScopeContext';
 import { useRundownWithMetadata } from '../../common/hooks-query/useRundown';
 import { useRundownEditor } from '../../common/hooks/useSocket';
 import { useTranslation } from '../../translation/TranslationProvider';
 import Rundown from './Rundown';
 /** a rundown which is not loaded has no playback to follow */
 const idleFeatureData = { playback: Playback.Stop, selectedEventId: null, nextEventId: null };
 export default memo(RundownList);
 function RundownList() {
  const { isLoaded } = useRundownScope();
  const { data, status, rundownMetadata } = useRundownWithMetadata();
-  const runtimeFeatureData = useRundownEditor();
+  const featureData = useRundownEditor();
  const featureData = isLoaded ? runtimeFeatureData : idleFeatureData;
  const { getLocalizedString } = useTranslation();
  // avoid showing the editable empty state before we know whether the rundown is actually empty
@@ -2,7 +2,6 @@ import { type EntryId, type OntimeEntry, type Rundown, SupportedEntry } from 'on
 import { getNextGroupNormal, getNextNormal, getPreviousGroupNormal, getPreviousNormal } from 'ontime-utils';
 import { useCallback } from 'react';
 import { useRundownScope } from '../../../common/context/RundownScopeContext';
 import type { useEntryActions } from '../../../common/hooks/useEntryAction';
 import { useEntryCopy } from '../../../common/stores/entryCopyStore';
 import { SelectionMode } from '../useEventSelection';
@@ -27,7 +26,6 @@ export function useRundownCommands({
  selectEntry: applySelection,
  handleCollapseGroup,
 }: UseRundownCommandsOptions) {
  const { rundownId } = useRundownScope();
  const { addEntry, clone, deleteEntry, move, reorderEntry } = entryActions;
  const deleteAtCursor = useCallback(
@@ -45,17 +43,12 @@ export function useRundownCommands({
  const insertCopyAtId = useCallback(
    (atId: EntryId | null, above = false) => {
      // lazily get the value from the store
-      const { entryCopyId, entryCopyRundownId, entryCopyMode, setEntryCopyId } = useEntryCopy.getState();
+      const { entryCopyId, entryCopyMode, setEntryCopyId } = useEntryCopy.getState();
      if (entryCopyId === null || !entries[entryCopyId]) {
        // we cant clone without selection
        return;
      }
      // pasting into a different rundown needs the entry payload, the server clones within a rundown
      if (entryCopyRundownId !== null && entryCopyRundownId !== rundownId) {
        return;
      }
      let normalisedAtId = atId;
      const elementToCopy = entries[entryCopyId];
@@ -72,7 +65,7 @@ export function useRundownCommands({
            return;
          }
          reorderEntry(entryCopyId, firstId, 'before')
-            .then(() => setEntryCopyId(null, null))
+            .then(() => setEntryCopyId(null))
            .catch(() => {});
          return;
        }
@@ -81,7 +74,7 @@ export function useRundownCommands({
        }
        const placement = above ? 'before' : 'after';
        reorderEntry(entryCopyId, normalisedAtId, placement)
-          .then(() => setEntryCopyId(null, null))
+          .then(() => setEntryCopyId(null))
          .catch(() => {});
        return;
      }
@@ -92,7 +85,7 @@ export function useRundownCommands({
        before: above ? (normalisedAtId ?? undefined) : undefined,
      });
    },
-    [entries, flatOrder, clone, reorderEntry, rundownId],
+    [entries, flatOrder, clone, reorderEntry],
  );
  /**
@@ -1,6 +1,9 @@
 import { memo, useEffect, useMemo } from 'react';
 import { EntryActionsProvider } from '../../../common/context/EntryActionsContext';
 import useCustomFields from '../../../common/hooks-query/useCustomFields';
 import { useLoadedRundownSource } from '../../../common/hooks-query/useScopedRundown';
 import { useEntryActions } from '../../../common/hooks/useEntryAction';
 import CuesheetDnd from '../../../views/cuesheet/cuesheet-dnd/CuesheetDnd';
 import CuesheetTable from '../../../views/cuesheet/cuesheet-table/CuesheetTable';
 import { useCuesheetPermissions } from '../../../views/cuesheet/useTablePermissions';
@@ -12,6 +15,8 @@ function RundownTable() {
  const { data: customFields } = useCustomFields();
  const setPermissions = useCuesheetPermissions((state) => state.setPermissions);
  const { editorMode } = useEditorFollowMode();
  const source = useLoadedRundownSource();
  const actions = useEntryActions();
  // Editor always has full permissions
  useEffect(() => {
@@ -27,8 +32,10 @@ function RundownTable() {
  const columns = useMemo(() => makeRundownColumns(customFields), [customFields]);
  return (
-    <CuesheetDnd columns={columns} tableRoot='editor'>
+    <EntryActionsProvider actions={actions}>
-      <CuesheetTable columns={columns} cuesheetMode={editorMode} tableRoot='editor' />
+      <CuesheetDnd columns={columns} tableRoot='editor'>
-    </CuesheetDnd>
+        <CuesheetTable columns={columns} source={source} cuesheetMode={editorMode} tableRoot='editor' />
      </CuesheetDnd>
    </EntryActionsProvider>
  );
 }
@@ -1,15 +1,155 @@
-import { useStore } from 'zustand';
+import { EntryId, MaybeNumber, ProjectRundownsList, Rundown, isOntimeEvent } from 'ontime-types';
 import { MouseEvent } from 'react';
 import { create } from 'zustand';
-import { useRundownScope } from '../../common/context/RundownScopeContext';
+import { PROJECT_RUNDOWNS, getRundownQueryKey } from '../../common/api/constants';
-import type { EventSelectionStore } from '../../common/stores/eventSelectionStore';
+import { ontimeQueryClient } from '../../common/queryClient';
 import { isMacOS } from '../../common/utils/deviceUtils';
-export { getSelectionMode } from '../../common/stores/eventSelectionStore';
+export type SelectionMode = 'shift' | 'click' | 'ctrl';
-export type { SelectionMode } from '../../common/stores/eventSelectionStore';
+
 interface EventSelectionStore {
  selectedEvents: Set<EntryId>;
  anchoredIndex: MaybeNumber;
  cursor: EntryId | null;
  entryMode: 'event' | 'single' | null;
  scrollHandler: ((id: EntryId) => void) | null;
  setSingleEntrySelection: (selectionArgs: { id: EntryId }) => void;
  setSelectedEvents: (selectionArgs: { id: EntryId; index: number; selectMode: SelectionMode }) => void;
  clearSelectedEvents: () => void;
  clearMultiSelect: () => void;
  unselect: (id: EntryId) => void;
  setScrollHandler: (handler: ((id: EntryId) => void) | null) => void;
  scrollToEntry: (id: EntryId) => void;
 }
 /**
- * Selection and cursor for the rundown of the enclosing scope
+ * Keeps track of the selected entries and selection mode
 * Provides methods to update the selection based on user interactions
 */
-export function useEventSelection<T>(selector: (state: EventSelectionStore) => T): T {
+export const useEventSelection = create<EventSelectionStore>()((set, get) => ({
-  const { selectionStore } = useRundownScope();
+  selectedEvents: new Set(),
-  return useStore(selectionStore, selector);
+  anchoredIndex: null,
  cursor: null,
  entryMode: null,
  scrollHandler: null,
  setSingleEntrySelection: ({ id }) => {
    set({ selectedEvents: new Set([id]), anchoredIndex: null, cursor: id, entryMode: 'single' });
  },
  setSelectedEvents: ({ id, index, selectMode }) => {
    const { selectedEvents, anchoredIndex, entryMode } = get();
    // if we are in single mode, we replace the selection and change the mode
    if (entryMode === 'single') {
      return set({ selectedEvents: new Set([id]), anchoredIndex: index, cursor: id, entryMode: 'event' });
    }
    // on click, we replace selection with event
    if (selectMode === 'click') {
      return set({ selectedEvents: new Set([id]), anchoredIndex: index, cursor: id, entryMode: 'event' });
    }
    // on ctrl + click, we toggle the selection of that event
    if (selectMode === 'ctrl') {
      const rundownData = getLoadedRundownData();
      if (!rundownData) return;
      // if it doesnt exist, simply add to the list and set an anchor
      if (!selectedEvents.has(id)) {
        return set({
          selectedEvents: selectedEvents.add(id),
          anchoredIndex: index,
          cursor: id,
          entryMode: 'event',
        });
      }
      // if event is already selected, we remove it from selection
      // and set the anchor to the event after
      selectedEvents.delete(id);
      const nextIndex = rundownData.order.findIndex(
        (eventId, i) => i > index && isOntimeEvent(rundownData.entries[eventId]) && selectedEvents.has(eventId),
      );
      // if we didnt find anything after, set the anchor to the last event
      return set({
        selectedEvents,
        anchoredIndex: nextIndex < 0 ? rundownData.order.length - 1 : nextIndex,
        entryMode: 'event',
      });
    }
    // on shift + click, we select a range of events up to the clicked event
    if (selectMode === 'shift') {
      const rundownData = getLoadedRundownData();
      if (!rundownData) return;
      // get list of rundown with only ontime events
      const eventIds: EntryId[] = [];
      rundownData.flatOrder.forEach((eventId) => {
        const event = rundownData.entries[eventId];
        if (isOntimeEvent(event)) {
          eventIds.push(event.id);
        }
      });
      const start = anchoredIndex === null ? 0 : Math.min(anchoredIndex, index);
      const end = anchoredIndex === null ? index : Math.max(anchoredIndex, index + 1);
      // create new set with range of ids from start to end
      const selectedEventIds = eventIds.slice(start, end);
      return set({
        selectedEvents: new Set([...selectedEvents, ...selectedEventIds]),
        anchoredIndex: index,
        entryMode: 'event',
      });
    }
  },
  clearSelectedEvents: () => set({ selectedEvents: new Set(), anchoredIndex: null, cursor: null, entryMode: null }),
  clearMultiSelect: () => {
    const { selectedEvents } = get();
    const [firstSelected] = selectedEvents;
    set({
      selectedEvents: new Set(firstSelected ? [firstSelected] : []),
      anchoredIndex: null,
      entryMode: null,
    });
  },
  unselect: (id: string) => {
    const { entryMode, selectedEvents } = get();
    selectedEvents.delete(id);
    set({
      selectedEvents,
      entryMode: selectedEvents.size === 0 ? null : entryMode,
    });
  },
  // Sets the scroll handler for programmatic scrolling to entries
  setScrollHandler: (handler) => set({ scrollHandler: handler }),
  // Scrolls to the specified entry using the registered scroll handler
  scrollToEntry: (id: EntryId) => {
    const handler = get().scrollHandler;
    if (handler) {
      handler(id);
    }
  },
 }));
 function getLoadedRundownData() {
  const rundownId = ontimeQueryClient.getQueryData<ProjectRundownsList>(PROJECT_RUNDOWNS)?.loaded;
  if (!rundownId) return undefined;
  return ontimeQueryClient.getQueryData<Rundown>(getRundownQueryKey(rundownId));
 }
 export function getSelectionMode(event: MouseEvent): SelectionMode {
  if ((isMacOS() && event.metaKey) || event.ctrlKey) {
    return 'ctrl';
  }
  if (event.shiftKey) {
    return 'shift';
  }
  return 'click';
 }
@@ -1,7 +1,6 @@
 import { EntryId, MaybeString } from 'ontime-types';
 import { useCallback } from 'react';
 import { useRundownScope } from '../../common/context/RundownScopeContext';
 import { useCollapsedGroups } from './useCollapsedGroups';
 import { useEventSelection } from './useEventSelection';
@@ -11,8 +10,7 @@ type SelectAndRevealOptions = {
  parent?: MaybeString;
 };
-export function useSelectAndRevealEntry() {
+export function useSelectAndRevealEntry(rundownId: string) {
  const { rundownId } = useRundownScope();
  const { expandGroup } = useCollapsedGroups(rundownId);
  const selectEntry = useEventSelection((state) => state.setSelectedEvents);
  const scrollToEntry = useEventSelection((state) => state.scrollToEntry);
@@ -1,8 +1,8 @@
 import { CustomFields, OntimeEntry, ProjectData, Settings } from 'ontime-types';
 import useCustomFields from '../../common/hooks-query/useCustomFields';
 import { useLoadedFlatRundown } from '../../common/hooks-query/useLoadedRundown';
 import useProjectData from '../../common/hooks-query/useProjectData';
 import { useFlatRundown } from '../../common/hooks-query/useRundown';
 import useSettings from '../../common/hooks-query/useSettings';
 import { useViewOptionsStore } from '../../common/stores/viewOptions';
 import { ViewData, aggregateQueryStatus } from '../utils/viewLoader.utils';
@@ -20,7 +20,7 @@ export function useBackstageData(): ViewData<BackstageData> {
  const isMirrored = useViewOptionsStore((state) => state.mirror);
  // HTTP API data
-  const { data: rundownData, status: rundownStatus } = useLoadedFlatRundown();
+  const { data: rundownData, status: rundownStatus } = useFlatRundown();
  const { data: projectData, status: projectDataStatus } = useProjectData();
  const { data: settings, status: settingsStatus } = useSettings();
  const { data: customFields, status: customFieldsStatus } = useCustomFields();
@@ -12,7 +12,7 @@ import {
  useState,
 } from 'react';
-import { useLoadedPartialRundown } from '../../../common/hooks-query/useLoadedRundown';
+import { usePartialRundown } from '../../../common/hooks-query/useRundown';
 import { ExtendedEntry } from '../../../common/utils/rundownMetadata';
 import { useScheduleOptions } from './schedule.options';
@@ -45,7 +45,7 @@ export const ScheduleProvider = ({ children, selectedEventId }: PropsWithChildre
    [filter],
  );
-  const { data: events } = useLoadedPartialRundown(filterCallback);
+  const { data: events } = usePartialRundown(filterCallback);
  const [firstIndex, setFirstIndex] = useState(-1);
  const [numPages, setNumPages] = useState(0);
@@ -1,8 +1,8 @@
 import { CustomFields, OntimeEntry, ProjectData, Settings } from 'ontime-types';
 import useCustomFields from '../../common/hooks-query/useCustomFields';
 import { useLoadedFlatRundownWithMetadata } from '../../common/hooks-query/useLoadedRundown';
 import useProjectData from '../../common/hooks-query/useProjectData';
 import { useFlatRundownWithMetadata } from '../../common/hooks-query/useRundown';
 import useSettings from '../../common/hooks-query/useSettings';
 import { useViewOptionsStore } from '../../common/stores/viewOptions';
 import { ExtendedEntry } from '../../common/utils/rundownMetadata';
@@ -21,7 +21,7 @@ export function useCountdownData(): ViewData<CountdownData> {
  const isMirrored = useViewOptionsStore((state) => state.mirror);
  // HTTP API data
-  const { data: rundownData, status: rundownStatus } = useLoadedFlatRundownWithMetadata();
+  const { data: rundownData, status: rundownStatus } = useFlatRundownWithMetadata();
  const { data: projectData, status: projectDataStatus } = useProjectData();
  const { data: settings, status: settingsStatus } = useSettings();
  const { data: customFields, status: customFieldsStatus } = useCustomFields();
@@ -3,31 +3,35 @@ import { IoApps } from 'react-icons/io5';
 import IconButton from '../../common/components/buttons/IconButton';
 import NavigationMenu from '../../common/components/navigation-menu/NavigationMenu';
-import { EditableRundownScopeProvider } from '../../common/context/EditableRundownScopeProvider';
+import { EntryActionsProvider } from '../../common/context/EntryActionsContext';
-import { useRundownSelection } from '../../common/hooks/useRundownSelection';
+import { useScopedRundown } from '../../common/hooks-query/useScopedRundown';
 import { useScopedEntryActions } from '../../common/hooks/useEntryAction';
 import { useWindowTitle } from '../../common/hooks/useWindowTitle';
 import { getIsNavigationLocked } from '../../externals';
 import CuesheetOverview from '../../features/overview/CuesheetOverview';
 import EntryEditModal from './cuesheet-edit-modal/EntryEditModal';
 import CuesheetProgress from './cuesheet-progress/CuesheetProgress';
 import CuesheetTableWrapper from './CuesheetTableWrapper';
 import { FOLLOW_LOADED_RUNDOWN_ID, useCuesheetRundownSelection } from './useCuesheetRundownSelection';
 import styles from './CuesheetPage.module.scss';
 export default function CuesheetPage() {
  'use memo';
  const [isMenuOpen, menuHandler] = useDisclosure();
-  const { scopedRundownId, selectedRundownId, loadedRundownId, setSelectedRundownId, projectRundowns } =
+  const { selectedRundownId, loadedRundownId, setSelectedRundownId, projectRundowns } = useCuesheetRundownSelection();
-    useRundownSelection('cuesheet');
+  const source = useScopedRundown(selectedRundownId === FOLLOW_LOADED_RUNDOWN_ID ? loadedRundownId : selectedRundownId);
  const actions = useScopedEntryActions(source.rundownId);
  useWindowTitle('Cuesheet');
  const isLocked = getIsNavigationLocked();
  return (
-    <EditableRundownScopeProvider rundownId={scopedRundownId}>
+    <EntryActionsProvider actions={actions}>
      <NavigationMenu isOpen={isMenuOpen} onClose={menuHandler.close} />
-      <EntryEditModal />
+      <EntryEditModal rundown={source.rundown} />
      <div className={styles.tableWrapper} data-testid='cuesheet'>
        <CuesheetOverview>
          {!isLocked && (
@@ -38,12 +42,13 @@ export default function CuesheetPage() {
        </CuesheetOverview>
        <CuesheetProgress />
        <CuesheetTableWrapper
          source={source}
          selectedRundownId={selectedRundownId}
          loadedRundownId={loadedRundownId}
          setSelectedRundownId={setSelectedRundownId}
          projectRundowns={projectRundowns}
        />
      </div>
-    </EditableRundownScopeProvider>
+    </EntryActionsProvider>
  );
 }
@@ -3,18 +3,19 @@ import { memo, use, useMemo } from 'react';
 import Select from '../../common/components/select/Select';
 import { PresetContext } from '../../common/context/PresetContext';
 import { useRundownScope } from '../../common/context/RundownScopeContext';
 import useCustomFields from '../../common/hooks-query/useCustomFields';
-import { FOLLOW_LOADED_RUNDOWN_ID } from '../../common/hooks/useRundownSelection';
+import type { RundownSource } from '../../common/hooks-query/useScopedRundown';
 import { AppMode } from '../../ontimeConfig';
 import CuesheetDnd from './cuesheet-dnd/CuesheetDnd';
 import { makeCuesheetColumns } from './cuesheet-table/cuesheet-table-elements/cuesheetColsFactory';
 import CuesheetTable from './cuesheet-table/CuesheetTable';
 import { useApplyCuesheetPolicy } from './useApplyCuesheetPolicy';
 import { FOLLOW_LOADED_RUNDOWN_ID } from './useCuesheetRundownSelection';
 import styles from './CuesheetPage.module.scss';
 interface CuesheetTableWrapperProps {
  source: RundownSource;
  selectedRundownId: MaybeString;
  loadedRundownId: string;
  setSelectedRundownId: (rundownId: string) => void;
@@ -23,14 +24,15 @@ interface CuesheetTableWrapperProps {
 export default memo(CuesheetTableWrapper);
 function CuesheetTableWrapper({
  source,
  selectedRundownId,
  setSelectedRundownId,
  loadedRundownId,
  projectRundowns,
 }: CuesheetTableWrapperProps) {
  const preset = use(PresetContext);
-  const { isLoaded } = useRundownScope();
+  const isCurrentRundown = source.rundownId !== null && source.rundownId === loadedRundownId;
-  const { cuesheetMode, setCuesheetMode } = useApplyCuesheetPolicy(preset, { canRunMode: isLoaded });
+  const { cuesheetMode, setCuesheetMode } = useApplyCuesheetPolicy(preset, { canRunMode: isCurrentRundown });
  const { data: customFields } = useCustomFields();
  const columns = useMemo(
@@ -42,9 +44,11 @@ function CuesheetTableWrapper({
    <CuesheetDnd columns={columns}>
      <CuesheetTable
        columns={columns}
        source={source}
        cuesheetMode={cuesheetMode}
        tableRoot='cuesheet'
        setCuesheetMode={setCuesheetMode}
        isCurrentRundown={isCurrentRundown}
        insertElement={
          <>
            <RundownSelect
@@ -0,0 +1,18 @@
 import { isValidImageSource } from '../cuesheet-table/cuesheet-table-elements/EditableImage';
 test('An image is referenced by link, anything else is rejected', () => {
  const testCases = [
    { value: 'https://example.com/image.png', isValid: true },
    { value: 'http://example.com/image.png', isValid: true },
    // a file is local to the machine running ontime, it would not resolve for the clients we serve
    { value: '/user/image.png', isValid: false },
    { value: 'file:///Users/me/image.png', isValid: false },
    { value: 'C:\\images\\image.png', isValid: false },
    // values which do not describe a location we can reach
    { value: 'www.example.com/image.png', isValid: false },
    { value: 'https://', isValid: false },
    { value: 'some text', isValid: false },
  ];
  testCases.forEach((t) => expect(isValidImageSource(t.value)).toBe(t.isValid));
 });
@@ -1,13 +1,13 @@
 import {
  FOLLOW_LOADED_RUNDOWN_ID,
-  getRundownSelectionStorageKey,
+  getCuesheetRundownStorageKey,
  resolveSelectedRundownId,
-} from '../useRundownSelection';
+} from '../useCuesheetRundownSelection';
-describe('useRundownSelection helpers', () => {
+describe('useCuesheetRundownSelection helpers', () => {
-  it('builds a namespace and project scoped storage key', () => {
+  it('builds a project-scoped storage key', () => {
-    expect(getRundownSelectionStorageKey('cuesheet', 'http://localhost:4001', 'My Project')).toBe(
+    expect(getCuesheetRundownStorageKey('http://localhost:4001', 'My Project')).toBe(
-      'rundown-selection:cuesheet:http://localhost:4001:My Project',
+      'cuesheet-selected-rundown:http://localhost:4001:My Project',
    );
  });
@@ -1,13 +1,16 @@
 import { Rundown } from 'ontime-types';
 import { memo } from 'react';
 import Modal from '../../../common/components/modal/Modal';
 import useRundown from '../../../common/hooks-query/useRundown';
 import CuesheetEntryEditor from '../../../features/rundown/entry-editor/CuesheetEventEditor';
 import { useEditModal } from './useEditModal';
 interface EntryEditModalProps {
  rundown: Rundown;
 }
 export default memo(EntryEditModal);
-function EntryEditModal() {
+function EntryEditModal({ rundown }: EntryEditModalProps) {
  const { data: rundown } = useRundown();
  const entryId = useEditModal((state) => state.selectedEntryId);
  const closeModal = useEditModal((state) => state.clearSelection);
@@ -14,8 +14,7 @@ import {
 import EmptyFill from '../../../common/components/state/EmptyFill';
 import EmptyTableBody from '../../../common/components/state/EmptyTableBody';
 import { useEntryActionsContext } from '../../../common/context/EntryActionsContext';
-import { useRundownScope } from '../../../common/context/RundownScopeContext';
+import type { RundownSource } from '../../../common/hooks-query/useScopedRundown';
 import { useFlatRundownWithMetadata, useScopedSelectedEventId } from '../../../common/hooks-query/useRundown';
 import type { ExtendedEntry } from '../../../common/utils/rundownMetadata';
 import { usePersistedRundownOptions } from '../../../features/rundown/rundown.options';
 import { useEventSelection } from '../../../features/rundown/useEventSelection';
@@ -42,17 +41,20 @@ import style from './CuesheetTable.module.scss';
 type CuesheetTableBaseProps = {
  columns: CuesheetColumnDef[];
  cuesheetMode: AppMode;
  source: RundownSource;
  insertElement?: ReactNode;
 };
 type EditorCuesheetTableProps = CuesheetTableBaseProps & {
  tableRoot: 'editor';
  setCuesheetMode?: undefined;
  isCurrentRundown?: undefined;
 };
 type ViewCuesheetTableProps = CuesheetTableBaseProps & {
  tableRoot: 'cuesheet';
  setCuesheetMode: (mode: AppMode) => void;
  isCurrentRundown?: boolean;
 };
 type CuesheetTableProps = EditorCuesheetTableProps | ViewCuesheetTableProps;
@@ -60,13 +62,13 @@ type CuesheetTableProps = EditorCuesheetTableProps | ViewCuesheetTableProps;
 export default function CuesheetTable({
  columns,
  cuesheetMode,
  source,
  tableRoot,
  setCuesheetMode,
  isCurrentRundown,
  insertElement,
 }: CuesheetTableProps) {
-  const { isLoaded: isCurrentRundown } = useRundownScope();
+  const { flatRundown, status, selectedEventId } = source;
  const { data: flatRundown, status } = useFlatRundownWithMetadata();
  const selectedEventId = useScopedSelectedEventId();
  const { updateEntry, updateTimer, addEntry } = useEntryActionsContext();
  const { getLocalizedString } = useTranslation();
  const canCreateEntries = useCuesheetPermissions((state) => state.canCreateEntries) && cuesheetMode === AppMode.Edit;
@@ -5,6 +5,19 @@
  &:not(:read-only):hover::placeholder {
    opacity: 1;
  }
  &[data-invalid] {
    outline: 1px solid $red-500;
  }
 }
 /** feedback on a value we cannot use, either rejected or failed to load */
 .message {
  display: block;
  padding: 0.25rem 0;
  color: $red-500;
  font-size: calc(1rem - 3px);
  line-height: 1.2;
 }
 .imageCell {
@@ -1,27 +1,54 @@
-import { memo } from 'react';
+import { memo, useState } from 'react';
 import Button from '../../../../common/components/buttons/Button';
 import Input from '../../../../common/components/input/input/Input';
 import { getRememberedDimensions, rememberDimensions } from '../../../../common/utils/imageDimensions';
 import style from './EditableImage.module.scss';
 interface EditableImageProps {
  initialValue: string;
  fieldLabel: string;
  readOnly?: boolean;
  updateValue: (newValue: string) => void;
 }
 export default memo(EditableImage);
-function EditableImage({ initialValue, readOnly, updateValue }: EditableImageProps) {
+/**
 * Images are referenced by link: anything local to the machine running ontime
 * would not resolve for the clients we serve the cuesheet to
 */
 export function isValidImageSource(value: string): boolean {
  try {
    const url = new URL(value);
    return url.protocol === 'http:' || url.protocol === 'https:';
  } catch {
    return false;
  }
 }
 function EditableImage({ initialValue, fieldLabel, readOnly, updateValue }: EditableImageProps) {
  const [isRejected, setIsRejected] = useState(false);
  /** we keep track of the source itself, so that the state follows the value being shown */
  const [failedSource, setFailedSource] = useState<string | null>(null);
  const [loadedSource, setLoadedSource] = useState<string | null>(null);
  const handleUpdate = (newValue: string) => {
-    if (newValue === initialValue) {
+    const value = newValue.trim();
    if (value === initialValue) {
      setIsRejected(false);
      return;
    }
-    if (newValue !== '' && !newValue.startsWith('http')) {
+
    if (value !== '' && !isValidImageSource(value)) {
      setIsRejected(true);
      return;
    }
-    updateValue(newValue);
+
    setIsRejected(false);
    updateValue(value);
  };
  const openInNewTab = () => {
@@ -36,22 +63,42 @@ function EditableImage({ initialValue, readOnly, updateValue }: EditableImagePro
  if (!initialValue) {
    return (
-      <Input
+      <>
-        variant='ghosted'
+        <Input
-        className={style.imageInput}
+          variant='ghosted'
-        fluid
+          className={style.imageInput}
-        placeholder='Paste image URL'
+          fluid
-        onBlur={(event) => handleUpdate(event.currentTarget.value)}
+          placeholder='Paste image URL'
-        onKeyDown={(event) => {
+          data-invalid={isRejected || undefined}
-          if (event.key === 'Enter') {
+          onChange={() => setIsRejected(false)}
-            handleUpdate(event.currentTarget.value);
+          onBlur={(event) => handleUpdate(event.currentTarget.value)}
-          }
+          onKeyDown={(event) => {
-        }}
+            if (event.key === 'Enter') {
-        defaultValue={initialValue}
+              handleUpdate(event.currentTarget.value);
-      />
+            }
          }}
        />
        {isRejected && <span className={style.message}>Images are referenced by link (https://...)</span>}
      </>
    );
  }
  /**
   * The cuesheet is virtualised: rows are unmounted once they leave the viewport.
   * When the row comes back, we reserve the space the image took
   * so that the table does not shift while the browser makes it available.
   * The reservation is given in CSS so that it follows the column being resized,
   * the same way the image itself does once it is shown.
   */
  const knownDimensions = getRememberedDimensions(initialValue);
  const isLoaded = loadedSource === initialValue;
  const reservedSpace = knownDimensions
    ? {
        aspectRatio: knownDimensions.width / knownDimensions.height,
        width: `min(100%, ${knownDimensions.width}px)`,
      }
    : undefined;
  return (
    <div className={style.imageCell}>
      {!readOnly && (
@@ -62,7 +109,22 @@ function EditableImage({ initialValue, readOnly, updateValue }: EditableImagePro
          </Button>
        </div>
      )}
-      {Boolean(initialValue) && <img loading='lazy' src={initialValue} className={style.image} />}
+      {failedSource === initialValue ? (
        <span className={style.message}>Could not load image</span>
      ) : (
        <img
          src={initialValue}
          alt={fieldLabel}
          className={style.image}
          onLoad={(event) => {
            rememberDimensions(initialValue, event.currentTarget);
            setLoadedSource(initialValue);
          }}
          onError={() => setFailedSource(initialValue)}
          /** until the image is available, we reserve the space it took the last time we saw it */
          style={isLoaded ? undefined : reservedSpace}
        />
      )}
    </div>
  );
 }
@@ -175,7 +175,14 @@ function LazyImage({ row, column, table }: CuesheetCellContext) {
  const canWrite = column.columnDef.meta?.canWrite;
  const initialValue = event.custom[column.id];
-  return <EditableImage initialValue={initialValue} updateValue={update} readOnly={!canWrite} />;
+  return (
    <EditableImage
      initialValue={initialValue}
      fieldLabel={getColumnLabel(column)}
      updateValue={update}
      readOnly={!canWrite}
    />
  );
 }
 function MakeSingleLineField({ row, column, table }: CuesheetCellContext) {
@@ -2,21 +2,14 @@ import { useSessionStorage } from '@mantine/hooks';
 import { startTransition, useCallback, useMemo } from 'react';
 import { useNavigate } from 'react-router';
 import { useOrderedProjectList } from '../../common/hooks-query/useProjectList';
 import { useProjectRundowns } from '../../common/hooks-query/useProjectRundowns';
 import { serverURL } from '../../externals';
 import { useOrderedProjectList } from '../hooks-query/useProjectList';
 import { useProjectRundowns } from '../hooks-query/useProjectRundowns';
 export const FOLLOW_LOADED_RUNDOWN_ID = '__follow-loaded__' as const;
-/** each surface keeps its own selection, so panels can point at different rundowns */
+export function getCuesheetRundownStorageKey(server: string, projectFilename: string) {
-export type RundownSelectionNamespace = 'cuesheet';
+  return `cuesheet-selected-rundown:${server}:${projectFilename}`;
 export function getRundownSelectionStorageKey(
  namespace: RundownSelectionNamespace,
  server: string,
  projectFilename: string,
 ) {
  return `rundown-selection:${namespace}:${server}:${projectFilename}`;
 }
 export function resolveSelectedRundownId(storedSelectedRundownId: string | null, availableRundownIds: Set<string>) {
@@ -24,22 +17,14 @@ export function resolveSelectedRundownId(storedSelectedRundownId: string | null,
  return FOLLOW_LOADED_RUNDOWN_ID;
 }
-/**
+export function useCuesheetRundownSelection() {
 * Persisted choice of which rundown a surface operates on.
 * The resolved id is meant to be handed to a rundown scope provider,
 * where null means follow whichever rundown is loaded.
 */
 export function useRundownSelection(namespace: RundownSelectionNamespace) {
  'use memo';
  const { data: projectRundowns } = useProjectRundowns();
  const {
    data: { lastLoadedProject },
  } = useOrderedProjectList();
-  const storageKey = useMemo(
+  const storageKey = useMemo(() => getCuesheetRundownStorageKey(serverURL, lastLoadedProject), [lastLoadedProject]);
    () => getRundownSelectionStorageKey(namespace, serverURL, lastLoadedProject),
    [namespace, lastLoadedProject],
  );
  const [storedSelectedRundownId, setStoredSelectedRundownId] = useSessionStorage<string | null>({
    key: storageKey,
    defaultValue: FOLLOW_LOADED_RUNDOWN_ID,
@@ -53,8 +38,6 @@ export function useRundownSelection(namespace: RundownSelectionNamespace) {
  return {
    loadedRundownId,
    selectedRundownId,
    /** id for the rundown scope, null follows the loaded rundown */
    scopedRundownId: selectedRundownId === FOLLOW_LOADED_RUNDOWN_ID ? null : selectedRundownId,
    projectRundowns: projectRundowns.rundowns,
    setSelectedRundownId: (rundownId: string) => {
      startTransition(() => {
@@ -69,7 +52,7 @@ export function useDirectLinkToBackgroundEdit() {
    data: { lastLoadedProject },
  } = useOrderedProjectList();
  const navigate = useNavigate();
-  const storageKey = getRundownSelectionStorageKey('cuesheet', serverURL, lastLoadedProject);
+  const storageKey = getCuesheetRundownStorageKey(serverURL, lastLoadedProject);
  const [_, setStoredSelectedRundownId] = useSessionStorage<string | null>({ key: storageKey, defaultValue: null });
  return useCallback(
@@ -1,6 +1,5 @@
 import { lazy } from 'react';
 import { EditableRundownScopeProvider } from '../../common/context/EditableRundownScopeProvider';
 import TrackingPlaybackBar from '../../features/control/playback/tracking-playback-bar/TrackingPlaybackBar';
 import { AppMode } from '../../ontimeConfig';
 import TitleList from './title-list/TitleList';
@@ -22,9 +21,7 @@ export default function Editor() {
          <TimerControl />
          <MessageControl />
        </div>
-        <EditableRundownScopeProvider rundownId={null}>
+        <Rundown />
          <Rundown />
        </EditableRundownScopeProvider>
      </div>
    );
  }
@@ -32,17 +29,14 @@ export default function Editor() {
  if (layoutMode === EditorLayoutMode.TRACKING) {
    return (
      <div id='panels' className={`${styles.panelContainer} ${styles.panelContainerTracking}`}>
-        {/* the titles and the rundown share a scope, so they follow one cursor */}
+        <div className={styles.rundownLayout}>
-        <EditableRundownScopeProvider rundownId={null}>
+          <div className={styles.titlesPanel}>
-          <div className={styles.rundownLayout}>
+            <TitleList mode={AppMode.Run} />
            <div className={styles.titlesPanel}>
              <TitleList mode={AppMode.Run} />
            </div>
            <div className={styles.rundownPanel}>
              <Rundown />
            </div>
          </div>
-        </EditableRundownScopeProvider>
+          <div className={styles.rundownPanel}>
            <Rundown />
          </div>
        </div>
        <TrackingPlaybackBar />
      </div>
    );
@@ -50,16 +44,14 @@ export default function Editor() {
  return (
    <div id='panels' className={styles.panelContainer}>
-      <EditableRundownScopeProvider rundownId={null}>
+      <div className={styles.rundownLayout}>
-        <div className={styles.rundownLayout}>
+        <div className={styles.titlesPanel}>
-          <div className={styles.titlesPanel}>
+          <TitleList mode={AppMode.Edit} />
            <TitleList mode={AppMode.Edit} />
          </div>
          <div className={styles.rundownPanel}>
            <Rundown />
          </div>
        </div>
-      </EditableRundownScopeProvider>
+        <div className={styles.rundownPanel}>
          <Rundown />
        </div>
      </div>
    </div>
  );
 }
@@ -207,10 +207,10 @@ export function searchByText(
 * @param activeFilter - a field selected from the filter badges, if any
 */
 export default function useFinder(searchValue: string, activeFilter: MaybeString) {
-  const { data } = useFlatRundown();
+  const { data, rundownId } = useFlatRundown();
  const { data: customFields } = useCustomFields();
-  const selectAndRevealEntry = useSelectAndRevealEntry();
+  const selectAndRevealEntry = useSelectAndRevealEntry(rundownId);
  /** The filters offered to the user: the fixed fields plus whatever the project defines */
  const filters = useMemo<FinderFilter[]>(() => {
@@ -46,6 +46,7 @@ export default function TitleList({ mode }: TitleListProps) {
      eventData={eventData}
      selectedEventId={selectedEventId}
      resolvedFollowEventId={resolvedFollowEventId}
      rundownId={rundown.id}
    />
  );
 }
@@ -55,14 +56,21 @@ interface TitleListContentProps {
  eventData: ExtendedEntry<OntimeEvent>[];
  selectedEventId: string | null;
  resolvedFollowEventId: string | null;
  rundownId: string;
 }
-function TitleListContent({ mode, eventData, selectedEventId, resolvedFollowEventId }: TitleListContentProps) {
+function TitleListContent({
  mode,
  eventData,
  selectedEventId,
  resolvedFollowEventId,
  rundownId,
 }: TitleListContentProps) {
  'use memo';
  const virtuosoRef = useRef<VirtuosoHandle | null>(null);
  const scrollParentRef = useRef<HTMLDivElement | null>(null);
-  const selectAndRevealEntry = useSelectAndRevealEntry();
+  const selectAndRevealEntry = useSelectAndRevealEntry(rundownId);
  // Calculate current event info
  const currentEventInfo = useMemo(() => {
@@ -1,8 +1,8 @@
 import { CustomFields, OntimeEntry, ProjectData, Settings } from 'ontime-types';
 import useCustomFields from '../../common/hooks-query/useCustomFields';
 import { useLoadedFlatRundownWithMetadata } from '../../common/hooks-query/useLoadedRundown';
 import useProjectData from '../../common/hooks-query/useProjectData';
 import { useFlatRundownWithMetadata } from '../../common/hooks-query/useRundown';
 import useSettings from '../../common/hooks-query/useSettings';
 import { ExtendedEntry } from '../../common/utils/rundownMetadata';
 import { ViewData, aggregateQueryStatus } from '../utils/viewLoader.utils';
@@ -16,7 +16,7 @@ export interface TimelineData {
 export function useTimelineData(): ViewData<TimelineData> {
  // HTTP API data
-  const { data: rundownData, status: rundownStatus } = useLoadedFlatRundownWithMetadata();
+  const { data: rundownData, status: rundownStatus } = useFlatRundownWithMetadata();
  const { data: projectData, status: projectDataStatus } = useProjectData();
  const { data: settings, status: settingsStatus } = useSettings();
  const { data: customFields, status: customFieldsStatus } = useCustomFields();
@@ -1,8 +1,8 @@
 import { CustomFields, ProjectData, RundownEntries, Settings, ViewSettings } from 'ontime-types';
 import useCustomFields from '../../common/hooks-query/useCustomFields';
 import { useLoadedRundown } from '../../common/hooks-query/useLoadedRundown';
 import useProjectData from '../../common/hooks-query/useProjectData';
 import useRundown from '../../common/hooks-query/useRundown';
 import useSettings from '../../common/hooks-query/useSettings';
 import useViewSettings from '../../common/hooks-query/useViewSettings';
 import { useViewOptionsStore } from '../../common/stores/viewOptions';
@@ -26,7 +26,7 @@ export function useTimerData(): ViewData<TimerData> {
  const { data: viewSettings, status: viewSettingsStatus } = useViewSettings();
  const { data: settings, status: settingsStatus } = useSettings();
  const { data: customFields, status: customFieldsStatus } = useCustomFields();
-  const { data: rundown, status: rundownStatus } = useLoadedRundown();
+  const { data: rundown, status: rundownStatus } = useRundown();
  const { entries } = rundown;
  return {
@@ -1718,18 +1718,16 @@ describe('rundownMutation.swap()', () => {
    expect((testRundown.entries['1'] as OntimeEvent).id).toBe('1');
    expect((testRundown.entries['1'] as OntimeEvent).cue).toBe('data2');
    expect((testRundown.entries['1'] as OntimeEvent).timeStart).toBe(1);
-    // the swapped entries changed, their revision has to say so
+    expect((testRundown.entries['1'] as OntimeEvent).revision).toBe(1);
    expect((testRundown.entries['1'] as OntimeEvent).revision).toBe(2);
    expect((testRundown.entries['2'] as OntimeEvent).id).toBe('2');
    expect((testRundown.entries['2'] as OntimeEvent).cue).toBe('data1');
    expect((testRundown.entries['2'] as OntimeEvent).timeStart).toBe(2);
-    expect((testRundown.entries['2'] as OntimeEvent).revision).toBe(2);
+    expect((testRundown.entries['2'] as OntimeEvent).revision).toBe(1);
    expect((testRundown.entries['3'] as OntimeEvent).id).toBe('3');
    expect((testRundown.entries['3'] as OntimeEvent).cue).toBe('data3');
    expect((testRundown.entries['3'] as OntimeEvent).timeStart).toBe(3);
    // untouched, so it keeps its revision
    expect((testRundown.entries['3'] as OntimeEvent).revision).toBe(1);
  });
 });
@@ -422,7 +422,7 @@ function swap(rundown: Rundown, eventFrom: OntimeEvent, eventTo: OntimeEvent) {
    gap: eventFrom.gap,
    dayOffset: eventFrom.dayOffset,
    // keep revision number but increment it
-    revision: eventFrom.revision + 1,
+    revision: eventFrom.revision++,
  };
  rundown.entries[eventTo.id] = {
@@ -440,7 +440,7 @@ function swap(rundown: Rundown, eventFrom: OntimeEvent, eventTo: OntimeEvent) {
    gap: eventTo.gap,
    dayOffset: eventTo.dayOffset,
    // keep revision number but increment it
-    revision: eventTo.revision + 1,
+    revision: eventTo.revision++,
  };
 }
@@ -816,23 +816,27 @@ export async function createNewRundown(title: string) {
 * @throws if the provided id does not exist
 */
 export async function renameRundown(id: string, title: string) {
-  const { rundown, commit } = createTransaction({ rundownId: id, mutableRundown: true });
+  const dataProvider = getDataProvider();
  const rundown = dataProvider.getRundown(id);
-  if (rundown.title === title) {
+  await dataProvider.setRundown(id, { ...rundown, title, revision: rundown.revision + 1 });
-    return getDataProvider().getProjectRundowns();
+
  /**
   * If we are modifying the loaded rundown we re-init it
   * This is likely over-kill but the simplest way to ensure state consistency
   */
  if (isCurrentRundown(id)) {
    const rundown = dataProvider.getRundown(id);
    const customField = dataProvider.getCustomFields();
    // init rundown does its own refetch
    await initRundown(rundown, customField);
  } else {
    setImmediate(() => {
      sendRefetch(RefetchKey.ProjectRundowns);
    });
  }
-  rundown.title = title;
+  return dataProvider.getProjectRundowns();
  // a title has no bearing on the schedule, there is nothing to process and no runtime to notify
  const { rundownMetadata, revision } = await commit(false);
  setImmediate(() => {
    notifyChanges(id, rundownMetadata, revision, { external: true });
    sendRefetch(RefetchKey.ProjectRundowns);
  });
  return getDataProvider().getProjectRundowns();
 }
 /**
@@ -9,10 +9,6 @@ Load only for touched domains. Add only stable, recurring invariants; not one-of
 - Preserve entry identity and supported types across patch, clone, group, ungroup, reorder.
 - Distinguish loaded vs background rundown. Prefer explicit rundown ID over global current state.
 - No caller-owned rundown mutation unless explicitly contracted.
 - Revisions mark change: a rundown revision advances on every commit, an entry revision on every
  change to that entry. Delays carry no revision. Optimistic client updates apply the same bump the
  server does, so an unchanged entry keeps its identity and clients can compare revisions to tell
  what moved on.
 ## Persistence, realtime, cache
Author	SHA1	Message	Date
Claude	e28b06efed	refactor(cuesheet): reserve the space an image will actually take We were remembering the aspect ratio and reserving the full width of the column, which over-reserves for an image smaller than the column: the row would settle to a smaller size once the image was shown. We now remember the size of the image and express the reservation in CSS as min(100%, width), which is what the image itself resolves to at any column width. Column sizes are applied as CSS variables and do not re-render the cells, so the reservation follows a resize on its own. Also groups the tests around the behaviour they describe. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01CKXcDrZoQXbJpaXiLi1aff	2026-08-30 10:52:39 +00:00
Claude	9efac0a60a	refactor(cuesheet): images are referenced by link only A path to a local file resolves on the machine running ontime, but not for the clients we serve the cuesheet to, so we no longer accept it. Validation now parses the value as a URL and checks the protocol, which also rejects malformed values that the previous prefix check let through. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01CKXcDrZoQXbJpaXiLi1aff	2026-08-30 10:37:25 +00:00
Claude	0ebad09154	Merge remote-tracking branch 'origin/claude/cuesheet-image-unload-scroll-k26i4u' into claude/cuesheet-image-unload-scroll-k26i4u # Conflicts: # apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EditableImage.tsx	2026-08-29 14:03:29 +00:00
Claude	f3cd541ef0	fix(cuesheet): report image problems instead of failing silently A value which is not a link was discarded on blur without any feedback: the text stayed in the field, so it looked like it had been saved. We now mark the field and say what is expected. Paths served by ontime itself (eg. /user/slide.png) are now accepted, they were rejected before. An image which cannot be loaded showed a broken icon with no explanation. This is what a dropbox share link does, since it serves an html page rather than the image, so it is worth naming the problem. We also reserve the space of an image while it is loading, using the aspect ratio of the last time we saw it. Rows are unmounted while out of view, so without it the row collapses and grows again on the way back, shifting the table under the user. Smaller items in the same cell: the lazy loading attribute only added a gate before the request (the row is only mounted when it is already close to the viewport), the image had no alt text, and two expressions could never run. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01CKXcDrZoQXbJpaXiLi1aff	2026-08-29 14:02:34 +00:00
Claude	7ec1179ede	fix(cuesheet): avoid layout shifts when images scroll back into view The cuesheet is a virtualised table: rows are unmounted once they leave the viewport, taking the <img> elements with them. On the way back the image has no dimensions until the browser makes it available, so the row grows under the user as it loads. We now remember the aspect ratio of the images we have seen and use it to reserve the space the image will take. This holds two numbers per image: the image data itself is left to the browser cache, which is better placed than us to decide when memory should be released. Also drops the lazy loading attribute: the row is only mounted when it is already close to the viewport, so it only adds a gate before the request. Whether the image is fetched again on scroll back is decided by the cache headers of the host serving it, and cannot be worked around from here. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01CKXcDrZoQXbJpaXiLi1aff	2026-07-25 19:28:58 +00:00