@kolkrabbi/kol-component 0.2.0 → 0.3.0

package/src/organisms/CtaGlobal.jsx

@@ -0,0 +1,67 @@
+/**
+ * CtaGlobal — editorial two-column contact/CTA band: a large display wordmark
+ * on the left (e.g. "/ CONNECT") and a right column of stacked
+ * label-over-value rows — a prompt row ("WORKING ON A PROJECT?" / "SEND A
+ * MESSAGE") and a contact row whose value is a `mailto:` link. The editorial
+ * closer of the CTA-band family (FoundryCTA is the simple centered tier).
+ * Columns sit side by side from `md` up and stack below — the source's
+ * no-breakpoint two-column was a bug fixed on recreation.
+ *
+ * Presentational — all copy arrives as props (the source hard-coded every
+ * string). The right column is internally a list of rows: the named
+ * `promptLabel`/`heading` and `contactLabel`/`email` conveniences cover the
+ * common case, `secondaryRows` slots extra rows between them. A row with an
+ * `href` renders an `<a>`; without, a static heading. Empty rows emit no
+ * nodes.
+ *
+ * Eyebrow, labels, and values render exactly as authored — the source's
+ * `uppercase` classes were dropped per KOL casing rules; author strings in
+ * their final case at the call site.
+ *
+ * @param {ReactNode} eyebrow       left-column display wordmark (kol-sans-display-01)
+ * @param {ReactNode} promptLabel   prompt-row label (kol-helper-16)
+ * @param {ReactNode} heading       prompt-row value (kol-sans-heading-01)
+ * @param {ReactNode} contactLabel  contact-row label (kol-helper-16)
+ * @param {string}    email         contact-row value + `mailto:` target; omit to drop the row
+ * @param {{label: ReactNode, value: ReactNode, href?: string}[]} secondaryRows  extra right-column rows between prompt and contact
+ * @param {string}    className     extra classes on the section
+ */
+export default function CtaGlobal({
+  eyebrow,
+  promptLabel,
+  heading,
+  contactLabel,
+  email,
+  secondaryRows = [],
+  className = '',
+}) {
+  const rows = [
+    ...(promptLabel || heading ? [{ label: promptLabel, value: heading }] : []),
+    ...secondaryRows,
+    ...(email ? [{ label: contactLabel, value: email, href: `mailto:${email}` }] : []),
+  ]
+  return (
+    <section className={`w-full bg-auto ${className}`.trim()}>
+      <div className="w-full py-10 flex flex-col md:flex-row items-start gap-12 overflow-hidden">
+        <div className="flex-1 self-stretch text-auto kol-sans-display-01">{eyebrow}</div>
+        <div className="flex-1 self-stretch pb-6 md:pt-32 flex flex-col justify-end items-start gap-12">
+          {rows.map((row, i) => (
+            <div key={i} className="self-stretch flex flex-col items-start gap-2">
+              {row.label && <div className="text-auto kol-helper-16">{row.label}</div>}
+              {row.href ? (
+                <a
+                  href={row.href}
+                  className="text-auto kol-sans-heading-01 hover:opacity-70 transition-opacity"
+                >
+                  {row.value}
+                </a>
+              ) : (
+                <div className="text-auto kol-sans-heading-01">{row.value}</div>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}

package/src/organisms/DiagonalMarqueeRiver.jsx

@@ -0,0 +1,138 @@
+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/EditorShell.jsx

@@ -0,0 +1,111 @@
+import Divider from '../atoms/Divider.jsx'
+
+/**
+ * EditorShell — the two-rail editor layout frame.
+ *
+ *   ┌──────────────── topbar ──────────────────────┐
+ *   ├────────┬──────────────────────────┬──────────┤
+ *   │  left  │  [canvasHeader]          │  right   │
+ *   │  rail  │  children (canvas)       │  rail    │
+ *   └────────┴──────────────────────────┴──────────┘
+ *
+ * Fixed-width rails flank a fluid canvas column, all under an optional topbar.
+ * Hairlines between regions are composed from the DS `Divider` (vertical
+ * between rails/canvas, horizontal under the topbar and rail/canvas headers).
+ * Headers render only when their slot is filled, so an unused header
+ * contributes no border or gap (the source's `:empty` collapse, expressed as a
+ * conditional render instead of a CSS rule).
+ *
+ * Ported from the brand editor with the app couplings dropped (per lobby
+ * spec): the panel-registry + `panelsForSlot`/`SLOTS` indirection is replaced
+ * by plain ReactNode slots (`left` / `right` / `children` + optional headers,
+ * topbar, overlays); the `MenuTop` / `ShortcutsOverlay` imports become the
+ * `topbar` / `overlays` slots; the editor stylesheet import is gone (layout is
+ * Tailwind + composed Divider); the `#0E0E11` dark canvas is a `canvasBg` prop.
+ * `data-editor-keep-selection` stays as an opt-in click-away hook, not baked
+ * behavior.
+ *
+ * @param {ReactNode} topbar       top bar spanning the full width (optional)
+ * @param {ReactNode} leftHeader   left rail header (optional; renders a hairline when set)
+ * @param {ReactNode} left         left rail body (scrolls independently)
+ * @param {ReactNode} canvasHeader sub-bar spanning only the canvas column, e.g. a tool palette (optional)
+ * @param {ReactNode} children     the canvas region (fills the fluid column)
+ * @param {ReactNode} rightHeader  right rail header (optional)
+ * @param {ReactNode} right        right rail body (scrolls independently)
+ * @param {ReactNode} overlays     floating overlays rendered above the frame (optional)
+ * @param {number}    railWidth    rail column width in px (default 320)
+ * @param {string}    canvasBg     canvas column background (default var(--kol-surface-primary))
+ * @param {string|number} height   shell height (default '100dvh'; pass a bounded value to embed)
+ * @param {string}    className    extra classes merged onto the shell root
+ */
+export default function EditorShell({
+  topbar,
+  leftHeader,
+  left,
+  canvasHeader,
+  children,
+  rightHeader,
+  right,
+  overlays,
+  railWidth = 320,
+  canvasBg = 'var(--kol-surface-primary)',
+  height = '100dvh',
+  className = '',
+}) {
+  return (
+    <div
+      data-editor-keep-selection
+      className={`flex flex-col overflow-hidden bg-surface-primary ${className}`.trim()}
+      style={{ height }}
+    >
+      {topbar && (
+        <>
+          <div className="shrink-0">{topbar}</div>
+          <Divider />
+        </>
+      )}
+
+      <div className="flex flex-1 min-h-0">
+        <Rail header={leftHeader} width={railWidth}>{left}</Rail>
+        <Divider variant="vertical" />
+
+        <div className="flex flex-col flex-1 min-w-0 min-h-0">
+          {canvasHeader && (
+            <>
+              <div className="shrink-0">{canvasHeader}</div>
+              <Divider />
+            </>
+          )}
+          <main
+            className="flex-1 min-h-0 select-none"
+            style={{ background: canvasBg }}
+          >
+            {children}
+          </main>
+        </div>
+
+        <Divider variant="vertical" />
+        <Rail header={rightHeader} width={railWidth}>{right}</Rail>
+      </div>
+
+      {overlays}
+    </div>
+  )
+}
+
+/* Rail — fixed-width aside with an optional header (+ hairline) over a
+ * scrolling body. `min-h-0` lets the body's overflow scroll instead of
+ * stretching the whole shell. */
+function Rail({ header, width, children }) {
+  return (
+    <aside className="flex flex-col min-h-0 shrink-0" style={{ width }}>
+      {header && (
+        <>
+          <div className="shrink-0">{header}</div>
+          <Divider />
+        </>
+      )}
+      <div className="flex-1 min-h-0 overflow-y-auto">{children}</div>
+    </aside>
+  )
+}

package/src/organisms/ErrorBoundary.jsx

@@ -0,0 +1,70 @@
+import { Component } from 'react'
+import Button from '../atoms/Button.jsx'
+
+/**
+ * ErrorBoundary — class error boundary (boundaries can't be hooks). Catches
+ * render errors in its subtree and swaps in a centered full-screen fallback
+ * ("Something went wrong") with two recovery actions: retry in place and go
+ * home. A dev-only error/stack panel renders on Vite dev builds
+ * (`import.meta.env.DEV`) — prod users never see a stack. Wrap app regions
+ * so a single crash can't blank the whole app.
+ *
+ * @param {ReactNode} children  the guarded subtree
+ * @param {string}    homeHref  "Go home" destination (default '/')
+ * @param {Function}  fallback  ({ error, errorInfo, reset }) => ReactNode — replaces the built-in fallback screen
+ * @param {Function}  onReset   called after "Try again" clears the error state
+ */
+export default class ErrorBoundary extends Component {
+  state = { hasError: false, error: null, errorInfo: null }
+
+  static getDerivedStateFromError() {
+    return { hasError: true }
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.error('ErrorBoundary caught an error:', error, errorInfo)
+    this.setState({ error, errorInfo })
+  }
+
+  handleReset = () => {
+    this.setState({ hasError: false, error: null, errorInfo: null })
+    this.props.onReset?.()
+  }
+
+  render() {
+    if (!this.state.hasError) return this.props.children
+
+    const { error, errorInfo } = this.state
+    if (this.props.fallback) {
+      return this.props.fallback({ error, errorInfo, reset: this.handleReset })
+    }
+
+    return (
+      <div className="min-h-screen w-full flex items-center justify-center px-8 bg-surface-primary">
+        <div className="max-w-[600px] space-y-8 text-center">
+          <div className="space-y-4">
+            <h1 className="kol-sans-display-02">Something went wrong</h1>
+            <p className="kol-mono-16 opacity-70">
+              We encountered an unexpected error. This has been logged and we'll look into it.
+            </p>
+          </div>
+
+          {import.meta.env.DEV && error && (
+            <div className="text-left p-6 rounded overflow-auto max-h-[300px] bg-surface-secondary">
+              <p className="kol-mono-12 font-bold mb-2">Error Details (dev only):</p>
+              <pre className="kol-mono-12 whitespace-pre-wrap break-all">
+                {error.toString()}
+                {errorInfo?.componentStack}
+              </pre>
+            </div>
+          )}
+
+          <div className="flex gap-4 justify-center flex-wrap">
+            <Button variant="primary" onClick={this.handleReset}>Try again</Button>
+            <Button variant="secondary" href={this.props.homeHref ?? '/'}>Go home</Button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}

package/src/organisms/FeatureSplit.jsx

@@ -0,0 +1,82 @@
+/**
+ * FeatureSplit — editorial media-and-text split section: a text column
+ * (kicker / display pull / lede, then a stats strip OR a CTA row) beside a
+ * media column (image/video with an optional gradient veil + caption). Two
+ * columns at/above 901px, single stacked column below. Emits
+ * kol-feature-split* classes (CSS in @kol/theme).
+ *
+ * Presentational — every piece of content arrives as a slot. `meta` and
+ * `ctas` are mutually exclusive by intent (pick one); `ctas` is
+ * conventionally a row of KOL Buttons (composition dependency — nothing is
+ * imported here). The media column renders only when `media` is passed, and
+ * `caption` gates both the gradient veil and the caption element, so omitted
+ * slots emit no empty nodes.
+ *
+ * Kicker / meta labels / caption render exactly as authored — the source's
+ * `text-transform: uppercase` was dropped per KOL casing rules; author those
+ * strings in their final case at the call site.
+ *
+ * @param {ReactNode} kicker          mono eyebrow above the title (accent color)
+ * @param {ReactNode} title           display pull headline; `<em>` renders as the italic accent
+ * @param {ReactNode} body            lede paragraph
+ * @param {{num: ReactNode, label: string}[]} meta  stats strip (mutually exclusive with `ctas`)
+ * @param {ReactNode} ctas            button row (mutually exclusive with `meta`)
+ * @param {ReactNode} media           image/video for the visual column; omit to hide it
+ * @param {ReactNode} caption         mono caption + gradient veil over the media
+ * @param {string}    bgImage         URL for an inline cover background on the section
+ * @param {boolean}   fullBleed       span the full viewport width (100vw breakout)
+ * @param {string}    className       extra classes on the section
+ * @param {string}    innerClassName  extra classes on the grid wrapper
+ * @param {string}    columnClassName extra classes on the text column
+ */
+export default function FeatureSplit({
+  kicker,
+  title,
+  body,
+  meta,
+  ctas,
+  media,
+  caption,
+  bgImage,
+  fullBleed = false,
+  className = '',
+  innerClassName = '',
+  columnClassName = '',
+}) {
+  const sectionStyle = bgImage
+    ? { backgroundImage: `url(${bgImage})`, backgroundSize: 'cover', backgroundPosition: 'center' }
+    : undefined
+  const bleed = fullBleed ? 'w-screen ml-[calc(50%-50vw)]' : ''
+  return (
+    <section
+      className={`kol-feature-split px-5 py-16 md:px-8 md:py-24 lg:px-14 lg:py-32 ${bleed} ${className}`.replace(/\s+/g, ' ').trim()}
+      style={sectionStyle}
+    >
+      <div className={`max-w-[1200px] mx-auto grid grid-cols-1 min-[901px]:grid-cols-2 items-center gap-[clamp(48px,6vw,96px)] ${innerClassName}`.trim()}>
+        <div className={`flex flex-col gap-4 max-w-[640px] ${columnClassName}`.trim()}>
+          {kicker && <span className="kol-feature-split-kicker">{kicker}</span>}
+          {title && <h1 className="kol-feature-split-pull">{title}</h1>}
+          {body && <p className="kol-feature-split-body">{body}</p>}
+          {meta && meta.length > 0 && (
+            <div className="kol-feature-split-meta flex flex-wrap gap-y-7 gap-x-12 pt-4">
+              {meta.map((m) => (
+                <div key={m.label} className="flex flex-col gap-0.5">
+                  <span className="kol-feature-split-meta-num">{m.num}</span>
+                  <span className="kol-feature-split-meta-label">{m.label}</span>
+                </div>
+              ))}
+            </div>
+          )}
+          {ctas && <div className="flex flex-wrap gap-4 pt-2">{ctas}</div>}
+        </div>
+        {media && (
+          <div className="kol-feature-split-visual relative aspect-[4/5] rounded-[4px] overflow-hidden">
+            {media}
+            {caption && <div className="kol-feature-split-visual-veil" aria-hidden="true" />}
+            {caption && <span className="kol-feature-split-visual-caption">{caption}</span>}
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}