@kolkrabbi/kol-theme 0.188.0 → 0.190.0

package/kol-animation.css

@@ -202,38 +202,47 @@
  * Touch has no hover and gets nothing: the front is the card. Reduced
  * motion drops the turn's transition, so both flips become the cut.
  * ───────────────────────────────────────────────────────────────────── */
-.kol-card[data-back] .kol-card-turn-inner {
+/* THE WHOLE CARD TURNS (AppCardWholeFlip, kol-monitor 2026-10-24 — user: *"it doesnt truly flip the card, there is
+ * still the background that remains"*): `flip-card`'s attributes ride a TURNER around the card root, so the root — its
+ * ground included — is the front face and nothing stays behind; `flip-image` and `hover` still mark the root. The
+ * reveal is OPT-IN: hover (and keyboard focus) turn a card only under `data-back-hover` (*"hover flips card? default
+ * off"*), and `data-flipped` turns it on the consumer's word (*"make the cards flip on a shortcut"*) — a page turns
+ * every card on a key. The turn is monitor's: 450ms ease, both faces backface-hidden, never a timed visibility. */
+[data-back] .kol-card-turn-inner {
   position: relative;
 }
-.kol-card[data-back] .kol-card-face--back {
+[data-back] .kol-card-face--back {
   position: absolute;
   inset: 0;
 }
-.kol-card[data-back^="flip"] .kol-card-turn,
-.kol-card[data-back="flip-card"] {
+[data-back^="flip"] .kol-card-turn,
+[data-back="flip-card"].kol-card-turn {
   perspective: 1000px;
 }
-.kol-card[data-back^="flip"] .kol-card-turn-inner {
+[data-back^="flip"] .kol-card-turn-inner {
   transform-style: preserve-3d;
-  transition: transform 0.4s ease-out;
+  transition: transform 450ms ease;
 }
-.kol-card[data-back^="flip"] .kol-card-face {
+[data-back^="flip"] .kol-card-face {
   backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
 }
-.kol-card[data-back^="flip"] .kol-card-face--back {
+[data-back^="flip"] .kol-card-face--back {
   transform: rotateY(180deg);
 }
-.kol-card[data-back="hover"] .kol-card-face--back {
+[data-back="hover"] .kol-card-face--back {
   opacity: 0;
 }
 @media (hover: hover) {
-  .kol-card[data-back^="flip"]:hover .kol-card-turn-inner { transform: rotateY(180deg); }
-  .kol-card[data-back="hover"]:hover .kol-card-face--back { opacity: 1; }
+  [data-back^="flip"][data-back-hover]:hover .kol-card-turn-inner { transform: rotateY(180deg); }
+  [data-back="hover"][data-back-hover]:hover .kol-card-face--back { opacity: 1; }
 }
-.kol-card[data-back^="flip"]:focus-visible .kol-card-turn-inner { transform: rotateY(180deg); }
-.kol-card[data-back="hover"]:focus-visible .kol-card-face--back { opacity: 1; }
+[data-back^="flip"][data-back-hover]:focus-within .kol-card-turn-inner,
+[data-back^="flip"][data-flipped] .kol-card-turn-inner { transform: rotateY(180deg); }
+[data-back="hover"][data-back-hover]:focus-within .kol-card-face--back,
+[data-back="hover"][data-flipped] .kol-card-face--back { opacity: 1; }
 @media (prefers-reduced-motion: reduce) {
-  .kol-card[data-back^="flip"] .kol-card-turn-inner { transition: none; }
+  [data-back^="flip"] .kol-card-turn-inner { transition: none; }
 }
 
 /* ─────────────────────────────────────────────────────────────────────
@@ -441,6 +450,30 @@
 /* near is not enough for a line — it lights on the edge itself, not 20px out */
 .kol-rail-grab--line.is-near:not(:hover):not(.is-dragging):not(:focus-visible)::before { opacity: 0; }
 
+/* A HORIZONTAL EDGE wears the same pill, turned (his review 2026-10-25: *"why does bottom rail not have the same grab
+ * system as other rails?"* — `Rail resizable` drew a full-width wash until then). `--top` is a bottom rail's handle on
+ * its top edge, `--bottom` a top rail's on its bottom edge; the pill travels on x (`useGrabEdge({ axis: 'x' })`,
+ * `--kol-rail-grab-x`), held half its length from either end as the vertical one is. */
+.kol-rail-grab--top,
+.kol-rail-grab--bottom {
+  top: auto;
+  bottom: auto;
+  right: 0;
+  left: 0;
+  width: auto;
+  height: 8px;
+  cursor: row-resize;
+}
+.kol-rail-grab--top { top: -3.5px; }
+.kol-rail-grab--bottom { bottom: -3.5px; }
+.kol-rail-grab--top::before,
+.kol-rail-grab--bottom::before {
+  top: 50%;
+  left: clamp(2.25rem, var(--kol-rail-grab-x, 50%), calc(100% - 2.25rem));
+  width: 4.5rem;
+  height: 0.125rem;
+}
+
 /* A RIGHT-HAND RAIL's handle sits on its LEFT edge, facing the page (2026-09-30 — the modifier
  * EditorShell has stamped since 0.x, `kol-rail-grab--${side}`, had no rule, so a right rail's pill
  * sat on its outer edge; the workshop shell's right rail needs the same). */

package/kol-components-atoms.css

@@ -137,6 +137,10 @@
 .kol-control-sm { padding: 4px 12px; }
 .kol-control-md { padding: 6px 16px; }
 .kol-control-lg { padding: 8px 20px; }
+/* THE RAIL PRESET (his review 2026-10-25: *"change padding from 12 to 8 on input here and call it a variant or preset
+ * for input on rails"*): a control in a rail's row keeps its rung's height and takes 8 at the sides — a slider's
+ * readout chip is three digits, not a field. `Input preset="rail"`; the Slider's `readoutPreset` passes it on. */
+.kol-control--rail { padding-inline: 8px; }
 
 /* ─── Disabled ─── */
 

package/kol-components-shell.css

@@ -21,7 +21,9 @@
    * read kol-framework's `--kol-sidenav-w` for this, so an app that loads kol-framework.css
    * (fxr) opened to 320 on a wide screen and one that does not (mirror, monitor) fell back to
    * 264 — the same rail, two widths, decided by an unrelated import. */
-  --kol-shell-rail-open: 264px;
+  /* the open rail is the rail width — 380, the same as a side rail (his ruling 2026-10-25: *"navrail expanded also gets the
+     same width as we just set"*); it ramped 264 · 320 from 1536 until then */
+  --kol-shell-rail-open: 380px;
   /* Page gutter — PageShell's padding and PageBleed's negative margin.
    * ONE LADDER FOR THE ESTATE (two-page-scaffolds-one-job, kol-client-olina
    * 2026-09-03): this is `--kol-pad-section-x`, the page-content ladder every
@@ -36,7 +38,7 @@
    * pair cannot drift. */
   --kol-shell-page-pad: var(--kol-pad-section-x, clamp(20px, 5vw, 48px));
 }
-@media (min-width: 1536px) { :root { --kol-shell-rail-open: 320px; } }
+
 
 /* ── PageShell ──────────────────────────────────────────────────────────── */
 

package/kol-design-tokens.css

@@ -49,6 +49,22 @@
    * 24. CommandOverlay (field-aligned rows) and the Quick Look header (a toolbar) keep their own. */
   --kol-pad-overlay: var(--kol-spacing-5);
 
+  /* RAIL TIERS (RailKit, kol-monitor 2026-10-24 — user: *"currently settings is showing 380 wide and padding is totally
+   * different in the rail and the settings"*). One width and one padding per tier, the same `app` · `site` split the
+   * cards and the page headers take; `Rail variant` and `SettingsPanel tier` read them, so a page rail and the settings
+   * rail of one app cannot disagree. Both tiers are 380 — the settings rail as locked 2026-08-27; `app` stood at 320
+   * (the shell rail's open width on a wide screen) from 2026-10-24 until his ruling on round 18 the next day (*"why is
+   * settings now less wide? it was fine before?"*). fxr's inspector rides the shell rail's 264 · 320 ramp and monitor's
+   * patch table had 440 — their adoption items. The padding is the overlay inset in both — the 2026-10-18 ruling — named
+   * per tier so one can move without the other. */
+  --kol-rail-w-app: 380px;
+  --kol-rail-w-site: 380px;
+  /* THE RAIL'S INSET IS 16, EVERY RAIL, EVERY WIDTH (his review 2026-10-25: *"the entire padding on the bottom rail and
+     side rail is completely different then the navrail? why dont we unify?"* · then, on 20: *"MAKE 16!!!"*). It was the
+     overlay inset (20 · 24 from 768); an hour at the page's 48 read as *"you went backwards"*, 20 as still too much. */
+  --kol-pad-rail-app: var(--kol-spacing-4);
+  --kol-pad-rail-site: var(--kol-pad-overlay);
+
   /* CARD padding (2026-08-15, content-card ruling) — flat, stepped by the
    * card's `size` prop, never by breakpoint. 12/16/24. */
   --kol-pad-card-sm: 0.75rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-theme",
-  "version": "0.188.0",
+  "version": "0.190.0",
   "description": "Tokens and base CSS",
   "license": "MIT",
   "type": "module",