@kolkrabbi/kol-component 0.47.0 → 0.48.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.47.0",
+  "version": "0.48.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/ContentText.jsx

@@ -65,9 +65,14 @@ const RAMP = {
 
 /* render order per variant/form. Strings are slots; arrays are ONE line:
  * ['group', …] = 16px baseline group · ['between', …] = header.between ·
- * ['line', …] = one flex line, first slot flex-1 truncating, rest fixed ·
  * ['stack', …] = a vertical block on the tight 4px gap, nestable inside any of
  * the above. In a `between`, the LEADING part flexes and the trailing one hugs.
+ *
+ * A third kind, ['line', …] — fixed-width trailing columns for a table-like
+ * row — was removed 2026-08-15. `default.row` was its only caller and moved to
+ * a group when the date went below the title; the fixed 96/80px columns had
+ * already been dropped for hugging content, so the branch was rendering
+ * nothing anyone asked for.
  * Directions are the RULED structures (06-content-card-system.md §2 boxes),
  * read off the shipped components and the live pages they render on. */
 const ORDER = {
@@ -169,24 +174,6 @@ export default function ContentText({
         </div>
       )
     }
-    if (kind === 'line') {
-      /* ruled (default row): title flex-1 truncate · date w-24 · size w-20,
-       * trailing fields in fixed columns so rows align in a list.
-       *
-       * Trailing fields HUG their content and sit on the group's 24px gap, so
-       * the row and the card space their meta identically. They used to be
-       * fixed 96/80px right-aligned columns: the date never filled 96px, so a
-       * row showed leftover column PLUS the gap, and anything that grew on
-       * hover (the size/download affordance) expanded leftwards in a row and
-       * rightwards in a card. */
-      return (
-        <div key={`line-${i}`} className="flex items-baseline min-w-0" style={{ gap: 'var(--kol-spacing-6)' }}>
-          {parts.map((p, j) => (j === 0
-            ? <div key={j} className="flex-1 min-w-0 truncate">{p}</div>
-            : <div key={j} className="shrink-0">{p}</div>))}
-        </div>
-      )
-    }
     return (
       <div
         key={`${kind}-${i}`}

package/src/organisms/ContentCollection.jsx

@@ -13,14 +13,28 @@ import usePrefersReducedMotion from '../hooks/usePrefersReducedMotion.js'
  * ponytail: form switch re-mounts with a stagger, no FLIP — add FLIP
  * (measure → invert → play) when a consumer needs card↔row to tween.
  *
+ * BOTH FORMS ARE GRIDS (user call 2026-08-15: *"layout always wraps the items
+ * in a grid, at least 99% of the time"*). `list` is not a single column — it is
+ * the same wall with WIDER tracks, so a compact row gets the room its fields
+ * need. The shipped consumers already did this (`repeat(4, 1fr)` for list,
+ * `repeat(6, 1fr)` for grid); what they got wrong was FORCING the count.
+ *
+ * The count derives from the wall's OWN width, never the viewport, and never a
+ * fixed track count — 05-layout-systems.md, the card-wall law: *"the shell
+ * rails eat width that viewport breakpoints can't see, so a forced count
+ * compresses every card"* (user call 2026-08-09). Hence `auto-fill` +
+ * `minmax()`, with the law's 20rem minimum as the default.
+ *
  * @param {string}  form     'grid' | 'list'
- * @param {string}  min      grid track minimum (CSS length), grid form only
+ * @param {string}  min      grid track minimum, card form (default 20rem — the law)
+ * @param {string}  listMin  grid track minimum, list form (default 30rem)
  * @param {number}  gap      px between items
  * @param {boolean} stagger  enter animation on/off (reduced motion wins)
  */
 export default function ContentCollection({
   form = 'grid',
-  min = '12rem',
+  min = '20rem',
+  listMin = '30rem',
   gap = 16,
   stagger = true,
   children,
@@ -34,11 +48,11 @@ export default function ContentCollection({
     <ul
       key={form}
       className={`m-0 list-none p-0 ${className}`.trim()}
-      style={
-        form === 'grid'
-          ? { display: 'grid', gridTemplateColumns: `repeat(auto-fill, minmax(${min}, 1fr))`, gap: `${gap}px` }
-          : { display: 'flex', flexDirection: 'column', gap: `${gap}px` }
-      }
+      style={{
+        display: 'grid',
+        gridTemplateColumns: `repeat(auto-fill, minmax(${form === 'list' ? listMin : min}, 1fr))`,
+        gap: `${gap}px`,
+      }}
     >
       {items.map((child, i) =>
         child == null ? null : (