The component library

@relatude/ui is the visual API for plugins. Its components follow the interface's theme and skin, and they come from the interface through the import map, so they add nothing to a plugin's size.

Component	For
`Blade`	a blade's frame: `title`, `subtitle`, `icon`, `onClose`, `toolbar`, `footer`, `busy`, and `pad={false}` for a list from edge to edge
`Button`, `IconButton`	`variant` (`default`, `primary`, `ghost`, `danger`), `size` (`md`, `sm`), `icon`; an icon button needs a `label`
`Field`	a `label`, `help` and `error` around an input
`TextInput`, `Textarea`, `Select`, `Switch`, `TagInput`	inputs; `mono` for text such as code
`DateTimeInput`	a day (`mode="date"`, `"YYYY-MM-DD"`) or a moment (`mode="datetime"`, ISO 8601 in UTC, shown in the viewer's time zone): `value`, `onChange` (null when cleared), `min`, `max`, `label`, `locale`, `timeStep`
`Calendar`	a month to choose a day from: `value` and `onSelect` as `{ y, m, d }`, `min`, `max`, `footer`; `parseDateText` and `parseTime` read what people type
`Menu`	a drop-down opened by its `button`, with `items` of `{ id, label, icon?, danger?, disabled?, onSelect }` and `'separator'`
`Dialog`	a modal; `cms.dialogs` covers confirming and asking for text
`Tabs`, `Table`, `Card`	tabs (each may have a `color` of the palette), a table in the interface's style, a card
`SwatchPicker`	a colour of the palette, or none: `value`, `onChange`
`Badge`, `Spinner`, `ProgressBar`, `EmptyState`, `Kbd`, `Avatar`	a status, loading, progress, nothing to show, a key, a person
`Icon`, `cx`	an icon by name or from SVG source, and joining class names

iconNames lists the icons, such as search, plus, edit, trash, package, file-text, image, globe, calendar, user and sliders. An unknown name draws alert.

Style what the components do not cover with the design tokens, CSS variables that follow the theme and the skin. skinTokens lists them all; these are the ones a plugin needs most:

Token	For
`--r-bg`, `--r-layer`, `--r-surface`, `--r-surface-2`	grounds: the window, a blade, a card on it, a step from a card
`--r-ink`, `--r-muted`, `--r-faint`	text, from strongest to faintest
`--r-line`	lines and frames
`--r-accent`, `--r-danger`, `--r-ok`, `--r-warn`	the accent and status colours, each with a `-soft` ground
`--r-radius`, `--r-radius-sm`, `--r-shadow-xs`	corners and a light shadow
`--r-font-mono`	code
`--r-dur`, `--r-ease`	motion
`--r-text-scale`	the skin's text size: write font sizes as `calc(13px * var(--r-text-scale))`

A plugin is one JavaScript file, and a stylesheet the build writes beside it is not loaded. Keep styles inline, or use the components.

The palette (swatchNames) is ten colours for telling things apart, each with a light and a dark variant. An element with data-swatch="teal" sets --sw (the colour, for an icon or a bar), --sw-ink (text on its ground), --sw-line (a frame) and --sw-soft (its ground) for itself and what is in it, so this badge reads well in both themes:

<span data-swatch="teal" style={{ background: 'var(--sw-soft)', color: 'var(--sw-ink)', border: '1px solid var(--sw-line)' }}>
  New
</span>