Socket Panel

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.

Copy the socket-panel folder from its package next to your page, link the stylesheets and mount it on an element. Every option has a default; the lab’s Code tab writes the same example at any settings, and for React, Vue, Svelte or a custom element (Using a framework).

<link rel="stylesheet" href="socket-panel/socket-panel.css">
<div id="socket-panel"></div>

<script type="module">
  import { mount } from './socket-panel/socket-panel.mjs';

  const socketPanel = mount(document.getElementById('socket-panel'), {
    label: 'Integrations',
    title: 'Plug in what you already use.',
    lead: 'Each socket is one service. Plug it in and Lode starts sending what changes there; unplug it and it stops at once.',
  });

  // socketPanel.update({ … });   change any option in place
  // socketPanel.destroy();        and take it away again
</script>

mount(element, options)

Builds the block inside the element and returns its handle.

handle.connected

handle.connect(id)

handle.disconnect(id)

handle.focus(id)

handle.update(patch = {})

Change options in place.

handle.destroy()

Stops it and cleans up after it.

1. At restSix 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 inPress a free socket: the plug comes down from the front of the panel over 240 ms, sits with a small squash, and only then does the lamp light; socket-connect fires and the status line says it in words.
3. ConnectingWhile 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. AskingPress 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. UnpluggedUnplug confirmed: the plug pulls out, the lamp goes dark, socket-disconnect fires.
6. KeyboardOne 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. PhoneTwo columns of sockets at 390px, no sideways scroll.
8. Reduced motionNo seat and no pull: the plug is there or it is not.
9. FinishesAluminium and graphite by data-finish; the lamps are the only colour.

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

Original composition; Lode and its integrations are invented, and the services are named in text, with no logos. Built from the kit alone (00.11): DOM and CSS, no object. Faces: Geist Mono and Instrument Sans (SIL OFL 1.1).