Machined Footer

The footer of a product that runs something and has to show its state: an agent runtime, a devtools or infrastructure service, an IoT platform. It carries what every footer carries (links, legal, a newsletter) and what these products want there: the live status on a lamp with words, set from a status feed with setStatus(), the running build, and the page's finish switch, remembered like the Tactile UI Kit's own key. Free with an account: CSS and a little DOM, no dependency, both finishes.

Copy the machined-footer 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="machined-footer/machined-footer.css">
<div id="machined-footer"></div>

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

  const machinedFooter = mount(document.getElementById('machined-footer'), {
    brand: 'Lode',
    tagline: 'The runtime for agents that touch production.',
    status: 'normal',
  });

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

mount(element, options)

Builds the block inside the element and returns its handle.

handle.setStatus(s)

Set the lamp and its words from outside: 'normal' | 'degraded' | 'outage'.

handle.update(next = {})

Change options in place.

handle.destroy()

Stops it and cleans up after it.

Events it fires, which bubble from the element: mf-subscribe.

1. At restThe plate, its vents and screws; four columns; the green lamp and “All systems normal”; nothing runs.
2. DegradedThe lamp turns amber and the window says “Degraded: slower cold starts in eu-west · Investigating since 14:02 UTC”; the line is role=status, so the change is announced.
3. OutageA red lamp and “Partial outage: run scheduling · Next update in 15 minutes”. No blinking.
4. Finish switchedThe thumb slides 180 ms; <html data-finish> changes and localStorage['tui-finish'] remembers it; every Tactile section on the page re-dresses.
5. Finish changed elsewhereThe selector moves to match, and an auto footer re-dresses.
6. Field: wrong addressThe whole well gets a red lip, aria-invalid is set, focus returns to the field and the hint says how to fix it (“Add the part after the @, e.g. [email protected].”).
7. Field: subscribedmf-subscribe fires with the address; with an action the form posts, otherwise the hint confirms “Added. The next changelog reaches … on Thursday.”
8. Key pressedSubscribe drops its 2px skirt below the plate.
9. TabletBrand and field above; two columns of links.
10. PhoneOne column of link groups, each group's links flowing in a line with 32px targets; the status window and the base stack.
11. Reduced motionThe thumb and the key move without transitions; everything else is unchanged.

Made of: Native radio slide selector, Page finish switch, Remembered finish, Status lamp with words, Live status region, Native email validation with hints, Subscribe event, Debossed stamp, Container query layout, Finish following.

Original composition. The product (Lode), its links, statuses and build are invented. The plate, vents and selector are CSS drawn here, in the kit's tokens; no image. Face: Instrument Sans (SIL OFL 1.1), the kit's own.