@kolkrabbi/kol-component 0.74.0 → 0.74.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.74.0",
+  "version": "0.74.2",
   "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

@@ -38,7 +38,12 @@ const BOX = {
   article:  { thumb: 120, ratio: '1 / 1',  pad: '0',           gap: S6, align: 'items-start', thumbBg: 'var(--kol-fg-12)', hover: 'var(--kol-oq-02)', thumbZoom: true },
   /* work and typeface step UP at md — the shipped rows both do, and a work row
    * at a fixed 96 cannot hold the display-03 line it was ruled to carry. */
-  work:     { thumb: 64,  thumbMd: 112, ratio: '1 / 1', pad: S4, padMd: S6, gap: S4, gapMd: S6, frame: 'transparent', frameHover: 'var(--kol-fg-16)', bg: 'var(--kol-surface-secondary)', minH: 96, minHMd: 160, align: 'items-stretch', thumbRadius: 'var(--kol-radius-xs)', thumbBorder: true, thumbZoom: true },
+  /* thumbSquare (2026-08-26, user on the comparison page): the shipped
+   * WorkListItem thumb is a fixed SQUARE (w-16 h-16 md:w-28 md:h-28) sitting at
+   * the top of a taller row — it does not stretch to the row's height, so the
+   * fill-the-height ruling does not apply here and a 64-wide thumb in a 96-tall
+   * row came out portrait. */
+  work:     { thumb: 64,  thumbMd: 112, ratio: '1 / 1', pad: S4, padMd: S6, gap: S4, gapMd: S6, frame: 'transparent', frameHover: 'var(--kol-fg-16)', bg: 'var(--kol-surface-secondary)', minH: 96, minHMd: 160, align: 'items-stretch', thumbRadius: 'var(--kol-radius-xs)', thumbBorder: true, thumbZoom: true, thumbSquare: true },
   /* 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
@@ -112,9 +117,9 @@ export default function ContentRow({
          * height the row is. An earlier cut freed the width instead and let
          * `aspect-ratio` fall back to the image's intrinsic size, which is how
          * one card ate the page. */
-        <div className="kol-row-thumb shrink-0 self-stretch">
+        <div className={`kol-row-thumb shrink-0 ${box.thumbSquare ? 'self-start' : 'self-stretch'}`}>
           <ContentMedia
-            ratio={null}
+            ratio={box.thumbSquare ? '1 / 1' : null}
             border={box.thumbBorder ?? false}
             bg={box.thumbBg}
             /* zoom where the thumb IS the subject (article · work), never on a

package/src/molecules/ContentText.jsx

@@ -227,7 +227,11 @@ export default function ContentText({
     )
   }
 
-  const nodes = order.map(render)
+  /* NOT `order.map(render)`: map passes (entry, index, ARRAY) and the array
+   * landed in `trailing`, so every top-level stack right-aligned — the article
+   * card's title and body sat flush right under left-aligned tags for eleven
+   * days (found on the comparison page, 2026-08-26). */
+  const nodes = order.map((entry, i) => render(entry, i))
 
   return (
     <div