Primitives
UI components, canvas drawing, focus, accessibility, and animation.
Source: examples/primitives/.
Run this page’s package-local commands from examples/primitives/, unless noted otherwise.
examples/primitives in the web runtime. Press ▶ in the bar under the plugin to hear it.Open full pageSourceEdit code opens its UI files under the plugin: change them and the plugin runs your version.
A tour of @soundor/react's UI primitives, one card each, in a plugin built
for both runtimes. The audio is basic's gain; the UI is the point.
soundor.config.ts identity, the `gain` parameter, both runtimes
src/main.tsx mounts src/App.tsx
src/App.tsx the tour (@soundor/react)
runtimes/juce/ JUCE (C++): applies `gain`
runtimes/web/ Web (TypeScript): applies `gain` with a GainNode| Card | Shows |
|---|---|
| Coordinates | locationX/locationY (in the target) next to pageX/pageY (in the view) |
| zIndex | Raising one of two overlapping siblings, for drawing and hit testing |
| Context menu | onContextMenu and a Portal menu at the pointer |
| Long press, tooltip | onLongPress, the focused state, a tooltip placed with getBoundingClientRect() |
| Dropdown | Menus opened from a clipped ScrollView, shown in the overlay layer |
| Portal.Host | Content rendered into a custom host, clipped where the host is |
| Modal | A dimmed, focus-trapping dialog with a dropdown in it and a nested dialog; Escape or the backdrop closes |
| FocusScope | Tab trapped in two fields, and released |
In the browser
pnpm dev:web # soundor dev web: the host at http://localhost:5173
pnpm build:web # soundor build web: a static site in .soundor/dist/webAs a JUCE plugin
pnpm dev # soundor dev juce: a debug build, the Standalone launched
pnpm build:juce # soundor build juce: VST3 and Standalone in .soundor/dist/juceJUCE must be installed (see soundor doctor).
Tests
pnpm test
pnpm typecheck
pnpm build:webBehavioral tests render the real App with @soundor/testing-library/react,
semantic queries, and userEvent.setup(). The four testing dependencies are
explicitly declared. These run against the simulated runtime, with no browser or
native engine. See the Testing guide. Root repository
checks exclude examples; run these commands explicitly.