KQ-963 · DEPLOY/DIFF

Deploy Diff

The card you read before you ship: the head carries the route, the release and a commit count whose digits roll on snap in a fixed-width column, and pressing it unfolds a ResizeObserver-measured body on glide where the service chips and commits cascade in from 4px away. The deploy control is a slide track whose knob is dragged, with the pointer captured only after 4px of travel, or driven from the keyboard as a real slider; only a full sweep fires the deploy, and a short one springs home on snap. The status comes from the host, so the strip that replaces the track arrives only when the parent answers, and takes focus after this card's own confirm.

KQ-963 · DEPLOY/DIFF

4 commits · 3 services · folded · armed 0% · ready

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/deploy-diff

Props

ref: React.Ref<HTMLDivElement>; default —; Reaches the root group element.
release: string; default —; The build being deployed; printed in the head.
from: string; default —; The environment this deploy runs from.
to: string; default —; The environment this deploy runs to; named in every status sentence.
commits: DeployCommit[]; default []; Newest first, each with a short hash, subject and author; the count in the head rolls.
services: ServiceChange[]; default []; The changed services, one chip each with lines added and removed.
status: "ready" | "deploying" | "deployed" | "blocked"; default "ready"; Comes from the host — the card never advances it on its own.
blockedNote: string; default —; Why the deploy is held; printed and spoken when the status is blocked.
open / defaultOpen: boolean; default false; Controlled or initial unfolded state of the body.
onOpenChange: (open: boolean) => void; default —; Fires from the press or key that folded or unfolded the body.
onDeploy: () => void; default —; Fires once, from the gesture that carried the knob to the end.
onArmChange: (share: number) => void; default —; How far the knob has travelled, 0–1 — a reading, so it also fires on the first commit.
slideLabel: string; default "Slide to deploy"; Names the slide control and prints on its track.
label: string; default "Deploy"; Names the card for assistive technology.
className: string; default —; Merged onto the root element's classes.

Prop	Type	Default	Description
ref	React.Ref<HTMLDivElement>	—	Reaches the root group element.
release	string	—	The build being deployed; printed in the head.
from	string	—	The environment this deploy runs from.
to	string	—	The environment this deploy runs to; named in every status sentence.
commits	DeployCommit[]	[]	Newest first, each with a short hash, subject and author; the count in the head rolls.
services	ServiceChange[]	[]	The changed services, one chip each with lines added and removed.
status	"ready" \| "deploying" \| "deployed" \| "blocked"	"ready"	Comes from the host — the card never advances it on its own.
blockedNote	string	—	Why the deploy is held; printed and spoken when the status is blocked.
open / defaultOpen	boolean	false	Controlled or initial unfolded state of the body.
onOpenChange	(open: boolean) => void	—	Fires from the press or key that folded or unfolded the body.
onDeploy	() => void	—	Fires once, from the gesture that carried the knob to the end.
onArmChange	(share: number) => void	—	How far the knob has travelled, 0–1 — a reading, so it also fires on the first commit.
slideLabel	string	"Slide to deploy"	Names the slide control and prints on its track.
label	string	"Deploy"	Names the card for assistive technology.
className	string	—	Merged onto the root element's classes.