Row

On Shell, Home, List, Record, Stepped flow, Settings, Find, Calendar, Help

Two facts and the supporting line stay on desktop.

INV-001Hire of Main Hall.Awaiting payment

Hirer: Priya Shah

Amount: £25.00

Invoice	Status	Hirer	Amount
INV-001Hire of Main Hall.	Awaiting payment	Priya Shah	£25.00

A closed question: Ava's answer is recorded and Ben has none.

Ava Patel

PresentChosenAbsentNot chosenAttendance is closed.

Ben Lewis

PresentNot chosenAbsentNot chosenAttendance is closed.

Collection is closed. Clara has a recorded answer; Daniel has none.

Clara Webb

Collection

CollectedCollection is closed.

Daniel Reed

Collection

No answer recordedCollection is closed.

A room whose name opens its details.

Seats 40

Select Oakmere Primary School

Oakmere Primary SchoolAwaiting payment

Invoice

£84.00

4.5 from 38 reviews

Select Oakmere Primary School invoice

Oakmere WI

Main Hall hire

Invoice details

Before you arrive

Ask @Aisha Khan to confirm the address for B-1042 Garden room before 14 March 2025.
Read the hire terms first, then use 4721 at the gate.

Bring your own chairs.
Leave the hall by ten.

Ring the bell by the side gate.
Wait for the caretaker.

Done
Deposit paid
Not done
Key returned

The side door sticks in the cold.

Gate: 4721
Alarm: 0990

Floor plan: garden-room-plan.pdf

Oakmere WI1 invoice awaiting correction: the March hire was billed at the weekday rate and the committee has asked for it to be reissued at the weekend rate for the Saturday sessionsDue 30 April 2025

Invoiced: £84.00 · Collected: £24.00 · Outstanding: £60.00 · payment expected after the hirer confirms the billing address, purchase order and named contact for Saturday’s Main Hall bookingPart payment taken by card on 12 April 2025; the balance stays outstanding until the reissued invoice is agreed, and the deposit is held against the Garden Room key that has not come back

Oakmere WI

Your invoice is readyAddress refused

Sent to aisha@oakmereprimary.org · 3 February 2025

Select Willowbrook Community Centre, Long Meadow Lane annexe

Willowbrook Community Centre, Long Meadow Lane annexe

Invited Mon · not yet accepted

Oakmere Primary School

Invited Tue · not yet accepted

St Anne’s Scout Group

Invited Wed · not yet accepted

Details

Sent to: Priya Shah

Email: priya@stannesscouts.org

Select St Anne’s Scout Group

St Anne’s Scout Group

Wednesday · Main Hall

PresentChosenApologiesNot chosenAbsentNot chosen

Select St Anne’s Scout Group

St Anne’s Scout Group

Wednesday · Main Hall

Time

10:00

Select Brookfield Choir

Brookfield Choir

Thursday · Garden Room

Time

19:30

Sunday 26 October

Ballroom beginners · 1:30 am

Which 1:30 amThe earlier oneNot chosenThe later oneNot chosenThe clocks go back at 2 am, so 1:30 am happens twice.Choose which 1:30 am the class starts.

Oakmere WI

Tuesday · Main Hall

Post the invoice tooNot chosenIt goes to the hall’s address.

Garden room

Third in the room list

Select Hartley Scouts

Hartley ScoutsAwaiting payment

Invoice

£126.00

Invoice resent to treasurer@hartleyscouts.org.uk.

A Row of several separate facts that wrap as whole facts.

Garden Room hire

Hirer: Priya Shah

Day: Saturday

Seats: 40

Deposit: £50.00

Balance: £34.00

Key: with the caretaker

Cleaning: booked

A supporting line of long words that ends in a time.

Oakmere Primary SchoolAccepted the revised Garden Room terms and asked for the key arrangements, the deposit and the cleaning rota to be confirmed in writing by 16 October 2026

InvoiceThe deposit, the cleaning charge and the return of the key are held against the Saturday booking until 30 October 2026

A run at the Desk width: one Row folds its actions into More, and one without More wraps them.

Invitations

St Anne’s Scout GroupAwaiting payment

Invited Mon · not yet accepted

Oakmere Primary SchoolAwaiting payment

Invited Tue · not yet accepted

Payment reminder sent to the school office.

A run whose Rows each hold an inert action and its words.

Meetings

Tuesday 22 April

Main Hall · 19:00

This booking is closed. Reopen it to move a meeting.

Tuesday 29 April

Main Hall · 19:00

This booking is closed. Reopen it to move a meeting.

A Row at the Desk width whose actions wrap where no fold remains.

Invitation

Hartley and District Scouts, Tuesday ExplorersAwaiting payment

Invited Wed · not yet accepted

A run at the Desk width whose Stamps wrap at their words where nothing else fits.

Bookings

Riverside Community ChoirHeld until the deposit and the first month’s hire are paid in full

Main Hall · Thursdays

Oakmere WIAwaiting payment

Garden Room · Saturdays

A question at the Desk width whose actions wrap where no fold remains.

Register

Hartley Scouts

Wednesday · Main Hall

Time

18:30

A question whose label wraps.

Thursday bookings

Brookfield Choir

Thursday · Garden Room

Time the choir needs the room from, with half an hour to set out the chairs

19:00

A question whose act sends an email, its preview before the actions.

Aisha Khan

Teacher · Tuesday beginners

The invitation lasts 7 days.

Emailaisha@oakmereprimary.org

The invitation, as Aisha will get it

Channel: Email to aisha@oakmereprimary.org

Subject: Teach at Oakmere Village Hall

Goes when you send it.

A question answered in a Dialog, with its whole Scope line.

Which location is this?To answer

Your answer sets the location for Monday’s choir rehearsal, Tuesday’s committee meeting and Thursday’s reading group.

An email as the subject.

accounts.receivable.northeast-region.billing@hartfordcommunitydancestudio.com

Sends the invoices

A web address as the subject.

venues.example.com/oakmere-primary-school-parents-association

Booking page

A person as the subject, with their availability.

Aisha Khan Away

Books the choir rehearsals

An unread notification.

Select Oakmere Primary School paid its invoice

Oakmere Primary School paid its invoice

Paid by Aisha Khan

Oakmere Primary School

Show a row arriving

Main Hall

Tuesday

Committee room

Wednesday

Kitchen

Thursday

Source

let note: KitReact.AuthoredText.shown = {
  value: [
    Heading([Text("Before you arrive", [])]),
    Paragraph([
      Text("Ask ", []),
      Mention({kind: Person, id: "aisha-khan", label: "Aisha Khan"}),
      Text(" to confirm ", []),
      Text("the address", [Bold]),
      Text(" for ", []),
      Mention({kind: Subject, id: "b-1042", label: "B-1042 Garden room"}),
      Text(" before ", []),
      Date({year: 2025, month: 3, day: 14}),
      Text(".", []),
      HardBreak,
      Text("Read the ", []),
      Text("hire terms", [Link("https://example.com/hire-terms")]),
      Text(" first, ", []),
      Text("then", [Italic]),
      Text(" use ", []),
      Text("4721", [Code]),
      Text(" at the gate.", []),
    ]),
    BulletList([[[Text("Bring your own chairs.", [])]], [[Text("Leave the hall by ten.", [])]]]),
    OrderedList([[[Text("Ring the bell by the side gate.", [])]], [[Text("Wait for the caretaker.", [])]]]),
    TaskList([{checked: true, content: [[Text("Deposit paid", [])]]}, {checked: false, content: [[Text("Key returned", [])]]}]),
    Blockquote([[Text("The side door sticks in the cold.", [])]]),
    CodeBlock("Gate: 4721\nAlarm: 0990"),
    Paragraph([Text("Floor plan: ", []), File({id: "floor-plan", name: "garden-room-plan.pdf"})]),
  ],
  reader: Specimen_Reader.reader,
  mentionLink: (kind, _) =>
    switch kind {
    | Person => Some("#role-row")
    | Subject => None
    },
  fileLink: _ => Some("#role-row"),
}


@react.component
let make = () => {
  let (selected, setSelected) = React.useState(() => false)
  let (arrivals, setArrivals) = React.useState(() => 1)
  let (roomOpen, setRoomOpen) = React.useState(() => false)
  let (locationOpen, setLocationOpen) = React.useState(() => false)
  <>
<p className="specimen-case-line">{React.string("Two facts and the supporting line stay on desktop.")}</p>
  <div id="row-desktop-only">
    <KitReact.Roles.Row props={{id: "desktop-facts-row"}} subject={React.string("INV-001")} subjectHref="#role-row"
      subjectSupporting=[{pieces: [Text("Hire of Main Hall.")], desktopOnly: true}]
      stamp={<KitReact.Roles.Stamp state=KitReact.Roles.Stamp.Neutral> {React.string("Awaiting payment")} </KitReact.Roles.Stamp>}
      facts=[
        {key: "hirer", content: Words([KitReact.Words.Text("Hirer: Priya Shah")]), desktopOnly: true},
        {key: "amount", content: Words([KitReact.Words.Text("Amount: "), KitReact.Words.Amount(KitReact.Amount.money(Specimen_Reader.reader, ~currency="GBP", ~amount="25.00"))]), desktopOnly: true},
      ]
    />
    <div className="specimen-table-contained"><KitReact.Table.RowsTable
      subjectHeading="Invoice"
      columnHeadings=[{label: "Status"}, {label: "Hirer"}, {label: "Amount", kind: Amount}]
      rows=[{
        subject: <a href="#role-row">{React.string("INV-001")}</a>,
        subjectSupporting: [{pieces: [Text("Hire of Main Hall.")], desktopOnly: true}],
        facts: [
          {content: Content(<KitReact.Roles.Stamp state=KitReact.Roles.Stamp.Neutral> {React.string("Awaiting payment")} </KitReact.Roles.Stamp>), props: {}},
          {content: Words([Text("Priya Shah")]), props: {}, desktopOnly: true},
          {content: Words([Amount(KitReact.Amount.money(Specimen_Reader.reader, ~currency="GBP", ~amount="25.00"))]), props: {}, desktopOnly: true},
        ],
        expansion: None,
        props: {id: "desktop-facts-record"},
        subjectProps: {},
      }]
    /></div>
  </div>
  <p className="specimen-case-line">{React.string("A closed question: Ava's answer is recorded and Ben has none.")}</p>
  <div id="row-closed-choices">
    <KitReact.Roles.Row subject={React.string("Ava Patel")} subjectHref="#role-row" subjectProps={{id: "row-closed-ava"}}
      question={question: Choices({id: "row-closed-ava-choices", props: {}, reason: React.string("Attendance is closed."), items: [
        {label: React.string("Present"), kind: Radio, checked: true, controlProps: {value: "present", disabled: true}, printedValue: [Text("Chosen")]},
        {label: React.string("Absent"), kind: Radio, controlProps: {value: "absent", disabled: true}, printedValue: [Text("Not chosen")]},
      ]})}
    />
    <KitReact.Roles.Row subject={React.string("Ben Lewis")} subjectHref="#role-row" subjectProps={{id: "row-closed-ben"}}
      question={question: Choices({id: "row-closed-ben-choices", props: {}, reason: React.string("Attendance is closed."), items: [
        {label: React.string("Present"), kind: Radio, controlProps: {value: "present", disabled: true}, printedValue: [Text("Not chosen")]},
        {label: React.string("Absent"), kind: Radio, controlProps: {value: "absent", disabled: true}, printedValue: [Text("Not chosen")]},
      ]})}
    />
  </div>
  <p className="specimen-case-line">{React.string("Collection is closed. Clara has a recorded answer; Daniel has none.")}</p>
  <div id="row-closed-fields">
    <KitReact.Roles.Row subject={React.string("Clara Webb")} subjectHref="#role-row"
      question={question: FormGroup({id: "row-closed-clara", kind: Select, label: React.string("Collection"), controlValue: "collected", controlProps: {name: "collection-clara", disabled: true},
        options: [{label: React.string("Not recorded"), value: ""}, {label: React.string("Collected"), value: "collected"}, {label: React.string("Not collected"), value: "not-collected"}],
        printedValue: React.string("Collected"), reason: React.string("Collection is closed."),
      })}
    />
    <KitReact.Roles.Row subject={React.string("Daniel Reed")} subjectHref="#role-row"
      question={question: FormGroup({id: "row-closed-daniel", kind: Select, label: React.string("Collection"), controlValue: "", controlProps: {name: "collection-daniel", disabled: true},
        options: [{label: React.string("Not recorded"), value: ""}, {label: React.string("Collected"), value: "collected"}, {label: React.string("Not collected"), value: "not-collected"}],
        printedValue: React.string("No answer recorded"), reason: React.string("Collection is closed."),
      })}
    />
  </div>
  <p className="specimen-case-line">{React.string("A room whose name opens its details.")}</p>
  <KitReact.Roles.Row
    subject={React.string("Garden Room")}
    subjectDialog="row-room-dialog"
    subjectProps={{id: "row-room-opener"}}
    facts=[{key: "seats", content: Words([KitReact.Words.Text("Seats "), KitReact.Words.Amount(KitReact.Amount.count(Specimen_Reader.reader, 40))]), props: {}}]
  />
  <KitReact.Roles.Dialog
    id="row-room-dialog"
    open_=roomOpen
    returnFocus="row-room-opener"
    onOpen={() => setRoomOpen(_ => true)}
    onClose={() => setRoomOpen(_ => false)}
    props={{ariaLabelledby: "row-room-dialog-title"}}
    heading={React.string("Garden Room")}
    headingProps={{id: "row-room-dialog-title"}}
    formGroups={<form id="row-room-form">
      <KitReact.Roles.FormGroup id="row-room-name-group"
        label={React.string("Room name")}
        labelProps={{htmlFor: "row-room-name"}}
        controlProps={{id: "row-room-name", name: "name", type_: "text"}}
        controlValue="Garden Room" printedValue={React.string("Garden Room")}
        kind=Text(Medium)
      />
    </form>}
    lead=PrimaryAction({children: React.string("Save room"), props: {type_: "submit", form: "row-room-form"}})
    secondaryAction={{children: React.string("Cancel")}}
  />
  <KitReact.Roles.Row
    selection={<>
      <KitReact.Roles.SelectionControl checked=selected
        props={{name: "record", value: "oak", onChange: _ => setSelected(previous => !previous)}} />
      <span>{React.string("Select Oakmere Primary School")}</span>
    </>}
    subject={React.string("Oakmere Primary School")}
    subjectHref={"#role-row"}
    stamp={<KitReact.Roles.Stamp state=KitReact.Roles.Stamp.Neutral>{React.string("Awaiting payment")}</KitReact.Roles.Stamp>}
    facts=[{key: "kind", content: Words([KitReact.Words.Text("Invoice")]), props: {}}, {key: "amount", content: Words([KitReact.Words.Amount(KitReact.Amount.money(Specimen_Reader.reader, ~currency="GBP", ~amount="84.00"))]), props: {}}, {key: "rating", content: Rating({
      score: KitReact.Amount.score(Specimen_Reader.reader, ~amount="4.5", ~decimals=1),
      words: [
        KitReact.Words.Amount(KitReact.Amount.score(Specimen_Reader.reader, ~amount="4.5", ~decimals=1)),
        KitReact.Words.Text(" from "),
        KitReact.Words.Amount(KitReact.Amount.count(Specimen_Reader.reader, 38)),
        KitReact.Words.Text(" reviews"),
      ],
      spoken: [
        KitReact.Words.Amount(KitReact.Amount.score(Specimen_Reader.reader, ~amount="4.5", ~decimals=1)),
        KitReact.Words.Text(" out of "),
        KitReact.Words.Amount(KitReact.Amount.count(Specimen_Reader.reader, 5)),
        KitReact.Words.Text(", from "),
        KitReact.Words.Amount(KitReact.Amount.count(Specimen_Reader.reader, 38)),
        KitReact.Words.Text(" reviews"),
      ],
    }), props: {}}]
    actions=[KitReact.Roles.Row.SecondaryAction({children: React.string("Withdraw")})]
  />
  <KitReact.Roles.Row
    selection={<><KitReact.Roles.SelectionControl props={{name: "record", value: "north"}} /><span>{React.string("Select Oakmere Primary School invoice")}</span></>}
    subject={React.string("Oakmere WI")} subjectHref={"#role-row"}
    facts=[{key: "hire", content: Words([KitReact.Words.Text("Main Hall hire")]), props: {}}]
    expansion={{
      summary: React.string("Invoice details"),
      content: AuthoredText(note),
      expanded: false,
    }}
  />
  <KitReact.Roles.Row
    subjectElement=Span
    subject={<a href="#role-row">{React.string("Oakmere WI")}</a>}
    subjectSupporting=[
      {pieces: [KitReact.Words.Text("1 invoice awaiting correction: the March hire was billed at the weekday rate and the committee has asked for it to be reissued at the weekend rate for the Saturday sessions")]},
      {pieces: [
        KitReact.Words.Text("Due "),
        KitReact.Words.Time(KitReact.Time.day(Specimen_Reader.reader, {year: 2025, month: 4, day: 30})),
      ]},
    ]
    facts=[
      {
        key: "totals",
        content: Words([
          KitReact.Words.Text("Invoiced: "),
          KitReact.Words.Amount(KitReact.Amount.money(Specimen_Reader.reader, ~amount="84.00", ~currency="GBP")),
          KitReact.Words.Text(" · Collected: "),
          KitReact.Words.Amount(KitReact.Amount.money(Specimen_Reader.reader, ~amount="24.00", ~currency="GBP")),
          KitReact.Words.Text(" · Outstanding: "),
          KitReact.Words.Amount(KitReact.Amount.money(Specimen_Reader.reader, ~amount="60.00", ~currency="GBP")),
          KitReact.Words.Text(" · payment expected after the hirer confirms the billing address, purchase order and named contact for Saturday’s Main Hall booking"),
        ]),
        props: {},
        supporting: [
          {
            pieces: [
              KitReact.Words.Text("Part payment taken by card on "),
              KitReact.Words.Time(KitReact.Time.day(Specimen_Reader.reader, {year: 2025, month: 4, day: 12})),
              KitReact.Words.Text("; the balance stays outstanding until the reissued invoice is agreed, and the deposit is held against the Garden Room key that has not come back"),
            ],
          },
        ],
      },
    ]
  />
  <KitReact.Roles.Row
    subjectElement=Span subject={React.string("Oakmere WI")}
  />
  <KitReact.Roles.Row
    subjectElement=Span subject={React.string("Your invoice is ready")}
    stamp={<KitReact.Roles.Stamp state=KitReact.Roles.Stamp.Alert>{React.string("Address refused")}</KitReact.Roles.Stamp>}
    facts=[{key: "sent", content: Words([KitReact.Words.Text("Sent to aisha@oakmereprimary.org · "), KitReact.Words.Time(KitReact.Time.day(Specimen_Reader.reader, {year: 2025, month: 2, day: 3}))]), props: {}}]
  />
  <KitReact.Roles.Row
    selection={<><KitReact.Roles.SelectionControl props={{name: "record", value: "willowbrook"}} /><span>{React.string("Select Willowbrook Community Centre, Long Meadow Lane annexe")}</span></>}
    subject={React.string("Willowbrook Community Centre, Long Meadow Lane annexe")} subjectHref={"#role-row"}
    facts=[{key: "invitation", content: Words([KitReact.Words.Text("Invited Mon · not yet accepted")]), props: {}}]
    actions=[KitReact.Roles.Row.SecondaryAction({children: React.string("Resend")}), KitReact.Roles.Row.SecondaryAction({children: React.string("Withdraw")})]
  />
  <KitReact.Roles.Row
    subject={React.string("Oakmere Primary School")} subjectHref={"#role-row"}
    facts=[{key: "invitation", content: Words([KitReact.Words.Text("Invited Tue · not yet accepted")]), props: {}}]
    actions=[KitReact.Roles.Row.SecondaryAction({children: React.string("Resend")}), KitReact.Roles.Row.SecondaryAction({children: React.string("Copy invitation link")}), KitReact.Roles.Row.SecondaryAction({children: React.string("Withdraw")}), KitReact.Roles.Row.ActionMenu(KitReact.Roles.ActionMenu.role({id: "role-row-fold", label: "More actions for this invitation", groups: []}))]
  />
  <KitReact.Roles.Row
    subject={React.string("St Anne’s Scout Group")} subjectHref={"#role-row"}
    facts=[{key: "invitation", content: Words([KitReact.Words.Text("Invited Wed · not yet accepted")]), props: {}}]
    actions=[KitReact.Roles.Row.SecondaryAction({children: React.string("Withdraw")})]
    expansion={{
      summary: React.string("Details"),
      content: FactGroup({children: <>
        <KitReact.Roles.LabelledFact name={React.string("Sent to")} value={Words([KitReact.Words.Text("Priya Shah")])} />
        <KitReact.Roles.LabelledFact name={React.string("Email")} value={Words([KitReact.Words.Email("priya@stannesscouts.org")])} />
      </>}),
      expanded: true,
    }}
  />
  <KitReact.Roles.Row
    selection={<><KitReact.Roles.SelectionControl props={{name: "record", value: "stannes-register"}} /><span>{React.string("Select St Anne’s Scout Group")}</span></>}
    subject={React.string("St Anne’s Scout Group")}
    subjectHref={"#role-row"} subjectProps={{id: "row-choices-stannes"}}
    facts=[{key: "when", content: Words([KitReact.Words.Text("Wednesday · Main Hall")]), props: {}}]
    question={question:Choices({
      id: "react-row-choices-stannes",
      items: [
        {
          label: React.string("Present"),
          kind: KitReact.Roles.SelectionControl.Group.Radio,
          checked: true,
          printedValue: [KitReact.Words.Text("Chosen")],
          props: {},
          controlProps: {value: "present"},
          outputProps: {},
          reasonProps: {},
        },
        {
          label: React.string("Apologies"),
          kind: KitReact.Roles.SelectionControl.Group.Radio,
          checked: false,
          printedValue: [KitReact.Words.Text("Not chosen")],
          props: {},
          controlProps: {value: "apologies"},
          outputProps: {},
          reasonProps: {},
        },
        {
          label: React.string("Absent"),
          kind: KitReact.Roles.SelectionControl.Group.Radio,
          checked: false,
          printedValue: [KitReact.Words.Text("Not chosen")],
          props: {},
          controlProps: {value: "absent"},
          outputProps: {},
          reasonProps: {},
        },
      ],
      props: {},
    })}
    actions=[KitReact.Roles.Row.SecondaryAction({children: React.string("Open the register")})]
  />
  <KitReact.Roles.Row
    selection={<><KitReact.Roles.SelectionControl props={{name: "record", value: "stannes-time"}} /><span>{React.string("Select St Anne’s Scout Group")}</span></>}
    subject={React.string("St Anne’s Scout Group")}
    subjectHref={"#role-row"} subjectProps={{id: "row-question-stannes"}}
    facts=[{key: "when", content: Words([KitReact.Words.Text("Wednesday · Main Hall")]), props: {}}]
    question={question:FormGroup({id: "row-question-time", printedValue: <time dateTime="10:00"> {React.string("10:00")} </time>, label: React.string("Time"), kind: KitReact.Roles.TimeField.control({name: "time", reader: Specimen_Reader.reader, value: Clock(KitReact.Time.clock(Specimen_Reader.reader, {hour: 10, minute: 0})), onCommit: _ => ()})})}
    actions=[KitReact.Roles.Row.SecondaryAction({children: React.string("Open the register")})]
  />
  <KitReact.Roles.Row
    selection={<><KitReact.Roles.SelectionControl props={{name: "record", value: "brookfield-time"}} /><span>{React.string("Select Brookfield Choir")}</span></>}
    subject={React.string("Brookfield Choir")}
    subjectHref={"#role-row"} subjectProps={{id: "row-question-brookfield"}}
    facts=[{key: "when", content: Words([KitReact.Words.Text("Thursday · Garden Room")]), props: {}}]
    question={question:WrappedFormGroup({props: {}, formGroup: {id: "row-question-brookfield-time", printedValue: <time dateTime="19:30"> {React.string("19:30")} </time>, label: React.string("Time"), kind: KitReact.Roles.TimeField.control({name: "time", reader: Specimen_Reader.reader, value: Clock(KitReact.Time.clock(Specimen_Reader.reader, {hour: 19, minute: 30})), onCommit: _ => ()})}})}
    actions=[KitReact.Roles.Row.SecondaryAction({children: React.string("Open the register")})]
  />
  <KitReact.Roles.Row
    subject={React.string("Sunday 26 October")} subjectHref={"#role-row"}
    facts=[{key: "class", content: Words([KitReact.Words.Text("Ballroom beginners · 1:30 am")]), props: {}}]
    question={question:SelectionControlGroup({
      id: "row-question-which-time",
      legend: React.string("Which 1:30 am"),
      choices: [
        {label: React.string("The earlier one"), kind: KitReact.Roles.SelectionControl.Group.Radio, checked: false, printedValue: [KitReact.Words.Text("Not chosen")], props: {}, controlProps: {name: "which-time", value: "earlier"}, outputProps: {}, reasonProps: {}},
        {label: React.string("The later one"), kind: KitReact.Roles.SelectionControl.Group.Radio, checked: false, printedValue: [KitReact.Words.Text("Not chosen")], props: {}, controlProps: {name: "which-time", value: "later"}, outputProps: {}, reasonProps: {}},
      ],
      help: React.string("The clocks go back at 2 am, so 1:30 am happens twice."),
      error: React.string("Choose which 1:30 am the class starts."),
    })}
    actions=[KitReact.Roles.Row.SecondaryAction({children: React.string("Open the class")})]
  />
  <KitReact.Roles.Row
    subject={React.string("Oakmere WI")} subjectHref={"#role-row"}
    facts=[{key: "when", content: Words([KitReact.Words.Text("Tuesday · Main Hall")]), props: {}}]
    question={question:SelectionControlGroup({
      id: "row-question-post-invoice",
      choices: [
        {label: React.string("Post the invoice too"), kind: KitReact.Roles.SelectionControl.Group.Checkbox, checked: false, printedValue: [KitReact.Words.Text("Not chosen")], props: {}, controlProps: {name: "post-invoice"}, outputProps: {}, reasonProps: {}},
      ],
      help: React.string("It goes to the hall’s address."),
    })}
    actions=[KitReact.Roles.Row.SecondaryAction({children: React.string("Send")})]
  />
  <KitReact.Roles.Row
    subject={React.string("Garden room")} subjectHref={"#role-row"}
    facts=[{key: "place", content: Words([KitReact.Words.Text("Third in the room list")]), props: {}}]
    actions=[KitReact.Roles.Row.SecondaryAction({children: React.string("Move")})]
  />
  <KitReact.Roles.Row
    selection={<>
      <KitReact.Roles.SelectionControl props={{name: "record", value: "hartley"}} />
      <span>{React.string("Select Hartley Scouts")}</span>
    </>}
    subject={React.string("Hartley Scouts")}
    subjectHref={"#role-row"}
    stamp={<KitReact.Roles.Stamp state=KitReact.Roles.Stamp.Neutral>{React.string("Awaiting payment")}</KitReact.Roles.Stamp>}
    facts=[{key: "kind", content: Words([KitReact.Words.Text("Invoice")]), props: {}}, {key: "amount", content: Words([KitReact.Words.Amount(KitReact.Amount.money(Specimen_Reader.reader, ~currency="GBP", ~amount="126.00"))]), props: {}}]
    actions=[KitReact.Roles.Row.SecondaryAction({children: React.string("Resend")})]
    statusLines={[{children: React.string("Invoice resent to treasurer@hartleyscouts.org.uk.")}]}
  />
  <p className="specimen-case-line">{React.string("A Row of several separate facts that wrap as whole facts.")}</p>
  <KitReact.Roles.Row
    subject={React.string("Garden Room hire")} subjectHref={"#role-row"}
    facts=[
      {key: "hirer", content: Words([KitReact.Words.Text("Hirer: Priya Shah")]), props: {}},
      {key: "day", content: Words([KitReact.Words.Text("Day: Saturday")]), props: {}},
      {key: "seats", content: Words([KitReact.Words.Text("Seats: "), KitReact.Words.Amount(KitReact.Amount.count(Specimen_Reader.reader, 40))]), props: {}},
      {key: "deposit", content: Words([KitReact.Words.Text("Deposit: "), KitReact.Words.Amount(KitReact.Amount.money(Specimen_Reader.reader, ~currency="GBP", ~amount="50.00"))]), props: {}},
      {key: "balance", content: Words([KitReact.Words.Text("Balance: "), KitReact.Words.Amount(KitReact.Amount.money(Specimen_Reader.reader, ~currency="GBP", ~amount="34.00"))]), props: {}},
      {key: "key", content: Words([KitReact.Words.Text("Key: with the caretaker")]), props: {}},
      {key: "cleaning", content: Words([KitReact.Words.Text("Cleaning: booked")]), props: {}},
    ]
  />
  <p className="specimen-case-line">{React.string("A supporting line of long words that ends in a time.")}</p>
  <KitReact.Roles.Row
    subject={React.string("Oakmere Primary School")} subjectHref={"#role-row"}
    subjectSupporting=[{pieces: [KitReact.Words.Text("Accepted the revised Garden Room terms and asked for the key arrangements, the deposit and the cleaning rota to be confirmed in writing by "), KitReact.Words.Time(KitReact.Time.day(Specimen_Reader.reader, {year: 2026, month: 10, day: 16}))]}]
    facts=[{key: "invoice", content: Words([KitReact.Words.Text("Invoice")]), props: {}, supporting: [{pieces: [KitReact.Words.Text("The deposit, the cleaning charge and the return of the key are held against the Saturday booking until "), KitReact.Words.Time(KitReact.Time.day(Specimen_Reader.reader, {year: 2026, month: 10, day: 30}))]}]}]
  />
  <p className="specimen-case-line">{React.string("A run at the Desk width: one Row folds its actions into More, and one without More wraps them.")}</p>
  <KitReact.Roles.HeadedRegion
    props={{style: {inlineSize: "min(100%, calc(var(--kit-desk-width) + 2 * var(--kit-inset-tight)))"}}}
    heading={[KitReact.Words.Text("Invitations")]}
    content={<>
      <KitReact.Roles.Row
        subject={React.string("St Anne’s Scout Group")} subjectHref={"#role-row"}
        stamp={<KitReact.Roles.Stamp state=KitReact.Roles.Stamp.Neutral>{React.string("Awaiting payment")}</KitReact.Roles.Stamp>}
        facts=[{key: "invitation", content: Words([KitReact.Words.Text("Invited Mon · not yet accepted")]), props: {}}]
        actions=[KitReact.Roles.Row.SecondaryAction({children: React.string("Send reminder")}), KitReact.Roles.Row.SecondaryAction({children: React.string("Copy invitation link")}), KitReact.Roles.Row.SecondaryAction({children: React.string("Withdraw")}), KitReact.Roles.Row.ActionMenu(KitReact.Roles.ActionMenu.role({id: "role-row-width-fold", label: "More actions for this invitation", groups: []}))]
      />
      <KitReact.Roles.Row
        subject={React.string("Oakmere Primary School")} subjectHref={"#role-row"}
        stamp={<KitReact.Roles.Stamp state=KitReact.Roles.Stamp.Neutral>{React.string("Awaiting payment")}</KitReact.Roles.Stamp>}
        facts=[{key: "invitation", content: Words([KitReact.Words.Text("Invited Tue · not yet accepted")]), props: {}}]
        actions=[KitReact.Roles.Row.SecondaryAction({children: React.string("Send a payment reminder")}), KitReact.Roles.Row.SecondaryAction({children: React.string("Copy the invitation link")})]
        statusLines={[{children: React.string("Payment reminder sent to the school office.")}]}
      />
    </>}
  />
  <p className="specimen-case-line">{React.string("A run whose Rows each hold an inert action and its words.")}</p>
  <KitReact.Roles.HeadedRegion
    heading={[KitReact.Words.Text("Meetings")]}
    content={<>
      <KitReact.Roles.Row
        subject={React.string("Tuesday 22 April")} subjectHref={"#role-row"}
        facts=[{key: "meeting", content: Words([KitReact.Words.Text("Main Hall · "), KitReact.Words.Time(KitReact.Time.clock(Specimen_Reader.reader, {hour: 19, minute: 0}))]), props: {}}]
        actions=[KitReact.Roles.Row.SecondaryAction({children: React.string("Move this meeting"), state: KitReact.ActionState.Inert({id: "role-row-inert-move-mid-april", words: [KitReact.Words.Text("This booking is closed. Reopen it to move a meeting.")]})})]
      />
      <KitReact.Roles.Row
        subject={React.string("Tuesday 29 April")} subjectHref={"#role-row"}
        facts=[{key: "meeting", content: Words([KitReact.Words.Text("Main Hall · "), KitReact.Words.Time(KitReact.Time.clock(Specimen_Reader.reader, {hour: 19, minute: 0}))]), props: {}}]
        actions=[KitReact.Roles.Row.SecondaryAction({children: React.string("Move this meeting"), state: KitReact.ActionState.Inert({id: "role-row-inert-move-late-april", words: [KitReact.Words.Text("This booking is closed. Reopen it to move a meeting.")]})})]
      />
    </>}
  />
  <p className="specimen-case-line">{React.string("A Row at the Desk width whose actions wrap where no fold remains.")}</p>
  <KitReact.Roles.HeadedRegion
    props={{style: {inlineSize: "min(100%, calc(var(--kit-desk-width) + 2 * var(--kit-inset-tight)))"}}}
    heading={[KitReact.Words.Text("Invitation")]}
    content={<KitReact.Roles.Row
      subject={React.string("Hartley and District Scouts, Tuesday Explorers")} subjectHref={"#role-row"}
      stamp={<KitReact.Roles.Stamp state=KitReact.Roles.Stamp.Neutral>{React.string("Awaiting payment")}</KitReact.Roles.Stamp>}
      facts=[{key: "invitation", content: Words([KitReact.Words.Text("Invited Wed · not yet accepted")]), props: {}}]
      actions=[KitReact.Roles.Row.SecondaryAction({children: React.string("Send a reminder to the treasurer")}), KitReact.Roles.Row.SecondaryAction({children: React.string("Copy the invitation link")})]
    />}
  />
  <p className="specimen-case-line">{React.string("A run at the Desk width whose Stamps wrap at their words where nothing else fits.")}</p>
  <KitReact.Roles.HeadedRegion
    props={{style: {inlineSize: "min(100%, calc(var(--kit-desk-width) + 2 * var(--kit-inset-tight)))"}}}
    heading={[KitReact.Words.Text("Bookings")]}
    content={<>
      <KitReact.Roles.Row
        subject={React.string("Riverside Community Choir")} subjectHref={"#role-row"}
        stamp={<KitReact.Roles.Stamp state=KitReact.Roles.Stamp.Attention>{React.string("Held until the deposit and the first month’s hire are paid in full")}</KitReact.Roles.Stamp>}
        facts=[{key: "booking", content: Words([KitReact.Words.Text("Main Hall · Thursdays")]), props: {}}]
        actions=[KitReact.Roles.Row.SecondaryAction({children: React.string("Send the treasurer a payment reminder")}), KitReact.Roles.Row.SecondaryAction({children: React.string("Release the hold")})]
      />
      <KitReact.Roles.Row
        subject={React.string("Oakmere WI")} subjectHref={"#role-row"}
        stamp={<KitReact.Roles.Stamp state=KitReact.Roles.Stamp.Neutral>{React.string("Awaiting payment")}</KitReact.Roles.Stamp>}
        facts=[{key: "booking", content: Words([KitReact.Words.Text("Garden Room · Saturdays")]), props: {}}]
        actions=[KitReact.Roles.Row.SecondaryAction({children: React.string("Send the treasurer a payment reminder")}), KitReact.Roles.Row.SecondaryAction({children: React.string("Release the hold")})]
      />
    </>}
  />
  <p className="specimen-case-line">{React.string("A question at the Desk width whose actions wrap where no fold remains.")}</p>
  <KitReact.Roles.HeadedRegion
    props={{style: {inlineSize: "min(100%, calc(var(--kit-desk-width) + 2 * var(--kit-inset-tight)))"}}}
    heading={[KitReact.Words.Text("Register")]}
    content={<KitReact.Roles.Row
      subject={React.string("Hartley Scouts")} subjectHref={"#role-row"}
      facts=[{key: "when", content: Words([KitReact.Words.Text("Wednesday · Main Hall")]), props: {}}]
      question={question:FormGroup({id: "row-question-register-time", printedValue: <time dateTime="18:30"> {React.string("18:30")} </time>, label: React.string("Time"), kind: KitReact.Roles.TimeField.control({name: "time", reader: Specimen_Reader.reader, value: Clock(KitReact.Time.clock(Specimen_Reader.reader, {hour: 18, minute: 30})), onCommit: _ => ()})})}
      actions=[KitReact.Roles.Row.SecondaryAction({children: React.string("Open the register for Wednesday evening")}), KitReact.Roles.Row.SecondaryAction({children: React.string("Send the register to the Explorers’ leader")})]
    />}
  />
  <p className="specimen-case-line">{React.string("A question whose label wraps.")}</p>
  <KitReact.Roles.HeadedRegion
    props={{style: {inlineSize: "min(100%, var(--kit-focused-width))"}}}
    heading={[KitReact.Words.Text("Thursday bookings")]}
    content={<KitReact.Roles.Row
      subject={React.string("Brookfield Choir")} subjectHref={"#role-row"}
      facts=[{key: "when", content: Words([KitReact.Words.Text("Thursday · Garden Room")]), props: {}}]
      question={question:FormGroup({id: "row-question-setup-time", printedValue: <time dateTime="19:00"> {React.string("19:00")} </time>, label: React.string("Time the choir needs the room from, with half an hour to set out the chairs"), kind: KitReact.Roles.TimeField.control({name: "time", reader: Specimen_Reader.reader, value: Clock(KitReact.Time.clock(Specimen_Reader.reader, {hour: 19, minute: 0})), onCommit: _ => ()})})}
      actions=[KitReact.Roles.Row.SecondaryAction({children: React.string("Open the register")})]
    />}
  />
  <p className="specimen-case-line">{React.string("A question whose act sends an email, its preview before the actions.")}</p>
  <KitReact.Roles.Row
    subject={React.string("Aisha Khan")} subjectHref={"#role-row"}
    facts=[{key: "teaches", content: Words([KitReact.Words.Text("Teacher · Tuesday beginners")]), props: {}}]
    scopeLine=[KitReact.Words.Text("The invitation lasts 7 days.")]
    question={
      question: FormGroup({
        id: "row-invite-email-form-group",
        kind: Email,
        label: React.string("Email"),
        labelProps: {htmlFor: "row-invite-email"},
        controlProps: {id: "row-invite-email", name: "email"},
        controlValue: "aisha@oakmereprimary.org",
        printedValue: React.string("aisha@oakmereprimary.org"),
      }),
    }
    outboundPreviews={{
      heading: [KitReact.Words.Text("The invitation, as Aisha will get it")],
      previews: [{
        facts: {children: <>
          <KitReact.Roles.LabelledFact name={React.string("Channel")} value={Words([KitReact.Words.Text("Email to "), KitReact.Words.Email("aisha@oakmereprimary.org")])} />
          <KitReact.Roles.LabelledFact name={React.string("Subject")} value={Words([KitReact.Words.Text("Teach at Oakmere Village Hall")])} />
        </>},
        body: Email({title: "Teach at Oakmere Village Hall", document: "<!doctype html><html lang=en><head><style>body{margin:0;padding:24px;font-family:Georgia,serif;color:#222222;background:#ffffff}p{margin:0 0 12px;font-size:15px;line-height:1.5}</style></head><body><p>Hello Aisha,</p><p>You are invited to teach Tuesday beginners at Oakmere Village Hall.</p><p>Accept within 7 days.</p></body></html>"}),
      }],
      time: React.string("Goes when you send it."),
    }}
    actions=[
      KitReact.Roles.Row.PrimaryAction({children: React.string("Send invitation")}),
      KitReact.Roles.Row.SecondaryAction({children: React.string("Don’t send")}),
    ]
  />
  <KitReact.Roles.Row
    props={{id: "row-dialog-question"}}
    subjectElement=Span
    subject={React.string("Which location is this?")}
    stamp={<KitReact.Roles.Stamp state=Neutral>{React.string("To answer")}</KitReact.Roles.Stamp>}
    scopeLine=[KitReact.Words.Text("Your answer sets the location for Monday’s choir rehearsal, Tuesday’s committee meeting and Thursday’s reading group.")]
    actions=[KitReact.Roles.Row.SecondaryAction({children: React.string("Add a location"), props: {id: "row-location-opener", onClick: _ => setLocationOpen(_ => true)}})]
  />
  <KitReact.Roles.Dialog
    id="row-location-dialog"
    open_=locationOpen
    returnFocus="row-location-opener"
    onOpen={() => setLocationOpen(_ => true)}
    onClose={() => setLocationOpen(_ => false)}
    props={{ariaLabelledby: "row-location-dialog-title"}}
    heading={React.string("Add a location")}
    headingProps={{id: "row-location-dialog-title"}}
    formGroups={<form id="row-location-form">
      <KitReact.Roles.FormGroup id="row-location-name-group" kind=Text(Medium)
        label={React.string("Location name")} labelProps={{htmlFor: "row-location-name"}}
        controlProps={{id: "row-location-name", name: "name", type_: "text"}}
        controlValue="Garden Room" printedValue={React.string("Garden Room")}
      />
      <KitReact.Roles.FormGroup id="row-location-address-group" kind=Text(Wide)
        label={React.string("Address")} labelProps={{htmlFor: "row-location-address"}}
        controlProps={{id: "row-location-address", name: "address", type_: "text"}}
        controlValue="Oakmere Village Hall, High Street" printedValue={React.string("Oakmere Village Hall, High Street")}
      />
    </form>}
    lead=PrimaryAction({children: React.string("Use this location"), props: {onClick: _ => setLocationOpen(_ => false)}})
    secondaryAction={{children: React.string("Cancel")}}
  />
  <p className="specimen-case-line">{React.string("An email as the subject.")}</p>
  <KitReact.Roles.Row
    subjectElement=Span
    subject={<KitReact.Email address="accounts.receivable.northeast-region.billing@hartfordcommunitydancestudio.com" />}
    facts=[{key: "role", content: Words([KitReact.Words.Text("Sends the invoices")]), props: {}}]
  />
  <p className="specimen-case-line">{React.string("A web address as the subject.")}</p>
  <KitReact.Roles.Row
    subjectElement=Span
    subject={<KitReact.Identifier value="venues.example.com/oakmere-primary-school-parents-association" />}
    facts=[{key: "role", content: Words([KitReact.Words.Text("Booking page")]), props: {}}]
  />
  <p className="specimen-case-line">{React.string("A person as the subject, with their availability.")}</p>
  <KitReact.Roles.Row
    subject={React.string("Aisha Khan")} subjectHref={"#role-row"}
    subjectAvatar=KitReact.Roles.Avatar.Person({name: "Aisha Khan", initials: "AK", picture: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5NiIgaGVpZ2h0PSI5NiIgdmlld0JveD0iMCAwIDk2IDk2Ij48cmVjdCB3aWR0aD0iOTYiIGhlaWdodD0iOTYiIGZpbGw9IiM4ZmE1YjYiLz48Y2lyY2xlIGN4PSI0OCIgY3k9IjM4IiByPSIxOCIgZmlsbD0iI2U4YzlhOCIvPjxwYXRoIGQ9Ik00OCA2MGMtMTcgMC0yOSAxMS0zMSAyNnYxMGg2MlY4NmMtMi0xNS0xNC0yNi0zMS0yNnoiIGZpbGw9IiMzZjVkNTIiLz48cGF0aCBkPSJNMzAgMzRjMC0xMiA4LTIwIDE4LTIwczE4IDggMTggMjBjMC02LTYtOC0xOC04cy0xOCAyLTE4IDh6IiBmaWxsPSIjNGEzYTJmIi8+PC9zdmc+", availability: [KitReact.Words.Text("Away")]})
    facts=[{key: "role", content: Words([KitReact.Words.Text("Books the choir rehearsals")]), props: {}}]
  />
  <p className="specimen-case-line">{React.string("An unread notification.")}</p>
  <KitReact.Roles.Row
    unread=true
    selection={<><KitReact.Roles.SelectionControl props={{name: "notification", value: "paid"}} /><span>{React.string("Select Oakmere Primary School paid its invoice")}</span></>}
    subject={React.string("Oakmere Primary School paid its invoice")} subjectHref={"#role-row"}
    facts=[{key: "by", content: Words([KitReact.Words.Text("Paid by Aisha Khan")]), props: {}}]
  />
  <KitReact.Roles.Row
    props={{id: "role-row-empty-region"}}
    subject={React.string("Oakmere Primary School")} subjectHref={"#role-row"}
    facts=[{key: "kind", content: Words([]), props: {}}]
  />
  <details>
    <summary>{React.string("Show a row arriving")}</summary>
    <KitReact.Roles.Row
      subject={React.string("Main Hall")} subjectHref={"#role-row"}
      facts=[{key: "day", content: Words([KitReact.Words.Text("Tuesday")]), props: {}}]
    />
    <KitReact.Roles.Row
      subject={React.string("Committee room")} subjectHref={"#role-row"}
      facts=[{key: "day", content: Words([KitReact.Words.Text("Wednesday")]), props: {}}]
    />
    {Array.fromInitializer(~length=arrivals, index => {
      let count = Int.toString(index + 1)
      <KitReact.Roles.Row
        key=count
        props={KitReact.Motion.arrival(~arrived=true)}
        subject={React.string("Kitchen")} subjectHref={"#role-row"}
        facts=[{key: "day", content: Words([KitReact.Words.Text("Thursday")]), props: {}}]
      />
    })->React.array}
    <KitReact.Roles.SecondaryAction props={{onClick: _ => setArrivals(count => count + 1)}}>
      {React.string("Add a row")}
    </KitReact.Roles.SecondaryAction>
  </details>
  </>
}

Row, selected

Select Oakmere Primary School

Oakmere Primary SchoolAwaiting payment

Invoice · £84.00

Source

@react.component
let make = () =>
  <KitReact.Roles.Row
    selection={<>
      <KitReact.Roles.SelectionControl checked=true props={{name: "record", value: "oak"}} />
      <span>{React.string("Select Oakmere Primary School")}</span>
    </>}
    subject={React.string("Oakmere Primary School")}
    subjectHref={"#role-row-selected"}
    stamp={<KitReact.Roles.Stamp state=KitReact.Roles.Stamp.Neutral> {React.string("Awaiting payment")} </KitReact.Roles.Stamp>}
    facts=[{key: "invoice", content: Words([KitReact.Words.Text("Invoice · "), KitReact.Words.Amount(KitReact.Amount.money(Specimen_Reader.reader, ~currency="GBP", ~amount="84.00"))]), props: {}}]
  />

Row, expanded

Select Oakmere Primary School

Oakmere Primary SchoolAwaiting payment

Invoice · £84.00

Invoice details

Bookings: 2

Each: £42.00

Source

@react.component
let make = () =>
  <KitReact.Roles.Row
    selection={<>
      <KitReact.Roles.SelectionControl props={{name: "record", value: "oak"}} />
      <span>{React.string("Select Oakmere Primary School")}</span>
    </>}
    subject={React.string("Oakmere Primary School")}
    subjectHref={"#role-row-expanded"}
    stamp={<KitReact.Roles.Stamp state=KitReact.Roles.Stamp.Neutral> {React.string("Awaiting payment")} </KitReact.Roles.Stamp>}
    facts=[{key: "invoice", content: Words([KitReact.Words.Text("Invoice · "), KitReact.Words.Amount(KitReact.Amount.money(Specimen_Reader.reader, ~currency="GBP", ~amount="84.00"))]), props: {}}]
    expansion={{
      summary: React.string("Invoice details"),
      content: FactGroup({children: <>
        <KitReact.Roles.LabelledFact name={React.string("Bookings")} value={Words([KitReact.Words.Amount(KitReact.Amount.count(Specimen_Reader.reader, 2))])} />
        <KitReact.Roles.LabelledFact name={React.string("Each")} value={Words([KitReact.Words.Amount(KitReact.Amount.money(Specimen_Reader.reader, ~amount="42.00", ~currency="GBP"))])} />
      </>}),
      expanded: true,
    }}
  />

Row, failed

On a Row.

Choir rehearsalCancelled

Tuesday, 22 April 2025 at 19:00 · Main Hall

This meeting was not reinstated: the connection dropped before it saved.

On a records row.

Meeting	When	Room
Choir rehearsal This meeting was not reinstated: the connection dropped before it saved.	Tuesday, 22 April 2025 at 19:00	Main Hall

On a Row with Try again unavailable.

Choir rehearsalCancelled

Tuesday, 22 April 2025 at 19:00 · Main Hall

This meeting was not reinstated: the connection dropped before it saved.

Try again once you are back online.

On a records row with Try again unavailable.

Meeting	When	Room
Choir rehearsal This meeting was not reinstated: the connection dropped before it saved. Try again once you are back online.	Tuesday, 22 April 2025 at 19:00	Main Hall

Source

@react.component
let make = () => <>
  <p className="specimen-case-line">{React.string("On a Row.")}</p>
  <KitReact.Roles.Row
    subject={React.string("Choir rehearsal")}
    subjectHref={"#role-row-failed"}
    stamp={<KitReact.Roles.Stamp state=KitReact.Roles.Stamp.Settled>{React.string("Cancelled")}</KitReact.Roles.Stamp>}
    facts=[{key: "meeting", content: Words([KitReact.Words.Time(KitReact.Time.momentWithWeekday(Specimen_Reader.reader, Date.fromString("2025-04-22T18:00:00Z"))), KitReact.Words.Text(" · Main Hall")]), props: {}}]
    standing={Failed({
      words: [KitReact.Words.Text("This meeting was not reinstated: the connection dropped before it saved.")],
      tryAgain: {},
    })}
    actions=[KitReact.Roles.Row.SecondaryAction({children: React.string("Open this meeting")})]
  />
  <p className="specimen-case-line">{React.string("On a records row.")}</p>
  <div className="specimen-table-contained"><KitReact.Table.RowsTable
    subjectHeading="Meeting"
    columnHeadings=[{label: "When", kind: Time}, {label: "Room"}]
    rows=[{
      subject: <a href="#role-row-failed"> {React.string("Choir rehearsal")} </a>,
      facts: [{content: Words([KitReact.Words.Time(KitReact.Time.momentWithWeekday(Specimen_Reader.reader, Date.fromString("2025-04-22T18:00:00Z")))]), props: {}}, {content: Content(React.string("Main Hall")), props: {}}],
      expansion: None,
      props: {},
      subjectProps: {},
      standing: Failed({
        words: [KitReact.Words.Text("This meeting was not reinstated: the connection dropped before it saved.")],
        tryAgain: {},
      }),
      actions: [KitReact.Table.SecondaryAction({children: React.string("Open this meeting")})],
    }]
  /></div>
  <p className="specimen-case-line">{React.string("On a Row with Try again unavailable.")}</p>
  <KitReact.Roles.Row
    subject={React.string("Choir rehearsal")}
    subjectHref={"#role-row-failed"}
    stamp={<KitReact.Roles.Stamp state=KitReact.Roles.Stamp.Settled>{React.string("Cancelled")}</KitReact.Roles.Stamp>}
    facts=[{key: "meeting", content: Words([KitReact.Words.Time(KitReact.Time.momentWithWeekday(Specimen_Reader.reader, Date.fromString("2025-04-22T18:00:00Z"))), KitReact.Words.Text(" · Main Hall")]), props: {}}]
    standing={Failed({
      words: [KitReact.Words.Text("This meeting was not reinstated: the connection dropped before it saved.")],
      tryAgain: {},
      tryAgainState: Inert({id: "role-row-failed-try-again", words: [KitReact.Words.Text("Try again once you are back online.")]}),
    })}
    actions=[KitReact.Roles.Row.SecondaryAction({children: React.string("Open this meeting")})]
  />
  <p className="specimen-case-line">{React.string("On a records row with Try again unavailable.")}</p>
  <div className="specimen-table-contained"><KitReact.Table.RowsTable
    subjectHeading="Meeting"
    columnHeadings=[{label: "When", kind: Time}, {label: "Room"}]
    rows=[{
      subject: <a href="#role-row-failed"> {React.string("Choir rehearsal")} </a>,
      facts: [{content: Words([KitReact.Words.Time(KitReact.Time.momentWithWeekday(Specimen_Reader.reader, Date.fromString("2025-04-22T18:00:00Z")))]), props: {}}, {content: Content(React.string("Main Hall")), props: {}}],
      expansion: None,
      props: {},
      subjectProps: {},
      standing: Failed({
        words: [KitReact.Words.Text("This meeting was not reinstated: the connection dropped before it saved.")],
        tryAgain: {},
        tryAgainState: Inert({id: "role-row-failed-records-try-again", words: [KitReact.Words.Text("Try again once you are back online.")]}),
      }),
      actions: [KitReact.Table.SecondaryAction({children: React.string("Open this meeting")})],
    }]
  /></div>
</>

Row, conflict

On a Row.

Choir rehearsalCancelled

Tuesday, 22 April 2025 at 19:00 · Main Hall

Maya Patel cancelled this meeting while you were moving it to the Garden Room.

On a records row.

Meeting	When	Room
Choir rehearsal Maya Patel cancelled this meeting while you were moving it to the Garden Room.	Tuesday, 22 April 2025 at 19:00	Main Hall

On a Row with the action unavailable.

Choir rehearsalCancelled

Tuesday, 22 April 2025 at 19:00 · Main Hall

Maya Patel cancelled this meeting while you were moving it to the Garden Room.

Reinstate this meeting before moving it.

On a records row with the action unavailable.

Meeting	When	Room
Choir rehearsal Maya Patel cancelled this meeting while you were moving it to the Garden Room. Reinstate this meeting before moving it.	Tuesday, 22 April 2025 at 19:00	Main Hall

Source

@react.component
let make = () => <>
  <p className="specimen-case-line">{React.string("On a Row.")}</p>
  <KitReact.Roles.Row
    subject={React.string("Choir rehearsal")}
    subjectHref={"#role-row-conflict"}
    stamp={<KitReact.Roles.Stamp state=KitReact.Roles.Stamp.Settled>{React.string("Cancelled")}</KitReact.Roles.Stamp>}
    facts=[{key: "meeting", content: Words([KitReact.Words.Time(KitReact.Time.momentWithWeekday(Specimen_Reader.reader, Date.fromString("2025-04-22T18:00:00Z"))), KitReact.Words.Text(" · Main Hall")]), props: {}}]
    standing={Conflict({
      words: [KitReact.Words.Text("Maya Patel cancelled this meeting while you were moving it to the Garden Room.")],
      label: "Move it to the Garden Room", action: {},
    })}
    actions=[KitReact.Roles.Row.SecondaryAction({children: React.string("Reinstate this meeting")})]
  />
  <p className="specimen-case-line">{React.string("On a records row.")}</p>
  <div className="specimen-table-contained"><KitReact.Table.RowsTable
    subjectHeading="Meeting"
    columnHeadings=[{label: "When", kind: Time}, {label: "Room"}]
    rows=[{
      subject: <a href="#role-row-conflict"> {React.string("Choir rehearsal")} </a>,
      facts: [{content: Words([KitReact.Words.Time(KitReact.Time.momentWithWeekday(Specimen_Reader.reader, Date.fromString("2025-04-22T18:00:00Z")))]), props: {}}, {content: Content(React.string("Main Hall")), props: {}}],
      expansion: None,
      props: {},
      subjectProps: {},
      standing: Conflict({
        words: [KitReact.Words.Text("Maya Patel cancelled this meeting while you were moving it to the Garden Room.")],
        label: "Move it to the Garden Room", action: {},
      }),
      actions: [KitReact.Table.SecondaryAction({children: React.string("Reinstate this meeting")})],
    }]
  /></div>
  <p className="specimen-case-line">{React.string("On a Row with the action unavailable.")}</p>
  <KitReact.Roles.Row
    subject={React.string("Choir rehearsal")}
    subjectHref={"#role-row-conflict"}
    stamp={<KitReact.Roles.Stamp state=KitReact.Roles.Stamp.Settled>{React.string("Cancelled")}</KitReact.Roles.Stamp>}
    facts=[{key: "meeting", content: Words([KitReact.Words.Time(KitReact.Time.momentWithWeekday(Specimen_Reader.reader, Date.fromString("2025-04-22T18:00:00Z"))), KitReact.Words.Text(" · Main Hall")]), props: {}}]
    standing={Conflict({
      words: [KitReact.Words.Text("Maya Patel cancelled this meeting while you were moving it to the Garden Room.")],
      label: "Move it to the Garden Room", action: {},
      actionState: Inert({id: "role-row-conflict-action", words: [KitReact.Words.Text("Reinstate this meeting before moving it.")]}),
    })}
    actions=[KitReact.Roles.Row.SecondaryAction({children: React.string("Reinstate this meeting")})]
  />
  <p className="specimen-case-line">{React.string("On a records row with the action unavailable.")}</p>
  <div className="specimen-table-contained"><KitReact.Table.RowsTable
    subjectHeading="Meeting"
    columnHeadings=[{label: "When", kind: Time}, {label: "Room"}]
    rows=[{
      subject: <a href="#role-row-conflict"> {React.string("Choir rehearsal")} </a>,
      facts: [{content: Words([KitReact.Words.Time(KitReact.Time.momentWithWeekday(Specimen_Reader.reader, Date.fromString("2025-04-22T18:00:00Z")))]), props: {}}, {content: Content(React.string("Main Hall")), props: {}}],
      expansion: None,
      props: {},
      subjectProps: {},
      standing: Conflict({
        words: [KitReact.Words.Text("Maya Patel cancelled this meeting while you were moving it to the Garden Room.")],
        label: "Move it to the Garden Room", action: {},
        actionState: Inert({id: "role-row-conflict-records-action", words: [KitReact.Words.Text("Reinstate this meeting before moving it.")]}),
      }),
      actions: [KitReact.Table.SecondaryAction({children: React.string("Reinstate this meeting")})],
    }]
  /></div>
</>

Row, processing

On a Row.

Choir rehearsalCancelled

Tuesday, 22 April 2025 at 19:00 · Main Hall

Reinstating this meeting…

On a records row.

Meeting	When	Room
Choir rehearsal Reinstating this meeting…	Tuesday, 22 April 2025 at 19:00	Main Hall

Source

@react.component
let make = () => <>
  <p className="specimen-case-line">{React.string("On a Row.")}</p>
  <KitReact.Roles.Row
    subject={React.string("Choir rehearsal")}
    subjectHref={"#role-row-processing"}
    stamp={<KitReact.Roles.Stamp state=KitReact.Roles.Stamp.Settled>{React.string("Cancelled")}</KitReact.Roles.Stamp>}
    facts=[{key: "meeting", content: Words([KitReact.Words.Time(KitReact.Time.momentWithWeekday(Specimen_Reader.reader, Date.fromString("2025-04-22T18:00:00Z"))), KitReact.Words.Text(" · Main Hall")]), props: {}}]
    standing={Processing([KitReact.Words.Text("Reinstating this meeting…")])}
    actions=[KitReact.Roles.Row.SecondaryAction({children: React.string("Open this meeting")})]
  />
  <p className="specimen-case-line">{React.string("On a records row.")}</p>
  <div className="specimen-table-contained"><KitReact.Table.RowsTable
    subjectHeading="Meeting"
    columnHeadings=[{label: "When", kind: Time}, {label: "Room"}]
    rows=[{
      subject: <a href="#role-row-processing"> {React.string("Choir rehearsal")} </a>,
      facts: [{content: Words([KitReact.Words.Time(KitReact.Time.momentWithWeekday(Specimen_Reader.reader, Date.fromString("2025-04-22T18:00:00Z")))]), props: {}}, {content: Content(React.string("Main Hall")), props: {}}],
      expansion: None,
      props: {},
      subjectProps: {},
      standing: Processing([KitReact.Words.Text("Reinstating this meeting…")]),
      actions: [KitReact.Table.SecondaryAction({children: React.string("Open this meeting")})],
    }]
  /></div>
</>

Row, unsaved

On a Row.

Choir rehearsalCancelled

Tuesday, 22 April 2025 at 19:00 · Main Hall

This meeting will be reinstated when you are back online.

On a records row.

Meeting	When	Room
Choir rehearsal This meeting will be reinstated when you are back online.	Tuesday, 22 April 2025 at 19:00	Main Hall

Source

@react.component
let make = () => <>
  <p className="specimen-case-line">{React.string("On a Row.")}</p>
  <KitReact.Roles.Row
    subject={React.string("Choir rehearsal")}
    subjectHref={"#role-row-unsaved"}
    stamp={<KitReact.Roles.Stamp state=KitReact.Roles.Stamp.Settled>{React.string("Cancelled")}</KitReact.Roles.Stamp>}
    facts=[{key: "meeting", content: Words([KitReact.Words.Time(KitReact.Time.momentWithWeekday(Specimen_Reader.reader, Date.fromString("2025-04-22T18:00:00Z"))), KitReact.Words.Text(" · Main Hall")]), props: {}}]
    standing={Unsaved([KitReact.Words.Text("This meeting will be reinstated when you are back online.")])}
    actions=[KitReact.Roles.Row.SecondaryAction({children: React.string("Open this meeting")})]
  />
  <p className="specimen-case-line">{React.string("On a records row.")}</p>
  <div className="specimen-table-contained"><KitReact.Table.RowsTable
    subjectHeading="Meeting"
    columnHeadings=[{label: "When", kind: Time}, {label: "Room"}]
    rows=[{
      subject: <a href="#role-row-unsaved"> {React.string("Choir rehearsal")} </a>,
      facts: [{content: Words([KitReact.Words.Time(KitReact.Time.momentWithWeekday(Specimen_Reader.reader, Date.fromString("2025-04-22T18:00:00Z")))]), props: {}}, {content: Content(React.string("Main Hall")), props: {}}],
      expansion: None,
      props: {},
      subjectProps: {},
      standing: Unsaved([KitReact.Words.Text("This meeting will be reinstated when you are back online.")]),
      actions: [KitReact.Table.SecondaryAction({children: React.string("Open this meeting")})],
    }]
  /></div>
</>

Previous, Stamp Next, Reordering

Human support

Row

Before you arrive

Invitations

Meetings

Invitation

Bookings

Register

Thursday bookings

The invitation, as Aisha will get it

Row, selected

Row, expanded

Row, failed

Row, conflict

Row, processing

Row, unsaved