@kolkrabbi/kol-hardware 0.3.1 → 0.4.0

package/README.md

@@ -47,7 +47,7 @@ Hardware is theme-INVARIANT — a knob cap is black on a white panel too — so
 --kol-ctl-signal-input · --kol-ctl-cv-attenuate
 ```
 
-`JackSocket` reads its colour role as a HEX off `:root` (it appends a hex alpha for the glow), so a consumer overriding a role binds a hex, never a `var()`.
+`JackSocket` reads its color role as a HEX off `:root` (it appends a hex alpha for the glow), so a consumer overriding a role binds a hex, never a `var()`.
 
 ## Seams
 

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@kolkrabbi/kol-hardware",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "private": false,
-  "description": "KOL hardware — panel controls for instruments (mixers, synths, racks, decks), in five groups: value (knob, fader, the touch ParamSheet), switches (toggle, flip, rocker, icon button), indicators (LED, jacks), panel (label, module header), frames (module frame, channel strip, flip card). Plus the signal engine (./signal): one expression compiler and ADSR for every scope and envelope in the estate. Renamed from @kolkrabbi/kol-controls. Sits above @kolkrabbi/kol-{theme,icons,component}.",
+  "description": "Panel controls for instruments",
   "license": "MIT",
   "type": "module",
   "main": "./src/index.js",
@@ -13,16 +13,16 @@
     "./*": "./src/*"
   },
   "peerDependencies": {
-    "@kolkrabbi/kol-component": ">=0.156.0",
+    "@kolkrabbi/kol-component": ">=0.237.0",
     "@kolkrabbi/kol-icons": ">=0.25.0",
-    "@kolkrabbi/kol-theme": ">=0.124.0",
+    "@kolkrabbi/kol-theme": ">=0.163.0",
     "react": "^18.3.0 || ^19.0.0",
     "react-dom": "^18.3.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@kolkrabbi/kol-component": "^0.229.0",
-    "@kolkrabbi/kol-theme": "^0.156.0",
-    "@kolkrabbi/kol-icons": "^0.29.0"
+    "@kolkrabbi/kol-component": "^0.237.0",
+    "@kolkrabbi/kol-icons": "^0.33.0",
+    "@kolkrabbi/kol-theme": "^0.163.0"
   },
   "files": [
     "src",

package/src/frames/ChannelStrip.jsx

@@ -1,5 +1,5 @@
 /**
- * ChannelStrip — a mixer channel's face (frames group, 2026-09-27). Lifted from kol-mirror's
+ * ChannelStrip — A mixer channel. a mixer channel's face (frames group, 2026-09-27). Lifted from kol-mirror's
  * SymphonyMixer strip: a plate one rung below the desk, a top row of controls beside a column of
  * actions, then the channel's sliders, then a footer. Slots only — which controls, which
  * actions, what they do, all stay in the consumer.

package/src/frames/FlipCard.jsx

@@ -1,5 +1,5 @@
 /**
- * FlipCard — a face that turns over in place to show its back (frames group, 2026-09-27). Lifted
+ * FlipCard — A face that turns to show its back. a face that turns over in place to show its back (frames group, 2026-09-27). Lifted
  * from kol-mirror's channel flip (`styles/components.css` .mirror-flip-*), where a strip turns
  * to its patch panel. The body turns; everything around it holds still, so the back is the same
  * shaped object as the front.

package/src/frames/ModuleFrame.jsx

@@ -1,7 +1,7 @@
 import ModuleHeader from '../panel/ModuleHeader.jsx'
 
 /**
- * ModuleFrame — the front panel a module is built in: the header pinned at the top, the body
+ * ModuleFrame — The front panel of a module. the front panel a module is built in: the header pinned at the top, the body
  * below it (frames group, 2026-09-27). Lifted from kol-monitor's `modules/utility/Module.jsx`,
  * where every rack module sits in it; kol-mirror's modules and the controls reference compose
  * the same shape. Presentational — the rack's edit context, power and routing stay in the

package/src/frames/Rack.jsx

@@ -0,0 +1,99 @@
+import { createContext, memo, useContext } from 'react'
+import { HP_PX, TOTAL_HP, ROW_HEIGHT, RAIL_HEIGHT, hpToPx } from './eurorack.js'
+
+/* the case's width in HP, handed to its rows */
+const RackHpContext = createContext(TOTAL_HP)
+
+const Rail = memo(function Rail({ hp }) {
+  return (
+    <div style={{
+      height: RAIL_HEIGHT,
+      background: 'var(--kol-ctl-hw-rail)',
+      display: 'flex',
+      alignItems: 'center',
+      boxShadow: 'inset 0 1px 0 var(--kol-ctl-hw-cap-edge), inset 0 -1px 0 rgba(0,0,0,0.2)',
+    }}>
+      {Array.from({ length: hp }, (_, i) => (
+        <div key={i} style={{ width: HP_PX, display: 'flex', justifyContent: 'center' }}>
+          <div style={{
+            width: 4,
+            height: 4,
+            borderRadius: '50%',
+            backgroundColor: 'var(--kol-ctl-hw-shade)',
+            boxShadow: 'inset 0 1px 1px rgba(0,0,0,0.6)',
+          }} />
+        </div>
+      ))}
+    </div>
+  )
+})
+
+/**
+ * RackRow — One row of a rack. a 1U or 3U row: the case ground, a rail of mounting holes top and bottom, the
+ * modules over them (kol-monitor's `Case.jsx` `RackRow`, lifted 2026-10-01 — user ruling: the rack
+ * comes into the design system). A row is a definite pixel height — 3U 416, 1U 138.67 — and as
+ * wide as its case's HP. Lay `RackSlot`s in it.
+ *
+ * @param {'1u'|'3u'} height   (default 3u)
+ * @param {ReactNode} children the row's content — normally a flex row of `RackSlot`
+ */
+export const RackRow = memo(function RackRow({ height = '3u', children }) {
+  const hp = useContext(RackHpContext)
+  return (
+    <div className="relative" style={{ width: hpToPx(hp), height: ROW_HEIGHT[height] || ROW_HEIGHT['3u'] }}>
+      {/* Layer 0: case background */}
+      <div style={{ position: 'absolute', inset: 0, backgroundColor: 'var(--kol-ctl-hw-case)', zIndex: 0 }} />
+      {/* Layer 1: rails — visible in empty HP space */}
+      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, zIndex: 1 }}><Rail hp={hp} /></div>
+      <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, zIndex: 1 }}><Rail hp={hp} /></div>
+      {/* Layer 2: modules */}
+      <div className="relative" style={{ width: '100%', height: '100%', zIndex: 2 }}>
+        {children}
+      </div>
+    </div>
+  )
+})
+
+/**
+ * RackSlot — A module's place in a rack row. the box a module sits in: `hp` wide (16px each), the row's height. It
+ * paints nothing — the module inside is the panel. Monitor's `ModuleSlot` minus its edit arrows
+ * and registry, which stay in the consumer.
+ *
+ * @param {number}    hp       width in HP
+ * @param {1|3}       u        the row it sits in (default 3)
+ * @param {boolean}   overflow let the content run past the slot (edit-mode arrows on the edge)
+ * @param {ReactNode} children the module — a `ModuleFrame`
+ */
+export function RackSlot({ hp = 8, u = 3, overflow = false, style, children, ...props }) {
+  return (
+    <div
+      style={{ width: hpToPx(hp), height: ROW_HEIGHT[u === 1 ? '1u' : '3u'], flexShrink: 0, overflow: overflow ? 'visible' : 'hidden', position: 'relative', ...style }}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+/**
+ * RackCase — The case a rack is built in. the eurorack case: two side cheeks and the rows stacked between them
+ * (kol-monitor's `Case.jsx`, lifted 2026-10-01). A frame like `ModuleFrame` — slots and a shape.
+ * What is in the rows, where each module sits, routing, power and the edit mode stay in the
+ * consumer.
+ *
+ * @param {number}    hp       the case's width in HP (default 104); its rows read it
+ * @param {ReactNode} children `RackRow`s
+ */
+export default memo(function RackCase({ hp = TOTAL_HP, children }) {
+  return (
+    <RackHpContext.Provider value={hp}>
+      <div style={{ display: 'flex', flexDirection: 'row', padding: '3px 0' }}>
+        <div className="bg-oq-12" style={{ width: 24, flexShrink: 0, borderRadius: 4, margin: '-3px 0' }} />
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 2, padding: '0 2px' }}>
+          {children}
+        </div>
+        <div className="bg-oq-12" style={{ width: 24, flexShrink: 0, borderRadius: 4, margin: '-3px 0' }} />
+      </div>
+    </RackHpContext.Provider>
+  )
+})

package/src/frames/eurorack.js

@@ -0,0 +1,19 @@
+// The eurorack grid — 1HP = 16px, everything derives from it (kol-monitor's
+// `modules/utility/eurorack.js`, lifted 2026-10-01 with the rack frames).
+
+export const HP_PX = 16
+export const TOTAL_HP = 104
+export const MIN_HP = 2
+
+// Row heights in px, by rack unit. Monitor resolves its row aspect (1U 12:1, 3U 4:1) against the
+// 104hp row width, so a row is a definite height everywhere — WebKit does not treat an
+// `aspect-ratio` box as a definite height for its percentage-height children (2026-09-02).
+export const ROW_HEIGHT = {
+  '1u': (TOTAL_HP * HP_PX) / 12, // 138.67
+  '3u': (TOTAL_HP * HP_PX) / 4,  // 416
+}
+
+// Rail height in px — the dead zone at the top and bottom of each module
+export const RAIL_HEIGHT = 14
+
+export const hpToPx = (hp) => hp * HP_PX

package/src/index.js

@@ -2,11 +2,13 @@
 // (mixers, synths, racks, decks). Renamed from kol-controls 2026-09-27 (user ruling: "hardware"
 // says what it is — `controls` also meant the app atoms). Five groups:
 //
-//   value        things you turn or slide — Knob · Fader · the touch ParamSheet
+//   value        things you turn or slide — the touch ParamSheet (Knob · Fader are kol-component's
+//                `Knob` / `Slider` at `variant="panel"`; the names here are aliases)
 //   switches     hardware switches and buttons — Toggle · FlipToggle · RockerSwitch · IconButton
 //   indicators   lights and patching — LED · JackSocket · LabeledJack
 //   panel        panel furniture — PanelLabel · ModuleHeader
-//   frames       the shells a module is built in — ModuleFrame · ChannelStrip · FlipCard
+//   frames       the shells a module is built in — ModuleFrame · ChannelStrip · FlipCard — and the
+//                rack they mount in: RackCase · RackRow · RackSlot
 //
 // App-scale inputs are kol-component's (Dropdown · Input · Stepper at size="xs"); the panel copies
 // retired in kol-controls 0.3.0 (ControlsXsRung).
@@ -15,7 +17,8 @@
 export { default as Knob } from './value/Knob.jsx'
 export { default as Fader } from './value/Fader.jsx'
 export { default as ParamSheet } from './value/ParamSheet.jsx'
-export { armLongPress } from './value/armLongPress.js'
+/* moved to kol-component with the controls that arm it (2026-10-01); re-exported so imports hold */
+export { armLongPress } from '@kolkrabbi/kol-component'
 // switches
 export { default as Toggle } from './switches/Toggle.jsx'
 export { default as FlipToggle } from './switches/FlipToggle.jsx'
@@ -32,6 +35,10 @@ export { default as ModuleHeader } from './panel/ModuleHeader.jsx'
 export { default as ModuleFrame } from './frames/ModuleFrame.jsx'
 export { default as ChannelStrip } from './frames/ChannelStrip.jsx'
 export { default as FlipCard } from './frames/FlipCard.jsx'
+/* the rack (2026-10-01, user ruling: it comes into the design system) — the case, its 1U/3U rows
+ * and the HP slot, lifted from kol-monitor; what mounts where and routing stay in the consumer */
+export { default as RackCase, RackRow, RackSlot } from './frames/Rack.jsx'
+export { HP_PX, TOTAL_HP, MIN_HP, ROW_HEIGHT, RAIL_HEIGHT, hpToPx } from './frames/eurorack.js'
 // signal — the components over the signal engine (the engine itself, React-free, is `./signal`)
 export { default as SignalScope } from './indicators/SignalScope.jsx'
 export { default as SignalReference } from './panel/SignalReference.jsx'

package/src/indicators/JackSocket.jsx

@@ -1,6 +1,6 @@
 import { useRef, useEffect } from 'react'
 
-/* Read a colour binding once, lazily — the roles live in kol-theme's
+/* Read a color binding once, lazily — the roles live in kol-theme's
  * kol-components-controls.css. HEX is required here: the ring appends a hex
  * alpha (`${color}${aa}`), so these must resolve to hex on :root, never var(). */
 const _hex = {}
@@ -28,12 +28,12 @@ function stopJackLoop() {
 }
 
 /**
- * JackSocket — the 3.5mm eurorack jack, PRESENTATIONAL (kol-monitor's rack,
+ * JackSocket — A patch jack. the 3.5mm eurorack jack, PRESENTATIONAL (kol-monitor's rack,
  * lifted 2026-09-01): ring (well) + hole + label, and a rim that glows with the
  * signal — `signalRef.current` is `{ type: 'scalar'|'color'|'points', value, … }`,
  * read on a shared rAF at ~15fps, dirty-checked. Drag-to-patch, the registry and
  * the pending cable are the CONSUMER'S: they arrive as the props below and
- * `onPointerDown`. Colour role: `color` is a HEX (the glow appends a hex alpha);
+ * `onPointerDown`. Color role: `color` is a HEX (the glow appends a hex alpha);
  * default is the LED red; the consumer passes `--kol-ctl-signal-input` /
  * `--kol-ctl-cv-attenuate` for its primary / attenuate inputs.
  *
@@ -45,7 +45,7 @@ function stopJackLoop() {
  * @param {boolean}    pending      this output is the pending cable's source
  * @param {boolean}    dimPending   a cable is pending elsewhere (an input shows a dim ring)
  * @param {boolean}    cablesHidden the consumer hides cables — a connected hole fills solid
- * @param {string}     color        HEX role colour (default `--kol-ctl-led-red`)
+ * @param {string}     color        HEX role color (default `--kol-ctl-led-red`)
  * @param {object}     signalRef    `{ current }` — the live signal for the glow
  * @param {boolean}    bg           the fg-04 plate behind the ring (default: outputs only)
  * @param {Function}   onPointerDown  the consumer's routing gesture

package/src/indicators/LED.jsx

@@ -1,4 +1,4 @@
-/* The set's own LED colours (`--kol-ctl-led-*`) — a module that needs a
+/* The set's own LED colors (`--kol-ctl-led-*`) — a module that needs a
  * red/green/yellow uses <LED color="…"> or the same token, never a hex. */
 const COLORS = {
   red: 'var(--kol-ctl-led-red)',
@@ -12,12 +12,12 @@ const SIZES = { sm: 6, md: 8 }
 const HIT_PAD = 5
 
 /**
- * LED — the indicator lamp (kol-monitor's rack, lifted 2026-09-01). Sizes sm 6 ·
- * md 8; colours red · yellow · green · white · blue, or any CSS colour. With
+ * LED — An indicator lamp. the indicator lamp (kol-monitor's rack, lifted 2026-09-01). Sizes sm 6 ·
+ * md 8; colors red · yellow · green · white · blue, or any CSS color. With
  * `onClick` an invisible hit pad (+5px each side) overlays the lamp.
  *
  * @param {boolean}  active
- * @param {string}   color   a name above or a CSS colour (default red)
+ * @param {string}   color   a name above or a CSS color (default red)
  * @param {'sm'|'md'|number} size
  * @param {Function} onClick
  */

package/src/indicators/LabeledJack.jsx

@@ -2,7 +2,7 @@ import { Icon } from '@kolkrabbi/kol-icons'
 import JackSocket from './JackSocket.jsx'
 
 /**
- * LabeledJack — a `JackSocket` with an 8px label or a dim icon beside it
+ * LabeledJack — A jack with a label. a `JackSocket` with an 8px label or a dim icon beside it
  * (kol-monitor's rack, lifted 2026-09-01). Use instead of the socket's own
  * `label` when the label should sit left / right / above.
  *

package/src/indicators/SignalScope.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react'
 
 /**
- * SignalScope — the oscilloscope every expression tool draws (signal engine, 2026-09-27): a
+ * SignalScope — An oscilloscope trace of a signal. the oscilloscope every expression tool draws (signal engine, 2026-09-27): a
  * trace of `sample(t)` over a window, the knob range as dashed reference lines, a midline, and
  * a playhead that sweeps the window live. kol-mirror's /expressions scope, kol-monitor's
  * Scope / Scope+ and the design editor's Oscilloscope loop each drew their own.

package/src/panel/ModuleHeader.jsx

@@ -1,7 +1,7 @@
 import Toggle from '../switches/Toggle.jsx'
 
 /**
- * ModuleHeader — the enable dot + module name, left-aligned (kol-monitor's rack,
+ * ModuleHeader — A module's name and power dot. the enable dot + module name, left-aligned (kol-monitor's rack,
  * lifted 2026-09-01). In edit mode the yellow dot removes the module; otherwise
  * an optional bypass dot. The consumer's case-power context became `powered`:
  * when the case is off the dot shows off whatever `enabled` says.

package/src/panel/PanelLabel.jsx

@@ -1,28 +1,10 @@
+import { LabeledControl } from '@kolkrabbi/kol-component'
+
 /**
- * PanelLabel — wraps any control with the panel's text label (kol-monitor's
- * rack `LabeledControl`, lifted 2026-09-01; named `PanelLabel` because
- * `LabeledControl` is kol-component's settings-row control). Matches Knob /
- * Toggle: `kol-helper-8`, `text-fg-32`, uppercase.
- *
- * @param {string}   label
- * @param {boolean}  horizontal      shorthand for a row
- * @param {'top'|'bottom'|'left'|'right'} labelPosition  (default bottom)
- * @param {string}   labelClass      type class (default `kol-helper-8`)
- * @param {number}   gap
- * @param {ReactNode} children
+ * @deprecated 2026-10-01 — use `<LabeledControl variant="panel">` from kol-component. Drops when nobody imports it (04-retirements.md).
+ * PanelLabel — A control with its panel label. the panel label is LabeledControl's panel variant now
+ * (user ruling 2026-10-01). Same props; `horizontal` is `labelPosition="right"`.
  */
-export default function PanelLabel({ label, horizontal = false, labelPosition = 'bottom', labelClass = 'kol-helper-8', gap = 0, children }) {
-  const isRow = horizontal || labelPosition === 'left' || labelPosition === 'right'
-  const labelEl = label && (
-    <span className={`${labelClass} text-fg-32`} style={{ textTransform: 'uppercase', lineHeight: 1 }}>
-      {label}
-    </span>
-  )
-  return (
-    <div style={{ display: 'inline-flex', flexDirection: isRow ? 'row' : 'column', alignItems: 'center', gap }}>
-      {(labelPosition === 'top' || labelPosition === 'left') && labelEl}
-      {children}
-      {(labelPosition === 'bottom' || labelPosition === 'right') && labelEl}
-    </div>
-  )
+export default function PanelLabel({ horizontal = false, labelPosition = 'bottom', ...props }) {
+  return <LabeledControl variant="panel" labelPosition={horizontal && labelPosition === 'bottom' ? 'right' : labelPosition} {...props} />
 }

package/src/panel/SignalReference.jsx

@@ -2,7 +2,7 @@ import { useState } from 'react'
 import { Button, TabsRow, usePopover, PopoverPanel } from '@kolkrabbi/kol-component'
 
 /**
- * SignalReference — the reference an expression or envelope tool is explained with (signal
+ * SignalReference — The reference for a signal tool. the reference an expression or envelope tool is explained with (signal
  * engine, 2026-09-27). ONE component over the reference DATA in `@kolkrabbi/kol-hardware/signal`,
  * in the three shapes the estate already used:
  *
@@ -107,7 +107,7 @@ function PopButton({ label, list, onPick, onAppend, size }) {
     <>
       {/* Button takes no ref — the wrapper is the anchor, and the click reaches it by bubbling */}
       <span ref={popover.refs.setReference} {...popover.getReferenceProps()} className="inline-flex">
-        <Button variant="grey" size={size} pressed={open}>{label}</Button>
+        <Button tone="grey" size={size} pressed={open}>{label}</Button>
       </span>
       <PopoverPanel popover={popover} className="w-80 max-h-96 overflow-y-auto p-3">
         <div className="flex flex-col gap-3">

package/src/switches/FlipToggle.jsx

@@ -1,5 +1,5 @@
 /**
- * FlipToggle — the eurorack flip switch, two or three positions (kol-monitor's
+ * FlipToggle — A eurorack flip switch. the eurorack flip switch, two or three positions (kol-monitor's
  * rack, lifted 2026-09-01). `positions=2`: `value` is a boolean; `positions=3`:
  * `value` is 0 · 1 · 2 (top, centre, bottom / left, centre, right).
  *

package/src/switches/IconButton.jsx

@@ -4,7 +4,7 @@ import { Icon } from '@kolkrabbi/kol-icons'
 const PULSE_MS = 100
 
 /**
- * IconButton — the icon-only panel key (kol-monitor's rack, lifted 2026-09-01):
+ * IconButton — An icon-only panel key. the icon-only panel key (kol-monitor's rack, lifted 2026-09-01):
  * 1px border, radius 3, `active` lights the LED-red border and a 15% fill;
  * `momentary` flashes the active style for ~100ms on click — trigger-style
  * actions. Use with `PanelLabel` for a text label.

package/src/switches/RockerSwitch.jsx

@@ -1,5 +1,5 @@
 /**
- * RockerSwitch — the I/O rocker with a backlit paddle (kol-monitor's
+ * RockerSwitch — A lit rocker switch. the I/O rocker with a backlit paddle (kol-monitor's
  * `PowerModule`, the switch alone, lifted 2026-09-01). 28 × 38 housing on the
  * hardware cap; the paddle sits top when on (LED red, glowing) and bottom when
  * off; static I / O legends on the housing show whichever half is uncovered.

package/src/switches/Toggle.jsx

@@ -5,7 +5,7 @@ const LONG_PRESS_MS = 500
 const BLINK_MS_DEFAULT = 500
 
 /**
- * Toggle — the LED-dot on/off button with a label (kol-monitor's rack, lifted
+ * Toggle — An LED on/off button. the LED-dot on/off button with a label (kol-monitor's rack, lifted
  * 2026-09-01). `momentary` fires `onChange(true)` and the dot flashes 120ms;
  * `onLongPress` (hold ≥500ms) fires instead of `onChange`; `blink` pulses the
  * dot as an indicator; `forceLit` holds it on.
@@ -16,7 +16,7 @@ const BLINK_MS_DEFAULT = 500
  * @param {'sm'|'md'} size        8 · 12 (default md)
  * @param {number}   padding      hit padding (default 4)
  * @param {boolean}  momentary
- * @param {string}   color        CSS colour (default `var(--kol-ctl-led-red)`)
+ * @param {string}   color        CSS color (default `var(--kol-ctl-led-red)`)
  * @param {Function} onLongPress
  * @param {boolean}  blink · {number} blinkPeriodMs (500)
  * @param {boolean}  forceLit

package/src/value/EnvelopeGenerator.jsx

@@ -1,6 +1,6 @@
 import { useMemo, useRef, useState } from 'react'
-import { Button, Divider, Input, SegmentedToggle, Slider } from '@kolkrabbi/kol-component'
-import Knob from './Knob.jsx'
+import { Button, Divider, Input, Knob, SegmentedToggle, Slider } from '@kolkrabbi/kol-component'
+import ParamSheet from './ParamSheet.jsx'
 import Toggle from '../switches/Toggle.jsx'
 import SignalScope from '../indicators/SignalScope.jsx'
 import SignalReference from '../panel/SignalReference.jsx'
@@ -171,7 +171,7 @@ function EnvelopeHandles({ adsr, sec, onDragStart, onDrag, onDragEnd }) {
 }
 
 /**
- * EnvelopeGenerator — a value over time, typed as an equation or shaped as an ADSR envelope
+ * EnvelopeGenerator — A value over time. a value over time, typed as an equation or shaped as an ADSR envelope
  * (signal engine, 2026-09-27). One tool for what kol-mirror's /expressions page, kol-monitor's
  * Scope+ and Env modules and the design editor's Oscilloscope each built alone.
  *
@@ -212,6 +212,8 @@ export default function EnvelopeGenerator({ generator, reference = 'panel', clas
   const own = useEnvelopeGenerator(options)
   const g = generator ?? own
   const [collapsed, setCollapsed] = useState(false)
+  /* the holder opens the touch sheet, not the knob (2026-10-01): which ADSR stage is held */
+  const [sheet, setSheet] = useState(null)
   const { mode, adsr, view } = g
 
   const sample = mode === 'equation'
@@ -223,12 +225,12 @@ export default function EnvelopeGenerator({ generator, reference = 'panel', clas
 
   const transport = (
     <div className="flex h-6 shrink-0 items-center gap-3">
-      <Button variant="ghost" size="sm" iconOnly={g.playing ? 'pause' : 'play'} aria-label={g.playing ? 'Pause' : 'Play'} onClick={() => g.setPlaying(!g.playing)} />
+      <Button tone="ghost" size="sm" iconOnly={g.playing ? 'pause' : 'play'} aria-label={g.playing ? 'Pause' : 'Play'} onClick={() => g.setPlaying(!g.playing)} />
       <Field label="BPM" value={g.bpm} chars={3} onCommit={(v) => g.setBpm(Math.max(1, Math.min(999, num(v, g.bpm))))} />
       {mode === 'adsr' && (
         <>
           <Toggle value={g.cycle} onChange={g.setCycle} label="cycle" />
-          <Button variant="ghost" size="sm" onClick={g.fire}>Trigger</Button>
+          <Button tone="ghost" size="sm" onClick={g.fire}>Trigger</Button>
         </>
       )}
       <span className="ml-auto text-fg-48">{mode === 'adsr' ? `${passSec.toFixed(2)} s` : ''}</span>
@@ -276,10 +278,10 @@ export default function EnvelopeGenerator({ generator, reference = 'panel', clas
           )}
         </div>
         <div className="flex min-h-6 shrink-0 flex-wrap items-center justify-between gap-x-2">
-          {mode === 'equation' && <Button variant="ghost" size="sm" iconLeft="maximize" onClick={g.fit}>Fit</Button>}
-          {panel && <Button variant="ghost" size="sm" iconLeft="columns" onClick={() => setCollapsed(!collapsed)} className="hidden lg:inline-flex">{collapsed ? 'Expand' : 'Collapse'}</Button>}
-          {g.save && <Button variant="ghost" size="sm" iconLeft="save" onClick={g.save}>Save</Button>}
-          <Button variant="ghost" size="sm" iconLeft="refresh" onClick={mode === 'equation' ? g.reset : () => g.setAdsr(ADSR_DEFAULTS)}>Reset</Button>
+          {mode === 'equation' && <Button tone="ghost" size="sm" iconLeft="maximize" onClick={g.fit}>Fit</Button>}
+          {panel && <Button tone="ghost" size="sm" iconLeft="columns" onClick={() => setCollapsed(!collapsed)} className="hidden lg:inline-flex">{collapsed ? 'Expand' : 'Collapse'}</Button>}
+          {g.save && <Button tone="ghost" size="sm" iconLeft="save" onClick={g.save}>Save</Button>}
+          <Button tone="ghost" size="sm" iconLeft="refresh" onClick={mode === 'equation' ? g.reset : () => g.setAdsr(ADSR_DEFAULTS)}>Reset</Button>
         </div>
         <Divider className="shrink-0 py-1" />
         {mode === 'equation' ? (
@@ -299,8 +301,11 @@ export default function EnvelopeGenerator({ generator, reference = 'panel', clas
         ) : (
           <div className="flex shrink-0 flex-wrap items-end justify-between gap-4">
             {[['attack', 'A'], ['decay', 'D'], ['sustain', 'S'], ['release', 'R']].map(([key, label]) => (
-              <Knob key={key} value={adsr[key]} onChange={(v) => g.setAdsr({ [key]: v })} label={label} size="md" defaultValue={ADSR_DEFAULTS[key]} />
+              <Knob variant="panel" key={key} value={adsr[key]} onChange={(v) => g.setAdsr({ [key]: v })} label={label} size="md" defaultValue={ADSR_DEFAULTS[key]} onHold={() => setSheet({ key, label })} />
             ))}
+            {sheet && (
+              <ParamSheet label={sheet.label} value={adsr[sheet.key]} min={0} max={100} defaultValue={ADSR_DEFAULTS[sheet.key]} onChange={(v) => g.setAdsr({ [sheet.key]: v })} onClose={() => setSheet(null)} />
+            )}
             <Field label="Hold" value={r2(adsr.hold)} onCommit={(v) => g.setAdsr({ hold: Math.max(0, num(v, adsr.hold)) })} />
           </div>
         )}

package/src/value/Fader.jsx

@@ -1,99 +1,11 @@
-import { useRef, useCallback, useState } from 'react'
-import ParamSheet from './ParamSheet.jsx'
-import { armLongPress } from './armLongPress.js'
+import { Slider } from '@kolkrabbi/kol-component'
 
 /**
- * Fader — the rack slider (kol-monitor's panel `Slider`, lifted 2026-09-01;
- * named `Fader` because `Slider` is kol-component's app control and the two are
- * different tiers on purpose — a 2px track on a 24px eurorack panel is not app
- * chrome). Same conventions as Knob: `kol-helper-8` label, inline styles, pointer
- * drag; on touch a 500ms hold opens `ParamSheet`.
- *
- * @param {number}   value · onChange `(value) => void`
- * @param {number}   min (0) · max (100) · step (1)
- * @param {string}   label
- * @param {'horizontal'|'vertical'} direction  horizontal = flex-1 track + numeric readout; vertical = fixed `height`
- * @param {number}   height    vertical only (default 60)
+ * @deprecated 2026-10-01 — use `<Slider variant="panel">` from kol-component. Drops when nobody imports it (04-retirements.md).
+ * Fader — A panel slider. the rack slider is Slider's panel variant now (user ruling 2026-10-01: one
+ * slider, not two that look alike). Same props: `value · onChange · min · max · step · label ·
+ * direction · height · onHold`.
  */
-export default function Fader({ value, onChange, min = 0, max = 100, step = 1, label, direction = 'horizontal', height }) {
-  const trackRef = useRef(null)
-  const vertical = direction === 'vertical'
-  const [sheet, setSheet] = useState(false)
-
-  const handlePointerDown = useCallback((e) => {
-    e.preventDefault()
-    const track = trackRef.current
-    if (!track) return
-
-    const update = (e) => {
-      const rect = track.getBoundingClientRect()
-      const ratio = vertical
-        ? Math.max(0, Math.min(1, 1 - (e.clientY - rect.top) / rect.height))
-        : Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))
-      const raw = min + ratio * (max - min)
-      onChange(Math.round(raw / step) * step)
-    }
-
-    update(e)
-    const id = e.pointerId
-    const onMove = (e) => { if (e.pointerId === id) { hold.move(e); update(e) } }  // a second finger is a pan
-    const onUp = () => {
-      hold.cancel()
-      window.removeEventListener('pointermove', onMove)
-      window.removeEventListener('pointerup', onUp)
-    }
-    // Touch: hold still 500ms → the big sheet instead of the drag
-    const hold = armLongPress(e, () => { onUp(); setSheet(true) })
-    window.addEventListener('pointermove', onMove)
-    window.addEventListener('pointerup', onUp)
-  }, [min, max, step, onChange, vertical])
-
-  const norm = max > min ? ((value ?? 0) - min) / (max - min) : 0
-  const sheetEl = sheet && (
-    <ParamSheet label={label} value={value} min={min} max={max} step={step} onChange={onChange} onClose={() => setSheet(false)} />
-  )
-
-  if (vertical) {
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2 }}>
-        {label && (
-          <span className="kol-helper-8 text-fg-32" style={{ textTransform: 'uppercase', lineHeight: 1 }}>
-            {label}
-          </span>
-        )}
-        <div
-          ref={trackRef}
-          onPointerDown={handlePointerDown}
-          className="bg-fg-16"
-          style={{ width: 2, height: height ?? 60, position: 'relative', cursor: 'ns-resize', touchAction: 'none' }}
-        >
-          <div className="bg-fg-16" style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: `${norm * 100}%` }} />
-          <div className="bg-fg-72" style={{ position: 'absolute', bottom: `calc(${norm * 100}% - 4px)`, left: -3, width: 8, height: 8, borderRadius: '50%' }} />
-        </div>
-        {sheetEl}
-      </div>
-    )
-  }
-
-  return (
-    <div style={{ display: 'flex', alignItems: 'center', gap: 8, flex: 1 }}>
-      {label && (
-        <span className="kol-helper-8 text-fg-32" style={{ textTransform: 'uppercase', lineHeight: 1, flexShrink: 0, minWidth: 20 }}>
-          {label}
-        </span>
-      )}
-      <div
-        ref={trackRef}
-        onPointerDown={handlePointerDown}
-        className="bg-fg-16"
-        style={{ flex: 1, height: 2, position: 'relative', cursor: 'pointer', touchAction: 'none' }}
-      >
-        <div className="bg-fg-72" style={{ position: 'absolute', left: `calc(${norm * 100}% - 4px)`, top: -3, width: 8, height: 8, borderRadius: '50%' }} />
-      </div>
-      <span className="kol-helper-8 text-fg-32" style={{ lineHeight: 1, flexShrink: 0, minWidth: 16, textAlign: 'right' }}>
-        {Math.round(value ?? 0)}
-      </span>
-      {sheetEl}
-    </div>
-  )
+export default function Fader(props) {
+  return <Slider variant="panel" {...props} />
 }

package/src/value/Knob.jsx

@@ -1,130 +1,12 @@
-import { useCallback, useState } from 'react'
-import ParamSheet from './ParamSheet.jsx'
-import { armLongPress } from './armLongPress.js'
-
-const SIZES = { sm: 24, md: 32, lg: 40, xl: 64 }
+import { Knob as KolKnob } from '@kolkrabbi/kol-component'
 
 /**
- * Knob — SVG rotary knob with drag-to-change (kol-monitor's rack, lifted
- * 2026-09-01). 270° sweep; drag ns, 200px of travel = the range; ⌥-click resets
- * to `defaultValue`; on touch a 500ms hold opens `ParamSheet` instead of the drag.
- *
- * @param {number}   value · onChange `(value) => void`
- * @param {number}   min · max        default 0–100, or −100–100 when `bipolar`
- * @param {string}   label            `kol-helper-8`, uppercase
- * @param {'column'|'row'|'row-left'|'row-right'} variant  label placement (default column)
- * @param {boolean}  bipolar          −/+ legend and a centred default
- * @param {number}   labelMinWidth    row-right only
- * @param {'sm'|'md'|'lg'|'xl'} size  24 · 32 · 40 · 64 (default sm)
- * @param {number}   defaultValue     ⌥-click / sheet reset target (default 50, or 0 bipolar)
+ * @deprecated 2026-10-01 — use `<Knob variant="panel">` from kol-component. Drops when nobody imports it (04-retirements.md).
+ * Knob — A rotary knob. there is one Knob and it is kol-component's (user rulings 2026-10-01 · 02);
+ * this is its panel variant under the import path the racks already use. One prop is renamed on the
+ * replacement: this `variant` (the label placement — `column · row · row-left · row-right`) is
+ * `labelPlacement` there.
  */
-export default function Knob({ value, onChange, min, max, label, variant = 'column', bipolar = false, labelMinWidth, size: sizeProp = 'sm', defaultValue }) {
-  const size = SIZES[sizeProp] || SIZES.sm
-  const effMin = min ?? (bipolar ? -100 : 0)
-  const effMax = max ?? 100
-  const effDefault = defaultValue ?? (bipolar ? 0 : 50)
-  const angle = ((value - effMin) / (effMax - effMin)) * 270 - 135
-  const r = size / 2
-  const ir = r * 0.56
-  const [sheet, setSheet] = useState(false)
-
-  const handlePointerDown = useCallback((e) => {
-    e.preventDefault()
-    // Alt/Option + click resets to default instead of starting a drag
-    if (e.altKey) {
-      onChange(effDefault)
-      return
-    }
-    const startY = e.clientY
-    const startVal = value
-    const range = effMax - effMin
-
-    const id = e.pointerId
-    const handleMove = (e) => {
-      if (e.pointerId !== id) return  // a second finger is a pan, not this knob
-      hold.move(e)
-      const delta = (startY - e.clientY) * (range / 200)
-      const next = Math.round(Math.max(effMin, Math.min(effMax, startVal + delta)))
-      onChange(next)
-    }
-    const handleUp = () => {
-      hold.cancel()
-      window.removeEventListener('pointermove', handleMove)
-      window.removeEventListener('pointerup', handleUp)
-    }
-    // Touch: hold still 500ms → the big sheet instead of the drag
-    const hold = armLongPress(e, () => { handleUp(); setSheet(true) })
-    window.addEventListener('pointermove', handleMove)
-    window.addEventListener('pointerup', handleUp)
-  }, [value, effMin, effMax, effDefault, onChange])
-
-  const sheetEl = sheet && (
-    <ParamSheet label={label} value={value} min={effMin} max={effMax} defaultValue={effDefault} onChange={onChange} onClose={() => setSheet(false)} />
-  )
-
-  const knobSvg = (
-    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
-      <circle cx={r} cy={r} r={r * 0.75} style={{ fill: 'var(--kol-ctl-hw-cap)', stroke: 'var(--kol-fg-24)' }} strokeWidth="1" />
-      <line
-        x1={r} y1={r}
-        x2={r + ir * Math.cos((angle - 90) * Math.PI / 180)}
-        y2={r + ir * Math.sin((angle - 90) * Math.PI / 180)}
-        style={{ stroke: 'var(--kol-ctl-hw-on-cap)' }} strokeWidth="1.5" strokeLinecap="round"
-      />
-    </svg>
-  )
-
-  if (variant === 'row-left' || variant === 'row') {
-    return (
-      <div
-        onPointerDown={handlePointerDown}
-        style={{ cursor: 'ns-resize', touchAction: 'none', display: 'flex', alignItems: 'center', gap: 4 }}
-      >
-        {label && (
-          <span className="kol-helper-8 text-fg-32" style={{ textTransform: 'uppercase', lineHeight: 1 }}>
-            {label}
-          </span>
-        )}
-        {knobSvg}
-        {sheetEl}
-      </div>
-    )
-  }
-
-  if (variant === 'row-right') {
-    return (
-      <div
-        onPointerDown={handlePointerDown}
-        style={{ cursor: 'ns-resize', touchAction: 'none', display: 'flex', alignItems: 'center', gap: 4 }}
-      >
-        {knobSvg}
-        {label && (
-          <span className="kol-helper-8 text-fg-32" style={{ textTransform: 'uppercase', lineHeight: 1, minWidth: labelMinWidth }}>
-            {label}
-          </span>
-        )}
-        {sheetEl}
-      </div>
-    )
-  }
-
-  return (
-    <div
-      onPointerDown={handlePointerDown}
-      style={{ cursor: 'ns-resize', touchAction: 'none', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2 }}
-    >
-      {bipolar && (
-        <span className="kol-helper-8 text-fg-32" style={{ lineHeight: 1 }}>
-          -/+
-        </span>
-      )}
-      {knobSvg}
-      {label && (
-        <span className="kol-helper-8 text-fg-32" style={{ textTransform: 'uppercase', lineHeight: 1 }}>
-          {label}
-        </span>
-      )}
-      {sheetEl}
-    </div>
-  )
+export default function Knob({ variant, size = 'sm', ...props }) {
+  return <KolKnob variant="panel" labelPlacement={variant} size={size} {...props} />
 }

package/src/value/ParamSheet.jsx

@@ -3,7 +3,7 @@ import { useEffect } from 'react'
 import { Slider } from '@kolkrabbi/kol-component'
 
 /**
- * ParamSheet — a knob or fader, big, at the bottom of the screen. Opened by a
+ * ParamSheet — A big control at the screen's foot. a knob or fader, big, at the bottom of the screen. Opened by a
  * long-press on the control (touch only): a rack knob is 24px and a finger is
  * not, so precision on a phone comes from a full-width track, not from zoom
  * (user, 2026-09-01: "if sometimes things are hard to reach"). Long-press, not

package/src/value/armLongPress.js

@@ -1,17 +0,0 @@
-// armLongPress — the hold that opens a ParamSheet (Knob + Fader; kol-monitor 2026-09-01).
-
-const HOLD_MS = 500
-const SLOP_PX = 6
-
-/* Arm a long-press on a touch pointerdown. Returns `{ move, cancel }`: feed
- * pointermoves to `move` (past SLOP it disarms — that is a drag, not a hold),
- * call `cancel` on pointerup. `fire` runs once when the hold lands. A mouse
- * never arms — desktop keeps drag + ⌥-click and nothing else. */
-export function armLongPress(e, fire) {
-  if (e.pointerType !== 'touch') return { move: () => {}, cancel: () => {} }
-  const x = e.clientX, y = e.clientY
-  let t = setTimeout(() => { t = null; fire() }, HOLD_MS)
-  const cancel = () => { if (t) { clearTimeout(t); t = null } }
-  const move = (ev) => { if (t && Math.hypot(ev.clientX - x, ev.clientY - y) > SLOP_PX) cancel() }
-  return { move, cancel }
-}