@kolkrabbi/kol-component 0.317.7 → 0.319.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.317.7",
+  "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/atoms/Button.jsx

@@ -12,7 +12,7 @@ import { glyphSize } from '../hooks/glyphLadders.js'
  *
  * @param {Object} props
  * @param {ReactNode} props.children - Button content
- * @param {'accent'|'danger'|'nav'|'tab'|'tab-filled'} props.variant - The intent; the GROUND is `tone`. `tab` is the tab chip (2026-10-02): quiet text at rest, a soft filled chip while `pressed`. `tab-filled` (2026-10-29) shows its chip at rest (oq-04), brighter on hover (oq-08) and brightest selected (oq-16). `primary · secondary · outline · ghost · grey · control` are deprecated aliases of tones (2026-10-01, on the retirement ledger): pass `tone` — `secondary` is `tone="inverted"`, `control` is `tone="ghost"`, the rest keep their name. Visual variant. UNSET (the default) inherits the tone of the nearest `kol-tone-*` wrapper, else renders primary; the five ground variants are aliases of `tone`. `danger` is the destructive treatment (--ui-error fill); `nav` is the chrome rung — transparent, oq-64 ink, one step brighter than `ghost`; `control` is an alias for `ghost` (legacy call-sites).
+ * @param {'accent'|'danger'|'nav'|'tab'|'tab-filled'} props.variant - The intent; the GROUND is `tone`. `tab` is the tab chip (2026-10-02): quiet text at rest, a soft filled chip while `pressed`. `tab-filled` (2026-10-29) shows its chip at rest (oq-04), brighter on hover (oq-08) and brightest selected (oq-16). `float` (2026-10-30, FloatingStyleAndSignInDemos — the floating style B) is the shape only: a 44 control (44×44 icon-only), an 18 radius; the ground stays the `tone`'s. A composed float component (AppFloatNav, AccountForm's box) passes it, a consumer never sets it by hand. `primary · secondary · outline · ghost · grey · control` are deprecated aliases of tones (2026-10-01, on the retirement ledger): pass `tone` — `secondary` is `tone="inverted"`, `control` is `tone="ghost"`, the rest keep their name. Visual variant. UNSET (the default) inherits the tone of the nearest `kol-tone-*` wrapper, else renders primary; the five ground variants are aliases of `tone`. `danger` is the destructive treatment (--ui-error fill); `nav` is the chrome rung — transparent, oq-64 ink, one step brighter than `ghost`; `control` is an alias for `ghost` (legacy call-sites).
  * @param {'xs'|'sm'|'md'|'lg'} props.size - Button size (default: 'md'); xs is the panel rung (ControlsXsRung, 2026-09-01) — kol-mono-8 in a 22px shell (20 icon-only), opt-in by prop
  * @param {string} props.iconLeft - Icon name to display on the left
  * @param {string} props.iconRight - Icon name to display on the right
@@ -93,7 +93,7 @@ const Button = ({
     warned.add(variant)
     console.warn(`Button: variant="${variant}" is deprecated — use tone="${VARIANT_TONE[variant]}"`)
   }
-  const KNOWN = ['primary', 'secondary', 'accent', 'outline', 'ghost', 'nav', 'tab', 'tab-filled', 'danger', 'grey']
+  const KNOWN = ['primary', 'secondary', 'accent', 'outline', 'ghost', 'nav', 'tab', 'tab-filled', 'danger', 'grey', 'float']
   const known = !resolvedVariant || KNOWN.includes(resolvedVariant)
   if (!known && import.meta.env.DEV) console.warn(`Button: unknown variant "${resolvedVariant}" — rendering the inherited tone (primary)`)
   const variantClass = resolvedVariant && known ? `kol-btn-${resolvedVariant}` : ''

package/src/atoms/Input.jsx

@@ -11,6 +11,8 @@ import { glyphSize } from '../hooks/glyphLadders.js'
  *   variant="outline"          — bordered, transparent bg — THE secondary
  *                                treatment (2026-07-08 chrome law: one
  *                                secondary, always subordinate to filled)
+ *   variant="float"            — the floating style B (2026-10-30): 44 tall, an 18 radius, on the page's ground
+ *                                (surface-primary) inside a float box; AccountForm's box passes it
  *   tone="inverse"             — the dark chip (`fg-ab-24`) for a washed plane
  *                                (ControlToneInverse, 2026-08-27); same prop on ViewToggle · Dropdown
  *   size="xs"                  — the panel rung (ControlsXsRung, 2026-09-01):

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/molecules/TabsRow.jsx

@@ -4,6 +4,7 @@ import CloseButton from '../atoms/CloseButton.jsx'
 import Button from '../atoms/Button.jsx'
 import { Icon } from '@kolkrabbi/kol-icons'
 import { RAIL_ROW } from '../hooks/railRow.js'
+import { Tooltip } from '../utilities/Popover.jsx'
 
 /* taxonomy-ok: nests kol-icons's Icon */
 
@@ -59,7 +60,8 @@ import { RAIL_ROW } from '../hooks/railRow.js'
  *                                 that component shoudl probablyget its own variant"*): the pill on a DESK — shown from md up, hidden
  *                                 below (the phone has its own nav), placed at the content's bottom-left, 64 in from the rail's edge
  *                                 (`--kol-shell-rail-width`) and 64 up, not centred
- * @param {boolean} [shadow=false]  a drop shadow — for a pill that floats over content (the transport), not the nav
+ * @param {boolean} [shadow=false]  the KOL float shadow (`--kol-shadow-float`) — for a pill that floats over content (the transport,
+ *                                 a nav over a clashing canvas). Every pill slot names itself on hover in the KOL `Tooltip`
  * @param {'fill'|'circle'} [active='fill']  the lit slot: `fill` its whole 56 slot (today), `circle` a 44×44 1:1 circle
  * @param {boolean} [foldable=false]  a sideways swipe (> 40px) folds the pill into a 28×72 edge tab; a tap restores it
  * @param {boolean} [folded] · {Function} [onFoldChange]  the folded state, controlled (else the pill holds it)
@@ -207,7 +209,8 @@ function StackedTabs({ tabs, value, onChange, placement, shape = 'bar', collapse
         background: 'var(--kol-surface-secondary)',
         /* without the hairline the 1px it took stays, transparent, so the slots never move */
         border: `1px solid ${border ? 'var(--kol-oq-08)' : 'transparent'}`,
-        boxShadow: shadow ? '0 8px 40px rgba(0, 0, 0, 0.45)' : undefined,
+        /* the KOL float shadow (kol-theme `--kol-shadow-float`, FloatingStyleAndSignInDemos 2026-10-30) — was a local 40px blur */
+        boxShadow: shadow ? 'var(--kol-shadow-float)' : undefined,
         transition: `width ${COLLAPSE_MS}ms ease`,
         ...swipeProps.style,
       } : phone ? {
@@ -224,7 +227,9 @@ function StackedTabs({ tabs, value, onChange, placement, shape = 'bar', collapse
       {tabs.map((t) => {
         const active = t.selected ?? t.id === value
         const circle = pill && activeShape === 'circle'
-        return (
+        /* THE NAME ON HOVER IS THE KOL TOOLTIP (AppFloatNav, kol-fxr 2026-10-30 — the Round 3 board), on the pill's far side
+         * from its edge; a thumb never hovers, so the phone is unchanged */
+        const slot = (
           <button
             key={t.id}
             type="button"
@@ -246,6 +251,7 @@ function StackedTabs({ tabs, value, onChange, placement, shape = 'bar', collapse
             {!phone && <span className="kol-helper-10 truncate max-w-full px-1">{t.label}</span>}
           </button>
         )
+        return pill ? <Tooltip key={t.id} label={t.label} placement={top ? 'bottom' : 'top'} offset={10} asChild>{slot}</Tooltip> : slot
       })}
       </div>
       {phone && (

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()} />
+}