Cerb UI is the component library Cerb's interface is built from. It gives Cerb full control of its own interface, and makes it straightforward for widgets and plugins to add visual elements with consistent styling, light and dark mode support, and interactivity.

It replaced jQuery UI, Ace.js, ace-diff, D3, c3, dagre-d3, TopoJSON, miniColors, and async.js.

• How it's built
• Component catalog
  • Overlays and layout
  • Drag and drop
  • Inputs and choosers
  • Editors
  • Charts and visualization
  • Node graphs
  • AI agents
  • Builders
  • Utility modules
• Shared architecture
  • Editors – CerbUI.editorCore
  • Charts – CerbUI.Chart
  • Gantt – CerbUI.Gantt
  • Choosers – CerbUI.chooserCore
• CSS utilities
• Retired dependencies

How it's built

Cerb UI is plain JavaScript – no bundler, no package.json, no node_modules. Components attach to a shared CerbUI global.

The sources live in cerberusweb.core/resources/js/cerb-ui/.

When DEVELOPMENT_MODE is enabled, the individual source files load separately so you can edit and reload without a build step. In production, the single minified cerb-ui.js is served.

Load order matters: _core.js is first, and a component that depends on another (an editor on editor-core, a chart on chart.js) loads after it.

Component catalog

Overlays and layout

Drag and drop

Inputs and choosers

Server-backed choosers search large sets; local pickers work from a fixed option set or freeform text.

Editors

Charts and visualization

Node graphs

CerbUI.NodeEditor is a visual node canvas – used for the automation control-flow graph – built from NodeCanvas, Node, NodeEdge, NodeGraph, and nodeTypes.

AI agents

Builders

CerbUI.FormBuilder, CerbUI.SheetBuilder, and CerbUI.IconBuilder back the visual builders in Setup » Developers.

These three and CerbUI.NodeEditor are not in the cerb-ui.js bundle. They're compositions used on a handful of screens, so a page that needs one loads it itself rather than every page carrying it:

Devblocks.loadResources({
  js: ['/resource/cerberusweb.core/js/cerb-ui/sheet-builder.js?v=' + APP_BUILD]
}, function() {
  if(!window.CerbUI || !CerbUI.SheetBuilder)
    return console.error('CerbUI.SheetBuilder failed to load.');

  // construct here
});

The primitives they're built from – Node, NodeCanvas, NodeEdge, NodeGraph, nodeTypes, and AgentPane – stay in the bundle, so only the composition is deferred.

Utility modules

Shared architecture

Three families share a core rather than reimplementing the hard parts. This is why the library stays small.

Editors – CerbUI.editorCore

Every editor is a transparent <textarea> over a colored mirror <div>. editorCore owns everything language-independent: overlay rendering, caret pixel measurement, scroll synchronization, fuzzy match and filter, and the suggestion menu lifecycle.

Each editor owns only what's genuinely its own – its tokenizer, its scope or key-path computation, its keyboard model (does Enter submit or insert a newline?), and its field source.

Because highlighting is a mirror, glyph advances must match the textarea exactly or the caret drifts. That's why Markdown highlighting is color-only: **bold** is colored, not rendered bold.

Charts – CerbUI.Chart

The base class owns lifecycle (one instance per element, a ResizeObserver re-render, destroy()), color resolution, a single shared point-mode tooltip across all charts, bubbling cerb-ui-chart:* events, and the drill-through to Cerb search.

Concrete charts implement render() and nothing else. Drill-through being shared means clicking a mark in any chart runs a search, instead of each widget template re-implementing it.

Gantt – CerbUI.Gantt

A row is a label plus any number of spans, and rows covering the same range overlap on screen. That overlap is the point: a region two rows share is drawn as the place they meet, rather than invented as a third series that would imply a third kind of thing.

Span ends work two ways, and getting this wrong is the easy mistake:

step also governs tick generation. Without it the generic tick generator labels positions that don't exist – on a three-slot pool it offers a slot 1.5.

Use segment when a row's axis counts units of capacity – slots in a pool – rather than measuring a duration. Spans stay whole in the data either way: a hover reads back the span the caller supplied, not a unit number, so a caller can keep emitting compressed runs.

A time axis chooses its own tick step, from one second to one week, and aligns from local midnight. Aligning from the epoch lands on the hour only in whole-hour zones, and would label every tick at :30 for anyone on a half-hour offset.

Choosers – CerbUI.chooserCore

Shared behavior for the chooser and picker family: suggestion menus, keyboard handling, and selection rendering.

CSS utilities

Colors are theme tokens, so dark mode is automatic for anything built from them.

Retired dependencies

If a third-party plugin calls any of the following, it needs updating to the Cerb UI equivalent: