KQ-1678 · SITE/ASSESSMENT

Site Assessment

A scored site questionnaire beside the column that keeps its score: every answer drops a chip sized by its weighted points onto the stack from a step above, landing on springs.recoil and pressing the stack down by its weight before it springs back, while a clear answer lands as a flat seam so the stack stays exact. The stack wears the risk band its top reaches, so crossing a threshold is a soft colour change, the score's digits roll on springs.snap, and changing an answer pulls its chip out sideways on the exit ease while the chips above glide down on springs.glide. Each question is a radio group moved with the arrow keys, notes open to their measured height on glide, Submit takes focus to the first unanswered check and queues while offline.

KQ-1678 · SITE/ASSESSMENT

Riverside pump station

Fieldline site visit · Tue 13 Oct, 09:40

3 of 8 answered

Risk score/100Low

Access

Vehicle route to the wet well

From the gate to the lifting point, for the crane truck.

Overhead lines near the crane path

Anything within 10 m of the jib's reach.

Electrical

Isolation points labelled and lockable

Control panel enclosure

Door seals, cable glands and the rating plate.

Height & entry

Gas monitor for wet well entry

Bump-tested this morning and in calibration.

Guard rails on the valve platform

Environment

River level against the last survey

Public access to the compound

score 9 · Low · 3 of 8 answered

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/site-assessment

Props

questions: SiteAssessmentQuestion[]; default defaultSiteAssessmentQuestions; The checks: { id, section?, prompt, short?, help?, weight, options: { value, label, points }[] }. Points are multiplied by the weight.
value / defaultValue: Record<string, string>; default — / defaultSiteAssessmentAnswers; Answers by question id, controlled or initial.
onValueChange: (answers) => void; default —; Fires from the press or arrow key that changed an answer, with every answer.
onAnswer: (questionId, value, answers) => void; default —; Fires once per answer given.
defaultNotes: Record<string, string>; default {}; Notes already written when the form opens.
onNotesChange: (notes) => void; default —; Fires as a note is typed, with every note.
onSubmit: (result: SiteAssessmentResult) => void; default —; The assessment was sent — at once, or when the connection returned if it was queued. Carries answers, notes, score, band, points, maxPoints and unanswered.
onQueue: (result) => void; default —; Submit was pressed offline; onSubmit follows when the connection returns.
onDraftChange: (draft: { answers, notes }) => void; default —; Fires after every answer or note, for a host that keeps drafts itself.
draftKey: string; default —; Keeps the draft in the device's storage under this key and restores it after mount.
online: boolean; default follows the browser; Whether the visit has a connection; offline shows a strip and Submit queues.
requireAll: boolean; default true; Submit only once every check has an answer; otherwise focus goes to the first gap.
bandCount: number; default 4; How many risk bands stripe the column and name the score, 2 to 6.
bandLabels: string[]; default Low · Guarded · Elevated · High (by count); Names for the bands, lowest first.
chipStyle: "solid" | "wash" | "pebble"; default "solid"; Chips as solid pigment blocks, a translucent wash with an edge, or inset pebbles.
palette: "signal" | "cobalt" | "ember" | "mono" | string[]; default "signal"; The band colours, lowest first: a named ramp of token pigments or any CSS colours.
status: "ready" | "loading" | "error"; default "ready"; Loading shows placeholder checks; error explains and offers Try again.
onRetry: () => void; default —; Try again was pressed after the checklist failed to load.
title: string; default "Riverside pump station"; The site's name, the form's heading.
now: number; default defaultSiteAssessmentNow; The visit's start in ms, shown in the header; never read from the clock.
height: number; default 520; Height of the surface in px; the questions scroll inside it.
disabled: boolean; default false; Answers, notes and Submit are locked.
className: string; default —; Classes for the surface.

Prop	Type	Default	Description
questions	SiteAssessmentQuestion[]	defaultSiteAssessmentQuestions	The checks: { id, section?, prompt, short?, help?, weight, options: { value, label, points }[] }. Points are multiplied by the weight.
value / defaultValue	Record<string, string>	— / defaultSiteAssessmentAnswers	Answers by question id, controlled or initial.
onValueChange	(answers) => void	—	Fires from the press or arrow key that changed an answer, with every answer.
onAnswer	(questionId, value, answers) => void	—	Fires once per answer given.
defaultNotes	Record<string, string>	{}	Notes already written when the form opens.
onNotesChange	(notes) => void	—	Fires as a note is typed, with every note.
onSubmit	(result: SiteAssessmentResult) => void	—	The assessment was sent — at once, or when the connection returned if it was queued. Carries answers, notes, score, band, points, maxPoints and unanswered.
onQueue	(result) => void	—	Submit was pressed offline; onSubmit follows when the connection returns.
onDraftChange	(draft: { answers, notes }) => void	—	Fires after every answer or note, for a host that keeps drafts itself.
draftKey	string	—	Keeps the draft in the device's storage under this key and restores it after mount.
online	boolean	follows the browser	Whether the visit has a connection; offline shows a strip and Submit queues.
requireAll	boolean	true	Submit only once every check has an answer; otherwise focus goes to the first gap.
bandCount	number	4	How many risk bands stripe the column and name the score, 2 to 6.
bandLabels	string[]	Low · Guarded · Elevated · High (by count)	Names for the bands, lowest first.
chipStyle	"solid" \| "wash" \| "pebble"	"solid"	Chips as solid pigment blocks, a translucent wash with an edge, or inset pebbles.
palette	"signal" \| "cobalt" \| "ember" \| "mono" \| string[]	"signal"	The band colours, lowest first: a named ramp of token pigments or any CSS colours.
status	"ready" \| "loading" \| "error"	"ready"	Loading shows placeholder checks; error explains and offers Try again.
onRetry	() => void	—	Try again was pressed after the checklist failed to load.
title	string	"Riverside pump station"	The site's name, the form's heading.
now	number	defaultSiteAssessmentNow	The visit's start in ms, shown in the header; never read from the clock.
height	number	520	Height of the surface in px; the questions scroll inside it.
disabled	boolean	false	Answers, notes and Submit are locked.
className	string	—	Classes for the surface.