Construction programme planning

The integration: the tree and its columns, the frozen crane row, three header rows, separators, milestones and progress bars, links styled from the critical path with their bubble, window selection, multi-move with members rewritten per frame, the drag verdict, the hover card and the context menu, and the callbacks where the site’s rules refuse a move.

/**
 * Plumbline programme board: Linden Yard, Block C, drawn as its section. Levels from the roof
 * down, the faces of each level as rows, fifteen weeks of days on a drafting grid, the critical
 * path in red pencil and the tower crane booked day by day on top.
 *
 * Library: a three-level resource tree with rowHeaderColumns (merged parent rows), a frozen
 * summary row painted by onBeforeCellRender, three time-header rows written by
 * onBeforeTimeHeaderRender (a dimension chain of weeks, days, the forecast) with header areas,
 * disabled cells, separators, milestones, PercentComplete bars drawn as material hatches,
 * finish-to-start links styled by onBeforeLinkRender with a link bubble, multi-select (click,
 * Ctrl/Cmd+click, a window drawn over the grid with rectangleSelectHandling), allowMultiMove with
 * members rewritten per frame, eventMoveSkipNonBusiness, conflict highlighting, the zoom slider
 * (super-scheduler/zoom-ui), keyboard and undo history, the event hover card and the drag card
 * (super-scheduler/react-render) and a context menu. Application: the site calendar, curing,
 * logic, rain, crews and fixed dates, the critical path and float, crane hours and every figure.
 * Those rules live in ./rules; ./paint writes the markup.
 */
import { useCallback, useEffect, useMemo, 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 { createZoomSlider } from 'super-scheduler/zoom-ui'
import { format, plural } from '~/i18n/format'
import { DAY, civil, parseCivil } from '../../scheduler/civil'
import { createEventMenu, type MenuEntry } from '../kit/context-menu'
import { useEventHover } 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 {
  BOARD,
  BUILDING_ID,
  CRANE_ROW,
  ROW_HEADER_WIDTH,
  activityName,
  isLevelRowId,
  isRowId,
  levelOfRow,
  openingScroll,
  readActivityFields,
  toResources,
  type ActivityEvent,
} from './adapter'
import {
  activityCard,
  craneDayOf,
  firstValidOf,
  refusalText,
  type ActivityAction,
  type PlanView,
} from './card'
import {
  CRANE_DISMANTLED,
  CRANE_HOURS,
  INITIAL_VIEW_START,
  NOW,
  PLAN,
  ROWS,
  type Activity,
} from './model'
import {
  DAY_LETTERS_FROM,
  DAY_NUMBERS_FROM,
  buildingHtml,
  cardHtml,
  cellPainter,
  craneCell,
  craneHeaderHtml,
  dayHeader,
  doneHtml,
  faceHtml,
  keyDay,
  levelHtml,
  milestoneHtml,
  shortDay,
  tradeHtml,
  weatherHeader,
  weekHeader,
  type HeaderPaint,
} from './paint'
import {
  addWorkingDays,
  brokenSuccessors,
  craneHours,
  curingWindows,
  dayOf,
  duration,
  frameOf,
  groupRefusal,
  isMovable,
  isWorkingDay,
  linkId,
  nextWorkingStart,
  placementRefusal,
  pourOf,
  rowProgress,
  shiftStart,
  signedWorkingDays,
  slabState,
  tradeWork,
  workAt,
  type Span,
} from './rules'
import type { LogicView, PlumblineText } from './text'

const SLUG = 'construction-site'
const NOW_TICKS = parseCivil(NOW)
const PLAN_FROM = parseCivil(PLAN.start)

export interface PlumblineSchedulerProps {
  readonly events: ActivityEvent[]
  readonly view: PlanView
  readonly text: PlumblineText
  readonly common: DemoCommon
  /** BCP 47 tag for labels, and the scheduler locale id. */
  readonly tag: string
  readonly schedulerLocale: string
  readonly logic: LogicView
  /** Narrow stages keep the location column only. */
  readonly narrow: boolean
  readonly history: SchedulerHistory
  readonly controlRef: RefObject<SuperScheduler.Scheduler | null>
  /** Where the product bar keeps the zoom slider (the drawing's scale bar). */
  readonly zoomHost: RefObject<HTMLDivElement | null>
  readonly onEventsChange: (args: SchedulerEventsChangeArgs) => void
  /** A click (or Enter) on an activity: its sheet opens. */
  readonly onOpen: (id: string) => void
  readonly onMoved: (ids: readonly string[]) => void
  readonly onRefused: (id: string, message: string) => void
  readonly onAction: (action: ActivityAction, id: string) => void
  /** The settled cell width after a zoom, for the title block's scale. */
  readonly onScale: (cellWidth: number) => void
}

/** The last working day at or before `ticks` (a keyboard move to the left over a weekend). */
function previousWorkingStart(ticks: number): number {
  let day = dayOf(ticks)
  while (!isWorkingDay(day)) day -= DAY
  return day
}

/** onBeforeTimeHeaderRender: weeks, days and the forecast, cached per cell and width bucket. */
function createTimeHeaderHook(text: PlumblineText, tag: string) {
  const cache = new Map<string, HeaderPaint>()
  const nowLabel = format(text.chrome.now, { day: shortDay(NOW_TICKS, tag), time: '07:00' })
  return (args: SuperScheduler.SchedulerBeforeTimeHeaderRenderArgs) => {
    const header = args.header
    const start = header.start.getTime()
    const span = header.end.getTime() - start
    const width = args.control.cellWidth ?? BOARD.cellWidth
    const bucket = width >= DAY_LETTERS_FROM ? 'w' : width >= DAY_NUMBERS_FROM ? 'm' : 'n'
    const key = `${header.level}:${start}:${span}:${bucket}`
    let paint = cache.get(key)
    if (paint === undefined) {
      paint =
        header.level === 0
          ? weekHeader(start, span, text, tag)
          : header.level === 1
            ? dayHeader(start, span, width, tag)
            : weatherHeader(start, span, width, text, nowLabel)
      cache.set(key, paint)
    }
    header.html = paint.html
    header.cssClass = paint.cssClass
    header.areas = paint.areas
    header.toolTip = paint.toolTip
  }
}

export function PlumblineScheduler(props: PlumblineSchedulerProps) {
  const { events, view, text, common, tag, schedulerLocale, logic, narrow, history } = props
  const { controlRef, zoomHost } = props
  const { onEventsChange, onOpen, onMoved, onRefused, onAction, onScale } = props

  const resources = useMemo(() => toResources(text), [text])
  const refusal = useDropRefusal(onRefused)

  const name = useCallback((activity: Activity) => activityName(activity, text), [text])

  // Hover card: a drawing callout with the logic on both sides, the float and the revision.
  const card = useCallback(
    (event: SuperScheduler.Event) => {
      const activity = view.net.byId.get(String(event.id()))
      return activity === undefined ? null : activityCard(activity, view, text, common, tag)
    },
    [view, text, common, tag],
  )
  const { eventHover, closeHover, suppressHover } = useEventHover(card)

  // Drag verdict: the site's refusal, or the successors the drop would push out of their logic.
  const dragCard = useMemo(
    () =>
      createDragCard({
        tag,
        common,
        days: true,
        rowName: (id) => {
          const row = ROWS.find((candidate) => candidate.id === id)
          return row === undefined
            ? null
            : `${text.levelShort[row.level]} · ${text.faces[row.face]}`
        },
        warn: (info) => {
          const activity = view.net.byId.get(String(info.eventId))
          if (activity === undefined) return null
          const span = { start: info.start.getTime(), end: info.end.getTime() }
          const broken = brokenSuccessors(activity, span, view.net)
          if (broken.length === 0) return null
          const names = broken
            .flatMap((item) => {
              const next = view.net.byId.get(item.id)
              return next === undefined ? [] : [`${name(next)} (${shortDay(item.until, tag)})`]
            })
            .join(', ')
          return plural(text.card.pushes, broken.length, tag, { names })
        },
      }),
    [view, text, common, tag, name],
  )

  // Context menu: rebuilt when the plan changes, so its labels name the real day.
  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 activity = view.net.byId.get(id)
          if (activity === undefined) return []
          const entries: MenuEntry[] = [
            {
              label: common.kit.openDetails,
              icon: 'details',
              keys: KEYS.details,
              run: () => onAction('details', id),
            },
          ]
          if (view.issueOf.has(id) && isMovable(activity)) {
            const first = firstValidOf(activity, view)
            entries.push({
              label:
                first === null
                  ? text.actions.noValid
                  : format(text.actions.firstValid, { date: shortDay(first, tag) }),
              icon: 'slot',
              primary: true,
              disabled: first === null,
              run: () => onAction('first-valid', id),
            })
          }
          if (activity.trade === 'lift' && isMovable(activity)) {
            const day = craneDayOf(activity, view)
            entries.push({
              label:
                day === null
                  ? text.actions.noCraneDay
                  : format(text.actions.craneDay, { date: shortDay(day, tag) }),
              icon: 'after',
              primary: !view.issueOf.has(id),
              disabled: day === null,
              run: () => onAction('crane-day', id),
            })
          }
          const row = ROWS.find((candidate) => candidate.id === activity.row)
          const frame = frameOf(view.activities, activity.row).filter(isMovable)
          const trade = activity.trade === null ? [] : tradeWork(view.activities, activity.trade)
          const selections: MenuEntry[] = []
          if (row !== undefined && frame.some((member) => member.id === id) && frame.length > 1)
            selections.push({
              label: format(text.actions.selectFrame, {
                level: text.levelShort[row.level],
                count: String(frame.length),
              }),
              icon: 'focus',
              run: () => onAction('select-frame', id),
            })
          if (activity.trade !== null && trade.length > 1)
            selections.push({
              label: format(text.actions.selectTrade, {
                trade: text.trades[activity.trade],
                count: String(trade.length),
              }),
              icon: 'layers',
              run: () => onAction('select-trade', id),
            })
          if (selections.length > 0) entries.push('separator', ...selections)
          entries.push('separator', {
            label: logic === 'all' ? text.actions.showCritical : text.actions.showAll,
            icon: 'link',
            run: () => onAction('toggle-logic', id),
          })
          return entries
        },
      }),
    [view, logic, common, text, tag, suppressHover, onAction],
  )

  // The logic from the model; the critical path in red pencil, broken links as clashes. Abutting
  // bars of one face read as a sequence already (like a dimension chain): their link is drawn only
  // when it breaks. The bubble (bubbleHtml) is part of each link's data: lag and the float left.
  const links = useMemo<SuperScheduler.LinkData[]>(() => {
    const escape = SuperScheduler.Util.escapeHtml
    const broken = new Set(
      view.issues.flatMap((issue) =>
        issue.other === undefined ? [] : [`${issue.other}->${issue.activity}`],
      ),
    )
    return view.net.links.flatMap((link): SuperScheduler.LinkData[] => {
      const id = linkId(link)
      const critical = view.plan.criticalLinks.has(id)
      const clash = broken.has(id)
      if (logic === 'critical' && !critical && !clash) return []
      const from = view.net.byId.get(link.from)
      const to = view.net.byId.get(link.to)
      if (from === undefined || to === undefined) return []
      if (!clash && link.lag === 0 && from.row === to.row && from.end === to.start) return []
      const required = parseCivil(from.end) + link.lag * DAY
      const gap = signedWorkingDays(nextWorkingStart(required), parseCivil(to.start))
      const lagText =
        link.lag > 0 ? format(text.card.curedOn, { date: shortDay(required, tag) }) : ''
      const gapText =
        gap < 0
          ? format(text.card.negative, { count: String(-gap) })
          : gap === 0
            ? text.card.critical
            : format(text.card.float, { count: String(gap) })
      return [
        {
          id,
          from: link.from,
          to: link.to,
          type: 'FinishToStart',
          cssClass: clash
            ? 'pl-link pl-link--clash'
            : critical
              ? 'pl-link pl-link--critical'
              : 'pl-link',
          bubbleHtml:
            `<span class="pl-lb"><b>${escape(name(from))} → ${escape(name(to))}</b>` +
            (lagText === '' ? '' : `<span>${escape(lagText)}</span>`) +
            `<span class="pl-lb__gap" data-gap="${gap < 0 ? 'clash' : gap === 0 ? 'zero' : 'free'}">${escape(gapText)}</span></span>`,
        },
      ]
    })
  }, [view, logic, text, tag, name])

  // The link bubble shows a link's lag and the float it leaves (one instance, the menu's skin).
  const linkBubble = useMemo(
    () =>
      new SuperScheduler.Bubble({
        theme: skinMenuTheme(SLUG),
        showAfter: 120,
        position: 'Mouse',
        hideOnClick: true,
      }),
    [],
  )

  // The separators: the site clock as a section cut, and the day the tower crane comes down.
  const separators = useMemo<SuperScheduler.SeparatorData[]>(
    () => [
      {
        location: `${CRANE_DISMANTLED}T00:00:00`,
        layer: 'BelowEvents',
        width: 1,
        cssClass: 'pl-sep-crane',
        toolTip: format(text.kpi.toppingTip, { date: shortDay(parseCivil(CRANE_DISMANTLED), tag) }),
      },
      {
        location: NOW,
        layer: 'AboveEvents',
        width: 2,
        cssClass: 'pl-sep-now',
        toolTip: format(text.chrome.now, {
          day: shortDay(NOW_TICKS, tag),
          time: new Intl.DateTimeFormat(tag, {
            hour: '2-digit',
            minute: '2-digit',
            hourCycle: 'h23',
            timeZone: 'UTC',
          }).format(new Date(NOW_TICKS)),
        }),
      },
    ],
    [text, tag],
  )

  // Header markup per cell, cached for the board's life (the hook runs for every header cell).
  const timeHeaders = useMemo(() => createTimeHeaderHook(text, tag), [text, tag])

  const columns = useMemo<SuperScheduler.RowHeaderColumnData[]>(
    () =>
      narrow
        ? [{ text: text.columns.location, width: BOARD.narrowColumn, nonresizable: true }]
        : [
            { text: text.columns.location, width: BOARD.locationColumn, nonresizable: true },
            { text: text.columns.trade, width: BOARD.tradeColumn, nonresizable: true },
            { text: text.columns.done, width: BOARD.doneColumn, nonresizable: true },
          ],
    [narrow, text],
  )

  const config = useMemo<SchedulerRenderProps>(() => {
    const escape = SuperScheduler.Util.escapeHtml
    const activities = view.activities
    const byId = view.net.byId
    // Row figures, once per plan: progress, the trade at work, critical faces, slabs.
    const progress = new Map(ROWS.map((row) => [row.id, rowProgress(activities, row.id)]))
    const overall =
      ROWS.reduce((sum, row) => sum + (progress.get(row.id) ?? 0), 0) / Math.max(1, ROWS.length)
    const criticalRows = new Set(
      activities.flatMap((activity) => (view.plan.critical.has(activity.id) ? [activity.row] : [])),
    )
    const paintCell = cellPainter(curingWindows(activities))
    const crane = craneHours(activities, PLAN_FROM, PLAN.days)
    const cards = new Map<string, string>()

    /** Members of a multi-move, each shifted by the dragged activity's working days. */
    const groupSpans = (
      master: Activity,
      start: number,
      items: readonly SuperScheduler.SchedulerMultiMoveItem[],
    ) => {
      const delta = signedWorkingDays(parseCivil(master.start), start)
      const spans = new Map<string, Span>()
      const members: Activity[] = []
      for (const item of items) {
        const member = byId.get(String(item.event.id()))
        if (member === undefined) continue
        const from = shiftStart(parseCivil(member.start), delta)
        spans.set(member.id, { start: from, end: addWorkingDays(from, duration(member)) })
        members.push(member)
      }
      return { delta, spans, members }
    }

    return {
      locale: schedulerLocale,
      cssClass: skinClass(SLUG),
      startDate: PLAN.start,
      days: PLAN.days,
      // ISO weeks in every locale: the week row is a dimension chain from Monday to Monday.
      weekStarts: 1,
      scale: 'Day',
      cellWidth: BOARD.cellWidth,
      zoomGesture: { min: BOARD.zoom.min, max: BOARD.zoom.max, scales: false },
      // The drawing keeps its lettering down to a narrow day; it simplifies further out.
      lod: { zoomedOut: 20, eventFull: 26, eventText: 20, cellContent: 12, dayNumber: 13 },
      timeHeaders: [
        { groupBy: 'Week', height: BOARD.header.week },
        { groupBy: 'Day', height: BOARD.header.day },
        { groupBy: 'Day', height: BOARD.header.weather },
      ],
      // Weekends are the site's: drawn by the cells, and skipped by moves.
      cellsMarkBusiness: false,
      businessWeekends: false,
      eventMoveSkipNonBusiness: true,
      useEventBoxes: 'Never',
      height: '100%',
      treeEnabled: true,
      treePreventParentUsage: true,
      treeIndent: narrow ? 4 : BOARD.treeIndent,
      rowHeaderColumns: columns,
      rowHeaderColumnsMergeParents: true,
      rowHeaderWidth: narrow ? BOARD.narrowColumn : ROW_HEADER_WIDTH,
      rowHeaderWidthAutoFit: false,
      eventHeight: BOARD.eventHeight,
      rowMarginTop: BOARD.rowMargin,
      rowMarginBottom: BOARD.rowMargin,
      allowEventOverlap: false,
      conflictHighlight: true,
      // Progress fills the trade's hatch from the left: the bar spans the whole card.
      durationBarVisible: true,
      durationBarMode: 'PercentComplete',
      durationBarHeight: 3,
      // Selection: a click, Ctrl/Cmd+click, or a window drawn over the empty grid (CAD style).
      eventClickHandling: 'Select',
      allowMultiSelect: true,
      allowMultiMove: true,
      rectangleSelectHandling: 'EventSelect',
      timeRangeSelectedHandling: 'Disabled',
      linkShape: 'RightAngled',
      linkLayer: 'Below',
      linkBubble,
      crosshairType: 'Full',
      separators,
      showToolTip: false,
      keyboardEnabled: true,
      keyboardTarget: 'component',
      keyboardMode: 'Full',
      history,
      controlRef,
      onEventsChange,

      // The corner names the drawing: section A–A of Block C.
      onBeforeCornerRender: (args) => {
        args.html =
          `<span class="pl-corner"><b>${escape(text.section)}</b>` +
          `<span>${escape(text.building)}</span></span>`
      },

      onBeforeRowHeaderRender: (args) => {
        const row = args.row
        const id = row.id
        const [first, second, third] = row.columns
        if (id === CRANE_ROW) {
          row.cssClass = 'pl-row pl-row--crane'
          if (first !== undefined) first.html = craneHeaderHtml(text)
          if (second !== undefined) second.html = ''
          if (third !== undefined)
            third.html = `<span class="pl-cap" aria-hidden="true"><i></i>${CRANE_HOURS} h</span>`
          return
        }
        if (id === BUILDING_ID) {
          row.cssClass = 'pl-row pl-row--building'
          row.html = buildingHtml(text, overall)
          if (first !== undefined) first.html = row.html
          return
        }
        if (isLevelRowId(id)) {
          const level = levelOfRow(id)
          row.cssClass = 'pl-row pl-row--level'
          row.html = levelHtml(level, slabState(pourOf(activities, level)), text, tag)
          if (first !== undefined) first.html = row.html
          return
        }
        if (!isRowId(id)) return
        const critical = criticalRows.has(id)
        row.cssClass = 'pl-row pl-row--face'
        if (first !== undefined) first.html = faceHtml(String(row.name), critical)
        if (second !== undefined) second.html = tradeHtml(workAt(activities, id), text, tag)
        if (third !== undefined) third.html = doneHtml(progress.get(id) ?? 0)
      },

      onBeforeCellRender: (args) => {
        const cell = args.cell
        const day = cell.start.getTime()
        const wide = (args.control.cellWidth ?? BOARD.cellWidth) >= 26
        if (cell.resource === CRANE_ROW) {
          const hours = crane[Math.round((day - PLAN_FROM) / DAY)] ?? 0
          const painted = craneCell(hours, wide, text)
          cell.properties.cssClass = painted.css
          cell.properties.html = painted.html
          return
        }
        if (cell.resource === BUILDING_ID || isLevelRowId(cell.resource)) {
          cell.properties.cssClass = isWorkingDay(day) ? 'pl-c-slab' : 'pl-c-slab pl-c-off'
          return
        }
        if (!isRowId(cell.resource)) return
        const painted = paintCell(cell.resource, day, wide, text)
        if (painted.css !== '') cell.properties.cssClass = painted.css
        if (painted.html !== '') cell.properties.html = painted.html
        if (painted.disabled) cell.properties.disabled = true
      },

      onBeforeEventRender: (args) => {
        const data = args.data
        const fields = readActivityFields(data)
        const id = String(data.id)
        const activity = byId.get(id)
        if (fields === null || activity === undefined) return
        const issue = view.issueOf.get(id) ?? null
        const critical = view.plan.critical.has(id)
        const revision = view.revisionOf.get(id) ?? null
        const classes = ['pl-ev', `pl-k-${activity.kind}`]
        if (activity.trade !== null) classes.push(`pl-t-${activity.trade}`)
        if (critical) classes.push('pl-ev--critical')
        if (issue !== null) classes.push('pl-ev--clash')
        if (revision !== null) classes.push('pl-ev--revised')
        if (activity.complete >= 100) classes.push('pl-ev--built')
        else if (activity.complete > 0) classes.push('pl-ev--running')
        data.cssClass = classes.join(' ')
        const label = activityName(activity, text)

        if (activity.kind === 'milestone') {
          // A key date: a diamond at the end of its day, its name and day beside it.
          data['type'] = 'Milestone'
          data['width'] = 18
          data.html = ''
          data.barHidden = true
          const note = issue === null ? null : text.card.conflict
          data.htmlRight =
            (args.control.cellWidth ?? BOARD.cellWidth) >= DAY_NUMBERS_FROM
              ? milestoneHtml(label, keyDay(parseCivil(activity.start), tag), note)
              : ''
          data.ariaLabel = `${label}, ${keyDay(parseCivil(activity.start), tag)}`
          return
        }

        const days = duration(activity)
        const width = Math.round(
          ((parseCivil(activity.end) - parseCivil(activity.start)) / DAY) *
            (args.control.cellWidth ?? BOARD.cellWidth),
        )
        const bucket =
          width >= 110
            ? 110
            : width >= 96
              ? 96
              : width >= 64
                ? 64
                : width >= 58
                  ? 58
                  : width >= 30
                    ? 30
                    : 0
        const key = `${id}|${bucket}|${revision ?? ''}|${activity.complete}`
        let html = cards.get(key)
        if (html === undefined) {
          html = cardHtml(activity, label, days, { critical, issue, revision, width: bucket }, text)
          cards.set(key, html)
        }
        data.html = html
        data.complete = activity.complete
        if (activity.kind !== 'work') data.barHidden = true
        // The days an activity starts too early: hatched in red pencil, from its start.
        const areas: SuperScheduler.AreaData[] = []
        if (issue !== null) {
          const end =
            issue.kind === 'rain'
              ? activity.end
              : civil(Math.min(issue.until, parseCivil(activity.end)))
          areas.push({
            start: activity.start,
            end,
            top: 0,
            bottom: 0,
            cssClass: 'pl-clash',
            action: 'Default',
          })
        }
        data.areas = areas
        const state =
          issue !== null ? `, ${text.card.conflict}` : critical ? `, ${text.card.critical}` : ''
        data.ariaLabel = `${label}, ${shortDay(parseCivil(activity.start), tag)}, ${plural(text.days, days, tag)}${state}`
      },

      // The critical path is drawn heavier than the leader lines of the rest of the logic.
      onBeforeLinkRender: (args) => {
        if ((args.data.cssClass ?? '').includes('critical')) args.data.width = 2
      },

      // A plain drag over the empty grid draws a selection window, as in a drawing program.
      onGridMouseDown: (args) => {
        if (args.button === 'left') args.action = 'RectangleSelect'
      },

      // Every frame: the site's rules for the dragged activity or the whole selection moved
      // together (each member shifted by the same working days, rewritten here).
      onEventMoving: (args) => {
        const id = String(args.e.id())
        const activity = byId.get(id)
        if (activity === undefined) return
        if (args.multimove.length > 1) {
          const group = groupSpans(activity, args.start.getTime(), args.multimove)
          for (const item of args.multimove) {
            const span = group.spans.get(String(item.event.id()))
            if (span === undefined) continue
            item.start = new SuperScheduler.Date(span.start)
            item.end = new SuperScheduler.Date(span.end)
          }
          const refused = groupRefusal(group.members, group.spans, view.net)
          if (refused !== null) {
            const member = byId.get(refused.activity)
            const message = `${member === undefined ? '' : `${name(member)}: `}${refusalText(refused, view, text, tag)}`
            args.allowed = false
            args.message = message
            refusal.track(id, message)
            return
          }
          refusal.track(id, null)
          return
        }
        const refused = placementRefusal(
          activity,
          { start: args.start.getTime(), end: args.end.getTime() },
          view.net,
        )
        if (refused !== null) {
          const message = refusalText(refused, view, text, tag)
          args.allowed = false
          args.message = message
          refusal.track(id, message)
          return
        }
        refusal.track(id, null)
      },

      // Final check before the commit; keyboard moves (Alt+arrows) arrive here without a drag and
      // are kept on working days in the direction they travel.
      onEventMove: (args) => {
        const id = String(args.e.id())
        const activity = byId.get(id)
        if (activity === undefined) return
        if (args.multimove.length > 1) {
          const group = groupSpans(activity, args.newStart.getTime(), args.multimove)
          const refused = groupRefusal(group.members, group.spans, view.net)
          if (refused === null) return
          args.preventDefault()
          refusal.clear()
          onRefused(id, refusalText(refused, view, text, tag))
          return
        }
        const before = parseCivil(activity.start)
        let start = args.newStart.getTime()
        if (!isWorkingDay(dayOf(start)))
          start = start >= before ? nextWorkingStart(start) : previousWorkingStart(start)
        const end = addWorkingDays(start, duration(activity))
        if (start !== args.newStart.getTime() || end !== args.newEnd.getTime()) {
          args.newStart = new SuperScheduler.Date(start)
          args.newEnd = new SuperScheduler.Date(end)
        }
        const refused = placementRefusal(activity, { start, end }, view.net)
        if (refused === null) return
        args.preventDefault()
        refusal.clear()
        onRefused(id, refusalText(refused, view, text, tag))
      },

      onEventMoved: (args) => {
        refusal.clear()
        const ids =
          args.multimove.length > 0
            ? args.multimove.map((item) => String(item.event.id()))
            : [String(args.e.id())]
        onMoved(ids)
      },

      // A click (or Enter) selects the activity and docks its sheet; the hover card steps aside.
      onEventClick: (args) => {
        closeHover()
        if (args.ctrl || args.meta) return
        onOpen(String(args.e.id()))
      },

      onZoom: (args) => {
        if (args.phase === 'end') onScale(args.cellWidth)
      },
    }
  }, [
    view,
    columns,
    narrow,
    text,
    tag,
    schedulerLocale,
    history,
    controlRef,
    separators,
    linkBubble,
    refusal,
    name,
    closeHover,
    onEventsChange,
    onMoved,
    onOpen,
    onRefused,
    onScale,
  ])

  // Imperative and once: a scroll prop would be re-applied on every update. The board opens on
  // the week of the slip, scrolled down to Level 4.
  useEffect(() => {
    const control = controlRef.current
    control?.scrollTo(INITIAL_VIEW_START, false, 'left')
    control?.setScrollY(openingScroll())
  }, [controlRef])

  // The zoom slider lives in the product bar, styled as the drawing's scale bar.
  useEffect(() => {
    const control = controlRef.current
    const host = zoomHost.current
    if (control === null || host === null) return
    const slider = createZoomSlider(control, host, {
      min: BOARD.zoom.min,
      max: BOARD.zoom.max,
      scale: 'log',
      detents: BOARD.zoom.detents,
      label: text.chrome.scale,
    })
    return () => slider.dispose()
  }, [controlRef, zoomHost, text])

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