@kolkrabbi/kol-theme 0.145.0 → 0.146.0

package/kol-components-molecules.css

@@ -166,15 +166,26 @@
 }
 
 /* Tooltip — hover-triggered text label with optional kbd-style shortcut chip.
- * Used by molecules/Popover.jsx Tooltip. No border (intentionally distinct
- * from native browser tooltips); shortcut renders as a fg-tinted chip. */
+ * Used by utilities/Popover.jsx Tooltip; shortcut renders as a fg-tinted chip.
+ *
+ * SYMMETRIC PADDING (2026-09-21). It was `4px 4px 4px 8px` — 8 left, 4 right —
+ * so a shortcut chip could sit tight to the right edge. Most tooltips carry no
+ * shortcut, so the common case rendered its label 4px off the centre of a
+ * perfectly centred box, which reads as a positioning bug and is not one. The
+ * chip now sits 8px in like the text does.
+ *
+ * It also had no border, deliberately, to stay distinct from a native browser
+ * tooltip. The editor's own `[data-kol-tip]` rule has carried one since it was
+ * written, so the border is the DS's now — at `.kol-popover`'s own `oq-04`,
+ * the opaque ramp, for the reason stated on that rule. */
 .kol-tooltip {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: var(--kol-surface-secondary);
+  border: 1px solid var(--kol-oq-04);
   border-radius: var(--kol-radius-sm);
-  padding: 4px 4px 4px 8px;
+  padding: 4px 8px;
   font-family: var(--kol-font-family-mono);
   font-size: 11px;
   line-height: 1;
@@ -1267,8 +1278,14 @@
  * overlay page was A-series (1:√2) and the column preview had NO bound at all,
  * so the FILE decided the height — a 7 KB JSON drew a pane taller than the
  * browser. 3:5 is the portrait rung on the export-specs ladder below 4:5, and
- * the floor before a page reads as a 9:16 strip. Both presentations take it:
- * content scrolls inside the box, the box never grows to the file. */
+ * the floor before a page reads as a 9:16 strip. Content scrolls inside the
+ * box; the box never grows to the file.
+ *
+ * OPEN 2026-09-21 (user, on the column preview: "3:5 is so close to 9:16 and
+ * its too tall here"). The plate measures a true 3:5; the complaint is the dead
+ * space a short document leaves below its content. A one-off rung change was
+ * tried and reverted — the value belongs to the preview spec being written
+ * against Finder / Dropbox / Drive, not to a guess. */
 .kol-overlay .kol-doc-page {
   aspect-ratio: 3 / 5;
   height: 85vh;
@@ -1278,8 +1295,36 @@
   overflow-x: hidden;
   margin-inline: auto;
 }
+/* THE WALL'S THUMB — the same document, at tile scale. `KindPreview` renders a
+ * real page; in a 44px row or a 230px card that is a wall of unreadable glyphs,
+ * so the page is zoomed down and clipped and you read its SHAPE (a JSON tree, a
+ * frontmatter block, a table) rather than its words. Same treatment the column
+ * preview uses, one rung smaller. The children reset `zoom: 1` so it never
+ * compounds. No forced ratio here either — the tile is the bound. */
+.kol-media-thumb .kol-doc-page {
+  zoom: 0.25;
+  height: 100%;
+  width: 100%;
+  padding: 12px;
+  overflow: hidden;
+  background: transparent;
+  border-radius: 0;
+}
+.kol-media-thumb .kol-doc-page :is(.kol-prose, .kol-codeblock-wrapper, .kol-doc-frontmatter) { zoom: 1; }
+.kol-media-thumb .kol-prose,
+.kol-media-thumb .kol-codeblock-wrapper { max-width: none; }
+.kol-media-thumb > * { max-width: 100%; max-height: 100%; }
+
 .kol-column-browser-preview .kol-doc-page {
-  aspect-ratio: 3 / 5;
+  /* NO FORCED RATIO (user 2026-09-21: "it just fucking takes the aspect ratio of
+   * the file and displays that"). A preview is the file at its own shape,
+   * bounded by the pane — which is what every reference file manager does. The
+   * 3:5 above exists because the column preview once had no bound AT ALL and a
+   * 7 KB JSON drew a pane taller than the browser; the bound was the fix, the
+   * ratio was the overreach. A max-height bounds it without deciding a shape,
+   * so a short document ends where its content ends instead of leaving half a
+   * plate of dead grey. The overlay keeps 3:5 — that one IS a sheet. */
+  max-height: 100%;
   height: auto;
   overflow: auto;
   zoom: 0.5;
@@ -1340,6 +1385,15 @@
 .kol-column-browser-row.is-cursor { background-color: transparent; }
 .kol-column-browser-row.is-selected { background-color: var(--kol-fg-02); }
 .kol-column-browser-column:not(:has(~ .kol-column-browser-column .is-selected)) > .is-selected { background-color: var(--kol-fg-04); }
+/* A DROP TARGET OUTRANKS SELECTION while something is over it (2026-09-21). It is transient and it
+ * is the one thing you must see mid-drag — which folder is about to receive this. It sits AFTER the
+ * two fills above and matches their specificity through the child combinator, so it wins the tie
+ * rather than merely claiming to; written above them it lost to the deepest-column rule. */
+.kol-column-browser-column > .kol-column-browser-row[data-drop-over] { background-color: var(--kol-fg-08); }
+/* THE COLUMN ITSELF AS A TARGET — dropping anywhere in a column files the item into the folder
+ * that column is showing. An inset ring rather than a fill: a fill over a list of rows reads as
+ * every row being selected, which is the opposite of what is being said. */
+.kol-column-browser-column[data-drop-over] { box-shadow: inset 0 0 0 2px var(--kol-fg-16); }
 
 /* THE ROW IS A PILL (same ticket, user ruling 2026-08-27: "dont make selected
  * state move the layout"). A constant 4px inset on EVERY row, selected or not,
@@ -1967,3 +2021,7 @@
   .kol-toc-tick .kol-toc-rule { width: 5px; }
   .kol-toc-label, .kol-toc-rule { transition: none; }
 }
+
+/* THE ROW BROWSER — the folder list view. Same drop affordance as a column, for the same reason:
+ * the list IS the folder you are in, so dropping anywhere on it files the item here. */
+.kol-row-browser[data-drop-over] { box-shadow: inset 0 0 0 2px var(--kol-fg-16); }

package/package.json

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