@seekalfred/primitives 0.5.1 → 0.7.1

package/dist/ridgeline/ridgeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ridgeline.js","names":[],"sources":["../../src/ridgeline/ridgeline.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  forwardRef,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type CSSProperties,\n  type KeyboardEvent,\n  type PointerEvent,\n} from \"react\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { mergeRefs } from \"../lib/merge-refs.js\";\nimport { prefersReducedMotion, useIsomorphicLayoutEffect } from \"../lib/motion.js\";\nimport { REVEAL, SWELL, tween } from \"../lib/spring-tween.js\";\n\n/**\n * Ridgeline: compare the shape of many distributions at once, such as daily\n * temperatures by month or response times by region. Each series is one ridge, a\n * smoothed density of its raw values, drawn top to bottom and overlapping the row\n * behind it; the ridges share one value axis.\n *\n * The ridges roll in from the top row down once the chart is in view. New data\n * morphs every ridge from the shape on screen, and the axis follows. Hovering,\n * touching or the arrow keys lift one ridge above its neighbours with its middle\n * half shaded and its median marked, step the others back, and show a tooltip with\n * the median, the middle half and the range. Moving along the values shows how\n * much of the series sits at or below that value. Each ridge is shaded by its\n * median, from a light tint to the full first series colour, with the scale\n * under the axis.\n *\n * Plain SVG written straight to the DOM by one small spring tween.\n */\nexport interface RidgelineSeries {\n  /** Stable identity. A ridge that survives a data change morphs into its new shape. */\n  id: string;\n  label: string;\n  /** Raw observations. The ridge is a smoothed density of these values. */\n  values: number[];\n}\n\nexport interface RidgelineProps {\n  /** One ridge per series, drawn top to bottom. */\n  series: RidgelineSeries[];\n  /** What is measured, such as \"Daily highs in Zurich\". Names the chart for assistive technology. */\n  label: string;\n  /** Unit after each value, such as \"°C\". */\n  unit?: string;\n  formatValue?: (value: number) => string;\n  /** Value range of the axis. Defaults to the data with a little room on each side. */\n  domain?: [number, number];\n  /** How far a ridge may rise into the rows above, in row heights. @default 2.4 */\n  overlap?: number;\n  /** Height of one row in pixels. @default 30 */\n  rowHeight?: number;\n  /** Smoothing in value units. Defaults to Silverman's rule per series. */\n  bandwidth?: number;\n  /** Shades each ridge by its median, from a light tint to the full first series colour, and shows the scale under the axis. @default true */\n  tint?: boolean;\n  /** Controlled id of the lifted ridge. */\n  active?: string | null;\n  defaultActive?: string | null;\n  onActiveChange?: (id: string | null) => void;\n  /** @default \"No data yet\" */\n  emptyLabel?: string;\n  /** Extra classes for the root. Merged last. */\n  className?: string;\n}\n\ntype Stats = { q1: number; median: number; q3: number; min: number; max: number; n: number; sorted: number[] };\ntype Shape = { xs: number[]; ys: number[]; row: number; q1: number; median: number; q3: number };\n\n/** Points along each ridge, the axis strip, the gap between the tooltip and what it describes, and how far the lifted ridge rises, in pixels. */\nconst SAMPLES = 96;\nconst AXIS = 28;\nconst TIP = 14;\nconst LIFT = 6;\nconst GROUPED = new Intl.NumberFormat(\"en-US\", { maximumFractionDigits: 1 });\nconst PERCENT = new Intl.NumberFormat(\"en-US\", { style: \"percent\", maximumFractionDigits: 0 });\nconst clamp = (value: number, low: number, high: number) => Math.min(high, Math.max(low, value));\nconst mix = (a: number, b: number, t: number) => a + (b - a) * t;\n\nfunction quantile(sorted: number[], q: number) {\n  if (!sorted.length) return 0;\n  const at = (sorted.length - 1) * q;\n  const low = Math.floor(at);\n  const high = Math.ceil(at);\n  return sorted[low]! + (sorted[high]! - sorted[low]!) * (at - low);\n}\nfunction statsOf(values: number[]): Stats {\n  const sorted = values.filter(Number.isFinite).sort((a, b) => a - b);\n  return {\n    sorted,\n    n: sorted.length,\n    min: sorted[0] ?? 0,\n    max: sorted[sorted.length - 1] ?? 0,\n    q1: quantile(sorted, 0.25),\n    median: quantile(sorted, 0.5),\n    q3: quantile(sorted, 0.75),\n  };\n}\n/** Silverman's rule of thumb for the smoothing of a Gaussian kernel. */\nfunction silverman(stats: Stats) {\n  if (stats.n < 2) return 1;\n  const mean = stats.sorted.reduce((sum, value) => sum + value, 0) / stats.n;\n  const sd = Math.sqrt(stats.sorted.reduce((sum, value) => sum + (value - mean) ** 2, 0) / (stats.n - 1));\n  const spread = Math.min(sd, (stats.q3 - stats.q1) / 1.34 || sd);\n  return Math.max(1e-6, 0.9 * (spread || 1) * Math.pow(stats.n, -0.2));\n}\nfunction niceStep(span: number, count: number) {\n  const raw = span / Math.max(1, count) || 1;\n  const power = Math.pow(10, Math.floor(Math.log10(raw)));\n  const unit = raw / power;\n  return (unit >= 5 ? 5 : unit >= 2 ? 2 : 1) * power;\n}\n/** Samples a Gaussian kernel density across the domain. */\nfunction density(stats: Stats, lo: number, hi: number, bandwidth: number) {\n  const xs: number[] = [];\n  const ys: number[] = [];\n  const norm = 1 / (Math.max(1, stats.n) * bandwidth * Math.sqrt(2 * Math.PI));\n  for (let i = 0; i < SAMPLES; i++) {\n    const x = lo + ((hi - lo) * i) / (SAMPLES - 1);\n    let sum = 0;\n    for (const value of stats.sorted) {\n      const u = (x - value) / bandwidth;\n      if (u > -5 && u < 5) sum += Math.exp(-0.5 * u * u);\n    }\n    xs.push(x);\n    ys.push(sum * norm);\n  }\n  return { xs, ys };\n}\nconst heightAt = (shape: Shape, x: number) => {\n  const { xs, ys } = shape;\n  if (x <= xs[0]! || x >= xs[xs.length - 1]!) return 0;\n  let i = 1;\n  while (i < xs.length - 1 && xs[i]! < x) i++;\n  const t = (x - xs[i - 1]!) / (xs[i]! - xs[i - 1]! || 1);\n  return mix(ys[i - 1]!, ys[i]!, t);\n};\n/** Ridge tone: one hue, the first series colour, from a light tint (low median) to full strength (high median), so the scale never passes through a muddy middle. */\nconst toneOf = (t: number) => `color-mix(in oklab, var(--color-chart-1) ${Math.round(38 + clamp(t, 0, 1) * 62)}%, var(--color-surface))`;\n\nexport const Ridgeline = forwardRef<HTMLElement, RidgelineProps>(function Ridgeline(\n  {\n    series,\n    label,\n    unit = \"\",\n    formatValue,\n    domain,\n    overlap = 2.4,\n    rowHeight = 30,\n    bandwidth,\n    tint = true,\n    active,\n    defaultActive = null,\n    onActiveChange,\n    emptyLabel = \"No data yet\",\n    className,\n  },\n  ref,\n) {\n  const figure = useRef<HTMLElement | null>(null);\n  const refs = useMemo(() => mergeRefs(ref, figure), [ref]);\n  const plot = useRef<HTMLDivElement>(null);\n  const tip = useRef<HTMLDivElement>(null);\n  const cross = useRef<HTMLDivElement>(null);\n  // A true minus sign keeps negative values tight and lined up with the tabular digits.\n  const format = (value: number) => (formatValue ? formatValue(value) : `${GROUPED.format(value).replace(\"-\", \"−\")}${unit}`);\n\n  const [width, setWidth] = useState(0);\n  useIsomorphicLayoutEffect(() => {\n    const node = plot.current;\n    if (!node || typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(() => setWidth(node.clientWidth));\n    observer.observe(node);\n    setWidth(node.clientWidth);\n    return () => observer.disconnect();\n  }, []);\n\n  // Targets: one density per series on a shared domain, scaled so the tallest peak of all rises `overlap` rows.\n  const signature = JSON.stringify([series, domain, bandwidth]);\n  const model = useMemo(() => {\n    const stats = series.map((entry) => statsOf(entry.values));\n    const widths = stats.map((entry) => bandwidth ?? silverman(entry));\n    const filled = stats.map((entry, index) => ({ entry, room: 2.5 * widths[index]! })).filter(({ entry }) => entry.n);\n    let lo = domain?.[0] ?? Math.min(...filled.map(({ entry, room }) => entry.min - room));\n    let hi = domain?.[1] ?? Math.max(...filled.map(({ entry, room }) => entry.max + room));\n    if (!Number.isFinite(lo) || !Number.isFinite(hi) || lo === hi) {\n      lo = 0;\n      hi = 1;\n    }\n    if (!domain) {\n      const step = niceStep(hi - lo, 5);\n      lo = Math.floor(lo / step) * step;\n      hi = Math.ceil(hi / step) * step;\n    }\n    const curves = stats.map((entry, index) =>\n      entry.n\n        ? density(entry, lo, hi, widths[index]!)\n        : { xs: Array.from({ length: SAMPLES }, (_, i) => lo + ((hi - lo) * i) / (SAMPLES - 1)), ys: new Array<number>(SAMPLES).fill(0) },\n    );\n    const peak = Math.max(1e-9, ...curves.flatMap((curve) => curve.ys));\n    const shapes = new Map<string, Shape>(\n      series.map((entry, index) => {\n        const curve = curves[index]!;\n        const stat = stats[index]!;\n        return [entry.id, { xs: curve.xs, ys: curve.ys.map((y) => y / peak), row: index, q1: stat.q1, median: stat.median, q3: stat.q3 }];\n      }),\n    );\n    return { stats: new Map(series.map((entry, index) => [entry.id, stats[index]!])), shapes, lo, hi };\n    // The signature stands for the series, the domain and the bandwidth.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [signature]);\n\n  const [ownActive, setOwnActive] = useState<string | null>(defaultActive);\n  const current = active !== undefined ? active : ownActive;\n  const setCurrent = (id: string | null) => {\n    if (active === undefined) setOwnActive(id);\n    if (id !== current) onActiveChange?.(id);\n  };\n  const [cursor, setCursor] = useState<{ value: number; pointerY: number | null } | null>(null);\n\n  const narrow = width > 0 && width < 420;\n  const gutter = narrow ? 36 : 52;\n  const top = Math.ceil((overlap - 1) * rowHeight) + LIFT + 8;\n  const height = top + series.length * rowHeight + AXIS;\n  const plotWidth = Math.max(40, width - gutter - 4);\n  const baselineOf = (row: number) => top + (row + 1) * rowHeight;\n\n  // Drawn geometry lives outside React; a spring interpolates it from what is on screen to the new targets.\n  const drawn = useRef({ shapes: new Map<string, Shape>(), lo: 0, hi: 1 });\n  const geometry = useRef({ gutter, plotWidth, rowHeight, overlap, top, current });\n  const xOf = (value: number) => {\n    const d = drawn.current;\n    return gutter + ((value - d.lo) / (d.hi - d.lo || 1)) * plotWidth;\n  };\n\n  const paint = () => {\n    const root = plot.current;\n    if (!root) return;\n    const d = drawn.current;\n    const g = geometry.current;\n    const sx = (value: number) => g.gutter + ((value - d.lo) / (d.hi - d.lo || 1)) * g.plotWidth;\n    const lift = g.rowHeight * g.overlap;\n    /** A ridge as a path; `from` and `to` cut it to a stretch of the axis (the middle half). */\n    const curvePath = (shape: Shape, closed: boolean, from = -Infinity, to = Infinity) => {\n      const base = g.top + (shape.row + 1) * g.rowHeight;\n      const points: string[] = [];\n      const push = (x: number, y: number) => points.push(`${sx(x).toFixed(2)},${(base - y * lift).toFixed(2)}`);\n      if (from > -Infinity) push(from, heightAt(shape, from));\n      shape.xs.forEach((x, i) => {\n        if (x > from && x < to) push(x, shape.ys[i]!);\n      });\n      if (to < Infinity) push(to, heightAt(shape, to));\n      if (!points.length) return \"\";\n      const first = from > -Infinity ? from : shape.xs[0]!;\n      const last = to < Infinity ? to : shape.xs[shape.xs.length - 1]!;\n      return closed ? `M${sx(first).toFixed(2)},${base}L${points.join(\"L\")}L${sx(last).toFixed(2)},${base}Z` : `M${points.join(\"L\")}`;\n    };\n    const mark = (node: Element | null, shape: Shape) => {\n      if (!node) return;\n      const x = sx(shape.median).toFixed(2);\n      const base = g.top + (shape.row + 1) * g.rowHeight;\n      node.setAttribute(\"x1\", x);\n      node.setAttribute(\"x2\", x);\n      node.setAttribute(\"y1\", String(base));\n      node.setAttribute(\"y2\", (base - heightAt(shape, shape.median) * lift).toFixed(2));\n    };\n    for (const [id, shape] of d.shapes) {\n      const group = root.querySelector(`[data-ridge=\"${CSS.escape(id)}\"]`);\n      group?.querySelector(\"[data-part=fill]\")?.setAttribute(\"d\", curvePath(shape, true));\n      group?.querySelector(\"[data-part=line]\")?.setAttribute(\"d\", curvePath(shape, false));\n      mark(group?.querySelector(\"[data-part=median]\") ?? null, shape);\n    }\n    const shape = g.current ? d.shapes.get(g.current) : undefined;\n    if (shape) {\n      const lens = root.querySelector(\"[data-part=lens]\");\n      lens?.querySelector(\"[data-part=lens-fill]\")?.setAttribute(\"d\", curvePath(shape, true));\n      lens?.querySelector(\"[data-part=lens-line]\")?.setAttribute(\"d\", curvePath(shape, false));\n      lens?.querySelector(\"[data-part=lens-band]\")?.setAttribute(\"d\", curvePath(shape, true, shape.q1, shape.q3));\n      mark(lens?.querySelector(\"[data-part=lens-median]\") ?? null, shape);\n    }\n    for (const node of root.querySelectorAll<HTMLElement>(\"[data-tick]\")) {\n      node.style.transform = `translate3d(${sx(Number(node.dataset.tick)).toFixed(2)}px, 0, 0)`;\n    }\n  };\n  const paintRef = useRef(paint);\n  useIsomorphicLayoutEffect(() => {\n    geometry.current = { gutter, plotWidth, rowHeight, overlap, top, current };\n    paintRef.current = paint;\n    paint();\n  });\n\n  // The ridges roll in once a third of the chart is in view.\n  const [shown, setShown] = useState(false);\n  useEffect(() => {\n    const node = figure.current;\n    if (!node || prefersReducedMotion() || typeof IntersectionObserver === \"undefined\") {\n      setShown(true);\n      return;\n    }\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        if (!entry?.isIntersecting) return;\n        observer.disconnect();\n        setShown(true);\n      },\n      { threshold: 0.3 },\n    );\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, []);\n\n  // New data morphs every ridge, and the axis, from what is on screen; the first time, ridges grow from flat, a beat apart from the top row down.\n  useEffect(() => {\n    if (!shown) return;\n    const d = drawn.current;\n    const first = d.shapes.size === 0;\n    const from = new Map<string, Shape>();\n    for (const [id, target] of model.shapes) {\n      const now = d.shapes.get(id);\n      from.set(id, now ? { ...now, xs: [...now.xs], ys: [...now.ys] } : { ...target, ys: target.ys.map(() => 0), q1: target.median, q3: target.median });\n    }\n    const fromLo = first ? model.lo : d.lo;\n    const fromHi = first ? model.hi : d.hi;\n    const settle = () => {\n      d.shapes = new Map([...model.shapes].map(([id, shape]) => [id, { ...shape }]));\n      d.lo = model.lo;\n      d.hi = model.hi;\n      paintRef.current();\n    };\n    d.shapes = new Map([...from].map(([id, shape]) => [id, { ...shape, xs: [...shape.xs], ys: [...shape.ys] }]));\n    return tween(\n      first ? SWELL : REVEAL,\n      (t) => {\n        d.lo = mix(fromLo, model.lo, t);\n        d.hi = mix(fromHi, model.hi, t);\n        for (const [id, to] of model.shapes) {\n          const f = from.get(id)!;\n          const out = d.shapes.get(id)!;\n          const local = first ? clamp((t - to.row * 0.025) / (1 - Math.min(0.5, model.shapes.size * 0.025)), 0, 1) : t;\n          for (let i = 0; i < SAMPLES; i++) {\n            out.xs[i] = mix(f.xs[i]!, to.xs[i]!, local);\n            out.ys[i] = mix(f.ys[i]!, to.ys[i]!, local);\n          }\n          out.row = mix(f.row, to.row, local);\n          out.q1 = mix(f.q1, to.q1, local);\n          out.median = mix(f.median, to.median, local);\n          out.q3 = mix(f.q3, to.q3, local);\n        }\n        paintRef.current();\n      },\n      settle,\n    );\n  }, [shown, model]);\n\n  // Axis ticks for the target domain; their positions follow the drawn domain every frame.\n  const tickCount = Math.max(2, Math.floor(plotWidth / 72));\n  const step = niceStep(model.hi - model.lo, tickCount);\n  const ticks: number[] = [];\n  for (let value = Math.ceil(model.lo / step) * step; value <= model.hi + 1e-9; value += step) ticks.push(Math.round(value * 1e6) / 1e6 || 0);\n\n  const activeStats = current ? model.stats.get(current) : undefined;\n  const activeSeries = current ? series.find((entry) => entry.id === current) : undefined;\n  const reading =\n    cursor && activeStats\n      ? { value: cursor.value, below: activeStats.n ? activeStats.sorted.filter((value) => value <= cursor.value).length / activeStats.n : 0 }\n      : null;\n  // The tooltip keeps its last content while it fades out, so it never collapses to an empty box on leave.\n  const [held, setHeld] = useState<{ id: string; value: number | null } | null>(null);\n  if (current && (held?.id !== current || held.value !== (reading?.value ?? null))) setHeld({ id: current, value: reading?.value ?? null });\n  const tipSeries = held ? series.find((entry) => entry.id === held.id) : undefined;\n  const tipStats = held ? model.stats.get(held.id) : undefined;\n  const tipBelow = held && held.value !== null && tipStats?.n ? tipStats.sorted.filter((value) => value <= held.value!).length / tipStats.n : 0;\n\n  // The tooltip trails the pointer or the keyboard cursor and stays inside the chart; it glides between ridges once showing.\n  const shownBefore = useRef(false);\n  useIsomorphicLayoutEffect(() => {\n    const bubble = tip.current;\n    const shape = current ? model.shapes.get(current) : undefined;\n    if (cross.current) cross.current.style.transform = `translate3d(${reading ? xOf(reading.value).toFixed(2) : 0}px, 0, 0)`;\n    if (!bubble || !shape || !width) {\n      shownBefore.current = false;\n      return;\n    }\n    const tw = bubble.offsetWidth;\n    const th = bubble.offsetHeight;\n    const ax = reading ? xOf(reading.value) : xOf(shape.median);\n    const ay = cursor?.pointerY ?? baselineOf(shape.row) - heightAt(shape, shape.median) * rowHeight * overlap - LIFT;\n    let left = ax + TIP;\n    if (left + tw > width) left = ax - TIP - tw;\n    let y = ay - th - TIP;\n    if (y < 0) y = ay + TIP;\n    if (!shownBefore.current) bubble.style.transition = \"none\";\n    bubble.style.translate = `${clamp(left, 0, Math.max(0, width - tw))}px ${clamp(y, 0, Math.max(0, height - th))}px`;\n    if (!shownBefore.current) {\n      void bubble.offsetWidth;\n      bubble.style.transition = \"\";\n    }\n    shownBefore.current = true;\n  });\n\n  const valueAt = (x: number) => {\n    const d = drawn.current;\n    return d.lo + clamp((x - gutter) / plotWidth, 0, 1) * (d.hi - d.lo);\n  };\n  /** The ridge under the pointer: the front-most one whose outline holds it, else the row it is in. */\n  const pick = (x: number, y: number) => {\n    const value = valueAt(x);\n    const lift = rowHeight * overlap;\n    let best: Shape | null = null;\n    let bestId: string | null = null;\n    for (const [id, shape] of drawn.current.shapes) {\n      const base = baselineOf(shape.row);\n      const h = heightAt(shape, value) * lift;\n      if (y <= base + 2 && y >= base - h - 4 && (!best || shape.row > best.row)) {\n        best = shape;\n        bestId = id;\n      }\n    }\n    if (!bestId) {\n      const row = clamp(Math.floor((y - top) / rowHeight), 0, series.length - 1);\n      bestId = series[row]?.id ?? null;\n    }\n    return { id: bestId, value };\n  };\n  const onPointerMove = (event: PointerEvent<HTMLDivElement>) => {\n    const rect = event.currentTarget.getBoundingClientRect();\n    const x = event.clientX - rect.left;\n    const y = event.clientY - rect.top;\n    if (x < gutter - 8 || y > height - AXIS + 4) {\n      if (event.pointerType === \"mouse\") {\n        setCurrent(null);\n        setCursor(null);\n      }\n      return;\n    }\n    const hit = pick(x, y);\n    setCurrent(hit.id);\n    setCursor({ value: hit.value, pointerY: y });\n  };\n  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const at = current ? series.findIndex((entry) => entry.id === current) : -1;\n    const choose = (index: number) => {\n      event.preventDefault();\n      const next = series[clamp(index, 0, series.length - 1)];\n      if (!next) return;\n      setCurrent(next.id);\n      setCursor({ value: cursor?.value ?? model.stats.get(next.id)?.median ?? model.lo, pointerY: null });\n    };\n    const nudge = (direction: number) => {\n      event.preventDefault();\n      if (!current) {\n        choose(0);\n        return;\n      }\n      const base = cursor?.value ?? model.stats.get(current)?.median ?? model.lo;\n      setCursor({ value: clamp((Math.round(base / step) + direction) * step, model.lo, model.hi), pointerY: null });\n    };\n    if (event.key === \"ArrowDown\") choose(at + 1);\n    else if (event.key === \"ArrowUp\") choose(at < 0 ? 0 : at - 1);\n    else if (event.key === \"Home\") choose(0);\n    else if (event.key === \"End\") choose(series.length - 1);\n    else if (event.key === \"ArrowRight\") nudge(1);\n    else if (event.key === \"ArrowLeft\") nudge(-1);\n    else if (event.key === \"Escape\" && current) {\n      event.preventDefault();\n      setCurrent(null);\n      setCursor(null);\n    }\n  };\n\n  const empty = !series.length || series.every((entry) => !entry.values.length);\n  const ridgeColor = (value: number) => (tint ? toneOf((value - model.lo) / (model.hi - model.lo || 1)) : \"var(--color-chart-1)\");\n  const describe = (entry: RidgelineSeries) => {\n    const s = model.stats.get(entry.id)!;\n    return `${entry.label}: median ${format(s.median)}, middle half ${format(s.q1)} to ${format(s.q3)}, range ${format(s.min)} to ${format(s.max)}, ${s.n} values`;\n  };\n  const spoken = activeSeries ? `${describe(activeSeries)}${reading ? `. ${PERCENT.format(reading.below)} at or below ${format(reading.value)}` : \"\"}` : \"\";\n  const summary = empty ? `${label}. ${emptyLabel}.` : `${label}. ${series.map(describe).join(\". \")}.`;\n\n  return (\n    <figure ref={refs} data-slot=\"ridgeline\" aria-label={label} className={cn(\"ridgeline box-border font-sans text-foreground\", className)}>\n      <div\n        ref={plot}\n        data-slot=\"ridgeline-plot\"\n        data-active={current ? \"\" : undefined}\n        data-scrubbing={current ? \"\" : undefined}\n        data-cursor={reading ? \"\" : undefined}\n        role={empty ? undefined : \"slider\"}\n        tabIndex={empty ? undefined : 0}\n        aria-label={empty ? undefined : `${label}, choose a ridge`}\n        aria-orientation={empty ? undefined : \"vertical\"}\n        aria-valuemin={empty ? undefined : 1}\n        aria-valuemax={empty ? undefined : series.length}\n        aria-valuenow={empty ? undefined : (activeSeries ? series.indexOf(activeSeries) : 0) + 1}\n        aria-valuetext={empty ? undefined : spoken || summary}\n        className=\"ridgeline-plot\"\n        style={{ height }}\n        onPointerMove={onPointerMove}\n        onPointerDown={onPointerMove}\n        onPointerLeave={(event) => {\n          if (event.pointerType === \"mouse\") {\n            setCurrent(null);\n            setCursor(null);\n          }\n        }}\n        onKeyDown={onKeyDown}\n        onBlur={() => {\n          setCurrent(null);\n          setCursor(null);\n        }}\n      >\n        <div aria-hidden=\"true\" className=\"pointer-events-none absolute inset-x-0 top-0\" style={{ height: height - AXIS + 22 }}>\n          {ticks.map((value) => (\n            <div key={value} data-tick={value} className=\"ridgeline-tick motion-safe:animate-fade-in\" style={{ top: top - rowHeight * 0.5 }}>\n              <span className=\"ridgeline-tick-label\">{format(value)}</span>\n            </div>\n          ))}\n        </div>\n        <div ref={cross} aria-hidden=\"true\" className=\"ridgeline-crosshair\" style={{ top: top - rowHeight * 0.5, height: height - AXIS - top + rowHeight * 0.5 }} />\n        <svg width={width || undefined} height={height} viewBox={`0 0 ${Math.max(1, width)} ${height}`} aria-hidden=\"true\" focusable=\"false\" className=\"absolute inset-0 block overflow-visible\">\n          {series.map((entry) => (\n            <g\n              key={entry.id}\n              data-ridge={entry.id}\n              data-dim={(current !== null && current !== entry.id) || undefined}\n              data-lifted={current === entry.id || undefined}\n              className=\"ridgeline-ridge\"\n              style={{ \"--ridge\": ridgeColor(model.stats.get(entry.id)?.median ?? model.lo) } as CSSProperties}\n            >\n              <path data-part=\"fill\" className=\"ridgeline-fill\" />\n              <line data-part=\"median\" className=\"ridgeline-median\" />\n              <path data-part=\"line\" className=\"ridgeline-line\" />\n            </g>\n          ))}\n          <g\n            data-part=\"lens\"\n            data-on={current ? \"\" : undefined}\n            className=\"ridgeline-lens\"\n            style={tipStats ? ({ \"--ridge\": ridgeColor(tipStats.median) } as CSSProperties) : undefined}\n          >\n            <path data-part=\"lens-fill\" className=\"ridgeline-lens-fill\" />\n            <path data-part=\"lens-band\" className=\"ridgeline-lens-band\" />\n            <line data-part=\"lens-median\" className=\"ridgeline-lens-median\" />\n            <path data-part=\"lens-line\" className=\"ridgeline-lens-line\" />\n          </g>\n        </svg>\n        <div aria-hidden=\"true\" className=\"pointer-events-none absolute inset-0\">\n          {series.map((entry, index) => (\n            <span key={entry.id} data-active={current === entry.id || undefined} className=\"ridgeline-row-label\" style={{ top: baselineOf(index) - 18, width: gutter - 10 }}>\n              {entry.label}\n            </span>\n          ))}\n        </div>\n        {empty ? <p className=\"pointer-events-none absolute inset-0 m-0 grid place-items-center text-sm text-muted-foreground\">{emptyLabel}</p> : null}\n        <div ref={tip} aria-hidden=\"true\" data-slot=\"ridgeline-tooltip\" className=\"line-chart-tooltip\">\n          {tipSeries && tipStats ? (\n            <>\n              <p className=\"m-0 mb-0.5 text-xs text-text-secondary\">{tipSeries.label}</p>\n              <p className=\"ridgeline-tip-row text-sm font-medium\">\n                <span className=\"text-xs font-normal text-muted-foreground\">Median</span>\n                <span>{format(tipStats.median)}</span>\n              </p>\n              <p className=\"ridgeline-tip-row text-xs\">\n                <span className=\"text-muted-foreground\">Middle half</span>\n                <span>\n                  {format(tipStats.q1)} to {format(tipStats.q3)}\n                </span>\n              </p>\n              <p className=\"ridgeline-tip-row text-xs\">\n                <span className=\"text-muted-foreground\">Range</span>\n                <span>\n                  {format(tipStats.min)} to {format(tipStats.max)}\n                </span>\n              </p>\n              {held?.value != null ? (\n                <p className=\"m-0 mt-1 text-xs tabular-nums text-muted-foreground\">\n                  {PERCENT.format(tipBelow)} at or below {format(held.value)}\n                </p>\n              ) : null}\n            </>\n          ) : null}\n        </div>\n      </div>\n      {tint && !empty ? (\n        <div aria-hidden=\"true\" className=\"mt-3 flex flex-wrap items-center justify-end gap-2 text-xs tabular-nums text-muted-foreground\">\n          <span className=\"me-1 text-text-secondary\">Median</span>\n          <span>{format(model.lo)}</span>\n          <span className=\"inline-flex gap-0.5\">\n            {[0, 0.25, 0.5, 0.75, 1].map((at) => (\n              <span key={at} className=\"ridgeline-step\" style={{ \"--ridge\": toneOf(at) } as CSSProperties} />\n            ))}\n          </span>\n          <span>{format(model.hi)}</span>\n        </div>\n      ) : null}\n      <p className=\"sr-only\">{summary}</p>\n      <p className=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n        {spoken}\n      </p>\n      {empty ? null : (\n        <div className=\"sr-only\">\n          <table>\n            <caption>{label}</caption>\n            <thead>\n              <tr>\n                <th scope=\"col\">Series</th>\n                <th scope=\"col\">Median</th>\n                <th scope=\"col\">First quartile</th>\n                <th scope=\"col\">Third quartile</th>\n                <th scope=\"col\">Lowest</th>\n                <th scope=\"col\">Highest</th>\n                <th scope=\"col\">Count</th>\n              </tr>\n            </thead>\n            <tbody>\n              {series.map((entry) => {\n                const s = model.stats.get(entry.id)!;\n                return (\n                  <tr key={entry.id}>\n                    <th scope=\"row\">{entry.label}</th>\n                    <td>{format(s.median)}</td>\n                    <td>{format(s.q1)}</td>\n                    <td>{format(s.q3)}</td>\n                    <td>{format(s.min)}</td>\n                    <td>{format(s.max)}</td>\n                    <td>{s.n}</td>\n                  </tr>\n                );\n              })}\n            </tbody>\n          </table>\n        </div>\n      )}\n    </figure>\n  );\n});\n"],"mappings":"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"}

package/dist/scroll-area/index.d.ts

@@ -1,2 +1,2 @@
-import { ScrollArea, ScrollAreaProps, scrollAreaVariants } from "./scroll-area.js";
-export { ScrollArea, type ScrollAreaProps, scrollAreaVariants };
+import { ScrollArea, ScrollAreaProps, scrollAreaRootVariants, scrollAreaVariants } from "./scroll-area.js";
+export { ScrollArea, type ScrollAreaProps, scrollAreaRootVariants, scrollAreaVariants };

package/dist/scroll-area/index.js

@@ -1,2 +1,2 @@
-import { ScrollArea, scrollAreaVariants } from "./scroll-area.js";
-export { ScrollArea, scrollAreaVariants };
+import { ScrollArea, scrollAreaRootVariants, scrollAreaVariants } from "./scroll-area.js";
+export { ScrollArea, scrollAreaRootVariants, scrollAreaVariants };

package/dist/scroll-area/scroll-area.d.ts

@@ -1,38 +1,44 @@
 import { ComponentPropsWithoutRef, ReactNode } from "react";
 //#region src/scroll-area/scroll-area.d.ts
 /**
- * ScrollArea. React Aria has no equivalent, so this is a plain scrolling
- * div -- and that is the honest answer rather than a shortcut.
+ * ScrollArea: a native scroll container with thin overlay scrollbars and edge
+ * fades. React Aria has no equivalent, so the scrolling stays the browser's --
+ * keyboard, touch momentum and scroll snap all behave as the platform expects --
+ * and only the scrollbar is drawn here.
  *
- * Census: fourteen paths match, thirteen are counted, ELEVEN render
- * anything, and across them 17 uses. Every single one passes `className`
- * and nothing else, and 13 of the 17 are a height or flex constraint plus
- * padding. `ScrollBar` is exported by the legacy and imported by nobody.
- * `orientation="horizontal"` has zero call sites.
+ * Census: fourteen paths match, thirteen are counted, ELEVEN render anything,
+ * and across them 17 uses. Every one passes `className` and nothing else, and 13
+ * of the 17 are a height or flex constraint plus padding. The legacy Radix one
+ * cannot be scrolled by keyboard at all.
  *
- * So there is no styled-scrollbar requirement to port. The legacy pays for
- * one anyway: Radix injects a `<style>` tag that hides the native
- * scrollbar, then re-draws it in JavaScript with a ResizeObserver, a
- * portal-free overlay and a `display: table` content wrapper. That is a
- * lot of machinery to reproduce a scrollbar, and it is why the legacy
- * `ScrollArea` cannot be scrolled by keyboard at all.
+ * The native scrollbar is hidden and replaced by an overlay pill that appears
+ * while scrolling or hovering and fades away at rest (or stays, with
+ * `scrollbars="always"`). It is written straight to the DOM on each scroll
+ * frame, so scrolling never re-renders React. The pill can be dragged, and
+ * pressing its track pages toward the pointer.
  *
- * Tailwind 4.3.3 ships `scrollbar-width` and `scrollbar-color` utilities
- * (verified in the installed dist, not assumed), which gets the same look
- * in three classes and no JavaScript.
+ * WHERE THINGS LAND. `className`, `style` and the rest go on the ROOT, the box
+ * that carries the height and the optional card. `ref` and `viewportClassName`
+ * go on the VIEWPORT, the element that really scrolls -- so a caller can call
+ * `ref.current.scrollTo(...)` or `scrollBy(...)` for a "back to top" or an
+ * arrow button, and put padding on the content without moving the scrollbar
+ * inside it.
  *
- * WHAT CANNOT BE STYLED, stated rather than glossed: `scrollbar-color`
- * takes a thumb and a track colour and nothing else -- no width in pixels,
- * no radius, no hover state, no margins. `::-webkit-scrollbar` can do
- * those but is non-standard and Firefox has never supported it. This
- * component uses the standard properties only.
+ * The font is declared here: the reset in @seekalfred/styles is OPT-IN, so a
+ * consumer may load none, and a scroll area's content (a list of plain
+ * paragraphs) would render in the browser's serif.
  */
-export declare const scrollAreaVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const scrollAreaRootVariants: (props?: ({
+  framed?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const scrollAreaVariants: (props?: ({
+  orientation?: "vertical" | "horizontal" | "both" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * A scrolling region.
  *
  * @example
- * <ScrollArea label="Chat messages" className="h-64">...</ScrollArea>
+ * <ScrollArea label="Activity" className="h-64" framed fade={28}>...</ScrollArea>
  */
 export interface ScrollAreaProps extends ComponentPropsWithoutRef<"div"> {
   children?: ReactNode;
@@ -41,7 +47,7 @@ export interface ScrollAreaProps extends ComponentPropsWithoutRef<"div"> {
    *
    * **Required**, and it took a failing test to get here. A focusable
    * element with no role fails axe `focus-order-semantics`, so the
-   * keyboard fix below cannot ship without a role -- and a role with no
+   * keyboard fix cannot ship without a role -- and a role with no
    * accessible name is a violation of its own. Naming it is the only
    * combination that is actually correct.
    *
@@ -53,16 +59,56 @@ export interface ScrollAreaProps extends ComponentPropsWithoutRef<"div"> {
    * jump to it is the point.
    */
   label: string;
+  /**
+   * Which axes scroll.
+   *
+   * @default "vertical"
+   */
+  orientation?: "vertical" | "horizontal" | "both";
+  /**
+   * Fade the content out at an edge by exactly as much as there is content hidden
+   * past it, up to this many pixels: the fade grows in with the first pixels of
+   * scroll and is gone at the ends, so an edge fades only while content
+   * overflows past it. `0` turns it off, and the default leaves the area as it
+   * was. Written on each scroll frame straight to the element, so scrolling
+   * never re-renders.
+   *
+   * @default 0
+   */
+  fade?: number;
+  /**
+   * `auto` shows the scrollbar while scrolling or hovering and fades it away at
+   * rest; `always` keeps it visible whenever the content overflows.
+   *
+   * @default "auto"
+   */
+  scrollbars?: "auto" | "always";
+  /**
+   * How long the scrollbar lingers after scrolling stops, in ms.
+   *
+   * @default 900
+   */
+  hideDelay?: number;
+  /**
+   * Draws the area as a white card: the panel radius and a light border. The
+   * content is clipped to it, so an edge fade and the scrollbar sit inside.
+   *
+   * @default false
+   */
+  framed?: boolean;
+  /**
+   * Classes for the viewport, the element that scrolls. Padding for the
+   * content goes here.
+   */
+  viewportClassName?: string;
   /**
    * Change this when the contents change, and the region scrolls back to the
    * top.
    *
-   * This stays a declarative prop even though a `ref` now exists: reaching
+   * This stays a declarative prop even though a `ref` exists: reaching
    * for it would mean the caller writes `ref.current.scrollTop = 0` in their
    * own effect on every content change, which is worse ergonomics than a
-   * prop that says "reset when this value changes." That is a design choice
-   * independent of whether a ref is available, not a consequence of one
-   * being withheld.
+   * prop that says "reset when this value changes."
    *
    * Sheet forwards its own `scrollResetKey` straight through: going a level
    * deeper in a panel and landing halfway down the new view is disorienting,
@@ -70,6 +116,7 @@ export interface ScrollAreaProps extends ComponentPropsWithoutRef<"div"> {
    */
   scrollResetKey?: string | number;
 }
+/** The `ref` reaches the VIEWPORT, the element that scrolls. `onScroll` runs on its scroll events. */
 export declare const ScrollArea: import("react").ForwardRefExoticComponent<ScrollAreaProps & import("react").RefAttributes<HTMLDivElement>>;
 //#endregion
 //# sourceMappingURL=scroll-area.d.ts.map

package/dist/scroll-area/scroll-area.js

@@ -1,65 +1,236 @@
 "use client";
-import { cn } from "../lib/cn.js";
+import { cn, cnAll } from "../lib/cn.js";
 import { mergeRefs } from "../lib/merge-refs.js";
+import { prefersReducedMotion, useIsomorphicLayoutEffect } from "../lib/motion.js";
 import { cva } from "class-variance-authority";
-import { forwardRef, useEffect, useMemo, useRef } from "react";
-import { jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/scroll-area/scroll-area.tsx
 /**
-* ScrollArea. React Aria has no equivalent, so this is a plain scrolling
-* div -- and that is the honest answer rather than a shortcut.
+* ScrollArea: a native scroll container with thin overlay scrollbars and edge
+* fades. React Aria has no equivalent, so the scrolling stays the browser's --
+* keyboard, touch momentum and scroll snap all behave as the platform expects --
+* and only the scrollbar is drawn here.
 *
-* Census: fourteen paths match, thirteen are counted, ELEVEN render
-* anything, and across them 17 uses. Every single one passes `className`
-* and nothing else, and 13 of the 17 are a height or flex constraint plus
-* padding. `ScrollBar` is exported by the legacy and imported by nobody.
-* `orientation="horizontal"` has zero call sites.
+* Census: fourteen paths match, thirteen are counted, ELEVEN render anything,
+* and across them 17 uses. Every one passes `className` and nothing else, and 13
+* of the 17 are a height or flex constraint plus padding. The legacy Radix one
+* cannot be scrolled by keyboard at all.
 *
-* So there is no styled-scrollbar requirement to port. The legacy pays for
-* one anyway: Radix injects a `<style>` tag that hides the native
-* scrollbar, then re-draws it in JavaScript with a ResizeObserver, a
-* portal-free overlay and a `display: table` content wrapper. That is a
-* lot of machinery to reproduce a scrollbar, and it is why the legacy
-* `ScrollArea` cannot be scrolled by keyboard at all.
+* The native scrollbar is hidden and replaced by an overlay pill that appears
+* while scrolling or hovering and fades away at rest (or stays, with
+* `scrollbars="always"`). It is written straight to the DOM on each scroll
+* frame, so scrolling never re-renders React. The pill can be dragged, and
+* pressing its track pages toward the pointer.
 *
-* Tailwind 4.3.3 ships `scrollbar-width` and `scrollbar-color` utilities
-* (verified in the installed dist, not assumed), which gets the same look
-* in three classes and no JavaScript.
+* WHERE THINGS LAND. `className`, `style` and the rest go on the ROOT, the box
+* that carries the height and the optional card. `ref` and `viewportClassName`
+* go on the VIEWPORT, the element that really scrolls -- so a caller can call
+* `ref.current.scrollTo(...)` or `scrollBy(...)` for a "back to top" or an
+* arrow button, and put padding on the content without moving the scrollbar
+* inside it.
 *
-* WHAT CANNOT BE STYLED, stated rather than glossed: `scrollbar-color`
-* takes a thumb and a track colour and nothing else -- no width in pixels,
-* no radius, no hover state, no margins. `::-webkit-scrollbar` can do
-* those but is non-standard and Firefox has never supported it. This
-* component uses the standard properties only.
+* The font is declared here: the reset in @seekalfred/styles is OPT-IN, so a
+* consumer may load none, and a scroll area's content (a list of plain
+* paragraphs) would render in the browser's serif.
 */
+const scrollAreaRootVariants = cva(["scroll-area relative flex min-h-0 min-w-0 flex-col overflow-hidden box-border font-sans"], {
+	variants: { 
+	/** The area is a white card: the panel radius and a hairline border. */
+framed: {
+		true: "rounded-panel border-(length:--border-width) border-border bg-surface",
+		false: ""
+	} },
+	defaultVariants: { framed: false }
+});
 const scrollAreaVariants = cva([
-	"overflow-y-auto overscroll-contain",
-	"box-border",
-	"scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent",
+	"scroll-area-viewport min-h-0 min-w-0 flex-1 overscroll-contain box-border",
 	"outline-none",
 	"focus-visible:outline-solid",
 	"focus-visible:outline-(length:--focus-ring-width)",
 	"focus-visible:outline-offset-(--focus-ring-offset)",
 	"focus-visible:outline-(--color-ring)"
-]);
-const ScrollArea = forwardRef(function ScrollArea({ className, children, label, scrollResetKey, ...props }, ref) {
-	const region = useRef(null);
+], {
+	variants: { orientation: {
+		vertical: "overflow-x-hidden overflow-y-auto",
+		horizontal: "overflow-x-auto overflow-y-hidden",
+		both: "overflow-auto"
+	} },
+	defaultVariants: { orientation: "vertical" }
+});
+/** The shortest a scrollbar thumb gets, so a very long list still leaves something to grab. */
+const MIN_THUMB = 28;
+/** The `ref` reaches the VIEWPORT, the element that scrolls. `onScroll` runs on its scroll events. */
+const ScrollArea = forwardRef(function ScrollArea({ className, children, label, scrollResetKey, orientation = "vertical", fade = 0, scrollbars = "auto", hideDelay = 900, framed = false, viewportClassName, onScroll, ...props }, ref) {
+	const root = useRef(null);
+	const viewport = useRef(null);
+	const tracks = useRef({
+		x: null,
+		y: null
+	});
+	const thumbs = useRef({
+		x: null,
+		y: null
+	});
+	const hideTimer = useRef(void 0);
+	const drag = useRef(null);
+	const vertical = orientation !== "horizontal";
+	const horizontal = orientation !== "vertical";
 	useEffect(() => {
-		if (region.current) region.current.scrollTop = 0;
+		if (viewport.current) viewport.current.scrollTop = 0;
 	}, [scrollResetKey]);
-	const rootRef = useMemo(() => mergeRefs(ref, region), [ref, region]);
-	return /* @__PURE__ */ jsx("div", {
+	const viewportRef = useMemo(() => mergeRefs(ref, viewport), [ref]);
+	const sync = useCallback(() => {
+		const node = viewport.current;
+		if (!node) return;
+		const { scrollTop, scrollHeight, clientHeight, scrollWidth, clientWidth } = node;
+		const maxY = Math.max(0, scrollHeight - clientHeight);
+		const maxX = Math.max(0, scrollWidth - clientWidth);
+		const left = Math.abs(node.scrollLeft);
+		if (fade > 0) {
+			node.style.setProperty("--fade-top", `${vertical ? Math.min(fade, scrollTop) : 0}px`);
+			node.style.setProperty("--fade-bottom", `${vertical ? Math.min(fade, Math.max(0, maxY - scrollTop)) : 0}px`);
+			node.style.setProperty("--fade-left", `${horizontal ? Math.min(fade, left) : 0}px`);
+			node.style.setProperty("--fade-right", `${horizontal ? Math.min(fade, Math.max(0, maxX - left)) : 0}px`);
+		}
+		const place = (axis, scroll, max, client, total) => {
+			const track = tracks.current[axis];
+			const thumb = thumbs.current[axis];
+			if (!track || !thumb) return;
+			const overflowing = max > .5;
+			track.toggleAttribute("data-hidden", !overflowing);
+			if (!overflowing) return;
+			const length = axis === "y" ? track.clientHeight : track.clientWidth;
+			const size = Math.max(MIN_THUMB, length * client / total);
+			const offset = (length - size) * (scroll / max);
+			const sign = axis === "x" && getComputedStyle(node).direction === "rtl" ? -1 : 1;
+			thumb.style[axis === "y" ? "height" : "width"] = `${size}px`;
+			thumb.style.transform = axis === "y" ? `translate3d(0, ${offset}px, 0)` : `translate3d(${offset * sign}px, 0, 0)`;
+		};
+		if (vertical) place("y", scrollTop, maxY, clientHeight, scrollHeight);
+		if (horizontal) place("x", left, maxX, clientWidth, scrollWidth);
+		root.current?.toggleAttribute("data-overflow", maxY > .5 || maxX > .5);
+	}, [
+		fade,
+		horizontal,
+		vertical
+	]);
+	useIsomorphicLayoutEffect(() => {
+		const node = viewport.current;
+		if (!node) return;
+		sync();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(() => sync());
+		observer.observe(node);
+		for (const child of Array.from(node.children)) observer.observe(child);
+		return () => observer.disconnect();
+	}, [sync, children]);
+	useEffect(() => () => window.clearTimeout(hideTimer.current), []);
+	const wake = () => {
+		const el = root.current;
+		if (!el) return;
+		el.setAttribute("data-scrolling", "");
+		window.clearTimeout(hideTimer.current);
+		hideTimer.current = window.setTimeout(() => el.removeAttribute("data-scrolling"), hideDelay);
+	};
+	const onThumbDown = (event, axis) => {
+		const node = viewport.current;
+		const track = tracks.current[axis];
+		const thumb = thumbs.current[axis];
+		if (!node || !track || !thumb || event.button !== 0) return;
+		event.preventDefault();
+		event.stopPropagation();
+		event.currentTarget.setPointerCapture(event.pointerId);
+		const length = axis === "y" ? track.clientHeight : track.clientWidth;
+		const size = axis === "y" ? thumb.offsetHeight : thumb.offsetWidth;
+		const max = axis === "y" ? node.scrollHeight - node.clientHeight : node.scrollWidth - node.clientWidth;
+		drag.current = {
+			axis,
+			start: axis === "y" ? event.clientY : event.clientX,
+			scroll: axis === "y" ? node.scrollTop : node.scrollLeft,
+			ratio: max / Math.max(1, length - size),
+			sign: axis === "x" && getComputedStyle(node).direction === "rtl" ? -1 : 1
+		};
+		root.current?.setAttribute("data-dragging", axis);
+	};
+	const onThumbMove = (event) => {
+		const state = drag.current;
+		const node = viewport.current;
+		if (!state || !node) return;
+		const travel = (state.axis === "y" ? event.clientY : event.clientX) - state.start;
+		const to = state.scroll + travel * state.ratio * state.sign;
+		if (state.axis === "y") node.scrollTop = to;
+		else node.scrollLeft = to;
+	};
+	const onThumbUp = (event) => {
+		if (!drag.current) return;
+		drag.current = null;
+		if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+		root.current?.removeAttribute("data-dragging");
+		wake();
+	};
+	const onTrackDown = (event, axis) => {
+		const node = viewport.current;
+		const thumb = thumbs.current[axis];
+		if (!node || !thumb || event.button !== 0 || event.target !== event.currentTarget) return;
+		const box = thumb.getBoundingClientRect();
+		const before = axis === "y" ? event.clientY < box.top : event.clientX < box.left;
+		const page = (axis === "y" ? node.clientHeight : node.clientWidth) * .9 * (before ? -1 : 1);
+		node.scrollBy({
+			[axis === "y" ? "top" : "left"]: page,
+			behavior: prefersReducedMotion() ? "auto" : "smooth"
+		});
+	};
+	const bar = (axis) => /* @__PURE__ */ jsx("div", {
+		ref: (node) => {
+			tracks.current[axis] = node;
+		},
+		"data-slot": "scroll-area-track",
+		"data-axis": axis,
+		"data-hidden": "",
+		"aria-hidden": "true",
+		onPointerDown: (event) => onTrackDown(event, axis),
+		children: /* @__PURE__ */ jsx("div", {
+			ref: (node) => {
+				thumbs.current[axis] = node;
+			},
+			"data-slot": "scroll-area-thumb",
+			onPointerDown: (event) => onThumbDown(event, axis),
+			onPointerMove: onThumbMove,
+			onPointerUp: onThumbUp,
+			onPointerCancel: onThumbUp
+		})
+	});
+	const fadeClass = orientation === "vertical" ? "scroll-fade-y" : orientation === "horizontal" ? "scroll-fade-x" : "scroll-fade-both";
+	return /* @__PURE__ */ jsxs("div", {
 		...props,
-		ref: rootRef,
-		tabIndex: 0,
-		role: "region",
-		"aria-label": label,
-		"data-slot": "scroll-area",
-		className: cn(scrollAreaVariants(), className),
-		children
+		ref: root,
+		"data-slot": "scroll-area-root",
+		"data-orientation": orientation,
+		"data-scrollbars": scrollbars,
+		className: cn(scrollAreaRootVariants({ framed }), className),
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				ref: viewportRef,
+				tabIndex: 0,
+				role: "region",
+				"aria-label": label,
+				"data-slot": "scroll-area",
+				"data-fade": fade > 0 ? "" : void 0,
+				onScroll: (event) => {
+					sync();
+					wake();
+					onScroll?.(event);
+				},
+				className: cn(cnAll(scrollAreaVariants({ orientation }), fade > 0 && fadeClass), viewportClassName),
+				children
+			}),
+			vertical ? bar("y") : null,
+			horizontal ? bar("x") : null
+		]
 	});
 });
 //#endregion
-export { ScrollArea, scrollAreaVariants };
+export { ScrollArea, scrollAreaRootVariants, scrollAreaVariants };
 
 //# sourceMappingURL=scroll-area.js.map

package/dist/scroll-area/scroll-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-area.js","names":[],"sources":["../../src/scroll-area/scroll-area.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport {\n  forwardRef,\n  useEffect,\n  useMemo,\n  useRef,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { mergeRefs } from \"../lib/merge-refs.js\";\n\n/**\n * ScrollArea. React Aria has no equivalent, so this is a plain scrolling\n * div -- and that is the honest answer rather than a shortcut.\n *\n * Census: fourteen paths match, thirteen are counted, ELEVEN render\n * anything, and across them 17 uses. Every single one passes `className`\n * and nothing else, and 13 of the 17 are a height or flex constraint plus\n * padding. `ScrollBar` is exported by the legacy and imported by nobody.\n * `orientation=\"horizontal\"` has zero call sites.\n *\n * So there is no styled-scrollbar requirement to port. The legacy pays for\n * one anyway: Radix injects a `<style>` tag that hides the native\n * scrollbar, then re-draws it in JavaScript with a ResizeObserver, a\n * portal-free overlay and a `display: table` content wrapper. That is a\n * lot of machinery to reproduce a scrollbar, and it is why the legacy\n * `ScrollArea` cannot be scrolled by keyboard at all.\n *\n * Tailwind 4.3.3 ships `scrollbar-width` and `scrollbar-color` utilities\n * (verified in the installed dist, not assumed), which gets the same look\n * in three classes and no JavaScript.\n *\n * WHAT CANNOT BE STYLED, stated rather than glossed: `scrollbar-color`\n * takes a thumb and a track colour and nothing else -- no width in pixels,\n * no radius, no hover state, no margins. `::-webkit-scrollbar` can do\n * those but is non-standard and Firefox has never supported it. This\n * component uses the standard properties only.\n */\nexport const scrollAreaVariants = cva([\n  \"overflow-y-auto overscroll-contain\",\n  \"box-border\",\n  // Standard scrollbar properties. thumb = --color-border (5.25:1 on the\n  // page), track transparent so it does not draw a channel.\n  \"scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent\",\n  // A scrollable region must be reachable by keyboard, or its content is\n  // unreachable without a pointer -- WCAG 2.1.1, and axe's\n  // scrollable-region-focusable rule. The legacy has no tabIndex at all,\n  // so all 17 of its scroll areas are keyboard traps in the other\n  // direction: you can see the content but never scroll to it.\n  \"outline-none\",\n  \"focus-visible:outline-solid\",\n  \"focus-visible:outline-(length:--focus-ring-width)\",\n  \"focus-visible:outline-offset-(--focus-ring-offset)\",\n  \"focus-visible:outline-(--color-ring)\",\n]);\n\n/**\n * A scrolling region.\n *\n * @example\n * <ScrollArea label=\"Chat messages\" className=\"h-64\">...</ScrollArea>\n */\nexport interface ScrollAreaProps extends ComponentPropsWithoutRef<\"div\"> {\n  children?: ReactNode;\n  /**\n   * Names the scrolling region.\n   *\n   * **Required**, and it took a failing test to get here. A focusable\n   * element with no role fails axe `focus-order-semantics`, so the\n   * keyboard fix below cannot ship without a role -- and a role with no\n   * accessible name is a violation of its own. Naming it is the only\n   * combination that is actually correct.\n   *\n   * `role=\"region\"` specifically. `group` was the first attempt -- it is\n   * lighter, since region is a landmark and seventeen landmarks in one app\n   * is noise -- but axe does not accept `group` as an appropriate role for\n   * a focusable element, and it is right: a named region is the role the\n   * ARIA practices name for a scrollable content area, and being able to\n   * jump to it is the point.\n   */\n  label: string;\n  /**\n   * Change this when the contents change, and the region scrolls back to the\n   * top.\n   *\n   * This stays a declarative prop even though a `ref` now exists: reaching\n   * for it would mean the caller writes `ref.current.scrollTop = 0` in their\n   * own effect on every content change, which is worse ergonomics than a\n   * prop that says \"reset when this value changes.\" That is a design choice\n   * independent of whether a ref is available, not a consequence of one\n   * being withheld.\n   *\n   * Sheet forwards its own `scrollResetKey` straight through: going a level\n   * deeper in a panel and landing halfway down the new view is disorienting,\n   * and it is exactly the thing every call site forgets.\n   */\n  scrollResetKey?: string | number;\n}\n\nexport const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(function ScrollArea(\n  { className, children, label, scrollResetKey, ...props },\n  ref,\n) {\n  const region = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    // Unconditional rather than guarded on scrollResetKey being set: with no\n    // key this runs once on mount, where scrollTop is already 0.\n    if (region.current) region.current.scrollTop = 0;\n  }, [scrollResetKey]);\n\n  // Memoized, not called inline on the div below: mergeRefs returns a new\n  // callback every call, and an inline call is a new callback every render --\n  // React would detach and reattach the DOM ref on every re-render instead of\n  // only on mount, which matters here more than most, since ScrollArea's own\n  // purpose is wrapping content that re-renders often.\n  const rootRef = useMemo(() => mergeRefs(ref, region), [ref, region]);\n\n  return (\n    <div\n      {...props}\n      ref={rootRef}\n      // tabIndex 0 unconditionally: whether the content overflows is a\n      // runtime fact that changes as the content does, and a region that\n      // becomes scrollable after a fetch would otherwise never gain focus.\n      tabIndex={0}\n      role=\"region\"\n      aria-label={label}\n      data-slot=\"scroll-area\"\n      className={cn(scrollAreaVariants(), className)}\n    >\n      {children}\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,MAAa,qBAAqB,IAAI;CACpC;CACA;CAGA;CAMA;CACA;CACA;CACA;CACA;AACF,CAAC;AA6CD,MAAa,aAAa,WAA4C,SAAS,WAC7E,EAAE,WAAW,UAAU,OAAO,gBAAgB,GAAG,SACjD,KACA;CACA,MAAM,SAAS,OAAuB,IAAI;CAE1C,gBAAgB;EAGd,IAAI,OAAO,SAAS,OAAO,QAAQ,YAAY;CACjD,GAAG,CAAC,cAAc,CAAC;CAOnB,MAAM,UAAU,cAAc,UAAU,KAAK,MAAM,GAAG,CAAC,KAAK,MAAM,CAAC;CAEnE,OACE,oBAAC,OAAD;EACE,GAAI;EACJ,KAAK;EAIL,UAAU;EACV,MAAK;EACL,cAAY;EACZ,aAAU;EACV,WAAW,GAAG,mBAAmB,GAAG,SAAS;EAE5C;CACE,CAAA;AAET,CAAC"}
+{"version":3,"file":"scroll-area.js","names":[],"sources":["../../src/scroll-area/scroll-area.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  type ComponentPropsWithoutRef,\n  type PointerEvent as ReactPointerEvent,\n  type ReactNode,\n} from \"react\";\n\nimport { cn, cnAll } from \"../lib/cn.js\";\nimport { mergeRefs } from \"../lib/merge-refs.js\";\nimport { prefersReducedMotion, useIsomorphicLayoutEffect } from \"../lib/motion.js\";\n\n/**\n * ScrollArea: a native scroll container with thin overlay scrollbars and edge\n * fades. React Aria has no equivalent, so the scrolling stays the browser's --\n * keyboard, touch momentum and scroll snap all behave as the platform expects --\n * and only the scrollbar is drawn here.\n *\n * Census: fourteen paths match, thirteen are counted, ELEVEN render anything,\n * and across them 17 uses. Every one passes `className` and nothing else, and 13\n * of the 17 are a height or flex constraint plus padding. The legacy Radix one\n * cannot be scrolled by keyboard at all.\n *\n * The native scrollbar is hidden and replaced by an overlay pill that appears\n * while scrolling or hovering and fades away at rest (or stays, with\n * `scrollbars=\"always\"`). It is written straight to the DOM on each scroll\n * frame, so scrolling never re-renders React. The pill can be dragged, and\n * pressing its track pages toward the pointer.\n *\n * WHERE THINGS LAND. `className`, `style` and the rest go on the ROOT, the box\n * that carries the height and the optional card. `ref` and `viewportClassName`\n * go on the VIEWPORT, the element that really scrolls -- so a caller can call\n * `ref.current.scrollTo(...)` or `scrollBy(...)` for a \"back to top\" or an\n * arrow button, and put padding on the content without moving the scrollbar\n * inside it.\n *\n * The font is declared here: the reset in @seekalfred/styles is OPT-IN, so a\n * consumer may load none, and a scroll area's content (a list of plain\n * paragraphs) would render in the browser's serif.\n */\nexport const scrollAreaRootVariants = cva(\n  [\"scroll-area relative flex min-h-0 min-w-0 flex-col overflow-hidden box-border font-sans\"],\n  {\n    variants: {\n      /** The area is a white card: the panel radius and a hairline border. */\n      framed: {\n        true: \"rounded-panel border-(length:--border-width) border-border bg-surface\",\n        false: \"\",\n      },\n    },\n    defaultVariants: { framed: false },\n  },\n);\n\nexport const scrollAreaVariants = cva(\n  [\n    \"scroll-area-viewport min-h-0 min-w-0 flex-1 overscroll-contain box-border\",\n    // A scrollable region must be reachable by keyboard, or its content is\n    // unreachable without a pointer -- WCAG 2.1.1, and axe's\n    // scrollable-region-focusable rule. The legacy has no tabIndex at all.\n    \"outline-none\",\n    \"focus-visible:outline-solid\",\n    \"focus-visible:outline-(length:--focus-ring-width)\",\n    \"focus-visible:outline-offset-(--focus-ring-offset)\",\n    \"focus-visible:outline-(--color-ring)\",\n  ],\n  {\n    variants: {\n      orientation: {\n        vertical: \"overflow-x-hidden overflow-y-auto\",\n        horizontal: \"overflow-x-auto overflow-y-hidden\",\n        both: \"overflow-auto\",\n      },\n    },\n    defaultVariants: { orientation: \"vertical\" },\n  },\n);\n\ntype Axis = \"y\" | \"x\";\n\ninterface Drag {\n  axis: Axis;\n  start: number;\n  scroll: number;\n  ratio: number;\n  sign: number;\n}\n\n/** The shortest a scrollbar thumb gets, so a very long list still leaves something to grab. */\nconst MIN_THUMB = 28;\n\n/**\n * A scrolling region.\n *\n * @example\n * <ScrollArea label=\"Activity\" className=\"h-64\" framed fade={28}>...</ScrollArea>\n */\nexport interface ScrollAreaProps extends ComponentPropsWithoutRef<\"div\"> {\n  children?: ReactNode;\n  /**\n   * Names the scrolling region.\n   *\n   * **Required**, and it took a failing test to get here. A focusable\n   * element with no role fails axe `focus-order-semantics`, so the\n   * keyboard fix cannot ship without a role -- and a role with no\n   * accessible name is a violation of its own. Naming it is the only\n   * combination that is actually correct.\n   *\n   * `role=\"region\"` specifically. `group` was the first attempt -- it is\n   * lighter, since region is a landmark and seventeen landmarks in one app\n   * is noise -- but axe does not accept `group` as an appropriate role for\n   * a focusable element, and it is right: a named region is the role the\n   * ARIA practices name for a scrollable content area, and being able to\n   * jump to it is the point.\n   */\n  label: string;\n  /**\n   * Which axes scroll.\n   *\n   * @default \"vertical\"\n   */\n  orientation?: \"vertical\" | \"horizontal\" | \"both\";\n  /**\n   * Fade the content out at an edge by exactly as much as there is content hidden\n   * past it, up to this many pixels: the fade grows in with the first pixels of\n   * scroll and is gone at the ends, so an edge fades only while content\n   * overflows past it. `0` turns it off, and the default leaves the area as it\n   * was. Written on each scroll frame straight to the element, so scrolling\n   * never re-renders.\n   *\n   * @default 0\n   */\n  fade?: number;\n  /**\n   * `auto` shows the scrollbar while scrolling or hovering and fades it away at\n   * rest; `always` keeps it visible whenever the content overflows.\n   *\n   * @default \"auto\"\n   */\n  scrollbars?: \"auto\" | \"always\";\n  /**\n   * How long the scrollbar lingers after scrolling stops, in ms.\n   *\n   * @default 900\n   */\n  hideDelay?: number;\n  /**\n   * Draws the area as a white card: the panel radius and a light border. The\n   * content is clipped to it, so an edge fade and the scrollbar sit inside.\n   *\n   * @default false\n   */\n  framed?: boolean;\n  /**\n   * Classes for the viewport, the element that scrolls. Padding for the\n   * content goes here.\n   */\n  viewportClassName?: string;\n  /**\n   * Change this when the contents change, and the region scrolls back to the\n   * top.\n   *\n   * This stays a declarative prop even though a `ref` exists: reaching\n   * for it would mean the caller writes `ref.current.scrollTop = 0` in their\n   * own effect on every content change, which is worse ergonomics than a\n   * prop that says \"reset when this value changes.\"\n   *\n   * Sheet forwards its own `scrollResetKey` straight through: going a level\n   * deeper in a panel and landing halfway down the new view is disorienting,\n   * and it is exactly the thing every call site forgets.\n   */\n  scrollResetKey?: string | number;\n}\n\n/** The `ref` reaches the VIEWPORT, the element that scrolls. `onScroll` runs on its scroll events. */\nexport const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(function ScrollArea(\n  {\n    className,\n    children,\n    label,\n    scrollResetKey,\n    orientation = \"vertical\",\n    fade = 0,\n    scrollbars = \"auto\",\n    hideDelay = 900,\n    framed = false,\n    viewportClassName,\n    onScroll,\n    ...props\n  },\n  ref,\n) {\n  const root = useRef<HTMLDivElement>(null);\n  const viewport = useRef<HTMLDivElement>(null);\n  const tracks = useRef<Record<Axis, HTMLDivElement | null>>({ x: null, y: null });\n  const thumbs = useRef<Record<Axis, HTMLDivElement | null>>({ x: null, y: null });\n  const hideTimer = useRef<number | undefined>(undefined);\n  const drag = useRef<Drag | null>(null);\n\n  const vertical = orientation !== \"horizontal\";\n  const horizontal = orientation !== \"vertical\";\n\n  useEffect(() => {\n    // Unconditional rather than guarded on scrollResetKey being set: with no\n    // key this runs once on mount, where scrollTop is already 0.\n    if (viewport.current) viewport.current.scrollTop = 0;\n  }, [scrollResetKey]);\n\n  // Memoized, not called inline: mergeRefs returns a new callback every call, so\n  // an inline call would detach and reattach the DOM ref on every re-render.\n  const viewportRef = useMemo(() => mergeRefs(ref, viewport), [ref]);\n\n  /*\n   * Everything visual is written straight to the DOM: the fade at each edge is\n   * how much content is hidden past it (up to `fade`), and a thumb is sized and\n   * placed from the scroll position. A track with nothing to scroll is hidden.\n   */\n  const sync = useCallback(() => {\n    const node = viewport.current;\n    if (!node) return;\n    const { scrollTop, scrollHeight, clientHeight, scrollWidth, clientWidth } = node;\n    const maxY = Math.max(0, scrollHeight - clientHeight);\n    const maxX = Math.max(0, scrollWidth - clientWidth);\n    // scrollLeft runs negative in a right-to-left layout; the distance travelled is what counts.\n    const left = Math.abs(node.scrollLeft);\n\n    if (fade > 0) {\n      node.style.setProperty(\"--fade-top\", `${vertical ? Math.min(fade, scrollTop) : 0}px`);\n      node.style.setProperty(\n        \"--fade-bottom\",\n        `${vertical ? Math.min(fade, Math.max(0, maxY - scrollTop)) : 0}px`,\n      );\n      node.style.setProperty(\"--fade-left\", `${horizontal ? Math.min(fade, left) : 0}px`);\n      node.style.setProperty(\n        \"--fade-right\",\n        `${horizontal ? Math.min(fade, Math.max(0, maxX - left)) : 0}px`,\n      );\n    }\n\n    const place = (axis: Axis, scroll: number, max: number, client: number, total: number) => {\n      const track = tracks.current[axis];\n      const thumb = thumbs.current[axis];\n      if (!track || !thumb) return;\n      const overflowing = max > 0.5;\n      track.toggleAttribute(\"data-hidden\", !overflowing);\n      if (!overflowing) return;\n      const length = axis === \"y\" ? track.clientHeight : track.clientWidth;\n      const size = Math.max(MIN_THUMB, (length * client) / total);\n      const offset = (length - size) * (scroll / max);\n      const sign = axis === \"x\" && getComputedStyle(node).direction === \"rtl\" ? -1 : 1;\n      thumb.style[axis === \"y\" ? \"height\" : \"width\"] = `${size}px`;\n      thumb.style.transform =\n        axis === \"y\" ? `translate3d(0, ${offset}px, 0)` : `translate3d(${offset * sign}px, 0, 0)`;\n    };\n    if (vertical) place(\"y\", scrollTop, maxY, clientHeight, scrollHeight);\n    if (horizontal) place(\"x\", left, maxX, clientWidth, scrollWidth);\n    root.current?.toggleAttribute(\"data-overflow\", maxY > 0.5 || maxX > 0.5);\n  }, [fade, horizontal, vertical]);\n\n  useIsomorphicLayoutEffect(() => {\n    const node = viewport.current;\n    if (!node) return;\n    sync();\n    if (typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(() => sync());\n    observer.observe(node);\n    for (const child of Array.from(node.children)) observer.observe(child);\n    return () => observer.disconnect();\n    // `children` re-observes when the content's own boxes are replaced.\n  }, [sync, children]);\n\n  useEffect(() => () => window.clearTimeout(hideTimer.current), []);\n\n  const wake = () => {\n    const el = root.current;\n    if (!el) return;\n    el.setAttribute(\"data-scrolling\", \"\");\n    window.clearTimeout(hideTimer.current);\n    hideTimer.current = window.setTimeout(() => el.removeAttribute(\"data-scrolling\"), hideDelay);\n  };\n\n  /* Dragging a thumb maps pointer travel to scroll distance. */\n  const onThumbDown = (event: ReactPointerEvent<HTMLDivElement>, axis: Axis) => {\n    const node = viewport.current;\n    const track = tracks.current[axis];\n    const thumb = thumbs.current[axis];\n    if (!node || !track || !thumb || event.button !== 0) return;\n    event.preventDefault();\n    event.stopPropagation();\n    event.currentTarget.setPointerCapture(event.pointerId);\n    const length = axis === \"y\" ? track.clientHeight : track.clientWidth;\n    const size = axis === \"y\" ? thumb.offsetHeight : thumb.offsetWidth;\n    const max =\n      axis === \"y\" ? node.scrollHeight - node.clientHeight : node.scrollWidth - node.clientWidth;\n    drag.current = {\n      axis,\n      start: axis === \"y\" ? event.clientY : event.clientX,\n      scroll: axis === \"y\" ? node.scrollTop : node.scrollLeft,\n      ratio: max / Math.max(1, length - size),\n      sign: axis === \"x\" && getComputedStyle(node).direction === \"rtl\" ? -1 : 1,\n    };\n    root.current?.setAttribute(\"data-dragging\", axis);\n  };\n  const onThumbMove = (event: ReactPointerEvent<HTMLDivElement>) => {\n    const state = drag.current;\n    const node = viewport.current;\n    if (!state || !node) return;\n    const travel = (state.axis === \"y\" ? event.clientY : event.clientX) - state.start;\n    const to = state.scroll + travel * state.ratio * state.sign;\n    if (state.axis === \"y\") node.scrollTop = to;\n    else node.scrollLeft = to;\n  };\n  const onThumbUp = (event: ReactPointerEvent<HTMLDivElement>) => {\n    if (!drag.current) return;\n    drag.current = null;\n    if (event.currentTarget.hasPointerCapture(event.pointerId)) {\n      event.currentTarget.releasePointerCapture(event.pointerId);\n    }\n    root.current?.removeAttribute(\"data-dragging\");\n    wake();\n  };\n  /* Pressing the track pages toward the pointer. */\n  const onTrackDown = (event: ReactPointerEvent<HTMLDivElement>, axis: Axis) => {\n    const node = viewport.current;\n    const thumb = thumbs.current[axis];\n    if (!node || !thumb || event.button !== 0 || event.target !== event.currentTarget) return;\n    const box = thumb.getBoundingClientRect();\n    const before = axis === \"y\" ? event.clientY < box.top : event.clientX < box.left;\n    const page = (axis === \"y\" ? node.clientHeight : node.clientWidth) * 0.9 * (before ? -1 : 1);\n    node.scrollBy({\n      [axis === \"y\" ? \"top\" : \"left\"]: page,\n      behavior: prefersReducedMotion() ? \"auto\" : \"smooth\",\n    });\n  };\n\n  const bar = (axis: Axis) => (\n    <div\n      ref={(node) => {\n        tracks.current[axis] = node;\n      }}\n      data-slot=\"scroll-area-track\"\n      data-axis={axis}\n      data-hidden=\"\"\n      aria-hidden=\"true\"\n      onPointerDown={(event) => onTrackDown(event, axis)}\n    >\n      <div\n        ref={(node) => {\n          thumbs.current[axis] = node;\n        }}\n        data-slot=\"scroll-area-thumb\"\n        onPointerDown={(event) => onThumbDown(event, axis)}\n        onPointerMove={onThumbMove}\n        onPointerUp={onThumbUp}\n        onPointerCancel={onThumbUp}\n      />\n    </div>\n  );\n\n  const fadeClass =\n    orientation === \"vertical\"\n      ? \"scroll-fade-y\"\n      : orientation === \"horizontal\"\n        ? \"scroll-fade-x\"\n        : \"scroll-fade-both\";\n\n  return (\n    <div\n      {...props}\n      ref={root}\n      data-slot=\"scroll-area-root\"\n      data-orientation={orientation}\n      data-scrollbars={scrollbars}\n      className={cn(scrollAreaRootVariants({ framed }), className)}\n    >\n      <div\n        ref={viewportRef}\n        // tabIndex 0 unconditionally: whether the content overflows is a\n        // runtime fact that changes as the content does, and a region that\n        // becomes scrollable after a fetch would otherwise never gain focus.\n        tabIndex={0}\n        role=\"region\"\n        aria-label={label}\n        data-slot=\"scroll-area\"\n        data-fade={fade > 0 ? \"\" : undefined}\n        onScroll={(event) => {\n          sync();\n          wake();\n          onScroll?.(event);\n        }}\n        className={cn(\n          cnAll(scrollAreaVariants({ orientation }), fade > 0 && fadeClass),\n          viewportClassName,\n        )}\n      >\n        {children}\n      </div>\n      {vertical ? bar(\"y\") : null}\n      {horizontal ? bar(\"x\") : null}\n    </div>\n  );\n});\n"],"mappings":"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"}