Run of show

A React block (a whole screen) in Beamline's Manufacturing app.

One service or event plan's order, run more than once: sections and items with each occurrence's start time in its own column, each item's length dragged on its bar (value-grip; arrows and the minutes field its twins) so every later start moves, items before or after the service drawn hollow outside it and never added to its length, an item shared by every occurrence or kept to one. The selected item opens beside the order: length, when, which services, leaders, notes and its linked song's key; unlinking leaves the song in the library. Saving, saved and a conflict with someone else's change are said apart.

Use it for

An order run more than once with its timings: a church's Sunday services, a conference session repeated, a theatre's matinee and evening cue sheet.
Anywhere items before and after the main event must stay out of its length, and one item can belong to one run only.

Not for

Tasks on dates (gantt-chart).
A fixed whole split between parts (allocation-editor).
People scheduled across plans (volunteer-rota).

Anatomy

header: the product's mark, the plan and the title
toolbar: each occurrence's length (during items only), the save action with the changes counted; a failed save or a conflict said beside it, Reload after a conflict
order (table): one start-time column per occurrence ("not in this service" where an item is kept to another), the item (a song's mark, before/after the service and one-service-only said under it), its length drawn to scale with its grip and the figure
sections as row headings
inspector (side, or under on a phone): the item's title, length in minutes, When (before, during, after), In which services, a linked song with its key and Unlink, leaders, notes

States

item selected
shared cue
occurrence-specific cue
before service, during service, after service (hollow bars, outside the length)
linked song, unlinked item (the library record kept, said)
saving
saved
save failed (kept, Try again)
save conflict (kept, Reload)
look only (canEdit false)
loading
phone: the order, then the inspector under it
right to left: columns and bars mirror
reduced motion: the grip's glide off

Keyboard

Tab through each item's title (selects it) and its length grip, then the inspector's fields
On a grip: Left/Right 15 seconds, Shift a minute, Home/End the scale's ends; Escape puts the length back while held

Motion

While a grip is held the bar follows the hand in the same frame and the scale holds still; every later start time changes as it moves. Nothing runs at rest.

Props

Prop	Type	Default	Description
`occurrences` (required)	`ShowOccurrence[]`	—
`items`	`ShowItem[]`	—
`defaultItems`	`ShowItem[]`	—
`onItemsChange`	`((items: ShowItem[]) => void)`	—
`people`	`{ id: string; name: string; }[]`	—	People who can lead an item.
`onSave`	`((items: ShowItem[]) => Promise<unknown>)`	—	Save the order. Reject with an Error named "ConflictError" when the plan changed elsewhere (kept, said, Reload); any other rejection keeps the changes with Try again.
`onReload`	`(() => void)`	—	Load the plan as saved elsewhere (after a conflict).
`plan` (required)	`string`	—	The plan's name in the header ("Sunday 8 November").
`timeZone`	`string`	—
`canEdit`	`boolean`	—	false: look only, the permission said.
`loading`	`boolean`	—
`product`	`string`	—	Your product's name, shown as its mark.
`className`	`string`	—	Classes on the documented visual root; no override by default.
`ref`	`Ref<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.

Built from

Dependencies

lucide-react

Import

import { RunOfShow } from "@beamline/run-of-show";

Get it

Run of show is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent

Run of showComplete system · $49

One service or event plan's order, run more than once.

Sunday's order

Two services from one order. The countdown runs before each service and the coffee after it, so neither counts in the service's length; Kids sent out is in the 9:00 only, so the 11:00 is two minutes shorter. Drag an item's bar (or ←/→ on its grip, or type the minutes) and every later start moves.

0 × 0full

A save that meets someone else's change

Change a length and save: the plan was changed elsewhere meanwhile, so your changes stay on screen and Reload brings in the saved plan.

0 × 0full

A song's arrangements

Harbour of Grace is played full band in D this Sunday. Every-key files (lyrics, band notes) sit apart from each key's chart; there is no chart in E yet. Choose the acoustic arrangement in C and use it here: only this service changes, and the full band's charts don't come with it.

0 × 0full

Look only

0 × 0full

About Run of show

← Grazing plan Sound library →

Part of Beamline UI: polished, editable React components and complete screens for custom applications. Build your own style from any look; tokens, fonts, radii, motion; not only colours.

Run of show

Use it for

Not for

Anatomy

States

Keyboard

Motion

Props

Built from

Dependencies

Import

Get it

More in Manufacturing