@kolkrabbi/kol-component 0.7.0 → 0.8.0

package/src/organisms/ColorLoader.jsx

@@ -1,155 +0,0 @@
-import { motion as Motion, useAnimationControls } from 'framer-motion'
-import { useEffect, useRef, useState } from 'react'
-import TextPressure from '../atoms/TextPressure.jsx'
-import usePrefersReducedMotion from '../hooks/usePrefersReducedMotion.js'
-
-/**
- * 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/organisms/DiagonalMarqueeRiver.jsx

@@ -1,138 +0,0 @@
-import { useEffect, useMemo, useRef } from 'react'
-import { gsap } from 'gsap'
-import usePrefersReducedMotion from '../hooks/usePrefersReducedMotion.js'
-
-/**
- * DiagonalMarqueeRiver — an auto-scrolling multi-column marquee "river":
- * `items` are dealt round-robin into `colCount` vertical columns, each column
- * runs an infinite constant-velocity GSAP y-tween at its own speed, and the
- * whole block is rotated + scaled so the columns stream diagonally across a
- * tall stage. An IntersectionObserver pauses every tween while the stage is
- * off-screen. Data-agnostic — the card is a `renderItem` slot; the engine only
- * measures scrollHeight and tweens y.
- *
- * Each column's list is rendered twice so the tween can travel exactly one set
- * then repeat with an invisible wrap. On `prefers-reduced-motion` no GSAP runs
- * and the columns render static. The tween set is rebuilt on container resize
- * (a ResizeObserver remeasures scrollHeight — the source keyed only on the item
- * list and drifted when the viewport changed).
- *
- * @param {any[]}    items         pool dealt round-robin into columns
- * @param {(item:any,i:number)=>ReactNode} renderItem card slot per item
- * @param {number}   colCount      number of columns (default 4)
- * @param {number[]} columnSpeeds  px/s per column (default [28,38,22,34], fallback 30)
- * @param {number}   gap           vertical gap between cards and gap-between-columns, px (default 24)
- * @param {string}   height        stage height (default '300vh')
- * @param {number}   rotate        tilt of the block, deg (default -15)
- * @param {number}   scale         oversize of the block (default 1.3)
- * @param {boolean}  shuffle       one-time shuffle of `items` before dealing (default false)
- */
-export default function DiagonalMarqueeRiver({
-  items = [],
-  renderItem,
-  colCount = 4,
-  columnSpeeds = [28, 38, 22, 34],
-  gap = 24,
-  height = '300vh',
-  rotate = -15,
-  scale = 1.3,
-  shuffle = false,
-}) {
-  const containerRef = useRef(null)
-  const columnRefs = useRef([])
-  const tweensRef = useRef([])
-  const reducedMotion = usePrefersReducedMotion()
-
-  // Deal items round-robin into columns (optionally shuffled once).
-  const columns = useMemo(() => {
-    const pool = shuffle ? [...items].sort(() => Math.random() - 0.5) : items
-    const cols = Array.from({ length: colCount }, () => [])
-    pool.forEach((item, i) => cols[i % colCount].push(item))
-    return cols
-  }, [items, colCount, shuffle])
-
-  useEffect(() => {
-    if (reducedMotion) return undefined
-
-    const build = () => {
-      const colEls = columnRefs.current.filter(Boolean)
-      tweensRef.current.forEach((tw) => tw.kill())
-      tweensRef.current = []
-      if (!colEls.length) return
-
-      colEls.forEach((colEl, i) => {
-        colEl.style.willChange = 'transform'
-        const singleSetHeight = colEl.scrollHeight / 2 // one copy of the doubled list
-        const speed = columnSpeeds[i] || 30
-        const initialOffset = -(singleSetHeight * ((i * 0.15) % 1)) // staggered per-column start
-        gsap.set(colEl, { y: initialOffset })
-        const tween = gsap.to(colEl, {
-          y: initialOffset - singleSetHeight, // travel exactly one set → seamless
-          duration: singleSetHeight / speed, // constant px/s regardless of column length
-          ease: 'none',
-          repeat: -1,
-        })
-        tweensRef.current.push(tween)
-      })
-    }
-
-    build()
-
-    // Pause tweens while the stage is off-screen.
-    const io = new IntersectionObserver(
-      ([entry]) => {
-        tweensRef.current.forEach((tw) => (entry.isIntersecting ? tw.resume() : tw.pause()))
-      },
-      { threshold: 0 },
-    )
-    if (containerRef.current) io.observe(containerRef.current)
-
-    // [source-bug] resize-remeasure: source keyed only on the item list, so a
-    // viewport change left the tweens measuring a stale scrollHeight. Rebuild
-    // on container resize (debounced).
-    let raf = 0
-    const ro = new ResizeObserver(() => {
-      cancelAnimationFrame(raf)
-      raf = requestAnimationFrame(build)
-    })
-    if (containerRef.current) ro.observe(containerRef.current)
-
-    return () => {
-      io.disconnect()
-      ro.disconnect()
-      cancelAnimationFrame(raf)
-      tweensRef.current.forEach((tw) => tw.kill())
-      tweensRef.current = []
-    }
-  }, [columns, columnSpeeds, reducedMotion])
-
-  return (
-    <div ref={containerRef} className="w-full overflow-hidden" style={{ height }}>
-      <div
-        className="flex gap-6"
-        style={{
-          transform: `rotate(${rotate}deg) scale(${scale})`,
-          transformOrigin: 'center center',
-          height: '140%',
-          marginTop: '-20%',
-        }}
-      >
-        {columns.map((col, colIndex) => (
-          <div key={colIndex} className="flex-1 overflow-hidden">
-            <div
-              ref={(el) => {
-                columnRefs.current[colIndex] = el
-              }}
-              className="flex flex-col"
-              style={{ gap: `${gap}px` }}
-            >
-              {[...col, ...col].map((item, i) => (
-                <div key={i}>{renderItem?.(item, i)}</div>
-              ))}
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}

package/src/organisms/ParallaxShelf.jsx

@@ -1,141 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
-import useEmblaCarousel from 'embla-carousel-react'
-import WorkCard from './WorkCard.jsx'
-import usePrefersReducedMotion from '../hooks/usePrefersReducedMotion.js'
-
-/* Scroll-driven parallax strength — fraction of scroll delta applied to the
- * shelf. Eases in quadratically with page-scroll progress (min → max). */
-const SCROLL_PARALLAX_MIN = 0.1
-const SCROLL_PARALLAX_MAX = 0.4
-const DRAG_THRESHOLD_SQ = 25
-/* Aligned edge gets the big gutter so the first/last card lands under a
- * 1400px content column. */
-const EDGE_GUTTER = 'max(4rem, calc((100vw - 1400px) / 2 + 16rem))'
-
-/**
- * ParallaxShelf — one horizontal shelf row: a drag-free Embla carousel of
- * project cards with scroll-driven parallax. As the page scrolls the track is
- * nudged horizontally by `delta × parallax × direction`, the strength easing in
- * the further down the page you are; alternating rows (`fromLeft`) scroll in
- * opposite directions for a woven wall of shelves. Includes a drag-vs-click
- * guard (a drag never fires a card link) and an edge-aligned category label.
- *
- * Calls `useEmblaCarousel` directly (FeaturedCarousel's precedent) because the
- * parallax nudge needs `internalEngine()`, which DS Carousel encapsulates and
- * must not be modified. The source's `WheelGesturesPlugin` is dropped (not a
- * DS dependency). Parallax is disabled under prefers-reduced-motion and on
- * small screens — both fall back to a plain wheel/drag carousel.
- *
- * Card-agnostic via `renderCard`; defaults to DS **WorkCard** with an
- * `index`-staggered ragged height. Pass a plain `items` array of flat project
- * objects (no Sanity keying).
- *
- * Text casing: the label renders verbatim (author `type.label` as e.g.
- * "Client Work") — no text-transform.
- *
- * @param {{label:string}} type       category; `label` renders in the edge caption
- * @param {Array}          items      flat project objects passed to the card renderer
- * @param {boolean}        fromLeft   direction of alignment / start index / parallax sign / label side (default false)
- * @param {Function}       renderCard (item, index) => ReactNode — card renderer (default WorkCard)
- * @param {Function}       onNavigate (href, event) => void — forwarded to the default WorkCard
- * @param {string}         className  extra classes on the section
- */
-export default function ParallaxShelf({
-  type,
-  items = [],
-  fromLeft = false,
-  renderCard,
-  onNavigate,
-  className = '',
-}) {
-  const reduced = usePrefersReducedMotion()
-  const [isMobile] = useState(
-    () => typeof window !== 'undefined' && window.matchMedia('(max-width: 767px)').matches,
-  )
-
-  const [emblaRef, emblaApi] = useEmblaCarousel({
-    dragFree: true,
-    align: fromLeft ? 'end' : 'start',
-    containScroll: 'trimSnaps',
-    ...(fromLeft && { startIndex: items.length - 1 }),
-  })
-
-  const sectionRef = useRef(null)
-  const lastScrollY = useRef(0)
-
-  // Scroll-driven parallax: page scroll nudges the carousel while in view.
-  useEffect(() => {
-    if (!emblaApi || reduced || isMobile) return
-    lastScrollY.current = window.scrollY
-
-    const onScroll = () => {
-      const section = sectionRef.current
-      if (!section) return
-      const rect = section.getBoundingClientRect()
-      const inView = rect.bottom > 0 && rect.top < window.innerHeight
-      if (!inView) {
-        lastScrollY.current = window.scrollY
-        return
-      }
-      const delta = window.scrollY - lastScrollY.current
-      lastScrollY.current = window.scrollY
-      const scrollProgress = Math.min(window.scrollY / (document.body.scrollHeight - window.innerHeight), 1)
-      const parallax = SCROLL_PARALLAX_MIN + (SCROLL_PARALLAX_MAX - SCROLL_PARALLAX_MIN) * (scrollProgress * scrollProgress)
-      const engine = emblaApi.internalEngine()
-      const offset = delta * parallax * (fromLeft ? 1 : -1)
-      engine.scrollBody.useDuration(0)
-      engine.scrollTo.distance(offset, false)
-    }
-
-    window.addEventListener('scroll', onScroll, { passive: true })
-    return () => window.removeEventListener('scroll', onScroll)
-  }, [emblaApi, fromLeft, reduced, isMobile])
-
-  // Drag-vs-click guard (5px): a drag suppresses the ensuing card-link click.
-  const dragged = useRef(false)
-  const pointerStart = useRef({ x: 0, y: 0 })
-  const onPointerDown = useCallback((e) => {
-    dragged.current = false
-    pointerStart.current = { x: e.clientX, y: e.clientY }
-  }, [])
-  const onPointerMove = useCallback((e) => {
-    if (dragged.current) return
-    const dx = e.clientX - pointerStart.current.x
-    const dy = e.clientY - pointerStart.current.y
-    if (dx * dx + dy * dy > DRAG_THRESHOLD_SQ) dragged.current = true
-  }, [])
-  const onClickCapture = useCallback((e) => {
-    if (dragged.current) e.preventDefault()
-  }, [])
-
-  const card = (item, i) =>
-    renderCard ? renderCard(item, i) : <WorkCard key={i} {...item} index={i} onNavigate={onNavigate} />
-
-  return (
-    <section ref={sectionRef} className={`py-6 md:py-16 ${className}`.trim()}>
-      <div
-        className="overflow-visible select-none"
-        ref={emblaRef}
-        style={{
-          paddingLeft: fromLeft ? undefined : EDGE_GUTTER,
-          paddingRight: fromLeft ? EDGE_GUTTER : undefined,
-        }}
-      >
-        <div
-          className="flex gap-8 items-end"
-          onPointerDown={onPointerDown}
-          onPointerMove={onPointerMove}
-          onClickCapture={onClickCapture}
-        >
-          {items.map((item, i) => card(item, i))}
-        </div>
-      </div>
-
-      {type?.label && (
-        <div className={`max-w-[1400px] mx-auto mt-4 md:mt-6 ${fromLeft ? 'pr-4 md:pr-64 text-right' : 'pl-4 md:pl-64'}`}>
-          <p className="kol-helper-12 text-auto">{type.label}</p>
-        </div>
-      )}
-    </section>
-  )
-}

package/src/organisms/PortableTextRenderer.jsx

@@ -1,115 +0,0 @@
-import { Fragment } from 'react'
-import CodeBlock from '../molecules/CodeBlock.jsx'
-import ImageBlock from '../molecules/ImageBlock.jsx'
-import VideoBlock from '../molecules/VideoBlock.jsx'
-import Table from './Table.jsx'
-import Divider from '../atoms/Divider.jsx'
-
-/**
- * slugify — heading text → anchor id (lowercase, non-word stripped, spaces to
- * dashes, repeats collapsed). Feeds the h2/h3 `id`s that power in-page anchors
- * / a table of contents. Kept from the source; it is the one bit of real logic.
- */
-export function slugify(text = '') {
-  return String(text)
-    .toLowerCase()
-    .replace(/[^\w\s-]/g, '')
-    .replace(/\s+/g, '-')
-    .replace(/-+/g, '-')
-    .trim()
-}
-
-/* ── Inline marks ──────────────────────────────────────────────────────────
- * A block's `text` is either a plain string or an array of inline nodes:
- *   'plain text'
- *   { mark: 'link', href, text }         → <a> (http* → new tab + noopener)
- *   { mark: 'segmentTitle', text }       → <span class="kol-segment-title">
- */
-function renderInline(text) {
-  if (text == null) return null
-  const nodes = Array.isArray(text) ? text : [text]
-  return nodes.map((node, i) => {
-    if (typeof node === 'string') return <Fragment key={i}>{node}</Fragment>
-    if (node.mark === 'link') {
-      const external = (node.href || '').startsWith('http')
-      return (
-        <a
-          key={i}
-          href={node.href}
-          target={external ? '_blank' : undefined}
-          rel={external ? 'noopener noreferrer' : undefined}
-        >
-          {node.text}
-        </a>
-      )
-    }
-    if (node.mark === 'segmentTitle') {
-      return <span key={i} className="kol-segment-title">{node.text}</span>
-    }
-    return <Fragment key={i}>{node.text}</Fragment>
-  })
-}
-
-const plainText = (text) =>
-  Array.isArray(text) ? text.map((n) => (typeof n === 'string' ? n : n.text)).join('') : String(text ?? '')
-
-/* ── Block registry ────────────────────────────────────────────────────────
- * Maps a plain { type, ... } block to a DS component / prose tag. This is the
- * de-Sanitized counterpart to the app's Portable-Text components map: generic
- * block-type names (`heading`/`quote`/`divider`/`table`/`video`), no CMS
- * schema keys, no @portabletext/react host.
- */
-const BLOCKS = {
-  heading: ({ level = 2, text, id }) => {
-    const Tag = `h${level}`
-    const anchorId = id ?? (level === 2 || level === 3 ? slugify(plainText(text)) : undefined)
-    return <Tag id={anchorId}>{renderInline(text)}</Tag>
-  },
-  paragraph: ({ text }) => <p>{renderInline(text)}</p>,
-  caption: ({ text }) => <p className="caption">{renderInline(text)}</p>,
-  quote: ({ text, cite }) => (
-    <blockquote>
-      <p>{renderInline(text)}</p>
-      {cite && <cite>{cite}</cite>}
-    </blockquote>
-  ),
-  code: ({ language, code }) => <CodeBlock language={language}>{code}</CodeBlock>,
-  divider: () => <Divider className="my-10" />,
-  image: (block) => <ImageBlock {...block} />,
-  video: (block) => <VideoBlock {...block} />,
-  table: ({ columns, rows, caption }) => <Table columns={columns} rows={rows} caption={caption} variant="simple" />,
-  list: ({ style = 'bullet', items = [] }) => {
-    const Tag = style === 'number' ? 'ol' : 'ul'
-    return <Tag>{items.map((item, i) => <li key={i}>{renderInline(item)}</li>)}</Tag>
-  },
-}
-
-/**
- * PortableTextRenderer — turns a plain block array into `.kol-prose`-styled
- * long-form markup via one block-type registry. The design system's CMS
- * renderer (the counterpart to ProseStylesViewer, which only *showcases* the
- * prose styles) — both plug into the same `.kol-prose` stylesheet.
- *
- * The block shape is a simple `{ type, ... }` — NOT Sanity Portable Text and
- * with no `@portabletext/react` host. Custom blocks (`image`/`video`/`table`/
- * `code`/`divider`) resolve to DS components; text blocks render bare tags the
- * `.kol-prose` sheet styles. Inline `link`/`segmentTitle` marks are supported
- * via the array `text` form (see `renderInline`). Unknown types are skipped.
- *
- * All content — headings, paragraphs, captions — is authored as-is; the map
- * applies no `text-transform`.
- *
- * @param {Array<{type:string}>} blocks  the document, in order
- * @param {boolean} prose      wrap output in a `.kol-prose` container (default true)
- * @param {string}  className  extra classes on the wrapper
- */
-export default function PortableTextRenderer({ blocks = [], prose = true, className = '' }) {
-  const rendered = blocks.map((block, i) => {
-    const render = BLOCKS[block?.type]
-    if (!render) return null
-    return <Fragment key={block.key ?? i}>{render(block)}</Fragment>
-  })
-
-  if (!prose) return <>{rendered}</>
-  return <div className={`kol-prose ${className}`.trim()}>{rendered}</div>
-}