Variable PACKAGE_NAMEConst

@fourjs/ui — retained-mode UI at §113a's MVP tier (§73–§75).

Ten controls over one base class: Panel (container + §74 layout), Label (text measured with @fourjs/text), Button (§72 click → activation), the three checkables — Toggle, Checkbox, and RadioButton (exclusive by group name) — Slider (pointer drag

• §75 arrow keys), ProgressIndicator, ImageWidget, and CanvasViewWidget (§77a's skin-drawn canvas view; RFC 0004, 2026-08-29), plus §75's keyboard navigation over all of them (installKeyboardTraversal, keyboardFocusTarget) and the opt-in hidden DOM accessibility mirror (installAccessibilityMirror). Everything else §73–§75 names is staged with a dated note in UI_STAGED — read that array before assuming a control exists.

const root = new Panel({ layout: { type: "flex", direction: "column", gap: 12, padding: 20 } });
const start = new Button({ height: 40, accessibility: { role: "button", label: "Start" } });
start.add(new Label({ text: "Start", atlas: buildGlyphAtlas(), size: 16 }));
root.add(start);
root.layout();

const candidates: Pickable[] = [];
const input = new PointerInput(canvas, {
  camera,
  pickables: () => collectPickables(root, candidates),   // §71
});
new KeyboardInput(window, { focusTarget: keyboardFocusTarget(root) });  // §75
installKeyboardTraversal(root);                                         // Tab
installAccessibilityMirror(root, { document });                         // §75
start.on("uiactivate", () => simulation.start());   // click, Enter, or Space
Copy

Widgets do not draw themselves. The frozen dependency matrix gives this package core, math, scene, input, and text — no render, no materials, no geometry — so a widget owns hierarchy, size, hit area, and state, and the application supplies the pixels through a WidgetSkin. widget.ts's header is the full argument.