NAC v1.3 -- common UI primitives 16 widget families, all driveable through window.NAC

Sixteen primitives, one driver API.

Every widget on this page exposes itself through the same data-nac-* attributes you already know -- so a voice assistant, an RPA bot or an AI agent can drive the lot through window.NAC alone. Open the dev console and type NAC.list() to see the registered manifests; type NAC.system_map() for the navigation graph.

Each card below has a "drive me" button that exercises the widget through the v1.3 driver API, narrating what it did in the events log on the right.

A. Toasts

Transient feedback. Auto-dismiss after a TTL. Driveable via NAC.toast(text, opts).

B. Banner

Persistent feedback at the top of a region. Manual dismiss. data-nac-role="banner".

Maintenance window scheduled for 2026-05-10 02:00 UTC.

C. Toggle / switch

Instant boolean. Distinct from checkbox. data-nac-field-type="toggle".

D. Stepper

Multi-step form progress. NAC.step_next(id) / step_back(id) / step_to(id, n).

1. Start
2. Form
3. Review
4. Submit

E. Tree

Hierarchical view. NAC.tree_expand / _collapse / _select / _path.

  • + docs/
  • js/nac.js
  • runner/nac_runner.py

F. Calendar with events

Month view + 4 events. NAC.calendar_select_event(id).

1
2
3
4
5
6
7
8
10

G. Rich text editor

WYSIWYG. NAC.richtext_format / _insert_link / _insert_mention.

Type something, then format.

H. Tag input

Free input + autocomplete. NAC.add_tag / remove_tag / list_tags.

I. Rating

1..5 stars. data-nac-field-type="rating", fired via NAC.fill.

* * * * *

J. Confirmation dialog

Yes/no interrupting prompt. NAC.confirm(prompt, opts) -> Promise<boolean>.

K. Drawer / bottom-sheet

Slide-out non-blocking panel. NAC.open_drawer / close_drawer / peek_drawer.

L. Pagination (standalone)

Same primitive as v1.1 table pager, here on a card grid. NAC.go_to_page(id, n).

Customer #1
Customer #2
Customer #3
Page 1 of 5

M. Chart

Inline bar chart. Each point is a NAC element. NAC.chart_data(id) / chart_toggle_series.

N. Map

Schematic map with markers + a layer. NAC.map_focus / map_select_marker / map_toggle_layer.

O. Avatar + presence

Per-user presence. State: online | away | busy | offline.

  • A Alice
  • B Bob
  • C Carol
  • D Dan

P. Empty state + skeleton

Distinguish "loading" from "nothing here yet". data-nac-role="empty-state" / "skeleton".

無
No items yet.

NAC events live

Every interaction emits a typed lifecycle event. Watch them flow.