feat(audio): move beat routing server-side and extend presets

Route beat-triggered manual selects from the controller server, add preset background and beat-counter UI support, and bump led-driver to include the matching pattern/runtime fixes.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
2026-05-09 20:08:05 +12:00
parent 1db905eaae
commit 822d9d8e01
21 changed files with 2453 additions and 109 deletions

View File

@@ -105,6 +105,17 @@ header h1 {
font-weight: 600;
}
/* BPM + desktop actions + mobile menu share one row; BPM stays visible on mobile. */
.header-end {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: nowrap;
justify-content: flex-end;
margin-left: auto;
min-width: 0;
}
.header-actions {
display: flex;
gap: 0.5rem;
@@ -115,6 +126,7 @@ header h1 {
.header-menu-mobile {
display: none;
position: relative;
align-items: center;
}
.main-menu-dropdown {
@@ -183,6 +195,49 @@ header h1 {
width: 8.5rem;
}
.audio-top-indicator {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.25rem 0.55rem;
border: 1px solid #4a4a4a;
border-radius: 6px;
background-color: #1a1a1a;
min-width: 6.5rem;
}
.audio-top-indicator-label {
font-size: 0.72rem;
color: #bdbdbd;
letter-spacing: 0.05em;
}
.audio-top-indicator-value {
font-size: 1rem;
font-weight: 700;
color: #ffd54f;
min-width: 2.4rem;
text-align: right;
}
.audio-top-indicator-subvalue {
font-size: 0.75rem;
color: #9e9e9e;
min-width: 2.2rem;
text-align: right;
}
.audio-top-indicator.flash {
background-color: #ff5252;
border-color: #ff8a80;
}
.audio-top-indicator.flash .audio-top-indicator-value,
.audio-top-indicator.flash .audio-top-indicator-label,
.audio-top-indicator.flash .audio-top-indicator-subvalue {
color: #fff;
}
/* Header/menu actions that should only appear in Edit mode */
body.preset-ui-run .edit-mode-only {
display: none !important;
@@ -710,6 +765,46 @@ body.preset-ui-run .edit-mode-only {
display: block;
}
.audio-bpm-readout {
font-size: 2rem;
font-weight: 700;
letter-spacing: 0.05em;
color: #ffd54f;
text-align: center;
padding: 0.4rem;
background-color: #1a1a1a;
border: 1px solid #4a4a4a;
border-radius: 6px;
}
.audio-hit-type-readout {
font-size: 1.1rem;
font-weight: 600;
letter-spacing: 0.04em;
color: #81d4fa;
text-transform: lowercase;
text-align: center;
padding: 0.35rem;
background-color: #1a1a1a;
border: 1px solid #4a4a4a;
border-radius: 6px;
}
.audio-beat-flash {
width: 100%;
height: 56px;
border-radius: 6px;
border: 1px solid #4a4a4a;
background: #202020;
box-shadow: inset 0 0 0 0 rgba(255, 82, 82, 0.5);
transition: background-color 80ms linear, box-shadow 120ms linear;
}
.audio-beat-flash.active {
background: #ff5252;
box-shadow: inset 0 0 24px 6px rgba(255, 255, 255, 0.35);
}
.patterns-list {
display: flex;
flex-direction: column;
@@ -1003,9 +1098,23 @@ body.preset-ui-run .edit-mode-only {
}
.header-menu-mobile {
display: block;
display: flex;
flex-direction: row;
align-items: center;
gap: 0.35rem;
margin-top: 0;
margin-left: auto;
margin-left: 0;
}
.header-end {
gap: 0.35rem;
flex-shrink: 0;
}
.header-end .audio-top-indicator {
min-width: 5rem;
padding: 0.2rem 0.45rem;
flex-shrink: 0;
}
.btn {