The aGooey UI toolkit

Five hardware-oriented styles. Ring / Seq — the sequencer ring (Seq has flat, square-capped ends and no thumb dot). Synth — flat dished disc + track ring + value arc + pointer tick. Davies — moulded cap with a full tick ring. NxD — the scalloped case that rotates with the value, with a tick ring and bold pointer. Drag any knob up / down.

Ring

Seq · square ends

Synth

Davies

Bob1 face · 0–10 scale + readout

NxD · scalloped

Ring · bipolar

disabled

A second thin arc shows modulation depth from the value; the dot is the live modulated position. SND draws the overlay after any body — built-in styles or custom painters — then the focus ring, so modulated knobs keep one shared look. Drag the knobs — the LFO keeps riding the new value.

Ring · depth +0.30

Davies · depth −0.25

custom painter + mod

Randomise fences: every control carries an independent {lo, hi, locked} window — an arc with two separately grabbable end dots over knobs, an index bracket under combos, and a padlock when locked out of RND. Draw + hit-test live in SND; the overlay mode and drag state stay with the caller. Drag an end dot (up / down on the knob, along the bracket on the combo) — click without dragging to lock.

knob window · Seq ring

combo bracket

Channel fader — centre rail, accent fill below the cap, cap brightens while grabbed. Drag a cap up / down — hold ⇧ Shift for 10× fine.

Sliding switch; the track lerps to the accent as the nub travels. Click to flip.

The flat control button — SND's button for text labels, tabs and menu actions. The accent underline marks the selected one. Shown across its states:

Outline buttons are the quiet option: no fill and no resting border by default, with fill, text and border colours selectable per state.

The building block of a transport bar: the outline-button chrome with a crisp vector transport glyph (drawn, not a font), picked by intent (Icon::Record, Play, Stop, Loop). The engaged fill marks the state — blue for play/cycle, and record goes red, its ring filling to a disc while armed. Fires on mouse-down for no-latency feel. Hover them.

A pill group of mutually exclusive options — mono/stereo, filter slope, A/B. One selection; Left/Right arrows move it when focused; equal-width segments sized to the widest label. Click a segment.

3 options

A / B

disabled

Segmented with vector glyph keys instead of text — the synth oscillator-wave and LFO-shape selectors, drawn 1:1 from the Bob1 glyph geometry. Same binding and interaction as segmented; the speaker key is a plain transport toggle for the LFO audio-rate switch. Click a wave.

osc waves

LFO shapes + S&H

audio-rate key

The Bob1 ProphetSwitch: silkscreen label over a red lamp over the meaty tactile key. The lamp carries the state — the key only shows the press. Mini and full are the same widget at different sizes. Click the key.

full · on

mini · off

Bob1's labelled option columns (filter MODEL / MODE / POLES): every option printed with a mini lamp, the active one lit red, radio-select. One column up to five options, two above. The binding is the selected index, exactly segmented's. Click an option.

one column

two columns

The Bob1 nameplate [-] value [+] key pair (BEND, VOICES). Click a key or use Left/Right when focused; steps by the binding step and clamps to the range. Click - or +.

BEND · 12 st

A multi-state value button: click cycles the enum in place, right-click steps back — one control, no dropdown. Pips mark the position in the cycle, and the button is sized to the widest option so nothing jumps. Click / right-click.

filter slope

rate multiplier

Generation/action buttons can carry a subtle live sweep, while custom painter hooks let a consumer draw a knob, button, XY-pad, or pattern-grid-cell body without owning hit-testing, focus, keyboard, value mapping, or accessibility. SND draws the required focus treatment after the painter runs. The gradient knob and velocity cells below also use the shared drawGradientArc / drawGradientRect primitives.

GENERATE

animatedButton

RENDER

custom ButtonPainter

custom KnobPainter

gradient-arc painter

PatternCellPainter · velocity

XYPadPainter · puck map

The other button family — a hardware key for icon & tool buttons (transport, momentary/toggle tools), not text. Light-grey raised, presses into a soft off-white inset with the glyph lit in the accent. Press one. Text buttons stay on the flat style above — tactile isn't every button.

The tactile key with an integrated status ring — record-arm, input monitor, transport latches. Latched buttons hold the inset face with the ring lit in the accent; arm pulses while pending. Click to latch / release.

record · latched

arm · blinking

monitor · off

Status lamp with a soft bloom when lit. Click to toggle.

signal

on

off

Peak meter with the classic green / amber / red hardware zones and a peak-hold line. Vertical and horizontal — this is the one that runs on its own, on simulated program material.

L

R

bus · horizontal

Small labels: a tinted pill and a dim caption with a trailing rule.

aGooey VST3 MIDI

Selectable row — the accent rail and tint mark the current selection while text stays aligned. Click a row.

Compact readouts and horizontal drag values share the same value-row paint in immediate and retained modes. Drag numbers keep model state caller-owned; SND owns the row body, focus and fine-drag affordance.

Step sequencer grid — lit cells in the accent, a checkered off-state on the beat. Click cells to toggle steps.

Two-axis control with a cross-hair and a lit handle. Drag anywhere in the pad.

Breakpoint curves use the shared envelope painter. In retained mode this is the shape of a Canvas-backed editor: the node owns layout, focus, hit and semantic space while custom drawing owns the pixels. Drag a point.

Playable range — white and black keys light in the accent. Click / drag across the keys to play.

Retained audio-editor primitives for sequencers and table editors: shared matrix geometry, continuous bars, gate cells, route cells, band spans, playhead, selections, drag preview, help labels, and pass-through ghost fences. Drag rows in the matrix.

Measured geometry

One object returns row, gutter, cell, and playhead rects for paint, hit-test, and semantics.

Row policies

Continuous bars interpolate across skipped columns; gate and route rows drag-paint.

Overlays

GhostFence, Help, Playhead, Selection, and DragPreview draw above rows without stealing input by default.

aGooey is the retained UI path: stable nodes, layout, focus, events, dirty state, semantic snapshots, and renderer-neutral painting. The C++ namespace remains snd::ui::retained; the public drawing seam is snd::ui::draw::Surface.

Compact action menus with icons, checked rows, disabled rows, separators, nested submenus, typeahead, keyboard focus, Escape/click-outside close, and anchored context popups. Dropdowns expose the current value and can inherit an outline-button face style.

Retained blocking overlays with dim, blank, or no visual backdrop, centred dialog chrome or custom panel content, real button children, Escape policy, Tab focus trap, inert background input, and Dialog/Alert semantics.

Retained graph surfaces own pan/zoom, grid/backdrop, selection, cables, module chrome, ports, hit regions, anchored context menus, keyboard traversal, and virtual semantic children. The caller owns graph data and mutations.

Neo skin · grid backdrop · cable preview

Aurora backdrop · selected module · ports

Pure retained text editing: caret, selection, keyboard editing, semantic value text, and caller-owned strings. Value fields use the same compact row language as drag numbers when editing numeric values.

Retained layout primitives for real tool surfaces: scroll views keep content clipped with semantic children intact, and splitters bind to caller-owned proportions so panes rebuild from app state.

Every embedded icon selector from snd/icons.h. Material glyphs work inline with ICON_MD_*; Lucide glyphs use ICON_LC_* with iconFontLucide(). Search by selector, display name, or codepoint.

SND vector icon buttons · snd::ui::Icon

Icon::Play

Icon::Stop

Icon::Record

Icon::SkipToStart

Icon::SkipToEnd

Icon::Loop

Icon::Waveform

Icon::Spectrum

Icon::Follow

All Material Lucide

Show more Show all icons