diff --git a/src/components/ChoiceSelect/ChoiceSelect.css b/src/components/ChoiceSelect/ChoiceSelect.css
index 8a81f62..0e934ff 100644
--- a/src/components/ChoiceSelect/ChoiceSelect.css
+++ b/src/components/ChoiceSelect/ChoiceSelect.css
@@ -47,6 +47,8 @@
bottom: 0;
width: 4cqh;
+ padding-top: 3%;
+ padding-bottom: 3%;
display: flex;
align-items: center;
diff --git a/src/features/dsp408/components/DSP408Panel/DSP408Panel.tsx b/src/features/dsp408/components/DSP408Panel/DSP408Panel.tsx
index 5e90ca2..6767d3b 100644
--- a/src/features/dsp408/components/DSP408Panel/DSP408Panel.tsx
+++ b/src/features/dsp408/components/DSP408Panel/DSP408Panel.tsx
@@ -11,7 +11,7 @@ import LoadingOverlay from '../../../../components/LoadingOverlay/LoadingOverlay
import { InputChannel, OutputChannel } from '../../types';
import MatrixSection from '../Matrixsection/Matrixsection';
import GeqSection from '../GeqSection/GeqSection';
-import InputSection from '../InputSection/InputSection';
+import ChannelSection from '../InputSection/ChannelSection';
import { DSP408Api } from '../../dsp408';
import { DSP408 } from '../../../../types';
import { SidebarId } from '../../constants';
@@ -134,54 +134,6 @@ function DSP408Panel({ dsp, api }: { dsp: DSP408; api: DSP408Api }) {
case 'delay':
return ;
- case 'ina':
- return (
-
- );
-
- case 'inb':
- return (
-
- );
-
- case 'inc':
- return (
-
- );
-
- case 'ind':
- return (
-
- );
-
case 'matrix':
return (
;
+ case 'ina':
+ return (
+
+ );
+
+ case 'inb':
+ return (
+
+ );
+
+ case 'inc':
+ return (
+
+ );
+
+ case 'ind':
+ return (
+
+ );
+
+ case 'out1':
+ return (
+
+ );
+
default:
return null;
}
diff --git a/src/features/dsp408/components/InputSection/InputSection.css b/src/features/dsp408/components/InputSection/ChannelSection.css
similarity index 92%
rename from src/features/dsp408/components/InputSection/InputSection.css
rename to src/features/dsp408/components/InputSection/ChannelSection.css
index 599d58e..3948725 100644
--- a/src/features/dsp408/components/InputSection/InputSection.css
+++ b/src/features/dsp408/components/InputSection/ChannelSection.css
@@ -1,5 +1,5 @@
/* InputSection.css */
-.input-graph-section {
+.channel-graph-section {
flex: 0 0 calc(100% - var(--dsp-control-heigth));
min-height: 0;
@@ -15,7 +15,7 @@
-webkit-user-select: none;
}
-.input-graph-panel {
+.channel-graph-panel {
position: relative;
flex: 1 1 auto;
min-width: 0;
@@ -28,7 +28,7 @@
border-radius: var(--radius-md);
}
-.input-bypass-overlay {
+.channel-bypass-overlay {
position: absolute;
inset: 0;
display: flex;
@@ -38,7 +38,7 @@
z-index: 2;
}
-.input-bypass-overlay span {
+.channel-bypass-overlay span {
font-size: 8cqh;
font-weight: 800;
letter-spacing: 0.15em;
@@ -49,7 +49,7 @@
user-select: none;
}
-.input-graph__title {
+.channel-graph__title {
flex: 0 0 auto;
text-align: center;
@@ -60,7 +60,7 @@
font-weight: var(--font-weight-semibold);
}
-.input-graph-panel > .container {
+.channel-graph-panel > .container {
flex: 1;
min-height: 0;
}
@@ -68,7 +68,7 @@
/* Bottom control bar — same pattern as .compressor-section: absolute,
bottom-anchored, panels flow in a row and scroll horizontally instead
of squeezing into a fixed max-width. */
-.input-control-section {
+.channel-control-section {
container-type: size;
position: absolute;
left: 0;
@@ -93,7 +93,7 @@
-webkit-user-select: none;
}
-.input-control-panel {
+.channel-control-panel {
display: grid;
grid-auto-flow: column;
height: 100%;
@@ -106,7 +106,7 @@
}
/* Peq Sliders */
-.input-panel {
+.channel-panel {
position: relative;
height: 100%;
@@ -124,7 +124,7 @@
background: var(--bg-void);
}
-.input-panel__title {
+.channel-panel__title {
flex: 0 0 auto;
width: 100%;
text-align: center;
@@ -140,7 +140,7 @@
text-overflow: ellipsis;
}
-.input-panel__grid {
+.channel-panel__grid {
flex: 1 1 auto;
min-height: 0;
@@ -154,7 +154,7 @@
box-sizing: border-box;
}
-.input-panel__cell {
+.channel-panel__cell {
display: flex;
flex-direction: column;
align-items: center;
@@ -164,7 +164,7 @@
gap: 1cqh;
}
-.input-panel__cell-label {
+.channel-panel__cell-label {
flex: 0 0 auto;
font-family: var(--font-ui);
font-size: 3.2cqh;
@@ -337,14 +337,14 @@
font-size: 4cqh;
}
-.input-graph-panel__magnitude-wrap {
+.channel-graph-panel__magnitude-wrap {
flex: 1 1 0;
min-height: 0;
min-width: 0;
position: relative;
}
-.input-graph__title-row {
+.channel-graph__title-row {
flex: 0 0 auto;
display: flex;
align-items: center;
@@ -352,11 +352,11 @@
padding: 1cqh 1.5cqh;
}
-.input-graph__title-row .input-graph__title {
+.channel-graph__title-row .channel-graph__title {
padding: 0; /* was on the standalone title element; row now owns spacing */
}
-.input-graph-view-toggle {
+.channel-graph-view-toggle {
display: flex;
gap: 0.4cqh;
border: var(--border-width) solid var(--border-hairline);
@@ -365,7 +365,7 @@
background: var(--bg-void);
}
-.input-graph-view-toggle__btn {
+.channel-graph-view-toggle__btn {
font-family: var(--font-ui);
font-size: 2cqh;
padding: 0.6cqh 1.2cqh;
@@ -376,7 +376,7 @@
cursor: pointer;
}
-.input-graph-view-toggle__btn.active {
+.channel-graph-view-toggle__btn.active {
background: var(--accent-brand);
color: var(--bg-void);
}
diff --git a/src/features/dsp408/components/InputSection/InputSection.tsx b/src/features/dsp408/components/InputSection/ChannelSection.tsx
similarity index 89%
rename from src/features/dsp408/components/InputSection/InputSection.tsx
rename to src/features/dsp408/components/InputSection/ChannelSection.tsx
index 36c1d3d..f6936a6 100644
--- a/src/features/dsp408/components/InputSection/InputSection.tsx
+++ b/src/features/dsp408/components/InputSection/ChannelSection.tsx
@@ -1,4 +1,4 @@
-// InputSection.tsx
+// ChannelSection.tsx
import VerticalSlider, {
makeLogStep,
makeLogQuantize,
@@ -12,12 +12,12 @@ import {
PEQ_Q_RANGES,
PEAK_Q_VALUES,
} from '../../constants';
-import { InputChannel, Channel, PEQBand, PEQFilter, PEQ, Crossover } from '../../types';
+import { Channel, PEQBand, PEQFilter, PEQ, Crossover } from '../../types';
import { DSP408 as DSP } from '../../../../types';
import { CrossoverFilter } from '../../types';
import { LinearGraph, LinearGraphHandle } from '../../../../components/LinearGraph/LinearGraph';
import { useRef, useState } from 'react';
-import './InputSection.css';
+import './ChannelSection.css';
import ChannelGroup from '../../../../components/ChannelGroup/ChannelGroup';
import Button from '../../../../components/Button/Button';
import {
@@ -50,12 +50,12 @@ function GraphViewToggle({
];
return (
-
+
{options.map((opt) => (