@kolkrabbi/kol-hardware 0.6.0 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-hardware",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "private": false,
   "description": "Panel controls for instruments",
   "license": "MIT",
@@ -20,9 +20,9 @@
     "react-dom": "^18.3.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@kolkrabbi/kol-icons": "^0.41.0",
-    "@kolkrabbi/kol-component": "^0.287.0",
-    "@kolkrabbi/kol-theme": "^0.183.0"
+    "@kolkrabbi/kol-component": "^0.301.0",
+    "@kolkrabbi/kol-icons": "^0.45.0",
+    "@kolkrabbi/kol-theme": "^0.189.0"
   },
   "files": [
     "src",

package/src/frames/FlipCard.jsx

@@ -4,22 +4,30 @@
  * to its patch panel. The body turns; everything around it holds still, so the back is the same
  * shaped object as the front.
  *
+ * THE FACES SWAP BY BACKFACE, NOT BY A CLOCK (FlipCardFaceSwap, kol-monitor 2026-10-24 — user: *"the card flipps,
+ * but the image snaps in once its landed. not believable."*). It swapped `visibility` at a fixed duration / 2, but
+ * `ease` crosses edge-on at ~a third of the turn, so from there to the swap neither face showed — a blank card for
+ * ~110ms of a 450 — and the back popped in near the end. Both faces hide their backface and the back is pre-rotated
+ * 180° in the preserve-3d turner, so the back shows exactly as the card passes edge-on, whatever the easing. The
+ * face that is away is `inert` (and aria-hidden), which is what the visibility had been for: out of tab order.
+ *
  * @param {boolean}   flipped
  * @param {ReactNode} front · back
  * @param {number|string} width   the card's width (the back is laid over the front at it)
  * @param {number}    duration    ms (default 450, mirror's)
  */
 export default function FlipCard({ flipped = false, front, back, width, duration = 450, className = '' }) {
-  const half = `visibility 0s ${duration / 2}ms`
+  const hidden = { backfaceVisibility: 'hidden', WebkitBackfaceVisibility: 'hidden' }
   return (
     <div className={className} style={{ perspective: 1400, position: 'relative', width }}>
       <div style={{ transition: `transform ${duration}ms ease`, transformStyle: 'preserve-3d', transform: flipped ? 'rotateY(180deg)' : 'none' }}>
-        <div style={{ backfaceVisibility: 'hidden', transition: half, visibility: flipped ? 'hidden' : 'visible' }}>
+        <div aria-hidden={flipped || undefined} inert={flipped || undefined} style={hidden}>
           {front}
         </div>
         <div
-          aria-hidden={!flipped}
-          style={{ position: 'absolute', inset: 0, transform: 'rotateY(180deg)', backfaceVisibility: 'hidden', overflowY: 'auto', scrollbarWidth: 'none', transition: half, visibility: flipped ? 'visible' : 'hidden' }}
+          aria-hidden={!flipped || undefined}
+          inert={!flipped || undefined}
+          style={{ position: 'absolute', inset: 0, transform: 'rotateY(180deg)', overflowY: 'auto', scrollbarWidth: 'none', ...hidden }}
         >
           {back}
         </div>

package/src/panel/SignalReference.jsx

@@ -73,7 +73,7 @@ function Tabs({ sections, tabs, saved, onPick, onAppend }) {
       <TabsRow tabs={visible} value={current?.id} onChange={setTab} />
       <div className="flex min-h-0 flex-col gap-4 overflow-y-auto">
         {current?.id === 'saved' && !saved?.length
-          ? <div className="kol-helper-10 text-fg-48">Nothing saved yet.</div>
+          ? <div className="kol-mono-10 text-fg-48">Nothing saved yet.</div>
           : list.map((s) => <Section key={s.title} section={s} onPick={onPick} onAppend={onAppend} showTitle={list.length > 1} />)}
       </div>
     </div>
@@ -93,7 +93,7 @@ function Panel({ sections, tabs, saved, onPick, onAppend }) {
       </div>
       <div className="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4" style={{ scrollbarWidth: 'none' }}>
         {current?.id === 'saved' && !saved?.length
-          ? <div className="kol-helper-10 text-fg-48">Nothing saved yet.</div>
+          ? <div className="kol-mono-10 text-fg-48">Nothing saved yet.</div>
           : list.map((s) => <Section key={s.title} section={s} onPick={onPick} onAppend={onAppend} showTitle={list.length > 1} />)}
       </div>
     </div>

package/src/value/EnvelopeGenerator.jsx

@@ -189,7 +189,8 @@ function EnvelopeHandles({ adsr, sec, onDragStart, onDrag, onDragEnd }) {
  *
  * 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. `now`
- * (`() => t`) hands the clock to the host — a desk transport — and the scope reads it instead.
+ * (`() => t`) hands the clock to the host — a desk transport — and the scope reads it instead;
+ * Play/Pause, BPM and Trigger are then not drawn, since the host's transport does their jobs.
  *
  * 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
@@ -225,14 +226,18 @@ export default function EnvelopeGenerator({ generator, reference = 'panel', clas
   const passSec = mode === 'equation' ? sec : envelopeLength(adsr)
   const panel = reference === true || reference === 'panel'
 
+  /* a host clock (`now`) owns play, speed and restart — the controls for them would do nothing, so
+   * they are not drawn (EnvelopeGeneratorHostClockControls, kol-mirror 2026-10-22). Cycle still
+   * acts: it decides whether the host's time wraps over the pass or holds at its end. */
+  const ownClock = !g.now
   const transport = (
     <div className="flex h-6 shrink-0 items-center gap-3">
-      <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))))} />
+      {ownClock && <Button tone="ghost" size="sm" iconOnly={g.playing ? 'pause' : 'play'} aria-label={g.playing ? 'Pause' : 'Play'} onClick={() => g.setPlaying(!g.playing)} />}
+      {ownClock && <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 tone="ghost" size="sm" onClick={g.fire}>Trigger</Button>
+          {ownClock && <Button tone="ghost" size="sm" onClick={g.fire}>Trigger</Button>}
         </>
       )}
       <span className="ml-auto text-fg-48">{mode === 'adsr' ? `${passSec.toFixed(2)} s` : ''}</span>