@kolkrabbi/kol-component 0.145.0 → 0.146.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.145.0",
+  "version": "0.146.0",
   "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/molecules/ContentRow.jsx

@@ -10,8 +10,10 @@ import ContentText from './ContentText.jsx'
  * thumb; article rides a 120px 16:9 thumb; work a framed 64px row; typeface a
  * framed no-thumb block.
  *
- * @param {string}    variant   file | catalog | print | article | work | typeface
- *                             (`default` is an alias of `file`)
+ * @param {string}    variant   file | catalog | print | article | work | typeface | roster
+ *                             (`default` is an alias of `file`). `roster` is the pickable
+ *                             row: filled tile, no border or divider, a FIXED 56px height the
+ *                             content fills, a 40px square thumb and two truncated lines.
  * @param {ReactNode} media     thumb content (omit → placeholder)
  * @param {number|'fill'} thumb  thumb edge px — overrides the ruled default; 0 hides; `'fill'` = a square
  *                             the height of the row's content, whatever the rung (WorkListingRowsAndFilters)
@@ -61,6 +63,23 @@ const BOX = {
    * transparent → fg-08 on hover ("0 → 16 is a big jump"). No md step: the rows
    * were approved at their base values. */
   showcase: { thumb: 'fill', ratio: '1 / 1', pad: S4, gap: S4, frame: 'transparent', frameHover: 'var(--kol-fg-08)', bg: 'var(--kol-surface-secondary)', minH: 168, align: 'items-stretch', thumbRadius: 'var(--kol-radius-xs)', thumbBorder: false },
+  /* ROSTER — a PICKABLE row (ContentRowRosterVariant, kol-chess 2026-08-31):
+   * filled tile, no border, no divider, fixed height, square thumb, two
+   * truncated lines that FILL the row rather than setting it.
+   *
+   * `file` is the nearest part and a different object: a bare ruled line with a
+   * 48px thumb, a divider, and no hover wash by the 2026-08-29 ruling — right
+   * for a file listing, wrong for a grid of things you choose between. These
+   * are targets, so they take a hover.
+   *
+   * THE FIXED HEIGHT IS THE POINT. Every other row in this family follows its
+   * content, and on a pick grid that reads as broken: the filer measured 34 →
+   * 40 → 50 → 58 across four passes, and ONE long meta line was enough to push
+   * a tile out of line with its neighbours. `height`, not `minH` — the content
+   * fills the row and cannot move it. */
+  roster: { thumb: 40, ratio: '1 / 1', pad: S2, gap: S2, height: 56, align: 'items-stretch',
+            bg: 'var(--kol-surface-secondary)', hover: 'var(--kol-fg-04)',
+            thumbBg: 'var(--kol-fg-04)', thumbBorder: false },
   /* typeface's row is a COLUMN, not a line: a header (name/styles left,
    * classification/year right) with a full-width specimen band under it. The
    * shipped item is `flex-col gap-6`, and forcing it into the horizontal
@@ -148,6 +167,10 @@ export default function ContentRow({
      * taller row carried `--kol-row-min-h: 224px !important`. */
     '--kol-row-min-h': minHeight != null ? `${minHeight}px` : box.minH != null ? `${box.minH}px` : undefined,
     '--kol-row-min-h-md': box.minHMd != null ? `${box.minHMd}px` : undefined,
+    /* A FIXED rung, not a floor — `roster` only. `minHeight` still overrides it,
+     * so a consumer that wants a taller pick row gets one; what it cannot get is
+     * a row whose height drifts with its own copy. */
+    '--kol-row-h': box.height != null ? `${minHeight ?? box.height}px` : undefined,
     /* `fill` = the rung minus the vertical padding — a definite number, not a
      * stretch (a min-height row has no definite cross size, so a stretched
      * aspect-ratio square resolved to the image's intrinsic width).
@@ -211,7 +234,11 @@ export default function ContentRow({
           </ContentMedia>
         </div>
       )}
-      <ContentText variant={variant} form="row" className="flex-1" {...text} />
+      {/* THE 2px IS DELIBERATE and the one off-grid value in `roster` (the filer
+        * ruled it on screen): the two lines stack to 34 inside a 40 content box,
+        * and pushing them fully apart puts the ascenders hard against the thumb's
+        * top and bottom edges. It is the ROW's ruling, so the row passes it. */}
+      <ContentText variant={variant} form="row" className={`flex-1 ${box.height != null ? 'py-[2px]' : ''}`.trim()} {...text} />
       {/* `specs` rides the trailing edge on EVERY variant — year · material ·
        * edition is a content difference, not a geometry one, and minting a
        * seventh page-named box for it is the exact mistake §1 of the ticket is
@@ -234,7 +261,7 @@ export default function ContentRow({
   )
 
   const common = {
-    className: `kol-row group flex ${box.column ? 'flex-col' : ''} ${box.align} ${box.divider ? 'kol-row--divided' : ''} ${box.frame ? 'rounded-[var(--kol-radius-sm)] border' : ''} ${interactive ? 'cursor-pointer select-none' : ''} ${interactive && box.hover ? 'kol-content-hover' : ''} ${interactive && box.frameHover ? 'kol-content-hover-frame' : ''} ${className}`.trim(),
+    className: `kol-row group flex ${box.column ? 'flex-col' : ''} ${box.align} ${box.height != null ? 'kol-row--fixed' : ''} ${box.divider ? 'kol-row--divided' : ''} ${box.frame ? 'rounded-[var(--kol-radius-sm)] border' : ''} ${interactive ? 'cursor-pointer select-none' : ''} ${interactive && box.hover ? 'kol-content-hover' : ''} ${interactive && box.frameHover ? 'kol-content-hover-frame' : ''} ${className}`.trim(),
     style: vars,
   }
 

package/src/molecules/ContentText.jsx

@@ -91,6 +91,15 @@ const RAMP = {
      * ink, the year kol-mono-12 fg-64. Body unchanged (the site passes its face). */
     row:  { title: 'kol-mono-14 uppercase text-emphasis truncate', body: 'kol-sans-heading-03 leading-tight text-emphasis truncate', meta: 'kol-mono-14 text-emphasis', date: 'kol-mono-12 text-fg-64', tags: 'flex flex-wrap items-center gap-1.5' },
   },
+  /* ROSTER — a pickable row's two lines, both TRUNCATED (ContentRowRosterVariant,
+   * kol-chess 2026-08-31). Written out rather than derived from `showcase`: the
+   * name-keyed maps below (FILL, GAPS) cannot be reached by a spread, and a
+   * derive that misses one of them is the exact trap `showcaseCanvas` fell into
+   * twice. Two literals beat a derive. Row form only — kol-chess wants no card,
+   * and a card nobody asked for is a variant to keep in step for nothing. */
+  roster: {
+    row: { title: 'kol-mono-14 text-fg-96 truncate', meta: 'kol-mono-12 text-fg-48 truncate' },
+  },
   showcaseCanvas: {
     /* RULED ON SCREEN (TypefaceCardAndRow, kol-website 2026-08-27): name and
      * classification are FULL ink, the year steps to 64; the card's title is the
@@ -143,6 +152,8 @@ const ORDER = {
    * item, which had been flattened into title-left / date-right and lost the
    * styles line into a body slot below. */
   showcaseCanvas: { card: ['title', 'body'], row: [['between', ['stack', 'title', 'body'], ['stack', 'detail', 'date']]] },
+  /* two lines, pushed apart by the column's own justify-between (FILL) */
+  roster: { row: ['title', 'meta'] },
 }
 
 /* inner line gap per variant/form, read from the shipped boxes and spelled in
@@ -158,7 +169,7 @@ const ORDER = {
  * `self-stretch`, NOT `h-full` — the row carries `min-height`, never `height`,
  * so `height: 100%` resolves against an indefinite parent, computes to auto,
  * and shrink-wraps the column. Which is exactly what it did. */
-const FILL = { showcase: true }
+const FILL = { showcase: true, roster: true }
 
 /* gap INSIDE a ['stack', …] block. Defaults to the tight 4px pair article
  * wants; work's header stack is the shipped gap-1 md:gap-2. */
@@ -173,6 +184,9 @@ const GAPS = {
   article: { card: 'var(--kol-spacing-3)', row: 'var(--kol-spacing-3)', hero: 'var(--kol-spacing-3)' },
   showcase: { card: 'var(--kol-spacing-2)', row: 'var(--kol-spacing-4)' },
   showcaseCanvas: { card: 'var(--kol-spacing-2)', row: 'var(--kol-spacing-6)' },
+  /* roster's lines are pushed apart by justify-between, so this is only a
+   * floor for the case where the row is given more height than 56. */
+  roster: { row: 'var(--kol-spacing-1)' },
 }
 
 /* `default` → `file` (user 2026-08-29) — kept working as an alias here too,