@kolkrabbi/kol-theme 0.74.0 → 0.76.0

package/kol-components-atoms.css

@@ -153,7 +153,7 @@
 .kol-overlay {
   position: fixed;
   inset: 0;
-  z-index: 100;
+  z-index: var(--kol-z-modal, 100); /* the modal tier — the overlay contract (EditorOverlaysOnFullscreenOverlay, 2026-08-27) */
   background: var(--kol-surface-primary);
   display: grid;
   place-items: center;

package/kol-components-molecules.css

@@ -111,7 +111,7 @@
   border-radius: var(--kol-radius-sm);
   box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.4),
               0 2px 6px -2px rgba(0, 0, 0, 0.3);
-  z-index: 1000;
+  z-index: var(--kol-z-tooltip, 300); /* the ladder's float tier, not nav's 1000 (EditorOverlaysOnFullscreenOverlay, user ruling 2026-08-27) */
   outline: none;
 }
 
@@ -130,7 +130,7 @@
   line-height: 1;
   white-space: nowrap;
   pointer-events: none;
-  z-index: 1000;
+  z-index: var(--kol-z-tooltip, 300); /* the ladder's float tier, not nav's 1000 (EditorOverlaysOnFullscreenOverlay, user ruling 2026-08-27) */
   box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.5);
 }
 
@@ -1182,7 +1182,69 @@
 /* Markdown is BOUNDED where it renders (SettingsPanelApproved, kol-r2b2
  * 2026-08-27): in the 320px column preview a document scaled to the frame; in
  * the overlay a readable sheet, not full-bleed over the page. */
-.kol-column-browser-preview .kol-prose { zoom: 0.5; }
+/* THE DOCUMENT PAGE — one plate for every document (DocPageAndKindShowcase,
+ * kol-r2b2 2026-08-27, user rulings): markdown · text · code · JSON · YAML on
+ * `.kol-doc-page`. WHERE it sits decides its presentation:
+ *   base       the plate — fg-04, radius sm, padding 24 (a demo, a page)
+ *   overlay    an A-series page: 85vh tall, 85vh / √2 wide, never wider than the
+ *              viewport minus the arrow gutters (10rem), scrolls inside
+ *   column     the same document zoomed 0.5 on the frame (no plate); the
+ *              children reset `zoom: 1` so it never compounds
+ * The code block INSIDE the page is transparent, borderless and full width —
+ * "yaml should follow json in the way it scales": it hugged short lines and sat
+ * as a second, darker plate. Prose is bounded by the page, not by its own
+ * measure; tables and pre wrap inside it. */
+.kol-doc-page {
+  background: var(--kol-fg-04);
+  border-radius: var(--kol-radius-sm);
+  padding: 24px;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.kol-doc-page .kol-codeblock-wrapper { margin: 0; }
+.kol-doc-page .kol-codeblock { background: transparent; border: 0; width: 100%; }
+.kol-doc-page .kol-prose { max-width: none; margin: 0; padding: 0; }
+.kol-doc-page .kol-prose table { max-width: 100%; }
+.kol-doc-page .kol-prose td,
+.kol-doc-page .kol-prose th { overflow-wrap: anywhere; word-break: break-word; }
+.kol-doc-page .kol-prose pre { white-space: pre-wrap; overflow-wrap: anywhere; }
+.kol-overlay .kol-doc-page {
+  height: 85vh;
+  width: calc(85vh / 1.41421);
+  max-width: calc(100vw - 10rem);
+  overflow-y: auto;
+  overflow-x: hidden;
+  margin-inline: auto;
+}
+.kol-column-browser-preview .kol-doc-page {
+  zoom: 0.5;
+  background: transparent;
+  border-radius: 0;
+}
+.kol-column-browser-preview .kol-doc-page :is(.kol-prose, .kol-codeblock-wrapper, .kol-doc-frontmatter) { zoom: 1; }
+/* documents start at the top of the column frame with a small inset, and scroll */
+.kol-column-browser-preview > div:first-child:has(.kol-doc-page) { align-items: flex-start; justify-content: flex-start; overflow: auto; }
+
+/* THE QUICKTIME BAR (PlaybackBarAndAudioSheet, kol-r2b2 2026-08-27 — ruled
+ * against the reference). White glyphs on the frosted strip whatever the theme:
+ * the ghost IconFrame paints --kol-oq-48, a theme colour, and the bar sits on
+ * media, not on the theme. The scrubber is a native range — a 2px track at 40 %
+ * white, a tall 4 × 28 white pill for the knob — pseudo-elements, so CSS. */
+.kol-playback-bar .kol-icon-frame { color: var(--kol-color-absolute-white); opacity: 0.8; }
+.kol-playback-bar .kol-icon-frame:hover,
+.kol-playback-bar .kol-icon-frame:focus-visible { opacity: 1; }
+.kol-playback-scrub {
+  appearance: none;
+  -webkit-appearance: none;
+  height: 28px;
+  background: transparent;
+  outline: none;
+  cursor: pointer;
+}
+.kol-playback-scrub::-webkit-slider-runnable-track { height: 2px; border-radius: 1px; background: color-mix(in srgb, var(--kol-color-absolute-white) 40%, transparent); }
+.kol-playback-scrub::-webkit-slider-thumb { -webkit-appearance: none; width: 4px; height: 28px; margin-top: -13px; border-radius: 2px; background: var(--kol-color-absolute-white); }
+.kol-playback-scrub::-moz-range-track { height: 2px; border-radius: 1px; background: color-mix(in srgb, var(--kol-color-absolute-white) 40%, transparent); }
+.kol-playback-scrub::-moz-range-thumb { width: 4px; height: 28px; border: 0; border-radius: 2px; background: var(--kol-color-absolute-white); }
 
 /* ColumnBrowser resize handles (ColumnBrowserResize, kol-r2b2 2026-08-27 —
  * Finder's edge handles, user ruling "that should be a set in ds"; native CSS

package/package.json

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