Kinetiq

KQ-864 · QUOTE/BLOCK

Quote Block

A message that carries someone else's words. The quote sits in the bubble as a card with a cobalt rule down its side, folded to one line until its disclosure glides it open on glide to a height a ResizeObserver measured; pointing at the card, or focusing either control, draws the wash across the matched words in the original with a scaleX from its left edge on snap. The second control carries the thread back to the source on glide and lands focus on it, and a quote whose words are not in the original says so in its own label.

KQ-864 · QUOTE/BLOCK
  1. Marta07:12

    Gate B is clear from eight. Two pallets go on the Basinworks run, the loose crate never got a label, and Waylight Pay wants the whole lot signed for by ten.

  2. Rui07:20

    Docket says 41 kilos, written on the back page.

  3. Ines07:26
    “the loose crate never got a label”Marta

    Then it rides on the second pallet, not the first.

  4. You07:31
    “41 kilos, written on the back page”Rui

    I will write the label at the gate and take the signature there.

quote folded · no jump yet

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/quote-block

Props

messages
QuoteMessage[]
default —
The thread, oldest first; a message's quote names its source and the words taken from it.
expandedId / defaultExpandedId
string | null
default null
Controlled or initial id of the message whose quote card is unfolded; one at a time.
onExpandedChange
(id: string | null) => void
default —
Fires from the disclosure control with the next unfolded id.
onShowSource
(sourceId: string, quoteId: string) => void
default —
Fires when the thread is carried back to the original.
label
string
default —
Names the thread list for assistive technology.