@kolkrabbi/kol-component 0.144.0 → 0.146.0

package/package.json

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

package/src/molecules/SectionCardItem.jsx

@@ -61,7 +61,18 @@ export default function SectionCardItem({
     '16/9': 'aspect-video',
     '1/1': 'aspect-square',
   }
-  const aspectClass = aspectClasses[imageAspectRatio] || ''
+  /* A MEDIA BOX MAY NOT RESOLVE TO ZERO HEIGHT (CardFeatureVisualCollapses,
+   * kol-website 2026-08-31). With no ratio the box was `flex-1` and nothing
+   * else — `flex: 1 1 0%`, basis ZERO, so its own content contributed nothing
+   * and its height was donated entirely by the parent. Where no ancestor
+   * supplies a definite height it resolves to 0 and the card silently drops to
+   * title + subtitle: no broken image, no failed request, just a short card and
+   * a reader who never learns a visual was meant to be there. Reported from a
+   * real iPhone; not reproducible on this machine in any of the three engines,
+   * which is exactly what a donated-height collapse looks like.
+   * 3/2 is the geometry those cards already render at (316 wide → 211 tall at
+   * 390), so nothing moves where it currently works. */
+  const aspectClass = aspectClasses[imageAspectRatio] || 'aspect-[3/2]'
 
   const content = textOnly ? (
     <>
@@ -81,7 +92,7 @@ export default function SectionCardItem({
       {/* kol-card-feature-visual: zooms 1.03 on card hover (chrome in
         * kol-theme — CardFeatureHoverZoom 2026-08-12); all three visual
         * forms ride the same wrapper, reduced-motion opts out. */}
-      <div className={`kol-card-feature-visual w-full flex-1 flex items-center justify-center overflow-hidden ${aspectClass}`.trim()}>
+      <div className={`kol-card-feature-visual w-full flex-auto flex items-center justify-center overflow-hidden ${aspectClass}`.trim()}>
         {visual ? (
           typeof visual === 'string' ? (
             isSvgUrl ? (

package/src/molecules/TiltBento.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { motion } from 'framer-motion'
 import HlsVideo from '../atoms/HlsVideo.jsx'
 import AssetPlaceholder from '../utilities/AssetPlaceholder.jsx'
@@ -31,6 +31,37 @@ function useCoarsePointer() {
   return coarse
 }
 
+/* WHICH CARD HAS ATTENTION WHEN THERE IS NO HOVER (TiltBentoCoarseRevealInView,
+ * kol-website 2026-08-31). Coarse devices used to render every card fully open —
+ * title, subtitle, description and CTA stacked over the artwork at once — which
+ * on a column of full-width cards means the text permanently competes with the
+ * image it sits on, on the device where the image is largest relative to it.
+ *
+ * An IntersectionObserver whose root is squeezed to the viewport's middle band
+ * (-45% top and bottom) intersects ONLY the element crossing the centre line, so
+ * at most one full-width card in a column is ever active. That is the same "one
+ * open at a time" a mouse gets from hover, with no cross-card coordination and
+ * no shared store — each card answers for itself.
+ *
+ * The component's vocabulary does not change: the title is always visible, the
+ * scrim and the rest reveal on attention. Only the definition of attention
+ * differs per input type. */
+function useInViewCentre(enabled) {
+  const ref = useRef(null)
+  const [inView, setInView] = useState(false)
+  useEffect(() => {
+    const el = ref.current
+    if (!enabled || !el || typeof IntersectionObserver === 'undefined') return
+    const io = new IntersectionObserver(([entry]) => setInView(entry.isIntersecting), {
+      rootMargin: '-45% 0px -45% 0px',
+      threshold: 0,
+    })
+    io.observe(el)
+    return () => io.disconnect()
+  }, [enabled])
+  return [ref, enabled && inView]
+}
+
 /**
  * Media — internal, NOT exported. Sniffs `src` by extension and renders the
  * right full-bleed media element: `.m3u8` → HlsVideo, `.mov|.mp4|.webm` →
@@ -86,6 +117,10 @@ function Media({ src, poster, className }) {
  * @param {string}    src            media source; type auto-detected by extension
  * @param {string}    poster         poster frame for HLS/video
  * @param {ReactNode} title          always-visible heading
+ * @param {'in-view'|'static'} [coarseReveal='in-view']  what counts as attention on a device
+ *   with no hover. `in-view` reveals only the card crossing the viewport's centre line and leaves
+ *   the others at title-only; `static` is the pre-2026-08-31 behaviour — every card fully open —
+ *   which a wall of small bento tiles may still want. The fine-pointer hover path never changes.
  * @param {ReactNode} subtitle       hover-revealed line
  * @param {ReactNode} description    hover-revealed paragraph
  * @param {string}    href           CTA target; `http*`/`mailto` → new-tab anchor, else same-tab (onNavigate seam)
@@ -118,6 +153,7 @@ export default function TiltBento({
   overlayOpacity = 60,
   alignRight = false,
   enableTilt = true,
+  coarseReveal = 'in-view',
   titleClassName = 'kol-sans-heading-01 text-ab-white',
   contentClassName = 'max-w-[384px]',
   imageClassName = 'object-cover object-center',
@@ -128,6 +164,10 @@ export default function TiltBento({
   const reduced = usePrefersReducedMotion()
   const coarse = useCoarsePointer()
   const tilt = useTilt()
+  const [viewRef, centred] = useInViewCentre(coarse && coarseReveal === 'in-view')
+  /* On a coarse pointer the card is "open" when it holds the centre; under
+   * `static` it is always open, which is what shipped before. */
+  const coarseOpen = coarseReveal === 'static' || centred
 
   const tiltOff = !enableTilt || reduced || coarse
   const Component = tiltOff ? 'div' : motion.div
@@ -140,11 +180,15 @@ export default function TiltBento({
     ? {}
     : { ref: tilt.ref, onMouseMove: tilt.onMouseMove, onMouseLeave: tilt.onMouseLeave }
 
-  // Reveal choreography. Coarse (no-hover) devices show everything statically;
-  // fine pointers reveal on group-hover. The opacity transition is motion, so
-  // reduced-motion drops it (content still reveals, just without the fade).
+  // Reveal choreography. Fine pointers reveal on group-hover; coarse pointers
+  // reveal the centred card (or every card under `coarseReveal="static"`). The
+  // opacity transition is motion, so reduced-motion drops it (content still
+  // reveals, just without the fade).
   const fade = reduced ? '' : 'transition-opacity duration-300'
-  const revealClass = `${coarse ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'} ${fade}`.trim()
+  const openClass = coarse
+    ? (coarseOpen ? 'opacity-100' : 'opacity-0')
+    : 'opacity-0 group-hover:opacity-100'
+  const revealClass = `${openClass} ${fade}`.trim()
 
   const mediaClass =
     `absolute left-0 top-0 size-full rounded overflow-hidden ${imageClassName} ${coarse ? 'pointer-events-none' : ''}`.trim()
@@ -154,7 +198,7 @@ export default function TiltBento({
   return (
     <Component
       className={`relative group ${alignRight ? 'ms-auto' : 'size-full'} ${className}`.trim()}
-      {...tiltHandlers}
+      {...(coarse ? { ref: viewRef } : tiltHandlers)}
       {...rest}
       style={{ ...rootStyle, ...rest.style }}
     >
@@ -164,7 +208,7 @@ export default function TiltBento({
         <div className={`relative z-10 ${contentClassName} w-full h-full self-stretch`}>
           {overlayOpacity > 0 && (
             <div
-              className={`absolute -inset-1 rounded ${coarse ? 'opacity-60' : 'opacity-0 group-hover:opacity-100'} ${fade} pointer-events-none`.trim()}
+              className={`absolute -inset-1 rounded ${coarse ? (coarseOpen ? 'opacity-60' : 'opacity-0') : 'opacity-0 group-hover:opacity-100'} ${fade} pointer-events-none`.trim()}
               style={{ backgroundColor: `rgba(0, 0, 0, ${overlayOpacity / 100})` }}
             />
           )}

package/src/organisms/SectionNewsletter.jsx

@@ -29,8 +29,11 @@ import { minHeightClass } from './sectionHeights.js'
  * error ids are useId-generated (or `inputId`) so multiple sections mount
  * without collisions.
  *
- * @param {'full'|'80'|'60'|'40'|string} [height='60']  min-height on the family's ladder — full = 100dvh,
- *   80 = 70svh / 80vh, 60 = 50svh / 60vh (default), 40 = 35svh / 40vh; content stays vertically centred inside it
+ * @param {'full'|'80'|'60'|'40'|string} [height='40']  min-height on the family's ladder — full = 100dvh,
+ *   80 = 70svh / 80vh, 60 = 50svh / 60vh, 40 = 35svh / 40vh (default); content stays vertically centred inside it.
+ *   DEFAULT DROPPED 60 → 40 (SectionNewsletterMobileMeasure, kol-website 2026-08-31): at rung 60 the band
+ *   reserved 422px around 308px of content on an 844-tall phone — ~114px of empty grey to scroll past. The
+ *   LADDER is untouched; every other section still wants its rung. Pass `height="60"` to keep the old air.
  * @param {'inverse'|'light'|'dark'} theme  the paired theme of whatever is live, or a pinned one — stamped on the section
  * @param {ReactNode} eyebrow      eyebrow above the headline (uppercase by role); `label` is its alias
  * @param {ReactNode} headline     heading (display-01 by default; `headlineSize` picks another role)
@@ -44,12 +47,17 @@ import { minHeightClass } from './sectionHeights.js'
  * @param {string}    id           anchor id on the section (e.g. "signup")
  * @param {string}    inputId      id override for the email input (default useId-generated)
  * @param {object}    slotClass · slotStyle   per-slot class / style on the SectionText (reveal seam)
+ * @param {'sm'|'md'|'lg'} [controlSize='md']  size rung for BOTH the email Input and the submit
+ *   Button (SectionNewsletterControlSize, kol-website 2026-08-31). The pair was hardcoded md with no
+ *   seam, so a page that sets `size="lg"` on every other call-site button could not match it here and
+ *   the newsletter read visibly smaller directly beneath them. Default is today's md — nothing moves.
  * @param {string}    className    extra classes on the section
  * @param {'primary'|'secondary'|'tertiary'|'inverse'|'auto'|'none'|string} background  the section's surface
  *   (SectionBackgroundProp, 2026-08-27) — a named surface, `none`, or a raw utility / token string; default = what it painted before
  */
 export default function SectionNewsletter({
-  height = '60',
+  height = '40',
+  controlSize = 'md',
   theme,
   background,
   eyebrow,
@@ -103,7 +111,14 @@ export default function SectionNewsletter({
       id={id}
       ref={themeRef}
       data-theme={themeStamp}
-      className={`kol-section-newsletter w-full flex flex-col justify-center py-24 ${surfaceClass(background, theme ? 'primary' : 'none')} ${theme ? 'text-auto' : ''} ${minHeightClass(height)} ${className}`.replace(/\s+/g, ' ').trim()}
+      /* THE FORM NEEDS AN INSET FLOOR (SectionNewsletterMobileMeasure, 2026-08-31).
+        * Desktop's 80px is not padding — it is the leftover of the inner measure
+        * (1184 band − 1024 max-w, halved), so it SCALES TO ZERO rather than down:
+        * at 390 the field and submit ran edge to edge against the band's own
+        * boundary and read as breaking out of it. `px-5` is a floor the band owns.
+        * Desktop does not move — the measure caps below the padded width, so the
+        * inner block still centres at 80px from the band edge. */
+        className={`kol-section-newsletter w-full flex flex-col justify-center px-5 sm:px-8 py-24 ${surfaceClass(background, theme ? 'primary' : 'none')} ${theme ? 'text-auto' : ''} ${minHeightClass(height)} ${className}`.replace(/\s+/g, ' ').trim()}
     >
       {/* the family's ONE cap — the shell's --kol-container-max ladder — and
         * inside it the lede's MEASURE on a wrapper (SectionNewsletterForm,
@@ -134,7 +149,7 @@ export default function SectionNewsletter({
               placeholder={placeholder}
               value={email}
               onChange={(e) => setEmail(e.target.value)}
-              size="md"
+              size={controlSize}
               aria-required="true"
               aria-describedby={status === 'error' ? errorId : undefined}
               className="w-full sm:max-w-[400px] md:max-w-[520px]"
@@ -142,6 +157,7 @@ export default function SectionNewsletter({
             <Button
               type="submit"
               variant="primary"
+              size={controlSize}
               disabled={status === 'submitting'}
               className="w-full sm:w-auto"
             >

package/src/organisms/SectionSplit.jsx

@@ -135,7 +135,18 @@ export default function SectionSplit({
            * caps at the column — the media takes its size from the section,
            * never gives it */
           <div
-            className={`kol-section-split-visual relative w-auto max-w-full justify-self-center rounded-[var(--kol-radius-sm)] ${mediaClip ? 'overflow-hidden' : ''} ${mediaHover ? 'is-hoverable' : ''} ${mediaFirst ? 'order-1' : ''} ${centred ? 'max-w-[640px]' : ''}`.replace(/\s+/g, ' ').trim()}
+            /* THE MEDIA FILLS ITS COLUMN (SectionSplitVisualWidth, kol-website
+             * 2026-08-31). It was `w-auto`, so the width was derived from the
+             * image's aspect against whatever height the box was given — tall
+             * enough and it clamped to max-w-full and filled; short and it
+             * resolved NARROWER than the column and `justify-self-center` then
+             * centred it, so the media sat visibly inset while the copy beneath
+             * stayed at the page gutter. It is VIEWPORT HEIGHT that decides:
+             * 390×844 passes, 390×700 renders at left 56 · width 278. A real
+             * phone with browser chrome sits in the 660–720 band, which is why
+             * this was reported from a device four times and never reproduced
+             * against a nominal 844-tall test. `max-w-full` alone only caps. */
+            className={`kol-section-split-visual relative w-full max-w-full justify-self-center rounded-[var(--kol-radius-sm)] ${mediaClip ? 'overflow-hidden' : ''} ${mediaHover ? 'is-hoverable' : ''} ${mediaFirst ? 'order-1' : ''} ${centred ? 'max-w-[640px]' : ''}`.replace(/\s+/g, ' ').trim()}
             style={{ aspectRatio: ratio, height: 'calc(var(--kol-section-h, 60vh) - 2 * var(--kol-section-py, 4rem))' }}
           >
             {media}