@kolkrabbi/kol-theme 0.130.0 → 0.131.0

package/kol-animation.css

@@ -333,8 +333,9 @@
  * kol-component's `utilities/motion.js`, GRAB); `clamp()` holds it half its own
  * length from either end so it stops flush, never past.
  *
- * Longer and finer than the ColumnBrowser's 3 × 32 — on a rail it should read
- * as a thickening of the line, not a tab stuck to it. The fade is long and
+ * Fine and long — it should read as a thickening of the line, not a tab stuck
+ * to it. (This said "longer and finer than the ColumnBrowser's 3 × 32" until
+ * 2026-09-02; that handle takes the same 0.125 × 4.5rem now.) The fade is long and
  * unhurried at BOTH ends on a symmetric in-out: an ease-out popped the first
  * 20 % and crawled the rest, which the user read as a jerk.
  * ═════════════════════════════════════════════════════════════════════ */
@@ -370,6 +371,18 @@
   .kol-rail-grab::before { transition: none; }
 }
 
+/* The ColumnBrowser's two handles wear the SAME pill (BrowsePageRulingsAndSeams,
+ * kol-r2b2 2026-09-02, user ruling) — `useGrabEdge` drives both. Their geometry
+ * and placement differ and stay with the component in
+ * kol-components-molecules.css (the strips sit INSIDE the border they grab, and
+ * there are two axes); only the reduced-motion cut belongs here, with every
+ * other one. The 08-28 note on the rail's pill — "Longer and finer than the
+ * ColumnBrowser's 3 × 32" — is stale: they are the same 0.125 × 4.5rem now. */
+@media (prefers-reduced-motion: reduce) {
+  .kol-column-browser-resize-x::before,
+  .kol-column-browser-resize-y::before { transition: none; }
+}
+
 /* ═════════════════════════════════════════════════════════════════════
  * SCROLL ENTRANCE — the reveal family (promoted from kol-website's
  * apps/web/src/styles/animations.css, 2026-08-28, on the user's "it's good to

package/kol-components-molecules.css

@@ -1351,33 +1351,74 @@
   cursor: row-resize;
   touch-action: none;
 }
-/* THE GRAB IS A PILL, NOT A WASH (ColumnBrowserChromeCorrections, kol-r2b2
- * 2026-08-28 — user: "dont show me this way to grab" · "like in the sidenav" ·
- * "MIDDLE smack middle" · "more smooth animation longer in and out"): the same
- * affordance as the framework's `.kol-sidenav-grab::before` — 0.1875rem × 2rem,
- * radius-full, fg-64, dead centre (pointer-following was built and rejected).
- * Two deliberate differences: hidden at rest rather than dim (N handles standing
- * at rest is noise where the SideNav has one) and 420ms rather than 150ms. */
+/* THE GRAB PILL — ON THE LINE, FOLLOWING THE POINTER (BrowsePageRulingsAndSeams,
+ * kol-r2b2 2026-09-02, user ruling; supersedes the "pointer-following was built
+ * and rejected" note that stood here from ColumnBrowserChromeCorrections
+ * 2026-08-28).
+ *
+ * The rejection was already contradicted by the DS itself: the rail's grab
+ * (`kol-animation.css` § THE GRAB PILL, RailFlatGrabOpen, kol-mirror 2026-08-28
+ * — *"make it like it is in kol-r2b2, it has animation and gsap"*) shipped the
+ * pointer-follow, the 0.125 × 4.5rem geometry and the slow proximity fade the
+ * SAME DAY, and its own comment noted the two handles were knowingly different.
+ * One gesture, two shapes, is the ruling now. `useGrabEdge` drives both.
+ *
+ * THESE HANDLES ARE NOT THE SIDENAV'S, and that is the part to keep straight:
+ *
+ *   ACROSS  the rail's strip STRADDLES its line, so a strip-centred pill IS the
+ *           line. These strips lie INSIDE the border they grab — the x strip is
+ *           pulled back over the column's right edge (`margin-left: -8px`), the
+ *           y strip sits on the root's inner bottom edge — so a strip-centred
+ *           pill is always ~4px short of it. The FAR edge plus half the 1px
+ *           border is the line: `calc(100% + 0.5px)`.
+ *   AXES    the rail has one vertical edge; there are two here, and the pill on
+ *           each travels the other way from what it resizes. The x handle reads
+ *           `--kol-rail-grab-y`, the y handle `--kol-rail-grab-x`.
+ *   REST    hidden, not dim — N handles standing at rest is noise where the
+ *           SideNav has one. The rail's pill rests visible; these do not.
+ *
+ * Shared with the rail, deliberately: the fine/long geometry, the 1800ms fade
+ * with its 400ms rest delay and 40ms engaged delay, and the symmetric in-out
+ * curve. The ease-out kol-r2b2 filed is the curve the rail moved OFF on
+ * 2026-08-28 (it popped the first 20 % and crawled the rest — the user read it
+ * as a jerk); the travel likewise comes from `GRAB` in kol-component's
+ * motion.js — dwell, not a 30px deadband — so one gesture cannot drift into two
+ * feels. `clamp()` holds the pill half its own length from each end. */
 .kol-column-browser-resize-x::before,
 .kol-column-browser-resize-y::before {
   content: '';
   position: absolute;
-  top: 50%;
-  left: 50%;
   translate: -50% -50%;
   border-radius: var(--kol-radius-full);
   background: var(--kol-fg-64);
   opacity: 0;
-  transition: opacity 420ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: opacity 1800ms cubic-bezier(0.45, 0, 0.55, 1) 400ms, background-color 500ms ease;
 }
-.kol-column-browser-resize-x::before { width: 0.1875rem; height: 2rem; }
-.kol-column-browser-resize-y::before { width: 2rem; height: 0.1875rem; }
-.kol-column-browser-resize-x:hover::before,
+.kol-column-browser-resize-x::before {
+  width: 0.125rem;
+  height: 4.5rem;
+  left: calc(100% + 0.5px);
+  top: clamp(2.25rem, var(--kol-rail-grab-y, 50%), calc(100% - 2.25rem));
+}
+.kol-column-browser-resize-y::before {
+  width: 4.5rem;
+  height: 0.125rem;
+  top: calc(100% + 0.5px);
+  left: clamp(2.25rem, var(--kol-rail-grab-x, 50%), calc(100% - 2.25rem));
+}
+/* `is-near` = the pointer is within GRAB.near of THIS handle's line (JS,
+ * hysteresis at GRAB.sleep). The pill shows before you are on the 8px strip, so
+ * the grab is discoverable instead of hidden. */
+.kol-column-browser-resize-x.is-near::before,
 .kol-column-browser-resize-x.is-dragging::before,
-.kol-column-browser-resize-y:hover::before,
+.kol-column-browser-resize-y.is-near::before,
 .kol-column-browser-resize-y.is-dragging::before {
   opacity: 1;
+  transition-delay: 40ms;
 }
+.kol-column-browser-resize-x.is-dragging::before,
+.kol-column-browser-resize-y.is-dragging::before { background: var(--kol-fg-96); }
+
 .kol-overlay .kol-prose {
   max-width: var(--kol-content-measure);
   margin-inline: auto;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-theme",
-  "version": "0.130.0",
+  "version": "0.131.0",
   "description": "KOL (Kolkrabbi) design-system tokens + base CSS — brand-neutral. The canonical token/cascade layer every other KOL package and consumer builds on.",
   "license": "MIT",
   "type": "module",