@kolkrabbi/kol-foundry 0.2.0 → 0.3.0

package/README.md

@@ -13,6 +13,10 @@ The KOL **type-foundry system** — the type-specimen apparatus, lifted out of `
 | `TypefaceStyleSection` | per-style specimen block |
 | `FontPreviewSection` | size-ladder / preview control |
 | `SpecimenSectionHeader` | shared section header |
+| `TypeSample` | labeled live type-specimen block (props-driven) |
+| `TypeSpecCard` | font-metric data sheet + live sample slot |
+| `TextPressure` | variable-font glyphs deforming toward the pointer |
+| `ColorLoader` | branded loading curtain with a live variable-font wordmark |
 | `glyphSets`, `glyphCategories`, `SPECIMEN_SAMPLE_TEXT` | glyph data |
 
 ```js
@@ -21,4 +25,4 @@ import { TypefaceHero, VariableFontSection } from '@kolkrabbi/kol-foundry'
 
 ## Requirements
 
-Components take flat prop bags — typeface metrics / font files are consumer-supplied. Shared primitives (`Tag`, `Pill`, `Slider`, `Button`, `Divider`, `Dropdown`, `useAxisAnimation`) stay in `@kolkrabbi/kol-component`; this package depends on them. Styling comes from `@kolkrabbi/kol-theme`. Vite + Tailwind v4 consumer (`@source "…/node_modules/@kolkrabbi/kol-foundry/src"`).
+Components take flat prop bags — typeface metrics / font files are consumer-supplied. Shared primitives (`Tag`, `Pill`, `Slider`, `Button`, `Divider`, `Dropdown`, `useAxisAnimation`, `usePrefersReducedMotion`) stay in `@kolkrabbi/kol-component`; this package depends on them. `framer-motion` is a peer (`ColorLoader`). Styling comes from `@kolkrabbi/kol-theme`. Vite + Tailwind v4 consumer (`@source "…/node_modules/@kolkrabbi/kol-foundry/src"` — Tailwind skips `node_modules` when scanning, so without this line the specimen layouts never generate).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-foundry",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "private": false,
   "description": "KOL foundry component set — the type-specimen apparatus: typeface hero, variable-font axis playground, parsed-metric glyph inspector, character-set browser, font-preview, and the typeface-catalog grid. Every component renders, inspects, or manipulates a live font. Typeface data is consumer-injected. Sits above @kolkrabbi/kol-{theme,icons,component}.",
   "license": "MIT",
@@ -11,13 +11,14 @@
     ".": "./src/index.js"
   },
   "dependencies": {
-    "@kolkrabbi/kol-theme": "0.7.1",
-    "@kolkrabbi/kol-component": "0.7.0",
+    "@kolkrabbi/kol-component": "0.8.0",
+    "@kolkrabbi/kol-theme": "0.7.3",
     "@kolkrabbi/kol-icons": "0.5.0"
   },
   "peerDependencies": {
     "react": "^18.3.0 || ^19.0.0",
     "react-dom": "^18.3.0 || ^19.0.0",
+    "framer-motion": "^12.0.0",
     "opentype.js": "^1.3.4"
   },
   "peerDependenciesMeta": {

package/src/ColorLoader.jsx

@@ -0,0 +1,155 @@
+import { motion as Motion, useAnimationControls } from 'framer-motion'
+import { useEffect, useRef, useState } from 'react'
+import { usePrefersReducedMotion } from '@kolkrabbi/kol-component'
+import TextPressure from './TextPressure.jsx'
+
+/**
+ * ColorLoader — a full-height branded intro/loading curtain. Fills its parent
+ * on a solid backdrop, times in a variable-font wordmark (a live TextPressure
+ * effect) after `wordmarkDelay`, then reveals a bouncing down-chevron cue after
+ * `scrollDelay`. With `dismissOnClick`, clicking the curtain slides the whole
+ * thing up out of view and fires `onComplete`; otherwise the parent owns
+ * dismissal (unmount when its work is done). Generalized from the app's
+ * KOLKRABBI loader: the cursor trail, `cursor: none`, and window-scroll/keyboard
+ * gesture hijack are all dropped — exit is a plain click or parent-driven.
+ *
+ * Reduced motion → no timers, no tweens: one static frame (wordmark + cue shown
+ * at rest) and `onComplete` fires immediately on mount, so the curtain never
+ * makes a reduced-motion user wait.
+ *
+ * The wordmark needs a variable font — see TextPressure's font contract. Pass
+ * `fontFamily` / `fontUrl` to point at the KOL variable font (a consumer asset).
+ *
+ * @param {string}    text           wordmark string fed to TextPressure
+ * @param {string}    fontFamily     wordmark font family (→ TextPressure)
+ * @param {string}    [fontUrl]      variable-font URL → TextPressure @font-face
+ * @param {() => void} onComplete    fired after the exit slide-up (or at once, reduced)
+ * @param {boolean}   dismissOnClick click the curtain to slide up + complete
+ * @param {string}    bgColor        backdrop color (KOL token / CSS color)
+ * @param {string}    markColor      wordmark + chevron color (KOL token / CSS color)
+ * @param {number}    wordmarkDelay  ms before the wordmark fades in
+ * @param {number}    scrollDelay    ms before the chevron cue reveals
+ * @param {number}    exitDuration   seconds for the slide-up exit tween
+ */
+export default function ColorLoader({
+  text = 'KOLKRABBI',
+  fontFamily = 'var(--kol-font-family-sans)',
+  fontUrl,
+  onComplete,
+  dismissOnClick = false,
+  bgColor = 'var(--kol-surface-primary)',
+  markColor = 'var(--kol-fg-emphasis)',
+  wordmarkDelay = 1000,
+  scrollDelay = 2000,
+  exitDuration = 1.8,
+}) {
+  const reducedMotion = usePrefersReducedMotion()
+  const [showMark, setShowMark] = useState(reducedMotion)
+  const [showCue, setShowCue] = useState(reducedMotion)
+  const [exiting, setExiting] = useState(false)
+  const controls = useAnimationControls()
+  const firedRef = useRef(false)
+
+  const fireComplete = () => {
+    if (firedRef.current) return
+    firedRef.current = true
+    onComplete?.()
+  }
+
+  useEffect(() => {
+    if (reducedMotion) {
+      // Skip the whole sequence: static frame, signal done at once.
+      setShowMark(true)
+      setShowCue(true)
+      fireComplete()
+      return undefined
+    }
+    const markTimer = setTimeout(() => setShowMark(true), wordmarkDelay)
+    const cueTimer = setTimeout(() => setShowCue(true), scrollDelay)
+    return () => {
+      clearTimeout(markTimer)
+      clearTimeout(cueTimer)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [reducedMotion, wordmarkDelay, scrollDelay])
+
+  const dismiss = () => {
+    if (exiting) return
+    setExiting(true)
+    if (reducedMotion) {
+      fireComplete()
+      return
+    }
+    controls
+      .start({ y: '-100%', transition: { duration: exitDuration, ease: 'easeInOut' } })
+      .then(fireComplete)
+  }
+
+  return (
+    <Motion.div
+      className={`flex h-full w-full flex-col ${dismissOnClick ? 'cursor-pointer' : ''}`}
+      style={{ backgroundColor: bgColor }}
+      animate={controls}
+      initial={{ y: 0 }}
+      onClick={dismissOnClick ? dismiss : undefined}
+    >
+      {/* Top third — spacer */}
+      <div className="flex flex-1 items-end justify-center self-stretch" />
+
+      {/* Middle third — wordmark + cue */}
+      <div className="flex flex-1 flex-col items-center justify-center gap-12 self-stretch">
+        <Motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: showMark ? 1 : 0 }}
+          transition={{ duration: reducedMotion ? 0 : 0.5 }}
+          className="w-full px-6"
+        >
+          <div className="mx-auto h-20 w-full max-w-[280px] sm:h-24 sm:max-w-[400px] md:h-32 md:max-w-[600px]">
+            <TextPressure
+              text={text}
+              fontFamily={fontFamily}
+              fontUrl={fontUrl}
+              textColor={markColor}
+              flex
+              width
+              weight
+              italic={false}
+              minFontSize={40}
+            />
+          </div>
+        </Motion.div>
+
+        <Motion.div
+          initial={{ opacity: 0, y: 0 }}
+          animate={{
+            opacity: showCue ? 0.6 : 0,
+            y: showCue && !reducedMotion ? [0, 12, 0] : 0,
+          }}
+          transition={{
+            opacity: { duration: reducedMotion ? 0 : 0.5 },
+            y: reducedMotion ? { duration: 0 } : { duration: 1.5, repeat: Infinity, ease: 'easeInOut' },
+          }}
+          className="mt-12"
+          style={{ color: markColor }}
+        >
+          <svg
+            width="32"
+            height="32"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+          >
+            <polyline points="6 9 12 15 18 9" />
+          </svg>
+        </Motion.div>
+      </div>
+
+      {/* Bottom third — spacer */}
+      <div className="flex flex-1 items-end justify-center self-stretch" />
+    </Motion.div>
+  )
+}

package/src/TextPressure.jsx

@@ -0,0 +1,331 @@
+import { useEffect, useRef, useState } from 'react'
+import { usePrefersReducedMotion } from '@kolkrabbi/kol-component'
+
+// 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/TypeSample.jsx

@@ -0,0 +1,50 @@
+/**
+ * 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/TypeSpecCard.jsx

@@ -0,0 +1,42 @@
+/**
+ * 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/index.js

@@ -22,6 +22,14 @@ export { default as TypefaceLibraryGridWithVariables } from './TypefaceLibraryGr
 export { default as TypefaceLibraryItem } from './TypefaceLibraryItem.jsx'
 export { default as TypefaceVariablePreview } from './TypefaceVariablePreview.jsx'
 
+// type-specimen kit — prop-driven specimen blocks (moved from @kolkrabbi/kol-component 2026-07-09)
+export { default as TypeSample } from './TypeSample.jsx'
+export { default as TypeSpecCard } from './TypeSpecCard.jsx'
+
+// live-font effects — variable-font axes, animated
+export { default as TextPressure } from './TextPressure.jsx'
+export { default as ColorLoader } from './ColorLoader.jsx'
+
 // reference composition (severed page — data via props, no router/SEO/data-fetch)
 export { default as TypefaceSpecimenPage } from './TypefaceSpecimenPage.jsx'