@kolkrabbi/kol-hardware 0.1.0 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-hardware",
-  "version": "0.1.0",
+  "version": "0.2.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}.",
   "license": "MIT",
@@ -20,9 +20,9 @@
     "react-dom": "^18.3.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@kolkrabbi/kol-component": "^0.225.0",
+    "@kolkrabbi/kol-theme": "^0.152.0",
     "@kolkrabbi/kol-icons": "^0.27.1",
-    "@kolkrabbi/kol-theme": "^0.152.0"
+    "@kolkrabbi/kol-component": "^0.225.0"
   },
   "files": [
     "src",

package/src/indicators/JackSocket.jsx

@@ -39,7 +39,8 @@ function stopJackLoop() {
  *
  * @param {'in'|'out'} type
  * @param {'sm'|'md'}  size         12 · 16 (default md)
- * @param {string}     label · {string} labelSize  (`kol-helper-${labelSize}`, default `xxs`)
+ * @param {string}     label · {string|number} labelSize  (`kol-helper-${labelSize}`: 8 · 10 · 12 …, default 8;
+ *                      a retired t-shirt name — `xxs` — still resolves, to 8)
  * @param {boolean}    active       a cable is connected here
  * @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)
@@ -57,7 +58,7 @@ export default function JackSocket({
   type = 'out',
   size = 'md',
   label,
-  labelSize = 'xxs',
+  labelSize = 8,
   active = false,
   pending = false,
   dimPending = false,
@@ -152,7 +153,7 @@ export default function JackSocket({
         </div>
       </div>
       {label && (
-        <span className={`kol-helper-${labelSize} text-fg-32`} style={{ textTransform: 'uppercase', lineHeight: 1 }}>
+        <span className={`kol-helper-${/^\d+$/.test(String(labelSize)) ? labelSize : 8} text-fg-32`} style={{ textTransform: 'uppercase', lineHeight: 1 }}>
           {label}
         </span>
       )}

package/src/switches/RockerSwitch.jsx

@@ -46,8 +46,8 @@ export default function RockerSwitch({ on, onToggle }) {
       </div>
 
       {/* Static labels on housing */}
-      <span className="kol-helper-xxxxs" style={{ position: 'absolute', top: 3, left: 0, right: 0, textAlign: 'center', color: on ? 'transparent' : 'var(--kol-ctl-hw-cap-edge)', pointerEvents: 'none' }}>I</span>
-      <span className="kol-helper-xxxxs" style={{ position: 'absolute', bottom: 3, left: 0, right: 0, textAlign: 'center', color: on ? 'var(--kol-ctl-hw-cap-edge)' : 'transparent', pointerEvents: 'none' }}>O</span>
+      <span className="kol-helper-8" style={{ position: 'absolute', top: 3, left: 0, right: 0, textAlign: 'center', color: on ? 'transparent' : 'var(--kol-ctl-hw-cap-edge)', pointerEvents: 'none' }}>I</span>
+      <span className="kol-helper-8" style={{ position: 'absolute', bottom: 3, left: 0, right: 0, textAlign: 'center', color: on ? 'var(--kol-ctl-hw-cap-edge)' : 'transparent', pointerEvents: 'none' }}>O</span>
     </div>
   )
 }

package/src/value/EnvelopeGenerator.jsx

@@ -1,11 +1,11 @@
-import { useMemo, useState } from 'react'
+import { useMemo, useRef, useState } from 'react'
 import { Button, Input, SegmentedToggle } from '@kolkrabbi/kol-component'
 import Knob from './Knob.jsx'
 import Toggle from '../switches/Toggle.jsx'
 import SignalScope from '../indicators/SignalScope.jsx'
 import SignalReference from '../panel/SignalReference.jsx'
 import { compileExpression, fitRange } from '../signal/expression.js'
-import { envelopeAt, envelopeLength, ADSR_DEFAULTS } from '../signal/adsr.js'
+import { envelopeAt, envelopeLength, stageSeconds, ADSR_DEFAULTS } from '../signal/adsr.js'
 import { EXPRESSION_SECTIONS, EXPRESSION_TABS, ADSR_SECTIONS, ADSR_TABS, ADSR_PRESETS } from '../signal/reference.js'
 
 /**
@@ -21,11 +21,74 @@ import { EXPRESSION_SECTIONS, EXPRESSION_TABS, ADSR_SECTIONS, ADSR_TABS, ADSR_PR
  * @param {string}  defaultExpr
  * @param {object}  defaultAdsr        knob values 0…100 (`ADSR_DEFAULTS`)
  * @param {Array}   saved · savedAdsr  the host's own rows for each mode's Saved tab
+ * @param {Function} onSave            `({ mode, code }) => void` — shows a Save button; `code` is the
+ *                                     expression, or the envelope as `a10 d30 s70 r50` (pick loads it back)
  * @param {boolean} reference          show the reference panel (default true)
+ *
+ * In ADSR mode the envelope's three corners drag on the scope — attack peak (A), decay → sustain
+ * (D and S), release end (R) — and the knobs follow; the window holds still while you drag.
  */
 const MODES = [{ value: 'equation', label: 'Equation' }, { value: 'adsr', label: 'ADSR' }]
 const num = (s, fallback) => { const n = parseFloat(s); return Number.isFinite(n) ? n : fallback }
 
+/* an envelope as text and back — what the Saved rows carry */
+export const adsrCode = (p) => `a${Math.round(p.attack)} d${Math.round(p.decay)} s${Math.round(p.sustain)} r${Math.round(p.release)}`
+const parseAdsr = (code) => {
+  const m = /^a(\d+) d(\d+) s(\d+) r(\d+)$/.exec(String(code))
+  return m ? { attack: +m[1], decay: +m[2], sustain: +m[3], release: +m[4] } : null
+}
+/* seconds → the knob value that gives them (inverse of stageSeconds) */
+const knobFor = (seconds) => Math.max(0, Math.min(100, ((seconds - 0.005) / 1.995) * 100))
+
+const PAD = 12   // SignalScope's inner padding — the handles sit on its grid
+const HEIGHT = 320
+
+function EnvelopeHandles({ adsr, sec, onDragStart, onDrag, onDragEnd }) {
+  const ref = useRef(null)
+  const a = stageSeconds(adsr.attack)
+  const d = stageSeconds(adsr.decay)
+  const gate = a + d + 1
+  const r = stageSeconds(adsr.release)
+  const y = (level) => PAD + (HEIGHT - PAD * 2) * (1 - level / 100)
+  const pts = [
+    { id: 'a', x: a / sec, y: y(100), label: 'A' },
+    { id: 'ds', x: (a + d) / sec, y: y(adsr.sustain), label: 'D · S' },
+    { id: 'r', x: (gate + r) / sec, y: y(0), label: 'R' },
+  ]
+  const drag = (id) => (e) => {
+    e.preventDefault()
+    e.currentTarget.setPointerCapture(e.pointerId)
+    onDragStart()
+    const move = (ev) => {
+      const box = ref.current.getBoundingClientRect()
+      const t = Math.max(0, ((ev.clientX - box.left) / box.width) * sec)
+      const level = Math.max(0, Math.min(100, (1 - (ev.clientY - box.top - PAD) / (HEIGHT - PAD * 2)) * 100))
+      if (id === 'a') onDrag({ attack: knobFor(t) })
+      else if (id === 'ds') onDrag({ decay: knobFor(t - a), sustain: level })
+      else onDrag({ release: knobFor(t - gate) })
+    }
+    const up = () => { window.removeEventListener('pointermove', move); window.removeEventListener('pointerup', up); onDragEnd() }
+    window.addEventListener('pointermove', move)
+    window.addEventListener('pointerup', up)
+  }
+  return (
+    <div ref={ref} className="pointer-events-none absolute inset-x-0 top-0" style={{ height: HEIGHT }}>
+      {pts.map((pt) => (
+        <button
+          key={pt.id}
+          type="button"
+          aria-label={`Drag ${pt.label}`}
+          onPointerDown={drag(pt.id)}
+          className="pointer-events-auto absolute flex h-5 w-5 -translate-x-1/2 -translate-y-1/2 cursor-grab touch-none items-center justify-center rounded-full"
+          style={{ left: `${Math.min(1, pt.x) * 100}%`, top: pt.y }}
+        >
+          <span className="block h-2.5 w-2.5 rounded-full border border-oq-64 bg-surface-primary" />
+        </button>
+      ))}
+    </div>
+  )
+}
+
 function Field({ label, value, onCommit }) {
   return (
     <label className="flex items-center gap-2">
@@ -37,20 +100,21 @@ function Field({ label, value, onCommit }) {
 
 export default function EnvelopeGenerator({
   defaultMode = 'equation', defaultExpr = 'wave(t)', defaultAdsr = ADSR_DEFAULTS,
-  saved, savedAdsr, reference = true, onChange, className = '',
+  saved, savedAdsr, onSave, reference = true, onChange, className = '',
 }) {
   const [mode, setMode] = useState(defaultMode)
   const [expr, setExpr] = useState(defaultExpr)
   const [adsr, setAdsr] = useState({ ...ADSR_DEFAULTS, ...defaultAdsr })
   const [cycle, setCycle] = useState(true)
   const [view, setView] = useState({ min: 0, max: 100, sec: 5, ofs: 0 })
+  const [heldSec, setHeldSec] = useState(null)   // the ADSR window, frozen while a handle drags
 
   const compiled = useMemo(() => compileExpression(expr), [expr])
   const adsrSec = envelopeLength(adsr)
   const sample = mode === 'equation'
     ? (t) => compiled.fn(t, Math.round(t * 60), 0, 100)
     : (t) => envelopeAt(t, adsr, { cycle })
-  const sec = mode === 'equation' ? view.sec : adsrSec
+  const sec = mode === 'equation' ? view.sec : (heldSec ?? adsrSec)
   const ofs = mode === 'equation' ? view.ofs : 0
 
   const emit = (patch) => onChange?.({ mode, expr, adsr, ...view, ...patch })
@@ -64,8 +128,8 @@ export default function EnvelopeGenerator({
   const reset = () => change.view({ min: 0, max: 100, sec: 5, ofs: 0 })
   const pick = (code) => {
     if (mode === 'equation') { change.expr(code); return }
-    const preset = ADSR_PRESETS.find((p) => p.id === code)
-    if (preset) change.adsr(preset.params)
+    const params = ADSR_PRESETS.find((p) => p.id === code)?.params ?? parseAdsr(code)
+    if (params) change.adsr(params)
   }
 
   return (
@@ -81,11 +145,18 @@ export default function EnvelopeGenerator({
               className={compiled.ok ? '' : 'text-[var(--kol-ctl-led-red)]'}
             />
           )}
-          <SignalScope sample={sample} min={mode === 'equation' ? view.min : 0} max={mode === 'equation' ? view.max : 100} sec={sec} ofs={ofs} />
+          <div className="relative">
+            <SignalScope sample={sample} min={mode === 'equation' ? view.min : 0} max={mode === 'equation' ? view.max : 100} sec={sec} ofs={ofs} height={HEIGHT} />
+            {mode === 'adsr' && (
+              <EnvelopeHandles adsr={adsr} sec={sec}
+                onDragStart={() => setHeldSec(adsrSec)} onDrag={change.adsr} onDragEnd={() => setHeldSec(null)} />
+            )}
+          </div>
           {mode === 'equation' ? (
             <>
               <div className="flex items-center justify-between">
                 <Button variant="ghost" size="sm" iconLeft="maximize" onClick={fit}>Fit</Button>
+                {onSave && <Button variant="ghost" size="sm" iconLeft="save" onClick={() => onSave({ mode, code: expr })}>Save</Button>}
                 <Button variant="ghost" size="sm" iconLeft="refresh" onClick={reset}>Reset</Button>
               </div>
               <div className="flex flex-wrap items-center justify-between gap-3">
@@ -102,6 +173,7 @@ export default function EnvelopeGenerator({
               ))}
               <Toggle value={cycle} onChange={setCycle} label="cycle" />
               <span className="kol-helper-10 text-fg-48">{adsrSec.toFixed(2)} s</span>
+              {onSave && <Button variant="ghost" size="sm" iconLeft="save" onClick={() => onSave({ mode, code: adsrCode(adsr) })}>Save</Button>}
             </div>
           )}
         </div>