@kolkrabbi/kol-hardware 0.4.1 → 0.6.0

package/README.md

@@ -18,7 +18,7 @@ A different TIER from `kol-component`'s app atoms: a `kol-component` Slider is a
 | | `IconButton` | 1px-bordered icon key, momentary pulse |
 | indicators | `LED` | 6 / 8px lamp — red · yellow · green · white · blue, optional hit pad |
 | | `JackSocket`, `LabeledJack` | the 3.5mm jack, presentational: ring, hole, label, a rim that glows with `signalRef`. **Routing stays in the consumer** |
-| | `SignalScope` | the oscilloscope — a trace of any `sample(t)`, the knob range dashed, a live playhead; zoom X/Y, drag to pan, a clock `rate`, `loop` or one-shot on `trigger`, `height="fill"` |
+| | `SignalScope` | the oscilloscope — a trace of any `sample(t)`, the knob range dashed, a live playhead; zoom X/Y, drag to pan, a clock `rate` or a host's `now`, `loop` or one-shot on `trigger`, the played part in the accent, `height="fill"` |
 | panel | `PanelLabel` | label wrapper, four positions |
 | | `ModuleHeader` | Toggle + module name + edit-mode remove dot / bypass dot |
 | | `SignalReference` | an expression / envelope reference — `variant` `panel` (mirror's box) · `tabs` · `popover` (EX / REF) · `sheet` |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-hardware",
-  "version": "0.4.1",
+  "version": "0.6.0",
   "private": false,
   "description": "Panel controls for instruments",
   "license": "MIT",
@@ -13,16 +13,16 @@
     "./*": "./src/*"
   },
   "peerDependencies": {
-    "@kolkrabbi/kol-component": ">=0.238.0",
+    "@kolkrabbi/kol-component": ">=0.262.0",
     "@kolkrabbi/kol-icons": ">=0.25.0",
     "@kolkrabbi/kol-theme": ">=0.164.0",
     "react": "^18.3.0 || ^19.0.0",
     "react-dom": "^18.3.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@kolkrabbi/kol-component": "^0.238.0",
-    "@kolkrabbi/kol-icons": "^0.33.0",
-    "@kolkrabbi/kol-theme": "^0.164.0"
+    "@kolkrabbi/kol-icons": "^0.41.0",
+    "@kolkrabbi/kol-component": "^0.287.0",
+    "@kolkrabbi/kol-theme": "^0.183.0"
   },
   "files": [
     "src",

package/src/indicators/JackSocket.jsx

@@ -1,4 +1,5 @@
 import { useRef, useEffect } from 'react'
+import { Tooltip } from '@kolkrabbi/kol-component'
 
 /* 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
@@ -49,7 +50,8 @@ function stopJackLoop() {
  * @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
- * @param {string}     title
+ * @param {string}     title        the DS `Tooltip` (default `label`), on the jack itself; silent while a
+ *                                cable is pending anywhere, so a drag never flashes tooltips (HardwareNativeTitle)
  * @param {object|Function} ringRef  the RING element (ControlsJackSeams, kol-monitor 2026-09-01) — the
  *                                consumer's drag-to-patch registers it for hit-testing (pointerup finds
  *                                the nearest input ring centre); a ref object or a callback
@@ -113,11 +115,11 @@ export default function JackSocket({
   const hole = size === 'sm' ? 4 : 6
 
   return (
+    <Tooltip label={title ?? label} asChild disabled={pending || dimPending}>
     <div
       className="inline-flex flex-col items-center gap-0.5 select-none"
       style={{ cursor: type === 'out' ? 'grab' : (dimPending ? 'pointer' : 'default'), touchAction: 'none' }}
       onPointerDown={onPointerDown}
-      title={title ?? label}
     >
       <div
         className={(bg ?? type === 'out') ? 'bg-fg-04' : ''}
@@ -158,5 +160,6 @@ export default function JackSocket({
         </span>
       )}
     </div>
+    </Tooltip>
   )
 }

package/src/indicators/SignalScope.jsx

@@ -16,7 +16,13 @@ import { useEffect, useRef } from 'react'
  * THE CLOCK is the scope's: `rate` is time units per second (BPM / 60 for a beat clock), and
  * `playing` stops it where it is. `loop` (default) wraps the playhead over `sec`; off, the
  * playhead runs `0 → sec` once and holds at the end, and every change of `trigger` fires it
- * again — a one-shot envelope's gate.
+ * again — a one-shot envelope's gate. `now` hands the clock to the host instead: a
+ * `() => t` read every frame (mirror's desk transport), and `rate` / `playing` stop applying.
+ *
+ * THE PLAYED PART IS THE ACCENT (SignalScopePlayedTraceAndClock, kol-mirror): while live, the
+ * curve is faint and the trace up to the playhead, the playhead and its dot take
+ * `--kol-slider-playhead` (the accent unless a host overrides it) — where the position is in the
+ * signal, at a glance.
  *
  * @param {(t:number)=>number} sample
  * @param {number} min · max       the view (default 0…100)
@@ -30,20 +36,21 @@ import { useEffect, useRef } from 'react'
  * @param {number}  rate           time units per second (default 1)
  * @param {boolean} loop           wrap the playhead (default true); off = one pass per `trigger`
  * @param {number}  trigger        a counter — each change restarts the pass
+ * @param {()=>number} now         an external clock (time units); overrides the scope's own
  * @param {number|'fill'} height   px (default 320), or `fill` to take the parent's height
  */
 const css = (el, name, fallback) => getComputedStyle(el).getPropertyValue(name).trim() || fallback
 
 export default function SignalScope({
   sample, min = 0, max = 100, sec = 5, ofs = 0, zoomX = 1, zoomY = 1, panY = 0, onPan,
-  refLines = [0, 100], live = true, playing = true, rate = 1, loop = true, trigger = 0,
+  refLines = [0, 100], live = true, playing = true, rate = 1, loop = true, trigger = 0, now,
   height = 320, className = '',
 }) {
   const ref = useRef(null)
   const args = useRef({})
   const drawRef = useRef(null)
   const clock = useRef({ t: 0, last: 0 })
-  args.current = { sample, min, max, sec, ofs, zoomX, zoomY, panY, refLines, live, playing, rate, loop }
+  args.current = { sample, min, max, sec, ofs, zoomX, zoomY, panY, refLines, live, playing, rate, loop, now }
 
   // a trigger restarts the pass
   useEffect(() => { clock.current.t = 0 }, [trigger])
@@ -59,7 +66,8 @@ export default function SignalScope({
       const now = performance.now()
       const dt = (now - clock.current.last) / 1000
       clock.current.last = now
-      if (a.live && a.playing) clock.current.t += dt * a.rate
+      if (a.now) clock.current.t = a.now()
+      else if (a.live && a.playing) clock.current.t += dt * a.rate
       const fn = a.sample
       const dpr = window.devicePixelRatio || 1
       const { width: w, height: h } = canvas.getBoundingClientRect()
@@ -71,6 +79,7 @@ export default function SignalScope({
       ctx.clearRect(0, 0, w, h)
       const ink = css(canvas, '--kol-surface-on-primary', '#e8e4dc')
       const red = css(canvas, '--kol-ctl-led-red', '#e74c3c')
+      const accent = css(canvas, '--kol-slider-playhead', css(canvas, '--kol-accent-primary', ink))
       const pad = 12
       const span = (a.max - a.min) / (a.zoomY || 1) || 1
       const lo = (a.min + a.max) / 2 + a.panY - span / 2
@@ -101,26 +110,35 @@ export default function SignalScope({
       ctx.fillStyle = ink
       ctx.fillText(fmt(hi), 4, pad + 9)
       ctx.fillText(fmt(lo), 4, h - pad - 3)
-      // trace
-      ctx.globalAlpha = 1
-      ctx.strokeStyle = ink
-      ctx.lineWidth = 1.5
-      ctx.beginPath()
-      for (let x = 0; x <= w; x++) {
-        const y = toY(fn ? fn(a.ofs + (x / w) * dur) : lo)
-        if (x === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y)
+      const trace = (to) => {
+        ctx.beginPath()
+        for (let x = 0; x <= to; x++) {
+          const y = toY(fn ? fn(a.ofs + (x / w) * dur) : lo)
+          if (x === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y)
+        }
+        ctx.stroke()
       }
-      ctx.stroke()
+      const played = a.live && fn
+      // trace — faint under a playhead, the played part drawn over it
+      ctx.globalAlpha = played ? 0.15 : 1
+      ctx.strokeStyle = ink
+      ctx.lineWidth = played ? 1 : 1.5
+      trace(w)
+      ctx.globalAlpha = 1
       // playhead — over the base window, whatever the zoom (mirror's)
-      if (a.live && fn) {
-        const t = a.loop ? clock.current.t % a.sec : Math.min(clock.current.t, a.sec)
+      if (played) {
+        const t = a.loop ? ((clock.current.t % a.sec) + a.sec) % a.sec : Math.max(0, Math.min(clock.current.t, a.sec))
         const px = toX(t)
+        ctx.strokeStyle = accent
+        ctx.lineWidth = 2
+        if (px > 0) trace(Math.min(px, w))
         if (px >= 0 && px <= w) {
           const py = toY(fn(t))
-          ctx.globalAlpha = 0.25
+          ctx.globalAlpha = 0.4
+          ctx.lineWidth = 1
           ctx.beginPath(); ctx.moveTo(px, 0); ctx.lineTo(px, h); ctx.stroke()
           ctx.globalAlpha = 1
-          ctx.fillStyle = ink
+          ctx.fillStyle = accent
           ctx.beginPath(); ctx.arc(px, py, 3, 0, Math.PI * 2); ctx.fill()
         }
       }

package/src/panel/ModuleHeader.jsx

@@ -1,3 +1,4 @@
+import { Tooltip } from '@kolkrabbi/kol-component'
 import Toggle from '../switches/Toggle.jsx'
 
 /**
@@ -22,17 +23,19 @@ export default function ModuleHeader({ label, enabled, onToggle, powered = true,
         {label}
       </span>
       {editMode && onRemove ? (
+        <Tooltip label="Send module to workbench" asChild>
         <div
           onClick={(e) => { e.stopPropagation(); onRemove() }}
-          title="Send module to workbench"
           style={{ width: 8, height: 8, borderRadius: '50%', backgroundColor: 'var(--kol-ctl-led-yellow)', cursor: 'pointer', flexShrink: 0 }}
         />
+        </Tooltip>
       ) : onBypass ? (
+        <Tooltip label={bypass ? 'Bypassed — click to re-engage' : 'Bypass'} asChild>
         <div
           onClick={(e) => { e.stopPropagation(); onBypass() }}
-          title={bypass ? 'Bypassed — click to re-engage' : 'Bypass'}
           style={{ width: 8, height: 8, borderRadius: '50%', backgroundColor: 'var(--kol-ctl-cv-attenuate)', opacity: bypass ? 0.25 : 1, cursor: 'pointer', flexShrink: 0 }}
         />
+        </Tooltip>
       ) : null}
     </div>
   )

package/src/switches/IconButton.jsx

@@ -1,5 +1,6 @@
 import { useState, useRef } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
+import { Tooltip } from '@kolkrabbi/kol-component'
 
 const PULSE_MS = 100
 
@@ -12,7 +13,8 @@ const PULSE_MS = 100
  * @param {string}   icon         icon name
  * @param {boolean}  active · disabled · momentary
  * @param {Function} onClick
- * @param {string}   title
+ * @param {string}   title        the DS `Tooltip`, attached to the key itself (HardwareNativeTitle,
+ *                                kol-monitor 2026-10-15 — no native `title`, no wrapper in a grid)
  * @param {number}   iconSize     (default 10)
  * @param {ElementType} iconComponent  icon renderer seam (default kol-icons `Icon`)
  */
@@ -32,9 +34,10 @@ export default function IconButton({ icon, active, onClick, title, momentary, di
   }
 
   return (
+    <Tooltip label={title} asChild>
     <button
       type="button"
-      title={title}
+      aria-label={title}
       onClick={handleClick}
       disabled={disabled}
       style={{
@@ -54,5 +57,6 @@ export default function IconButton({ icon, active, onClick, title, momentary, di
     >
       <IconCmp name={icon} size={iconSize} />
     </button>
+    </Tooltip>
   )
 }

package/src/value/EnvelopeGenerator.jsx

@@ -27,11 +27,11 @@ const adsrWindow = (adsr) => envelopeLength(adsr) * 1.15
 
 /**
  * useEnvelopeGenerator(options) — the generator's state, for a host that arranges the parts.
- * Takes the component's own options (`default*`, `saved`, `savedAdsr`, `onSave`, `onChange`).
+ * Takes the component's own options (`default*`, `saved`, `savedAdsr`, `onSave`, `onChange`, `now`).
  */
 export function useEnvelopeGenerator({
   defaultMode = 'equation', defaultExpr = 'wave(t)', defaultAdsr = ADSR_DEFAULTS,
-  saved, savedAdsr, onSave, onChange,
+  saved, savedAdsr, onSave, onChange, now,
 } = {}) {
   const [mode, setModeState] = useState(defaultMode)
   const [expr, setExprState] = useState(defaultExpr)
@@ -69,7 +69,7 @@ export function useEnvelopeGenerator({
   return {
     mode, setMode, expr, setExpr, compiled, adsr, setAdsr, view, setView, fit, reset,
     cycle, setCycle, playing, setPlaying, bpm, setBpm, trigger, fire: () => setTrigger((n) => n + 1),
-    heldSec, setHeldSec, save,
+    heldSec, setHeldSec, save, now,
     /* spread into <SignalReference> — the current mode's data, whichever shape it takes. Key the
      * element on `mode` so its open tab resets when the data changes under it. */
     reference: {
@@ -188,7 +188,8 @@ function EnvelopeHandles({ adsr, sec, onDragStart, onDrag, onDragEnd }) {
  * itself.
  *
  * TIME is the scope's clock: `bpm` sets its speed (60 BPM = one unit a second, so `t` reads as
- * seconds at the default and as beats at any other). Play / pause stops it where it is.
+ * seconds at the default and as beats at any other). Play / pause stops it where it is. `now`
+ * (`() => t`) hands the clock to the host — a desk transport — and the scope reads it instead.
  *
  * ADSR: four handles on the scope — A (attack time), D (decay time), S (at the end of the hold:
  * sideways = how long the gate holds, up/down = the sustain level), R (release time). The scope
@@ -205,6 +206,7 @@ function EnvelopeHandles({ adsr, sec, onDragStart, onDrag, onDragEnd }) {
  * @param {string}  defaultExpr
  * @param {object}  defaultAdsr        knob values 0…100, `hold` in seconds (`ADSR_DEFAULTS`)
  * @param {Array}   saved · savedAdsr  the host's own rows for each mode's Saved tab
+ * @param {()=>number} now           an external clock for the scope (overrides play / BPM)
  * @param {Function} onSave            `({ mode, code }) => void` — shows a Save button; `code` is the
  *                                     expression, or the envelope as `a10 d30 s70 r50 h1`
  */
@@ -270,6 +272,7 @@ export default function EnvelopeGenerator({ generator, reference = 'panel', clas
             rate={g.bpm / 60}
             loop={mode === 'equation' || g.cycle}
             trigger={g.trigger}
+            now={g.now}
             className="absolute inset-0"
           />
           {mode === 'adsr' && (