Nsys Neura - UI components for the Nsys platform

A modern, dependency-light UI component library for the Nsys platform. Successor to AUI 5.4, built to drop into the existing server-rendered (Velocity + jQuery) stack without rewriting the frontend.

About the name

Neura takes its name from the Greek neûra (νεῦρα), "sinews" or "nerves" - the threads that connect a body. The library plays the same role: small, focused UI parts that wire together a coherent interface from server-rendered fragments.

Pronunciation: NEW-rə (IPA /ˈnjʊərə/), like "neural" without the L. Two syllables, stress on the first. The name pairs phonetically with Nsys (the platform) and the predecessor AUI: three short brandable words sharing a vowel-forward sound.

Who Neura is for

The docs and component surface are designed for two audiences in parallel:

Human developers

Frontend and full-stack engineers working on Nsys, or on any Velocity / jQuery / Java-rendered app that wants a modern UI without a React or Vue rewrite. Each component page has a Summary, When to use, live Examples, copy-paste HTML, a CSS classes table, the JavaScript API, and an AUI compatibility note.

AI coding agents

Claude Code, Codex, Gemini, and similar coding assistants use this sandbox as their reference surface when generating code that targets Neura. A machine-readable llms.txt at the sandbox root indexes every component's markup contract, JS API, and migration map from AJS.* / aui-* to Neura.* / neura-*.

Both audiences share the same rule: always use Neura.* and neura-* for new code. The AJS.* JavaScript API and aui-* CSS classes exist only for back-compat with pre-existing Nsys code, are documented under AUI compatibility, and will drop at 2.0. The reasoning behind the library's look and rigor is written down in Design principles and How it's built.

Components

Pick a component from the sidebar, or jump straight in:

Avatars
User and project images in seven sizes.
Badges
Numeric counters for buttons, menus, and the header.
Banners
Full-width page-top bars for system-wide state: announcement, warning, error.
Buttons
Standard, primary, link, subtle, compact, disabled, pressed, dropdown, split.
Date picker
Calendar popover anchored to a text input. ISO format, Monday- or Sunday-first.
Dialogs
Confirm, strict modal, header actions, footer hint, sidebar navigation.
Dropdowns
Buttons, sections, checkbox/radio menus, submenus, kitchen-sink.
Expander
Collapsible content behind a "Read more" trigger.
Flags
Auto-dismissing toast notifications, stacked top-right.
Forms
Inputs, dropdowns, multi-select, textarea, radios, checkboxes, file, date picker.
Header
Application header with app-switcher, primary nav, quicksearch, help and user menus.
Icons
The 24-glyph icon set, picked up from currentColor.
Inline dialog
Popovers anchored to a trigger: info, list content, form, multiple-in-row.
Labels
Freeform chip tags: plain, closeable, split.
Lozenges
Status chips: solid by default, subtle modifier, five semantic colors.
Messages
Generic, warning, error, success, hint, closeable, no-title.
Navigation
Navgroups, section headings, breadcrumbs, pagination.
Page
Entire-page skeleton: header, content, footer.
Page header
Title band with avatar and actions; hero + marketing variants.
Page layout
Page panel with nav/content/sidebar cells, width modes, groups.
Panels
Generic bordered content card.
Progress
Wizard step tracker + determinate/indeterminate bar.
Quicksearch
Pill search input for the header.
RESTful table
CRUD table bound to a REST endpoint: inline edit, create row, delete.
Select
Searchable single/multi combobox over the native <select>, with pills.
Shortcuts
Keyboard shortcuts: sequences, modifier combos, input-field guards.
Sidebar
Drag- and keyboard-resizable panel with persisted width.
Spinner
CSS loading indicator in three sizes, inheriting currentColor.
Tables
Interactive sortable tables with lozenge cells.
Tabs
Horizontal, vertical, disabled.
Toolbars
Action bars with primary/secondary groups.
Tooltip
Hover + keyboard-focus tooltips with ARIA wiring.
Typography
Element-level type system: heading scale, rhythm, inline semantics.
Utilities
Hidden, assistive, clearfix, and shadow helper classes.
Themes
Built-in brand palettes (indigo, legacy, teal, violet, graphite) via data-neura-theme.
CDN
Reference the dist files from neura.nsys.org, or download the flatpack zip.
AUI compatibility
Drop-in test using only legacy aui-* classes and global AJS.

Component matrix

The full component surface at a glance. Parity means the component ports AUI 5.4 and its legacy aui-* / AJS.* spellings keep working through the compatibility shim; Neura-native means the component has no AUI equivalent and no legacy spelling. Auto-init is the selector wired up on DOMContentLoaded; "imperative" components are created by calling their API.

Component	Kind	JS API	Auto-init	AUI 5.4	Since
Avatars	CSS	—	—	Parity (`aui-avatar`)	0.1.0
Badges	CSS	—	—	Parity (`aui-badge`)	0.1.0
Banners	CSS + JS	`Neura.banner`	`.neura-banner` (close wiring)	Neura-native	0.2.0
Buttons	CSS	—	—	Parity (`aui-button`)	0.1.0
Date picker	CSS + JS	`Neura.datePicker` / `dateRange`	`.neura-date-picker-input`	Parity (`AJS.DatePicker`; own calendar DOM)	0.1.0
Dialogs	CSS + JS	`Neura.dialog2`	imperative	Parity (`AJS.dialog2` + legacy `AJS.Dialog` v1)	0.1.0
Dropdowns	CSS + JS	`Neura.dropdown2`	`.neura-dropdown2-trigger[aria-controls]`	Parity (`AJS.dropdown2` + v1 `dropDown`)	0.1.0
Expander	CSS + JS	`Neura.expander`	`.neura-expander-trigger[aria-controls]`	Parity (`AJS.expander`)	0.1.0
Flags	CSS + JS	`Neura.flag`	imperative (dynamic only)	Neura-native	0.2.0
Forms	CSS	—	—	Parity (`form.aui`)	0.1.0
Header	CSS + JS	`Neura.responsiveHeader`	`.neura-header[data-neura-responsive]`	Parity (`AJS.responsiveheader`)	0.1.0
Icons	CSS	—	—	Parity (`aui-iconfont-*` mapped to mask glyphs)	0.1.0
Inline dialog	CSS + JS	`Neura.inlineDialog`	`.neura-inline-dialog-trigger[aria-controls]`	Parity (`AJS.InlineDialog`)	0.1.0
Labels	CSS	—	—	Parity (`aui-label`)	0.1.0
Lozenges	CSS	—	—	Parity (`aui-lozenge`)	0.1.0
Messages	CSS + JS	`Neura.message` + `.create`	`.neura-message` (close wiring)	Parity (`AJS.messages.*`)	0.1.0 ¹
Navigation	CSS	—	—	Parity (`aui-navgroup`, breadcrumbs, pagination)	0.1.0
Page	CSS	—	—	Parity (page skeleton + footer)	0.1.0
Page header	CSS	—	—	Parity (`aui-page-header`)	0.1.0
Page layout	CSS	—	—	Parity (`aui-page-panel`)	0.1.0
Panels	CSS	—	—	Neura-native (`.aui-panel` deliberately not aliased; AUI 5.4 gave it no chrome)	0.1.0
Progress	CSS + JS	`Neura.progress`	imperative	Parity (`AJS.progressBars.*`)	0.1.0 ¹
Quicksearch	CSS	—	—	Parity (`aui-quicksearch`)	0.1.0
RESTful table	CSS + JS	`Neura.restfulTable`	imperative	Parity (`AJS.RestfulTable`; AUI-experimental)	0.1.0
Select	CSS + JS	`Neura.select`	imperative	Parity (`auiSelect2`; AUI-experimental)	0.1.0
Shortcuts	JS	`Neura.shortcuts`	imperative	Parity (`AJS.whenIType`)	0.1.0
Sidebar	CSS + JS	`Neura.sidebar`	imperative	Parity (`$.fn.sidebar`; AUI-experimental)	0.1.0
Spinner	CSS + JS	`Neura.spinner` / `spinnerStop`	imperative	Parity (`$.fn.spin`)	0.1.0
Tables	CSS + JS	`Neura.sortableTable`	`table.neura-table-sortable`	Parity (`AJS.tablessortable`)	0.1.0 ¹
Tabs	CSS + JS	`Neura.tabs`	`.neura-tabs:not(.neura-tabs-disabled)`	Parity (`AJS.tabs`)	0.1.0
Toolbars	CSS	—	—	Parity (`aui-toolbar2`)	0.1.0
Tooltip	CSS + JS	`Neura.tooltip`	`[data-neura-tooltip]`	Parity (`$.fn.tooltip`)	0.1.0
Typography	CSS	—	—	Parity (element-level, no classes)	0.1.0
Utilities	CSS	—	—	Parity (legacy `.hidden` / `.assistive`)	0.1.0

¹ Styling and behavior since 0.1.0; the Neura-native JS API (Neura.message.create, Neura.progress, Neura.sortableTable) was promoted from the AUI shim in 0.2.0.

Beyond components, the library-level APIs are Neura.theme (Theming) and Neura.i18n (i18n).