Preset Browser
preset-browserControlsBrowse, filter, tag and save a whole preset library inside the face.
$ pnpm dlx shadcn@latest add @pluginui/core-preset-browserInstall
Copies the source into your project. Anything it depends on comes with it. Run this in your React project with shadcn initialized; no registry configuration is needed.
Pulls in
Install using the registry URL
$ pnpm dlx shadcn@latest add https://pluginui.com/r/core-preset-browser.jsonUsage
Connect the documented props to your application or host.
import { PresetLibrarySelector } from "@/components/ui/preset-library-selector"
// In a face header. The browser and save dialog cover the nearest
// [data-preset-overlay-container] or [data-module-face-surface].
<PresetLibrarySelector library={face.presetLibrary} variant="panel" />
// Or compose the parts around one controller:
const library = usePresetLibrary(face.presetLibrary)
<PresetBrowser library={face.presetLibrary} controller={library} />
<PresetSaveDialog library={face.presetLibrary} open={library.saveOpen} onOpenChange={library.setSaveOpen} />About Preset Browser
The views of the unified preset library. A host builds one AudioModuleFacePresetLibrary (factory programs, every sampler bank, the viewer's own and community presets, a fixed tag vocabulary, activeId and dirty) and every view sends requests back to it. usePresetLibrary is the headless controller; PresetLibrarySelector is the compact selector with a modified marker, Save and Browse; PresetBrowser is an overlay over the face with a groups column (All, Favorites, User, then groups with counts), a searchable, windowed Name / group / secondary / tags list with favorite hearts, the TagBrowser as its tags column, and Save, Delete, previous/next and close; PresetSaveDialog names the sound, picks up to eight vocabulary tags, offers Overwrite for the viewer's own preset and shows the host's answer inline. Below 640 px the side columns become drawers and the active filters show as removable chips. The demo library has 120 presets in six groups in the sampler's shape.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| library | AudioModuleFacePresetLibrary | — | Host-built: entries, groups, tagVocabulary, activeId, dirty, capabilities, select, and optional save / delete / toggleFavorite, groupLabel, secondaryLabel. Every callback is a request. |
| controller | PresetLibraryController | — | From usePresetLibrary, so selector and browser filter and step over the same list. |
| browse / browseThreshold | boolean / number | auto / 30 | Browse is offered when capabilities.browse is set or the library is longer than the threshold; browse forces it. |
| persistKey | string | — | Remember the viewer's scope and tags (never the query) in localStorage; storage that throws is ignored. |
| container | HTMLElement | — | Render the overlays here instead of the nearest face container. Without any, they cover the viewport. |
| layout / narrowWidth | "auto" | "wide" | "narrow" / number | "auto" / 640 | Browser layout from its own width. |
| variant | "quiet" | "panel" | "glass" | "quiet" | The PresetSelector skins. |
Interaction
- Keyboard Arrows, PageUp/PageDown and Home/End move the highlighted row; Enter selects and closes; Space selects and stays; F toggles a favorite; / focuses search; Escape clears the search, then closes.
- Pointer A click selects and keeps the browser open; a double click selects and closes; the heart toggles a favorite without selecting.
- Delete Only the active preset, only when it is not read-only and the host can delete; the first press arms, the second deletes.