@kolkrabbi/kol-component 0.320.1 → 0.322.0

package/package.json

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

package/src/index.js

@@ -129,7 +129,8 @@ export { default as ContentItem } from './molecules/ContentItem.jsx'
 export { default as ContentCollection } from './organisms/ContentCollection.jsx'
 export { MenuItem, MenuDropdownItem, MenuDropdownDivider, MenuDropdownNest } from './molecules/MenuItem.jsx'
 export { MenuPopover } from './molecules/MenuPopover.jsx'
-export { ModalProvider, useModal } from './molecules/Modal.jsx'
+export { ModalProvider, useModal, Dialog } from './molecules/Modal.jsx'
+export { default as Combobox } from './molecules/Combobox.jsx'
 export { default as PaletteHarmonyWheel } from './molecules/PaletteHarmonyWheel.jsx'
 export { default as PropertyInput } from './molecules/PropertyInput.jsx'
 export { default as ShapeDropdown } from './molecules/ShapeDropdown.jsx'
@@ -225,7 +226,7 @@ export { RailHeader, RailTabs, RailHint, RailActions, RailFoot, RailNav } from '
 export { LabeledControlSection as RailSection, SettingsRow as RailRow } from './organisms/SettingsPanel.jsx'
 export { default as SectionNewsletter } from './organisms/SectionNewsletter.jsx'
 export { default as NewsletterBand } from './organisms/NewsletterBand.jsx'
-export { default as ColumnBrowser } from './organisms/ColumnBrowser.jsx'
+export { default as ColumnBrowser, ResizeHandle } from './organisms/ColumnBrowser.jsx'
 export { default as KindPreview } from './molecules/KindPreview.jsx'
 /* MediaPlayer — the one player (2026-10-02): `variant` video · audio, `frame` for the Quick Look
  * window. VideoSheet · AudioSheet · AudioPreview · AudioPlayer are its aliases, on the ledger. */

package/src/molecules/Combobox.jsx

@@ -0,0 +1,60 @@
+import { useState } from 'react'
+import SearchInput from './SearchInput.jsx'
+import { MenuDropdownItem } from './MenuItem.jsx'
+import { PopoverPanel, usePopover } from '../utilities/Popover.jsx'
+
+/**
+ * Combobox — A searchable value field: type to filter, pick a row. (MetricDashboardUpstream, kol-website 2026-10-31 —
+ * metric's filter-value picker, plausible.io's.) Built from the parts, never a fork of them: the field is `SearchInput`
+ * (outline, sm) and the list is `Dropdown`'s own panel (`kol-dd-panel` · `kol-dd-div` · `kol-dd-list`, rows
+ * `MenuDropdownItem` at Dropdown's sm row), matched to the field's width and hung 1px under it.
+ *
+ *   <Combobox value={q} onChange={setQ} options={[{ value: '/blog', label: '/blog' }]} placeholder="Select a value" />
+ *
+ * `value` is the field's text; picking a row hands its `value` to `onChange`. Rows match on label or value, capped at 50.
+ */
+
+/* the row Dropdown sets at sm (Dropdown.jsx ROW.sm) */
+const ROW_SM = 'kol-mono-12 px-2 h-[var(--kol-ctl-sm)]'
+
+export default function Combobox({ value, onChange, options = [], placeholder, ariaLabel, className = '' }) {
+  const [open, setOpen] = useState(false)
+  const popover = usePopover({
+    open,
+    onOpenChange: setOpen,
+    placement: 'bottom-start',
+    offset: -1,
+    flip: false,
+    matchReferenceWidth: true,
+    click: false,
+    role: 'listbox',
+  })
+  const q = value.toLowerCase()
+  const shown = options.filter((o) => o.label.toLowerCase().includes(q) || o.value.toLowerCase().includes(q)).slice(0, 50)
+  return (
+    <div ref={popover.refs.setReference} className={`relative ${className}`}>
+      <SearchInput
+        className="w-full"
+        variant="outline"
+        size="sm"
+        value={value}
+        placeholder={placeholder}
+        aria-label={ariaLabel}
+        onFocus={() => setOpen(true)}
+        onChange={(e) => { onChange(e.target?.value ?? e); setOpen(true) }}
+        onClear={() => onChange('')}
+      />
+      <PopoverPanel popover={popover} panel={false} focus={false} className="kol-dd-panel" style={{ '--kol-dd-max-rows': 8, '--kol-dd-row-h': 'var(--kol-ctl-sm)' }}>
+        <div className="kol-dd-div" />
+        <div className="kol-dd-list" role="listbox">
+          {shown.map((o) => (
+            <MenuDropdownItem key={o.value} hover={false} size="sm" rowClass={ROW_SM} onClick={() => { onChange(o.value); setOpen(false) }}>
+              {o.label}
+            </MenuDropdownItem>
+          ))}
+          {!shown.length && <div className={`${ROW_SM} flex items-center text-meta`}>No matches</div>}
+        </div>
+      </PopoverPanel>
+    </div>
+  )
+}

package/src/molecules/MenuItem.jsx

@@ -159,8 +159,10 @@ export function MenuDropdownItem({ onClick, onPointerEnter, onPointerLeave, disa
   )
 }
 
-export function MenuDropdownDivider() {
-  return <div className="border-t border-oq-08 my-1" />
+/* `className` — the rule's colour and spacing, whole (MetricDashboardUpstream, kol-website 2026-10-31): on a filled
+ * panel the default `border-oq-08` vanishes. */
+export function MenuDropdownDivider({ className = 'border-oq-08 my-1' }) {
+  return <div className={`border-t ${className}`} />
 }
 
 /**
@@ -184,11 +186,15 @@ export function MenuDropdownDivider() {
  * lists. A scrolling panel clips its own flyouts, so give it to a panel with no
  * flyouts inside.
  *
+ * `rowClass` (flyout) — the nest row's type, padding, height and fill, whole, as `MenuDropdownItem rowClass`.
+ * `panelClassName` / `panelStyle` (flyout) — the panel's surface and its place beside the row; a `marginLeft` gap
+ * mirrors to `marginRight` when the panel flips (MetricDashboardUpstream, kol-website 2026-10-31).
+ *
  * Either way, a leaf MenuDropdownItem inside still closes the whole menu via the
  * standard data-menu-item bubble; the nest row itself only toggles.
  */
-export function MenuDropdownNest({ prefix, iconLeft, label, disabled, flyout = false, scroll = false, children }) {
-  if (flyout) return <MenuFlyoutNest prefix={prefix} iconLeft={iconLeft} label={label} disabled={disabled} scroll={scroll}>{children}</MenuFlyoutNest>
+export function MenuDropdownNest({ prefix, iconLeft, label, disabled, flyout = false, scroll = false, rowClass, panelClassName, panelStyle, children }) {
+  if (flyout) return <MenuFlyoutNest prefix={prefix} iconLeft={iconLeft} label={label} disabled={disabled} scroll={scroll} rowClass={rowClass} panelClassName={panelClassName} panelStyle={panelStyle}>{children}</MenuFlyoutNest>
   return <MenuAccordionNest prefix={prefix} iconLeft={iconLeft} label={label} disabled={disabled}>{children}</MenuAccordionNest>
 }
 
@@ -233,7 +239,7 @@ function MenuAccordionNest({ prefix, iconLeft, label, disabled, children }) {
   )
 }
 
-function MenuFlyoutNest({ prefix, iconLeft, label, disabled, scroll, children }) {
+function MenuFlyoutNest({ prefix, iconLeft, label, disabled, scroll, rowClass, panelClassName, panelStyle, children }) {
   const [open, setOpen] = useState(false)
   const [fit, setFit] = useState({ dy: 0, flip: false })
   const row = useRef(null)
@@ -271,7 +277,7 @@ function MenuFlyoutNest({ prefix, iconLeft, label, disabled, scroll, children })
             requestAnimationFrame(() => panel.current?.querySelector('button:not(:disabled)')?.focus())
           }
         }}
-        className={`${NEST_ROW} ${open ? 'text-emphasis' : 'text-body hover:text-emphasis'}`}
+        className={rowClass ? `kol-menu-btn w-full shrink-0 flex items-center gap-2 text-left disabled:opacity-40 disabled:cursor-not-allowed ${rowClass}` : `${NEST_ROW} ${open ? 'text-emphasis' : 'text-body hover:text-emphasis'}`}
       >
         <NestRowBody prefix={prefix} iconLeft={iconLeft} label={label} />
         <Icon name="chevron-right" size={10} className="text-emphasis shrink-0" />
@@ -281,8 +287,8 @@ function MenuFlyoutNest({ prefix, iconLeft, label, disabled, scroll, children })
         <div
           ref={panel}
           role="menu"
-          className={`absolute ${fit.flip ? 'right-full' : 'left-full'} flex flex-col w-max min-w-[180px] max-w-[320px] py-1 bg-surface-secondary rounded border border-oq-08 shadow-lg z-10 ${scroll ? 'max-h-[60vh] overflow-y-auto' : ''}`}
-          style={{ top: -5 + fit.dy }}
+          className={`absolute ${fit.flip ? 'right-full' : 'left-full'} flex flex-col w-max min-w-[180px] max-w-[320px] z-10 ${panelClassName ?? 'py-1 bg-surface-secondary rounded border border-oq-08 shadow-lg'} ${scroll ? 'max-h-[60vh] overflow-y-auto' : ''}`}
+          style={{ top: -5 + fit.dy, ...(fit.flip && panelStyle?.marginLeft != null ? { ...panelStyle, marginLeft: undefined, marginRight: panelStyle.marginLeft } : panelStyle) }}
         >
           {children}
         </div>

package/src/molecules/Modal.jsx

@@ -278,3 +278,42 @@ export function useModal() {
     },
   }
 }
+
+/**
+ * Dialog — Modal's shell holding any content (MetricDashboardUpstream, kol-website 2026-10-31 — metric's filter and
+ * segment dialogs). The same `.kol-overlay-scrim` + `.kol-modal` surface as the prompts above, with `children` in place
+ * of a prompt. **z 150, not Modal's 1000**, so KOL's portalled floats (z 210+) open ABOVE it — a Dropdown or Combobox
+ * inside a dialog has to show its list (a native `<dialog>` cannot: `showModal()` puts it in the top layer, over every
+ * portal). Esc and a press on the scrim close it; Esc is left to an open float inside first.
+ *
+ *   <Dialog open={open} onClose={() => setOpen(false)} title="Filter by page" width={560}>…</Dialog>
+ */
+export function Dialog({ open, onClose, title, width = 560, children }) {
+  useEffect(() => {
+    if (!open) return undefined
+    const onKey = (e) => { if (e.key === 'Escape' && !document.querySelector('.kol-popover-float')) onClose() }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [open, onClose])
+  if (!open || typeof document === 'undefined') return null
+  return createPortal(
+    <div
+      onMouseDown={onClose}
+      className="kol-overlay-scrim"
+      style={{ position: 'fixed', inset: 0, zIndex: 150, display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+    >
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-label={title}
+        data-dialog
+        onMouseDown={(e) => e.stopPropagation()}
+        className="kol-modal flex flex-col rounded border border-fg-08 max-h-[85vh]"
+        style={{ background: 'var(--kol-surface-primary)', color: 'var(--kol-surface-on-primary)', width: `min(${width}px, calc(100vw - 32px))` }}
+      >
+        {children}
+      </div>
+    </div>,
+    document.body,
+  )
+}

package/src/organisms/ColumnBrowser.jsx

@@ -477,7 +477,7 @@ function Preview({ o, urlOf, kindOf, kindLabel, formatSize, formatDate, renderPr
  * sidenav. the handles are different from the sidenav"*) — a 2.8s chase and a
  * 30px retarget, so the pill tracks the pointer instead of landing and holding
  * on the rail's 90px dwell. */
-function ResizeHandle({ axis, onDrag, onEnd }) {
+export function ResizeHandle({ axis, onDrag, onEnd }) {
   const [dragging, setDragging] = useState(false)
   const start = useRef(null)
   const ref = useRef(null)

package/src/organisms/GrowthLineStage.jsx

@@ -4,104 +4,184 @@ 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.
+ * box at dpr ≤ 2; the sim runs in CSS px, so the spacing reads the same on a phone as on a desk. Ink is the canvas's
+ * computed `color` (a `text-*` class), a `data-theme` flip repaints a sleeping line; the stage clears to transparent.
  *
- * 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 stops. A resting pointer is
- * not a force. THE LINE RESTS (engine `settle`, kol-fxr 2026-10-30): the packed interior cools and stops, so only the
- * growing front and what the pointer touches move; it runs 48px past the edges (engine `bleed`), frozen there. Read on
- * the window,
- * so the stage can sit behind a page; a press on a control is the control's.
+ * THE LINE SETTLES (engine `settle`, GrowthLineIntro 2026-10-31, kol-fxr plan 45): every node carries a heat its motion,
+ * a split, the pointer or a pressing neighbour raise and that fades by itself; the loop steps while the line grows or
+ * anything is warm — two steps a frame while it grows, one while it settles — and goes still without a hard stop. It runs
+ * 48px past the edges (engine `bleed`), frozen there. THE POINTER IS A FORCE, soft: a move pushes the line aside as hard
+ * as it moves (a resting pointer is no force), a press blasts a crater it regrows into. 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.
+ * A RESIZE KEEPS THE LINE — the nodes re-centre by half the size change, the shape is re-sampled at the new aspect, and
+ * a bigger box wakes the line to grow on into it; it never reseeds. A SLOW WAVE (`wave`, default 24 s · 9 px · 640 px
+ * crests) drifts the drawn line every frame, the sim untouched; `wave={false}` lets a settled line sleep (no rAF).
+ *
+ * THE INTRO (`intro`): one line from load to page. It grows on the shape's density (at `fit` 0.5) for 3.8 s, drawn only
+ * through the shape in the emphasis ink; rests 4 s breathing (ink 0.7–1.0 on a 2 s period, growth off after the first
+ * breath); then lets go over 4 s — the density blends shape → orb, `params` take over, every node warms, the stage's ink
+ * fades up as the shape's fades out, and the pointer waits until it ends. `onIntroEnd` fires then.
+ *
+ * REDUCED MOTION — no intro (`onIntroEnd` fires at once), no wave, no pointer force: the finished line is grown off
+ * screen and drawn once.
  *
  * `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 ORB_PARAMS = { minGap: 6, maxGap: 24, contrast: 1.4, growth: 2.5 }
+const WAVE = { ms: 24000, a: 9, l: 640 }
+/* the intro, ms from its first frame: the line fills the shape · it breathes · the shape lets go */
+const INTRO_PARAMS = { minGap: 5, maxGap: 18, contrast: 1.2, growth: 5 }
+const MARK_MS = 3800, REST_MS = 4000, BREATH_MS = 2000, RELEASE_MS = 4000
 
-const shapeCanvas = (shape, w, h, fit) => {
+const shapeCanvas = (shape, w, h, fit, W) => {
   if (typeof shape === 'function') return shape(w, h)
-  if (shape === 'orb' || !shape) return orbCanvas(w / h)
-  return pathCanvas(shape, w / h, fit)
+  if (shape === 'orb' || !shape) return orbCanvas(w / h, W)
+  return pathCanvas(shape, w / h, fit, W)
 }
 
-export default function GrowthLineStage({ shape = 'orb', fit = 0.6, params = ORB_PARAMS, cap, pointer = true, seed, className = '' }) {
+export default function GrowthLineStage({ shape = 'orb', fit, params = ORB_PARAMS, cap, pointer = true, seed, wave = WAVE, intro = false, onIntroEnd, 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 key = JSON.stringify([typeof shape === 'function' ? null : shape, fit, params, cap, pointer, seed, wave, intro, reduced])
   const shapeRef = useRef(shape)
   shapeRef.current = shape
+  const endRef = useRef(onIntroEnd)
+  endRef.current = onIntroEnd
 
   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, full = false
+    const k = fit ?? (intro ? 0.5 : 0.6)
+    const drift = wave && !reduced ? wave : null
+    const capOf = () => cap ?? Math.round(w * h / 90)
+    let sim = null, raf = 0, w = 0, h = 0, dpr = 1, it = null, orbed = false
+    let ptr = null, sm = null
     const force = pointer && !reduced
-    const start = () => {
+    const fitCanvas = () => {
       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)
+      w = Math.max(1, r.width); h = Math.max(1, r.height); 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)),
-      })
-      /* the line runs past the edges and freezes there instead of piling into them, and rests where it is done; one
-       * step a frame keeps 0.2.0's pace now that only the front grows */
-      sim.setParams({ bleed: 48, settle: 120, ...params })
-      sim.seed()
-      full = false
+    }
+    /* the shape as an alpha mask at the canvas's own resolution (dark → opaque), and the layer the line is drawn on
+     * before the mask cuts it */
+    const masks = () => {
+      const src = shapeCanvas(shapeRef.current, w, h, k, canvas.width)
+      const m = document.createElement('canvas'); m.width = canvas.width; m.height = canvas.height
+      const g = m.getContext('2d', { willReadFrequently: true })
+      if (src) g.drawImage(src, 0, 0, m.width, m.height)
+      const img = g.getImageData(0, 0, m.width, m.height), d = img.data
+      for (let i = 0; i < d.length; i += 4) { d[i + 3] = 255 - (0.2126 * d[i] + 0.7152 * d[i + 1] + 0.0722 * d[i + 2]); d[i] = d[i + 1] = d[i + 2] = 0 }
+      g.putImageData(img, 0, 0)
+      it.mask = m
+      it.layer = document.createElement('canvas'); it.layer.width = canvas.width; it.layer.height = canvas.height
+    }
+    const end = () => { it = null; endRef.current?.() }
+    const start = () => {
+      fitCanvas()
+      const src = shapeCanvas(shapeRef.current, w, h, k)
+      if (!src) return false
+      sim = new Growth({ w, h, density: densityFrom(src), rand: seed == null ? Math.random : mulberry32(seed), cap: capOf() })
+      sim.setParams({ bleed: 48, settle: 60, ...(intro && !reduced ? INTRO_PARAMS : params) })
+      if (intro && !reduced) {
+        sim.seed(0.5, 0.5)
+        const probe = document.createElement('span'); probe.className = 'text-emphasis'; canvas.parentElement.append(probe)
+        it = { t0: 0, ink: 1, out: 0, bright: getComputedStyle(probe).color, mark: sim.density, mix: null }
+        probe.remove(); masks()
+      } else {
+        sim.seed()
+        if (intro) endRef.current?.()
+      }
       return true
     }
-    const paint = () => {
-      const g = canvas.getContext('2d')
+    /* the shape lets go: the page's spacing, every node warm, the density blending from the shape to the orb */
+    const release = () => {
+      orbed = true
+      const orb = densityFrom(orbCanvas(w / h))
+      it.orb = orb; it.mix = { cols: orb.cols, rows: orb.rows, data: new Float32Array(orb.data.length) }
+      sim.density = it.mix
+      sim.setParams(params)
+      sim.full = false; sim.heat.fill(1); sim.hot = sim.x.length
+    }
+    const blend = (u) => {
+      const a = it.mark.data, b = it.orb.data, m = it.mix.data
+      /* the mark was sampled at its own grid; read it by position if the orb's differs */
+      if (a.length === m.length) for (let i = 0; i < m.length; i++) m[i] = a[i] + (b[i] - a[i]) * u
+      else for (let i = 0; i < m.length; i++) m[i] = b[i] * u
+    }
+    const paint = (now) => {
+      const g = canvas.getContext('2d'), ink = getComputedStyle(canvas).color
+      const wv = drift && { a: drift.a, k: (2 * Math.PI) / drift.l, p: (2 * Math.PI * now) / drift.ms }
       g.clearRect(0, 0, w, h)
-      sim.draw(g, w, h, { ink: getComputedStyle(canvas).color, width: 1 })
+      if (!it) { sim.draw(g, w, h, { ink, width: 1, wave: wv }); return }
+      const L = it.layer.getContext('2d')
+      L.globalCompositeOperation = 'source-over'; L.setTransform(1, 0, 0, 1, 0, 0); L.clearRect(0, 0, it.layer.width, it.layer.height)
+      L.setTransform(dpr, 0, 0, dpr, 0, 0); sim.draw(L, w, h, { ink: it.bright, width: 1, wave: wv })
+      /* the whole line in the stage's ink once the shape lets go, fading up; the shape's in the emphasis ink, at the breath */
+      if (it.out > 0) { g.globalAlpha = it.out; sim.draw(g, w, h, { ink, width: 1, wave: wv }); g.globalAlpha = 1 }
+      L.setTransform(1, 0, 0, 1, 0, 0); L.globalCompositeOperation = 'destination-in'; L.drawImage(it.mask, 0, 0)
+      g.save(); g.setTransform(1, 0, 0, 1, 0, 0)
+      g.globalAlpha = it.ink * (1 - it.out); g.drawImage(it.layer, 0, 0)
+      g.restore()
     }
-    /* grows until the cap, then the loop stops — a finished line costs nothing until the pointer touches it */
-    const frame = () => {
-      /* FINISHED ONCE: at the cap, merges drop the count back under it — read live, the whole line kept stepping
-       * forever, which was the jitter */
-      if (sim.x.length >= sim.cap) full = true
-      const growing = !full
-      if (ptr) {
-        /* low-passed like the editor's stage pointer — the raw one twitches */
-        const to = 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 }
-        /* a RESTING pointer is not a force — poked every frame, the line under it churned forever */
-        if (ptr.down || !sm || Math.hypot(to.x - sm.x, to.y - sm.y) > 0.3) { sim.poke(to.x, to.y, ptr.down); idle = 60 }
+    /* the line steps while it grows or anything is warm; with a wave it is drawn every frame, without one it sleeps */
+    const frame = (now) => {
+      let steps = !sim.full ? 2 : sim.hot > 0 ? 1 : 0
+      if (it) {
+        if (!it.t0) it.t0 = now
+        const t = now - it.t0
+        if (t < MARK_MS) steps = 4
+        else if (t < MARK_MS + REST_MS) {
+          /* it keeps filling the shape's far corners through the first breath, then holds */
+          if (!it.rest && t > MARK_MS + BREATH_MS) { it.rest = true; sim.setParams({ growth: 0 }) }
+          it.ink = 0.7 + 0.3 * Math.cos((2 * Math.PI * (t - MARK_MS)) / BREATH_MS)
+        } else {
+          if (!it.free) { it.free = true; it.ink = 1; release() }
+          const u = Math.min(1, (t - MARK_MS - REST_MS) / RELEASE_MS)
+          blend(u); it.out = u
+          if (u >= 1) { sim.density = it.orb; end() }
+        }
+      }
+      if (ptr && !it) {
+        /* low-passed — the raw one twitches; 0.35 follows without lag */
+        const to = sm ? { x: sm.x + (ptr.x - sm.x) * 0.35, y: sm.y + (ptr.y - sm.y) * 0.35 } : { x: ptr.x, y: ptr.y }
+        /* the push is the pointer's own speed — a resting pointer is no force, a slow drift a light brush, a sweep a shove */
+        const speed = sm ? Math.hypot(to.x - sm.x, to.y - sm.y) : 0
+        if (ptr.down || speed > 0.3) { sim.poke(to.x, to.y, ptr.down, ptr.down ? 1 : Math.min(1, speed / 6)); steps = Math.max(steps, 1) }
         sm = to
       } else sm = null
-      /* settled stretches rest, so a step moves only the growing front and the pointer's wake */
-      if (growing || idle > 0) 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)
+      for (let i = 0; i < steps; i++) sim.step()
+      paint(now)
+      raf = drift || it || ptr || !sim.full || sim.hot > 0 ? requestAnimationFrame(frame) : 0
     }
+    const wake = () => { if (!raf && sim && !reduced) raf = requestAnimationFrame(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 grow = () => {
       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 }
+      while ((!sim.full || sim.hot > 0) && performance.now() - t < 12) sim.step()
+      if (!sim.full || sim.hot > 0) { raf = requestAnimationFrame(grow); return }
       raf = 0
-      paint()
+      paint(0)
+    }
+    /* A RESIZE KEEPS THE LINE: re-centred by half the size change, the frame and the shape re-sampled, never reseeded */
+    const resize = () => {
+      const r = canvas.getBoundingClientRect()
+      if (!sim || (Math.round(r.width) === Math.round(w) && Math.round(r.height) === Math.round(h))) return
+      const ow = w, oh = h
+      fitCanvas()
+      const dx = (w - ow) / 2, dy = (h - oh) / 2
+      for (let i = 0; i < sim.x.length; i++) { sim.x[i] += dx; sim.y[i] += dy }
+      sim.w = w; sim.h = h
+      sim.setParams({ cap: capOf() })
+      if (it) masks()
+      /* released from the intro, the line's shape is the orb */
+      else { const src = orbed ? orbCanvas(w / h) : shapeCanvas(shapeRef.current, w, h, k); if (src) sim.density = densityFrom(src) }
+      if (w > ow || h > oh) { sim.full = false; sim.heat.fill(0.5); sim.hot = sim.x.length }
+      if (reduced) { cancelAnimationFrame(raf); raf = requestAnimationFrame(grow) } else wake()
     }
-    restart()
-    const ro = new ResizeObserver(restart)
+    if (start()) raf = requestAnimationFrame(reduced ? grow : frame)
+    const ro = new ResizeObserver(resize)
     ro.observe(canvas)
     const at = (e) => {
       const r = canvas.getBoundingClientRect()
@@ -118,8 +198,8 @@ export default function GrowthLineStage({ shape = 'orb', fit = 0.6, params = ORB
       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() })
+    /* the ink follows a theme flip on a sleeping line too */
+    const mo = new MutationObserver(() => { if (!raf && sim) paint(performance.now()) })
     mo.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] })
     return () => {
       cancelAnimationFrame(raf); ro.disconnect(); mo.disconnect()