Planificación de cierre en una redacción

La integración: niveles de zoom con tres filas de cabecera, tiempo oculto, rowHeaderColumns, la fila fija del flujo de textos, celdas deshabilitadas y desplazamientos, separadores, enlaces construidos a partir de la cadena, la búsqueda en vivo y los filtros, la tarjeta al pasar el ratón, el veredicto de arrastre y el menú contextual, y los callbacks donde las reglas de la redacción rechazan una colocación o la ajustan al cuarto de hora.

/**
 * The Linden Gazette's night desk: the wire tray, the desks and their staff, and the copy flowing
 * from the reporters to the presses over one evening, against the edition deadlines.
 *
 * Library: a resource tree with three rowHeaderColumns and a frozen copy-flow row filled by
 * onBeforeCellRender, three time-header rows (dateline, edition bands as header areas, timetable
 * hours) written by onBeforeTimeHeaderRender, hidden time (onIncludeTimeCell), clippings as HTML
 * cards with areas, disabled cells, finish-to-start links, separators, the full crosshair, live
 * search and status filters (events.filter, onEventFilter), the desk filter (rows.filter,
 * onRowFilter), zoom levels, keyboard moves and undo history, the event hover card and the drag
 * card (super-scheduler/react-render), conflict highlighting and a context menu. Application: who
 * does which work, shifts, travel, deadlines, what breaks the chain, the stamps, every figure and
 * the quarter-hour snapping of a drop. Those rules live in ./rules; ./paint writes the markup.
 */
import { useCallback, useEffect, useMemo, useRef, type RefObject } from 'react'
import { SuperScheduler } from 'super-scheduler'
import type { SchedulerEventsChangeArgs } from 'super-scheduler'
import type { SchedulerHistory } from 'super-scheduler/history'
import { SuperSchedulerComponent, type SchedulerRenderProps } from 'super-scheduler/react-render'
import { format, plural } from '~/i18n/format'
import { HOUR, MINUTE, civil, parseCivil } from '../../scheduler/civil'
import { createEventMenu, type MenuEntry } from '../kit/context-menu'
import { useEventHover, type HoverCardModel } from '../kit/hover-card'
import { KEYS } from '../kit/keys'
import { useDropRefusal } from '../kit/use-drop-refusal'
import { createDragCard } from '../kit/verdict'
import { skinClass, skinMenuTheme } from '../registry'
import type { DemoCommon } from '../types'
import {
  GRID,
  SUMMARY_ID,
  deskOfRow,
  headlineOf,
  isLaneId,
  isStaffId,
  readItemFields,
  staffName,
  toResources,
  type ItemEvent,
} from './adapter'
import { chainHtml, chainLinks, itemCard } from './card'
import {
  BOARD,
  DESK_IDS,
  EDITIONS,
  EDITION_IDS,
  INITIAL_VIEW_START,
  NOW,
  STAFF,
  WIRE_ROW,
  type DeskId,
  type Item,
} from './model'
import {
  bandAreas,
  cardHtml,
  clock,
  datelineHtml,
  deskHtml,
  flowPainter,
  gaugeHtml,
  hourHtml,
  nowArea,
  offShift,
  percent,
  staffHtml,
  travelAreas,
  travelBands,
  whereHtml,
  wireFlashArea,
} from './paint'
import {
  MIN_MINUTES,
  SNAP_MINUTES,
  chainOf,
  deskCapacity,
  deskOf,
  earliestSlot,
  freeFor,
  issuesOf,
  matchesSearch,
  matchesStatus,
  pageById,
  refusalOf,
  shiftOf,
  stageOf,
  staffById,
  staffFigure,
  travelTo,
  whereAt,
  wordsFiled,
  type Issue,
  type RefusalInfo,
  type StatusFilter,
} from './rules'
import type { GazetteText, ViewId, ZoomId } from './text'

const SLUG = 'newsroom-desk'
const NOW_TICKS = parseCivil(NOW)
const BOARD_START = parseCivil(BOARD.start)
const BOARD_END = parseCivil(BOARD.end)
const SNAP = SNAP_MINUTES * MINUTE

/** What the board asks the demo to do (context menu, hover buttons, keyboard). */
export type ItemAction = 'details' | 'assign' | 'earliest' | 'trace' | 'toggle-links'

/** Row-header layout by stage width: three columns, two, or the staff column alone. */
export type Density = 'wide' | 'compact' | 'narrow'

export interface GazetteSchedulerProps {
  readonly events: ItemEvent[]
  /** The same events as business objects, for rules that look at other items. */
  readonly items: readonly Item[]
  readonly issues: readonly Issue[]
  readonly text: GazetteText
  readonly common: DemoCommon
  /** BCP 47 tag for labels, and the scheduler locale id. */
  readonly tag: string
  readonly schedulerLocale: string
  /** Level on mount. Later changes go through control.zoom or a saved view. */
  readonly initialZoom: ZoomId
  /** The section: what the clippings' page tag says and which kinds step forward. */
  readonly mode: ViewId
  readonly showLinks: boolean
  /** The clipping in the detail sheet: a heavier rule. */
  readonly selected: string | null
  /** The clipping whose chain is pinned forward (the rest steps back). */
  readonly traced: string | null
  readonly search: string
  readonly status: StatusFilter
  readonly desk: DeskId | null
  readonly density: Density
  readonly history: SchedulerHistory
  readonly controlRef: RefObject<SuperScheduler.Scheduler | null>
  readonly boardRef: RefObject<HTMLDivElement | null>
  readonly onEventsChange: (args: SchedulerEventsChangeArgs) => void
  readonly onSelect: (id: string) => void
  readonly onMoved: (id: string) => void
  readonly onResized: (id: string, edge: 'start' | 'end') => void
  readonly onRefused: (id: string, message: string) => void
  readonly onAction: (action: ItemAction, id: string) => void
  readonly onZoomLevel: (level: ZoomId) => void
}

/** Three header rows at every level: the dateline, the edition bands, the hours. */
const HEADERS: SuperScheduler.TimeHeaderData[] = [
  { groupBy: 'Day', height: GRID.header.day },
  { groupBy: 'Day', height: GRID.header.edition },
  // A declared format tells the level-of-detail planner how wide the label really is.
  { groupBy: 'Hour', height: GRID.header.hour, format: 'HH:mm' },
]

/** Hour cells at every level (the minimap then counts copy per hour); only their width changes. */
const ZOOM_LEVELS: SuperScheduler.ZoomLevel[] = [
  { id: 'close', properties: { scale: 'Hour', cellWidth: 200, timeHeaders: HEADERS } },
  { id: 'evening', properties: { scale: 'Hour', cellWidth: GRID.cellWidth, timeHeaders: HEADERS } },
  { id: 'day', properties: { scale: 'Hour', cellWidth: 72, timeHeaders: HEADERS } },
]
const ZOOM_IDS: readonly ZoomId[] = ['close', 'evening', 'day']

/** The query and the status chips, handed to `control.events.filter()`. */
export class ClippingFilter {
  constructor(
    readonly query: string,
    readonly status: StatusFilter,
  ) {}
}

/** The desk chips, handed to `control.rows.filter()`. */
export class DeskFilter {
  constructor(readonly desk: DeskId) {}
}

const GLYPH = {
  assign:
    '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8h8M8 4.5 11.5 8 8 11.5"/><path d="M13.5 3v10"/></svg>',
  earliest:
    '<svg viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="8.6" r="5"/><path d="M8 6v2.8l1.8 1.1M6.2 2h3.6"/></svg>',
} as const

/** A sentence for a refusal, with the names and times it needs. */
export function refusalMessage(info: RefusalInfo, text: GazetteText, tag: string): string {
  const staff = info.staff === undefined ? null : staffById(info.staff)
  const values = {
    name: staff === null ? '' : staffName(staff, text),
    time: info.at === undefined ? '' : clock(info.at, tag),
    edition: info.edition === undefined ? '' : text.editions[info.edition].name,
    from: info.from === undefined ? '' : text.locations[info.from],
    to: info.to === undefined ? '' : text.locations[info.to],
    minutes: info.minutes ?? 0,
  }
  switch (info.reason) {
    case 'wrong-desk':
      return info.role === undefined ? text.rules['wire-only'] : text.rules.wrongDesk[info.role]
    case 'off-shift': {
      const shift = staff === null ? null : shiftOf(staff)
      return format(
        shift !== null && info.at === shift.start
          ? text.rules.offShiftStart
          : text.rules.offShiftEnd,
        values,
        tag,
      )
    }
    default:
      return format(text.rules[info.reason], values, tag)
  }
}

/** Menu and sheet label of the wire command: who takes it, or why nobody can. */
export function assignLabel(
  item: Item,
  items: readonly Item[],
  text: GazetteText,
  tag: string,
): { label: string; enabled: boolean } {
  const free = freeFor(item, items, NOW_TICKS)[0]
  if (free === undefined)
    return {
      label: format(text.actions.nobody, { time: clock(parseCivil(item.start), tag) }),
      enabled: false,
    }
  if (item.kind === 'photo')
    return {
      label: format(text.actions.send, {
        name: staffName(free, text),
        minutes: travelTo(free.id, item, items).minutes,
      }),
      enabled: true,
    }
  return {
    label: format(text.actions.assign, {
      name: staffName(free, text),
      time: clock(parseCivil(item.start), tag),
    }),
    enabled: true,
  }
}

/** Menu and sheet label of the earliest slot that keeps the chain. */
export function earliestLabel(
  item: Item,
  items: readonly Item[],
  text: GazetteText,
  tag: string,
): { label: string; enabled: boolean } {
  const next = earliestSlot(item, items, NOW_TICKS)
  if (next === null) return { label: text.actions.noSlot, enabled: false }
  if (next.lane === item.lane && next.start === item.start)
    return { label: text.actions.atEarliest, enabled: false }
  const staff = staffById(next.lane)
  return {
    label: format(text.actions.earliest, {
      name: staff === null ? '' : staffName(staff, text),
      time: clock(parseCivil(next.start), tag),
    }),
    enabled: true,
  }
}

/** The labels a search looks through: slug, headline, byline, place, page and kind. */
export function searchLabels(item: Item, items: readonly Item[], text: GazetteText): string[] {
  const staff = staffById(item.lane)
  const story = item.kind === 'sub' ? items.find((other) => other.id === item.story) : item
  return [
    story?.slug ?? '',
    story === undefined ? '' : headlineOf(story.id, text),
    staff === null ? text.wire.row : staffName(staff, text),
    item.location === undefined ? '' : text.locations[item.location],
    item.page === undefined ? '' : text.pages[item.page],
    story?.page === undefined ? '' : text.pages[story.page],
    text.kinds[item.kind],
    item.edition === undefined ? '' : text.editions[item.edition].name,
  ]
}

/**
 * Brings one clipping's chain forward (`gz-traced`) and lets the rest of the board step back, or
 * clears it. Class writes on hover enter and leave only, never per pointer frame.
 */
function trace(
  root: HTMLElement | null,
  ids: ReadonlySet<string> | null,
  links: readonly SuperScheduler.LinkData[],
): void {
  if (root === null) return
  for (const element of root.querySelectorAll('.gz-traced')) element.classList.remove('gz-traced')
  root.toggleAttribute('data-tracing', ids !== null)
  if (ids === null) return
  for (const id of ids)
    for (const element of root.querySelectorAll(
      `[data-super-scheduler-part="event"][data-id="${CSS.escape(id)}"]`,
    ))
      element.classList.add('gz-traced')
  links.forEach((link, index) => {
    if (!ids.has(String(link.from)) || !ids.has(String(link.to))) return
    for (const element of root.querySelectorAll(`.gz-ln-${index}`))
      element.classList.add('gz-traced')
  })
}

export function GazetteScheduler(props: GazetteSchedulerProps) {
  const { events, items, issues, text, common, tag, schedulerLocale, initialZoom } = props
  const { mode, showLinks, selected, traced, search, status, desk, density } = props
  const { history, controlRef, boardRef } = props
  const { onEventsChange, onSelect, onMoved, onResized, onRefused, onAction, onZoomLevel } = props

  const resources = useMemo(() => toResources(text), [text])
  const dropRefusal = useDropRefusal(onRefused)
  // Hover buttons call the latest handler without rebuilding every card's areas.
  const action = useRef(onAction)
  useEffect(() => {
    action.current = onAction
  }, [onAction])

  // The chain of every clipping, from the reporter's line to the press: links built from the data.
  const links = useMemo<SuperScheduler.LinkData[]>(() => {
    if (!showLinks) return []
    const broken = new Set(issues.map((issue) => `${issue.other ?? ''}>${issue.item}`))
    const pairs: [Item, Item][] = []
    for (const item of items) {
      if (item.kind === 'story') {
        const sub = items.find((other) => other.kind === 'sub' && other.story === item.id)
        if (sub !== undefined) pairs.push([item, sub])
      } else if (item.kind === 'sub' || item.kind === 'photo') {
        const story = item.kind === 'sub' ? items.find((other) => other.id === item.story) : item
        const layout = items.find((other) => other.kind === 'layout' && other.page === story?.page)
        if (layout !== undefined) pairs.push([item, layout])
      } else if (item.kind === 'layout') {
        const edition = pageById(item.page)?.edition
        for (const run of items)
          if (run.kind === 'press' && run.edition === edition) pairs.push([item, run])
      }
    }
    return pairs.map(([from, to], index) => {
      const late = broken.has(`${from.id}>${to.id}`)
      const pending = from.lane === WIRE_ROW
      // Pages to the presses: the last hop, drawn lighter so the copy's path reads first.
      const press = to.kind === 'press'
      return {
        id: `${from.id}>${to.id}`,
        from: from.id,
        to: to.id,
        type: 'FinishToStart',
        // Copy still on the wire: a chain drawn but not yet held by anyone.
        ...(pending ? { style: 'dashed' as const } : {}),
        cssClass: `gz-link gz-ln-${index}${late ? ' ss-link--late gz-link--late' : ''}${pending ? ' gz-link--pending' : ''}${press ? ' gz-link--press' : ''}`,
      }
    })
  }, [items, issues, showLinks])

  // Hover card: the stage, the deadline, the travel and the chain, by the rules.
  const card = useCallback(
    (event: SuperScheduler.Event): HoverCardModel | null => {
      const item = items.find((candidate) => candidate.id === String(event.id()))
      return item === undefined ? null : itemCard(item, items, issues, text, common, tag, NOW_TICKS)
    },
    [items, issues, text, common, tag],
  )
  const { eventHover, closeHover, suppressHover } = useEventHover(card)

  // Drag verdict: the desk's refusal, or the chain it would break or mend, and the chain itself
  // re-evaluated at the proposed position.
  const dragCard = useMemo<SuperScheduler.DragCardOptions>(() => {
    const proposed = (info: SuperScheduler.DragCardInfo) => {
      const item = items.find((candidate) => candidate.id === String(info.eventId))
      if (item === undefined || info.resource === null || !isLaneId(info.resource)) return null
      const moved: Item = {
        ...item,
        lane: info.resource,
        start: civil(info.start.getTime()),
        end: civil(info.end.getTime()),
      }
      const next = items.map((candidate) => (candidate.id === item.id ? moved : candidate))
      return { item: moved, items: next, issues: issuesOf(next) }
    }
    const base = createDragCard({
      tag,
      common,
      rowName: (id) => {
        if (id === WIRE_ROW) return text.wire.row
        const staff = staffById(String(id))
        return staff === null ? null : staffName(staff, text)
      },
      warn: (info) => {
        const next = proposed(info)
        if (next === null) return null
        const chain = chainOf(next.item, next.items)
        const before = issues.filter((issue) => chain.has(issue.item))
        const after = next.issues.filter((issue) => chain.has(issue.item))
        const first = after[0]
        if (first !== undefined)
          return plural(text.warn.breaks, after.length, tag, {
            label: text.status[first.kind].toLowerCase(),
          })
        const mended = before[0]
        return mended === undefined
          ? null
          : format(text.warn.mends, { label: text.status[mended.kind].toLowerCase() })
      },
    })
    return {
      ...base,
      // The header marker names the time the pointer drives, as the newsroom clock does.
      markerFormat: 'HH:mm',
      html: (info) => {
        const html = base.html?.(info) ?? null
        if (html === null || info.forbidden || info.overlapping) return html
        const next = proposed(info)
        if (next === null) return html
        const chain = chainHtml(chainLinks(next.item, next.items, next.issues, text), text)
        return chain === '' ? html : `${html.slice(0, -'</div>'.length)}${chain}</div>`
      },
    }
  }, [items, issues, text, common, tag])

  // Context menu: rebuilt when the plan changes, so its labels name the real consequence.
  const contextMenu = useMemo(
    () =>
      createEventMenu({
        theme: skinMenuTheme(SLUG),
        title: (event) => format(common.kit.menuTitle, { name: event.text() }),
        onOpenChange: (open) => suppressHover(open),
        entries: (event) => {
          const id = String(event.id())
          const item = items.find((candidate) => candidate.id === id)
          if (item === undefined) return []
          const entries: MenuEntry[] = [
            {
              label: common.kit.openDetails,
              icon: 'details',
              keys: KEYS.details,
              run: () => onAction('details', id),
            },
          ]
          if (item.lane === WIRE_ROW) {
            const assign = assignLabel(item, items, text, tag)
            entries.push({
              label: assign.label,
              icon: 'handover',
              primary: true,
              disabled: !assign.enabled,
              run: () => onAction('assign', id),
            })
          } else if (item.kind === 'sub' || item.kind === 'layout' || item.kind === 'press') {
            const earliest = earliestLabel(item, items, text, tag)
            entries.push({
              label: earliest.label,
              icon: 'slot',
              primary: issues.some((issue) => issue.item === id),
              disabled: !earliest.enabled || parseCivil(item.start) < NOW_TICKS,
              run: () => onAction('earliest', id),
            })
          }
          entries.push(
            'separator',
            {
              label: traced === id ? text.actions.untrace : text.actions.trace,
              icon: 'focus',
              run: () => onAction('trace', id),
            },
            {
              label: showLinks ? text.toolbar.hideLinks : text.toolbar.showLinks,
              icon: 'link',
              run: () => onAction('toggle-links', id),
            },
          )
          return entries
        },
      }),
    [items, issues, traced, showLinks, common, text, tag, onAction, suppressHover],
  )

  // Separators: the copy and page deadlines of each edition, its press start, and the clock.
  const separators = useMemo<SuperScheduler.SeparatorData[]>(() => {
    const marks: SuperScheduler.SeparatorData[] = EDITION_IDS.flatMap((id) => {
      const edition = EDITIONS[id]
      const name = text.editions[id].name
      return [
        {
          location: edition.copy,
          layer: 'BelowEvents' as const,
          width: 1,
          cssClass: 'gz-sep gz-sep--copy',
          toolTip: `${name} · ${format(text.header.copyBy, { time: clock(parseCivil(edition.copy), tag) })}`,
        },
        {
          location: edition.pages,
          layer: 'BelowEvents' as const,
          width: 3,
          cssClass: 'gz-sep gz-sep--pages',
          toolTip: `${name} · ${format(text.header.pagesBy, { time: clock(parseCivil(edition.pages), tag) })}`,
        },
        {
          location: edition.press,
          layer: 'BelowEvents' as const,
          width: 1,
          cssClass: 'gz-sep gz-sep--press',
          toolTip: `${name} · ${format(text.header.pressAt, { time: clock(parseCivil(edition.press), tag) })}`,
        },
      ]
    })
    marks.push({
      location: NOW,
      layer: 'BelowEvents',
      width: 2,
      cssClass: 'gz-sep gz-sep--now',
      toolTip: `${text.masthead.clock} · ${clock(NOW_TICKS, tag)}`,
    })
    return marks
  }, [text, tag])

  const columns = useMemo<SuperScheduler.RowHeaderColumnData[]>(
    () =>
      density === 'narrow'
        ? [{ text: text.columns.staff, width: GRID.narrowColumn, nonresizable: true }]
        : density === 'compact'
          ? [
              { text: text.columns.staff, width: GRID.compactStaffColumn, nonresizable: true },
              { text: text.columns.copy, width: GRID.compactCopyColumn, nonresizable: true },
            ]
          : [
              { text: text.columns.staff, width: GRID.staffColumn, nonresizable: true },
              { text: text.columns.copy, width: GRID.copyColumn, nonresizable: true },
              { text: text.columns.where, width: GRID.whereColumn, nonresizable: true },
            ],
    [density, text],
  )

  const config = useMemo<SchedulerRenderProps>(() => {
    const escape = SuperScheduler.Util.escapeHtml
    const flagged = new Set(issues.map((issue) => issue.item))
    const byId = new Map(items.map((item) => [item.id, item]))
    const paintFlow = flowPainter(items)
    const bands = travelBands(STAFF, items)
    const overlapText = (conflicts: readonly SuperScheduler.Event[]) => {
      const first = conflicts[0]
      return first === undefined ? null : format(common.kit.overlaps, { name: first.text() })
    }

    // Desk section heads: what each desk has on tonight.
    const deskMeta = new Map<DeskId, string>(
      DESK_IDS.map((id) => {
        const lanes = new Set<string>(
          STAFF.filter((staff) => staff.desk === id).map((staff) => staff.id),
        )
        const work = items.filter((item) => lanes.has(item.lane) && item.kind !== 'fixed')
        const first = STAFF.find((staff) => staff.desk === id)?.role
        const count = work.length
        if (first === 'reporter') {
          const words = work.reduce((sum, item) => sum + (item.words ?? 0), 0)
          return [
            id,
            `${plural(text.deskMeta.stories, count, tag)} · ${format(text.deskMeta.words, { words: new Intl.NumberFormat(tag).format(words) })}`,
          ]
        }
        const forms =
          first === 'photographer'
            ? text.deskMeta.jobs
            : first === 'sub'
              ? text.deskMeta.slots
              : first === 'designer'
                ? text.deskMeta.pages
                : text.deskMeta.runs
        return [id, plural(forms, count, tag)]
      }),
    )
    const wireItems = items.filter((item) => item.lane === WIRE_ROW)
    const wireStory = wireItems.find((item) => item.kind === 'story')
    const wirePhoto = wireItems.find((item) => item.kind === 'photo')
    const freeReporter =
      wireStory === undefined ? undefined : freeFor(wireStory, items, NOW_TICKS)[0]
    const freePhotographer =
      wirePhoto === undefined ? undefined : freeFor(wirePhoto, items, NOW_TICKS)[0]

    // Header markup per cell, built once per level (the hook runs for every header cell).
    const headerCache = new Map<
      string,
      Pick<SuperScheduler.TimeHeaderRenderHeader, 'html' | 'cssClass' | 'areas' | 'toolTip'>
    >()
    // Cell areas and classes per row and hour, built once per plan.
    const cellCache = new Map<
      string,
      { css: string; areas: SuperScheduler.AreaData[]; disabled: boolean }
    >()
    // Clippings: markup and areas cached per state, so an unchanged card is not rebuilt.
    const cardCache = new Map<string, { html: string; areas: SuperScheduler.AreaData[] }>()

    return {
      locale: schedulerLocale,
      cssClass: skinClass(SLUG),
      startDate: BOARD.day,
      days: 2,
      zoomLevels: ZOOM_LEVELS,
      zoom: initialZoom,
      zoomPosition: 'left',
      zoomGesture: { min: 56, max: 280, scales: false },
      // The working evening only: noon to 04:00.
      onIncludeTimeCell: (args) => {
        const start = args.cell.start.getTime()
        if (start < BOARD_START || start >= BOARD_END) args.cell.visible = false
      },
      // Every hour is newsroom time: nothing is shaded as non-business.
      cellsMarkBusiness: false,
      // Exact times; drops snap to quarter hours in onEventMoving below.
      useEventBoxes: 'Never',
      snapToGridEventMoving: false,
      snapToGridEventResizing: false,
      height: '100%',
      treeEnabled: true,
      treePreventParentUsage: true,
      treeIndent: 0,
      rowHeaderColumns: columns,
      rowHeaderWidthAutoFit: false,
      eventHeight: GRID.eventHeight,
      rowMarginTop: GRID.rowMarginTop,
      rowMarginBottom: GRID.rowMarginBottom,
      allowEventOverlap: false,
      conflictHighlight: true,
      durationBarVisible: false,
      linkShape: 'RightAngled',
      // Under the clippings: a chain reads between them, never across their text.
      linkLayer: 'Below',
      crosshairType: 'Full',
      separators,
      showToolTip: false,
      keyboardEnabled: true,
      keyboardTarget: 'component',
      keyboardMode: 'Full',
      history,
      controlRef,
      onEventsChange,

      // The corner over the row headers: the screen's name, set like a section head.
      onBeforeCornerRender: (args) => {
        const tight = density === 'wide' ? '' : ' gz-corner--tight'
        args.html = `<span class="gz-corner${tight}"><b>${escape(text.header.corner)}</b><span>${escape(text.masthead.edition)}</span></span>`
      },

      onBeforeTimeHeaderRender: (args) => {
        const header = args.header
        const ticks = header.start.getTime()
        const end = header.end.getTime()
        const cellWidth = args.control.cellWidth ?? GRID.cellWidth
        const key = `${Math.round(cellWidth)}:${header.level}:${ticks}:${end}`
        let painted = headerCache.get(key)
        if (painted === undefined) {
          if (header.level === 0) {
            painted = {
              html: datelineHtml(Math.max(ticks, BOARD_START), tag),
              cssClass: 'gz-th gz-th--day',
              areas: [],
              toolTip: '',
            }
          } else if (header.level === 1) {
            // The edition bands, and the newsroom clock as a reversed tag over them.
            const now = nowArea(ticks, end, text, tag)
            painted = {
              html: '',
              cssClass: 'gz-th gz-th--bands',
              areas: [
                ...bandAreas(ticks, end, cellWidth, text, tag),
                ...(now === null ? [] : [now]),
              ],
              toolTip: '',
            }
          } else {
            const classes = ['gz-th', 'gz-th--hour']
            if (end <= NOW_TICKS) classes.push('gz-th--past')
            if (ticks <= NOW_TICKS && NOW_TICKS < end) classes.push('gz-th--now')
            painted = { html: hourHtml(ticks), cssClass: classes.join(' '), areas: [], toolTip: '' }
          }
          headerCache.set(key, painted)
        }
        header.html = painted.html
        header.cssClass = painted.cssClass
        header.areas = painted.areas
        header.toolTip = painted.toolTip
      },

      onBeforeRowHeaderRender: (args) => {
        const row = args.row
        const id = row.id
        const [first, second, third] = row.columns
        if (id === SUMMARY_ID) {
          row.cssClass = 'gz-row gz-row--summary'
          const total = items.reduce(
            (sum, item) => sum + (item.kind === 'story' ? wordsFiled(item, NOW_TICKS) : 0),
            0,
          )
          if (first !== undefined)
            first.html = `<span class="gz-rh gz-rh--summary"><span class="gz-rh__name">${escape(text.summary.row)}</span><span class="gz-rh__beat">${escape(text.summary.rowMeta)}</span></span>`
          if (second !== undefined)
            second.html = `<span class="gz-total"><b>${escape(new Intl.NumberFormat(tag).format(total))}</b><small>${escape(format(text.wordsShort, { count: '' }).trim())}</small></span>`
          // What the bars measure against: the copy desk's capacity at the clock.
          if (third !== undefined)
            third.html =
              `<span class="gz-cap"><small>${escape(text.summary.capacity)}</small>` +
              `<b>${escape(format(text.summary.capacityValue, { words: new Intl.NumberFormat(tag).format(deskCapacity(NOW_TICKS)) }))}</b></span>`
          return
        }
        if (id === WIRE_ROW) {
          row.cssClass = 'gz-row gz-row--wire'
          const count = wireItems.length
          // The app's suggestions: who is free for the wire copy, who can get to the scene.
          const reporter =
            wireStory === undefined
              ? ''
              : suggestHtml(
                  text.wire.reporter,
                  freeReporter === undefined ? null : staffName(freeReporter, text),
                  text,
                )
          const photographer =
            wirePhoto === undefined
              ? ''
              : suggestHtml(
                  freePhotographer === undefined
                    ? text.wire.photographer
                    : `${text.wire.photographer} · ${format(text.minutes, { count: travelTo(freePhotographer.id, wirePhoto, items).minutes })}`,
                  freePhotographer === undefined ? null : staffName(freePhotographer, text),
                  text,
                )
          // Narrower headers fold what their missing columns would say under the tray's name.
          const folded = density === 'narrow' ? reporter : density === 'compact' ? photographer : ''
          if (first !== undefined)
            first.html =
              `<span class="gz-rh gz-rh--wire"><b class="gz-flashbox">${escape(text.wire.row)}</b>` +
              `<span class="gz-rh__beat">${escape(count === 0 ? text.wire.clear : plural(text.wire.toAssign, count, tag))}</span>${folded}</span>`
          // Wide headers give both suggestions the copy and where columns together, as one area.
          if (density === 'wide') {
            if (second !== undefined) second.html = ''
            if (third !== undefined) third.html = ''
            row.areas = [
              {
                left: GRID.staffColumn,
                right: 0,
                top: 0,
                bottom: 0,
                cssClass: 'gz-suggestions',
                html: reporter + photographer,
              },
            ]
          } else if (second !== undefined) second.html = reporter
          return
        }
        const deskId = deskOfRow(id)
        if (deskId !== null) {
          row.cssClass = `ss-rh--group gz-row gz-row--desk gz-desk--${deskId}`
          // Parent rows span the columns: their header is the row's own html.
          row.html = deskHtml(deskId, deskMeta.get(deskId) ?? '', text)
          if (first !== undefined) first.html = row.html
          return
        }
        if (!isStaffId(id)) return
        const staff = staffById(id)
        if (staff === null) return
        row.cssClass = `gz-row gz-row--${staff.role}`
        if (first !== undefined) first.html = staffHtml(staff, text)
        if (second !== undefined)
          second.html = gaugeHtml(staff, staffFigure(staff, items, NOW_TICKS), text, tag)
        if (third !== undefined) third.html = whereHtml(whereAt(staff, items, NOW_TICKS), text)
      },

      onBeforeCellRender: (args) => {
        const cell = args.cell
        const from = cell.start.getTime()
        const to = cell.end.getTime()
        if (cell.resource === SUMMARY_ID) {
          const painted = paintFlow(from, to, args.control.cellWidth ?? GRID.cellWidth, text, tag)
          cell.properties.html = painted.html
          cell.properties.cssClass = painted.css
          return
        }
        const key = `${String(cell.resource)}|${from}`
        let painted = cellCache.get(key)
        if (painted === undefined) {
          const past = to <= NOW_TICKS ? ' gz-cell--past' : ''
          if (cell.resource === WIRE_ROW) {
            const flash = wireFlashArea(from, to, text, tag)
            painted = {
              css: `gz-cell gz-cell--wire${past}`,
              areas: flash === null ? [] : [flash],
              disabled: false,
            }
          } else if (deskOfRow(cell.resource) !== null) {
            painted = { css: `gz-cell gz-cell--desk${past}`, areas: [], disabled: false }
          } else {
            const staff = staffById(String(cell.resource))
            if (staff === null) painted = { css: 'gz-cell', areas: [], disabled: false }
            else if (offShift(from, to, shiftOf(staff)))
              // Off-shift hours are disabled cells: the library refuses drops on them too.
              painted = { css: `gz-cell gz-cell--off${past}`, areas: [], disabled: true }
            else
              painted = {
                css: `gz-cell${past}`,
                areas: travelAreas(bands.get(staff.id) ?? [], from, to, text),
                disabled: false,
              }
          }
          cellCache.set(key, painted)
        }
        cell.properties.cssClass = painted.css
        if (painted.areas.length > 0) cell.properties.areas = painted.areas
        if (painted.disabled) cell.properties.disabled = true
      },

      onBeforeEventRender: (args) => {
        const data = args.data
        const id = String(data.id)
        const item = byId.get(id)
        if (item === undefined) return
        const stage = stageOf(item, items, NOW_TICKS)
        const isFlagged = flagged.has(id)
        const isSelected = id === selected
        const started = parseCivil(item.start) < NOW_TICKS
        const key = `${id}|${item.lane}|${item.start}|${item.end}|${stage}|${isFlagged ? 1 : 0}|${isSelected ? 1 : 0}|${mode}`
        let cached = cardCache.get(key)
        if (cached === undefined) {
          const html = cardHtml(
            item,
            items,
            { stage, flagged: isFlagged, selected: isSelected, mode },
            text,
            tag,
          )
          const areas: SuperScheduler.AreaData[] = []
          // The words on the desk by the clock, as a hairline along the clipping's foot.
          if (item.kind === 'story' && item.lane !== WIRE_ROW && item.words !== undefined) {
            const share = wordsFiled(item, NOW_TICKS) / item.words
            areas.push({
              left: 0,
              bottom: 0,
              height: 3,
              width: percent(share),
              nonFloating: true,
              cssClass: 'gz-wordbar',
              toolTip: format(text.fields.wordsValue, {
                done: new Intl.NumberFormat(tag).format(wordsFiled(item, NOW_TICKS)),
                total: new Intl.NumberFormat(tag).format(item.words),
              }),
            })
          }
          // One hover button: hand the wire copy over, or take the earliest slot that mends the chain.
          const button =
            item.lane === WIRE_ROW
              ? assignLabel(item, items, text, tag)
              : isFlagged &&
                  !started &&
                  (item.kind === 'sub' || item.kind === 'layout' || item.kind === 'press')
                ? earliestLabel(item, items, text, tag)
                : null
          if (button?.enabled === true)
            areas.push({
              right: 4,
              top: 'calc(50% - 12px)',
              width: 24,
              height: 24,
              visibility: 'Hover',
              action: 'None',
              cssClass: 'gz-act',
              html: item.lane === WIRE_ROW ? GLYPH.assign : GLYPH.earliest,
              toolTip: button.label,
              onClick: (click) => {
                click.preventDefault()
                action.current(item.lane === WIRE_ROW ? 'assign' : 'earliest', id)
              },
            })
          cached = { html, areas }
          cardCache.set(key, cached)
        }
        data.html = cached.html
        data.areas = cached.areas
        const classes = ['gz-ev', `gz-ev--${item.kind}`]
        if (item.breaking === true) classes.push('gz-breaking')
        if (item.lane === WIRE_ROW) classes.push('gz-onwire')
        if (isFlagged) classes.push('gz-flagged')
        if (isSelected) classes.push('gz-selected')
        if (started) classes.push('gz-started')
        if (parseCivil(item.end) <= NOW_TICKS) classes.push('gz-done')
        if (traced !== null && id === traced) classes.push('gz-pinned')
        data.cssClass = classes.join(' ')
        // Work under way is not moved by the desk.
        if (started) {
          data.moveDisabled = true
          data.resizeDisabled = true
        }
        const flag = isFlagged ? `, ${text.stamps.hold}` : ''
        data.ariaLabel = `${String(data.text)}, ${text.kinds[item.kind]}, ${text.stages[stage]}${flag}`
      },

      // Live search and the status chips: the clippings whose labels hold every word of the query.
      onEventFilter: (args) => {
        const filter = args.filterParam
        if (!(filter instanceof ClippingFilter)) return
        const item = byId.get(String(args.e.id()))
        if (item === undefined) return
        args.visible =
          matchesSearch(searchLabels(item, items, text), filter.query) &&
          matchesStatus(item, filter.status, flagged, NOW_TICKS)
      },

      // The desk filter: one desk and its staff; the wire and the copy flow always stay.
      onRowFilter: (args) => {
        const filter = args.filterParam
        if (!(filter instanceof DeskFilter)) return
        const id = args.row.id
        if (id === SUMMARY_ID || id === WIRE_ROW) return
        const rowDesk = deskOfRow(id) ?? (isLaneId(id) ? deskOf(id) : null)
        args.visible = rowDesk === filter.desk
      },

      // The desk's rules, at the quarter hour the drop would land on.
      onEventMoving: (args) => {
        const id = String(args.e.id())
        const item = byId.get(id)
        const fields = readItemFields(args.e.data)
        if (item === undefined || fields === null) return
        const length = parseCivil(item.end) - parseCivil(item.start)
        let start = args.start.getTime()
        // Clippings shorter than a cell are dragged by their cell: keep the instant that was grabbed.
        if (length < HOUR) {
          let offset = grabs.get(args)
          if (offset === undefined) {
            offset = start - parseCivil(item.start)
            grabs.set(args, offset)
          }
          start -= offset
        }
        const snapped = Math.round(start / SNAP) * SNAP
        if (snapped !== args.start.getTime()) {
          args.start = args.start.addMilliseconds(snapped - args.start.getTime())
          args.end = args.start.addMilliseconds(length)
        }
        const lane = String(args.resource)
        const reason = isLaneId(lane)
          ? refusalOf(item, lane, snapped, snapped + length, items, NOW_TICKS)
          : null
        if (reason !== null) {
          const message = refusalMessage(reason, text, tag)
          args.allowed = false
          args.message = message
          dropRefusal.track(id, message)
          return
        }
        dropRefusal.track(id, overlapText(args.conflicts))
      },

      onEventResizing: (args) => {
        const id = String(args.e.id())
        const item = byId.get(id)
        if (item === undefined) return
        const min = MIN_MINUTES[item.kind] * MINUTE
        if (args.what === 'end') {
          const end = Math.max(
            args.start.getTime() + min,
            Math.round(args.end.getTime() / SNAP) * SNAP,
          )
          args.end = args.end.addMilliseconds(end - args.end.getTime())
        } else {
          const start = Math.min(
            args.end.getTime() - min,
            Math.round(args.start.getTime() / SNAP) * SNAP,
          )
          args.start = args.start.addMilliseconds(start - args.start.getTime())
        }
        const reason = refusalOf(
          item,
          item.lane,
          args.start.getTime(),
          args.end.getTime(),
          items,
          NOW_TICKS,
        )
        if (reason !== null) {
          const message = refusalMessage(reason, text, tag)
          args.allowed = false
          args.message = message
          dropRefusal.track(id, message)
          return
        }
        dropRefusal.track(id, overlapText(args.conflicts))
      },

      // Final checks before the commit (keyboard moves arrive here without a drag).
      onEventMove: (args) => {
        const id = String(args.e.id())
        const item = byId.get(id)
        const lane = String(args.newResource)
        if (item === undefined || !isLaneId(lane)) return
        const reason = refusalOf(
          item,
          lane,
          args.newStart.getTime(),
          args.newEnd.getTime(),
          items,
          NOW_TICKS,
        )
        if (reason === null) return
        args.preventDefault()
        dropRefusal.clear()
        onRefused(id, refusalMessage(reason, text, tag))
      },
      onEventResize: (args) => {
        const id = String(args.e.id())
        const item = byId.get(id)
        if (item === undefined) return
        const reason = refusalOf(
          item,
          item.lane,
          args.newStart.getTime(),
          args.newEnd.getTime(),
          items,
          NOW_TICKS,
        )
        if (reason === null) return
        args.preventDefault()
        dropRefusal.clear()
        onRefused(id, refusalMessage(reason, text, tag))
      },

      onEventMoved: (args) => {
        dropRefusal.clear()
        onMoved(String(args.e.id()))
      },
      onEventResized: (args) => {
        dropRefusal.clear()
        onResized(String(args.e.id()), args.what)
      },
      // A click (or Enter) docks the clipping into the side sheet; the hover card steps aside.
      onEventClick: (args) => {
        closeHover()
        onSelect(String(args.e.id()))
      },

      // Hovering a clipping traces its chain: the rest of the board steps back.
      onEventMouseEnter: (args) => {
        const item = byId.get(String(args.e.id()))
        if (item !== undefined) trace(boardRef.current, chainOf(item, items), links)
      },
      onEventMouseLeave: () => {
        const pinned = traced === null ? undefined : byId.get(traced)
        trace(boardRef.current, pinned === undefined ? null : chainOf(pinned, items), links)
      },

      onZoom: (args) => {
        if (args.phase !== 'end') return
        const next = ZOOM_IDS[args.level]
        if (next === undefined) return
        onZoomLevel(next)
      },
    }
  }, [
    boardRef,
    closeHover,
    columns,
    common,
    controlRef,
    density,
    dropRefusal,
    history,
    initialZoom,
    items,
    issues,
    links,
    mode,
    onEventsChange,
    onMoved,
    onRefused,
    onResized,
    onSelect,
    onZoomLevel,
    schedulerLocale,
    selected,
    separators,
    tag,
    text,
    traced,
  ])

  // Imperative and once: a scroll prop would be re-applied on every update.
  useEffect(() => {
    controlRef.current?.scrollTo(INITIAL_VIEW_START, false, 'left')
  }, [controlRef])

  // The live search and the status chips go through the library's event filtering.
  useEffect(() => {
    const query = search.trim()
    controlRef.current?.events.filter(
      query === '' && status === 'all' ? null : new ClippingFilter(query, status),
    )
  }, [controlRef, search, status])

  // The desk chips go through the library's row filtering.
  useEffect(() => {
    controlRef.current?.rows.filter(desk === null ? null : new DeskFilter(desk))
  }, [controlRef, desk])

  // A pinned chain stays forward until it is released.
  useEffect(() => {
    const pinned = traced === null ? undefined : items.find((item) => item.id === traced)
    trace(boardRef.current, pinned === undefined ? null : chainOf(pinned, items), links)
  }, [boardRef, traced, items, links])

  return (
    <SuperSchedulerComponent
      {...config}
      resources={resources}
      events={events}
      links={links}
      eventHover={eventHover}
      dragCard={dragCard}
      contextMenu={contextMenu}
    />
  )
}

/** A suggestion in the wire tray's header: what for, then who (or nobody, in red). */
function suggestHtml(label: string, name: string | null, text: GazetteText): string {
  const escape = SuperScheduler.Util.escapeHtml
  return (
    `<span class="gz-suggest"${name === null ? ' data-none=""' : ''}><small>${escape(label)}</small>` +
    `<b>${escape(name ?? text.wire.nobody)}</b></span>`
  )
}

/** The grabbed instant of each running drag (its args object lives as long as the gesture). */
const grabs = new WeakMap<object, number>()