@kolkrabbi/kol-component 0.6.0 → 0.8.0

package/src/atoms/TextPressure.jsx

@@ -1,331 +0,0 @@
-import { useEffect, useRef, useState } from 'react'
-import usePrefersReducedMotion from '../hooks/usePrefersReducedMotion.js'
-
-// Variable-font axis rest values — where every glyph sits with no pointer near.
-const DEFAULTS = { wdth: 100, wght: 400, ital: 0, alpha: 1 }
-const STATIC_VARIATION = "'wght' 400, 'wdth' 100, 'ital' 0.00"
-
-/**
- * TextPressure — a single line of variable-font text whose glyphs deform
- * toward the pointer: characters nearest the cursor grow widest / heaviest /
- * most italic, and the effect falls off linearly with distance. A
- * requestAnimationFrame loop lerps a smoothed follower toward the raw cursor
- * (container-scoped listeners) and writes per-glyph `font-variation-settings`
- * each frame. On mouse-leave the glyphs coast back to their rest axis values
- * (`returnToDefault`) or freeze in place, then the loop auto-stops until the
- * pointer returns. Ported from the react-bits / JuanFuentes effect, collapsed
- * from three source variants into one.
- *
- * ── Font contract ──────────────────────────────────────────────────────────
- * The effect only *moves* if the resolved font is a VARIABLE font exposing the
- * `wght` / `wdth` / `ital` axes. The KOL variable font is a CONSUMER asset —
- * the design system does not ship one. Two ways to supply it:
- *   • `fontUrl` given → an `@font-face` is injected at runtime for `fontFamily`
- *     (e.g. fontFamily="TG Root-Tune" fontUrl="/fonts/TGRoot-TuneVF.ttf").
- *   • `fontUrl` omitted → the already-loaded `fontFamily` is used as-is; the
- *     default `var(--kol-font-family-sans)` animates only if that theme font is
- *     itself variable — otherwise the text renders correctly but static.
- *
- * Reduced motion → no listeners, no rAF; glyphs render static at the rest axis
- * values (wght 400 / wdth 100 / ital 0). Casing is authored by the caller —
- * this component never text-transforms.
- *
- * @param {string}  text          the line; split into one <span> per character
- * @param {string}  fontFamily    applied family + injected @font-face family
- * @param {string}  [fontUrl]     variable-font URL → injects @font-face when set
- * @param {boolean} width         animate the `wdth` axis (5–150)
- * @param {boolean} weight        animate the `wght` axis (100–900)
- * @param {boolean} italic        animate the `ital` axis (0–1)
- * @param {boolean} alpha         animate per-glyph opacity (0–1)
- * @param {boolean} flex          distribute glyphs with justify-between
- * @param {boolean} stroke        add an outlined ghost layer behind each glyph
- * @param {boolean} scale         vertically scale the line to fill the container
- * @param {string}  textColor     glyph color (KOL token / CSS color)
- * @param {string}  strokeColor   stroke color when `stroke` is on
- * @param {string}  className     extra classes on the <h1>
- * @param {number}  minFontSize   floor for the responsive font size
- * @param {number}  [maxFontSize] cap for the responsive font size
- * @param {boolean} returnToDefault true: coast back to rest on leave; false: freeze
- */
-export default function TextPressure({
-  text = 'Compressa',
-  fontFamily = 'var(--kol-font-family-sans)',
-  fontUrl,
-
-  width = true,
-  weight = true,
-  italic = true,
-  alpha = false,
-
-  flex = true,
-  stroke = false,
-  scale = false,
-
-  textColor = 'var(--kol-fg-emphasis)',
-  strokeColor = 'var(--kol-accent-primary)',
-  className = '',
-
-  minFontSize = 24,
-  maxFontSize = null,
-  returnToDefault = true,
-}) {
-  const containerRef = useRef(null)
-  const titleRef = useRef(null)
-  const spansRef = useRef([])
-
-  const mouseRef = useRef({ x: 0, y: 0 })
-  const cursorRef = useRef({ x: 0, y: 0 })
-  const currentValuesRef = useRef([])
-  const velocityRef = useRef([])
-
-  const [fontSize, setFontSize] = useState(minFontSize)
-  const [scaleY, setScaleY] = useState(1)
-  const [lineHeight, setLineHeight] = useState(1)
-  const [isHovering, setIsHovering] = useState(false)
-
-  const reducedMotion = usePrefersReducedMotion()
-  const chars = text.split('')
-
-  const dist = (a, b) => {
-    const dx = b.x - a.x
-    const dy = b.y - a.y
-    return Math.sqrt(dx * dx + dy * dy)
-  }
-
-  // Container-scoped pointer tracking (never window). Skipped for reduced motion.
-  useEffect(() => {
-    if (reducedMotion) return undefined
-    const container = containerRef.current
-    if (!container) return undefined
-
-    const handleMouseMove = (e) => {
-      cursorRef.current.x = e.clientX
-      cursorRef.current.y = e.clientY
-    }
-    const handleTouchMove = (e) => {
-      const t = e.touches[0]
-      cursorRef.current.x = t.clientX
-      cursorRef.current.y = t.clientY
-    }
-    const handleMouseEnter = () => setIsHovering(true)
-    const handleMouseLeave = () => setIsHovering(false)
-
-    container.addEventListener('mousemove', handleMouseMove)
-    container.addEventListener('touchmove', handleTouchMove, { passive: false })
-    container.addEventListener('mouseenter', handleMouseEnter)
-    container.addEventListener('mouseleave', handleMouseLeave)
-
-    const { left, top, width: w, height: h } = container.getBoundingClientRect()
-    mouseRef.current.x = left + w / 2
-    mouseRef.current.y = top + h / 2
-    cursorRef.current.x = mouseRef.current.x
-    cursorRef.current.y = mouseRef.current.y
-
-    return () => {
-      container.removeEventListener('mousemove', handleMouseMove)
-      container.removeEventListener('touchmove', handleTouchMove)
-      container.removeEventListener('mouseenter', handleMouseEnter)
-      container.removeEventListener('mouseleave', handleMouseLeave)
-    }
-  }, [reducedMotion])
-
-  // Responsive sizing (layout, not motion — runs regardless of reduced motion).
-  useEffect(() => {
-    const setSize = () => {
-      if (!containerRef.current || !titleRef.current) return
-      const { width: containerW, height: containerH } = containerRef.current.getBoundingClientRect()
-
-      let newFontSize = containerW / (chars.length / 2)
-      newFontSize = Math.max(newFontSize, minFontSize)
-      if (maxFontSize) newFontSize = Math.min(newFontSize, maxFontSize)
-
-      setFontSize(newFontSize)
-      setScaleY(1)
-      setLineHeight(1)
-
-      requestAnimationFrame(() => {
-        if (!titleRef.current) return
-        const textRect = titleRef.current.getBoundingClientRect()
-        if (scale && textRect.height > 0) {
-          const yRatio = containerH / textRect.height
-          setScaleY(yRatio)
-          setLineHeight(yRatio)
-        }
-      })
-    }
-
-    setSize()
-    window.addEventListener('resize', setSize)
-    return () => window.removeEventListener('resize', setSize)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [scale, text, minFontSize, maxFontSize])
-
-  // The pressure loop. Skipped entirely for reduced motion (glyphs stay static).
-  useEffect(() => {
-    if (reducedMotion) return undefined
-    let rafId
-
-    const animate = () => {
-      if (isHovering) {
-        mouseRef.current.x += (cursorRef.current.x - mouseRef.current.x) / 15
-        mouseRef.current.y += (cursorRef.current.y - mouseRef.current.y) / 15
-
-        if (titleRef.current && containerRef.current) {
-          const containerRect = containerRef.current.getBoundingClientRect()
-          const maxDist = containerRect.width / 2
-
-          spansRef.current.forEach((span, i) => {
-            if (!span) return
-            const rect = span.getBoundingClientRect()
-            const charCenter = { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 }
-            const d = dist(mouseRef.current, charCenter)
-
-            const getAttr = (distance, minVal, maxVal) => {
-              const val = maxVal - Math.abs((maxVal * distance) / maxDist)
-              return Math.max(minVal, val + minVal)
-            }
-
-            const wdth = width ? Math.floor(getAttr(d, 5, 150)) : 100
-            const wght = weight ? Math.floor(getAttr(d, 100, 900)) : 400
-            const italVal = italic ? getAttr(d, 0, 1) : 0
-            const alphaVal = alpha ? getAttr(d, 0, 1) : 1
-
-            const prev = currentValuesRef.current[i]
-            if (prev && !returnToDefault) {
-              velocityRef.current[i] = {
-                wdth: wdth - prev.wdth,
-                wght: wght - prev.wght,
-                ital: italVal - prev.ital,
-                alpha: alphaVal - prev.alpha,
-              }
-            }
-            currentValuesRef.current[i] = { wdth, wght, ital: italVal, alpha: alphaVal }
-
-            span.style.opacity = alphaVal
-            span.style.fontVariationSettings = `'wght' ${wght}, 'wdth' ${wdth}, 'ital' ${italVal.toFixed(2)}`
-          })
-        }
-      } else {
-        // Coast back to rest (returnToDefault) or settle into a frozen pose.
-        let allSettled = true
-
-        spansRef.current.forEach((span, i) => {
-          if (!span) return
-          const current = currentValuesRef.current[i] || { ...DEFAULTS }
-          if (!velocityRef.current[i]) velocityRef.current[i] = { wdth: 0, wght: 0, ital: 0, alpha: 0 }
-          const velocity = velocityRef.current[i]
-
-          if (returnToDefault) {
-            const springStrength = 0.05
-            const damping = 0.88
-            velocity.wdth += (DEFAULTS.wdth - current.wdth) * springStrength
-            velocity.wght += (DEFAULTS.wght - current.wght) * springStrength
-            velocity.ital += (DEFAULTS.ital - current.ital) * springStrength
-            velocity.alpha += (DEFAULTS.alpha - current.alpha) * springStrength
-            velocity.wdth *= damping
-            velocity.wght *= damping
-            velocity.ital *= damping
-            velocity.alpha *= damping
-
-            const newWdth = current.wdth + velocity.wdth
-            const newWght = current.wght + velocity.wght
-            const newItal = current.ital + velocity.ital
-            const newAlpha = current.alpha + velocity.alpha
-
-            if (
-              Math.abs(newWdth - DEFAULTS.wdth) > 0.5 ||
-              Math.abs(newWght - DEFAULTS.wght) > 0.5 ||
-              Math.abs(velocity.wdth) > 0.1 ||
-              Math.abs(velocity.wght) > 0.1
-            ) {
-              allSettled = false
-            }
-
-            currentValuesRef.current[i] = { wdth: newWdth, wght: newWght, ital: newItal, alpha: newAlpha }
-            span.style.opacity = newAlpha
-            span.style.fontVariationSettings = `'wght' ${Math.round(newWght)}, 'wdth' ${Math.round(newWdth)}, 'ital' ${newItal.toFixed(2)}`
-          } else {
-            const damping = 0.75
-            velocity.wdth *= damping
-            velocity.wght *= damping
-            velocity.ital *= damping
-            velocity.alpha *= damping
-
-            const newWdth = current.wdth + velocity.wdth
-            const newWght = current.wght + velocity.wght
-            const newItal = current.ital + velocity.ital
-            const newAlpha = current.alpha + velocity.alpha
-
-            if (
-              Math.abs(velocity.wdth) > 0.01 ||
-              Math.abs(velocity.wght) > 0.01 ||
-              Math.abs(velocity.ital) > 0.0001 ||
-              Math.abs(velocity.alpha) > 0.0001
-            ) {
-              allSettled = false
-            }
-
-            currentValuesRef.current[i] = { wdth: newWdth, wght: newWght, ital: newItal, alpha: newAlpha }
-            span.style.opacity = newAlpha
-            span.style.fontVariationSettings = `'wght' ${Math.round(newWght)}, 'wdth' ${Math.round(newWdth)}, 'ital' ${newItal.toFixed(2)}`
-          }
-        })
-
-        if (allSettled) {
-          cancelAnimationFrame(rafId)
-          return
-        }
-      }
-
-      rafId = requestAnimationFrame(animate)
-    }
-
-    animate()
-    return () => cancelAnimationFrame(rafId)
-  }, [width, weight, italic, alpha, chars.length, isHovering, returnToDefault, reducedMotion])
-
-  const titleClass = [
-    'kol-text-pressure-title m-0 w-full max-w-full overflow-hidden box-border text-center whitespace-nowrap select-none origin-top font-thin',
-    flex ? 'flex justify-between' : '',
-    stroke ? 'kol-text-pressure--stroke' : '',
-    className,
-  ]
-    .filter(Boolean)
-    .join(' ')
-
-  return (
-    <div
-      ref={containerRef}
-      className="kol-text-pressure relative flex h-full w-full max-w-full items-center justify-center overflow-hidden"
-    >
-      {fontUrl && (
-        <style>{`@font-face { font-family: '${fontFamily}'; src: url('${fontUrl}'); font-style: normal; }`}</style>
-      )}
-
-      <h1
-        ref={titleRef}
-        className={titleClass}
-        style={{
-          fontFamily,
-          fontSize,
-          lineHeight,
-          transform: `scale(1, ${scaleY})`,
-          color: textColor,
-          '--kol-text-pressure-stroke': strokeColor,
-        }}
-      >
-        {chars.map((char, i) => (
-          <span
-            key={i}
-            ref={(el) => (spansRef.current[i] = el)}
-            data-char={char}
-            className="kol-text-pressure-char inline-block"
-            style={{ fontVariationSettings: STATIC_VARIATION }}
-          >
-            {char}
-          </span>
-        ))}
-      </h1>
-    </div>
-  )
-}

package/src/atoms/TypeSample.jsx

@@ -1,50 +0,0 @@
-/**
- * TypeSample — a single labeled type-specimen block: an optional mono caption
- * over one paragraph whose typography is driven entirely by props via inline
- * style. The atomic unit of the type-specimen kit — stack several to show a
- * scale, a weight range, or a family; adjacent samples get a hairline
- * separator (`.kol-type-sample + .kol-type-sample`).
- *
- * Presentational — arbitrary px values are the point, so props map to inline
- * style rather than fixed kol-* size stops. Label and children render
- * verbatim as authored.
- *
- * @param {string}    family     font family name (wrapped as `"family", sans-serif`); defaults to the KOL sans token
- * @param {number}    weight     font-weight
- * @param {boolean}   italic     italic sample
- * @param {number}    size       font-size in px
- * @param {number}    lineHeight line-height in px; unitless 1.2 when unset
- * @param {string}    label      mono caption above the sample (omit to hide)
- * @param {ReactNode} children   the specimen text itself
- */
-export default function TypeSample({
-  family,
-  weight = 400,
-  italic = false,
-  size = 32,
-  lineHeight,
-  label,
-  children,
-}) {
-  return (
-    <div className="kol-type-sample py-6">
-      {label && (
-        <p className="kol-helper-12 tracking-wider text-meta m-0 mb-3">
-          {label}
-        </p>
-      )}
-      <p
-        className="kol-type-sample-body m-0 text-auto"
-        style={{
-          fontFamily: family ? `"${family}", sans-serif` : 'var(--kol-font-family-sans)',
-          fontWeight: weight,
-          fontStyle: italic ? 'italic' : 'normal',
-          fontSize: `${size}px`,
-          lineHeight: lineHeight ? `${lineHeight}px` : '1.2',
-        }}
-      >
-        {children}
-      </p>
-    </div>
-  )
-}

package/src/atoms/TypeSpecCard.jsx

@@ -1,42 +0,0 @@
-/**
- * TypeSpecCard — a two-column type-spec row: a left meta panel of key/value
- * pairs (font metrics) beside a live sample slot on the right, with an
- * optional corner label. The "data-sheet" member of the type-specimen kit —
- * pairs the numeric spec of a type style with a rendered example of it
- * (often a TypeSample passed as children, composed at the call site).
- *
- * Single column on mobile; `240px + fluid` two-column at lg. `meta` is
- * arbitrary tuples — no fixed metric schema. Sample paragraphs get 16px
- * rhythm via `.kol-type-spec-sample p` (Preflight zeroes <p> margins).
- *
- * @param {string}                label    corner caption, absolute top-left (omit to hide)
- * @param {Array<[string, ReactNode]>} meta key/value rows in the left panel
- * @param {ReactNode}             children the live type sample on the right
- */
-export default function TypeSpecCard({ label, meta = [], children }) {
-  return (
-    <div className="kol-type-spec relative py-12 border-t border-fg-08">
-      {label && (
-        <span className="kol-type-spec-label kol-helper-12 tracking-widest text-meta absolute top-4 left-0">
-          {label}
-        </span>
-      )}
-      <div className="kol-type-spec-row grid grid-cols-1 gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-12 items-start pt-6">
-        <div className="kol-type-spec-meta flex flex-col">
-          {meta.map(([key, value]) => (
-            <div
-              key={key}
-              className="kol-type-spec-meta-row grid grid-cols-[auto_minmax(0,1fr)] gap-4 items-baseline py-2 border-b border-[var(--kol-fg-04)] last:border-b-0"
-            >
-              <span className="kol-helper-10 text-meta">{key}</span>
-              <span className="kol-helper-10 text-strong text-right [overflow-wrap:anywhere]">{value}</span>
-            </div>
-          ))}
-        </div>
-        <div className="kol-type-spec-sample min-w-0">
-          {children}
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/molecules/ArticleCard.jsx

@@ -1,178 +0,0 @@
-import Pill from '../atoms/Pill.jsx'
-import Image from './Image.jsx'
-
-/**
- * Optional link wrapper — the one place routing lives. `http*`/`mailto` hrefs
- * open in a new tab; any other href renders a plain same-tab anchor with an
- * `onNavigate(event)` seam an SPA consumer intercepts (preventDefault + its
- * router). No `href` → the bare content, no anchor.
- */
-function CardLink({ href, onNavigate, className, children }) {
-  if (!href) return <div className={className}>{children}</div>
-  const isExternal = href.startsWith('http') || href.startsWith('mailto')
-  return (
-    <a
-      href={href}
-      onClick={isExternal ? undefined : onNavigate}
-      target={isExternal ? '_blank' : undefined}
-      rel={isExternal ? 'noreferrer noopener' : undefined}
-      className={className}
-    >
-      {children}
-    </a>
-  )
-}
-
-/** Cover-fit thumbnail (or fg-token placeholder box when no src). */
-function Thumb({ src, alt }) {
-  if (!src) return null
-  return (
-    <Image
-      src={src}
-      alt={alt}
-      className="object-cover"
-      style={{ width: '100%', height: '100%', objectFit: 'cover' }}
-    />
-  )
-}
-
-/**
- * ArticleCard — one blog-card family with three sizes (`default` / `hero` /
- * `mini`), collapsing what were three byte-identical duplicate components. All
- * three share the flat view-model (title, excerpt, thumbnail, tags, meta) and
- * the link seam; `size` picks the layout.
- *
- * - **default** — grid tile: thumbnail (landscape/portrait) over tag Pills, a
- *   mono title, an excerpt, and a `date • readingTime` meta Pill.
- * - **hero** — index masthead: an optional header row (`label` + `meta`),
- *   a big 16/9 image that zooms on hover, then kicker → title → summary.
- * - **mini** — sidebar row: a fixed 120×120 thumbnail beside title → summary →
- *   meta.
- *
- * De-Sanitized flat props, no router import. Placeholder thumbnails use
- * fg-opacity tokens (theme-aware — no `.dark` style injection). Every string
- * is authored at the call site in its final case — no `text-transform`, no JS
- * casing (the kicker/meta `uppercase` are presentational classes only).
- *
- * @param {'default'|'hero'|'mini'} size  layout preset (default 'default')
- * @param {string}   title       card title
- * @param {string}   excerpt     summary/excerpt paragraph (alias: `summary`)
- * @param {string}   summary     alias for `excerpt` (hero/mini call it this)
- * @param {string}   kicker      hero-only eyebrow above the title
- * @param {string}   label       hero header label (was the hardcoded "Featured")
- * @param {string[]} meta        hero header chips / mini meta line (joined ` • `)
- * @param {string}   date        default meta — left of the `•`
- * @param {string}   readingTime default meta — right of the `•`
- * @param {string[]} tags        default: rendered as Pills; hero/mini: `data-tags` only
- * @param {string}   thumbnail   image src (omit → fg-token placeholder)
- * @param {'landscape'|'portrait'} aspect  default thumbnail ratio (default 'landscape')
- * @param {boolean}  showHeader  hero: show the label/meta header row (default true)
- * @param {string}   href        link target; `http*`/`mailto` → new tab, else same-tab seam
- * @param {Function} onNavigate  (event) => void — same-tab click seam (SPA intercept)
- * @param {string}   className   extra classes on the root
- */
-export default function ArticleCard({
-  size = 'default',
-  title,
-  excerpt,
-  summary,
-  kicker,
-  label,
-  meta,
-  date,
-  readingTime,
-  tags = [],
-  thumbnail,
-  aspect = 'landscape',
-  showHeader = true,
-  href,
-  onNavigate,
-  className = '',
-}) {
-  const body = excerpt ?? summary
-  const dataTags = tags?.length ? tags.join(' ') : undefined
-
-  if (size === 'hero') {
-    return (
-      <CardLink href={href} onNavigate={onNavigate} className={`block group ${className}`.trim()}>
-        <article className="w-full" data-tags={dataTags}>
-          {showHeader && (label || meta?.length) && (
-            <div className="flex justify-between items-center mb-4">
-              {label && <div className="kol-helper-14 text-fg-64">{label}</div>}
-              {meta?.length > 0 && (
-                <div className="flex gap-3 kol-helper-12 text-fg-48">
-                  {meta.map((item, i) => <span key={i}>{item}</span>)}
-                </div>
-              )}
-            </div>
-          )}
-          <div className="aspect-[16/9] mb-4 overflow-hidden w-full bg-fg-04 border border-fg-08 hover:border-fg-16 rounded">
-            {thumbnail && (
-              <Image
-                src={thumbnail}
-                alt={title}
-                className="object-cover transition-transform duration-300 group-hover:scale-105"
-                style={{ width: '100%', height: '100%', objectFit: 'cover' }}
-              />
-            )}
-          </div>
-          <div className="space-y-3">
-            {kicker && (
-              <div className="kol-helper-16 uppercase tracking-wide text-fg-64">{kicker}</div>
-            )}
-            <h2 className="kol-sans-heading-03 transition-opacity duration-200 group-hover:opacity-70 line-clamp-2">
-              {title}
-            </h2>
-            {body && <p className="kol-mono-14 text-fg-48 line-clamp-3">{body}</p>}
-          </div>
-        </article>
-      </CardLink>
-    )
-  }
-
-  if (size === 'mini') {
-    const metaText = Array.isArray(meta) ? meta.join(' • ') : meta
-    return (
-      <CardLink
-        href={href}
-        onNavigate={onNavigate}
-        className={`group flex gap-6 items-start transition-opacity hover:opacity-80 ${className}`.trim()}
-      >
-        <div className="flex-shrink-0 w-[120px] h-[120px] overflow-hidden rounded bg-fg-12" data-tags={dataTags}>
-          <Thumb src={thumbnail} alt={title} />
-        </div>
-        <div className="flex-1 min-w-0 flex flex-col gap-2.5">
-          <h4 className="kol-mono-14 line-clamp-2 transition-opacity group-hover:opacity-80">{title}</h4>
-          {body && <p className="kol-mono-14 text-fg-64 line-clamp-2">{body}</p>}
-          {metaText && <div className="kol-helper-12 text-fg-80 uppercase">{metaText}</div>}
-        </div>
-      </CardLink>
-    )
-  }
-
-  // size === 'default'
-  return (
-    <CardLink href={href} onNavigate={onNavigate} className={`block group cursor-pointer w-full max-w-full ${className}`.trim()}>
-      <article className="w-full max-w-full" data-tags={dataTags}>
-        <div
-          className="mb-4 overflow-hidden w-full rounded bg-fg-04 border border-fg-08"
-          style={{ aspectRatio: aspect === 'portrait' ? '3/4' : '16/9' }}
-        >
-          <Thumb src={thumbnail} alt={title} />
-        </div>
-        {tags.length > 0 && (
-          <div className="flex flex-wrap gap-2 mb-2">
-            {tags.map((tag, i) => (
-              <Pill key={i} variant="inverse" size="sm">{tag}</Pill>
-            ))}
-          </div>
-        )}
-        <h3 className="mb-2 kol-mono-20 transition-opacity duration-200 group-hover:opacity-70">{title}</h3>
-        {body && <p className="mb-2 kol-mono-14 text-fg-64">{body}</p>}
-        {(date || readingTime) && (
-          <Pill variant="subtle" size="sm">{[date, readingTime].filter(Boolean).join(' • ')}</Pill>
-        )}
-      </article>
-    </CardLink>
-  )
-}

package/src/molecules/WorkListItem.jsx

@@ -1,83 +0,0 @@
-import Image from './Image.jsx'
-import Tag from '../atoms/Tag.jsx'
-
-/**
- * WorkListItem — the list/row view of a `/work` project: the row twin of
- * WorkCard. A horizontal card — a small square thumbnail on the left, then a
- * content column split into a header row (title + tag chips on the left, type +
- * year right-aligned) above a large display preview line (the project
- * description). Hover raises a border; `active` persists that treatment for the
- * last-hovered row so a parent list can mark one active.
- *
- * Shares WorkCard's flat project bag so a `/work` view can toggle grid ⇄ list
- * as a render swap, not a data reshape. The whole row is an anchor (`href`) —
- * the source row was not a link (its parent list owned navigation); as the
- * list-view counterpart to WorkCard it is the click target itself. Thumbnail
- * routes through DS Image (graceful missing-asset fallback); tags render as DS
- * Tag chips. Router-agnostic via `onNavigate(href, event)`.
- *
- * Text casing: no text-transform (KOL rule) — the source's `uppercase` title
- * and `capitalize` type are dropped; strings render verbatim as authored.
- *
- * @param {string}        title        header title
- * @param {string}        thumbnail    thumbnail URL; the block is omitted when absent
- * @param {string[]}      tags         rendered as Tag chips under the title
- * @param {string}        type         right-column label
- * @param {string|number} year         right-column, below type
- * @param {string}        description  large display preview line
- * @param {string}        href         row navigation target
- * @param {boolean}       active       persist the hover treatment (last-hovered row)
- * @param {Function}      onMouseEnter hover callback (parent tracks the active row)
- * @param {Function}      onNavigate   (href, event) => void — anchor click seam for SPA routing
- */
-export default function WorkListItem({
-  title,
-  thumbnail,
-  tags,
-  type,
-  year,
-  description,
-  href,
-  active = false,
-  onMouseEnter,
-  onNavigate,
-}) {
-  return (
-    <a
-      href={href}
-      onClick={onNavigate ? (e) => onNavigate(href, e) : undefined}
-      onMouseEnter={onMouseEnter}
-      className={`self-stretch min-h-24 md:min-h-40 p-4 md:p-6 rounded flex items-stretch gap-4 md:gap-6 mb-4 md:mb-6 overflow-hidden cursor-pointer transition-all duration-300 bg-surface-secondary border ${active ? 'border-fg-16' : 'border-transparent hover:border-fg-16'}`}
-    >
-      {thumbnail && (
-        <div className="shrink-0 w-16 h-16 md:w-28 md:h-28 rounded-[2px] overflow-hidden border border-fg-08">
-          <Image src={thumbnail} alt={title} category="work" name={title} className="w-full h-full object-cover" />
-        </div>
-      )}
-
-      <div className="flex flex-col justify-between min-w-0 flex-1 gap-3 md:gap-4">
-        <div className="flex justify-between items-start md:items-center gap-4">
-          <div className="flex flex-col gap-1 md:gap-2 min-w-0">
-            <div className="kol-mono-14 truncate">{title}</div>
-            {tags?.length > 0 && (
-              <div className="flex flex-wrap gap-1.5">
-                {tags.map((t) => (
-                  <Tag key={t} size="sm" variant="naked" hash={false}>{t}</Tag>
-                ))}
-              </div>
-            )}
-          </div>
-
-          <div className="flex flex-col items-end gap-1 md:gap-2 shrink-0">
-            <span className="kol-mono-12 md:kol-mono-14">{type}</span>
-            <span className="kol-mono-12 text-fg-64">{year}</span>
-          </div>
-        </div>
-
-        <p className="kol-sans-heading-03 text-auto leading-tight whitespace-nowrap overflow-hidden text-ellipsis">
-          {description}
-        </p>
-      </div>
-    </a>
-  )
-}