Brazen Framework - View Layer

View layer for the Brazen user scripts framework

Verzia zo dňa 14.08.2026. Pozri najnovšiu verziu.

Tento skript by nemal byť nainštalovaný priamo. Je to knižnica pre ďalšie skripty, ktorú by mali používať cez meta príkaz // @require https://update.sleazyfork.org/scripts/416104/1901970/Brazen%20Framework%20-%20View%20Layer.js

Spýtať sa otázku, uverejniť recenziu, alebo nahlásiť skript.

Autor: brazenvoid
Verzia: 5.1.0
Vytvorené: 14.11.2020
Aktualizované: 14.08.2026
Veľkosť: 248,0 KB
Licencia: GPL-3.0-only

Brazen Framework — View Layer (developer guide)

Shared settings panel UI: #bv-ui, tabs, form controls, modals, bookmarks panel, dock slide panels (including Active Hide Rules), and tag-sidebar enhancements. Apps and other framework modules use this as a UI “toolbox” to build a consistent panel without per-site UI code. All factories return HTMLElement (native DOM) — use Utilities.makeEl / Utilities.appendChildren / Utilities.setHidden (.bv-hidden) rather than jQuery.

Greasy Fork: View Layer · Requires: Utilities · Used by: Configuration Manager, Framework core

Styles ship inlined at runtime via GM_addStyle when this module loads. Requires @grant GM_addStyle on this script or the app.

When to use / when not to use

Use this module when you need to build (or extend) the Brazen settings panel: layout sections, tabs, form groups, action rows, modals, dock slide panels, or the bookmarks UI.
Don’t use this module to persist settings — that’s the Configuration Manager.
Don’t build custom DOM for settings fields unless you have to. Prefer defining fields in Configuration Manager and mounting them via createElement(...).

Quick start

In most apps you don’t “build the panel from scratch”; the framework embeds #bv-ui, and you mount your fields and extra widgets into tab panels.

// In your app (extending BrazenFramework), you compose nodes during the framework UI build
// (e.g. via _onBeforeUIBuild / _onAfterUIBuild):
let filtersPanel = this._uiGen.createTabPanel('Filters', true)
Utilities.appendChildren(filtersPanel, [
  this._configurationManager.createElement('Tag Blacklist'),
])
let downloadsPanel = this._uiGen.createTabPanel('Downloads')
this._userInterface = [
  this._uiGen.createTabsSection(['Filters', 'Downloads'], [
    filtersPanel,
    downloadsPanel,
  ]),
  this._uiGen.createBottomSection([
    this._createSettingsFormActions(),
  ]),
]

Constructor

const uiGen = new BrazenViewLayer(scriptPrefix)

scriptPrefix feeds SelectorGenerator for prefixed element ids.

Features

Panel lifecycle and embed behavior

What it does: Creates the root panel (#bv-ui) and the resize handle used by the framework’s _embedUI step. The button dock (Framework configureDock) is the only way to open the panel.

How it behaves (developer-relevant):

The panel is hidden by default, and revealed via the dock Toggle Main UI control (dock slide transforms).
Optional auto-hide: when the Framework Auto-Hide Settings Panel Behaviours flag is on, #bv-ui closes 1 s after pointer leave (unless resizing or a review slide panel is visible).
The resize handle enforces a minimum width (150px).

APIs:

Factory / method	Role
`createSettingsSection()`	Root `#bv-ui` section with `bv-dock-panel-hidden` (dock hide class); includes `#bv-resizer`; tagged `bv-dock-slide-panel`
`getSelectedSection()`	Returns the container from `createContainer()` / `createSettingsSection()`
`isSettingsPaneBeingResized()`	`true` while `#bv-resizer` drag is active
`createResizer()`	Width drag handle (min width 150px); clears resize flag on window `mouseup`

Framework _embedUI:

Requires configureDock(); appends panel + dock rail to body.
When Auto-Hide Settings Panel is enabled in Behaviours, mouseleave schedules a 1 s hide via _hideMainPanel; re-entering settings or a visible review panel cancels it (unless resizing).

userScript on #bv-ui: Optional app reference for widgets that need the host instance (getSelectedSection().userScript = this in _onAfterUIBuild). Tab buttons only switch visible panels — they do not call updateInterface() (that would discard unsaved edits).

Layout factories (sections, titles, separators)

What it does: Provides simple building blocks for consistent panel layout.

Method	Returns	Notes
`appendToBody(nodes)`	—	Static. Appends `HTMLElement` or `HTMLElement[]` to `body`
`createContainer()`	`HTMLElement`	`<section class="bv-section bv-font-primary">`
`createBottomSection(children)`	`HTMLElement`	`.bv-bottom-section` footer column
`createTitle(title)`	`HTMLElement`	`.bv-title` label
`createSeparator()`	`HTMLElement`	`<hr/>`
`createBreakSeparator()`	`HTMLElement`	`<br class="bv-break"/>`
`createFormSection(title)`	`HTMLElement`	Titled block with inner `.bv-title`
`createFormSectionIntro(text)`	`HTMLElement`	Single-sentence intro below section title (`.bv-section-intro`)

Form building blocks (labels, inputs, actions)

What it does: Creates consistent “form group” markup. Configuration Manager fields use these factories when you mount a field via createElement.

Method	Returns	Notes
`createFormGroup()`	`HTMLElement`	`.bv-group` row
`createFormGroupLabel(label, inputType?)`	`HTMLElement`	`.bv-label`; adds `:` for text/number
`createFormGroupInput(type)`	`HTMLElement`	`.bv-input`; adds `.bv-text` or `.bv-checkbox-radio`
`createFormInputGroup(label, type, hoverHelp?)`	`HTMLElement`	Label + single input
`createFormRangeInputGroup(label, type, min, max, help?)`	`HTMLElement`	`.bv-range-group` with two inputs (min/max)
`createFormTextAreaGroup(label, rows, help?)`	`HTMLElement`	`.bv-textarea-group`
`createFormSubstitutionComposer(options?)`	`HTMLElement`	Subject → Alias + plus button (`.bv-substitution-composer`)
`createPlusIcon(iconClass?)`	`SVGSVGElement`	Plus icon for add buttons
`createFormCheckBoxesGroupSection(label, pairs, help?)`	`HTMLElement`	`.bv-checkboxes-group`; `data-value` on each input
`createFormRadiosGroupSection(label, pairs, help?)`	`HTMLElement`	`.bv-radios-group`; mutual exclusive on change
`createFormGroupDropdown(id, pairs)`	`HTMLElement`	`<select class="bv-input">` — use directly if needed
`createFormButton(caption, hoverHelp, onClick)`	`HTMLElement`	`.bv-button`; `onClick` is a native `EventListener`
`createFormActions(children, wrapperClasses?)`	`HTMLElement`	`.bv-actions` button row (`HTMLElement` \
`createDetailFormFieldGroup(label, control, help?)`	`HTMLElement`	`.bv-detail-form-field` — label, control, optional help paragraph below (no ⓘ)
`createDetailFormSelectGroup(label, pairs, help?)`	`HTMLElement`	Detail field group wrapping `<select class="bv-input">`
`createDetailFormActions(children)`	`HTMLElement`	`.bv-detail-actions` flex row for detail-pane primary actions
`createSettingsDetailProgressPanel()`	`HTMLElement`	Static. Progress bar + counter label for detail-pane long work
`updateSettingsDetailProgressPanel(panel, progress)`	—	Static. `{ current, total, label, indeterminate, matched, skipped }`
`setSettingsDetailProgressPanelVisible(panel, visible)`	—	Static. Toggle `.bv-settings-detail-progress-hidden`

Configuration Manager uses these factories via each field's createElement binding.

Settings detail-pane forms

What it does: Helpers for custom forms in #bv-ui-secondary (Toolbox import pane, ruleset create forms, etc.). These differ from primary-column CM fields: help is below each control, not ⓘ → secondary pane.

Rule	Detail
Help	`createDetailFormFieldGroup` / `createDetailFormSelectGroup` — never `createFieldLabelRow` in detail panes
Enums	`createDetailFormSelectGroup`, not `createFormRadiosGroupSection`
Pattern + tokens	Add `.bv-pattern-group` on the field group
Actions	`createDetailFormActions` (flex); one primary button; close via header ×
Progress	`createSettingsDetailProgressPanel` during folder read / scan / import

Maintainer conventions: README.md.

Tabs (nav + panels)

What it does: Builds a tabbed section used by most scripts to separate Filters / Options / Downloads etc.

Critical rule: createTabPanel(tabName) sets the panel id to Utilities.toKebabCase(tabName). Your tab button text must match the panel id after kebab-casing (e.g. "My Filters" → id="my-filters").

Method	Notes
`createTabsSection(tabNames[], tabPanels[])`	`.bv-tabs-section` with nav + panels
`createTabButton(tabName, isFirst)`	`.bv-tab-button`; first tab gets `.bv-active`
`createTabPanel(tabName, isFirst?)`	`.bv-tab-panel`; `id` = `Utilities.toKebabCase(tabName)`

Critical: Tab button label text must kebab-case to the panel id. Example: button "My Filters" → panel id="my-filters". Active panel gets .bv-active (display: flex).

On tab click: deactivates other buttons/panels, activates matching panel via document.getElementById(Utilities.toKebabCase(button.textContent)). Does not reload field values from storage.

Modals

What it does: Creates a consistent modal dialog with overlay, close controls, and Escape-to-close wiring.

let modal = this._uiGen.createModal('Title', bodyNodes)  // bodyNodes: HTMLElement | HTMLElement[]
this._uiGen.showModal(modal)
this._uiGen.hideModal(modal)

Behaviour	Detail
Overlay	`.bv-modal-overlay`; click outside closes
Close control	`.bv-modal-close` button
Escape	Native `keydown` on `document`

createModal builds .bv-modal-dialog > header (.bv-modal-title) + .bv-modal-body.

Dock-list panels (tag discovery, compliance rules, human interaction) share .bv-dock-list-* chrome (intro, groups, rows, name/meta, footer).

Dock slide panels (v3.6.0)

What it does: Dock-anchored slide panels that stack beside the rail. Framework passes them near-dock → outward (human-interaction → tag discovery → compliance → settings #bv-ui) so review panels sit on the rail and push #bv-ui outward. View Layer supplies the DOM factories and animation helpers.

When to use: Apps rarely call these directly — Download Manager and Framework wire tag discovery and human-interaction panels. Compliance apps with trackComplianceRules get the compliance rules panel from Framework. Use the static helpers when building a custom dock slide panel that should match Brazen chrome.

Method	Role
`createDockSlidePanel(id, title)`	Static. Base `#bv-*` slide panel shell with close button
`isDockSlidePanelVisible(panel)`	Static. Whether panel is on-screen (also false for `.bv-hidden` / `hidden`)
`setDockSlidePanelOrientations(orientation)`	Static. Apply `bv-dock-panel-left/right/bottom` to all slide panels
`syncDockSlidePanelStack(dockElement, orientation, panels)`	Static. Position stacked panels relative to dock
`showDockSlidePanel(panel, orientation, beforeAnimate?)`	Static. Slide in (clears `.bv-hidden`; no restart if already visible)
`hideDockSlidePanel(panel, orientation, animate?, onHidden?)`	Static. Slide out
`setDockSlidePanelHidden(panel, hidden)`	Static. Toggle hidden class
`wireDockSlidePanel(panel, { onClose, onMouseLeave })`	Static. Bind close / mouseleave
`updateDockSlidePanelToggleButtons({ mainPanel, compliancePanel })`	Static. Sync active class on dock toggle buttons

Shared list chrome: .bv-dock-list-intro, .bv-dock-list-groups, .bv-dock-list-group, .bv-dock-list, .bv-dock-list-row, .bv-dock-list-name, .bv-dock-list-name-link, .bv-dock-list-meta, .bv-dock-list-similar, .bv-dock-list-footer.

Tag discovery panel (v3.6.0)

What it does: #bv-tag-discovery-panel — dock slide panel for reviewing unknown tags before downloads continue. Download Manager creates and drives it; apps supply tagDiscovery config (types, colors, actions). Includes a Similar tags section (filled by Download Manager after paint; collapsed by default unless similarOpen) and optional name clicks via onTagNameClick.

Method	Role
`createTagDiscoveryPanel({ onConfirm, onSkip?, onOpenMedia? })`	Static. Panel with Skip / Open media / Confirm footer and Similar tags shell
`renderTagDiscoveryPanelContent(panel, tags, renderActions, options?)`	Static. Unknown + known tag sections, grouped rows, incidence meta; resets Similar to loading unless `resetSimilar: false`; `preserveSimilarOpen` / `clearSimilarCount` / `similarOpen` / `similarShowCount` control soft resets and Similar chrome; optional `intro`
`resetTagDiscoverySimilarSection(panel, options?)`	Static. Set Similar status text; optional `preserveOpen` / `count` (omit `count` to keep the prior summary total); `similarOpen` / `open: true` forces expanded
`setTagDiscoverySimilarStatus(panel, status, options?)`	Static. Loading / empty status in Similar body; optional `count` updates the accordion summary
`renderTagDiscoverySimilarContent(panel, tags, renderActions, options?)`	Static. Fill Similar rows without re-rendering New/Known; keeps accordion open state unless `similarOpen: true`; `similarShowCount: false` omits the `(N)` summary suffix
`prepareTagDiscoveryPanelOptions(config)`	Static. Merge `tagTypes` into group/row class resolvers
`applyTagDiscoveryTypeColors(tagTypes)`	Static. Inject per-type name colors for the discovery panel

options.onTagNameClick (when set) makes .bv-dock-list-name clickable (pointer, no underline). Confirm / Skip / Open media map to Framework confirmTagDiscoveryMappings, skipTagDiscoveryInclusion, openTagDiscoveryMedia.

Human-interaction panel (v3.6.0)

What it does: Human-interaction dock pane (default #bv-human-interaction-panel; Download Manager uses per-lane ids). Does not auto-close on mouseleave.

Method	Role
`createHumanInteractionPanel({ id?, onConfirm?, onConfirmAndClose?, onReopen?, title?, message?, confirmLabel?, confirmAndCloseLabel?, reopenLabel?, showReopen? })`	Static. Queue pane (Done — resume / Reopen) or standalone reload pane (`showReopen: false`). Optional `confirmAndCloseLabel` / `onConfirmAndClose` adds a secondary confirm. Optional `id` for per-lane panels.
`updateHumanInteractionPanelContent(panel, { title?, message?, confirmLabel?, confirmAndCloseLabel?, reopenLabel? })`	Static. Refresh title / message / button labels on an existing HI panel.
`createTimedButton({ label?, durationMs?, onClick?, onTimeout?, autoStart? })`	Static. Hover-pausable countdown button (thin end-to-end bar). Default `durationMs` 5000. Container exposes `_bvTimedButtonApi = { cancel, start }`.
`createProgressButton({ label?, title?, onClick? })`	Static. Action button with the same inline bar shell; `_bvProgressButtonApi = { setProgress, setRunning, reset }`. `onClick` receives the API.
`createDownloadInterruptionPanel({ title?, message?, tip?, timedLabel?, durationMs?, onComplete?, onTimeout?, autoStart? })`	Static. `#bv-download-interruption-panel` dock pane: why-message → timed button → leader-tab tip (click = complete; timeout = relaunch).

Compliance rules slide panel (v3.6.0)

What it does: #bv-compliance-rules — dock slide panel listing active hide rules when trackComplianceRules is enabled (replaces the old modal).

Method	Role
`createComplianceRulesSlidePanel()`	Instance factory — intro + `.bv-dock-list-groups` shell
`renderComplianceRulesPanelContent(panel, report, { canRemoveRule?, onRemoveRule?, getRuleColor? })`	Grouped filter sections with name, count meta, optional per-rule name color, Remove action

Donate tab panel (v3.6.0)

What it does: Ready-to-append Patreon support tab for settings panels.

this._userInterface = [
  this._uiGen.createTabsSection(['Filters', 'Donate'], [
    this._uiGen.createTabPanel('Filters', true),
    this.createDonateTabPanel({ tabName: 'Donate', patreonUrl: 'https://…' }),
  ]),
]

Method	Role
`createDonateTabPanel({ tabName?, isFirst?, patreonUrl?, linkLabel?, message? })`	Tab panel with Patreon link + icon
`createPatreonIcon(iconClass?)`	Static. SVG Patreon mark

Framework exposes createDonateTabPanel(options?) as a thin wrapper.

Migration panel (v4.2.0+)

Fixed slide-style panel shown during IndexedDB migration (replaces dock-chip .bv-dock-status).

Method	Role
`createMigrationPanel({ id?, scriptName? })`	Static. `#bv-migration-panel` shell (title, script name, label, detail, elapsed, progress bar)
`showMigrationPanel(panel)`	Static. Show panel
`hideMigrationPanel(panel)`	Static. Hide panel; clears elapsed timer
`updateMigrationPanel(panel, progress)`	Static. `{ phase, label, detail?, current?, total?, indeterminate? }`
`startMigrationPanelElapsedTimer(panel)`	Static. Updates `.bv-migration-elapsed` every second
`showMigrationConsentPanel(panel, options)`	Static. Pre-migration consent: intro, planned steps, restore hint, Start update / Reset database; `options`: `steps`, `onStart`, `onReset`
`restoreMigrationProgressShell(panel)`	Static. Restore title, label, detail, elapsed, and progress bar after consent
`showMigrationSchemaTooNewPanel(panel, options)`	Static. Downgraded script / newer local IDB schema: upgrade steps + Retry / Reset database; `options`: `installedVersion`, `supportedVersion`, `onRetry`, `onReset`
`showMigrationFailurePanel(panel, options)`	Static. Failure copy + Retry / Reset database; `options`: `backupHint`, `errorMessage`, `onRetry`, `onWipe`

Dock migration status (deprecated)

Method	Role
`createDockMigrationStatus(message)`	Legacy spinner chip — prefer migration panel
`createMigrationDock(orientation, nameBarText, message?)`	Legacy dock shell
`setDockMigrationStatus(dock, message\	null)`

Download Manager UI helpers (v3.6.0 / v3.7.0)

Used by Download Manager for dock progress and search-tile pipeline overlays.

Method	Role
`createDownloadManagerProgressSlot()`	Static. `.bv-dock-progress-panel` with download bar + `current/total`, unlabeled resolution bar (below on bottom dock; vertical beside counters on left/right), and a descriptive `title`
`updateDownloadManagerProgressSlot(slot, progress)`	Static. Fills download and resolution bars from `progress.download` / `progress.resolution`; label shows download `current/total`
`setDownloadManagerProgressSlotVisible(slot, visible)`	Static. Toggle `.bv-dock-progress-hidden`
`updateDownloadManagerItemProgress(element, progress)`	Static. Blur overlay + step label + segmented bar (`.bv-dm-item-active` dim/blur uses a 100ms transition)
`clearDownloadManagerItemProgress(element)`	Static. Remove `.bv-dm-item-progress` overlay
`updateDockFieldButton(field, presentation)`	Refresh dock button icon/tooltip/active/disabled from CM field

progress for item overlays: { label, stepIndex, stepCount, failed?, complete? }.

IndexedDB blocked banner (v3.6.0)

Method	Role
`ensureIdbBlockedBanner()`	Static. Prepends `#bv-idb-blocked-banner` when persistence is disabled

Confirm dialog (v3.6.0)

Method	Role
`showConfirmDialog({ title, message, confirmLabel?, cancelLabel?, showCancel? })`	Static. Promise<boolean> modal

Ruleset panel

What it does: IDB-backed ruleset list widget used by Configuration Manager addRulesetField. Header (title + ⓘ + ⚙ settings), search with clear, optional toolbar sort/add, infinite scroll via loadPage, row actions, and gear-menu config (auto-sort, sort mode, grouping, hide tag types).

createRulesetPanel(options?) → BrazenRulesetPanel

Option	Default	Role
`searchPlaceholder`	`'Search rules…'`	Filter input placeholder
`emptyMessage`	`'No rules yet.'`	No rows state
`noMatchMessage`	`'No matching rules.'`	Filter miss state
`sortHelpText`	`'Sort rules'`	Toolbar ⇅ tooltip when `onSort` is set
`onSort`	`null`	When set, shows toolbar sort button
`crudOptions.create`	`true`	When `false`, hides add (+) button
`addEntryCaption`	`'Add Rule'`	Toolbar + tooltip for opening create detail pane

Configuration Manager derives copy from rulesetSubject via _resolveRulesetPanelCopy.

Ruleset detail multi-form (create)

What it does: Ruleset create detail panes use a scrollable stack of bordered entry cards (one per template createForm()), an add-entry repeater, and a batch submit button that persists all non-empty entries.

Method	Role
`createRulesetDetailMultiForm(options?)`	Static. Shell: scroll list (entries + trailing add-row repeater), submit footer (`addEntryCaption`, `submitCaption`, `createEntryForm`, `onSubmit(forms[])`)
`wrapRulesetDetailEntry(form)`	Static. Single bordered card wrapper (edit mode + each create entry)

Edit mode: one wrapped form + Save (no multi shell). Configuration Manager wires templates via default detailFormTemplate.

Ruleset panel (bookmarks and all ruleset fields)

What it does: Shared list UI for ruleset-backed fields (search, add, sort, infinite scroll, row actions, optional pageMatch).

Typical use case: Configuration Manager addRulesetField(...) / bookmarks template — not a separate bookmark widget.

createRulesetPanel(options?) → BrazenRulesetPanel — see Ruleset panel rows in BrazenViewLayer.spec.md.

Row CSS: .bv-ruleset-panel-rule-btn (edit), .bv-ruleset-panel-nav-btn + .bv-ruleset-panel-nav-wrap (navigate-only), .bv-ruleset-panel-action (inline icons), .bv-ruleset-panel-remove (maroon ×).

pageMatch uses BrazenRulesetPageMatchOptions; widget exposes isCurrentPagePresent(url?), checkPageMatch(), and legacy alias isCurrentPageBookmarked.

Tag sidebar enhancement: `enhanceTagSidebarCounts`

What it does: Enhances a tag sidebar by wrapping the “count” span in a hover-reveal actions slot (e.g. bookmark/add-to-rule buttons).

enhanceTagSidebarCounts(options?) — wraps tag count spans with hover-reveal action slots.

Option	Default
`sidebarSelector`	`'#tag-sidebar'`
`rowSelector`	`'li[class*="tag-type-"]'`
`countSelector`	`'span.tag-count'`
`hideDelayMs`	`2000` (0 if `prefers-reduced-motion`)
`extractTag(row)`	`() => ({ name: '' })`
`renderActions(row, tag, actionsEl, ctx)`	`ctx.isBookmarked` from `isBookmarked(tagName)`
`isBookmarked(name)`	`() => false`
`onlyTagNames`	`null` (repaint all rows; when set, only matching extracted names)

DOM: .bv-tag-actions-slot wraps count; .bv-tag-actions shown on pointer enter; count hidden while actions visible; .bv-tag-row-active on row.

Download pattern token builder

What it does: Shared “token chip” UI to help users build filename/subfolder patterns by clicking tokens and separators into focused inputs.

When to call it: Typically from _onAfterUIBuild, after your Downloads tab exists in the DOM.

Shared chip UI for filename/subfolder pattern fields:

Method	Role
`createPatternTokenChip(chip)`	One token/separator button
`createSharedPatternTokenBuilder(sections, separators)`	Full builder panel (`.bv-pattern-builder-shared`)
`insertIntoPatternInput(input, text)`	Insert at caret with flash feedback
`patchPatternTokenBuilder(filenameInput, subfolderInput, builder, eventNamespace?)`	Wire focus + click handlers
`patchStackedPatternFieldGroups(configurationManager, configKeys)`	Add `.bv-pattern-group` to folder/pattern fields
`patchRangeInputLayout()`	Wrap paired range inputs in `.bv-range-inputs`

When using Framework createDownloadsTabPanel() with patternSections / patternSeparators, patching runs automatically on _onAfterUIBuild. For custom panels (e.g. ledger import), call patchPatternTokenBuilder after the builder is in the DOM.

CSS class vocabulary

What it is: The stable class/id set the view layer uses. This is mainly useful when you write custom CSS or build custom widgets that should visually match the built-ins.

Class / id	Role
`#bv-ui`	Main settings panel (dock slide panel)
`#bv-resizer`, `#bv-resizer-icon`	Width handle
`.bv-section`, `.bv-bg-colour`, `.bv-font-primary`	Panel chrome
`.bv-tab-button`, `.bv-tab-panel`, `.bv-tabs-nav`, `.bv-tabs-section`	Tabs
`.bv-active`	Active tab button or panel
`.bv-group`, `.bv-label`, `.bv-input`, `.bv-button`, `.bv-actions`	Form
`.bv-range-group`, `.bv-textarea-group`	Group layouts
`.bv-checkboxes-group`, `.bv-radios-group`	Structural markers (radio exclusivity via `closest`); no dedicated layout CSS
`.bv-pattern-builder`, `.bv-pattern-builder-shared`, `.bv-token-row`, `.bv-token-bar`, `.bv-token-btn`, `.bv-token-sep`, `.bv-pattern-group`, `.bv-pattern-active`, `.bv-range-inputs`	Pattern token builder
`.bv-ruleset-panel-*`	Ruleset list UI (rows, toolbar, nav/rule buttons, remove, actions)
`.bv-modal-overlay`, `.bv-modal-dialog`, `.bv-modal-*`	Modals
`.bv-dock-list-`, `.bv-dock-slide-panel-`	Dock slide list panels (discovery, compliance, human interaction)
`.bv-tag-actions-slot`, `.bv-tag-actions`, `.bv-tag-row-active`	Sidebar tag actions
`.bv-hidden`	Hide/show via `Utilities.setHidden` (survives CSS `display:!important`)

Typical composition

let filtersPanel = this._uiGen.createTabPanel('Filters', true)
Utilities.appendChildren(filtersPanel, [
  this._configurationManager.createElement('Tag Blacklist'),
])
let optionsPanel = this._uiGen.createTabPanel('Options')
this._userInterface = [
  this._uiGen.createTabsSection(['Filters', 'Options'], [
    filtersPanel,
    optionsPanel,
  ]),
  this._uiGen.createBottomSection([
    this._uiGen.createSettingsFormActions(), // from framework helper
  ]),
]

Next in stack: Configuration Manager

Public API reference (index)

Panel: createSettingsSection, createResizer, isSettingsPaneBeingResized, getSelectedSection
Layout: appendToBody, createContainer, createBottomSection, createTitle, createSeparator, createBreakSeparator, createFormSection
Forms: createFormGroup*, createFormInputGroup, createFormRangeInputGroup, createFormTextAreaGroup, createFormSubstitutionComposer, createFormCheckBoxesGroupSection, createFormRadiosGroupSection, createFormGroupDropdown, createFormButton, createFormActions, createDetailFormFieldGroup, createDetailFormSelectGroup, createDetailFormActions, createSettingsDetailProgressPanel, createPlusIcon
Tabs: createTabsSection, createTabButton, createTabPanel
Modals: createModal, showModal, hideModal
Ruleset panel: createRulesetPanel (and BrazenRulesetPanel methods)
Sidebar: enhanceTagSidebarCounts
Pattern builder: createPatternTokenChip, createSharedPatternTokenBuilder, insertIntoPatternInput, patchPatternTokenBuilder, patchStackedPatternFieldGroups, patchRangeInputLayout
Dock slide panels: createDockSlidePanel, isDockSlidePanelVisible, setDockSlidePanelOrientations, syncDockSlidePanelStack, showDockSlidePanel, hideDockSlidePanel, setDockSlidePanelHidden, wireDockSlidePanel, updateDockSlidePanelToggleButtons
Tag discovery panel: createTagDiscoveryPanel, renderTagDiscoveryPanelContent, resetTagDiscoverySimilarSection, setTagDiscoverySimilarStatus, renderTagDiscoverySimilarContent, prepareTagDiscoveryPanelOptions, applyTagDiscoveryTypeColors
Human interaction: createHumanInteractionPanel, updateHumanInteractionPanelContent
Download interruption: createTimedButton, createProgressButton, createDownloadInterruptionPanel
Compliance rules panel: createComplianceRulesSlidePanel, renderComplianceRulesPanelContent
Donate tab: createDonateTabPanel, createPatreonIcon
Download Manager UI: createDownloadManagerProgressSlot, updateDownloadManagerProgressSlot, setDownloadManagerProgressSlotVisible, updateDownloadManagerItemProgress, clearDownloadManagerItemProgress, updateDockFieldButton
Misc: ensureIdbBlockedBanner, showConfirmDialog

Integration notes (grants, load order, pitfalls)

Grant: requires @grant GM_addStyle on this script or the app (styles are injected when this module loads).
Load order: after Utilities, before Configuration Manager.
DOM: factories return HTMLElement; hide/show with Utilities.setHidden (.bv-hidden) when CSS !important is involved.
Pitfall: tab ids are kebab-cased. If a tab doesn’t switch correctly, check that the tab button text and the panel id match after Utilities.toKebabCase(...).