@kolkrabbi/kol-component 0.46.0 → 0.47.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.46.0",
+  "version": "0.47.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/atoms/ActionButton.jsx

@@ -1,5 +1,5 @@
-import { useRef, useState, useEffect } from 'react'
-import { AnimatePresence, motion } from 'framer-motion'
+import { useRef, useState, useEffect, useLayoutEffect } from 'react'
+import gsap from 'gsap'
 import { Icon } from '@kolkrabbi/kol-icons'
 import { glyphSize } from '../hooks/glyphLadders.js'
 
@@ -16,14 +16,26 @@ import { glyphSize } from '../hooks/glyphLadders.js'
  *
  * The swap is ANIMATED, which the original was not — it hard-cut between two
  * glyphs. framer-motion is already a declared peer of this package (TiltCard),
- * so nothing new is installed. The curve is the house curve
- * `cubic-bezier(0.16, 1, 0.3, 1)`, not `--kol-transition-base`'s generic
- * material ease: the rest of the card family moves on the house curve and a
- * control inside a card that eases differently reads as a foreign part.
+ * so nothing new is installed. The curve is the house curve — the numeric twin
+ * of `--kol-ease-house`, since gsap takes an array and cannot read a CSS var.
+ * If the token moves, `HOUSE_EASE` below moves with it by hand; that is the one
+ * place in the DS where the curve is duplicated rather than referenced.
  *
- * Chrome is `.kol-copy-btn` (kol-theme) — the DS's action-button look, which
- * predates this component and is misnamed for it. Positioning stays the
- * parent's job, exactly as before: pass `.kol-frame-control` to sit it in a
+ * Chrome is IconFrame's — `kol-icon-frame kol-icon-frame-{variant} -{size}`,
+ * emitted the way Dropdown emits `kol-btn` classes. 05-control-chrome.md:109:
+ * *"Any icon-only control in chrome is IconFrame variant="nav" size="…" —
+ * nothing hand-writes the square (user ruling 2026-08-01)."* This component
+ * hand-wrote one for a day; it does not any more.
+ *
+ * A DIMMED REST IS A VARIANT SWAP, NOT A STATE (same doc). `nav` rests at
+ * oq-64, `ghost` at oq-48, both static — so there is no hover ladder here and
+ * none should be added.
+ *
+ * `plate` is the doc's ONE named exception: an affordance over a PHOTO needs an
+ * opaque plate plus a backdrop blur to stay legible over arbitrary pixels, and
+ * no Button variant covers it. The plate is the discriminator, not a list.
+ *
+ * Positioning stays the parent's job: pass `.kol-frame-control` to sit it in a
  * card's corner, or nothing to leave it in flow.
  *
  * @param {string}   icon         glyph at rest
@@ -43,12 +55,35 @@ import { glyphSize } from '../hooks/glyphLadders.js'
  *                                exists to stop.
  * @param {number}   iconSize     px override for the glyph only — the square
  *                                never moves with it (2026-07-28 law)
+ * @param {boolean}  toggle       STICKY instead of timed — the on-state holds
+ *                                until clicked again, and `confirmIcon` is the
+ *                                on-glyph (star → star-solid), not a receipt.
+ *                                A confirm says "that happened"; a toggle says
+ *                                "this IS", and the two must not share a timer.
+ * @param {string}   chrome       WHICH control this is. Three separate styles,
+ *                                no shared base — they had one, and every edit
+ *                                to a shared rule moved all of them:
+ *                                  'copy'   .kol-copy-btn      CodeBlock's, untouched
+ *                                  'media'  .kol-media-control boxed, over a photo
+ *                                  'inline' .kol-inline-control bare, inside text
  */
-const HOUSE_EASE = [0.16, 1, 0.3, 1]
+const HOUSE_EASE = [0.4, 0, 0.2, 1]
+
+/* long enough that the press is unmistakably a state, short enough that it is
+ * not a mode. The release then plays the full bounce out. */
+const PRESS_HOLD = 1600
+
+const SWAP_MS = 500
+
+const CHROME = {
+  copy: 'kol-copy-btn',
+  media: 'kol-media-control',
+  inline: 'kol-inline-control',
+}
 
 export default function ActionButton({
   icon,
-  confirmIcon = 'check',
+  confirmIcon,
   label,
   confirmLabel,
   onAction,
@@ -56,46 +91,88 @@ export default function ActionButton({
   hold = 2000,
   size = 'md',
   iconSize,
+  chrome = 'copy',
+  toggle = false,
   className = '',
   ...rest
 }) {
   const [done, setDone] = useState(false)
+  /* CSS :active lasts exactly as long as the mouse button is down — about 50ms
+   * on a real click — so no duration or curve can make the press read. The
+   * pressed state is HELD here instead, then released to animate out. */
+  const [pressed, setPressed] = useState(false)
   const timer = useRef(null)
+  const pressTimer = useRef(null)
 
   /* the timer outlives the click — clear it if the control unmounts mid-hold,
    * or React warns and the callback fires into a dead component */
-  useEffect(() => () => clearTimeout(timer.current), [])
+  useEffect(() => () => { clearTimeout(timer.current); clearTimeout(pressTimer.current) }, [])
 
   const handle = async (event) => {
+    clearTimeout(pressTimer.current)
+    setPressed(true)
+    pressTimer.current = setTimeout(() => setPressed(false), PRESS_HOLD)
     if (onAction) await onAction(event)
     clearTimeout(timer.current)
+    if (toggle) {
+      setDone((on) => !on)
+      return
+    }
     setDone(true)
     timer.current = setTimeout(() => setDone(false), hold)
   }
 
   const aria = (done && confirmLabel) || label
-  const cls = `kol-copy-btn kol-copy-btn-${size} ${className}`.trim()
+  const base = CHROME[chrome] ?? CHROME.copy
+  const cls = `${base}${toggle && done ? ` ${base}--on` : ''}${pressed ? ` ${base}--pressed` : ''} ${className}`.trim()
   const glyphPx = iconSize ?? glyphSize(size, true)
 
-  /* A HANDOFF, not a swap (user ruling 2026-08-15). `mode="wait"` held the box
-   * empty while the outgoing glyph finished, which reads as a blink at 32px.
-   * Both glyphs occupy the SAME grid cell and cross over each other: the old
-   * one lifts and fades as the new one rises into place. */
+  /* THE SWAP IS A MORPH where the glyphs allow it (user ruling 2026-08-15).
+   * Both glyphs are mounted in one cell; when each side is a single <path>,
+   * MorphSVG tweens the path data so one shape BECOMES the other. Multi-path
+   * glyphs (download is 3, trash is 5) cannot morph 1:1, so they cross over on
+   * the same clock instead — the timing stays identical either way. */
+  const restRef = useRef(null)
+  const onRef = useRef(null)
+  const first = useRef(true)
+
+  /* A CROSSFADE between two real glyphs, not a morph. MorphSVG rewrote the
+   * path `d` in the DOM to tween between shapes — which mutates the icon the
+   * set shipped. If a state needs a different shape, that shape is an icon in
+   * the set (`star` / `star-solid`), not something computed at runtime. */
+  useLayoutEffect(() => {
+    const rest = restRef.current
+    const on = onRef.current
+    /* no confirmIcon = ONE glyph, and the state is carried by the class alone
+     * (a fill, a colour). Nothing to crossfade. */
+    if (!rest || !on) return undefined
+
+    if (first.current) {
+      first.current = false
+      gsap.set(rest, { autoAlpha: 1 })
+      gsap.set(on, { autoAlpha: 0 })
+      return undefined
+    }
+
+    const from = done ? rest : on
+    const to = done ? on : rest
+    const ctx = gsap.context(() => {
+      gsap.to(from, { autoAlpha: 0, duration: SWAP_MS / 1000, ease: 'power1.inOut' })
+      gsap.to(to, { autoAlpha: 1, duration: SWAP_MS / 1000, ease: 'power1.inOut' })
+    })
+    return () => ctx.revert()
+  }, [done])
+
   const glyph = (
-    <span className="inline-grid place-items-center" style={{ width: glyphPx, height: glyphPx }}>
-      <AnimatePresence initial={false}>
-        <motion.span
-          key={done ? 'confirm' : 'rest'}
-          className="inline-flex"
-          style={{ gridArea: '1 / 1' }}
-          initial={{ opacity: 0, scale: 0.6, y: 4 }}
-          animate={{ opacity: 1, scale: 1, y: 0 }}
-          exit={{ opacity: 0, scale: 0.6, y: -4 }}
-          transition={{ duration: 0.22, ease: HOUSE_EASE }}
-        >
-          <Icon name={done ? confirmIcon : icon} size={glyphPx} />
-        </motion.span>
-      </AnimatePresence>
+    <span className="kol-action-glyph relative inline-grid place-items-center" style={{ width: glyphPx, height: glyphPx }}>
+      <span ref={restRef} className="inline-flex" style={{ gridArea: '1 / 1' }}>
+        <Icon name={icon} size={glyphPx} />
+      </span>
+      {confirmIcon && (
+        <span ref={onRef} className="inline-flex" style={{ gridArea: '1 / 1', opacity: 0 }}>
+          <Icon name={confirmIcon} size={glyphPx} />
+        </span>
+      )}
     </span>
   )
 

package/src/molecules/ContentCard.jsx

@@ -37,8 +37,39 @@ const BOX = {
   catalog:  { layout: 'fill-card', border: 'var(--kol-fg-04)', bg: 'var(--kol-fg-04)', pad: 'var(--kol-pad-card-sm) var(--kol-pad-card-md)', plateTop: true, plateBg: 'var(--kol-surface-primary)' },
   print:    { layout: 'fill-card', border: null, bg: 'var(--kol-surface-secondary)', pad: 'var(--kol-pad-card-sm) var(--kol-pad-card-md)', plateTop: true },
   article:  { layout: 'stack', border: null, bg: null, pad: '0', mediaGap: 'var(--kol-spacing-4)' },
-  work:     { layout: 'stack', border: 'var(--kol-fg-04)', bg: null, pad: 'var(--kol-pad-card-md)' },
-  typeface: { layout: 'canvas', border: 'var(--kol-fg-08)', bg: 'var(--kol-surface-primary)', pad: 'var(--kol-pad-card-lg)' },
+  /* work is a DRAWER: image-only at rest, and on hover a light plate rises
+   * over the bottom of the artwork carrying the title + meta. This is the
+   * shipped WorkCard and it was wrong to reject it as "hiding the title" — a
+   * work shelf is a wall of images by design, and the caption is the reveal. */
+  work:     { layout: 'drawer', border: 'var(--kol-fg-04)', bg: null, pad: 'var(--kol-pad-card-md)', padMd: 'var(--kol-pad-card-lg)' },
+  /* typeface's card is a FIXED 500px tall specimen board, not a ratio — the
+   * shipped item is `h-[500px]`, and a ratio re-crops the glyph at every
+   * column width, which is the one thing a specimen must not do. */
+  typeface: { layout: 'canvas', border: 'var(--kol-fg-08)', bg: 'var(--kol-surface-primary)', pad: 'var(--kol-pad-card-lg)', height: 500 },
+}
+
+/* HOVER is a bg STEP on the opaque tier, per 05-control-chrome.md's state model
+ * — "interactive fills mix ink into the surface via the oq-* tier, never a
+ * translucent fg-* wash", because a translucent fill over an image reads as the
+ * control vanishing. article is the exception the shipped card already set: it
+ * has no surface of its own to step, so it dims its title instead. */
+const HOVER = {
+  default:  'var(--kol-oq-04)',
+  catalog:  'var(--kol-surface-tertiary)',
+  print:    'var(--kol-oq-04)',
+  article:  null,
+  work:     null,
+  typeface: 'var(--kol-surface-inverse)',
+}
+
+/* per-variant media treatment. `ring` sits OVER the artwork, `frame` UNDER it —
+ * see ContentMedia. print rings because an A4 print on a light page has no edge
+ * of its own; article frames because its media is a 16/9 thumbnail that rarely
+ * fills its box. */
+const MEDIA = {
+  print:   { ring: true },
+  /* ListingCard's card media steps its border on hover — fg-08 → fg-16 */
+  article: { frame: true, borderHover: true },
 }
 
 export default function ContentCard({
@@ -46,10 +77,15 @@ export default function ContentCard({
   pad,
   media,
   ratio,
+  fit,
+  frame,
+  ring,
   control,
   actions,
   selected = false,
   onClick,
+  href,
+  onNavigate,
   className = '',
   ...text
 }) {
@@ -57,27 +93,44 @@ export default function ContentCard({
   const r = ratio ?? RATIOS[variant]
   const padding = pad ? `var(--kol-pad-card-${pad})` : box.pad
   /* image-only cards (print) pass no text slots — the empty plate must not render */
-  const hasText = ['title', 'body', 'kicker', 'detail', 'date', 'size', 'meta'].some((k) => text[k] != null)
-  /* `actions` — consumer content BELOW the text, in flow (2026-08-15 ruling).
-   * The other half of what MediaCard hardcodes: `control` sits OVER the media,
-   * this sits under the copy. Two positions, two slots, and a plate renders for
-   * either — an actions-only card is legal. */
+  const hasText = ['title', 'body', 'kicker', 'detail', 'date', 'size', 'meta', 'tags'].some((k) => text[k] != null)
+  /* `actions` sit IN THE TEXT PLATE, bottom-right (user ruling 2026-08-15:
+   * *"space in text bottom right"*). Not stacked under the copy in their own
+   * row — that grew the card — and not on the media, which was my call to make
+   * and wasn't. The plate is one flex row: text takes the width, actions hold
+   * the trailing edge, both bottom-aligned so the buttons sit on the last line
+   * of copy rather than floating beside the title. */
   const hasPlate = hasText || actions != null
   const framed = box.border != null || box.bg != null
 
   const textNode = hasPlate ? (
     <div
+      className="kol-card-plate relative"
       style={{
+        '--kol-plate-pad': padding,
+        '--kol-plate-pad-md': box.padMd,
         padding,
         marginTop: box.layout === 'stack' ? box.mediaGap : undefined,
         borderTop: box.plateTop ? '1px solid var(--kol-fg-04)' : undefined,
-        background: box.plateBg,
-        position: box.layout === 'canvas' ? 'relative' : undefined,
+        background: box.layout === 'drawer' ? 'var(--kol-surface-inverse)' : box.plateBg,
+        color: box.layout === 'drawer' ? 'var(--kol-fg-inverse)' : undefined,
+        position: 'relative',
         zIndex: box.layout === 'canvas' ? 1 : undefined,
       }}
     >
       {hasText && <ContentText variant={variant} form="card" {...text} />}
-      {actions && <div style={{ marginTop: hasText ? 'var(--kol-spacing-2)' : undefined }}>{actions}</div>}
+      {/* ABSOLUTE, not a flex sibling: the plate's height moves with the title
+        * and the meta, so a laid-out stack would stretch or drift with it. The
+        * inset reads the SAME pad token the plate uses, so the icons sit the
+        * same distance from the top and right edges as the copy does. */}
+      {actions && (
+        <div
+          className="absolute flex"
+          style={{ top: padding, bottom: padding, right: padding }}
+        >
+          {actions}
+        </div>
+      )}
     </div>
   ) : null
 
@@ -87,6 +140,13 @@ export default function ContentCard({
    * them, so their media keeps its radius. The ROW is untouched: it does not
    * clip, so ContentRow's thumb rounds as before. */
   const mediaRadius = !framed
+  const mediaProps = {
+    radius: mediaRadius,
+    fit: fit ?? MEDIA[variant]?.fit,
+    frame: frame ?? MEDIA[variant]?.frame ?? false,
+    ring: ring ?? MEDIA[variant]?.ring ?? false,
+    borderHover: MEDIA[variant]?.borderHover ?? false,
+  }
 
   /* `control` — the in-frame control slot (user ruling 2026-08-15). One node,
    * placed in the media frame's corner by `.kol-frame-control` (kol-theme).
@@ -96,11 +156,12 @@ export default function ContentCard({
    * the reason its media library could not migrate onto ContentCard. */
   const controlNode = control ? <div className="kol-frame-control">{control}</div> : null
 
+
   const body =
     box.layout === 'stack' ? (
       <>
         <div className="relative">
-          <ContentMedia ratio={r} radius={mediaRadius}>{media}</ContentMedia>
+          <ContentMedia ratio={r} {...mediaProps}>{media}</ContentMedia>
           {controlNode}
         </div>
         {textNode}
@@ -108,33 +169,82 @@ export default function ContentCard({
     ) : box.layout === 'fill-card' ? (
       <>
         <div className="flex-1 min-w-0 relative overflow-hidden">
-          <ContentMedia ratio={null} radius={mediaRadius}>{media}</ContentMedia>
+          <ContentMedia ratio={null} {...mediaProps}>{media}</ContentMedia>
           {controlNode}
         </div>
         {textNode}
       </>
+    ) : box.layout === 'drawer' ? (
+      <>
+        <div className="relative h-full">
+          <ContentMedia ratio={null} {...mediaProps}>{media}</ContentMedia>
+          {controlNode}
+        </div>
+        {/* the plate is INVERSE and hidden until hover — `kol-card-drawer` owns
+          * the reveal so the transition sits with the rest of the chrome */}
+        {textNode && <div className="kol-card-drawer">{textNode}</div>}
+      </>
     ) : (
       /* canvas — media fills the frame, plate floats on top */
       <>
         <div className="absolute" style={{ inset: 0 }}>
-          <ContentMedia ratio={null} radius={mediaRadius}>{media}</ContentMedia>
+          <ContentMedia ratio={null} {...mediaProps}>{media}</ContentMedia>
           {controlNode}
         </div>
         {textNode}
       </>
     )
 
-  return (
-    <article
-      onClick={onClick}
-      className={`flex flex-col ${framed ? 'overflow-hidden rounded-[var(--kol-radius-sm)]' : ''} ${box.border ? 'border' : ''} ${box.layout === 'canvas' ? 'relative' : ''} ${onClick ? 'cursor-pointer select-none' : ''} ${className}`.trim()}
-      style={{
-        borderColor: box.border ? (selected ? 'var(--kol-fg-64)' : box.border) : undefined,
-        background: box.bg ?? undefined,
-        aspectRatio: box.layout !== 'stack' ? r : undefined,
-      }}
-    >
-      {body}
-    </article>
-  )
+  /* THE ROOT FOLLOWS THE AFFORDANCE. A card that navigates must be a real <a>:
+   * middle-click, cmd-click, focus order, "copy link address" and every screen
+   * reader's link list all come from the tag, and none of them can be added
+   * back with a click handler. `onNavigate` is the SPA seam — call it, and if
+   * it does not preventDefault the browser follows the href, so the card works
+   * with or without a router.
+   *
+   * A card with only onClick stays an <article> but becomes operable: a div you
+   * can click and cannot focus is the single most common a11y regression in a
+   * card family, and it is what every shipped variant here had. */
+  const nav = (event) => {
+    if (onNavigate) onNavigate(event, href)
+    if (onClick) onClick(event)
+  }
+  const interactive = href || onClick
+  const hoverBg = HOVER[variant]
+
+  const common = {
+    className: `kol-card group flex flex-col ${box.layout === 'drawer' ? 'relative overflow-hidden rounded-[var(--kol-radius-sm)]' : ''} ${framed ? 'overflow-hidden rounded-[var(--kol-radius-sm)]' : ''} ${box.border ? 'border' : ''} ${box.layout === 'canvas' ? 'relative' : ''} ${interactive ? 'cursor-pointer select-none' : ''} ${hoverBg && interactive ? 'kol-content-hover' : ''} ${className}`.trim(),
+    style: {
+      /* same reason as ContentRow: rest colours are PROPERTIES, because an
+       * inline background/borderColor outranks the hover class and the step
+       * would never render. */
+      '--kol-card-bg': box.bg ?? undefined,
+      '--kol-card-border': box.border ? (selected ? 'var(--kol-fg-64)' : box.border) : undefined,
+      '--kol-content-hover-bg': hoverBg ?? undefined,
+      aspectRatio: box.height ? undefined : (box.layout !== 'stack' ? r : undefined),
+      height: box.height,
+    },
+  }
+
+  if (href) {
+    return <a href={href} onClick={nav} {...common}>{body}</a>
+  }
+  if (onClick) {
+    return (
+      <article
+        onClick={onClick}
+        role="button"
+        tabIndex={0}
+        onKeyDown={(e) => {
+          if (e.key !== 'Enter' && e.key !== ' ') return
+          e.preventDefault()
+          onClick(e)
+        }}
+        {...common}
+      >
+        {body}
+      </article>
+    )
+  }
+  return <article {...common}>{body}</article>
 }

package/src/molecules/ContentMedia.jsx

@@ -16,20 +16,76 @@ import AssetPlaceholder from '../utilities/AssetPlaceholder.jsx'
  * one edge — the visible double-round. ContentCard turns it off for its framed
  * variants; the ROW keeps it, because a row does not clip.
  *
+ * `fit` (2026-08-15) — `cover` crops to fill, which is right for a photograph
+ * and wrong for a diagram or a screenshot, where the crop eats the content.
+ * `natural` and `compact` are GridCard's `previewFit` under the family's name;
+ * the shipped values are kept so a catalog grid can move over without a
+ * re-tune. `cover` stays the default — every card in the family today is a
+ * photograph.
+ *
+ * THREE separate edge treatments, because the shipped components use three:
+ *
+ *   frame   a TINTED box + border UNDER the media — article's card media is
+ *           `bg-fg-04 border-fg-08`, and the tint shows wherever a 16/9 thumb
+ *           does not fill its box
+ *   border  border ONLY, no tint — WorkListItem's thumb is `border-fg-08` over
+ *           a full-bleed image, where a tint would never be seen anyway and
+ *           painting one is just a wrong value nobody notices
+ *   ring    an inset hairline OVER the artwork — how a print card keeps a light
+ *           image from bleeding into a light page
+ *
+ * `bg` tints without any border — ListingCard's row thumb is `bg-fg-12` bare.
+ * They compose; a frame behind a full-bleed cover image is invisible, a ring
+ * over one is the only thing you see.
+ *
+ * NOT here, deliberately: `loading="lazy"` and the fade-on-load. The media is
+ * consumer-INJECTED — the real `<img>` is theirs — so lazy is one attribute on
+ * their own element, and taking it over would mean cloneElement'ing a node the
+ * family does not own to attach an onLoad it cannot guarantee fires (a cached
+ * image never does). Reaching into someone else's element to animate it is the
+ * kind of magic that breaks silently a year later.
+ *
  * @param {string}    ratio     CSS aspect-ratio, e.g. '1 / 1', '16 / 9', '1 / 1.41421'
  * @param {boolean}   radius    round the media's own corners (default true)
- * @param {ReactNode} children  the real media; rendered object-cover
+ * @param {string}    fit       cover | natural | compact — how the child sits in the box
+ * @param {boolean}   frame     tinted box + border UNDER the media
+ * @param {boolean}   border    border only, no tint
+ * @param {string}    bg        tint only, no border — a raw token value
+ * @param {string}    borderHover  border colour on hover (article's fg-16 step)
+ * @param {boolean}   ring      hairline border OVER the media, inset
+ * @param {ReactNode} children  the real media
  */
-export default function ContentMedia({ ratio = '1 / 1', radius = true, children, className = '' }) {
+const FIT = {
+  cover:   '[&>img]:h-full [&>img]:w-full [&>img]:object-cover [&>video]:h-full [&>video]:w-full [&>video]:object-cover',
+  natural: '[&>img]:h-full [&>img]:w-full [&>img]:object-contain [&>video]:h-full [&>video]:w-full [&>video]:object-contain',
+  compact: 'grid place-items-center [&>img]:max-h-[70%] [&>img]:max-w-[70%] [&>img]:object-contain',
+}
+
+export default function ContentMedia({
+  ratio = '1 / 1',
+  radius = true,
+  fit = 'cover',
+  frame = false,
+  border = false,
+  bg,
+  borderHover,
+  ring = false,
+  children,
+  className = '',
+}) {
   if (children == null) {
     return <AssetPlaceholder radius={radius} aspectRatio={ratio ?? undefined} className={ratio == null ? `h-full ${className}` : className} />
   }
+  const round = radius ? 'rounded-[var(--kol-radius-sm)]' : ''
   return (
     <div
-      className={`relative w-full overflow-hidden ${radius ? 'rounded-[var(--kol-radius-sm)]' : ''} [&>img]:h-full [&>img]:w-full [&>img]:object-cover [&>video]:h-full [&>video]:w-full [&>video]:object-cover ${ratio == null ? 'h-full' : ''} ${className}`.trim()}
-      style={ratio != null ? { aspectRatio: ratio } : undefined}
+      className={`relative w-full overflow-hidden ${round} ${FIT[fit] ?? FIT.cover} ${frame ? 'bg-fg-04 border border-fg-08' : ''} ${border ? 'border border-fg-08' : ''} ${borderHover ? 'transition-colors hover:border-fg-16' : ''} ${ratio == null ? 'h-full' : ''} ${className}`.trim()}
+      style={{ ...(ratio != null ? { aspectRatio: ratio } : null), background: bg }}
     >
       {children}
+      {/* OVER the artwork, and inert — a hairline that must not eat the click
+        * the card above it is listening for. */}
+      {ring && <div className={`pointer-events-none absolute inset-0 border border-fg-08 ${round}`} />}
     </div>
   )
 }

package/src/molecules/ContentRow.jsx

@@ -24,12 +24,22 @@ import ContentText from './ContentText.jsx'
  * --kol-spacing-* tokens (2=8 · 3=12 · 4=16 · 6=24), never a literal */
 const S2 = 'var(--kol-spacing-2)', S3 = 'var(--kol-spacing-3)', S4 = 'var(--kol-spacing-4)', S6 = 'var(--kol-spacing-6)'
 const BOX = {
-  default:  { thumb: 48,  ratio: '1 / 1',  pad: `${S2} 0`,     gap: S3, align: 'items-center', divider: true },
-  catalog:  { thumb: 0,   ratio: '1 / 1',  pad: `${S2} ${S3}`, gap: S3, frame: 'var(--kol-fg-04)', bg: 'var(--kol-surface-secondary)', minH: 36, align: 'items-center' },
-  print:    { thumb: 0,   ratio: '1 / 1',  pad: `${S2} ${S3}`, gap: S3, frame: 'var(--kol-fg-04)', bg: 'var(--kol-surface-secondary)', minH: 36, align: 'items-center' },
-  article:  { thumb: 120, ratio: '16 / 9', pad: '0',           gap: S6, align: 'items-start' },
-  work:     { thumb: 64,  ratio: '1 / 1',  pad: S4,            gap: S4, frame: 'var(--kol-fg-08)', bg: 'var(--kol-surface-secondary)', minH: 96, align: 'items-stretch' },
-  typeface: { thumb: 0,   ratio: '1 / 1',  pad: S6,            gap: S6, frame: 'var(--kol-fg-08)', bg: 'var(--kol-surface-primary)', align: 'items-start' },
+  default:  { thumb: 48,  ratio: '1 / 1',  pad: `${S2} 0`,     gap: S3, align: 'items-center', divider: true, hover: 'var(--kol-oq-04)' },
+  /* catalog/print rows render AT 36px — the shipped GridCard list row is a
+   * fixed 36 and the Y padding was what pushed it past that. X padding stays;
+   * `minH` is now the whole height budget and the row centres inside it. */
+  catalog:  { thumb: 0,   ratio: '1 / 1',  pad: `0 ${S3}`,     gap: S3, frame: 'var(--kol-fg-04)', bg: 'var(--kol-surface-tertiary)', minH: 36, align: 'items-center', hover: 'var(--kol-oq-04)' },
+  print:    { thumb: 0,   ratio: '1 / 1',  pad: `0 ${S3}`,     gap: S3, frame: 'var(--kol-fg-04)', bg: 'var(--kol-surface-tertiary)', minH: 36, align: 'items-center', hover: 'var(--kol-oq-04)' },
+  /* ListingCard's row thumb is `bg-fg-12` bare — a tint, no border. */
+  article:  { thumb: 120, ratio: '1 / 1',  pad: '0',           gap: S6, align: 'items-start', thumbBg: 'var(--kol-fg-12)' },
+  /* 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 },
+  /* 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
+   * thumb-beside-text shape is what turned its alphabet into a 160px thumb. */
+  typeface: { thumb: 0,   ratio: '1 / 1',  pad: S6,            gap: S6, column: true, frame: 'var(--kol-fg-08)', bg: 'transparent', minH: 160, align: 'items-start', hover: 'color-mix(in srgb, var(--kol-surface-on-primary) 1%, transparent)', frameHover: 'color-mix(in srgb, var(--kol-surface-on-primary) 24%, transparent)' },
 }
 
 export default function ContentRow({
@@ -39,33 +49,97 @@ export default function ContentRow({
   ratio,
   paddingY,
   actions,
+  footer,
   selected = false,
   onClick,
+  href,
+  onNavigate,
   className = '',
   ...text
 }) {
   const box = BOX[variant] ?? BOX.default
   const thumbPx = thumb ?? box.thumb
-  return (
-    <div
-      onClick={onClick}
-      className={`flex ${box.align} ${box.divider ? 'border-b border-fg-08' : ''} ${box.frame ? 'rounded-[var(--kol-radius-sm)] border' : ''} ${onClick ? 'cursor-pointer select-none' : ''} ${className}`.trim()}
-      style={{
-        gap: box.gap,
-        padding: paddingY != null ? `${paddingY}px 0` : box.pad,
-        minHeight: box.minH,
-        borderColor: box.frame || undefined,
-        background: selected ? 'var(--kol-fg-04)' : box.bg,
-      }}
-    >
+
+  /* The md: STEP is a custom property, not a Tailwind variant. Tailwind cannot
+   * generate `md:min-h-40` from package source (the SegmentedToggle rule), and
+   * these values are per-variant data rather than markup, so the row publishes
+   * `--kol-row-*` / `--kol-row-*-md` and one media query in kol-theme swaps
+   * them. A variant with no md value publishes nothing and never steps. */
+  const vars = {
+    '--kol-row-pad': paddingY != null ? `${paddingY}px 0` : box.pad,
+    '--kol-row-pad-md': box.padMd,
+    '--kol-row-gap': box.gap,
+    '--kol-row-gap-md': box.gapMd,
+    '--kol-row-min-h': box.minH != null ? `${box.minH}px` : undefined,
+    '--kol-row-min-h-md': box.minHMd != null ? `${box.minHMd}px` : undefined,
+    '--kol-row-thumb': `${thumbPx}px`,
+    '--kol-row-thumb-md': box.thumbMd != null ? `${box.thumbMd}px` : undefined,
+    '--kol-content-hover-bg': box.hover,
+    '--kol-content-hover-border': box.frameHover,
+    /* rest values are PROPERTIES, not inline declarations — an inline
+     * `background`/`borderColor` outranks every class, so the hover rules in
+     * kol-theme could never win and no row hover fired at all. */
+    '--kol-row-bg': selected ? 'var(--kol-fg-04)' : box.bg,
+    '--kol-row-border': box.frame || undefined,
+  }
+
+  const nav = (event) => {
+    if (onNavigate) onNavigate(event, href)
+    if (onClick) onClick(event)
+  }
+  const interactive = href || onClick
+
+  /* COLUMN rows stack their band under the text instead of laying a thumb
+   * beside it — `footer` is that band, and it is a node because what goes in it
+   * (a rendered alphabet, a waveform, a sparkline) is never the family's. */
+  const inner = box.column ? (
+    <>
+      <ContentText variant={variant} form="row" className="w-full" {...text} />
+      {footer}
+    </>
+  ) : (
+    <>
       {thumbPx > 0 && (
-        <div className="shrink-0" style={{ width: thumbPx }}>
-          <ContentMedia ratio={ratio ?? box.ratio}>{media}</ContentMedia>
+        <div className="kol-row-thumb shrink-0">
+          <ContentMedia
+            ratio={ratio ?? box.ratio}
+            border={box.thumbBorder ?? false}
+            bg={box.thumbBg}
+            className={box.thumbRadius ? 'rounded-[var(--kol-radius-xs)]' : ''}
+          >
+            {media}
+          </ContentMedia>
         </div>
       )}
       <ContentText variant={variant} form="row" className="flex-1" {...text} />
       {/* trailing edge, never in the text flow — MediaRow's placement */}
       {actions && <div className="shrink-0">{actions}</div>}
-    </div>
+    </>
   )
+
+  const common = {
+    className: `kol-row flex ${box.column ? 'flex-col' : ''} ${box.align} ${box.divider ? 'border-b border-fg-08' : ''} ${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,
+  }
+
+  /* same root-follows-the-affordance rule as ContentCard */
+  if (href) return <a href={href} onClick={nav} {...common}>{inner}</a>
+  if (onClick) {
+    return (
+      <div
+        onClick={onClick}
+        role="button"
+        tabIndex={0}
+        onKeyDown={(e) => {
+          if (e.key !== 'Enter' && e.key !== ' ') return
+          e.preventDefault()
+          onClick(e)
+        }}
+        {...common}
+      >
+        {inner}
+      </div>
+    )
+  }
+  return <div {...common}>{inner}</div>
 }

package/src/molecules/ContentText.jsx

@@ -4,8 +4,10 @@
  * Renders the per-variant / per-form type ramp ruled 2026-08-15
  * (docs/documentation/03-components/06-content-card-system.md §3). The laws:
  * title is the ONLY slot that steps between card and row (size only, one
- * family); body and meta are identical in both forms; helper-* only where a
- * single line is guaranteed; ink is three roles (emphasis · body · meta).
+ * family); body and meta are identical in both forms; ink is three roles
+ * (emphasis · body · meta). `kol-helper-*` is out of this family — it is not
+ * mono with line-height 1, it also carries weight 500 and 0.06em tracking, so
+ * a helper field beside a mono one reads as a different voice.
  *
  * Every type class is a SEAM: pass `<slot>Class` to replace the ruled
  * class+ink string whole (consumers on their own faces swap here). Passing
@@ -28,8 +30,8 @@
 /* [variant][form][slot] → 'type-class ink-role', verbatim from the ruled table */
 const RAMP = {
   default: {
-    card: { title: 'kol-helper-12 text-emphasis truncate', date: 'kol-helper-12 text-meta', size: 'kol-helper-12 text-body' },
-    row:  { title: 'kol-helper-12 text-emphasis truncate', date: 'kol-helper-12 text-meta', size: 'kol-helper-12 text-body' },
+    card: { title: 'kol-sans-heading-04 text-emphasis truncate', date: 'kol-mono-12 text-meta', size: 'kol-mono-12 text-meta' },
+    row:  { title: 'kol-sans-heading-05 text-emphasis truncate', date: 'kol-mono-12 text-meta', size: 'kol-mono-12 text-meta' },
   },
   catalog: {
     card: { title: 'kol-mono-14 text-emphasis', detail: 'kol-mono-10 text-meta' },
@@ -40,96 +42,179 @@ const RAMP = {
     row:  { title: 'kol-mono-10 text-body', detail: 'kol-mono-10 text-meta' },
   },
   article: {
-    card: { kicker: 'kol-helper-12 text-body', title: 'kol-sans-heading-03 text-emphasis', body: 'kol-mono-14 text-body', date: 'kol-helper-12 text-meta', size: 'kol-helper-12 text-body' },
-    row:  { kicker: 'kol-helper-12 text-body', title: 'kol-sans-heading-05 text-emphasis', body: 'kol-mono-14 text-body', date: 'kol-helper-12 text-meta', size: 'kol-helper-12 text-body' },
+    card: { kicker: 'kol-mono-12 text-body', title: 'kol-sans-heading-03 text-emphasis', body: 'kol-mono-14 text-body', date: 'kol-mono-12 text-meta', size: 'kol-mono-12 text-body', tags: 'flex flex-wrap gap-2' },
+    row:  { kicker: 'kol-mono-12 text-body', title: 'kol-sans-heading-04 text-emphasis', body: 'kol-mono-12 text-body', date: 'kol-mono-12 text-meta', size: 'kol-mono-12 text-body', tags: 'flex flex-wrap gap-2' },
   },
   work: {
-    card: { title: 'kol-sans-display-02 text-emphasis', body: 'kol-mono-14 text-body', meta: 'kol-mono-12 text-body' },
-    row:  { title: 'kol-sans-display-03 text-emphasis', body: 'kol-mono-14 text-body', meta: 'kol-mono-12 text-body' },
+    /* INVERSE ink — the card's plate is the drawer, `surface-inverse`. Leaving
+     * these on `text-emphasis` painted light type on a light plate and the
+     * caption disappeared. */
+    card: { title: 'kol-sans-display-03 text-fg-inverse', meta: 'kol-mono-12 text-fg-inverse-48', body: 'kol-mono-14 text-fg-inverse', date: 'kol-mono-12 text-fg-inverse-48', tags: 'flex flex-wrap gap-2' },
+    /* verbatim from WorkListItem: title `kol-mono-14` truncated · type
+     * `kol-mono-12 md:kol-mono-14` at FULL ink, no opacity step · year
+     * `kol-mono-12 text-fg-64` · description `kol-sans-heading-03 text-auto`.
+     * Title and type are the pair — same rung, same full ink; only the year
+     * steps down. */
+    row:  { title: 'kol-mono-12 text-emphasis uppercase truncate', body: 'kol-sans-heading-03 leading-tight text-emphasis truncate', meta: 'kol-mono-12 text-emphasis', date: 'kol-mono-12 text-fg-64', tags: 'flex flex-wrap items-center gap-1.5' },
   },
   typeface: {
-    card: { title: 'kol-mono-20 text-emphasis', body: 'kol-mono-14 text-body', date: 'kol-mono-12 text-body' },
-    row:  { title: 'kol-mono-14 text-emphasis', body: 'kol-mono-14 text-body', date: 'kol-mono-12 text-body' },
+    card: { title: 'kol-mono-16 text-emphasis', body: 'kol-mono-14 text-fg-64', date: 'kol-mono-12 text-fg-64' },
+    row:  { title: 'kol-mono-14 uppercase text-emphasis', body: 'kol-mono-12 text-fg-64', detail: 'kol-mono-14 text-emphasis', date: 'kol-mono-12 text-fg-64' },
   },
 }
 
 /* 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.
- * Directions are the RULED structures (06-content-card-system.md §2 boxes):
- * default row is a single table-like line, catalog/print rows are between-
- * headers. work row: line 2 stays the big line and carries the TITLE (fields
- * were crossed in the shipped WorkListItem — ruled, do not re-derive). */
+ * ['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.
+ * 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 = {
-  default:  { card: ['title', ['group', 'date', 'size']], row: [['line', 'title', 'date', 'size']] },
+  default:  { card: ['title', ['group', 'date', 'size']], row: ['title', ['group', 'date', 'size']] },
   catalog:  { card: ['title', 'detail'], row: [['between', 'title', 'detail']] },
   print:    { card: ['title', 'detail'], row: [['between', 'title', 'detail']] },
-  article:  { card: ['kicker', 'title', 'body', ['group', 'date', 'size']], row: ['kicker', 'title', 'body', ['group', 'date', 'size']] },
-  work:     { card: ['title', 'body', 'meta'], row: ['body', 'title', 'meta'] },
-  typeface: { card: ['title', 'body', 'date'], row: [['between', 'title', 'date'], 'body'] },
+  /* title + body are ONE block in BOTH forms — a `stack`, so they sit on the
+   * tight 4px internal gap while tags, kicker and the meta group keep the
+   * form's own outer gap. A flat column gave every line the same gap, which
+   * read as unrelated lines rather than a heading with its standfirst. */
+  article:  { card: ['tags', 'kicker', ['stack', 'title', 'body'], ['group', 'date', 'size']], row: ['kicker', ['stack', 'title', 'body'], ['group', 'date', 'size']] },
+  /* work CARD = the drawer's two lines: title, then one meta line.
+   *
+   * work ROW = WorkListItem, read off the live /work listing: a LEFT column of
+   * title (small) → tags → description (the big line), and a RIGHT column of
+   * type over year. The big line is the DESCRIPTION, not the title — the
+   * earlier "the fields are crossed, uncross them" reading was wrong, and the
+   * shipped page shows the small-title / big-description order is the design. */
+  /* WorkListItem's inner column is `justify-between` with the header row on
+   * top and the description BELOW IT, spanning the full width — not tucked
+   * inside the left column, which is what squeezed the big line. */
+  work:     { card: ['title', 'meta'], row: [['between', ['stack', 'title', 'tags'], ['stack', 'meta', 'date']], 'body'] },
+  /* typeface row = ONE header line, both sides stacked: name over styles on the
+   * left, classification over year on the right. Verbatim from the shipped
+   * item, which had been flattened into title-left / date-right and lost the
+   * styles line into a body slot below. */
+  typeface: { card: ['title', 'body'], row: [['between', ['stack', 'title', 'body'], ['stack', 'detail', 'date']]] },
+}
+
+/* inner line gap per variant/form, read from the shipped boxes and spelled in
+ * --kol-spacing-* tokens — ALL of them. article's row carried a raw `10px` off
+ * the scale, inherited from the shipped card; once its title and body became a
+ * `stack` this gap stopped separating lines and started separating blocks, so
+ * it sits on the 12px rung the rest of the family uses for that. */
+/* Variants whose ROW text column STRETCHES: the block fills the row's height
+ * and pushes its last child to the floor, so the big line bottom-aligns with
+ * the thumb beside it instead of floating under the header. WorkListItem's
+ * inner column is `flex flex-col justify-between … flex-1`.
+ *
+ * `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 = { work: 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. */
+const STACK = {
+  work: 'var(--kol-spacing-2)',
+  typeface: 'var(--kol-spacing-2)',
 }
 
-/* inner line gap per variant/form, read from the shipped boxes — spelled in
- * --kol-spacing-* tokens where the value sits on the scale (10px is the
- * shipped article-row literal; the scale has no rung there) */
 const GAPS = {
-  default: { card: 'var(--kol-spacing-3)', row: 'var(--kol-spacing-3)' },
-  catalog: { card: 'var(--kol-spacing-2)', row: 'var(--kol-spacing-2)' },
+  default: { card: 'var(--kol-spacing-3)', row: 'var(--kol-spacing-2)' },
+  catalog: { card: 'var(--kol-spacing-1)', row: 'var(--kol-spacing-2)' },
   print: { card: 'var(--kol-spacing-2)', row: 'var(--kol-spacing-2)' },
-  article: { card: 'var(--kol-spacing-3)', row: '10px' },
-  work: { card: 'var(--kol-spacing-2)', row: 'var(--kol-spacing-3)' },
+  article: { card: 'var(--kol-spacing-3)', row: 'var(--kol-spacing-3)' },
+  work: { card: 'var(--kol-spacing-2)', row: 'var(--kol-spacing-4)' },
   typeface: { card: 'var(--kol-spacing-2)', row: 'var(--kol-spacing-6)' },
 }
 
 export default function ContentText({
   variant = 'default',
   form = 'card',
-  title, body, kicker, detail, date, size, meta,
-  gap,
-  titleClass, bodyClass, kickerClass, detailClass, dateClass, sizeClass, metaClass,
+  title, body, kicker, detail, date, size, meta, tags,
+  gap, clamp,
+  titleClass, bodyClass, kickerClass, detailClass, dateClass, sizeClass, metaClass, tagsClass,
   className = '',
 }) {
   const ramp = RAMP[variant]?.[form] ?? RAMP.default[form] ?? RAMP.default.card
   const order = ORDER[variant]?.[form] ?? ORDER.default.card
-  const values = { title, body, kicker, detail, date, size, meta }
-  const overrides = { title: titleClass, body: bodyClass, kicker: kickerClass, detail: detailClass, date: dateClass, size: sizeClass, meta: metaClass }
+  const values = { title, body, kicker, detail, date, size, meta, tags }
+  const overrides = { title: titleClass, body: bodyClass, kicker: kickerClass, detail: detailClass, date: dateClass, size: sizeClass, meta: metaClass, tags: tagsClass }
+
+  /* the clamp rides the BODY only — it is the one slot that carries prose long
+   * enough to need cutting, and clamping a title is what `truncate` in the ramp
+   * already does on one line. Number in, `line-clamp-N` out; unset = no clamp,
+   * so a card that wants the whole excerpt simply does not pass it. */
+  const extra = (slot) => (slot === 'body' && clamp ? ` line-clamp-${clamp}` : '')
 
   const line = (slot) =>
     values[slot] == null ? null : (
-      <div key={slot} className={overrides[slot] ?? ramp[slot] ?? ''}>{values[slot]}</div>
+      <div key={slot} className={`${overrides[slot] ?? ramp[slot] ?? ''}${extra(slot)}`.trim()}>{values[slot]}</div>
     )
 
-  const nodes = order.map((entry, i) => {
+  /* RECURSIVE (2026-08-15) — an entry inside a line/between/group may itself be
+   * an entry, so a trailing COLUMN can hold two stacked fields. typeface's row
+   * needs exactly that: classification over year at the right edge, which a
+   * flat slot list cannot express and which was previously collapsed into one
+   * `date` slot that lost a value. */
+  const render = (entry, i) => {
     if (typeof entry === 'string') return line(entry)
     const [kind, ...slots] = entry
-    const parts = slots.map(line).filter(Boolean)
+    const parts = slots.map((s, j) => render(s, j)).filter(Boolean)
     if (!parts.length) return null
+    if (kind === 'stack') {
+      return (
+        <div key={`stack-${i}`} className="flex w-full min-w-0 flex-col" style={{ gap: STACK[variant] ?? 'var(--kol-spacing-1)' }}>
+          {parts}
+        </div>
+      )
+    }
     if (kind === 'line') {
       /* ruled (default row): title flex-1 truncate · date w-24 · size w-20,
-       * trailing fields right-aligned fixed columns so rows align in a list */
-      const W = [null, 96, 80]
+       * 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: '12px' }}>
+        <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 text-right" style={{ width: W[j] ?? undefined }}>{p}</div>))}
+            : <div key={j} className="shrink-0">{p}</div>))}
         </div>
       )
     }
     return (
       <div
         key={`${kind}-${i}`}
-        className={`flex items-baseline ${kind === 'between' ? 'justify-between' : ''}`}
-        style={{ gap: 'var(--kol-spacing-4)' }}
+        /* a `between` whose trailing part is a STACK aligns on the top, not the
+         * baseline — a two-line column has no single baseline to share with the
+         * title beside it, and baseline-aligning it hangs the second line below
+         * the row's floor. */
+        className={`flex min-w-0 ${parts.length > 1 && Array.isArray(slots[slots.length - 1]) ? 'items-center' : 'items-baseline'} ${kind === 'between' ? 'justify-between' : ''}`}
+        style={{ gap: 'var(--kol-spacing-6)' }}
       >
-        {parts}
+        {/* the LEADING part of a `between` takes the room; the trailing column
+          * hugs its content. Without this the left stack sized to its content
+          * and the big line truncated at a quarter of the row's width while
+          * empty space sat between the two columns. */}
+        {kind === 'between' && parts.length > 1
+          ? parts.map((p, j) => (
+              <div key={j} className={j === 0 ? 'min-w-0 flex-1' : 'shrink-0'}>{p}</div>
+            ))
+          : parts}
       </div>
     )
-  })
+  }
+
+  const nodes = order.map(render)
 
   return (
     <div
-      className={`flex min-w-0 flex-col ${className}`.trim()}
+      className={`flex min-w-0 flex-col ${FILL[variant] && form === 'row' ? 'self-stretch justify-between' : ''} ${className}`.trim()}
       style={{ gap: typeof gap === 'number' ? `${gap}px` : gap ?? GAPS[variant]?.[form] ?? 'var(--kol-spacing-2)' }}
     >
       {nodes}

package/src/molecules/CopyButton.jsx

@@ -26,6 +26,7 @@ export default function CopyButton({ text, className = '', ...props }) {
       confirmIcon="check"
       label="Copy to clipboard"
       confirmLabel="Copied"
+      size="sm"
       className={className}
       onAction={async () => {
         try {

package/src/molecules/SearchInput.jsx

@@ -44,7 +44,7 @@ import { Icon } from '@kolkrabbi/kol-icons'
 
 const SIZE_TYPE = { sm: 'kol-mono-12', md: 'kol-mono-14' }
 const ICON_SIZE = { sm: 14, md: 14 }
-const CUBIC_EASE = 'cubic-bezier(0.16, 1, 0.3, 1)'
+const CUBIC_EASE = 'var(--kol-ease-house)'
 
 export default function SearchInput({
   value = '',

package/src/organisms/ContentFilters.jsx

@@ -237,7 +237,7 @@ const ContentFilters = ({
                 width: searchOpen ? 200 : 32,
                 background: searchOpen ? 'var(--kol-surface-secondary)' : 'transparent',
                 border: 'none',
-                transition: 'width 600ms cubic-bezier(0.16, 1, 0.3, 1), background 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+                transition: 'width 600ms var(--kol-ease-house), background 400ms var(--kol-ease-house)',
                 overflow: 'hidden',
               }}
               onClick={() => {
@@ -252,7 +252,7 @@ const ContentFilters = ({
                 className="flex items-center justify-center flex-shrink-0"
                 style={{
                   opacity: searchOpen ? 0 : 1,
-                  transition: 'opacity 300ms cubic-bezier(0.16, 1, 0.3, 1)',
+                  transition: 'opacity 300ms var(--kol-ease-house)',
                   position: searchOpen ? 'absolute' : 'relative',
                 }}
               >