@kolkrabbi/kol-theme 0.73.0 → 0.75.0

package/kol-components-molecules.css

@@ -1182,7 +1182,105 @@
 /* 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
+ * `resize:` rejected). The column border already there is the visual; the
+ * strip is the HIT AREA — 8px, invisible at rest, fg-08 on hover and while the
+ * pointer is captured. The x handle is a flex sibling pulled back over the
+ * column's right edge (net zero width); the y handle rides the root's bottom
+ * edge, above the horizontal scroll box so it spans the visible width. */
+.kol-column-browser-resize-x {
+  position: relative;
+  z-index: 1;
+  flex: none;
+  align-self: stretch;
+  width: 8px;
+  margin-left: -8px;
+  cursor: col-resize;
+  touch-action: none;
+  transition: background-color var(--kol-transition-fast);
+}
+.kol-column-browser-resize-y {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  height: 8px;
+  cursor: row-resize;
+  touch-action: none;
+  transition: background-color var(--kol-transition-fast);
+}
+.kol-column-browser-resize-x:hover,
+.kol-column-browser-resize-x.is-dragging,
+.kol-column-browser-resize-y:hover,
+.kol-column-browser-resize-y.is-dragging {
+  background-color: var(--kol-fg-08);
+}
 .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.73.0",
+  "version": "0.75.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",