KQ-787 · TOOL/TOGGLE
Tool Toggle
A grid of switches deciding what the model may reach for. Switching a tool on draws its procedural glyph with pathLength on flick while the plate tints cobalt and the knob crosses on snap; switching it off undraws the glyph and leaves an empty socket, so an off tool never reads as a greyed picture. The header counts the tools that are on and rolls its digits on snap from the flip that changed it; arrows walk the grid, Home and End jump, Space and Enter flip.
KQ-787 · TOOL/TOGGLE
Gaugeworks Reasoner · tools/ 6 on
3 of 6 on · Search · Browser · File
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/tool-toggle
Props
- tools
- ToggleTool[]
- default —
- { id, name, hint?, icon } where icon is one of search, browser, file, shell, calc or mail.
- enabled / defaultEnabled
- string[]
- default []
- Controlled or initial ids that are on.
- onEnabledChange
- (enabled: string[], changed: { id: string; on: boolean }) => void
- default —
- Fires from the press or key that flipped a switch.
- columns
- 1 | 2 | 3
- default 2
- Grid columns; two fit a phone.
- label
- string
- default —
- Names the group and the count.
| Prop | Type | Default | Description |
|---|---|---|---|
| tools | ToggleTool[] | — | { id, name, hint?, icon } where icon is one of search, browser, file, shell, calc or mail. |
| enabled / defaultEnabled | string[] | [] | Controlled or initial ids that are on. |
| onEnabledChange | (enabled: string[], changed: { id: string; on: boolean }) => void | — | Fires from the press or key that flipped a switch. |
| columns | 1 | 2 | 3 | 2 | Grid columns; two fit a phone. |
| label | string | — | Names the group and the count. |