fix(ui): give the preview a fixed shape and top-align the buttons beside it

The stage was stretched to whatever height the panel had free via a 1fr grid row, so its size varied with how much vertical room the editor happened to leave rather than staying predictable. It now keeps a 16:9 box sized from its own width - the same ratio the embedded timer's font-size estimate already assumes - so cqw and cqh agree and the min() cap in PipTimer stays meaningful only for the pip window, which is still freely resizable. The button column no longer stretches or centers against that height either: align-items: start on the group top-aligns both the stage and the buttons when they sit side by side. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011CHxSQ6nWHuyar8feieRra
feat(ui): make blink/blackout exclusive and put the buttons beside the preview
2026-08-31 11:59:10 +00:00 · 2026-08-26 13:42:29 +00:00 · 2026-08-26 13:36:52 +00:00 · 2026-08-26 13:30:28 +00:00 · 2026-08-26 13:04:23 +00:00 · 2026-08-26 12:40:01 +00:00
52 changed files with 755 additions and 1454 deletions
@@ -1,6 +1,6 @@
 {
  "name": "@getontime/cli",
-  "version": "4.13.0",
+  "version": "4.12.0",
  "author": "Carlos Valente",
  "description": "Time keeping for live events",
  "repository": "https://github.com/cpvalente/ontime",
@@ -1,6 +1,6 @@
 {
  "name": "ontime-ui",
-  "version": "4.13.0",
+  "version": "4.12.0",
  "private": true,
  "type": "module",
  "dependencies": {
@@ -1,18 +0,0 @@
-import { ComponentProps } from 'react';
-
-import Button from './Button';
-
-type ToggleButtonProps = Omit<ComponentProps<typeof Button>, 'variant'> & {
-  /** whether the option this button controls is currently on */
-  pressed: boolean;
-};
-
-/**
- * A button which carries an on / off state.
- *
- * Keeps the pressed styling and the accessible state together, so that a toggle
- * cannot end up looking active without also announcing that it is.
- */
-export default function ToggleButton({ pressed, ...buttonProps }: ToggleButtonProps) {
-  return <Button variant={pressed ? 'primary' : 'subtle'} aria-pressed={pressed} {...buttonProps} />;
-}
@@ -2,8 +2,8 @@ import { MaybeString } from 'ontime-types';
 import { RefObject, useCallback, useEffect } from 'react';

 function scrollToComponent<ComponentRef extends HTMLElement, ScrollRef extends HTMLElement>(
-  componentRef: RefObject<ComponentRef | null>,
-  scrollRef: RefObject<ScrollRef | null>,
+  componentRef: RefObject<ComponentRef>,
+  scrollRef: RefObject<ScrollRef>,
  topOffset: number,
 ) {
  if (!componentRef.current || !scrollRef.current) {
@@ -21,16 +21,18 @@ interface UseFollowComponentProps {
  followRef: RefObject<HTMLElement | null>;
  scrollRef: RefObject<HTMLElement | null>;
  doFollow: boolean;
-  followTrigger: MaybeString; // this would be an entry id or null
-  getTopOffset: () => number;
+  topOffset?: number;
+  setScrollFlag?: (newValue: boolean) => void;
+  followTrigger?: MaybeString; // this would be an entry id or null
 }

 export default function useFollowComponent({
  followRef,
  scrollRef,
  doFollow,
+  topOffset = 100,
+  setScrollFlag,
  followTrigger,
-  getTopOffset,
 }: UseFollowComponentProps) {
  // when trigger moves, view should follow
  useEffect(() => {
@@ -39,17 +41,25 @@ export default function useFollowComponent({
    }

    if (followRef.current && scrollRef.current) {
+      setScrollFlag?.(true);
      // Use requestAnimationFrame to ensure the component is fully loaded
      window.requestAnimationFrame(() => {
-        // resolve the offset after layout, so that measured values are up to date
-        scrollToComponent(followRef, scrollRef, getTopOffset());
+        scrollToComponent(followRef as RefObject<HTMLElement>, scrollRef as RefObject<HTMLElement>, topOffset);
+        setScrollFlag?.(false);
      });
    }
-  }, [followTrigger, doFollow, followRef, scrollRef, getTopOffset]);
+  }, [followTrigger, doFollow, followRef, scrollRef, setScrollFlag, topOffset]);

-  const scrollToRefComponent = useCallback(() => {
-    scrollToComponent(followRef, scrollRef, getTopOffset());
-  }, [followRef, scrollRef, getTopOffset]);
+  const scrollToRefComponent = useCallback(
+    (componentRef = followRef, containerRef = scrollRef, offset = topOffset) => {
+      if (componentRef && containerRef) {
+        // @ts-expect-error -- we know this are not null
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        scrollToComponent(componentRef!, containerRef!, offset);
+      }
+    },
+    [followRef, scrollRef, topOffset],
+  );

  return scrollToRefComponent;
 }
@@ -22,10 +22,14 @@ export const useRundownEditor = createSelector((state: RuntimeStore) => ({
  nextEventId: state.eventNext?.id ?? null,
 }));

-export const useTimerViewControl = createSelector((state: RuntimeStore) => ({
+export const useScreenControl = createSelector((state: RuntimeStore) => ({
  blackout: state.message.timer.blackout,
  blink: state.message.timer.blink,
-  secondarySource: state.message.timer.secondarySource,
+  isScreenModified:
+    state.message.timer.visible ||
+    state.message.timer.blink ||
+    state.message.timer.blackout ||
+    state.message.timer.secondarySource !== null,
 }));

 export const useTimerMessageInput = createSelector((state: RuntimeStore) => ({
@@ -33,17 +37,12 @@ export const useTimerMessageInput = createSelector((state: RuntimeStore) => ({
  visible: state.message.timer.visible,
 }));

-export const useExternalMessageInput = createSelector((state: RuntimeStore) => ({
+export const useSecondaryMessageInput = createSelector((state: RuntimeStore) => ({
  text: state.message.secondary,
-  visible: state.message.timer.secondarySource === 'secondary',
+  source: state.message.timer.secondarySource,
 }));

-export const useMessagePreview = createSelector((state: RuntimeStore) => ({
-  blink: state.message.timer.blink,
-  blackout: state.message.timer.blackout,
-  phase: state.timer.phase,
-  secondarySource: state.message.timer.secondarySource,
-  showTimerMessage: state.message.timer.visible && Boolean(state.message.timer.text),
+export const useTimerStatus = createSelector((state: RuntimeStore) => ({
  timerType: state.eventNow?.timerType ?? null,
  countToEnd: state.eventNow?.countToEnd ?? false,
 }));
@@ -52,10 +51,16 @@ export const setMessage = {
  timerText: (payload: string) => sendSocket('message', { timer: { text: payload } }),
  timerVisible: (payload: boolean) => sendSocket('message', { timer: { visible: payload } }),
  secondaryMessage: (payload: string) => sendSocket('message', { secondary: payload }),
-  timerBlink: (payload: boolean) => sendSocket('message', { timer: { blink: payload } }),
-  timerBlackout: (payload: boolean) => sendSocket('message', { timer: { blackout: payload } }),
+  // blink and blackout are mutually exclusive stage states, so turning one on turns the other off
+  timerBlink: (payload: boolean) =>
+    sendSocket('message', payload ? { timer: { blink: true, blackout: false } } : { timer: { blink: false } }),
+  timerBlackout: (payload: boolean) =>
+    sendSocket('message', payload ? { timer: { blackout: true, blink: false } } : { timer: { blackout: false } }),
  timerSecondarySource: (payload: TimerMessage['secondarySource']) =>
    sendSocket('message', { timer: { secondarySource: payload } }),
+  /** returns the stage to a plain timer, keeping whatever the operator has typed */
+  clearScreen: () =>
+    sendSocket('message', { timer: { visible: false, blink: false, blackout: false, secondarySource: null } }),
 };

 export const usePlaybackControl = createSelector((state: RuntimeStore) => ({
@@ -2,14 +2,12 @@
  display: grid;
  grid-template-columns: 1fr auto;
  gap: $element-spacing;
-  margin-top: $element-inner-spacing;
-}

-.label {
-  font-size: $inner-section-text-size;
-  color: $label-gray;
-
-  &.active {
-    color: $action-text-color;
+  &.withSource {
+    grid-template-columns: auto 1fr auto;
  }
 }
+
+.label.active {
+  color: $action-text-color;
+}
@@ -1,5 +1,6 @@
-import { PropsWithChildren, useEffect, useRef, useState } from 'react';
+import { PropsWithChildren, ReactNode, useEffect, useRef, useState } from 'react';

+import * as Editor from '../../../common/components/editor-utils/EditorUtils';
 import Input from '../../../common/components/input/input/Input';
 import { cx } from '../../../common/utils/styleUtils';

@@ -9,12 +10,15 @@ interface InputRowProps {
  label: string;
  placeholder: string;
  text: string;
+  /** whether this text is currently on the audience screen */
  visible: boolean;
  changeHandler: (newValue: string) => void;
+  /** control which picks where the text is shown, rendered before the input */
+  sourcePicker?: ReactNode;
 }

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

  const [value, setValue] = useState(text);
  const inputRef = useRef<HTMLInputElement>(null);
@@ -43,10 +47,11 @@ export default function InputRow(props: PropsWithChildren<InputRowProps>) {

  return (
    <div>
-      <label className={cx([style.label, visible ?? style.active])} htmlFor={label}>
+      <Editor.Label className={cx([style.label, visible && style.active])} htmlFor={label}>
        {label}
-      </label>
-      <div className={style.inputItems}>
+      </Editor.Label>
+      <div className={cx([style.inputItems, sourcePicker && style.withSource])}>
+        {sourcePicker}
        <Input id={label} ref={inputRef} value={value} onChange={handleInputChange} placeholder={placeholder} />
        {children}
      </div>
@@ -0,0 +1,17 @@
+/* the screen state buttons belong with the preview they act on, not with the message inputs.
+   buttons sit in a column to the right of the stage by default; once the container narrows
+   too far for that (e.g. an extracted window resized narrow), they drop into a row below it.
+   the group is sized by its content, not stretched - the preview keeps a fixed shape rather
+   than growing to whatever height the panel happens to have free */
+.screenGroup {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: start;
+  gap: $element-spacing;
+}
+
+@container (max-width: 22rem) {
+  .screenGroup {
+    grid-template-columns: 1fr;
+  }
+}
@@ -1,18 +1,22 @@
+import { SecondarySource } from 'ontime-types';
 import { IoEye, IoEyeOffOutline } from 'react-icons/io5';

 import IconButton from '../../../common/components/buttons/IconButton';
-import {
-  setMessage,
-  useExternalMessageInput as useSecondaryMessageInput,
-  useTimerMessageInput,
-} from '../../../common/hooks/useSocket';
+import Select from '../../../common/components/select/Select';
+import { setMessage, useSecondaryMessageInput, useTimerMessageInput } from '../../../common/hooks/useSocket';
 import InputRow from './InputRow';
-import TimerControlsPreview from './TimerViewControl';
+import ScreenControl from './ScreenControl';
+import TimerPreview from './TimerPreview';
+
+import style from './MessageControl.module.scss';

 export default function MessageControl() {
  return (
    <>
-      <TimerControlsPreview />
+      <div className={style.screenGroup}>
+        <TimerPreview />
+        <ScreenControl />
+      </div>
      <TimerMessageInput />
      <SecondaryInput />
    </>
@@ -24,7 +28,7 @@ function TimerMessageInput() {

  return (
    <InputRow
-      label='Timer Message'
+      label='Timer message'
      placeholder='Message shown fullscreen in stage timer'
      text={text}
      visible={visible}
@@ -32,6 +36,7 @@ function TimerMessageInput() {
    >
      <IconButton
        aria-label='Toggle timer message visibility'
+        aria-pressed={visible}
        onClick={() => setMessage.timerVisible(!visible)}
        variant={visible ? 'primary' : 'subtle'}
      >
@@ -41,31 +46,46 @@ function TimerMessageInput() {
  );
 }

+/**
+ * The secondary line of the stage timer shows one of the aux timers or the secondary message.
+ * The select owns which one, the eye owns whether the line is shown at all.
+ */
 function SecondaryInput() {
-  const { text, visible } = useSecondaryMessageInput();
-
-  const toggleSecondary = () => {
-    if (visible) {
-      setMessage.timerSecondarySource(null);
-    } else {
-      setMessage.timerSecondarySource('secondary');
-    }
-  };
+  const { text, source } = useSecondaryMessageInput();
+  const isShowingSecondaryLine = source !== null;
+  const selectedSource = source ?? 'aux1';

  return (
    <InputRow
-      label='Secondary Message'
+      label='Secondary'
      placeholder='Message shown as secondary text in stage timer'
      text={text}
-      visible={visible}
+      visible={source === 'secondary'}
      changeHandler={(newValue) => setMessage.secondaryMessage(newValue)}
+      sourcePicker={
+        <Select
+          value={selectedSource}
+          options={[
+            { value: 'aux1', label: 'Aux 1' },
+            { value: 'aux2', label: 'Aux 2' },
+            { value: 'aux3', label: 'Aux 3' },
+            { value: 'secondary', label: 'Message' },
+          ]}
+          onValueChange={(value: SecondarySource | null) => {
+            if (value === null) return;
+            setMessage.timerSecondarySource(value);
+          }}
+        />
+      }
    >
      <IconButton
-        aria-label='Toggle secondary message visibility'
-        onClick={toggleSecondary}
-        variant={visible ? 'primary' : 'subtle'}
+        aria-label='Toggle secondary visibility'
+        aria-pressed={isShowingSecondaryLine}
+        onClick={() => setMessage.timerSecondarySource(isShowingSecondaryLine ? null : selectedSource)}
+        variant={isShowingSecondaryLine ? 'primary' : 'subtle'}
+        data-testid='toggle secondary'
      >
-        {visible ? <IoEye /> : <IoEyeOffOutline />}
+        {isShowingSecondaryLine ? <IoEye /> : <IoEyeOffOutline />}
      </IconButton>
    </InputRow>
  );
@@ -1,8 +1,21 @@
 .growPanel {
  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* the extracted route has no flex parent to grow into */
+.extractedPanel {
+  height: 100%;
 }

 .contentLayout {
+  flex: 1;
+  min-height: 0;
+  container-type: inline-size;
+
  display: flex;
  flex-direction: column;
  gap: $section-spacing;
@@ -5,6 +5,7 @@ import ErrorBoundary from '../../../common/components/error-boundary/ErrorBounda
 import ViewNavigationMenu from '../../../common/components/navigation-menu/ViewNavigationMenu';
 import ProtectRoute from '../../../common/components/protect-route/ProtectRoute';
 import { handleLinks } from '../../../common/utils/linkUtils';
+import { cx } from '../../../common/utils/styleUtils';
 import { getIsNavigationLocked } from '../../../externals';
 import MessageControl from './MessageControl';

@@ -16,7 +17,10 @@ function MessageControlExport() {

  return (
    <ProtectRoute permission='editor'>
-      <Editor.Panel className={style.growPanel} data-testid='panel-messages-control'>
+      <Editor.Panel
+        className={cx([style.growPanel, isExtracted && style.extractedPanel])}
+        data-testid='panel-messages-control'
+      >
        {!isExtracted && <Editor.CornerExtract onClick={(event) => handleLinks('messagecontrol', event)} />}
        {isExtracted && <ViewNavigationMenu suppressSettings isNavigationLocked={getIsNavigationLocked()} />}

@@ -0,0 +1,14 @@
+.screenControl {
+  display: grid;
+  grid-auto-flow: row;
+  gap: $element-spacing;
+  width: 8rem;
+}
+
+@container (max-width: 22rem) {
+  .screenControl {
+    grid-auto-flow: column;
+    grid-auto-columns: 1fr;
+    width: 100%;
+  }
+}
@@ -0,0 +1,40 @@
+import Button from '../../../common/components/buttons/Button';
+import { setMessage, useScreenControl } from '../../../common/hooks/useSocket';
+
+import style from './ScreenControl.module.scss';
+
+export default function ScreenControl() {
+  const { blackout, blink, isScreenModified } = useScreenControl();
+
+  return (
+    <div className={style.screenControl}>
+      <Button
+        variant={blink ? 'primary' : 'subtle'}
+        aria-pressed={blink}
+        fluid
+        onClick={() => setMessage.timerBlink(!blink)}
+        data-testid='toggle timer blink'
+      >
+        Blink
+      </Button>
+      <Button
+        variant={blackout ? 'destructive' : 'subtle'}
+        aria-pressed={blackout}
+        fluid
+        onClick={() => setMessage.timerBlackout(!blackout)}
+        data-testid='toggle timer blackout'
+      >
+        Blackout
+      </Button>
+      <Button
+        variant='subtle'
+        fluid
+        disabled={!isScreenModified}
+        onClick={() => setMessage.clearScreen()}
+        data-testid='clear screen'
+      >
+        Clear screen
+      </Button>
+    </div>
+  );
+}
@@ -1,49 +1,26 @@
-.preview {
-  background-color: $ui-black;
-  display: grid;
-  place-content: center;
-  text-align: center;
-  position: relative;
-}
-
-.mainContent {
-  font-size: 1rem;
-  font-weight: 600;
+/* fixed shape, not stretched to whatever height the panel has free - it fills the
+   available width and keeps a 16:9 proportion, which is also what the font size
+   estimate in the embedded timer assumes */
+.stage {
  width: 100%;
-  color: var(--override-colour, $ui-white);
-
-  &[data-phase='pending'] {
-    color: $ontime-roll;
-  }
-  &[data-phase='overtime'] {
-    color: $playback-negative;
-  }
-  &[data-phase='none'] {
-    opacity: $opacity-disabled;
-  }
+  aspect-ratio: 16 / 9;
+  min-width: 0;
+  position: relative;
+  /* a query container so that the embedded timer scales to the preview, not to the viewport */
+  container-type: size;
+  contain: paint;
+  overflow: hidden;
+  border-radius: $component-border-radius-md;
 }

-.secondaryContent {
-  border-top: 1px solid $white-7;
-}
-
-.blackout {
-  display: none;
-}
-
-.eventStatus {
+/* editor chrome sits above the blackout and message overlays, so it stays reachable and readable */
+.stageChrome {
  position: absolute;
-  left: 0;
-  margin: 0.5rem 0.25rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
+  inset: 0;
+  z-index: calc($zindex-floating + 2);
+  pointer-events: none;

-.statusIcon {
-  color: $gray-1000;
-
-  &[data-active='true'] {
-    color: $active-indicator;
+  > * {
+    pointer-events: auto;
  }
 }
@@ -1,110 +1,21 @@
-import { TimerPhase, TimerType } from 'ontime-types';
-import { IoArrowDown, IoArrowUp, IoBan, IoTime } from 'react-icons/io5';
-import { LuArrowDownToLine } from 'react-icons/lu';
-
 import { CornerWithPip } from '../../../common/components/editor-utils/EditorUtils';
-import Tooltip from '../../../common/components/tooltip/Tooltip';
 import useViewSettings from '../../../common/hooks-query/useViewSettings';
-import { useMessagePreview } from '../../../common/hooks/useSocket';
 import { handleLinks } from '../../../common/utils/linkUtils';
-import { cx, timerPlaceholder } from '../../../common/utils/styleUtils';
 import PipRoot from '../../../views/editor/pip-timer/PipRoot';
+import { PipTimer } from '../../../views/editor/pip-timer/PipTimer';
+import TimerStatus from './TimerStatus';

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

-const secondarySourceLabels: Record<string, string> = {
-  aux1: 'Aux 1',
-  aux2: 'Aux 2',
-  aux3: 'Aux 3',
-  secondary: 'Secondary message',
-};
-
 export default function TimerPreview() {
-  const { blink, blackout, countToEnd, phase, secondarySource, showTimerMessage, timerType } = useMessagePreview();
  const { data } = useViewSettings();

-  const main = (() => {
-    if (showTimerMessage) return 'Message';
-    if (timerType === TimerType.None) return timerPlaceholder;
-    if (phase === TimerPhase.Pending) return 'Standby to start';
-    if (phase === TimerPhase.Overtime) return 'Timer Overtime';
-    if (timerType === TimerType.Clock) return 'Clock';
-    if (countToEnd) return 'Count to End';
-    return 'Timer';
-  })();
-
-  const secondary = (() => {
-    // message is a fullscreen overlay or secondary is not active
-    if (showTimerMessage || !secondarySource) return null;
-
-    // we need to check aux first since it takes priority
-    return secondarySourceLabels[secondarySource];
-  })();
-
-  const overrideColour = (() => {
-    // override fallback colours from starter project
-    if (phase === TimerPhase.Warning) return data.warningColor ?? '#ffa528';
-    if (phase === TimerPhase.Danger) return data.dangerColor ?? '#ff7300';
-    return data.normalColor ?? '#FFFC';
-  })();
-
-  const showColourOverride = main == 'Timer';
-  const contentClasses = cx([blink && style.blink, blackout && style.blackout]);
-
  return (
-    <div className={style.preview}>
-      <CornerWithPip onExtractClick={(event) => handleLinks('timer', event)} pipElement={<PipRoot />} />
-      <div className={contentClasses}>
-        <div
-          className={style.mainContent}
-          data-phase={showColourOverride && phase}
-          style={showColourOverride ? { '--override-colour': overrideColour } : {}}
-        >
-          {main}
-        </div>
-        {secondary !== null && <div className={style.secondaryContent}>{secondary}</div>}
-      </div>
-      <div className={style.eventStatus}>
-        <Tooltip
-          text='Time type: Count down'
-          render={<span />}
-          className={style.statusIcon}
-          data-active={timerType === TimerType.CountDown}
-        >
-          <IoArrowDown />
-        </Tooltip>
-        <Tooltip
-          text='Time type: Count up'
-          render={<span />}
-          className={style.statusIcon}
-          data-active={timerType === TimerType.CountUp}
-        >
-          <IoArrowUp />
-        </Tooltip>
-        <Tooltip
-          text='Time type: Clock'
-          render={<span />}
-          className={style.statusIcon}
-          data-active={timerType === TimerType.Clock}
-        >
-          <IoTime />
-        </Tooltip>
-        <Tooltip
-          text='Time type: None'
-          render={<span />}
-          className={style.statusIcon}
-          data-active={timerType === TimerType.None}
-        >
-          <IoBan />
-        </Tooltip>
-        <Tooltip
-          text={countToEnd ? 'Count to end' : 'Count duration'}
-          render={<span />}
-          className={style.statusIcon}
-          data-active={countToEnd}
-        >
-          <LuArrowDownToLine />
-        </Tooltip>
+    <div className={style.stage}>
+      <PipTimer viewSettings={data} />
+      <div className={style.stageChrome}>
+        <TimerStatus />
+        <CornerWithPip onExtractClick={(event) => handleLinks('timer', event)} pipElement={<PipRoot />} />
      </div>
    </div>
  );
@@ -0,0 +1,17 @@
+.timerStatus {
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin: 0.5rem 0.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.statusIcon {
+  color: $gray-1000;
+
+  &[data-active='true'] {
+    color: $active-indicator;
+  }
+}
@@ -0,0 +1,58 @@
+import { TimerType } from 'ontime-types';
+import { IoArrowDown, IoArrowUp, IoBan, IoTime } from 'react-icons/io5';
+import { LuArrowDownToLine } from 'react-icons/lu';
+
+import Tooltip from '../../../common/components/tooltip/Tooltip';
+import { useTimerStatus } from '../../../common/hooks/useSocket';
+
+import style from './TimerStatus.module.scss';
+
+/** Read only summary of how the loaded event drives the stage timer */
+export default function TimerStatus() {
+  const { countToEnd, timerType } = useTimerStatus();
+
+  return (
+    <div className={style.timerStatus}>
+      <Tooltip
+        text='Time type: Count down'
+        render={<span />}
+        className={style.statusIcon}
+        data-active={timerType === TimerType.CountDown}
+      >
+        <IoArrowDown />
+      </Tooltip>
+      <Tooltip
+        text='Time type: Count up'
+        render={<span />}
+        className={style.statusIcon}
+        data-active={timerType === TimerType.CountUp}
+      >
+        <IoArrowUp />
+      </Tooltip>
+      <Tooltip
+        text='Time type: Clock'
+        render={<span />}
+        className={style.statusIcon}
+        data-active={timerType === TimerType.Clock}
+      >
+        <IoTime />
+      </Tooltip>
+      <Tooltip
+        text='Time type: None'
+        render={<span />}
+        className={style.statusIcon}
+        data-active={timerType === TimerType.None}
+      >
+        <IoBan />
+      </Tooltip>
+      <Tooltip
+        text={countToEnd ? 'Count to end' : 'Count duration'}
+        render={<span />}
+        className={style.statusIcon}
+        data-active={countToEnd}
+      >
+        <LuArrowDownToLine />
+      </Tooltip>
+    </div>
+  );
+}
@@ -1,11 +0,0 @@
-.previewContainer {
-  display: grid;
-  gap: $element-spacing;
-  grid-template-columns: 3fr 2fr;
-}
-
-.options {
-  display: flex;
-  flex-direction: column;
-  gap: $element-spacing;
-}
@@ -1,92 +0,0 @@
-import { SecondarySource } from 'ontime-types';
-import { useEffect, useState } from 'react';
-
-import Button from '../../../common/components/buttons/Button';
-import * as Editor from '../../../common/components/editor-utils/EditorUtils';
-import Select from '../../../common/components/select/Select';
-import { setMessage, useTimerViewControl } from '../../../common/hooks/useSocket';
-import TimerPreview from './TimerPreview';
-
-import style from './TimerViewControl.module.scss';
-
-export default function TimerControlsPreview() {
-  const { blackout, blink } = useTimerViewControl();
-
-  return (
-    <div className={style.previewContainer}>
-      <TimerPreview />
-      <div className={style.options}>
-        <SecondarySourceControl />
-
-        <Editor.Separator orientation='horizontal' />
-
-        <Button
-          variant={blink ? 'primary' : 'subtle'}
-          fluid
-          onClick={() => setMessage.timerBlink(!blink)}
-          data-testid='toggle timer blink'
-        >
-          Blink
-        </Button>
-        <Button
-          variant={blackout ? 'primary' : 'subtle'}
-          fluid
-          onClick={() => setMessage.timerBlackout(!blackout)}
-          data-testid='toggle timer blackout'
-        >
-          Blackout screen
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-function SecondarySourceControl() {
-  const { secondarySource } = useTimerViewControl();
-  const [value, setValue] = useState<SecondarySource>('aux1');
-
-  // sync secondary source with external changes
-  useEffect(() => {
-    if (secondarySource !== null) {
-      setValue(secondarySource);
-    }
-  }, [secondarySource]);
-
-  const toggleSecondary = () => {
-    if (secondarySource === value) {
-      setMessage.timerSecondarySource(null);
-    } else {
-      setMessage.timerSecondarySource(value);
-    }
-  };
-
-  return (
-    <>
-      <Select
-        value={value}
-        options={[
-          { value: 'aux1', label: 'Aux 1' },
-          { value: 'aux2', label: 'Aux 2' },
-          { value: 'aux3', label: 'Aux 3' },
-          { value: 'secondary', label: 'Secondary message' },
-        ]}
-        onValueChange={(value: SecondarySource | null) => {
-          if (value === null) return;
-          // we can only update the remote if it is enabled
-          if (secondarySource !== null) {
-            setMessage.timerSecondarySource(value);
-          }
-          setValue(value);
-        }}
-      />
-      <Button
-        variant={secondarySource !== null ? 'primary' : 'subtle'}
-        fluid
-        onClick={toggleSecondary}
-        data-testid='toggle secondary'
-      >
-        Show secondary
-      </Button>
-    </>
-  );
-}
@@ -3,7 +3,6 @@ import { useCallback, useState } from 'react';
 import { IoClose } from 'react-icons/io5';

 import Button from '../../common/components/buttons/Button';
-import ToggleButton from '../../common/components/buttons/ToggleButton';
 import { clearLogs, useLogData } from '../../common/stores/logger';
 import { cx } from '../../common/utils/styleUtils';
 import * as Panel from '../app-settings/panel-utils/PanelUtils';
@@ -56,60 +55,72 @@ export default function Log() {
    <div className={cx([style.container, isExtracted && style.extracted])}>
      <Panel.InlineElements className={style.buttonBar}>
        <span className={style.filterLabel}>Filter by</span>
-        <ToggleButton
-          pressed={showUser}
+        <Button
+          variant={showUser ? 'primary' : 'subtle'}
          size='small'
+          aria-pressed={showUser}
+          aria-label={`${showUser ? 'Hide' : 'Show'} ${LogOrigin.User} events`}
          onClick={() => setShowUser((s) => !s)}
          onAuxClick={() => disableOthers(LogOrigin.User)}
          onContextMenu={(e) => e.preventDefault()}
        >
          {LogOrigin.User}
-        </ToggleButton>
-        <ToggleButton
-          pressed={showClient}
+        </Button>
+        <Button
+          variant={showClient ? 'primary' : 'subtle'}
          size='small'
+          aria-pressed={showClient}
+          aria-label={`${showClient ? 'Hide' : 'Show'} ${LogOrigin.Client} events`}
          onClick={() => setShowClient((s) => !s)}
          onAuxClick={() => disableOthers(LogOrigin.Client)}
          onContextMenu={(e) => e.preventDefault()}
        >
          {LogOrigin.Client}
-        </ToggleButton>
-        <ToggleButton
-          pressed={showServer}
+        </Button>
+        <Button
+          variant={showServer ? 'primary' : 'subtle'}
          size='small'
+          aria-pressed={showServer}
+          aria-label={`${showServer ? 'Hide' : 'Show'} ${LogOrigin.Server} events`}
          onClick={() => setShowServer((s) => !s)}
          onAuxClick={() => disableOthers(LogOrigin.Server)}
          onContextMenu={(e) => e.preventDefault()}
        >
          {LogOrigin.Server}
-        </ToggleButton>
-        <ToggleButton
-          pressed={showPlayback}
+        </Button>
+        <Button
+          variant={showPlayback ? 'primary' : 'subtle'}
          size='small'
+          aria-pressed={showPlayback}
+          aria-label={`${showPlayback ? 'Hide' : 'Show'} ${LogOrigin.Playback} events`}
          onClick={() => setShowPlayback((s) => !s)}
          onAuxClick={() => disableOthers(LogOrigin.Playback)}
          onContextMenu={(e) => e.preventDefault()}
        >
          {LogOrigin.Playback}
-        </ToggleButton>
-        <ToggleButton
-          pressed={showRx}
+        </Button>
+        <Button
+          variant={showRx ? 'primary' : 'subtle'}
          size='small'
+          aria-pressed={showRx}
+          aria-label={`${showRx ? 'Hide' : 'Show'} ${LogOrigin.Rx} events`}
          onClick={() => setShowRx((s) => !s)}
          onAuxClick={() => disableOthers(LogOrigin.Rx)}
          onContextMenu={(e) => e.preventDefault()}
        >
          {LogOrigin.Rx}
-        </ToggleButton>
-        <ToggleButton
-          pressed={showTx}
+        </Button>
+        <Button
+          variant={showTx ? 'primary' : 'subtle'}
          size='small'
+          aria-pressed={showTx}
+          aria-label={`${showTx ? 'Hide' : 'Show'} ${LogOrigin.Tx} events`}
          onClick={() => setShowTx((s) => !s)}
          onAuxClick={() => disableOthers(LogOrigin.Tx)}
          onContextMenu={(e) => e.preventDefault()}
        >
          {LogOrigin.Tx}
-        </ToggleButton>
+        </Button>
        <Button variant='subtle-destructive' size='small' onClick={clearLogs} className={style.apart}>
          <IoClose /> Clear
        </Button>
@@ -18,12 +18,6 @@
  padding-bottom: 95vh;
 }

-.groupSection {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
 .editPrompt {
  position: fixed;
  z-index: $zindex-dialog;
@@ -1,5 +1,5 @@
 import { OntimeView, isOntimeEvent, isOntimeGroup } from 'ontime-types';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';

 import EmptyFill from '../../common/components/state/EmptyFill';
 import EmptyPage from '../../common/components/state/EmptyPage';
@@ -25,10 +25,7 @@ import { OperatorData, useOperatorData } from './useOperatorData';

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

-/** Keeps the running event clear of the list edge when no group header is pinned above it */
-const edgeOffset = 50;
-/** How far the running event may drift from where we placed it before we stop following */
-const followTolerance = 50;
+const selectedOffset = 50;

 export default function OperatorLoader() {
  const { data, status } = useOperatorData();
@@ -57,20 +54,11 @@ function Operator({ rundown, rundownMetadata, customFields, settings }: Operator
  const [lockAutoScroll, setLockAutoScroll] = useState(false);
  const selectedRef = useRef<HTMLDivElement | null>(null);
  const scrollRef = useRef<HTMLDivElement | null>(null);
-  const stickyHeaderRef = useRef<HTMLDivElement | null>(null);
-
-  // The header height varies with the viewport, so measure it at scroll time.
-  const getTopOffset = useCallback(() => {
-    const header = stickyHeaderRef.current;
-    // Sit right under the pinned header, so it covers the previous event instead of half of it.
-    return header ? header.offsetHeight + 2 : edgeOffset;
-  }, []);
-
  const scrollToComponent = useFollowComponent({
    followRef: selectedRef,
    scrollRef,
    doFollow: !lockAutoScroll,
-    getTopOffset,
+    topOffset: selectedOffset,
    followTrigger: selectedEventId,
  });

@@ -94,16 +82,15 @@ function Operator({ rundown, rundownMetadata, customFields, settings }: Operator

  // prevent considering automated scrolls as user scrolls
  const handleUserScroll = () => {
-    if (!selectedRef.current || !scrollRef.current) {
-      return;
+    if (selectedRef?.current && scrollRef?.current) {
+      const selectedRect = selectedRef.current.getBoundingClientRect();
+      const scrollerRect = scrollRef.current.getBoundingClientRect();
+      if (selectedRect && scrollerRect) {
+        const distanceFromTop = selectedRect.top - scrollerRect.top;
+        const hasScrolledOutOfThreshold = distanceFromTop < -8 || distanceFromTop > selectedOffset;
+        setLockAutoScroll(hasScrolledOutOfThreshold);
+      }
    }
-
-    const selectedRect = selectedRef.current.getBoundingClientRect();
-    const scrollerRect = scrollRef.current.getBoundingClientRect();
-    // Measure the drift from where an automated scroll would place the event.
-    const distanceFromTop = selectedRect.top - scrollerRect.top - getTopOffset();
-    const hasScrolledOutOfThreshold = distanceFromTop < -8 || distanceFromTop > followTolerance;
-    setLockAutoScroll(hasScrolledOutOfThreshold);
  };
  const throttledHandleScroll = throttle(handleUserScroll, 1000);

@@ -199,9 +186,9 @@ function Operator({ rundown, rundownMetadata, customFields, settings }: Operator
              }

              return (
-                <div className={style.groupSection} key={entry.id}>
+                <Fragment key={entry.id}>
                  <OperatorGroup
-                    ref={isCurrentParent ? stickyHeaderRef : undefined}
+                    key={entry.id}
                    title={entry.title}
                    colour={entry.colour}
                    count={entry.entries.length}
@@ -252,7 +239,7 @@ function Operator({ rundown, rundownMetadata, customFields, settings }: Operator
                      />
                    );
                  })}
-                </div>
+                </Fragment>
              );
            }
            return null;
@@ -1,7 +1,6 @@
 .group {
  width: 100%;
-  /* Fixed: title and meta never wrap, and the group wrapper keeps the list from shrinking the header. */
-  height: 2.5rem;
+  min-height: 2.5rem;
  padding: 0.4rem 0.75rem;
  border-left: 0.35rem solid var(--group-colour, $gray-500);
  background-color: $gray-1350;
@@ -9,11 +8,6 @@
  font-size: 1.25rem;
  font-weight: 600;

-  position: sticky;
-  /* Cover the list padding so rows cannot scroll above the header. */
-  top: -0.25rem;
-  z-index: 1;
-
  display: flex;
  align-items: center;
  gap: 1rem;
@@ -1,4 +1,4 @@
-import { type CSSProperties, type Ref, memo } from 'react';
+import { CSSProperties, memo } from 'react';

 import { getAccessibleColour } from '../../../common/utils/styleUtils';
 import { formatDuration } from '../../../common/utils/time';
@@ -10,16 +10,15 @@ interface OperatorGroup {
  colour: string;
  count: number;
  duration: number;
-  ref?: Ref<HTMLDivElement>;
 }

 export default memo(OperatorGroup);
-function OperatorGroup({ title, colour, count, duration, ref }: OperatorGroup) {
+function OperatorGroup({ title, colour, count, duration }: OperatorGroup) {
  const groupColour = colour || '#929292';
  const groupColours = getAccessibleColour(groupColour);

  return (
-    <div className={style.group} style={{ ...groupColours, '--group-colour': groupColour } as CSSProperties} ref={ref}>
+    <div className={style.group} style={{ ...groupColours, '--group-colour': groupColour } as CSSProperties}>
      <span className={style.title}>{title}</span>
      <span className={style.meta}>
        <span>{`${count} ${count === 1 ? 'event' : 'events'}`}</span>
@@ -8,16 +8,10 @@ export default memo(FinderPlacement);
 function FinderPlacement() {
  const [isOpen, handler] = useDisclosure();

-  /**
-   * The empty tagsToIgnore is significant: by default the hook skips input elements,
-   * which would make the shortcut dead while editing an entry.
-   *
-   * This opens rather than toggles. Toggling on a key that also mounts and unmounts the
-   * dialog races against it, and browsers treat a repeated find shortcut as "focus the
-   * search again" rather than "close it". The finder selects its input instead, and
-   * Escape closes.
-   */
-  useHotkeys([['mod + f', handler.open, { preventDefault: true }]], []);
+  useHotkeys([
+    ['mod + f', handler.toggle, { preventDefault: true }],
+    ['Escape', handler.close, { preventDefault: true }],
+  ]);

  if (isOpen) {
    return <Finder isOpen={isOpen} onClose={handler.close} />;
@@ -312,7 +312,6 @@ export default function RundownEvent({
      onClick={handleFocusClick}
      onContextMenu={onContextMenu}
      data-testid='rundown-event'
-      data-selected={isSelected}
      {...(isPlaying ? { 'data-running': true } : {})}
    >
      <RundownIndicators timeStart={timeStart} delay={delay} gap={gap} isNextDay={isNextDay} />
@@ -100,20 +100,7 @@ $item-height: 3.5rem;
    flex-direction: column;
    overflow-y: auto;

-    padding-bottom: 95vh;
-  }
-
-  /* Flex prevents row margins collapsing and bounds the sticky header to its group. */
-  .sub-section {
-    display: flex;
-    flex-direction: column;
-
-    /* The select view renders the same cards in a flat list. */
-    .sub--group {
-      position: sticky;
-      top: 0;
-      z-index: 1;
-    }
+    padding-bottom: max(8rem, calc(5rem + env(safe-area-inset-bottom)));
  }

  /* ====================== LIST-ITEM ======================*/
@@ -209,14 +196,9 @@ $item-height: 3.5rem;

  .sub--group {
    box-shadow: inset 0 0 0 1px var(--user-color, $gray-1325);
-    /* The opaque base prevents rows showing through; background shorthand cannot layer this colour. */
-    background-color: var(--background-color-override, $viewer-background-color);
-    background-image:
+    background:
      linear-gradient(90deg, color-mix(in srgb, var(--user-color, transparent) 18%, transparent), transparent 42%),
-      linear-gradient(
-        var(--card-background-color-override, $viewer-card-bg-color),
-        var(--card-background-color-override, $viewer-card-bg-color)
-      );
+      var(--card-background-color-override, $viewer-card-bg-color);

    .sub__binder {
      background: var(--user-color, var(--card-background-color-override, $viewer-card-bg-color));
@@ -248,16 +230,6 @@ $item-height: 3.5rem;
    }
  }

-  /* Reserve the green fill for the running event. */
-  .sub--group.sub--live {
-    box-shadow: inset 0 0 0 2px $active-green;
-  }
-
-  /* Keep the armed state quieter than the live ring. */
-  .sub--group.sub--armed {
-    box-shadow: inset 0 0 0 2px $gray-1000;
-  }
-
  .sub__title {
    grid-area: title;
    padding-bottom: 0.5rem;
@@ -1,6 +1,6 @@
 import { MaybeNumber, OntimeEvent } from 'ontime-types';
 import { dayInMs } from 'ontime-utils';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { IoPencil } from 'react-icons/io5';

 import Button from '../../common/components/buttons/Button';
@@ -22,7 +22,6 @@ import {
  CountdownTarget,
  extendEventData,
  getIsLive,
-  groupSubscriptionTargets,
  isOutsideRange,
  preferredFormat12,
  preferredFormat24,
@@ -49,22 +48,11 @@ export default function CountdownSubscriptions({ subscribedEvents, goToEditMode
  const [lockAutoScroll, setLockAutoScroll] = useState(false);
  const selectedRef = useRef<HTMLDivElement | null>(null);
  const scrollRef = useRef<HTMLDivElement | null>(null);
-  const stickyHeaderRef = useRef<HTMLDivElement | null>(null);
-
-  const sections = useMemo(() => groupSubscriptionTargets(subscribedEvents), [subscribedEvents]);
-
-  // Responsive sizing and wrapped titles make the sticky header height variable, so measure it at scroll time.
-  const getStickyOffset = useCallback(() => {
-    const header = stickyHeaderRef.current;
-    // Preserve the combined margins between the header and running event.
-    return header ? header.offsetHeight + 4 : 0;
-  }, []);
-
  const scrollToComponent = useFollowComponent({
    followRef: selectedRef,
    scrollRef,
    doFollow: !lockAutoScroll,
-    getTopOffset: getStickyOffset,
+    topOffset: 0,
    followTrigger: selectedEventId,
  });

@@ -87,16 +75,15 @@ export default function CountdownSubscriptions({ subscribedEvents, goToEditMode

  // prevent considering automated scrolls as user scrolls
  const handleUserScroll = () => {
-    if (!selectedRef.current || !scrollRef.current) {
-      return;
+    if (selectedRef?.current && scrollRef?.current) {
+      const selectedRect = selectedRef.current.getBoundingClientRect();
+      const scrollerRect = scrollRef.current.getBoundingClientRect();
+      if (selectedRect && scrollerRect) {
+        const distanceFromTop = selectedRect.top - scrollerRect.top;
+        const hasScrolledOutOfThreshold = distanceFromTop < -8 || distanceFromTop > 50;
+        setLockAutoScroll(hasScrolledOutOfThreshold);
+      }
    }
-
-    const selectedRect = selectedRef.current.getBoundingClientRect();
-    const scrollerRect = scrollRef.current.getBoundingClientRect();
-    // Keep the threshold relative to the visible rows below the sticky header.
-    const distanceFromTop = selectedRect.top - scrollerRect.top - getStickyOffset();
-    const hasScrolledOutOfThreshold = distanceFromTop < -8 || distanceFromTop > 50;
-    setLockAutoScroll(hasScrolledOutOfThreshold);
  };
  const throttledHandleScroll = throttle(handleUserScroll, 1000);

@@ -111,63 +98,41 @@ export default function CountdownSubscriptions({ subscribedEvents, goToEditMode

  return (
    <div className='list-container' onWheel={handleScroll} onTouchMove={handleScroll} ref={scrollRef}>
-      {sections.map((section) => {
-        const rows = section.group ? [section.group, ...section.events] : section.events;
-        // the running event anchors the scroll, the group header stays pinned above it
-        const anchorId = section.events.find((event) => getIsLive(event.id, selectedEventId, playback))?.id ?? null;
-
+      {subscribedEvents.map((event) => {
+        // while a group is live, surface the running event's title as the secondary line
+        const liveTitle = event.isGroup && event.liveEntry ? event.liveEntry.title : undefined;
+        const secondaryData = liveTitle ?? getPropertyValue(event, secondarySource);
+        const isGroupedEvent = !event.isGroup && Boolean(event.parent);
+        const activeEntryId = event.isGroup ? (event.liveEntry?.id ?? event.targetId) : event.id;
+        // a subscribed group is live when any of its children is the selected/running event
+        const isLive = activeEntryId ? getIsLive(activeEntryId, selectedEventId, playback) : false;
+        const isArmed = !isLive && activeEntryId === selectedEventId;
+        const countdownEvent = extendEventData(event, currentDay, actualStart, plannedStart, offset, mode, reportData);
+        const displayTitle = getPropertyValue(event, mainSource ?? 'title');
        return (
-          <div key={section.group?.id ?? rows[0].id} className='sub-section'>
-            {rows.map((event) => {
-              // while a group is live, surface the running event's title as the secondary line
-              const liveTitle = event.isGroup && event.liveEntry ? event.liveEntry.title : undefined;
-              const secondaryData = liveTitle ?? getPropertyValue(event, secondarySource);
-              const isGroupedEvent = !event.isGroup && Boolean(event.parent);
-              const activeEntryId = event.isGroup ? (event.liveEntry?.id ?? event.targetId) : event.id;
-              // a subscribed group is live when any of its children is the selected/running event
-              const isLive = activeEntryId ? getIsLive(activeEntryId, selectedEventId, playback) : false;
-              const isArmed = !isLive && activeEntryId === selectedEventId;
-              // only ever hand the ref to a single row, sharing it would null it out on the next commit
-              const isAnchor = isLive && (anchorId === null || event.id === anchorId);
-              const rowRef = isAnchor ? selectedRef : event.isGroup && anchorId ? stickyHeaderRef : undefined;
-              const countdownEvent = extendEventData(
-                event,
-                currentDay,
-                actualStart,
-                plannedStart,
-                offset,
-                mode,
-                reportData,
-              );
-              const displayTitle = getPropertyValue(event, mainSource ?? 'title');
-
-              return (
-                <div
-                  key={event.id}
-                  ref={rowRef}
-                  className={cx([
-                    'sub',
-                    isLive && 'sub--live',
-                    isArmed && 'sub--armed',
-                    event.isGroup && 'sub--group',
-                    isGroupedEvent && 'sub--in-group',
-                  ])}
-                  data-testid={event.cue}
-                >
-                  <div
-                    className='sub__binder'
-                    style={{ '--user-color': event.colour, '--group-color': event.groupColour ?? 'transparent' }}
-                  />
-                  <ScheduleTime event={countdownEvent} showExpected={showExpected} />
-                  <SubscriptionStatus event={countdownEvent} />
-                  <div className={cx(['sub__title', !displayTitle && 'subdued'])}>
-                    {event.isGroup && <span className='sub__eyebrow'>Group</span>}
-                    {displayTitle}
-                  </div>
-                  {secondaryData && <div className='sub__secondary'>{secondaryData}</div>}
-                </div>
-              );
-            })}
+          <div
+            key={event.id}
+            ref={isLive ? selectedRef : undefined}
+            className={cx([
+              'sub',
+              isLive && 'sub--live',
+              isArmed && 'sub--armed',
+              event.isGroup && 'sub--group',
+              isGroupedEvent && 'sub--in-group',
+            ])}
+            data-testid={event.cue}
+          >
+            <div
+              className='sub__binder'
+              style={{ '--user-color': event.colour, '--group-color': event.groupColour ?? 'transparent' }}
+            />
+            <ScheduleTime event={countdownEvent} showExpected={showExpected} />
+            <SubscriptionStatus event={countdownEvent} />
+            <div className={cx(['sub__title', !displayTitle && 'subdued'])}>
+              {event.isGroup && <span className='sub__eyebrow'>Group</span>}
+              {displayTitle}
+            </div>
+            {secondaryData && <div className='sub__secondary'>{secondaryData}</div>}
          </div>
        );
      })}
@@ -1,7 +1,7 @@
 import { OntimeEntry, OntimeEvent, OntimeGroup, SupportedEntry } from 'ontime-types';

 import { ExtendedEntry } from '../../common/utils/rundownMetadata';
-import { CountdownTarget, groupSubscriptionTargets, resolveSubscriptionTarget } from './countdown.utils';
+import { resolveSubscriptionTarget } from './countdown.utils';

 /**
 * Minimal builders for the extended (metadata enriched) entries the countdown view consumes.
@@ -126,89 +126,3 @@ describe('resolveSubscriptionTarget()', () => {
    expect(result?.liveEntry).toBeNull();
  });
 });
-
-describe('groupSubscriptionTargets()', () => {
-  /**
-   * Resolves a group the same way the view does, so that the tests exercise the real target shape
-   * (a resolved group carries type Event, so the helper cannot rely on the entry type)
-   */
-  function resolveGroup(group: ExtendedEntry<OntimeGroup>, flat: ExtendedEntry<OntimeEntry>[]): CountdownTarget {
-    const resolved = resolveSubscriptionTarget(group, flat);
-    if (resolved === null) {
-      throw new Error('test setup: group has no playable children');
-    }
-    return resolved;
-  }
-
-  it('returns no sections for an empty subscription list', () => {
-    expect(groupSubscriptionTargets([])).toEqual([]);
-  });
-
-  it('gives each ungrouped event its own section', () => {
-    const e1 = makeEvent({ id: 'e1' });
-    const e2 = makeEvent({ id: 'e2' });
-
-    expect(groupSubscriptionTargets([e1, e2])).toEqual([
-      { group: null, events: [e1] },
-      { group: null, events: [e2] },
-    ]);
-  });
-
-  it('absorbs the children of a subscribed group into its section', () => {
-    const group = makeGroup({ id: 'g1' });
-    const c1 = makeEvent({ id: 'c1', parent: 'g1' });
-    const c2 = makeEvent({ id: 'c2', parent: 'g1' });
-    const resolved = resolveGroup(group, [group, c1, c2]);
-
-    expect(groupSubscriptionTargets([resolved, c1, c2])).toEqual([{ group: resolved, events: [c1, c2] }]);
-  });
-
-  it('keeps a subscribed group with no subscribed children as an empty section', () => {
-    const group = makeGroup({ id: 'g1' });
-    const c1 = makeEvent({ id: 'c1', parent: 'g1' });
-    const resolved = resolveGroup(group, [group, c1]);
-
-    expect(groupSubscriptionTargets([resolved])).toEqual([{ group: resolved, events: [] }]);
-  });
-
-  it('does not absorb an event which belongs to a different group', () => {
-    const group1 = makeGroup({ id: 'g1' });
-    const c1 = makeEvent({ id: 'c1', parent: 'g1' });
-    const group2 = makeGroup({ id: 'g2' });
-    const c2 = makeEvent({ id: 'c2', parent: 'g2' });
-    const flat = [group1, c1, group2, c2];
-    const resolved1 = resolveGroup(group1, flat);
-    const resolved2 = resolveGroup(group2, flat);
-
-    expect(groupSubscriptionTargets([resolved1, c1, resolved2, c2])).toEqual([
-      { group: resolved1, events: [c1] },
-      { group: resolved2, events: [c2] },
-    ]);
-  });
-
-  it('does not absorb an event whose parent group is not subscribed', () => {
-    const group1 = makeGroup({ id: 'g1' });
-    const c1 = makeEvent({ id: 'c1', parent: 'g1' });
-    const group2 = makeGroup({ id: 'g2' });
-    const c2 = makeEvent({ id: 'c2', parent: 'g2' });
-    const resolved1 = resolveGroup(group1, [group1, c1, group2, c2]);
-
-    // only the first group is subscribed, so the second group's child stands alone
-    expect(groupSubscriptionTargets([resolved1, c1, c2])).toEqual([
-      { group: resolved1, events: [c1] },
-      { group: null, events: [c2] },
-    ]);
-  });
-
-  it('closes a section when an ungrouped event follows a group', () => {
-    const group = makeGroup({ id: 'g1' });
-    const c1 = makeEvent({ id: 'c1', parent: 'g1' });
-    const e1 = makeEvent({ id: 'e1' });
-    const resolved = resolveGroup(group, [group, c1]);
-
-    expect(groupSubscriptionTargets([resolved, c1, e1])).toEqual([
-      { group: resolved, events: [c1] },
-      { group: null, events: [e1] },
-    ]);
-  });
-});
@@ -252,42 +252,6 @@ export function resolveSubscriptionTarget(
  };
 }

-/**
- * A subscribed group along with the subscribed events which belong to it.
- * Events without a subscribed parent group form their own section with no group.
- */
-export type CountdownSection = {
-  group: CountdownTarget | null;
-  events: CountdownTarget[];
-};
-
-/**
- * Folds the flat, rundown ordered subscription targets into sections.
- * A group opens a section which absorbs the following targets that declare it as parent,
- * which allows the group to be rendered as a sticky header for its own events.
- */
-export function groupSubscriptionTargets(targets: CountdownTarget[]): CountdownSection[] {
-  const sections: CountdownSection[] = [];
-
-  for (const target of targets) {
-    // resolveSubscriptionTarget spreads the first child, so we cannot rely on the entry type here
-    if (target.isGroup) {
-      sections.push({ group: target, events: [] });
-      continue;
-    }
-
-    const previousSection = sections.at(-1);
-    if (previousSection?.group?.id === target.parent) {
-      previousSection.events.push(target);
-      continue;
-    }
-
-    sections.push({ group: null, events: [target] });
-  }
-
-  return sections;
-}
-
 export function extendEventData(
  event: CountdownTarget,
  currentDay: number,
@@ -3,14 +3,11 @@
 .error {
  padding-inline: 0.5rem;
  font-size: 1rem;
-  // rows grow when a match is shown from a note or custom field
-  min-height: 3rem;
-  padding-block: 0.35rem;
+  height: 3rem;

  display: flex;
  align-items: center;
  justify-content: space-between;
-  gap: 0.5rem;
 }

 .entry[data-selected='true'] {
@@ -21,47 +18,21 @@
  color: $label-gray;
 }

-.more {
-  padding-inline: 0.5rem;
-  padding-block: 0.75rem;
-  font-size: calc(1rem - 2px);
-  color: $label-gray;
-  border-top: 1px solid $gray-1000;
-  text-align: center;
-}
-
 .error {
  color: $error-red;
 }

-.filters {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.35rem;
-  padding-top: 0.75rem;
-}
-
-.filterLabel {
-  font-size: calc(1rem - 3px);
-  color: $label-gray;
-  margin-right: 0.15rem;
-}
-
 .data {
  display: grid;
  grid-template-areas:
    'index cue'
-    'index title'
-    'index match';
+    'index title';
  column-gap: 1rem;
  grid-template-rows: min-content 1fr;
-  min-width: 0;

  .index {
    grid-area: index;
-    // background and text colour come from getAccessibleColour, which keeps the
-    // number legible whatever colour the user gave the entry
+    background-color: var(--color, $gray-1000);
    border-radius: 2px;
    padding-block: 0.25rem;
    width: 3.5rem;
@@ -71,33 +42,14 @@

  .title {
    grid-area: title;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
  }

  .cue {
    grid-area: cue;
    font-size: calc(1rem - 2px);
    color: $label-gray;
+    max-height: 1em;
    min-height: 0;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .match {
-    grid-area: match;
-    font-size: calc(1rem - 3px);
-    color: $label-gray;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .matchLabel {
-    color: $ui-white;
-    margin-right: 0.4rem;
  }
 }

@@ -111,14 +63,13 @@
  color: $label-gray;
 }

-.count {
+.filterHint {
  text-align: right;
-  white-space: nowrap;
 }

-.go {
-  white-space: nowrap;
-  padding-left: 1rem;
+.em {
+  color: $ui-white;
+  margin-inline: 0.25rem;
 }

 .hints {
@@ -147,7 +98,7 @@
    flex-direction: column;
  }

-  .count {
+  .filterHint {
    text-align: left;
  }
 }
@@ -1,12 +1,11 @@
-import { MaybeString } from 'ontime-types';
-import { KeyboardEvent, useDeferredValue, useEffect, useRef, useState } from 'react';
+import { useDebouncedCallback } from '@mantine/hooks';
+import { SupportedEntry } from 'ontime-types';
+import { KeyboardEvent, useState } from 'react';

-import ToggleButton from '../../../common/components/buttons/ToggleButton';
 import Input from '../../../common/components/input/input/Input';
 import Kbd from '../../../common/components/kbd/Kbd';
 import Modal from '../../../common/components/modal/Modal';
-import { getAccessibleColour } from '../../../common/utils/styleUtils';
-import useFinder, { FinderResult } from './useFinder';
+import useFinder from './useFinder';

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

@@ -16,76 +15,46 @@ interface FinderProps {
 }

 export default function Finder({ isOpen, onClose }: FinderProps) {
-  const [search, setSearch] = useState('');
-  const [filter, setFilter] = useState<MaybeString>(null);
-  const [selectedId, setSelectedId] = useState<MaybeString>(null);
+  const { find, select, results, error } = useFinder();
+  const [selected, setSelected] = useState(0);

-  /**
-   * Keeps typing responsive while the list re-renders.
-   * The search itself is cheap, rendering the results is what costs.
-   */
-  const deferredSearch = useDeferredValue(search);
-  const { select, results, error, total, filters, appliedFilter } = useFinder(deferredSearch, filter);
-
-  const inputRef = useRef<HTMLInputElement>(null);
-  const activeRef = useRef<HTMLLIElement>(null);
-
-  /**
-   * We track the selection by ID so that it survives the result list changing under us:
-   * an entry that no longer exists falls back to the first result instead of dangling past the end
-   */
-  const activeIndex = Math.max(
-    0,
-    results.findIndex((entry) => entry.id === selectedId),
-  );
-  const activeEntry = results.at(activeIndex);
-
-  /** keep the highlighted entry in view while navigating with the keyboard */
-  useEffect(() => {
-    activeRef.current?.scrollIntoView({ block: 'nearest' });
-  }, [activeEntry?.id]);
+  const debouncedFind = useDebouncedCallback(find, 100);

  const navigate = (event: KeyboardEvent<HTMLDivElement>) => {
-    // pressing the search shortcut again selects the query, ready to be replaced
-    if ((event.metaKey || event.ctrlKey) && event.key === 'f') {
-      event.preventDefault();
-      inputRef.current?.select();
-      return;
-    }
-
    // all operations need results
    if (results.length === 0) {
      return;
    }
    if (event.key === 'ArrowDown') {
-      setSelectedId(results[(activeIndex + 1) % results.length].id);
+      setSelected((prev) => (prev + 1) % results.length);
    }
    if (event.key === 'ArrowUp') {
-      setSelectedId(results[(activeIndex - 1 + results.length) % results.length].id);
+      setSelected((prev) => (prev - 1 + results.length) % results.length);
    }
    if (event.key === 'Enter') {
      event.preventDefault();
      event.stopPropagation();
-      submit(activeEntry);
+      submit();
    }
  };

-  const submit = (entry: FinderResult | undefined) => {
-    if (!entry) {
-      return;
-    }
-    select(entry);
+  const submit = () => {
+    const selectedEvent = results[selected];
+    select(selectedEvent);
    onClose();
  };

-  /** Scopes the search to a single field, or back to all fields when tapped again */
-  const handleFilter = (filterKey: string) => {
-    setFilter((previous) => (previous === filterKey ? null : filterKey));
-    inputRef.current?.focus();
+  const handleMouseMoveEvent = (event: React.MouseEvent<HTMLUListElement>) => {
+    const target = event.target as HTMLElement;
+    const li = target.closest('li');
+    if (li) {
+      const index = Number(li.dataset.index);
+      if (!isNaN(index)) {
+        setSelected(index);
+      }
+    }
  };

-  const hiddenResults = total - results.length;
-
  return (
    <Modal
      title=''
@@ -94,68 +63,35 @@ export default function Finder({ isOpen, onClose }: FinderProps) {
      showBackdrop
      bodyElements={
        <div onKeyDown={navigate}>
-          <Input
-            ref={inputRef}
-            height='large'
-            fluid
-            autoFocus
-            value={search}
-            onChange={(event) => setSearch(event.target.value)}
-            placeholder='Search...'
-          />
-          <div className={style.filters} data-testid='finder-filters'>
-            <span className={style.filterLabel}>Filter by</span>
-            {filters.map((option) => (
-              <ToggleButton
-                key={option.key}
-                pressed={appliedFilter === option.key}
-                size='small'
-                onClick={() => handleFilter(option.key)}
-              >
-                {option.label}
-              </ToggleButton>
-            ))}
-          </div>
-          <ul className={style.scrollContainer}>
+          <Input height='large' fluid onChange={debouncedFind} placeholder='Search...' />
+          <ul className={style.scrollContainer} onMouseMove={handleMouseMoveEvent}>
            {error && <li className={style.error}>{error}</li>}
-            {!error && results.length === 0 && <li className={style.empty}>No results</li>}
-            {results.map((entry) => {
-              const isSelected = activeEntry?.id === entry.id;
-              // the title and cue are already on the row, a match anywhere else needs showing
-              const showMatch = entry.match !== null && entry.match.key !== 'title' && entry.match.key !== 'cue';
+            {results.length === 0 && <li className={style.empty}>No results</li>}
+            {results.length > 0 &&
+              results.map((entry, index) => {
+                const isSelected = selected === index;
+                const displayIndex = entry.type === SupportedEntry.Event ? entry.eventIndex : '-';
+                const displayCue = 'cue' in entry ? entry.cue : '';

-              return (
-                <li
-                  key={entry.id}
-                  ref={isSelected ? activeRef : undefined}
-                  className={style.entry}
-                  data-testid='finder-result'
-                  data-selected={isSelected}
-                  onClick={() => submit(entry)}
-                  onPointerEnter={() => setSelectedId(entry.id)}
-                >
-                  <div className={style.data}>
-                    <div className={style.index} style={getAccessibleColour(entry.colour)}>
-                      {entry.eventIndex ?? '-'}
-                    </div>
-                    <div className={style.cue}>{entry.cue}</div>
-                    <div className={style.title}>{entry.title}</div>
-                    {showMatch && (
-                      <div className={style.match} data-testid='finder-result-match'>
-                        <span className={style.matchLabel}>{entry.match?.label}</span>
-                        {entry.match?.excerpt}
+                return (
+                  <li
+                    key={entry.id}
+                    className={style.entry}
+                    data-selected={isSelected}
+                    data-index={index}
+                    onClick={submit}
+                  >
+                    <div className={style.data}>
+                      <div className={style.index} style={{ '--color': entry.colour }}>
+                        {displayIndex}
                      </div>
-                    )}
-                  </div>
-                  {isSelected && <span className={style.go}>Go ⏎</span>}
-                </li>
-              );
-            })}
-            {hiddenResults > 0 && (
-              <li className={style.more} data-testid='finder-more'>
-                {hiddenResults} more {hiddenResults === 1 ? 'result' : 'results'} — keep typing to narrow the search
-              </li>
-            )}
+                      <div className={style.cue}>{displayCue}</div>
+                      <div className={style.title}>{entry.title}</div>
+                    </div>
+                    {isSelected && <span>Go ⏎</span>}
+                  </li>
+                );
+              })}
          </ul>
        </div>
      }
@@ -176,11 +112,10 @@ export default function Finder({ isOpen, onClose }: FinderProps) {
              Close
            </span>
          </div>
-          {total > 0 && (
-            <div className={style.count} data-testid='finder-count'>
-              {hiddenResults > 0 ? `Showing ${results.length} of ${total}` : `${total} result${total === 1 ? '' : 's'}`}
-            </div>
-          )}
+          <div className={style.filterHint}>
+            Filter by <span className={style.em}>cue</span>, <span className={style.em}>index</span>, or
+            <span className={style.em}>title</span>
+          </div>
        </div>
      }
    />
@@ -1,162 +0,0 @@
-import { CustomFields, OntimeDelay, OntimeEvent, OntimeGroup, OntimeMilestone, SupportedEntry } from 'ontime-types';
-
-import { parseQuery, searchByIndex, searchByText } from './useFinder';
-
-function makeEvent(id: string, overrides: Partial<OntimeEvent> = {}): OntimeEvent {
-  return {
-    type: SupportedEntry.Event,
-    id,
-    cue: '',
-    title: '',
-    note: '',
-    colour: '#000000',
-    custom: {},
-    parent: null,
-    ...overrides,
-  } as OntimeEvent;
-}
-
-function makeGroup(id: string, overrides: Partial<OntimeGroup> = {}): OntimeGroup {
-  return {
-    type: SupportedEntry.Group,
-    id,
-    title: '',
-    note: '',
-    colour: '#000000',
-    custom: {},
-    ...overrides,
-  } as OntimeGroup;
-}
-
-function makeMilestone(id: string, overrides: Partial<OntimeMilestone> = {}): OntimeMilestone {
-  return {
-    type: SupportedEntry.Milestone,
-    id,
-    cue: '',
-    title: '',
-    note: '',
-    colour: '#000000',
-    custom: {},
-    parent: null,
-    ...overrides,
-  } as OntimeMilestone;
-}
-
-function makeDelay(id: string): OntimeDelay {
-  return { type: SupportedEntry.Delay, id, duration: 1000, parent: null };
-}
-
-describe('parseQuery()', () => {
-  const filters = [
-    { key: 'cue', label: 'Cue' },
-    { key: 'Camera_Notes', label: 'Camera Notes' },
-  ];
-
-  it.each([
-    ['cue 12', { filterKey: 'cue', searchString: '12' }],
-    ['cue:12', { filterKey: 'cue', searchString: '12' }],
-    ['camera_notes:wide', { filterKey: 'Camera_Notes', searchString: 'wide' }],
-  ])('parses the field prefix in %s', (searchValue, expected) => {
-    expect(parseQuery(searchValue, filters)).toStrictEqual(expected);
-  });
-
-  it('keeps an unprefixed query as a search across all fields', () => {
-    expect(parseQuery('zebrafish', filters)).toStrictEqual({ filterKey: null, searchString: 'zebrafish' });
-  });
-
-  it('recognises a filter before any search text has been entered', () => {
-    expect(parseQuery('cue', filters)).toStrictEqual({ filterKey: 'cue', searchString: '' });
-  });
-});
-
-describe('searchByText()', () => {
-  const customFields: CustomFields = {
-    Camera_Notes: { type: 'text', label: 'Camera Notes', colour: '#000000' },
-    Slide: { type: 'image', label: 'Slide', colour: '#000000' },
-  };
-
-  it('searches cue, title, note, and text custom fields in rundown order', () => {
-    const data = [
-      makeMilestone('milestone', { cue: 'needle' }),
-      makeGroup('group', { title: 'needle' }),
-      makeEvent('note', { note: 'find the needle here' }),
-      makeEvent('custom', { custom: { Camera_Notes: 'needle' } }),
-    ];
-
-    const outcome = searchByText(data, customFields, null, 'needle');
-
-    expect(outcome.results.map(({ id, match }) => ({ id, field: match?.key }))).toStrictEqual([
-      { id: 'milestone', field: 'cue' },
-      { id: 'group', field: 'title' },
-      { id: 'note', field: 'note' },
-      { id: 'custom', field: 'Camera_Notes' },
-    ]);
-    expect(outcome.total).toBe(4);
-  });
-
-  it('searches only the selected field', () => {
-    const data = [
-      makeEvent('title', { title: 'needle' }),
-      makeEvent('note', { note: 'needle' }),
-      makeEvent('custom', { custom: { Camera_Notes: 'needle' } }),
-    ];
-
-    const outcome = searchByText(data, customFields, 'note', 'needle');
-
-    expect(outcome.results.map((result) => result.id)).toStrictEqual(['note']);
-    expect(outcome.total).toBe(1);
-  });
-
-  it('reports the first matching field so the result can explain why it matched', () => {
-    const data = [makeEvent('event', { cue: 'NEEDLE', title: 'another needle' })];
-
-    const outcome = searchByText(data, customFields, null, 'needle');
-
-    expect(outcome.results[0].match).toStrictEqual({ key: 'cue', label: 'Cue', excerpt: 'NEEDLE' });
-  });
-
-  it('does not search image custom fields', () => {
-    const data = [makeEvent('image-only', { custom: { Slide: 'needle' } })];
-
-    expect(searchByText(data, customFields, null, 'needle')).toStrictEqual({ results: [], error: null, total: 0 });
-  });
-
-  it('reports the full match count while limiting rendered results', () => {
-    const data = Array.from({ length: 51 }, (_, index) => makeEvent(String(index), { title: 'needle' }));
-
-    const outcome = searchByText(data, customFields, null, 'needle');
-
-    expect(outcome.results).toHaveLength(50);
-    expect(outcome.total).toBe(51);
-  });
-});
-
-describe('searchByIndex()', () => {
-  it('counts only events while preserving the flat rundown position', () => {
-    const data = [
-      makeGroup('group'),
-      makeDelay('delay'),
-      makeEvent('first'),
-      makeMilestone('milestone'),
-      makeEvent('second'),
-    ];
-
-    const outcome = searchByIndex(data, '2');
-
-    expect(outcome.results).toHaveLength(1);
-    expect(outcome.results[0]).toMatchObject({ id: 'second', index: 4, eventIndex: 2 });
-    expect(outcome.total).toBe(1);
-  });
-
-  it.each(['0', 'not-a-number'])('rejects invalid index %s', (index) => {
-    expect(searchByIndex([makeEvent('event')], index)).toStrictEqual({
-      results: [],
-      error: 'Invalid index',
-      total: 0,
-    });
-  });
-
-  it('returns no result when the event index is beyond the rundown', () => {
-    expect(searchByIndex([makeEvent('event')], '2')).toStrictEqual({ results: [], error: null, total: 0 });
-  });
-});
@@ -1,259 +1,239 @@
-import {
-  CustomFields,
-  EntryId,
-  MaybeNumber,
-  MaybeString,
-  OntimeEntry,
-  OntimeEvent,
-  OntimeGroup,
-  OntimeMilestone,
-  isOntimeDelay,
-  isOntimeEvent,
-} from 'ontime-types';
-import { useCallback, useMemo } from 'react';
+import { EntryId, MaybeString, SupportedEntry, isOntimeEvent, isOntimeGroup, isOntimeMilestone } from 'ontime-types';
+import { ChangeEvent, useCallback, useEffect, useRef, useState } from 'react';

-import useCustomFields from '../../../common/hooks-query/useCustomFields';
 import { useFlatRundown } from '../../../common/hooks-query/useRundown';
 import { useSelectAndRevealEntry } from '../../../features/rundown/useSelectAndRevealEntry';

-/** How many results we render, the total number of matches is reported separately */
-const maxResults = 50;
-/** Notes can hold a whole script, we only show enough to explain the match */
-const excerptPadding = 40;
+const maxResults = 12;

-const indexFilter = 'index';
-
-/** Everything except delays, which carry no text to search */
-type SearchableEntry = OntimeEvent | OntimeGroup | OntimeMilestone;
-
-type FinderFilter = { key: string; label: string };
-
-/**
- * Offered to the user as filter badges. Index is a positional lookup rather than a
- * text field, so it is handled separately from the fields a search runs over.
- */
-const staticFilters: FinderFilter[] = [
-  { key: indexFilter, label: 'Index' },
-  { key: 'cue', label: 'Cue' },
-  { key: 'title', label: 'Title' },
-  { key: 'note', label: 'Note' },
-];
-
-/** Why an entry matched, so the UI can show the user */
-type FinderMatch = { key: string; label: string; excerpt: string };
-
-export type FinderResult = {
+type FilterableGroup = {
+  type: SupportedEntry.Group;
  id: EntryId;
-  /** position in the flat rundown, which is how the rundown reveals an entry */
  index: number;
-  /** 1-based position among events, null for groups and milestones */
-  eventIndex: MaybeNumber;
  title: string;
-  /** groups have no cue */
+  colour: string;
+};
+
+type FilterableEvent = {
+  type: SupportedEntry.Event;
+  id: EntryId;
+  index: number;
+  eventIndex: number;
+  title: string;
  cue: string;
  colour: string;
  parent: MaybeString;
-  /** absent when the entry was found by index rather than by matching text */
-  match: FinderMatch | null;
 };

-type SearchOutcome = { results: FinderResult[]; error: MaybeString; total: number };
+type FilterableMilestone = {
+  type: SupportedEntry.Milestone;
+  id: EntryId;
+  index: number;
+  title: string;
+  cue: string;
+  colour: string;
+  parent: MaybeString;
+};

-const noResults: SearchOutcome = { results: [], error: null, total: 0 };
+type FilterableEntry = FilterableGroup | FilterableEvent | FilterableMilestone;

-/** Groups are the only searchable entry with neither a cue nor a parent */
-function toResult(entry: SearchableEntry, index: number, eventIndex: MaybeNumber, match: FinderMatch | null) {
-  return {
-    id: entry.id,
-    index,
-    eventIndex,
-    title: entry.title,
-    cue: 'cue' in entry ? entry.cue : '',
-    colour: entry.colour,
-    parent: 'parent' in entry ? entry.parent : null,
-    match,
-  } satisfies FinderResult;
-}
-
-/** Shows enough of a long value for the user to see why it matched */
-function makeExcerpt(value: string, matchIndex: number, searchLength: number): string {
-  const start = Math.max(0, matchIndex - excerptPadding);
-  const end = Math.min(value.length, matchIndex + searchLength + excerptPadding);
-  return `${start > 0 ? '…' : ''}${value.slice(start, end)}${end < value.length ? '…' : ''}`;
-}
-
-/**
- * The first field of an entry to contain the search string, if any.
- * Fields are tried in the order we prefer to report a match.
- */
-function findMatch(
-  entry: SearchableEntry,
-  customFields: CustomFields,
-  filterKey: MaybeString,
-  searchString: string,
-): FinderMatch | null {
-  function check(key: string, label: string, value: string): FinderMatch | null {
-    if (!value || (filterKey !== null && key !== filterKey)) {
-      return null;
-    }
-    const matchIndex = value.toLowerCase().indexOf(searchString);
-    if (matchIndex === -1) {
-      return null;
-    }
-    return { key, label, excerpt: makeExcerpt(value, matchIndex, searchString.length) };
-  }
-
-  // groups have no cue, the rest is common to every searchable entry
-  const fromCue = 'cue' in entry ? check('cue', 'Cue', entry.cue) : null;
-  const match = fromCue ?? check('title', 'Title', entry.title) ?? check('note', 'Note', entry.note);
-  if (match !== null) {
-    return match;
-  }
-
-  // custom fields are named by the project, so these can only be reached generically
-  for (const [key, value] of Object.entries(entry.custom)) {
-    const definition = customFields[key];
-    if (definition?.type !== 'text') {
-      continue;
-    }
-    const custom = check(key, definition.label || key, value);
-    if (custom) return custom;
-  }
-
-  return null;
-}
-
-/**
- * Splits the raw search value into an optional field filter and the text to look for.
- * Both `cue 12` and `cue:12` are accepted so that typing agrees with the filter badges.
- */
-export function parseQuery(searchValue: string, filters: FinderFilter[]) {
-  for (const filter of filters) {
-    // the search value is already lowercased, custom field keys are not
-    const prefix = filter.key.toLowerCase();
-    if (searchValue === prefix) {
-      return { filterKey: filter.key, searchString: '' };
-    }
-    if (searchValue.startsWith(`${prefix} `) || searchValue.startsWith(`${prefix}:`)) {
-      return { filterKey: filter.key, searchString: searchValue.slice(prefix.length + 1).trim() };
-    }
-  }
-  return { filterKey: null, searchString: searchValue };
-}
-
-/** Finds the single event at a 1-based position in the rundown */
-export function searchByIndex(data: OntimeEntry[], indexString: string): SearchOutcome {
-  const target = Number(indexString);
-  if (isNaN(target) || target < 1) {
-    return { ...noResults, error: 'Invalid index' };
-  }
-
-  let eventIndex = 0;
-  for (let i = 0; i < data.length; i++) {
-    const entry = data[i];
-    if (!isOntimeEvent(entry)) {
-      continue;
-    }
-    eventIndex++;
-    if (eventIndex === target) {
-      return { results: [toResult(entry, i, eventIndex, null)], error: null, total: 1 };
-    }
-  }
-
-  return noResults;
-}
-
-/**
- * Matches entries on a single field when one is selected, otherwise on every text field.
- * Results keep rundown order, which keeps them predictable during a show.
- */
-export function searchByText(
-  data: OntimeEntry[],
-  customFields: CustomFields,
-  filterKey: MaybeString,
-  searchString: string,
-): SearchOutcome {
-  const results: FinderResult[] = [];
-  let total = 0;
-  // indexes exposed to the UI are 1-based
-  let eventIndex = 0;
-
-  for (let i = 0; i < data.length; i++) {
-    const entry = data[i];
-    if (isOntimeDelay(entry)) {
-      continue;
-    }
-    const isEvent = isOntimeEvent(entry);
-    if (isEvent) {
-      eventIndex++;
-    }
-
-    const match = findMatch(entry, customFields, filterKey, searchString);
-    if (match === null) {
-      continue;
-    }
-
-    total++;
-    if (results.length < maxResults) {
-      results.push(toResult(entry, i, isEvent ? eventIndex : null, match));
-    }
-  }
-
-  return { results, error: null, total };
-}
-
-/**
- * @param searchValue - the text the user is looking for
- * @param activeFilter - a field selected from the filter badges, if any
- */
-export default function useFinder(searchValue: string, activeFilter: MaybeString) {
+export default function useFinder() {
  const { data, rundownId } = useFlatRundown();
-  const { data: customFields } = useCustomFields();
+  const [results, setResults] = useState<FilterableEntry[]>([]);
+  const [error, setError] = useState<MaybeString>(null);
+  const lastSearchString = useRef('');

  const selectAndRevealEntry = useSelectAndRevealEntry(rundownId);

-  /** The filters offered to the user: the fixed fields plus whatever the project defines */
-  const filters = useMemo<FinderFilter[]>(() => {
-    const customFilters = Object.entries(customFields)
-      .filter(([_key, field]) => field.type === 'text')
-      .map(([key, field]) => ({ key, label: field.label || key }));
-    return [...staticFilters, ...customFilters];
-  }, [customFields]);
+  /** Filters the rundown to a given evaluation */
+  const find = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      if (!data || data.length === 0) {
+        setError('No data');
+        return;
+      }
+      setError(null);

-  const { results, error, total, appliedFilter } = useMemo(() => {
-    if (data.length === 0) {
-      return { ...noResults, error: 'No data', appliedFilter: activeFilter };
-    }
+      if (event.target.value === '') {
+        setResults([]);
+        return;
+      }

-    const normalised = searchValue.trim().toLowerCase();
-    if (normalised === '') {
-      return { ...noResults, appliedFilter: activeFilter };
-    }
+      const searchValue = event.target.value.toLowerCase();
+      lastSearchString.current = searchValue;

-    /**
-     * If a badge is selected it scopes the search; otherwise, keyword prefixes in the input
-     * (e.g. "cue:" / "title:") are parsed and the matching badge is highlighted.
-     */
-    const { filterKey, searchString } = activeFilter
-      ? { filterKey: activeFilter, searchString: normalised }
-      : parseQuery(normalised, filters);
+      if (searchValue.startsWith('index ')) {
+        const searchString = searchValue.slice('index '.length).trim();
+        const { results, error } = searchByIndex(searchString);
+        setResults(results);
+        setError(error);
+        return;
+      }

-    if (filterKey === indexFilter) {
-      return { ...searchByIndex(data, searchString), appliedFilter: filterKey };
-    }
-    if (searchString === '') {
-      // a filter is selected, but there is nothing to match on yet
-      return { ...noResults, appliedFilter: filterKey };
-    }
-    return { ...searchByText(data, customFields, filterKey, searchString), appliedFilter: filterKey };
-  }, [data, customFields, filters, searchValue, activeFilter]);
+      if (searchValue.startsWith('cue ')) {
+        const searchString = searchValue.slice('cue '.length).trim();
+        const { results, error } = searchByCue(searchString);
+        setResults(results);
+        setError(error);
+        return;
+      }
+
+      const searchString = searchValue.startsWith('title ') ? searchValue.slice('title '.length).trim() : searchValue;
+      const { results, error } = searchByTitle(searchString);
+      setResults(results);
+      setError(error);
+
+      /** Returns a single item with a matching index */
+      function searchByIndex(searchString: string) {
+        const searchIndex = Number(searchString);
+        if (isNaN(searchIndex) || searchIndex < 1) {
+          return { results: [], error: 'Invalid index' };
+        }
+
+        if (searchIndex > data.length) {
+          return { results: [], error: null };
+        }
+
+        // indexes exposed to the UI are 1-based
+        let eventIndex = 1;
+        const results: FilterableEvent[] = [];
+        for (let i = 0; i < data.length; i++) {
+          const event = data[i];
+          if (isOntimeEvent(event)) {
+            if (eventIndex === searchIndex) {
+              results.push({
+                type: SupportedEntry.Event,
+                id: event.id,
+                index: i,
+                eventIndex,
+                title: event.title,
+                cue: event.cue,
+                colour: event.colour,
+                parent: event.parent,
+              } satisfies FilterableEvent);
+              break;
+            }
+            eventIndex++;
+          }
+        }
+
+        return { results, error: null };
+      }
+
+      /** Returns maxResults of OntimeEvents that match the cue field */
+      function searchByCue(searchString: string) {
+        // indexes exposed to the UI are 1-based
+        let eventIndex = 1;
+        // limit amount of results we show
+        let remaining = maxResults;
+        const results: FilterableEvent[] = [];
+
+        for (let i = 0; i < data.length; i++) {
+          if (remaining <= 0) {
+            break;
+          }
+          const event = data[i];
+          if (isOntimeEvent(event)) {
+            if (event.cue.toLowerCase().includes(searchString)) {
+              remaining--;
+              results.push({
+                type: SupportedEntry.Event,
+                id: event.id,
+                index: i,
+                eventIndex,
+                title: event.title,
+                cue: event.cue,
+                colour: event.colour,
+                parent: event.parent,
+              } satisfies FilterableEvent);
+            }
+            eventIndex++;
+          }
+        }
+        return { results, error: null };
+      }
+
+      /** Returns maxResults of OntimeEvents that match the title field*/
+      function searchByTitle(searchString: string) {
+        // indexes exposed to the UI are 1-based
+        let eventIndex = 1;
+        // limit amount of results we show
+        let remaining = maxResults;
+        const results: FilterableEntry[] = [];
+
+        for (let i = 0; i < data.length; i++) {
+          if (remaining <= 0) {
+            break;
+          }
+
+          const entry = data[i];
+          if (isOntimeEvent(entry)) {
+            if (entry.title.toLowerCase().includes(searchString)) {
+              remaining--;
+              results.push({
+                type: SupportedEntry.Event,
+                id: entry.id,
+                index: i,
+                eventIndex,
+                title: entry.title,
+                cue: entry.cue,
+                colour: entry.colour,
+                parent: entry.parent,
+              } satisfies FilterableEvent);
+            }
+            eventIndex++;
+          } else if (isOntimeGroup(entry)) {
+            if (entry.title.toLowerCase().includes(searchString)) {
+              remaining--;
+              results.push({
+                type: SupportedEntry.Group,
+                id: entry.id,
+                index: i,
+                title: entry.title,
+                colour: entry.colour,
+              } satisfies FilterableGroup);
+            }
+          } else if (isOntimeMilestone(entry)) {
+            if (entry.title.toLowerCase().includes(searchString)) {
+              remaining--;
+              results.push({
+                type: SupportedEntry.Milestone,
+                id: entry.id,
+                index: i,
+                title: entry.title,
+                cue: entry.cue,
+                colour: entry.colour,
+                parent: entry.parent,
+              } satisfies FilterableMilestone);
+            }
+          }
+        }
+        return { results, error: null };
+      }
+    },
+    [data],
+  );

  const select = useCallback(
-    (result: FinderResult) => {
-      selectAndRevealEntry({ id: result.id, index: result.index, parent: result.parent });
+    (selectedEvent: FilterableEntry) => {
+      selectAndRevealEntry({
+        id: selectedEvent.id,
+        index: selectedEvent.index,
+        parent: 'parent' in selectedEvent ? selectedEvent.parent : null,
+      });
    },
    [selectAndRevealEntry],
  );

-  return { select, results, error, total, filters, appliedFilter };
+  /** clear results when source data changes */
+  useEffect(() => {
+    setResults([]);
+    setError(null);
+    // fake a submit event to re-run the search
+    if (lastSearchString.current) {
+      find({ target: { value: lastSearchString.current } } as ChangeEvent<HTMLInputElement>);
+    }
+  }, [data, find]);
+
+  return { find, select, results, error };
 }
@@ -6,8 +6,9 @@
  padding: 0;
  box-sizing: border-box; /* reset */
  overflow: hidden;
-  width: 100%; /* restrict the page width to viewport */
-  height: 100vh;
+  width: 100%;
+  height: 100%; /* fill the pip window or the editor preview frame */
+  position: relative; /* anchor for the blackout and message overlays */
  transition: opacity 0.5s ease-in-out;

  font-family: $viewer-font-family;
@@ -19,8 +20,8 @@
  flex-direction: column;

  &--finished {
-    outline: clamp(4px, 1vw, 16px) solid $timer-finished-color;
-    outline-offset: calc(clamp(4px, 1vw, 16px) * -1);
+    outline: clamp(4px, 1cqw, 16px) solid $timer-finished-color;
+    outline-offset: calc(clamp(4px, 1cqw, 16px) * -1);
    transition: $viewer-transition-time;
  }

@@ -107,10 +108,24 @@

  /* =================== OVERLAY ===================*/

-  .message-overlay {
-    position: fixed;
+  .blackout {
+    position: absolute;
    inset: 0;
-    padding: 2vw;
+    z-index: 0;
+    background-color: #000;
+    opacity: 0;
+    transition: opacity $viewer-transition-time;
+
+    &--active {
+      z-index: calc($zindex-floating + 1);
+      opacity: 1;
+    }
+  }
+
+  .message-overlay {
+    position: absolute;
+    inset: 0;
+    padding: 2cqw;
    background: $viewer-background-color;
    opacity: 0;
    transition: opacity $viewer-transition-time;
@@ -41,9 +41,10 @@ export function PipTimer({ viewSettings }: PipTimerProps) {
  // gather timer data
  const totalTime = getTotalTime(time.duration, time.addedTime);
  const stageTimer = getTimerByType(false, timerTypeNow, clock, time, timerTypeNow);
+  // match the defaults of the timer view, which is what the preview is standing in for
  const display = getFormattedTimer(stageTimer, timerTypeNow, 'min', {
    removeSeconds: false,
-    removeLeadingZero: false,
+    removeLeadingZero: true,
  });

  const currentAux = (() => {
@@ -63,23 +64,27 @@ export function PipTimer({ viewSettings }: PipTimerProps) {

  // gather presentation styles
  const resolvedTimerColour = getTimerColour(viewSettings, undefined, showWarning, showDanger);
+  // the estimate is tuned for a 16:9 screen, so cap it by height for containers wider than that
  const timerFontSize = getEstimatedFontSize(display, secondaryContent);
+  const timerFontRule = `min(${timerFontSize}cqw, ${((timerFontSize * 16) / 9).toFixed(2)}cqh)`;
  const userStyles = {
    ...(resolvedTimerColour && { '--timer-colour': resolvedTimerColour }),
  };

  return (
    <div className={cx(['pip-timer', showFinished && 'pip-timer--finished'])} style={userStyles}>
+      <div className={cx(['blackout', message.timer.blackout && 'blackout--active'])} />
+
      <div className={cx(['message-overlay', showOverlay && 'message-overlay--active'])}>
        <FitText mode='multi' min={12} max={256} className={cx(['message', message.timer.blink && 'blink'])}>
          {message.timer.text}
        </FitText>
      </div>

-      <div className='timer-container'>
+      <div className={cx(['timer-container', message.timer.blink && !showOverlay && 'blink'])}>
        <div
          className={cx(['timer', !isPlaying && 'timer--paused', showFinished && 'timer--finished'])}
-          style={{ fontSize: `${timerFontSize}vw` }}
+          style={{ fontSize: timerFontRule }}
          data-phase={time.phase}
        >
          {display}
@@ -1,6 +1,6 @@
 {
  "name": "ontime-electron",
-  "version": "4.13.0",
+  "version": "4.12.0",
  "author": "Carlos Valente",
  "description": "Time keeping for live events",
  "repository": "https://github.com/cpvalente/ontime",
@@ -1,6 +1,6 @@
 {
  "name": "@getontime/resolver",
-  "version": "4.13.0",
+  "version": "4.12.0",
  "type": "module",
  "repository": "https://github.com/cpvalente/ontime",
  "types": "./dist/main.d.ts",
@@ -17,7 +17,7 @@
    "parser"
  ],
  "author": "",
-  "license": "ISC",
+  "license": "AGPL-3.0-only",
  "devDependencies": {
    "ontime-types": "workspace:^4.2.1",
    "tsdown": "^0.22.4",
@@ -2,7 +2,7 @@
  "name": "ontime-server",
  "type": "module",
  "main": "src/index.ts",
-  "version": "4.13.0",
+  "version": "4.12.0",
  "exports": "./src/index.js",
  "dependencies": {
    "@googleapis/sheets": "^5.0.5",
@@ -1,7 +1,5 @@
-import { deepEqual } from 'fast-equals';
 import {
  EndAction,
-  OntimeEntry,
  OntimeEvent,
  OntimeGroup,
  OntimeMilestone,
@@ -10,21 +8,13 @@ import {
  TimerType,
  Trigger,
 } from 'ontime-types';
-import {
-  MILLIS_PER_HOUR,
-  MILLIS_PER_MINUTE,
-  createDelay,
-  createEvent,
-  createGroup,
-  createMilestone,
-} from 'ontime-utils';
+import { MILLIS_PER_HOUR, MILLIS_PER_MINUTE, createEvent } from 'ontime-utils';
 import { assertType } from 'vitest';

 import { makeOntimeEvent, makeOntimeGroup, makeOntimeMilestone, makeRundown } from '../__mocks__/rundown.mocks.js';
 import { parseRundown } from '../rundown.parser.js';
 import {
  calculateDayOffset,
-  cloneEntryData,
  deleteById,
  doesInvalidateMetadata,
  getIntegerAndFraction,
@@ -725,68 +715,3 @@ describe('eventDurationMatchGroupTarget()', () => {
    expect(result).toStrictEqual(null);
  });
 });
-
-describe('cloneEntryData()', () => {
-  const trigger: Trigger = {
-    id: 'trigger-1',
-    title: 'Go on air',
-    trigger: TimerLifeCycle.onStart,
-    automationId: 'automation-1',
-  };
-
-  // the real factories, so these are complete entries exactly as the rundown holds them
-  const entries: [string, OntimeEntry][] = [
-    ['event', createEvent({ custom: { sponsor: 'a value' }, triggers: [trigger] }, 'cue-1') as OntimeEvent],
-    ['group', createGroup({ id: 'group-1', entries: ['a', 'b'], custom: { sponsor: 'a value' } })],
-    ['milestone', createMilestone({ id: 'milestone-1', custom: { sponsor: 'a value' } })],
-    ['delay', createDelay({ id: 'delay-1', duration: 10 })],
-  ];
-
-  /**
-   * Fails if any nested object or array in the clone is the same reference as the source,
-   * so a field added later that needs a copy of its own is caught here without the clone
-   * having to enumerate fields.
-   */
-  function expectNoSharedReferences(clone: unknown, source: unknown, path: string) {
-    if (typeof source !== 'object' || source === null) return;
-    expect(clone, `${path} is shared with the source`).not.toBe(source);
-    const cloneRecord = clone as Record<string, unknown>;
-    const sourceRecord = source as Record<string, unknown>;
-    for (const key of Object.keys(sourceRecord)) {
-      expectNoSharedReferences(cloneRecord[key], sourceRecord[key], `${path}.${key}`);
-    }
-  }
-
-  /** the two halves of the structuredClone contract: same value, no shared references */
-  it.each(entries)('clones a %s to the same value structuredClone would produce', (_type, entry) => {
-    expect(cloneEntryData(entry)).toStrictEqual(structuredClone(entry));
-  });
-
-  it.each(entries)('shares no nested object or array with the source %s', (_type, entry) => {
-    expectNoSharedReferences(cloneEntryData(entry), entry, 'entry');
-  });
-
-  /**
-   * Regression: normalising an absent container to an empty one makes deepEqual report a
-   * change on every comparison, which would have the runtime re-broadcast and re-save the
-   * restore point on every tick. See PR #2178.
-   */
-  it.each([
-    ['event', makeOntimeEvent({ id: 'partial' })],
-    ['group', makeOntimeGroup({ id: 'partial', entries: undefined })],
-  ])('gives a partial %s exactly the keys structuredClone would, so it stays deep-equal', (_type, entry) => {
-    const clone = cloneEntryData(entry);
-    // asserting on keys, not values: `toBeUndefined()` cannot tell an absent key from an own
-    // key holding undefined, and it is key presence that decides the deepEqual below
-    expect(Object.keys(clone).sort()).toEqual(Object.keys(structuredClone(entry)).sort());
-    // this is the comparison runtime.service.ts uses to decide whether to re-broadcast an
-    // entry; if the clone gains a key, every tick looks like a change
-    expect(deepEqual(clone, entry)).toBe(true);
-  });
-
-  it('throws on an entry type it does not know how to clone', () => {
-    expect(() => cloneEntryData({ id: 'x', type: 'unknown' } as unknown as OntimeEvent)).toThrow(
-      'Unsupported entry type for cloning',
-    );
-  });
-});
@@ -27,7 +27,6 @@ import {
  isPlayableEvent,
 } from 'ontime-types';
 import { addToRundown, createGroup, customFieldLabelToKey, getInsertAfterId, insertAtIndex } from 'ontime-utils';
-import type { DeepReadonly } from 'ts-essentials';

 import { getDataProvider } from '../../classes/data-provider/DataProvider.js';
 import { consoleError } from '../../utils/console.js';
@@ -35,7 +34,6 @@ import { ProcessedRundownMetadata, makeRundownMetadata } from './rundown.parser.
 import type { RundownMetadata } from './rundown.types.js';
 import {
  applyPatchToEntry,
-  cloneRundown,
  cloneSimpleRundownEntry,
  deleteById,
  doesInvalidateMetadata,
@@ -45,14 +43,9 @@ import {
 } from './rundown.utils.js';

 /**
- * The currently loaded rundown in cache.
- *
- * Reassigned - never mutated in place - when a different rundown is loaded: the persistence
- * layer stores this object by reference, so repurposing it for another rundown would rewrite
- * the previously loaded rundown's stored record. Mutating it in place while it represents the
- * same rundown (ie. from commit) is intended, and is what keeps the stored record current.
+ * The currently loaded rundown in cache
 */
-let cachedRundown: Rundown = {
+const cachedRundown: Rundown = {
  id: '',
  title: '',
  order: [],
@@ -86,16 +79,9 @@ export const getRundownMetadata = (): Readonly<RundownMetadata> => rundownMetada
 export const getProjectCustomFields = (): Readonly<CustomFields> => projectCustomFields;
 export const getEntryWithId = (entryId: EntryId): OntimeEntry | undefined => cachedRundown.entries[entryId];

-/**
- * @param R the type callers see for `rundown` - a plain, mutable `Rundown` when the
- * transaction was opened with `mutableRundown: true`, otherwise a `DeepReadonly<Rundown>`
- * so that accidentally mutating an entry (or an order array) on a non-mutable transaction
- * - which would silently corrupt the live cache without going through commit() - is a
- * compile-time error instead of a runtime bug.
- */
-type Transaction<R> = {
+type Transaction = {
  customFields: CustomFields;
-  rundown: R;
+  rundown: Rundown;

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

-export function createTransaction(options: TransactionOptions & { mutableRundown: true }): Transaction<Rundown>;
-export function createTransaction(
-  options: TransactionOptions & { mutableRundown?: false },
-): Transaction<DeepReadonly<Rundown>>;
-export function createTransaction(
-  options: TransactionOptions,
-): Transaction<Rundown> | Transaction<DeepReadonly<Rundown>> {
+export function createTransaction(options: TransactionOptions): Transaction {
  const targetId = options.rundownId ?? cachedRundown.id;
  const isLoaded = targetId === cachedRundown.id;
  const sourceRundown: Rundown = isLoaded ? cachedRundown : (getDataProvider().getRundown(targetId) as Rundown);
-  const rundown = options.mutableRundown ? cloneRundown(sourceRundown) : sourceRundown;
+  const rundown = options.mutableRundown ? structuredClone(sourceRundown) : sourceRundown;
  const customFields = options.mutableCustomFields ? structuredClone(projectCustomFields) : projectCustomFields;

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

+  // update the cache values
+  cachedRundown.id = rundown.id;
+  cachedRundown.title = rundown.title;
  projectCustomFields = customFields;

  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- we are not interested in the iteration data
  const { previousEvent, latestEvent, previousEntry, entries, order, ...metadata } = processedData;
-
-  // a fresh object, so that the record already stored for a previously loaded rundown keeps
-  // pointing at that rundown's data - see the note on cachedRundown
-  cachedRundown = {
-    id: rundown.id,
-    title: rundown.title,
-    entries,
-    order,
-    flatOrder: metadata.flatEntryOrder,
-    revision: rundown.revision,
-  };
+  cachedRundown.entries = entries;
+  cachedRundown.order = order;
+  cachedRundown.flatOrder = metadata.flatEntryOrder;
+  cachedRundown.revision = rundown.revision;
  rundownMetadata = metadata;

  // defer writing to the database
@@ -33,7 +33,7 @@ import {
 import { makeNewRundown } from '../../models/dataModel.js';
 import type { ErrorEmitter } from '../../utils/parserUtils.js';
 import { RundownMetadata } from './rundown.types.js';
-import { calculateDayOffset, cleanupCustomFields, cloneEntryData } from './rundown.utils.js';
+import { calculateDayOffset, cleanupCustomFields } from './rundown.utils.js';

 /**
 * Parse a rundowns object along with the project custom fields
@@ -234,7 +234,7 @@ export function makeRundownMetadata(customFields: CustomFields, options?: { muta
  };

  function process<T extends OntimeEntry>(entry: T, childOfGroup: EntryId | null): T {
-    return processEntry(rundownMeta, customFields, mutate ? entry : cloneEntryData(entry), childOfGroup);
+    return processEntry(rundownMeta, customFields, mutate ? entry : structuredClone(entry), childOfGroup);
  }

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

-  const duplicatedRundown: Rundown = cloneRundown(rundown);
+  const duplicatedRundown: Rundown = structuredClone(rundown);
  duplicatedRundown.id = generateId();
  duplicatedRundown.title = `Copy of ${rundown.title}`;
  duplicatedRundown.revision = 0;
@@ -329,7 +329,7 @@ export function mergeRundownPreservingFields(
    const structure = isOntimeGroup(incomingEntry)
      ? { entries: incomingEntry.entries }
      : { parent: incomingEntry.parent };
-    entries[id] = cloneEntryData({ ...merged, ...structure });
+    entries[id] = structuredClone({ ...merged, ...structure });
  }

  return {
@@ -499,61 +499,6 @@ export function cloneSimpleRundownEntry(entry: OntimeEntry, newId: EntryId): Ont
  throw new Error(`Unsupported entry type for cloning: ${entry}`);
 }

-/**
- * Fast, shape-aware clone of a single entry, preserving its identity (id, revision, etc).
- * Drop-in replacement for `structuredClone(entry)`
- */
-export function cloneEntryData<T extends OntimeEntry>(entry: T): T {
-  switch (entry.type) {
-    case SupportedEntry.Event: {
-      const clone: OntimeEvent = { ...entry };
-      if (clone.custom) clone.custom = { ...clone.custom };
-      if (clone.triggers) clone.triggers = clone.triggers.map((trigger) => ({ ...trigger }));
-      return clone as T;
-    }
-    case SupportedEntry.Group: {
-      const clone: OntimeGroup = { ...entry };
-      if (clone.custom) clone.custom = { ...clone.custom };
-      if (clone.entries) clone.entries = clone.entries.slice();
-      return clone as T;
-    }
-    case SupportedEntry.Milestone: {
-      const clone: OntimeMilestone = { ...entry };
-      if (clone.custom) clone.custom = { ...clone.custom };
-      return clone as T;
-    }
-    case SupportedEntry.Delay:
-      return { ...entry } as T;
-    default: {
-      // exhaustiveness guard: a new member of `SupportedEntry` is named in the error here
-      const unhandled: never = entry;
-      throw new Error(`Unsupported entry type for cloning: ${(unhandled as OntimeEntry).type}`);
-    }
-  }
-}
-
-/**
- * Fast, shape-aware clone of a whole rundown.
- * Drop-in replacement for `structuredClone(rundown)`: every entry (and its nested
- * `custom` / `triggers` / `entries` containers) gets its own copy, so callers can mutate
- * the result freely without touching the source - same contract as structuredClone,
- * at a fraction of the cost since we skip the generic serialization algorithm.
- */
-export function cloneRundown(rundown: Readonly<Rundown>): Rundown {
-  const entries: RundownEntries = {};
-  for (const id in rundown.entries) {
-    entries[id] = cloneEntryData(rundown.entries[id]);
-  }
-  return {
-    id: rundown.id,
-    title: rundown.title,
-    revision: rundown.revision,
-    order: rundown.order.slice(),
-    flatOrder: rundown.flatOrder.slice(),
-    entries,
-  };
-}
-
 /**
 * Utility for calculating if the current events should have a day offset
 * @param current the current event under test
@@ -464,8 +464,9 @@ export async function upload(sheetId: string, options: ImportMap) {
    sheetOrder.forEach((entryId, index) => {
      const isGroupEnd = entryId.startsWith('group-end-');
      const id = isGroupEnd ? entryId.split('group-end-')[1] : entryId;
-      // cellRequestFromEvent only reads the entry to build a cell request, no clone is needed
-      const entry = isGroupEnd ? ({ id: entryId, type: SupportedEntry.Group } as OntimeGroup) : rundown.entries[id];
+      const entry = isGroupEnd
+        ? ({ id: entryId, type: SupportedEntry.Group } as OntimeGroup)
+        : structuredClone(rundown.entries[id]);
      updateRundown.push(cellRequestFromEvent(entry, index, worksheetId, sheetMetadata));
    });
  } catch (e) {
@@ -101,16 +101,8 @@ function getCustomFields(): Readonly<CustomFields> {
  return db.data.customFields;
 }

-/**
- * Stores a rundown, replacing any existing entry for the same key.
- * Takes ownership of `newData` and stores it by reference - the caller must not mutate it
- * afterward. Every call site either hands over a freshly-built object it never touches again,
- * or (for the loaded rundown) the cache's own long-lived object, which is already the single
- * source of truth for that data - aliasing it here costs nothing and avoids a second full
- * deep copy of the rundown on every commit.
- */
 async function setRundown(rundownKey: string, newData: Rundown): ReadonlyPromise<ProjectRundowns> {
-  db.data.rundowns[rundownKey] = newData;
+  db.data.rundowns[rundownKey] = structuredClone(newData);
  await persist();
  return db.data.rundowns;
 }
@@ -4,17 +4,12 @@ import { DatabaseModel } from 'ontime-types';
 * Merges a partial ontime project into a given ontime project
 */
 export function safeMerge(existing: DatabaseModel, newData: Partial<DatabaseModel>): DatabaseModel {
-  // rundowns are merged separately below by reference (only the top-level map is copied,
-  // same as the other properties here) - deep-cloning them here would be wasted work,
-  // since a project's rundowns are by far the largest part of this object
-  const { rundowns: existingRundowns, ...existingRest } = existing;
-  const { rundowns: newRundowns = {}, ...newDataRest } = newData;
-
-  const deepExisting = structuredClone(existingRest);
-  const deepNewData = structuredClone(newDataRest);
+  const deepExisting = structuredClone(existing);
+  const deepNewData = structuredClone(newData);

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

  return {
-    rundowns: { ...existingRundowns, ...newRundowns },
+    rundowns: { ...existing.rundowns, ...rundowns },
    project: { ...deepExisting.project, ...project },
    settings: { ...deepExisting.settings, ...settings },
    viewSettings: { ...deepExisting.viewSettings, ...viewSettings },
@@ -20,7 +20,6 @@ import { triggerAutomations } from '../../api-data/automation/automation.service
 import { triggerReportEntry } from '../../api-data/report/report.service.js';
 import { getCurrentRundown, getEntryWithId, getRundownMetadata } from '../../api-data/rundown/rundown.dao.js';
 import { RundownMetadata } from '../../api-data/rundown/rundown.types.js';
-import { cloneEntryData } from '../../api-data/rundown/rundown.utils.js';
 import { logger } from '../../classes/Logger.js';
 import { timerConfig } from '../../setup/config.js';
 import { eventStore } from '../../stores/EventStore.js';
@@ -755,7 +754,7 @@ function broadcastResult(_target: any, _propertyKey: string, descriptor: Propert
      }
      // at this point we know that either the id or the contents has changed
      batch.add(key, currentEntry as RuntimeStore[K]); // we know that there is the necessary overlap in the types to cast this
-      RuntimeService.previousState[key] = currentEntry ? cloneEntryData(currentEntry) : null;
+      RuntimeService.previousState[key] = structuredClone(currentEntry);
      return true;
    }

@@ -19,3 +19,29 @@ test('message control sends messages to screens', async ({ context }) => {

  await expect(featurePage.getByText('TIME NOW')).toBeVisible();
 });
+
+test('message control drives the stage screen state', async ({ context }) => {
+  const editorPage = await context.newPage();
+  const featurePage = await context.newPage();
+
+  await editorPage.goto('/messagecontrol');
+  await featurePage.goto('/timer');
+  await featurePage.waitForLoadState('load', { timeout: 5000 });
+
+  // the secondary line defaults to an aux timer, the select is what puts our text on screen
+  await editorPage.getByPlaceholder('Message shown as secondary text in stage timer').fill('testing secondary');
+  await editorPage.getByRole('combobox').click();
+  await editorPage.getByRole('option', { name: 'Message' }).click();
+  await expect(featurePage.getByText('testing secondary')).toBeVisible();
+
+  await editorPage.getByTestId('toggle timer blackout').click();
+  await expect(featurePage.locator('.blackout')).toHaveClass(/blackout--active/);
+
+  // clearing returns the screen to normal, but keeps what the operator typed
+  await editorPage.getByTestId('clear screen').click();
+  await expect(featurePage.locator('.blackout')).not.toHaveClass(/blackout--active/);
+  await expect(featurePage.getByText('testing secondary')).toHaveCount(0);
+  await expect(editorPage.getByPlaceholder('Message shown as secondary text in stage timer')).toHaveValue(
+    'testing secondary',
+  );
+});
@@ -222,57 +222,15 @@ test('Delete event', async ({ page }) => {
  await expect(page.getByRole('button', { name: 'Create Group' })).toBeVisible();
 });

-test('Finder searches the rundown and reveals a result', async ({ page }) => {
+test('Find in rundown', async ({ page }) => {
  await page.goto('/rundown');
-  await page.getByRole('button', { name: 'Edit' }).click();
+  await expect(page.getByTestId('panel-rundown')).toBeVisible();

-  // clear rundown
-  await page.getByRole('button', { name: 'Rundown menu' }).click();
-  await page.getByRole('menuitem', { name: 'Clear all' }).click();
-  await page.getByRole('button', { name: 'Delete all' }).click();
-  await expect(page.getByTestId('rundown-event')).toHaveCount(0);
-
-  // two events, where the one we are looking for is identified only by its note
-  await page.getByRole('button', { name: 'Create Event' }).click();
-  await expect(page.getByTestId('rundown-event')).toHaveCount(1);
-  await page.getByTestId('entry-1').click();
-  await page.getByTestId('entry__title').press('Escape');
-  await page.getByTestId('rundown-event').locator('div').filter({ hasText: '1' }).press('Alt+E');
-  await expect(page.getByTestId('rundown-event')).toHaveCount(2);
-
-  await page.getByTestId('entry-1').getByTestId('entry__title').fill('opening');
-  await page.getByTestId('entry-1').getByTestId('entry__title').press('Enter');
-  await page.getByTestId('entry-2').getByTestId('entry__title').fill('closing');
-  await page.getByTestId('entry-2').getByTestId('entry__title').press('Enter');
-
-  await page.getByTestId('entry-2').click();
-  await page.getByLabel('Note', { exact: true }).fill('remember the zebrafish');
-  await page.getByLabel('Note', { exact: true }).press('Tab');
-
-  // the shortcut has to work from a focused field, which is where it is usually reached for
-  await page.getByTestId('entry-2').getByTestId('entry__title').click();
  await page.keyboard.press('ControlOrMeta+f');
-  await expect(page.getByPlaceholder('Search...')).toBeFocused();
+  await expect(page.getByPlaceholder('Search...')).toBeVisible();

-  // a bare query reaches the note, and the result names the field it matched
-  await page.getByPlaceholder('Search...').fill('zebrafish');
-  await expect(page.getByTestId('finder-result')).toHaveCount(1);
-  await expect(page.getByTestId('finder-result-match')).toContainText('Note');
-
-  // a badge scopes the search to one field, without putting syntax in the input
-  const titleFilter = page.getByTestId('finder-filters').getByRole('button', { name: 'Title', exact: true });
-  await titleFilter.click();
-  await expect(page.getByPlaceholder('Search...')).toHaveValue('zebrafish');
-  await expect(page.getByTestId('finder-result')).toHaveCount(0);
-
-  // pressing it again searches every field once more
-  await titleFilter.click();
-  await expect(page.getByTestId('finder-result')).toHaveCount(1);
-
-  // choosing a result closes the finder and selects the entry in the rundown
-  await page.getByPlaceholder('Search...').press('Enter');
+  await page.keyboard.press('Escape');
  await expect(page.getByPlaceholder('Search...')).toBeHidden();
-  await expect(page.getByTestId('entry-2').getByTestId('rundown-event')).toHaveAttribute('data-selected', 'true');
 });

 test('Open settings', async ({ page }) => {
@@ -1,6 +1,6 @@
 {
  "name": "ontime",
-  "version": "4.13.0",
+  "version": "4.12.0",
  "description": "Time keeping for live events",
  "keywords": [
    "ontime",
@@ -1,5 +1,5 @@
 {
-  "version": "4.13.0",
+  "version": "4.12.0",
  "name": "ontime-types",
  "type": "module",
  "main": "./src/index.ts",
Author	SHA1	Message	Date
Carlos Valente	7089abbb53	fix(ui): give the preview a fixed shape and top-align the buttons beside it The stage was stretched to whatever height the panel had free via a 1fr grid row, so its size varied with how much vertical room the editor happened to leave rather than staying predictable. It now keeps a 16:9 box sized from its own width - the same ratio the embedded timer's font-size estimate already assumes - so cqw and cqh agree and the min() cap in PipTimer stays meaningful only for the pip window, which is still freely resizable. The button column no longer stretches or centers against that height either: align-items: start on the group top-aligns both the stage and the buttons when they sit side by side. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011CHxSQ6nWHuyar8feieRra	2026-08-26 13:42:29 +00:00
Carlos Valente	99f8f4885c	feat(ui): make blink/blackout exclusive and put the buttons beside the preview Blink and blackout are two ways of hiding the same timer, and having both on does not mean anything the audience can read differently from either alone. Turning one on now turns the other off, enforced where the two toggles are sent so the invariant holds regardless of which control calls it. The screen buttons move from a row below the stage to a column on its right, which is where they act and costs less height than a row. The stage and the button column live in a grid so the buttons can be a fixed, content-sized width instead of stretching to match the stage's height. A container query against the panel's own width collapses back to a stacked layout, buttons in a row below the stage, for a narrower fit (a resized /messagecontrol window, for instance) where the two can't sit side by side. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011CHxSQ6nWHuyar8feieRra	2026-08-26 13:36:52 +00:00
Carlos Valente	c4ac9df8cf	refactor(ui): overlay the status icons and let the preview fill the panel Three adjustments to the panel layout: - the timer status icons go back to overlaying the stage, which returns the row they were costing. They sit in the same chrome layer as the pop-out buttons, so the blackout no longer hides them - the screen state buttons group with the preview they act on, and the gap before the message inputs widens to separate the two - the stage drops its fixed aspect ratio and fills the panel width, which also removes the slack a tall panel used to leave around it Without a 16:9 frame the width derived font size can overflow a short, wide stage, so the timer is now capped by container height at the ratio the estimate assumes. In the pip window, which has no ancestor query container, both terms resolve against the viewport, so a 16:9 window is unchanged and a wider one stops clipping its digits. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011CHxSQ6nWHuyar8feieRra	2026-08-26 13:30:28 +00:00
Carlos Valente	0d5228f1e5	fix(ui): make the message preview match the stage it stands in for Three things measured wrong once the preview showed a real render: - the pip timer kept leading zeros where the timer view drops them by default, so the preview read 00:59:07 against the stage's 59:07 - and its own secondary line already dropped them - the extracted /messagecontrol route has no flex parent for the panel to grow into, so the stage collapsed to its minimum instead of filling the window - a tall panel caps the stage at its own width, and the slack it leaves now sits either side of the stage rather than all below it Covers the screen state controls in the e2e spec: the secondary source select puts the typed text on the stage, blackout reaches the timer view, and clear screen resets the state while keeping the text. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011CHxSQ6nWHuyar8feieRra	2026-08-26 13:04:23 +00:00
Carlos Valente	fae9e030a3	feat(ui): add a clear screen control to message control Recovering from "message up, blinking, secondary on" took four clicks in three places, which is the wrong shape for something done under pressure. One control now returns the stage to a plain timer in a single patch, keeping whatever the operator has typed. It is disabled while nothing is active, so an accidental click is a no-op. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011CHxSQ6nWHuyar8feieRra	2026-08-26 12:40:01 +00:00
Carlos Valente	03fa62f3a1	feat(ui): fit the message control panel on a small laptop The panel absorbs whatever height the playback control above it leaves, and its content was a fixed stack taller than that space on a 1280x800 screen - with the container set to hide overflow, the secondary message input was silently clipped off the bottom. The stage preview is now the only elastic element and the controls are the fixed floor, which is the way round an operator needs it. The control stack also gets shorter: blink and blackout share a row, and the secondary source select moves next to the secondary text input. That regrouping removes the duelling owners of `secondarySource`. The select picks the source and the eye toggles the line on and off, so the "Show secondary" button - which wrote the same field from a second place, and made picking an aux read as "secondary message hidden" - is gone along with the local mirror of the remote state it needed. Also: blackout now uses the destructive button variant, the toggles expose `aria-pressed`, and the input rows use the shared editor label. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011CHxSQ6nWHuyar8feieRra	2026-08-26 12:39:02 +00:00
Carlos Valente	f208f148b7	refactor(ui): move the timer status icons off the stage preview The icon rail was absolutely positioned over the same box as the preview content, so at narrow widths it collided with the render - and now that the preview shows a real timer, it also sat under the blackout overlay. It moves into the options column as a compact row, where it reads as editor chrome rather than part of the stage. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011CHxSQ6nWHuyar8feieRra	2026-08-26 12:33:32 +00:00
Carlos Valente	60cdf45c36	feat(ui): render a live timer in the message control preview The preview showed the word "Timer" where the timer goes, so it could not tell an operator what the audience will actually see. It now embeds the same component the picture-in-picture window uses. Making PipTimer embeddable also fixes the pop-out window, which rendered a running timer while the stage was blacked out and did not blink with the stage. The timer font size, the message padding and the overtime outline move from viewport to container units: inside the preview they resolve against the stage frame, and in the pip window - which has no ancestor query container - they resolve against its viewport exactly as before. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011CHxSQ6nWHuyar8feieRra	2026-08-26 12:32:27 +00:00
Carlos Valente	2ef966fc14	fix(ui): restore blink and live-label feedback in message control The blink modifier in the timer preview referenced a CSS module class that does not exist, so `style.blink` resolved to undefined and the preview never blinked. `.blink` is a global animation class, matching how the timer view applies it. The "message is live" label highlight used `??` where `&&` was meant: since `visible` is always a boolean, the active style was unreachable. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011CHxSQ6nWHuyar8feieRra	2026-08-26 12:29:16 +00:00