@kolkrabbi/kol-component 0.232.0 → 0.233.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.232.0",
+  "version": "0.233.0",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",
@@ -25,8 +25,8 @@
     "embla-carousel-react": "^8.6.0",
     "pdfjs-dist": "^6.3.289",
     "react-syntax-highlighter": "^16.1.1",
-    "@kolkrabbi/kol-search": "^0.2.0",
-    "@kolkrabbi/kol-markdown": "^0.1.2"
+    "@kolkrabbi/kol-markdown": "^0.1.2",
+    "@kolkrabbi/kol-search": "^0.2.0"
   },
   "peerDependencies": {
     "@kolkrabbi/kol-icons": ">=0.22.0",

package/src/molecules/FieldRow.jsx

@@ -100,7 +100,6 @@ export function StatusChip({ value, options = [], onChange, variant = 'neutral',
                   role="option"
                   aria-selected={val === value}
                   size="sm"
-                  selected={val === value}
                   className="w-full"
                   onClick={() => {
                     onChange?.(val)

package/src/molecules/MediaTile.jsx

@@ -28,7 +28,7 @@ export default function MediaTile({ preview, name, selected = false, markKey, on
       onContextMenu={onContextMenu}
       onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); onDoubleClick?.(e) } }}>
       <div className="kol-media-tile-thumb">{preview}</div>
-      <span className="kol-media-tile-name">{name}</span>
+      <span className="kol-media-tile-name kol-item-name">{name}</span>
       <RowMenuButton variant="grey" onOpen={onContextMenu} className="absolute top-1 right-1" />
     </div>
   )

package/src/molecules/OptionRow.jsx

@@ -7,26 +7,26 @@
  * transparent ring, so a row lines up with the field or button beside it at the same size.
  *
  * States, strongest first:
+ *   selected — the picked item: the tone's PRESSED fill (white in dark, as the grid's picked name)
  *   active   — the keyboard cursor / hover: the tone fill, full ink
- *   selected — the picked item: oq-08
- *   trail    — on the path to the picked item (a browser's parent folders): oq-04
+ *   trail    — on the path to the picked item (a browser's parent folders): oq-08
  *
  * Renders no role — the caller owns the list semantics (`role="option"`, `aria-selected`, ids)
  * and passes them through `...rest`.
  *
  * @param {'xs'|'sm'|'md'|'lg'} size   the control ramp step
+ * @param {string}    type     a type class instead of the ramp's (file lists: `kol-item-name`)
  * @param {string}    icon     kol-icons name, drawn in oq (icons-use-oq law)
  * @param {ReactNode} leading  anything else in the icon column (a check, a thumb) — wins over icon
  * @param {ReactNode} label
- * @param {ReactNode} hint     a second line under the label
+ * @param {ReactNode} hint     secondary text — beside the label, right-aligned on its baseline
  * @param {ReactNode} trailing right-aligned (a shortcut, a count, a menu button)
  * @param {string}    as       element to render (`div` · `button` · `li`)
- * @param {boolean}   fill     false = the caller paints the state fills (ColumnBrowser's trail vs
- *                             deepest-selection is decided in CSS by column); the ink still follows
+ * @param {boolean}   hover    false = hover paints nothing (the media browser's ruling, 2026-09-02)
  * @param {boolean}   muted    a row that is there but not the point (fg-48)
  *
- * `ROW_HEIGHT` / `ROW_TYPE` are exported for a row that cannot take this anatomy (the media rows
- * view's table row: twisty, drag hit, columns) — it still sits on the same ramp.
+ * `ROW_HEIGHT` / `ROW_TYPE` / `ROW_FILL` are exported for a row that cannot take this anatomy (the
+ * media rows view's table row: twisty, drag hit, columns) — it still sits on the same ramp and fills.
  */
 import { Icon } from '@kolkrabbi/kol-icons'
 import { glyphSize } from '../hooks/glyphLadders.js'
@@ -41,13 +41,24 @@ export const ROW_HEIGHT = {
 }
 export const ROW_TYPE = { xs: 'kol-mono-12', sm: 'kol-mono-12', md: 'kol-mono-14', lg: 'kol-mono-14' }
 
+const TONE = 'bg-[var(--kol-tone-bg,var(--kol-surface-secondary))]'
+/* SELECTED IS THE TONE'S PRESSED STATE (user 2026-09-30: *"use white as focused item like grid
+ * already does"*) — `--kol-tone-pressed-*`, the fill a pressed button takes; outside a tone, the
+ * same surface-on-primary / surface-primary pair the grid's picked name paints. */
+export const ROW_FILL = {
+  selected: 'bg-[var(--kol-tone-pressed-bg,var(--kol-surface-on-primary))] text-[var(--kol-tone-pressed-fg,var(--kol-surface-primary))]',
+  active: `${TONE} text-fg`,
+  trail: 'bg-oq-08 text-fg',
+}
+
 export default function OptionRow({
   as: Tag = 'div',
   size = 'md',
+  type,
   active = false,
   selected = false,
   trail = false,
-  fill: paints = true,
+  hover = true,
   muted = false,
   icon,
   leading,
@@ -58,23 +69,21 @@ export default function OptionRow({
   children,
   ...rest
 }) {
-  const lit = active || selected || trail
-  /* hover takes the active fill — the palette already moves `active` on hover; a list without a
-   * keyboard cursor gets the same look for free. `fill={false}` rows paint nothing (the columns) */
-  const bg = !paints ? '' : active
-    ? 'bg-[var(--kol-tone-bg,var(--kol-surface-secondary))]'
-    : `${selected ? 'bg-oq-08' : trail ? 'bg-oq-04' : ''} hover:bg-[var(--kol-tone-bg,var(--kol-surface-secondary))]`
-  const fill = `${bg} ${lit ? 'text-fg' : muted ? 'text-fg-48' : 'text-fg-80'}`
+  const state = selected ? ROW_FILL.selected : active ? ROW_FILL.active : trail ? ROW_FILL.trail
+    : `${muted ? 'text-fg-48' : 'text-fg-80'}${hover ? ` hover:${TONE}` : ''}`
   const lead = leading ?? (icon && <Icon name={icon} size={glyphSize(size)} />)
   return (
     <Tag
-      className={`flex items-center gap-2 px-4 border border-transparent ${ROW_HEIGHT[size] ?? ROW_HEIGHT.md} rounded-[var(--kol-radius-sm)] cursor-pointer text-left ${ROW_TYPE[size] ?? ROW_TYPE.md} transition-colors ${fill} ${className}`.trim()}
+      className={`flex items-center gap-2 px-4 border border-transparent ${ROW_HEIGHT[size] ?? ROW_HEIGHT.md} rounded-[var(--kol-radius-sm)] cursor-pointer text-left ${type ?? ROW_TYPE[size] ?? ROW_TYPE.md} transition-colors ${state} ${className}`.trim()}
       {...rest}
     >
-      {lead && <span aria-hidden="true" className="flex shrink-0 text-oq-48">{lead}</span>}
-      <span className="flex flex-1 flex-col min-w-0">
+      {/* the glyph takes the row's ink when selected — a grey mark on a white fill reads as a hole */}
+      {lead && <span aria-hidden="true" className={`flex shrink-0${selected ? '' : ' text-oq-48'}`}>{lead}</span>}
+      {/* ONE LINE (user 2026-09-30): the hint sits beside the label on its baseline, right-aligned,
+       * so the names read as one column and a long name never pushes the path around */}
+      <span className="flex flex-1 items-baseline gap-3 min-w-0">
         <span className="truncate">{label ?? children}</span>
-        {hint && <span className="kol-mono-12 text-fg-48 truncate">{hint}</span>}
+        {hint && <span className={`kol-mono-12 ml-auto truncate${selected ? ' opacity-60' : ' text-fg-48'}`}>{hint}</span>}
       </span>
       {trailing && <span className="flex shrink-0 items-center">{trailing}</span>}
     </Tag>

package/src/organisms/ColumnBrowser.jsx

@@ -249,7 +249,7 @@ const ZONE_BOX = 44
  * without the stack: the columns pass none, so a desktop row is byte-identical
  * to what it was. */
 function Row({
-  icon, label, active, cursor = false, trailing, onClick, muted = false, size = 'md',
+  icon, label, active, trail = false, cursor = false, trailing, onClick, muted = false, size = 'md',
   indent = 0, meta, zones = false, thumb, onDisclose, disclosed, onContextMenu, drop, dropFiles, markKey,
 }) {
   const [over, setOver] = useState(false)
@@ -275,15 +275,18 @@ function Row({
     },
   } : {}
   /* THE DESKTOP ROW IS AN OptionRow (2026-09-30) — the palette's row, on the control ramp, so a size
-   * setting scales height, glyph and type together. The fills stay this file's CSS (trail vs the
-   * deepest column's selection is decided by column there, and hover/cursor paint nothing — the
-   * 2026-09-02 ruling), so `fill={false}`. The `zones` row below is the phone's and keeps its own. */
+   * setting scales height and glyph; the name keeps ONE type in every view (`kol-item-name`, the
+   * grid's), as Finder does. The deepest selection takes the pressed (white) fill, the folders on the
+   * way to it the trail; hover and the bare cursor paint nothing (the 2026-09-02 ruling). The `zones`
+   * row below is the phone's and keeps its own. */
   if (!zones) return (
     <OptionRow
       as="li"
       size={size}
-      fill={false}
-      selected={active}
+      type="kol-item-name"
+      hover={false}
+      selected={active && !trail}
+      trail={active && trail}
       muted={muted && !cursor}
       icon={icon}
       label={label}
@@ -1039,8 +1042,11 @@ export default function ColumnBrowser({
                 label={f.replace(/\/$/, '')}
                 markKey={level + f}
                 active={f === activeFolder || isPicked(level + f)}
+                /* a folder on the path is the TRAIL unless it is the deepest pick — the column after
+                 * it is its own contents with nothing chosen, and no file is showing */
+                trail={f === activeFolder && !isPicked(level + f) && (!!shown || k < levels.length - 2)}
                 cursor={cursorActive && cursor.col === k && cursor.idx === i}
-                trailing={<Icon name="chevron-right" size={12} className="text-oq-32" />}
+                trailing={<Icon name="chevron-right" size={12} className={f === activeFolder && !shown && k === levels.length - 2 ? '' : 'text-oq-32'} />}
                 onContextMenu={onRowContextMenu && ((e) => onRowContextMenu(e, { type: 'folder', path: level + f }))}
                 drop={dragFor?.(level + f)}
                 dropFiles={onDropFiles ? (list) => onDropFiles(list, level + f) : undefined}

package/src/organisms/MediaLibraryPages.jsx

@@ -1,6 +1,6 @@
 import { Fragment, createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import formatSize from '../utilities/formatSize.js'
-import { ROW_HEIGHT, ROW_TYPE } from '../molecules/OptionRow.jsx'
+import { ROW_HEIGHT, ROW_FILL } from '../molecules/OptionRow.jsx'
 import { glyphSize } from '../hooks/glyphLadders.js'
 import { Icon } from '@kolkrabbi/kol-icons'
 import Button from '../atoms/Button.jsx'
@@ -303,7 +303,9 @@ function TagEditor({ tags = [], onChange, suggestions = [] }) {
 
 /* THE ROWS VIEW'S STEP ON THE CONTROL RAMP (user 2026-09-30) — the same `rowSize` the columns take,
  * handed down by context rather than threaded through every subtree level. These rows keep their
- * own anatomy (twisty, drag hit, table columns) and take only the ramp: box, type, glyph. */
+ * own anatomy (twisty, drag hit, table columns) and take the ramp's box and glyph, OptionRow's
+ * fills (picked = the pressed white, the folder you are in = the trail) and the one item type,
+ * `kol-item-name`, that the columns and the grid use. */
 const RowSize = createContext('md')
 
 /* `depth` indents a row under the folder it was expanded from; `expanded`/`onToggle` draw the
@@ -341,7 +343,7 @@ function FolderRow({ name, icon = 'folder', onClick, onDoubleClick, depth = 0, e
   return (
     /* THE COLUMN BROWSER'S ROW (user 2026-09-22): `kol-column-browser-row` carries the 4px pill
      * inset, the selected fill and the drop fill; no divider, as the columns have none. */
-    <li onContextMenu={onContextMenu} {...dropProps} data-marquee-key={markKey} data-hit-zone data-drop-over={over || undefined} className={`kol-column-browser-row flex items-center gap-3 border border-transparent px-3 ${ROW_HEIGHT[size]} transition-colors${selected ? ' is-selected' : ''}${current ? ' is-current' : ''}`} style={{ paddingLeft: depth * 20 + 12 }} onClick={onClick} onDoubleClick={onDoubleClick}>
+    <li onContextMenu={onContextMenu} {...dropProps} data-marquee-key={markKey} data-hit-zone data-drop-over={over || undefined} className={`kol-column-browser-row flex items-center gap-3 border border-transparent px-3 ${ROW_HEIGHT[size]} transition-colors${selected ? ` is-selected ${ROW_FILL.selected}` : ''}${current ? ' is-current' : ''}${current && !selected ? ` ${ROW_FILL.trail}` : ''}`} style={{ paddingLeft: depth * 20 + 12 }} onClick={onClick} onDoubleClick={onDoubleClick}>
       {onToggle ? (
         <button type="button" aria-label={expanded ? `Collapse ${name}` : `Expand ${name}`} aria-expanded={!!expanded}
           onClick={(e) => { e.stopPropagation(); onToggle() }}
@@ -353,11 +355,11 @@ function FolderRow({ name, icon = 'folder', onClick, onDoubleClick, depth = 0, e
       {/* THE FOLDER GLYPH IS THE ONE ICON LEFT, so it fills its box (user 2026-09-23: *"only folder
           should use icon, and it should be bigger"*). Every other kind now renders its own bytes. */}
       <span data-hit {...hitDrag} className="kol-row-hit flex items-center gap-3 min-w-0">
-        <span className="shrink-0 flex items-center justify-center text-oq-48"><Icon name={icon} size={glyphSize(size)} /></span>
+        <span className={`shrink-0 flex items-center justify-center${selected ? '' : ' text-oq-48'}`}><Icon name={icon} size={glyphSize(size)} /></span>
         {/* NO TRAILING SLASH (user 2026-09-22). `partition` hands folders back as `audio/` because a
             slash is what marks one in a flat key space; that is storage's spelling, not a label, and
             `ColumnBrowser` has always stripped it. The glyph says "folder". */}
-        <span className={`${ROW_TYPE[size]} min-w-0 truncate text-fg-default`}>{name.replace(/\/$/, '')}</span>
+        <span className={`kol-item-name min-w-0 truncate${selected ? '' : ' text-fg-default'}`}>{name.replace(/\/$/, '')}</span>
       </span>
       <span className="flex-1" />
       {/* THE FOLDER'S COUNT SITS IN THE DATE COLUMN and the size column takes a dash — the columns
@@ -365,8 +367,8 @@ function FolderRow({ name, icon = 'folder', onClick, onDoubleClick, depth = 0, e
           promised a click that opens, and a click now SELECTS (opening is a double-click). */}
       {cols && <>
         {cols.tags != null && <span className="shrink-0" style={{ width: cols.tags }} />}
-        <span className="kol-mono-12 text-fg-32 shrink-0 truncate" style={{ width: cols.date }}>{meta}</span>
-        <span className="kol-mono-12 text-fg-24 shrink-0 truncate" style={{ width: cols.size }}>—</span>
+        <span className={`kol-item-name ${selected ? "opacity-60" : "text-fg-32"} shrink-0 truncate`} style={{ width: cols.date }}>{meta}</span>
+        <span className={`kol-item-name ${selected ? "opacity-60" : "text-fg-24"} shrink-0 truncate`} style={{ width: cols.size }}>—</span>
       </>}
       <RowMenuButton onOpen={onContextMenu} className="-my-1 -mr-1" />
     </li>
@@ -430,21 +432,21 @@ function FileRow({ o, onClick, onDoubleClick, depth = 0, formatDate, thumb, cols
   const size = useContext(RowSize)
   const dragProps = drag ? { draggable: true, onDragStart: (e) => { e.stopPropagation(); drag.onDragStart(e, o.key) } } : {}
   return (
-    <li onContextMenu={onContextMenu} data-marquee-key={markKey ?? o.key} data-hit-zone className={`kol-column-browser-row flex items-center gap-3 border border-transparent px-3 ${ROW_HEIGHT[size]} transition-colors${selected ? ' is-selected' : ''}`} style={{ paddingLeft: depth * 20 + 12 }} onClick={onClick} onDoubleClick={onDoubleClick}>
+    <li onContextMenu={onContextMenu} data-marquee-key={markKey ?? o.key} data-hit-zone className={`kol-column-browser-row flex items-center gap-3 border border-transparent px-3 ${ROW_HEIGHT[size]} transition-colors${selected ? ` is-selected ${ROW_FILL.selected}` : ''}`} style={{ paddingLeft: depth * 20 + 12 }} onClick={onClick} onDoubleClick={onDoubleClick}>
       <span className="w-4 shrink-0" />
       {/* the hit — icon and name, as in the folder row above */}
       <span data-hit {...dragProps} className="kol-row-hit flex items-center gap-3 min-w-0">
-        <span className="shrink-0 flex items-center justify-center text-oq-48 overflow-hidden rounded" style={{ width: glyphSize(size), height: glyphSize(size) }}>
+        <span className={`shrink-0 flex items-center justify-center overflow-hidden rounded${selected ? '' : ' text-oq-48'}`} style={{ width: glyphSize(size), height: glyphSize(size) }}>
           {/* a file with no thumbnail draws its glyph at the FOLDER's size — one icon column (user 2026-09-25) */}
           {thumb ?? <Icon name={kindOf(o) === 'image' ? 'image' : 'file'} size={glyphSize(size)} />}
         </span>
-        <span className={`${ROW_TYPE[size]} min-w-0 truncate text-fg-default`}>{o.displayKey ?? o.key.split('/').pop()}</span>
+        <span className={`kol-item-name min-w-0 truncate${selected ? '' : ' text-fg-default'}`}>{o.displayKey ?? o.key.split('/').pop()}</span>
       </span>
       <span className="flex-1" />
       {cols && <>
-        {cols.tags != null && <span className="kol-mono-12 text-fg-48 shrink-0 truncate" style={{ width: cols.tags }}>{(o.tags ?? []).map((t) => `#${t}`).join(' ')}</span>}
-        <span className="kol-mono-12 text-fg-32 shrink-0 truncate" style={{ width: cols.date }}>{formatDate?.(o.uploaded)}</span>
-        <span className="kol-mono-12 text-fg-32 shrink-0 truncate" style={{ width: cols.size }}>{formatSize(o.size)}</span>
+        {cols.tags != null && <span className={`kol-item-name ${selected ? "opacity-60" : "text-fg-48"} shrink-0 truncate`} style={{ width: cols.tags }}>{(o.tags ?? []).map((t) => `#${t}`).join(' ')}</span>}
+        <span className={`kol-item-name ${selected ? "opacity-60" : "text-fg-32"} shrink-0 truncate`} style={{ width: cols.date }}>{formatDate?.(o.uploaded)}</span>
+        <span className={`kol-item-name ${selected ? "opacity-60" : "text-fg-32"} shrink-0 truncate`} style={{ width: cols.size }}>{formatSize(o.size)}</span>
       </>}
       <RowMenuButton onOpen={onContextMenu} className="-my-1 -mr-1" />
     </li>