ui_kit library

The UI kit: DOM helpers, form widgets, toasts and modals.

Small, framework-free primitives over package:web — enough to build a real app without a framework, and shared so that two OmnyGrid web apps look and behave like one product.

These widgets are styled by CSS classes, not inline styles, so a consuming app must ship the stylesheet that defines them (.primary, .field, .banner, .badge, .modal, .toast, …). Install it with:

dart run omnyshell_web:copy_assets

which copies kit.css (tokens, base, widgets, modal, toasts) and terminal.css (terminal chrome, key bar, fullscreen, keyboard insets) into your web/. Without them the widgets render unstyled.

Classes

A simple modal dialog appended to document.body, dismissed by the close button, the backdrop, or Escape.
Toasts
Transient notifications shown in the bottom-right #toasts region.

Functions

aiSettingsSection(AiSettingsController ai) → List<HTMLElement>
The AI-agent settings controls, bound to an AiSettingsController.
button(String label, {bool primary = false, bool loading = false, bool disabled = false, String? className, String? ariaLabel, void onClick()?}) → HTMLButtonElement
A primary or secondary button. When loading it shows a spinner and is disabled.
checkbox(String label, {required String id, bool checked = false}) → ({HTMLInputElement box, HTMLElement root})
A checkbox with a label.
clearChildren(Element parent) → void
Removes all children of parent.
div({String? classes, String? text, List<Node> children = const []}) → HTMLElement
A <div> with optional classes and children.
el(String tag, {String? classes, String? text, String? id, String? role, String? ariaLabel, Map<String, String>? attrs, List<Node> children = const [], void onClick(Event event)?}) → HTMLElement
Ergonomic DOM construction over package:web.
emptyState(String message) → HTMLElement
A centered empty-state message.
errorBanner(AppError error) → HTMLElement
An error banner rendering error's message and optional recovery hint.
field(String label, HTMLElement input, {String? hint}) → HTMLElement
A labelled form field wrapping input, with an optional hint.
input({required String id, String type = 'text', String? value, String? placeholder, String? autocomplete, String? autocapitalize, void onEnter()?}) → HTMLInputElement
A text/password/url/number input. Returns the element so callers can read .value.
loadingRow([String? label]) → HTMLElement
A spinner row with an optional label, for inline loading states.
mount(Element parent, Node child) → void
Replaces the entire content of parent with child.
on(EventTarget target, String event, void handler(Event event)) → void Function()
Attaches handler to event on target, returning a disposer that detaches it (handy for components that re-render and must avoid listener leaks).
radioGroup({required String name, required List<({String label, String value})> options, required String selected, required void onChange(String value), bool inline = false, String? ariaLabel}) → HTMLElement
A radio-button group. Each option is a (value, label) pair; selected is the initially-checked value and onChange fires with the newly-picked value. Set inline to lay the options out in a row (e.g. a segmented control), and ariaLabel to name the group for assistive tech.
statusBadge({required bool online}) → HTMLElement
A small online/offline status pill.
textNode(String value) → Text
A text node, for mixing raw strings into children lists.