@kolkrabbi/kol-hardware 0.4.1 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-hardware",
-  "version": "0.4.1",
+  "version": "0.5.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-component": "^0.262.0",
+    "@kolkrabbi/kol-icons": "^0.38.0",
+    "@kolkrabbi/kol-theme": "^0.174.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/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>
   )
 }