KQ-1663 · HAZARD/SHELF
Hazard Shelf
The irreversible end of a workspace's settings, where opening an action unrolls a caution-striped panel like a blind off a roll: its height runs to the measured size on springs.glide while a striped roll rides the leading edge, its stripes turning and its thickness thinning as it pays out, then each consequence count fills in from zero a cascade step apart. Typing the workspace name lights each matched letter with an underline drawn on springs.flick and a full match sweeps the confirm button's fill in on springs.snap; Escape, Cancel or opening another action rolls the panel up on the exit ease. Tab and Enter reach every step, and onTransfer, onArchive and onDelete fire only after confirmation.
KQ-1663 · HAZARD/SHELF
Irreversible actions
Each of these changes Fernworks for everyone in it. Open one to see exactly what it reaches.
delete workspace · 412 documents counted
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/hazard-shelf
Props
- actions
- HazardAction[]
- default defaultHazardActions
- The actions on the shelf, top to bottom: { id, kind: "transfer" | "archive" | "delete", title, summary, touches: { id, count, one, other, note? }[], confirmLabel?, doneLabel? }.
- workspace
- string
- default "Fernworks"
- The workspace's name: what the confirm field asks for, and the name in every sentence.
- members
- HazardMember[]
- default defaultHazardMembers
- Who ownership can be transferred to: { id, name, role }.
- value / defaultValue
- string | null
- default — / null
- The open action's id, controlled or initial; an action open at the first render is shown already unrolled.
- onValueChange
- (id: string | null) => void
- default —
- Fires from the press or key that opened or rolled up a panel.
- onTransfer
- (memberId: string) => void | Promise<unknown>
- default —
- Fires after a confirmed transfer with the new owner's id; a promise shows it pending, a rejection is reported in the panel.
- onArchive
- () => void | Promise<unknown>
- default —
- Fires after a confirmed archive; may return a promise.
- onDelete
- () => void | Promise<unknown>
- default —
- Fires after a confirmed delete; may return a promise.
- status
- "ready" | "loading" | "error"
- default "ready"
- Whether the consequence counts have arrived. Loading shows placeholders and error offers Count again; nothing can be confirmed until they are in.
- onRetry
- () => void
- default —
- Count again was pressed after the counts failed.
- stripeStyle
- "tape" | "rail" | "hatch" | "plain"
- default "tape"
- How the caution shows: a striped tape across the panel's top, a rail down its edge, a faint hatch, or a plain hairline.
- density
- "compact" | "regular" | "roomy"
- default "regular"
- Row padding, type size, icon tiles and figure size.
- tone
- "amber" | "red" | "ink"
- default "amber"
- The hazard hue: amber caution, red danger, or graphite. Stripes are pigment at a fixed lightness; text keeps the theme's tokens.
- countDuration
- number
- default 700
- How long the counts take to fill in from zero, ms.
- matchCase
- boolean
- default true
- The typed name must match letter case too.
- title
- string
- default "Irreversible actions"
- The shelf's heading and accessible name.
- maxHeight
- number
- default 520
- Tallest the shelf grows before it scrolls inside, px.
- disabled
- boolean
- default false
- Triggers and confirms are inert and the shelf dims.
- className
- string
- default —
- Classes for the outer shelf.
| Prop | Type | Default | Description |
|---|---|---|---|
| actions | HazardAction[] | defaultHazardActions | The actions on the shelf, top to bottom: { id, kind: "transfer" | "archive" | "delete", title, summary, touches: { id, count, one, other, note? }[], confirmLabel?, doneLabel? }. |
| workspace | string | "Fernworks" | The workspace's name: what the confirm field asks for, and the name in every sentence. |
| members | HazardMember[] | defaultHazardMembers | Who ownership can be transferred to: { id, name, role }. |
| value / defaultValue | string | null | — / null | The open action's id, controlled or initial; an action open at the first render is shown already unrolled. |
| onValueChange | (id: string | null) => void | — | Fires from the press or key that opened or rolled up a panel. |
| onTransfer | (memberId: string) => void | Promise<unknown> | — | Fires after a confirmed transfer with the new owner's id; a promise shows it pending, a rejection is reported in the panel. |
| onArchive | () => void | Promise<unknown> | — | Fires after a confirmed archive; may return a promise. |
| onDelete | () => void | Promise<unknown> | — | Fires after a confirmed delete; may return a promise. |
| status | "ready" | "loading" | "error" | "ready" | Whether the consequence counts have arrived. Loading shows placeholders and error offers Count again; nothing can be confirmed until they are in. |
| onRetry | () => void | — | Count again was pressed after the counts failed. |
| stripeStyle | "tape" | "rail" | "hatch" | "plain" | "tape" | How the caution shows: a striped tape across the panel's top, a rail down its edge, a faint hatch, or a plain hairline. |
| density | "compact" | "regular" | "roomy" | "regular" | Row padding, type size, icon tiles and figure size. |
| tone | "amber" | "red" | "ink" | "amber" | The hazard hue: amber caution, red danger, or graphite. Stripes are pigment at a fixed lightness; text keeps the theme's tokens. |
| countDuration | number | 700 | How long the counts take to fill in from zero, ms. |
| matchCase | boolean | true | The typed name must match letter case too. |
| title | string | "Irreversible actions" | The shelf's heading and accessible name. |
| maxHeight | number | 520 | Tallest the shelf grows before it scrolls inside, px. |
| disabled | boolean | false | Triggers and confirms are inert and the shelf dims. |
| className | string | — | Classes for the outer shelf. |