fix(cuesheet): align lazy cell placeholder with its editor

Two regressions from the lazy text-cell placeholders:
- single-line placeholders centered their text in the full (possibly tall)
  cell, so the text jumped upward when the top-aligned editor mounted. Keep
  the glyph in a 2rem band at the top (scoped to editable cells via a
  `topAligned` prop so the time/duration delay indicator is unaffected).
- multi-line placeholders only grew to their content height, so a short note
  in a row made tall by another column was not fully clickable. Use
  `min-height: 100%` so the placeholder fills the cell (and still grows with
  content, no clipping).

Verified by measuring text/editor positions: single-line jump ~0px; all text
placeholders fill the cell and the whole area is clickable. Cuesheet e2e (4/4).

apps/client/src/common/components/state/EmptyTableBody.module.scss

@@ -8,9 +8,12 @@
     padding-top: 10vh;
   }
 
-  .empty {
-    width: 100%;
-    opacity: 0.8;
+  .inline {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    margin-top: 1em;
   }
 
   .text {

apps/client/src/common/components/state/EmptyTableBody.tsx

@@ -1,18 +1,33 @@
-import EmptyImage from '../../../assets/images/empty.svg?react';
+import { SupportedEntry } from 'ontime-types';
+import { IoAdd } from 'react-icons/io5';
+
+import { useTranslation } from '../../../translation/TranslationProvider';
+import Button from '../buttons/Button';
+import Empty from './Empty';
 
 import style from './EmptyTableBody.module.scss';
 
 interface EmptyTableBodyProps {
-  text: string;
+  handleAddNew?: (type: SupportedEntry) => void;
 }
 
-export default function EmptyTableBody({ text }: EmptyTableBodyProps) {
+export default function EmptyTableBody({ handleAddNew }: EmptyTableBodyProps) {
+  const { getLocalizedString } = useTranslation();
+  const text = getLocalizedString('common.no_data');
   return (
     <tbody className={style.emptyContainer}>
       <tr>
         <td colSpan={99} className={style.emptyCell}>
-          <EmptyImage className={style.empty} />
-          {text && <span className={style.text}>{text}</span>}
+          <Empty injectedStyles={{ marginTop: '5vh' }} />
+          <span className={style.text}>{text}</span>
+          {handleAddNew && (
+            <div className={style.inline}>
+              <Button onClick={() => handleAddNew(SupportedEntry.Event)} variant='primary' size='large'>
+                <IoAdd />
+                Create Event
+              </Button>
+            </div>
+          )}
         </td>
       </tr>
     </tbody>

apps/client/src/common/utils/time.ts

@@ -4,7 +4,6 @@ import {
   MILLIS_PER_MINUTE,
   MILLIS_PER_SECOND,
   formatFromMillis,
-  getExpectedEnd,
   getExpectedStart,
 } from 'ontime-utils';
 
@@ -173,15 +172,13 @@ export function getExpectedTimesFromExtendedEvent(
 ) {
   if (event === null) return { expectedStart: 0, timeToStart: 0, expectedEnd: 0, plannedEnd: 0 };
 
-  const expectedStartState = {
-    totalGap: event.totalGap,
-    isLinkedToLoaded: event.isLinkedToLoaded,
-    ...state,
-  };
-
   const expectedStart = getExpectedStart(
     { timeStart: event.timeStart, delay: event.delay, dayOffset: event.dayOffset },
-    expectedStartState,
+    {
+      totalGap: event.totalGap,
+      isLinkedToLoaded: event.isLinkedToLoaded,
+      ...state,
+    },
   );
 
   const plannedEnd = event.timeStart + event.duration + event.delay;
@@ -189,7 +186,9 @@ export function getExpectedTimesFromExtendedEvent(
   return {
     expectedStart,
     timeToStart: expectedStart - state.clock,
-    expectedEnd: getExpectedEnd(event, expectedStartState),
+    expectedEnd: event.countToEnd
+      ? Math.max(expectedStart + event.duration, plannedEnd)
+      : expectedStart + event.duration,
     plannedEnd,
   };
 }

apps/client/src/features/app-settings/panel/manage-panel/ManageRundowns.tsx

@@ -157,7 +157,7 @@ export default function ManageRundowns() {
                       </td>
                       <td>
                         <DropdownMenu
-                          render={<IconButton variant='ghosted-white' />}
+                          render={<IconButton variant='ghosted-white' data-testId='rundown_menu' />}
                           items={[
                             {
                               type: 'item',

apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.tsx

@@ -1,6 +1,6 @@
 import { useTableNav } from '@table-nav/react';
 import { ColumnDef, Table, getCoreRowModel, useReactTable } from '@tanstack/react-table';
-import { OntimeEntry, TimeField, isOntimeDelay, isOntimeGroup, isOntimeMilestone } from 'ontime-types';
+import { OntimeEntry, SupportedEntry, TimeField, isOntimeDelay, isOntimeGroup, isOntimeMilestone } from 'ontime-types';
 import { ComponentProps, ReactNode, memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import {
   ContextProp,
@@ -20,6 +20,7 @@ import { usePersistedRundownOptions } from '../../../features/rundown/rundown.op
 import { useEventSelection } from '../../../features/rundown/useEventSelection';
 import { AppMode } from '../../../ontimeConfig';
 import { usePersistedCuesheetOptions } from '../cuesheet.options';
+import { useCuesheetPermissions } from '../useTablePermissions';
 import { CuesheetHeader, SortableCuesheetHeader } from './cuesheet-table-elements/CuesheetHeader';
 import DelayRow from './cuesheet-table-elements/DelayRow';
 import EventRow from './cuesheet-table-elements/EventRow';
@@ -62,7 +63,8 @@ export default function CuesheetTable({
   insertElement,
 }: CuesheetTableProps) {
   const { flatRundown, status, selectedEventId } = source;
-  const { updateEntry, updateTimer } = useEntryActionsContext();
+  const { updateEntry, updateTimer, addEntry } = useEntryActionsContext();
+  const canCreateEntries = useCuesheetPermissions((state) => state.canCreateEntries) && cuesheetMode === AppMode.Edit;
 
   const useOptions = tableRoot === 'editor' ? usePersistedRundownOptions : usePersistedCuesheetOptions;
   const optionsStore = useOptions();
@@ -202,8 +204,9 @@ export default function CuesheetTable({
       listeners,
       rows,
       table,
+      handleAddNew: canCreateEntries ? (type: SupportedEntry) => addEntry({ type }) : undefined,
     }),
-    [columnSizeVars, cursor, listeners, rows, table],
+    [columnSizeVars, cursor, listeners, rows, table, addEntry, canCreateEntries],
   );
 
   const computeItemKey = useCallback((_: number, item: ExtendedEntry) => item.id, []);
@@ -273,10 +276,13 @@ interface CuesheetVirtuosoContext {
   listeners: ReturnType<typeof useTableNav>['listeners'];
   rows: ReturnType<Table<ExtendedEntry>['getRowModel']>['rows'];
   table: Table<ExtendedEntry>;
+  handleAddNew?: (type: SupportedEntry) => void;
 }
 
-const EmptyPlaceholder = memo(function EmptyPlaceholder() {
-  return <EmptyTableBody text='No data in rundown' />;
+const EmptyPlaceholder = memo(function EmptyPlaceholder({
+  context,
+}: TableProps & ContextProp<CuesheetVirtuosoContext>) {
+  return <EmptyTableBody handleAddNew={context.handleAddNew} />;
 });
 
 const CuesheetTableElement = memo(function CuesheetTableElement({

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EditableCell.tsx

@@ -0,0 +1,101 @@
+import { memo, useCallback, useLayoutEffect, useRef, useState } from 'react';
+
+import MultiLineCell from './MultiLineCell';
+import SingleLineCell from './SingleLineCell';
+import TextLikeInput from './TextLikeInput';
+
+interface EditableCellProps {
+  initialValue: string;
+  multiline?: boolean;
+  fieldId?: string;
+  fieldLabel?: string;
+  handleUpdate: (newValue: string) => void;
+}
+
+interface FocusableEditor {
+  focus: () => void;
+  select?: () => void;
+}
+
+interface FocusableDisplay {
+  focusParentElement: () => void;
+}
+
+/**
+ * Lazily mounts the text editor for a cell.
+ *
+ * Mounting an `<input>`/`<textarea>` editor (with its reactive-input hooks and autosize) for every
+ * cell is expensive when many rows mount at once during virtualised scroll. While the cell is not
+ * being edited we render a lightweight, focusable display element and only mount the real editor
+ * when the user clicks/focuses the cell — mirroring how the time/duration cells already behave.
+ *
+ * On exit we return focus to the parent cell (through the display element, in a layout effect once
+ * it is back in the DOM) so the table keyboard navigation keeps working — the editor is unmounted
+ * by then, so we cannot rely on its own ref.
+ */
+function EditableCell({ initialValue, multiline, fieldId, fieldLabel, handleUpdate }: EditableCellProps) {
+  const [isEditing, setIsEditing] = useState(false);
+  const wasEditing = useRef(false);
+  const editorRef = useRef<FocusableEditor | null>(null);
+  const displayRef = useRef<FocusableDisplay | null>(null);
+
+  useLayoutEffect(() => {
+    if (isEditing) {
+      // focus the editor once it mounts on entering edit mode
+      editorRef.current?.focus();
+      editorRef.current?.select?.();
+    } else if (wasEditing.current) {
+      // returning from edit: hand focus back to the cell so table keyboard navigation continues
+      displayRef.current?.focusParentElement();
+    }
+    wasEditing.current = isEditing;
+  }, [isEditing]);
+
+  const enterEdit = useCallback(() => setIsEditing(true), []);
+  const exitEdit = useCallback(() => setIsEditing(false), []);
+
+  const onSubmit = useCallback(
+    (newValue: string) => {
+      setIsEditing(false);
+      handleUpdate(newValue);
+    },
+    [handleUpdate],
+  );
+
+  if (!isEditing) {
+    return (
+      <TextLikeInput
+        ref={displayRef}
+        onClick={enterEdit}
+        onFocus={enterEdit}
+        multiline={multiline}
+        topAligned
+        aria-label={fieldLabel ? `${fieldLabel} cell` : undefined}
+      >
+        {initialValue}
+      </TextLikeInput>
+    );
+  }
+
+  return multiline ? (
+    <MultiLineCell
+      ref={editorRef}
+      initialValue={initialValue}
+      fieldId={fieldId}
+      fieldLabel={fieldLabel}
+      handleUpdate={onSubmit}
+      handleCancelUpdate={exitEdit}
+    />
+  ) : (
+    <SingleLineCell
+      ref={editorRef}
+      initialValue={initialValue}
+      fieldId={fieldId}
+      fieldLabel={fieldLabel}
+      handleUpdate={onSubmit}
+      handleCancelUpdate={exitEdit}
+    />
+  );
+}
+
+export default memo(EditableCell);

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/MultiLineCell.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback, useRef } from 'react';
+import { forwardRef, memo, useCallback, useImperativeHandle, useRef } from 'react';
 
 import { AutoTextarea } from '../../../../common/components/input/auto-textarea/AutoTextarea';
 import useReactiveTextInput from '../../../../common/components/input/text-input/useReactiveTextInput';
@@ -8,19 +8,36 @@ interface MultiLineCellProps {
   fieldId?: string;
   fieldLabel?: string;
   handleUpdate: (newValue: string) => void;
+  handleCancelUpdate?: () => void;
 }
 
-export default memo(MultiLineCell);
-
-function MultiLineCell({ initialValue, fieldId, fieldLabel, handleUpdate }: MultiLineCellProps) {
+const MultiLineCell = forwardRef(function MultiLineCell(
+  { initialValue, fieldId, fieldLabel, handleUpdate, handleCancelUpdate }: MultiLineCellProps,
+  inputRef,
+) {
   const ref = useRef<HTMLTextAreaElement | null>(null);
   const submitCallback = useCallback((newValue: string) => handleUpdate(newValue), [handleUpdate]);
 
   const { value, onChange, onBlur, onKeyDown } = useReactiveTextInput(initialValue, submitCallback, ref, {
     submitOnCtrlEnter: true,
     allowKeyboardNavigation: true,
+    onCancelUpdate: handleCancelUpdate,
   });
 
+  // expose focus to the parent so the editor can be focused when mounted on demand
+  useImperativeHandle(
+    inputRef,
+    () => ({
+      focus() {
+        ref.current?.focus();
+      },
+      select() {
+        ref.current?.select();
+      },
+    }),
+    [ref],
+  );
+
   return (
     <AutoTextarea
       inputref={ref}
@@ -36,4 +53,6 @@ function MultiLineCell({ initialValue, fieldId, fieldLabel, handleUpdate }: Mult
       aria-label={fieldLabel ? `${fieldLabel} editor` : undefined}
     />
   );
-}
+});
+
+export default memo(MultiLineCell);

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/TextLikeInput.module.scss

@@ -1,6 +1,8 @@
 /* element matching input styles */
 .textInput {
-  height: 2rem;
+  width: 100%;
+  height: 100%;
+  min-height: 2rem;
   background-color: transparent;
   border-radius: $component-border-radius-md;
   text-wrap: nowrap;
@@ -32,4 +34,21 @@
     background-color: $gray-1100;
     cursor: text;
   }
+
+  // single-line placeholder: keep the glyph in a 2rem band at the top of the cell so it lines up
+  // with the editor (which mounts top-aligned) and does not jump when the cell is taller than 2rem
+  &.topAligned:not(.multiline) {
+    align-items: flex-start;
+    line-height: 2rem;
+  }
+
+  &.multiline {
+    height: auto;
+    min-height: 100%; // fill the cell so the whole area is clickable (grows with content)
+    text-wrap: wrap;
+    white-space: break-spaces;
+    overflow: hidden;
+    align-items: flex-start;
+    padding-top: 0.25em;
+  }
 }

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/TextLikeInput.tsx

@@ -8,11 +8,23 @@ interface TextLikeInputProps extends HTMLAttributes<HTMLSpanElement> {
   offset?: 'over' | 'under' | 'muted' | null;
   muted?: boolean;
   disabled?: boolean;
+  multiline?: boolean;
+  /** keep the content at the top of the cell (matches an editor that mounts top-aligned) */
+  topAligned?: boolean;
 }
 
 const TextLikeInput = forwardRef(
   (
-    { offset, muted, disabled, children, className, ...elementProps }: PropsWithChildren<TextLikeInputProps>,
+    {
+      offset,
+      muted,
+      disabled,
+      multiline,
+      topAligned,
+      children,
+      className,
+      ...elementProps
+    }: PropsWithChildren<TextLikeInputProps>,
     textRef,
   ) => {
     const ref = useRef<HTMLDivElement | null>(null);
@@ -21,6 +33,8 @@ const TextLikeInput = forwardRef(
       offset && style[offset],
       muted && style.muted,
       disabled && style.disabled,
+      multiline && style.multiline,
+      topAligned && style.topAligned,
       className,
     ]);
 

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/cuesheetColsFactory.tsx

@@ -9,12 +9,11 @@ import { formatDuration, formatTime } from '../../../../common/utils/time';
 import { AppMode } from '../../../../ontimeConfig';
 import { getCuesheetColumnAccessPolicy } from '../../cuesheet.policies';
 import DurationInput from './DurationInput';
+import EditableCell from './EditableCell';
 import EditableImage from './EditableImage';
 import FlagCell from './FlagCell';
 import GhostedText from './GhostedText';
-import MultiLineCell from './MultiLineCell';
 import MutedText from './MutedText';
-import SingleLineCell from './SingleLineCell';
 import TimeInput from './TimeInput';
 
 function getColumnLabel(column: CellContext<ExtendedEntry, unknown>['column']): string {
@@ -151,7 +150,8 @@ function MakeMultiLineField({ row, column, table }: CellContext<ExtendedEntry, u
   }
 
   return (
-    <MultiLineCell
+    <EditableCell
+      multiline
       initialValue={initialValue as string}
       fieldId={column.id}
       fieldLabel={getColumnLabel(column)}
@@ -198,7 +198,7 @@ function MakeSingleLineField({ row, column, table }: CellContext<ExtendedEntry,
   }
 
   return (
-    <SingleLineCell
+    <EditableCell
       initialValue={initialValue as string}
       fieldId={column.id}
       fieldLabel={getColumnLabel(column)}
@@ -238,7 +238,8 @@ function MakeCustomField({ row, column, table }: CellContext<ExtendedEntry, unkn
   }
 
   return (
-    <MultiLineCell
+    <EditableCell
+      multiline
       initialValue={initialValue}
       fieldId={column.id}
       fieldLabel={getColumnLabel(column)}

apps/server/src/stores/__tests__/runtimeState.test.ts

@@ -245,52 +245,6 @@ describe('mutation on runtimeState', () => {
     expect(newState.offset.expectedRundownEnd).toBeNull();
   });
 
-  test('a countToEnd last event absorbs overtime into its fixed rundown end', async () => {
-    const tenAM = 10 * MILLIS_PER_HOUR;
-    const elevenAM = 11 * MILLIS_PER_HOUR;
-    const noon = 12 * MILLIS_PER_HOUR;
-
-    const entries = {
-      event1: {
-        ...mockEvent,
-        id: 'event1',
-        timeStart: tenAM,
-        timeEnd: elevenAM,
-        duration: MILLIS_PER_HOUR,
-        parent: null,
-      },
-      event2: {
-        ...mockEvent,
-        id: 'event2',
-        timeStart: elevenAM,
-        timeEnd: noon,
-        duration: MILLIS_PER_HOUR,
-        countToEnd: true,
-        linkStart: true,
-        parent: null,
-      },
-    };
-    const mockRundown = makeRundown({ entries, order: ['event1', 'event2'] });
-
-    await initRundown(mockRundown, {});
-    vi.runAllTimers();
-
-    const { metadata, rundown } = rundownCache.get();
-
-    // start event1 five minutes behind schedule
-    vi.setSystemTime('jan 1 10:05');
-    load(entries.event1, rundown, metadata);
-    start();
-    update();
-
-    const newState = getState();
-    expect(newState.offset.absolute).toBe(5 * MILLIS_PER_MINUTE);
-
-    // without countToEnd the rundown would end at noon + 5min, but the countToEnd
-    // event absorbs the overtime so the rundown is still expected to end at noon
-    expect(newState.offset.expectedRundownEnd).toBe(noon);
-  });
-
   test('resume restores currentDay from restore point', async () => {
     clearState();
     const mockRundown = makeRundown({
@@ -1002,32 +956,4 @@ describe('loadGroupFlagAndEnd()', () => {
       eventNow: rundown.entries[0],
     });
   });
-
-  test('a countToEnd event breaks the link chain for the events that follow it', () => {
-    // chain: A (loaded) -> B (countToEnd, flagged) -> C (linked, last event)
-    // the chain stays intact up to and including B, but breaks for C since it follows a countToEnd event
-    const rundown = makeRundown({
-      entries: {
-        A: makeOntimeEvent({ id: 'A', parent: null, linkStart: false, countToEnd: false, gap: 0 }),
-        B: makeOntimeEvent({ id: 'B', parent: null, linkStart: true, countToEnd: true, gap: 0, flag: true }),
-        C: makeOntimeEvent({ id: 'C', parent: null, linkStart: true, countToEnd: false, gap: 0 }),
-      },
-      order: ['A', 'B', 'C'],
-    });
-
-    const state = {
-      groupNow: null,
-      eventNow: rundown.entries.A,
-      rundown: { actualGroupStart: null },
-    } as RuntimeState;
-
-    const metadata = { playableEventOrder: ['A', 'B', 'C'], flags: ['B'] } as RundownMetadata;
-
-    loadGroupFlagAndEnd(rundown, metadata, 0, state);
-
-    // the flag (B) is still part of the chain
-    expect(state._flag).toMatchObject({ event: rundown.entries.B, isLinkedToLoaded: true });
-    // the rundown end (C) follows the countToEnd event, so the chain is broken
-    expect(state._end).toMatchObject({ event: rundown.entries.C, isLinkedToLoaded: false });
-  });
 });

apps/server/src/stores/runtimeState.ts

@@ -23,7 +23,6 @@ import {
   calculateDuration,
   checkIsNow,
   dayInMs,
-  getExpectedEnd,
   getExpectedStart,
   getLastEventNormal,
   isPlaybackActive,
@@ -837,7 +836,7 @@ function getExpectedTimes(state = runtimeState) {
     const { _group } = state;
     if (_group !== null) {
       const { event: lastEvent, accumulatedGap, isLinkedToLoaded } = _group;
-      state.offset.expectedGroupEnd = getExpectedEnd(lastEvent, {
+      const lastEventExpectedStart = getExpectedStart(lastEvent, {
         currentDay: state.rundown.currentDay!,
         totalGap: accumulatedGap,
         isLinkedToLoaded,
@@ -846,6 +845,7 @@ function getExpectedTimes(state = runtimeState) {
         plannedStart,
         actualStart,
       });
+      state.offset.expectedGroupEnd = lastEventExpectedStart + lastEvent.duration;
     }
   }
 
@@ -868,7 +868,7 @@ function getExpectedTimes(state = runtimeState) {
 
   if (state._end) {
     const { event, accumulatedGap, isLinkedToLoaded } = state._end;
-    state.offset.expectedRundownEnd = getExpectedEnd(event, {
+    const expectedStart = getExpectedStart(event, {
       currentDay: state.rundown.currentDay!,
       totalGap: accumulatedGap,
       isLinkedToLoaded,
@@ -877,6 +877,7 @@ function getExpectedTimes(state = runtimeState) {
       plannedStart,
       actualStart,
     });
+    state.offset.expectedRundownEnd = expectedStart + event.duration;
   }
 }
 
@@ -919,9 +920,6 @@ export function loadGroupFlagAndEnd(
 
   let accumulatedGap = 0;
   let isLinkedToLoaded = true;
-  // a countToEnd event absorbs overtime, so the chain breaks on the event that follows it
-  // mirrors the client logic in common/utils/rundownMetadata.ts
-  let previousWasCountToEnd = false;
 
   for (let idx = currentIndex; idx < playableEventOrder.length; idx++) {
     const entry = entries[playableEventOrder[idx]];
@@ -930,7 +928,7 @@ export function loadGroupFlagAndEnd(
       if (idx !== currentIndex) {
         // we only accumulate data after the loaded event
         accumulatedGap += entry.gap;
-        isLinkedToLoaded = isLinkedToLoaded && entry.linkStart && !previousWasCountToEnd;
+        isLinkedToLoaded = isLinkedToLoaded && entry.linkStart;
 
         // and the loaded event is not allowed to be the next flag
         if (!foundFlag && metadata.flags.includes(entry.id)) {
@@ -944,9 +942,6 @@ export function loadGroupFlagAndEnd(
         foundGroupEnd = true;
         state._group = { event: lastEventInGroup, isLinkedToLoaded, accumulatedGap };
       }
-
-      // carry the countToEnd status forward so the next event can break the chain
-      previousWasCountToEnd = entry.countToEnd;
     }
   }
 

e2e/tests/features/202-cuesheet.spec.ts

@@ -57,46 +57,78 @@ test('cuesheet datagrid keeps keyboard focus flow while editing text cells', asy
   const firstEvent = page.getByTestId('cuesheet-event').first();
   await expect(firstEvent).toBeVisible();
 
+  const cueCell = firstEvent.getByTestId('cuesheet-cell-cue');
+  const titleCell = firstEvent.getByTestId('cuesheet-cell-title');
+  const noteCell = firstEvent.getByTestId('cuesheet-cell-note');
   const cueEditor = firstEvent.getByTestId('cuesheet-editor-cue');
   const titleEditor = firstEvent.getByTestId('cuesheet-editor-title');
   const noteEditor = firstEvent.getByTestId('cuesheet-editor-note');
 
   /**
-   * 1. focus a cell in the datagrid single line text
-   * submitting the data returns the focus to the parent
+   * 1. clicking a single line text cell opens the editor (mounted on demand)
+   * submitting with Enter closes the editor and returns focus to the parent cell
    */
-  await titleEditor.click();
+  await titleCell.click();
   await expect(titleEditor).toBeFocused();
   const updatedTitle = `focus-title-${Date.now()}`;
   await titleEditor.fill(updatedTitle);
   await titleEditor.press('Enter');
-  await expect(titleEditor).not.toBeFocused();
-  await expect(titleEditor).toHaveValue(updatedTitle);
+  await expect(titleEditor).toHaveCount(0);
+  await expect(titleCell).toContainText(updatedTitle);
+  await expect(titleCell).toBeFocused();
 
   /**
-   * 2. navigate and modify multiline text cell
+   * 2. navigate to the multiline text cell with the keyboard and open it with Enter
    * submitting works with ctrl/cmd + enter and the focus returns to the parent
    */
   await page.keyboard.press('ArrowRight');
+  await expect(noteCell).toBeFocused();
   await page.keyboard.press('Enter');
   await expect(noteEditor).toBeFocused();
   const updatedNote = `focus-note-${Date.now()}`;
   await noteEditor.fill(updatedNote);
   await noteEditor.press('ControlOrMeta+Enter');
-  await expect(noteEditor).not.toBeFocused();
-  await expect(noteEditor).toHaveValue(updatedNote);
+  await expect(noteEditor).toHaveCount(0);
+  await expect(noteCell).toContainText(updatedNote);
+  await expect(noteCell).toBeFocused();
 
   /**
-   * 2. navigate and modify single line text cell again
-   * pressing escape cancels the edit and the focus returns to the parent
+   * 3. navigating back returns focus to the title cell
+   * opening the cue cell and pressing escape cancels the edit and reverts the value
    */
   await page.keyboard.press('ArrowLeft');
-  await page.keyboard.press('Enter');
-  await expect(titleEditor).toBeFocused();
+  await expect(titleCell).toBeFocused();
+
+  await cueCell.click();
+  await expect(cueEditor).toBeFocused();
   const cueBeforeCancel = await cueEditor.inputValue();
-  await cueEditor.click();
   await cueEditor.fill(`${cueBeforeCancel} temporary`);
   await cueEditor.press('Escape');
-  await expect(cueEditor).not.toBeFocused();
-  await expect(cueEditor).toHaveValue(cueBeforeCancel);
+  await expect(cueEditor).toHaveCount(0);
+  await expect(cueCell).toContainText(cueBeforeCancel);
+  await expect(cueCell).toBeFocused();
+});
+
+test('cuesheet background edit from empty state', async ({ page }) => {
+  // create an empty rundown
+  await page.goto('/editor');
+  await page.getByRole('button', { name: 'Toggle settings' }).click();
+  await page.getByRole('button', { name: 'Manage rundowns' }).click();
+  await page.getByRole('button', { name: 'New' }).nth(1).click();
+  const emptyName = `empty-${Date.now()}`;
+  await page.getByRole('textbox', { name: 'Rundown title' }).fill(emptyName);
+  await page.getByRole('button', { name: 'Create rundown' }).click();
+
+  // edit it in the cuesheet (scope to the rundown we just created so retries stay isolated)
+  await page.getByRole('row', { name: emptyName }).getByTestId('rundown_menu').click();
+  await page.getByText('Edit in cuesheet').click();
+
+  // expect to see and empty screen
+  await expect(page.getByRole('button', { name: 'Create Event' })).toBeVisible();
+
+  // create 1 event
+  await page.getByRole('button', { name: 'Create Event' }).click();
+
+  // and expect to find it
+  await expect(page.getByTestId('cuesheet-event')).toBeVisible();
 });

e2e/tests/features/206-url-preset.spec.ts

@@ -231,9 +231,10 @@ test.describe('Sharing from cuesheet', () => {
 
     // Verify that the title is visible and editable
     await expect(page.getByTestId('cuesheet-event').getByRole('cell', { name: 'title' })).toBeVisible();
-    const titleEditor = page.getByTestId('cuesheet-event').getByTestId('cuesheet-editor-title');
-    await titleEditor.click();
-    await expect(titleEditor).toBeEditable();
+    // the editor mounts on demand: clicking the cell opens it
+    const firstEvent = page.getByTestId('cuesheet-event').first();
+    await firstEvent.getByTestId('cuesheet-cell-title').click();
+    await expect(firstEvent.getByTestId('cuesheet-editor-title')).toBeEditable();
 
     // other elements are not there
     await expect(page.getByRole('cell', { name: 'Duration' })).toBeHidden();

packages/utils/index.ts

@@ -80,7 +80,7 @@ export { validateEndAction, validateTimerType } from './src/validate-events/vali
 
 // feature business logic
 
-export { getExpectedEnd, getExpectedStart } from './src/date-utils/getExpectedStart.js';
+export { getExpectedStart } from './src/date-utils/getExpectedStart.js';
 
 // feature business logic - rundown
 export { checkIsNow } from './src/date-utils/checkIsNow.js';

packages/utils/src/date-utils/getExpectedStart.test.ts

@@ -1,7 +1,7 @@
 import { Day, OffsetMode } from 'ontime-types';
 
 import { MILLIS_PER_HOUR, dayInMs } from './conversionUtils';
-import { getExpectedEnd, getExpectedStart } from './getExpectedStart';
+import { getExpectedStart } from './getExpectedStart';
 
 describe('getExpectedStart()', () => {
   describe('Absolute offset mode', () => {
@@ -315,110 +315,3 @@ describe('getExpectedStart()', () => {
     expect(getExpectedStart(testEvent, { ...testState, currentDay: 0 })).toBe(23 * MILLIS_PER_HOUR + 5);
   });
 });
-
-describe('getExpectedEnd()', () => {
-  const baseState = {
-    currentDay: 0,
-    totalGap: 0,
-    mode: OffsetMode.Absolute,
-    actualStart: null,
-    plannedStart: null,
-    isLinkedToLoaded: true,
-  };
-
-  test('a regular event ends at its expected start plus duration', () => {
-    const testEvent = {
-      timeStart: 100,
-      duration: 50,
-      delay: 0,
-      dayOffset: 0 as Day,
-      countToEnd: false,
-    };
-
-    // on schedule
-    expect(getExpectedEnd(testEvent, { ...baseState, offset: 0 })).toBe(150);
-    // running 20 behind pushes the end out
-    expect(getExpectedEnd(testEvent, { ...baseState, offset: 20 })).toBe(170);
-  });
-
-  test('a countToEnd event pins to the planned end while in overtime', () => {
-    const testEvent = {
-      timeStart: 100,
-      duration: 50,
-      delay: 0,
-      dayOffset: 0 as Day,
-      countToEnd: true,
-    };
-
-    // overtime would otherwise push the end to 170, but countToEnd absorbs it and pins to 150
-    expect(getExpectedEnd(testEvent, { ...baseState, offset: 20 })).toBe(150);
-  });
-
-  test('a countToEnd event pins to the planned end while ahead of schedule', () => {
-    const testEvent = {
-      timeStart: 100,
-      duration: 50,
-      delay: 0,
-      dayOffset: 0 as Day,
-      countToEnd: true,
-    };
-
-    // ahead of schedule the start moves earlier (90) but the end stays pinned to 150
-    expect(getExpectedEnd(testEvent, { ...baseState, offset: -10 })).toBe(150);
-  });
-
-  test('an overnight countToEnd event returns a normalised end', () => {
-    // event starts at 23:00 and counts to 01:00 the next day -> duration spans midnight
-    const timeStart = 23 * MILLIS_PER_HOUR;
-    const duration = 2 * MILLIS_PER_HOUR;
-    const testEvent = {
-      timeStart,
-      duration,
-      delay: 0,
-      dayOffset: 0 as Day,
-      countToEnd: true,
-    };
-
-    expect(getExpectedEnd(testEvent, { ...baseState, offset: 0 })).toBe(timeStart + duration);
-  });
-
-  test('a countToEnd event is NOT shifted by the relative-start offset', () => {
-    const testEvent = {
-      timeStart: 100,
-      duration: 50,
-      delay: 0,
-      dayOffset: 0 as Day,
-      countToEnd: true,
-    };
-
-    // in relative mode a regular event would be shifted by actualStart - plannedStart (+30),
-    // but a countToEnd event is anchored to its wall-clock end and stays at 150
-    const relativeState = {
-      ...baseState,
-      mode: OffsetMode.Relative,
-      actualStart: 30,
-      plannedStart: 0,
-      offset: 0,
-    };
-
-    // sanity: a regular event in the same state is shifted to 180
-    expect(getExpectedEnd({ ...testEvent, countToEnd: false }, relativeState)).toBe(180);
-    // the countToEnd event is not shifted
-    expect(getExpectedEnd(testEvent, relativeState)).toBe(150);
-  });
-
-  test('a countToEnd event on a later day adds the day offset', () => {
-    const testEvent = {
-      timeStart: 100,
-      duration: 50,
-      delay: 0,
-      dayOffset: 1 as Day,
-      countToEnd: true,
-    };
-
-    // dayOffset 1 with currentDay 0 -> end normalised one day forward
-    expect(getExpectedEnd(testEvent, { ...baseState, currentDay: 0, offset: 0 })).toBe(150 + dayInMs);
-    // when the running event is already on the same day, no extra day is added
-    expect(getExpectedEnd({ ...testEvent, dayOffset: 0 as Day }, { ...baseState, currentDay: 0, offset: 0 })).toBe(150);
-  });
-});

packages/utils/src/date-utils/getExpectedStart.ts

@@ -60,24 +60,3 @@ export function getExpectedStart(
   const offsetStartTimeBufferedByGaps = offsetStartTime - totalGap;
   return offsetStartTimeBufferedByGaps;
 }
-
-/**
- * Computes the normalised expected end of an event.
- * A countToEnd event is anchored to its fixed wall-clock end: it absorbs the accumulated
- * runtime offset and is not shifted by the relative-start offset, so its expected end is the
- * scheduled end normalised for the day (mirrors getExpectedFinish in the running timer, which
- * returns the raw timeEnd). A regular event's end moves with the runtime offset.
- * The result lives in the same day-normalised space as getExpectedStart (it may exceed dayInMs).
- */
-export function getExpectedEnd(
-  event: Pick<OntimeEvent, 'timeStart' | 'duration' | 'delay' | 'dayOffset' | 'countToEnd'>,
-  state: Parameters<typeof getExpectedStart>[1],
-): number {
-  if (!event.countToEnd) {
-    return getExpectedStart(event, state) + event.duration;
-  }
-
-  const delayedStart = Math.max(0, event.timeStart + event.delay);
-  const relativeDayOffset = event.dayOffset - state.currentDay;
-  return delayedStart + relativeDayOffset * dayInMs + event.duration;
-}