KQ-2059 · BRIEF/BLOCKS

Brief Blocks

A prompt composer built from labelled blocks — role, goal, context, constraints, format — added from a rail, filled and dragged into order: the grip follows the pointer 1:1, the other blocks glide out of its way on springs.glide, and the released block settles into its slot carrying the throw. Preview threads the blocks into one readable prompt: every word is a shared layout element, so each block's text slides out of its card into its place in the sentence on glide, block after block a cascade apart, while each label flies to the margin beside its line as a faint tag; Edit slides the words back before the text fields return. Alt with the arrow keys moves a block, Cmd or Ctrl+Enter sends, empty blocks are flagged, and a brief over its limit marks the longest block as the one to cut.

KQ-2059 · BRIEF/BLOCKS

Waylight product brief

5 blocks · 492 of 1,200

RoleWho should answer78
You are a senior product manager at Waylight, writing for the leadership team.
GoalWhat you need back93
Draft a one-page brief for offline routes, so we can decide whether to build it next quarter.
ContextWhat it should know142
Riders lose signal in tunnels and along the coast road, and 14% of last month's support tickets were about routes that would not load offline.
ConstraintsLimits and rules79
Keep it under 400 words. No engineering estimates; list open questions instead.
FormatThe shape of the answer100
A title, a two-sentence summary, then Problem, Proposal, Risks and Open questions as short sections.

5 blocks · 492 of 1,200 · ready · waylight offline routes

Open it on the Canvas stage

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/brief-blocks

Props

blockStyle: "card" | "strip" | "line"; default "card"; Blocks drawn as filled cards, flush strips with a coloured edge, or bare dashed outlines.
ribbonFont: "sans" | "serif" | "mono"; default "sans"; The threaded ribbon's typeface.
accent: string; default "var(--accent-bright)"; Any CSS colour for the active block's edge, the meter, segment hovers in the ribbon and Send.
blocks / defaultBlocks: BriefBlock[]; default — / defaultBriefBlocks; The blocks in order (id, kind, text), controlled or initial.
onChange: (blocks: BriefBlock[]) => void; default —; Fires from every edit, add, remove, move and preset with the whole list.
kinds: BriefBlockKind[]; default defaultBriefKinds; The kinds the rail offers: id, label, hint, placeholder, and whether only one is allowed.
presets: BriefPreset[]; default defaultBriefPresets; Saved starting points for the preset menu.
onSavePreset: (preset: BriefPreset) => void; default —; Save as preset was confirmed with a name; the preset joins the menu.
onSubmit: (prompt: string, blocks: BriefBlock[]) => void; default —; Send (or Cmd/Ctrl+Enter) with every block filled and the brief within maxLength.
assemble: (blocks: BriefBlock[], kinds: BriefBlockKind[]) => string; default assembleBrief; Turns the blocks into the prompt that is sent; by default labelled paragraphs.
mode / defaultMode: "edit" | "ribbon"; default — / "edit"; The block editor or the threaded ribbon, controlled or initial.
onModeChange: (mode: BriefMode) => void; default —; Fires from the Edit/Preview switch (or a press on a ribbon segment) that changed the view.
maxLength: number; default 1200; The longest brief Send accepts, in characters; over it the meter turns red and the longest block is marked.
status: "ready" | "sending"; default "ready"; Holds Send busy while the host sends.
title: string; default "Waylight product brief"; The brief's name in the header.
height: number; default 540; The surface's height in px; the blocks scroll inside it.
disabled: boolean; default false; Nothing can be edited, moved or sent.
className: string; default —; Classes for the outer surface.

Prop	Type	Default	Description
blockStyle	"card" \| "strip" \| "line"	"card"	Blocks drawn as filled cards, flush strips with a coloured edge, or bare dashed outlines.
ribbonFont	"sans" \| "serif" \| "mono"	"sans"	The threaded ribbon's typeface.
accent	string	"var(--accent-bright)"	Any CSS colour for the active block's edge, the meter, segment hovers in the ribbon and Send.
blocks / defaultBlocks	BriefBlock[]	— / defaultBriefBlocks	The blocks in order (id, kind, text), controlled or initial.
onChange	(blocks: BriefBlock[]) => void	—	Fires from every edit, add, remove, move and preset with the whole list.
kinds	BriefBlockKind[]	defaultBriefKinds	The kinds the rail offers: id, label, hint, placeholder, and whether only one is allowed.
presets	BriefPreset[]	defaultBriefPresets	Saved starting points for the preset menu.
onSavePreset	(preset: BriefPreset) => void	—	Save as preset was confirmed with a name; the preset joins the menu.
onSubmit	(prompt: string, blocks: BriefBlock[]) => void	—	Send (or Cmd/Ctrl+Enter) with every block filled and the brief within maxLength.
assemble	(blocks: BriefBlock[], kinds: BriefBlockKind[]) => string	assembleBrief	Turns the blocks into the prompt that is sent; by default labelled paragraphs.
mode / defaultMode	"edit" \| "ribbon"	— / "edit"	The block editor or the threaded ribbon, controlled or initial.
onModeChange	(mode: BriefMode) => void	—	Fires from the Edit/Preview switch (or a press on a ribbon segment) that changed the view.
maxLength	number	1200	The longest brief Send accepts, in characters; over it the meter turns red and the longest block is marked.
status	"ready" \| "sending"	"ready"	Holds Send busy while the host sends.
title	string	"Waylight product brief"	The brief's name in the header.
height	number	540	The surface's height in px; the blocks scroll inside it.
disabled	boolean	false	Nothing can be edited, moved or sent.
className	string	—	Classes for the outer surface.