@bitskiff/ui-kit

Framework-free custom elements for the phone page: joystick, dpad, button, slider, text, readout, status, banner and a code scanner. No SDK, no framework—an integrator's phone page composes these into markup and sends their events on a channel of its own: @bitskiff/client's send is on a channel, client.channel('fire').send(...), never on the client.

Importing the package registers nothing. Each element has its own define*(), and there is a defineAll() that registers every one; either way, registration is guarded, so calling one twice is harmless.

Install

npm install @bitskiff/ui-kit

Quickstart

import { defineButton } from '@bitskiff/ui-kit';

defineButton();

<bitskiff-button action="fire" label="Fire"></bitskiff-button>

import { BitskiffClient } from '@bitskiff/client';

const client = new BitskiffClient();                 // the seat your page already took
const fire = client.channel('fire');                 // the channel name is yours
const el = document.querySelector('bitskiff-button')!;

el.addEventListener('mrc-press', () => fire.send('down'));
el.addEventListener('mrc-release', () => fire.send('up'));

Every other element follows the same shape: an attribute-driven custom element, and mrc-* events a page listens for and turns into client.channel(name).send(...) calls—this package never imports @bitskiff/client and never sends anything itself.

Subpaths

Each element also has its own subpath (./joystick, ./dpad, ./button, ./slider, ./text, ./readout, ./status, ./banner), so a page that wants one control does not import the rest.

Everything else

Each element documents itself. The doc comment above its class lists the attributes it takes, the events it emits, and the accessibility and touch rules it follows; the shipped package carries those comments, so go-to-definition in your editor is the reference. The --bitskiff-* theme tokens every element reads are documented the same way, beside the code that applies them.