KQ-2062 · ANSWER/SHAPE

Answer Shape

A prompt composer with shape picks under the field — paragraph, bullets, table, email, checklist — and a skeleton of the answer's form beside it, drawn from one fixed set of bars. Choosing a shape moves every bar to its place in the new form on springs.glide, a paragraph's word groups regrouping into a table's rows and columns or folding into an envelope whose flap rotates into a V, while the selection slides on springs.snap and the length rolls on snap. The picks are a radiogroup on the arrow keys with Cmd or Ctrl and 1 to 5 from anywhere in the composer, the length is a spinbutton, a note offers to switch when the prompt itself asks for another form, and on a phone the skeleton shrinks to a live icon beside Send.

KQ-2062 · ANSWER/SHAPE

Fieldline · Larch Street · today’s crew update

5bullets

bullets · 5 bullets · ready · fieldline crew update

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/answer-shape

Props

skeletonStyle: "solid" | "wire" | "type"; default "solid"; The preview's texture: filled bars, a hairline wireframe, or bars drawn as faux words.
pickSize: "sm" | "md" | "lg"; default "md"; Icon-only picks, icon and label, or tiles with the icon over the label (icon-only on a phone at every size).
accent: string; default "var(--accent-bright)"; Selection, the table header, the checked box and Send — any CSS colour.
shapes: AnswerShapeOption[]; default defaultAnswerShapes; The forms on offer: label, kind (skeleton and icon), unit, min, max, step, default length, words per unit, cues, and an optional custom skeleton(length, box).
shape / defaultShape: string; default — / "bullets"; The chosen shape's id, controlled or initial.
onShapeChange: (id: string) => void; default —; Fires from the pick, shortcut or note that changed the shape.
length / defaultLength: number; default — / the shape's defaultLength; The answer's length in the current shape's unit, controlled or initial; each shape remembers its own.
onLengthChange: (length: number, shapeId: string) => void; default —; Fires with the new length and the shape it belongs to.
draft / defaultDraft: string; default — / defaultAnswerDraft; The prompt text, controlled or initial.
onDraftChange: (draft: string) => void; default —; Fires from every edit.
onSubmit: (answer: { draft, shape, length }) => void; default —; Enter or Send: the prompt with the form it should take.
detectConflicts: boolean; default true; Raise a note with Use and Keep when the prompt asks for a different form.
showPreview: boolean; default true; Show the skeleton preview, or its icon on a phone.
placeholder: string; default "Ask Fieldline…"; Placeholder for an empty field.
label: string; default "Ask Fieldline"; The field's accessible name.
maxRows: number; default 3; Lines the field grows to before it scrolls.
busy: boolean; default false; An answer is being written: Send holds and spins.
disabled: boolean; default false; Nothing can be typed, picked or sent.
className: string; default —; Classes for the outer surface.

Prop	Type	Default	Description
skeletonStyle	"solid" \| "wire" \| "type"	"solid"	The preview's texture: filled bars, a hairline wireframe, or bars drawn as faux words.
pickSize	"sm" \| "md" \| "lg"	"md"	Icon-only picks, icon and label, or tiles with the icon over the label (icon-only on a phone at every size).
accent	string	"var(--accent-bright)"	Selection, the table header, the checked box and Send — any CSS colour.
shapes	AnswerShapeOption[]	defaultAnswerShapes	The forms on offer: label, kind (skeleton and icon), unit, min, max, step, default length, words per unit, cues, and an optional custom skeleton(length, box).
shape / defaultShape	string	— / "bullets"	The chosen shape's id, controlled or initial.
onShapeChange	(id: string) => void	—	Fires from the pick, shortcut or note that changed the shape.
length / defaultLength	number	— / the shape's defaultLength	The answer's length in the current shape's unit, controlled or initial; each shape remembers its own.
onLengthChange	(length: number, shapeId: string) => void	—	Fires with the new length and the shape it belongs to.
draft / defaultDraft	string	— / defaultAnswerDraft	The prompt text, controlled or initial.
onDraftChange	(draft: string) => void	—	Fires from every edit.
onSubmit	(answer: { draft, shape, length }) => void	—	Enter or Send: the prompt with the form it should take.
detectConflicts	boolean	true	Raise a note with Use and Keep when the prompt asks for a different form.
showPreview	boolean	true	Show the skeleton preview, or its icon on a phone.
placeholder	string	"Ask Fieldline…"	Placeholder for an empty field.
label	string	"Ask Fieldline"	The field's accessible name.
maxRows	number	3	Lines the field grows to before it scrolls.
busy	boolean	false	An answer is being written: Send holds and spins.
disabled	boolean	false	Nothing can be typed, picked or sent.
className	string	—	Classes for the outer surface.