@kolkrabbi/kol-hardware 0.6.1 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-hardware",
-  "version": "0.6.1",
+  "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-component": "^0.290.0",
-    "@kolkrabbi/kol-icons": "^0.41.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>