@kolkrabbi/kol-component 0.118.2 → 0.118.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.118.2",
+  "version": "0.118.3",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",

package/src/organisms/ColumnBrowser.jsx

@@ -92,13 +92,20 @@ const isImage = (o) => (o.contentType || '').startsWith('image/')
 /* kol-icons has no `audio` glyph yet — audio rows wear `file` until it does */
 const COL_ICON = { image: 'image', video: 'video', audio: 'file', playlist: 'video' }
 
+/* ColumnBrowserChromeCorrections (kol-r2b2 2026-08-28, four user rulings measured live on admin.):
+ * every column keeps its right edge, the last included — without it the browser reads as an
+ * open-sided container when the columns do not fill the box (Finder closes it); a column's ONLY
+ * row keeps its bottom hairline (`only:`) — its last row is also its first, and a missing
+ * hairline beside neighbours that show one reads as a defect; and ONE ink for folders and files
+ * — the `bg-fg-04` fill alone marks selection ("why is folder full opacity but not files?").
+ * `muted` stays a prop for other callers; the file rows no longer pass it. */
 function Row({ icon, label, active, cursor = false, trailing, onClick, muted = false }) {
   return (
     <li
       /* Row metrics are the DS Table's (kol-components-organisms.css .kol-table-cell-*):
        * 12px 16px padding, mono 12, an oq-08 hairline between rows, none after the last. */
       /* `cursor` = the keyboard row, drawn with the hover fill so ↑/↓ always shows where you are. */
-      className={`kol-column-browser-row flex items-center gap-2 px-4 py-3 border-b last:border-b-0 cursor-pointer transition-colors ${
+      className={`kol-column-browser-row flex items-center gap-2 px-4 py-3 border-b last:border-b-0 only:border-b cursor-pointer transition-colors ${
         active || cursor ? 'bg-fg-04 text-fg-default' : muted ? 'text-fg-48 hover:bg-fg-04' : 'text-fg-default hover:bg-fg-04'
       }`}
       style={{ borderColor: 'var(--kol-oq-08)' }}
@@ -383,7 +390,7 @@ export default function ColumnBrowser({
         return (
           <Fragment key={level || '/'}>
           <ul
-            className={`kol-column-browser-column shrink-0 overflow-y-auto ${last ? '' : 'border-r'}`.trim()}
+            className="kol-column-browser-column shrink-0 overflow-y-auto border-r"
             style={{ borderColor: 'var(--kol-oq-08)', width: widthOf(k) }}
           >
             {folders.map((f, i) => (
@@ -402,7 +409,6 @@ export default function ColumnBrowser({
                 key={o.key}
                 icon={COL_ICON[kindOf(o)] || 'file'}
                 label={o.displayKey ?? o.key}
-                muted={shown?.key !== o.key}
                 active={shown?.key === o.key}
                 cursor={cursorActive && cursor.col === k && cursor.idx === folders.length + i}
                 onClick={() => { setCursor({ col: k, idx: folders.length + i }); setCursorActive(true); rootRef.current?.focus(); pickFile(level, o) }}