@kolkrabbi/kol-component 0.318.0 → 0.319.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.318.0",
+  "version": "0.319.0",
   "description": "The core component library",
   "license": "MIT",
   "type": "module",
@@ -26,6 +26,7 @@
     "embla-carousel-react": "^8.6.0",
     "pdfjs-dist": "^6.3.289",
     "react-syntax-highlighter": "^16.1.1",
+    "@kolkrabbi/kol-growth": "^0.1.0",
     "@kolkrabbi/kol-search": "^0.3.0",
     "@kolkrabbi/kol-markdown": "^0.2.0"
   },

package/src/index.js

@@ -195,6 +195,8 @@ export { default as ErrorBoundary } from './utilities/ErrorBoundary.jsx'
 export { default as FeatureSplit } from './organisms/FeatureSplit.jsx'
 export { default as FeaturedCarousel } from './organisms/FeaturedCarousel.jsx'
 export { default as FeaturesCardSection } from './organisms/FeaturesCardSection.jsx'
+/* the growing line on @kolkrabbi/kol-growth (GrowthLineStage, kol-atlas 2026-10-30) */
+export { default as GrowthLineStage } from './organisms/GrowthLineStage.jsx'
 export { default as SectionHero, default as FullBleedHero } from './organisms/SectionHero.jsx'
 export { default as SectionSplit } from './organisms/SectionSplit.jsx'
 export { default as SectionCards } from './organisms/SectionCards.jsx'

package/src/organisms/GrowthLineStage.jsx

@@ -0,0 +1,126 @@
+import { useEffect, useRef } from 'react'
+import { Growth, densityFrom, mulberry32, orbCanvas, pathCanvas } from '@kolkrabbi/kol-growth'
+import usePrefersReducedMotion from '../hooks/usePrefersReducedMotion.js'
+
+/* THE GROWING LINE AS A STAGE (GrowthLineStage, kol-atlas 2026-10-30) — kol-fxr's HomeStage sim loop on
+ * @kolkrabbi/kol-growth: one closed line grows into `shape`, packing tighter where it is dark. One <canvas> filling its
+ * box at dpr ≤ 2; the sim runs in CSS px, so the spacing reads the same on a phone as on a desk. It grows to its cap and
+ * then stops drawing (no rAF); a resize starts it again. Ink is the canvas's computed `color` (a `text-*` class), a
+ * `data-theme` flip repaints a finished line; the stage clears to transparent, no paper.
+ *
+ * THE POINTER IS A FORCE — a move pushes the line aside, a press blasts a crater it regrows into (engine `poke`);
+ * either wakes a finished line, which settles and sleeps again a second after the pointer leaves. Read on the window,
+ * so the stage can sit behind a page; a press on a control is the control's.
+ *
+ * REDUCED MOTION — the finished line is grown off screen and drawn once: no animation, no pointer force.
+ *
+ * `shape` — 'orb' · an SVG path `d` (centred at `fit` of the box) · `(w, h) => canvas` (dark on light). */
+const ORB_PARAMS = { minGap: 6, maxGap: 24, contrast: 1.4, growth: 8 }
+
+const shapeCanvas = (shape, w, h, fit) => {
+  if (typeof shape === 'function') return shape(w, h)
+  if (shape === 'orb' || !shape) return orbCanvas(w / h)
+  return pathCanvas(shape, w / h, fit)
+}
+
+export default function GrowthLineStage({ shape = 'orb', fit = 0.6, params = ORB_PARAMS, cap, pointer = true, seed, className = '' }) {
+  const ref = useRef(null)
+  const reduced = usePrefersReducedMotion()
+  /* the props are read at (re)start; the effect re-runs when one changes by value */
+  const key = JSON.stringify([typeof shape === 'function' ? null : shape, fit, params, cap, pointer, seed, reduced])
+  const shapeRef = useRef(shape)
+  shapeRef.current = shape
+
+  useEffect(() => {
+    const canvas = ref.current
+    if (!canvas) return undefined
+    let sim = null, raf = 0, w = 0, h = 0
+    let ptr = null, sm = null, idle = 0
+    const force = pointer && !reduced
+    const start = () => {
+      const r = canvas.getBoundingClientRect()
+      w = Math.max(1, r.width); h = Math.max(1, r.height)
+      const src = shapeCanvas(shapeRef.current, w, h, fit)
+      if (!src) return false
+      const dpr = Math.min(2, window.devicePixelRatio || 1)
+      canvas.width = Math.round(w * dpr); canvas.height = Math.round(h * dpr)
+      canvas.getContext('2d').setTransform(dpr, 0, 0, dpr, 0, 0)
+      sim = new Growth({
+        w, h, density: densityFrom(src),
+        rand: seed == null ? Math.random : mulberry32(seed),
+        cap: cap ?? Math.min(14000, Math.round(w * h / 112)),
+      })
+      sim.setParams(params)
+      sim.seed()
+      return true
+    }
+    const paint = () => {
+      const g = canvas.getContext('2d')
+      g.clearRect(0, 0, w, h)
+      sim.draw(g, w, h, { ink: getComputedStyle(canvas).color, width: 1 })
+    }
+    /* grows until the cap, then the loop stops — a finished line costs nothing until the pointer touches it */
+    const frame = () => {
+      const growing = sim.x.length < sim.cap
+      if (ptr) {
+        /* low-passed like the editor's stage pointer — the raw one twitches */
+        sm = sm ? { x: sm.x + (ptr.x - sm.x) * 0.1, y: sm.y + (ptr.y - sm.y) * 0.1 } : { x: ptr.x, y: ptr.y }
+        sim.poke(sm.x, sm.y, ptr.down)
+        idle = 60
+      } else sm = null
+      if (growing || idle > 0) { sim.step(); if (growing) sim.step() }
+      if (idle > 0) idle--
+      paint()
+      raf = growing || idle > 0 ? requestAnimationFrame(frame) : 0
+    }
+    const wake = () => { if (!raf && sim) raf = requestAnimationFrame(frame) }
+    const restart = () => {
+      cancelAnimationFrame(raf); raf = 0
+      if (!start()) return
+      /* reduced motion grows 4× the splits a step: nothing is watched growing, so it reaches the cap sooner */
+      if (reduced) sim.setParams({ growth: sim.growth * 4 })
+      raf = requestAnimationFrame(reduced ? settle : frame)
+    }
+    /* reduced motion: grown to the end off screen, ~12ms of steps a frame so the page never blocks, then drawn once */
+    const settle = () => {
+      const t = performance.now()
+      while (sim.x.length < sim.cap && performance.now() - t < 12) sim.step()
+      if (sim.x.length < sim.cap) { raf = requestAnimationFrame(settle); return }
+      raf = 0
+      paint()
+    }
+    restart()
+    const ro = new ResizeObserver(restart)
+    ro.observe(canvas)
+    const at = (e) => {
+      const r = canvas.getBoundingClientRect()
+      const x = e.clientX - r.left, y = e.clientY - r.top
+      return x >= 0 && y >= 0 && x <= r.width && y <= r.height ? { x, y } : null
+    }
+    const onMove = (e) => { const p = at(e); ptr = p && { ...p, down: ptr?.down ?? false }; if (ptr) wake() }
+    const onDown = (e) => { if (e.target.closest?.('button, a, input, textarea, select, [role="menu"]')) return; const p = at(e); if (p) { ptr = { ...p, down: true }; wake() } }
+    const onUp = () => { if (ptr) ptr = { ...ptr, down: false } }
+    const onLeave = () => { ptr = null }
+    if (force) {
+      window.addEventListener('pointermove', onMove)
+      window.addEventListener('pointerdown', onDown)
+      window.addEventListener('pointerup', onUp)
+      document.addEventListener('pointerleave', onLeave)
+    }
+    /* the ink follows a theme flip on a finished line too */
+    const mo = new MutationObserver(() => { if (!raf && sim) paint() })
+    mo.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] })
+    return () => {
+      cancelAnimationFrame(raf); ro.disconnect(); mo.disconnect()
+      if (force) {
+        window.removeEventListener('pointermove', onMove)
+        window.removeEventListener('pointerdown', onDown)
+        window.removeEventListener('pointerup', onUp)
+        document.removeEventListener('pointerleave', onLeave)
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [key])
+
+  return <canvas ref={ref} aria-hidden="true" className={`block size-full ${className}`.trim()} />
+}