@kolkrabbi/kol-theme 0.141.0 → 0.143.0

package/kol-components-molecules.css

@@ -1834,3 +1834,113 @@
   color: var(--kol-tone-pressed-fg);
 }
 
+
+/* ─────────────────────────── DocsToc · rail ───────────────────────────
+ * The fisheye rail render of `DocsToc` (`variant="rail"`, docstoc-rail-variant,
+ * kol-client-olina 2026-09-03 — built and run there before filing).
+ *
+ * `--m` is the gaussian magnitude (0..1) the component writes per row on
+ * pointer move; EVERY visual here derives from it, so the JS sets one number
+ * per row and the cascade does the rest. This is CSS rather than utilities
+ * because each rule reads a custom property through `calc()` and sets a
+ * child's resting state from the row's variable — neither is expressible as a
+ * Tailwind class, which is the §5 test for when a rule belongs in the theme.
+ * ────────────────────────────────────────────────────────────────────── */
+
+.kol-toc {
+  position: fixed;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: var(--kol-z-sticky);
+  display: flex;
+  flex-direction: column;
+  padding-block: var(--kol-spacing-8);
+}
+/* The lens scales about the edge the rail is pinned to, so the column's outer
+ * edge stays a straight line while the type breathes. The wide inner padding is
+ * the lens's room to grow into without the labels colliding with the page. */
+.kol-toc--right {
+  right: 0;
+  align-items: flex-end;
+  padding-right: var(--kol-spacing-6);
+  padding-left: var(--kol-spacing-16);
+}
+.kol-toc--left {
+  left: 0;
+  align-items: flex-start;
+  padding-left: var(--kol-spacing-6);
+  padding-right: var(--kol-spacing-16);
+}
+
+.kol-toc-row {
+  --m: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--kol-spacing-3);
+  padding-block: 2px;
+  text-decoration: none;
+}
+.kol-toc--right .kol-toc-row { justify-content: flex-end; }
+.kol-toc--left  .kol-toc-row { flex-direction: row-reverse; justify-content: flex-end; }
+
+/* Away from the pointer the row is small and quiet; under it, large and lit.
+ * BOTH directions matter — grow-only reads as a bump, not a scrub. */
+.kol-toc-label {
+  /* `transform` is ignored on a non-replaced INLINE element, and this label is
+   * a bare <span>: the scale below did nothing at all until this line. It cost
+   * the filer a round trip with the user — opacity and width worked and only
+   * the scale did not. */
+  display: inline-block;
+  white-space: nowrap;
+  opacity: calc(0.26 + 0.74 * var(--m));
+  transform: scale(calc(0.78 + 0.42 * var(--m)));
+  will-change: transform, opacity;
+}
+.kol-toc--right .kol-toc-label { transform-origin: right center; }
+.kol-toc--left  .kol-toc-label { transform-origin: left center; }
+
+.kol-toc-rule {
+  height: 1px;
+  background: var(--kol-fg-24);
+  width: calc(8px + 26px * var(--m));
+}
+
+/* The section you are actually IN reads at rest — full ink and a size step — so
+ * the column says where you are before the pointer arrives. It rests where an
+ * inactive row lands only under the lens. */
+.kol-toc-row[data-active] .kol-toc-label {
+  opacity: calc(0.92 + 0.08 * var(--m));
+  transform: scale(calc(1 + 0.2 * var(--m)));
+  color: var(--kol-fg-96);
+}
+.kol-toc-row[data-active] .kol-toc-rule {
+  width: calc(22px + 26px * var(--m));
+  background: var(--kol-fg-64);
+}
+
+/* Settle on leave — NEVER while the pointer is driving. A transition on a
+ * continuous input lags behind the cursor and reads as sluggish; the component
+ * stamps `data-live` on pointer-enter, which is what this selector reads. */
+.kol-toc:not([data-live]) .kol-toc-label,
+.kol-toc:not([data-live]) .kol-toc-rule {
+  transition: opacity 260ms ease-out, transform 260ms ease-out, width 260ms ease-out;
+}
+
+/* Graduations — the ruler between the labels. Shorter and fainter than a
+ * heading's stroke at every point of the curve, so the labelled marks stay the
+ * ones you read; they exist to give the lens something continuous to cross.
+ * 3px pitch: ten between labels puts a section at ~52px, so a thirteen-section
+ * page still stands inside a laptop viewport. */
+.kol-toc-tick { height: 3px; padding-block: 0; }
+.kol-toc-tick .kol-toc-rule {
+  width: calc(5px + 11px * var(--m));
+  background: var(--kol-fg-12);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .kol-toc-label { opacity: 1; transform: none; }
+  .kol-toc-rule  { width: 12px; }
+  .kol-toc-row[data-active] .kol-toc-rule { width: 24px; }
+  .kol-toc-tick .kol-toc-rule { width: 5px; }
+  .kol-toc-label, .kol-toc-rule { transition: none; }
+}

package/kol-components-organisms.css

@@ -696,3 +696,207 @@
   width: calc((100cqw - (var(--kol-catalog-n, 6) - 1) * 24px) / var(--kol-catalog-n, 6));
 }
 
+
+/* ─────────────────────────── LayerStack ───────────────────────────────
+ * The layers panel (editor-panels-the-held-specs A1, kol-fxr 2026-09-03).
+ * Values are the engine's `.kol-compose-layer-*` rules verbatim, renamed:
+ * the DS owns this chrome now, and two owners of one class name is the drift
+ * this estate keeps paying for. CSS rather than utilities because the states,
+ * the drop indicators (pseudo-elements) and the hover-reveal (a descendant
+ * rule off `[data-layer-stack]:hover`) are not expressible as classes on the
+ * element.
+ * ───────────────────────────────────────────────────────────────────── */
+
+.kol-layer-stack-line {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+.kol-layer-stack-collapse {
+  width: 16px;
+  height: 16px;
+  flex: 0 0 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--kol-fg-64);
+  padding: 0;
+}
+.kol-layer-stack-collapse:hover { color: var(--kol-surface-on-primary); }
+/* Chevrons are focus chrome, not resting chrome (Figma model): hidden until
+   the pointer is inside the stack, then every container row shows its own. */
+.kol-layer-stack-collapse { opacity: 0; transition: opacity 120ms; }
+[data-layer-stack]:hover .kol-layer-stack-collapse { opacity: 1; }
+/* Indent nested rows one chevron slot per level — a child's type icon aligns
+   under its parent's icon, not its name. Top-level rows sit flush. */
+.kol-layer-stack-nest { padding-left: 16px; }
+
+.kol-layer-stack-row {
+  display: flex;
+  align-items: center;
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 4px 60px 4px 8px;  /* right padding reserves the two absolutely-
+                                 positioned toggle buttons */
+  color: var(--kol-fg-64);
+  border-radius: 4px;
+  cursor: grab;
+  position: relative;
+}
+.kol-layer-stack-row:hover {
+  background: var(--kol-fg-04);
+  color: var(--kol-surface-on-primary);
+}
+/* Selected = accent highlight; a selected container also tints its expanded
+   children block one shade lighter (Figma model). Hover stays grey. */
+.kol-layer-stack-row.is-active {
+  background: color-mix(in srgb, var(--kol-accent-primary) 26%, transparent);
+  color: var(--kol-fg-emphasis);
+}
+.kol-layer-stack-row.is-tinted {
+  background: color-mix(in srgb, var(--kol-accent-primary) 11%, transparent);
+}
+/* Hidden layer — dim the icon + name only; the slashed eye stays legible. */
+.kol-layer-stack-row.is-hidden .kol-layer-stack-main { opacity: 0.4; }
+.kol-layer-stack-row.is-dragging { opacity: 0.4; cursor: grabbing; }
+.kol-layer-stack-row[draggable]:active { cursor: grabbing; }
+
+/* Drop indicator — 2px accent line at the top or bottom of the target row. */
+.kol-layer-stack-row.is-drop-above::before,
+.kol-layer-stack-row.is-drop-below::after {
+  content: '';
+  position: absolute;
+  left: 4px;
+  right: 4px;
+  height: 2px;
+  background: var(--kol-accent-primary);
+  pointer-events: none;
+  z-index: 1;
+}
+.kol-layer-stack-row.is-drop-above::before { top: -1px; }
+.kol-layer-stack-row.is-drop-below::after  { bottom: -1px; }
+
+.kol-layer-stack-main {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1 1 auto;
+  min-width: 0;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: inherit;
+  padding: 0;
+  text-align: left;
+}
+.kol-layer-stack-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+}
+
+/* The eye and the lock: absolute in the row's reserved right padding, hidden
+   until the row is hovered, PINNED visible when the layer is hidden / locked
+   or the row is active (`.is-pinned`), so a toggled state is never a secret. */
+.kol-layer-stack-toggle {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  border-radius: 4px;
+  padding: 0;
+  cursor: pointer;
+  color: var(--kol-oq-48);
+  opacity: 0;
+  transition: opacity 120ms;
+}
+.kol-layer-stack-toggle--eye  { right: 28px; }
+.kol-layer-stack-toggle--lock { right: 0; }
+.kol-layer-stack-row:hover .kol-layer-stack-toggle,
+.kol-layer-stack-toggle.is-pinned { opacity: 1; }
+.kol-layer-stack-toggle:hover { color: var(--kol-fg-emphasis); background: var(--kol-fg-08); }
+.kol-layer-stack-toggle.is-on { color: var(--kol-accent-primary); }
+
+/* ── ColumnBrowser · the mobile four-zone row ──────────────────────────
+ * ColumnBrowserMobileViews §1 (kol-r2b2, 2026-09-03). Height follows zone 2,
+ * the 44px thumbnail: 60px, not the DS Table's `12px 16px`, which is right for
+ * a 14px glyph and three times too airy for a thumbnail. The divider starts at
+ * ZONE 3's left edge — 14 disclosure + 8 gap + 44 icon + 8 gap = 74 — which is
+ * what both references draw and what a utility cannot express, since it is a
+ * pseudo-element inset on a sibling boundary.
+ * ─────────────────────────────────────────────────────────────────────── */
+.kol-column-browser-row--zones {
+  min-height: 60px;
+  position: relative;
+}
+.kol-column-browser-row--zones + .kol-column-browser-row--zones::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 74px;   /* zone 3's left edge */
+  right: 0;
+  height: 1px;
+  background: var(--kol-oq-08);
+  pointer-events: none;
+}
+/* the thumbnail fills its box and crops — a media tile is the image, not a
+   letterboxed one */
+.kol-column-browser-thumb img,
+.kol-column-browser-thumb video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+/* ── ColumnBrowser · the mobile grid (item 14) ─────────────────────────
+ * 3-up below `md`. For a media bucket the thumbnail IS the tile, so the box is
+ * square and the name sits under it; counts, not dates (§2). */
+.kol-column-browser-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--kol-spacing-3);
+  padding: var(--kol-spacing-3);
+}
+.kol-column-browser-tile {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kol-spacing-1);
+  min-width: 0;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  padding: 0;
+  text-align: left;
+}
+.kol-column-browser-tile-box {
+  aspect-ratio: 1;
+  border-radius: 5px;
+  background: var(--kol-oq-04);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+.kol-column-browser-tile-box img,
+.kol-column-browser-tile-box video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.kol-column-browser-tile.is-selected .kol-column-browser-tile-box {
+  outline: 2px solid var(--kol-accent-primary);
+  outline-offset: 1px;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-theme",
-  "version": "0.141.0",
+  "version": "0.143.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",