# Socket Panel

An integrations section made as a panel of sockets, one per service. A connected service has its plug seated and a green lamp; press a free socket and the plug goes in with a seat, press a connected one and the panel asks, in place, whether to unplug it.

Block · With a Pass · https://tactileui.dev/blocks/socket-panel

> The code and styling for this block come with the Pass. Sign in if you have one. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

Css seat animation, Inline confirmation, Grid roving focus, Until promise lamp, Status in words, No loop at rest, Reduced motion static plugs, Finish following

## Usage notes

The integrations section of a product that connects to other tools: which services are plugged in, and a way to plug in or unplug one without leaving the page. It is a status panel, one labelled socket per service, not a patch bay: nothing is routed. A page does the real work by listening for socket-connect (with until(promise) to hold the lamp amber while it connects, and to pop the plug out if that fails), socket-disconnect and socket-fail.

## Options

| Option | Type | Description |
| - | - | - |
| label | text | Label |
| title | text | Headline |
| lead | text | Lead |
| services | text | Separated by “\|”, two to twelve. Write Name=what it does for a note under the name. Each is one socket, named as text: no logos. |
| connected | text | Names from the list, separated by “\|”. Empty: every socket starts free. Others are plugged by the visitor, or by connect(id). |
| finish | enum | Auto follows the page’s data-finish, then the visitor’s system. |

## Methods

- connected
- connect
- disconnect
- focus
- update
- destroy

## States

1. **At rest**: Six sockets cut into a machined plate: GitHub, Slack and Postgres have a plug seated with a cable stub and a green lamp; the others show a bare jack. Nothing runs.
2. **Plugging in**: Press a free socket.
3. **Connecting**: While the page's until() promise is pending the lamp is amber; when it resolves it turns green, when it rejects the plug comes out again and socket-fail fires.
4. **Asking**: Press a connected socket: the question opens in the socket's own place, not in a dialog, with Keep and Unplug; Keep has the focus and Esc takes the question back.
5. **Unplugged**: Unplug confirmed: the plug pulls out, the lamp goes dark, socket-disconnect fires.
6. **Keyboard**: One Tab stop for the panel; arrows move across and down the grid by the columns it has at its width, Home and End, Enter or Space to plug or ask.
7. **Phone**: 
8. **Reduced motion**: No seat and no pull: the plug is there or it is not.
9. **Finishes**: Aluminium and graphite by data-finish; the lamps are the only colour.

## How it works

Original composition; Lode and its integrations are invented, and the services are named in text, with no logos.