@w5-ui/react 0.1.0

package/src/components/RangeSlider.tsx

@@ -0,0 +1,116 @@
+import { useState, useId } from 'react'
+import type { ChangeEvent, CSSProperties } from 'react'
+
+export interface RangeSliderProps {
+  label?: string
+  min?: number
+  max?: number
+  step?: number
+  defaultLow?: number
+  defaultHigh?: number
+  low?: number
+  high?: number
+  suffix?: string
+  disabled?: boolean
+  onChange?: (range: [number, number]) => void
+  className?: string
+}
+
+export function RangeSlider({
+  label,
+  min = 0,
+  max = 100,
+  step = 1,
+  defaultLow,
+  defaultHigh,
+  low: lowProp,
+  high: highProp,
+  suffix,
+  disabled = false,
+  onChange,
+  className = '',
+}: RangeSliderProps) {
+  const uid = useId()
+  const labelId = `${uid}-label`
+  const [internalLow, setInternalLow] = useState(defaultLow ?? min)
+  const [internalHigh, setInternalHigh] = useState(defaultHigh ?? max)
+  const low = lowProp !== undefined ? lowProp : internalLow
+  const high = highProp !== undefined ? highProp : internalHigh
+
+  function toPercent(v: number) {
+    return max === min ? 0 : ((v - min) / (max - min)) * 100
+  }
+
+  const lowPct = toPercent(low)
+  const highPct = toPercent(high)
+  const lowOnTop = low >= max - step
+
+  const fillStyle: CSSProperties = {
+    '--rs-low': `${lowPct}%`,
+    '--rs-high': `${highPct}%`,
+  } as CSSProperties
+
+  function handleLowChange(e: ChangeEvent<HTMLInputElement>) {
+    const next = Math.min(Number(e.target.value), high - step)
+    if (lowProp === undefined) setInternalLow(next)
+    onChange?.([next, high])
+  }
+
+  function handleHighChange(e: ChangeEvent<HTMLInputElement>) {
+    const next = Math.max(Number(e.target.value), low + step)
+    if (highProp === undefined) setInternalHigh(next)
+    onChange?.([low, next])
+  }
+
+  return (
+    <div className={`range-slider ${className}`.trim()}>
+      {label && (
+        <div className="range-slider__header">
+          <span className="range-slider__label" id={labelId}>
+            {label}
+          </span>
+          <span className="range-slider__value" aria-live="polite">
+            {low}
+            {suffix} &ndash; {high}
+            {suffix}
+          </span>
+        </div>
+      )}
+      <div
+        className="range-slider__wrap"
+        style={fillStyle}
+        role="group"
+        aria-labelledby={label ? labelId : undefined}
+      >
+        <div className="range-slider__track-bg" />
+        <div className="range-slider__fill" />
+        <input
+          type="range"
+          className="range-slider__input"
+          min={min}
+          max={max}
+          step={step}
+          value={low}
+          disabled={disabled}
+          style={{ zIndex: lowOnTop ? 2 : 1 }}
+          aria-label={label ? `${label} minimum` : 'Minimum'}
+          aria-valuetext={suffix ? `${low}${suffix}` : String(low)}
+          onChange={handleLowChange}
+        />
+        <input
+          type="range"
+          className="range-slider__input"
+          min={min}
+          max={max}
+          step={step}
+          value={high}
+          disabled={disabled}
+          style={{ zIndex: lowOnTop ? 1 : 2 }}
+          aria-label={label ? `${label} maximum` : 'Maximum'}
+          aria-valuetext={suffix ? `${high}${suffix}` : String(high)}
+          onChange={handleHighChange}
+        />
+      </div>
+    </div>
+  )
+}

package/src/components/RankedList.tsx

@@ -0,0 +1,61 @@
+export interface RankedItem {
+  label: string
+  value: number
+  sublabel?: string
+  color?: string
+}
+
+export interface RankedListProps {
+  items: RankedItem[]
+  unit?: string
+  max?: number
+  ariaLabel?: string
+}
+
+export function RankedList({
+  items,
+  unit,
+  max: maxProp,
+  ariaLabel = 'Ranked list',
+}: RankedListProps) {
+  const max = maxProp ?? Math.max(...items.map((i) => i.value), 1)
+  return (
+    <table className="rl" aria-label={ariaLabel}>
+      <caption className="sr-only">{ariaLabel}</caption>
+      <thead className="sr-only">
+        <tr>
+          <th scope="col">#</th>
+          <th scope="col">Name</th>
+          <th scope="col">Distribution</th>
+          <th scope="col">{unit ?? 'Value'}</th>
+        </tr>
+      </thead>
+      <tbody>
+        {items.map((item, i) => (
+          <tr key={i} className="rl-row">
+            <td className="rl-rank">{i + 1}</td>
+            <td className="rl-label-cell">
+              <div className="rl-label">{item.label}</div>
+              {item.sublabel && <div className="rl-sublabel">{item.sublabel}</div>}
+            </td>
+            <td className="rl-bar-col" aria-hidden="true">
+              <div className="rl-bar-track">
+                <div
+                  className="rl-bar-fill"
+                  style={{
+                    width: `${((item.value / max) * 100).toFixed(1)}%`,
+                    background: item.color ?? '#006FFF',
+                  }}
+                />
+              </div>
+            </td>
+            <td className="rl-val">
+              {item.value.toLocaleString()}
+              {unit && <span className="rl-unit"> {unit}</span>}
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  )
+}

package/src/components/ResizablePanel.tsx

@@ -0,0 +1,122 @@
+import { useRef, useState, useCallback, type ReactNode, type CSSProperties } from 'react'
+
+export type ResizableOrientation = 'horizontal' | 'vertical'
+
+export interface ResizablePanelProps {
+  defaultSize?: number
+  min?: number
+  max?: number
+  orientation?: ResizableOrientation
+  label?: string
+  className?: string
+  style?: CSSProperties
+  children: [ReactNode, ReactNode]
+}
+
+export function ResizablePanel({
+  defaultSize = 50,
+  min = 20,
+  max = 80,
+  orientation = 'vertical',
+  label = 'Resize panels',
+  className,
+  style,
+  children,
+}: ResizablePanelProps) {
+  const [size, setSize] = useState(defaultSize)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const dragging = useRef(false)
+
+  const clamp = useCallback((v: number) => Math.min(max, Math.max(min, v)), [min, max])
+
+  const onMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault()
+      dragging.current = true
+
+      const onMove = (me: MouseEvent) => {
+        if (!dragging.current || !containerRef.current) return
+        const rect = containerRef.current.getBoundingClientRect()
+        const pct =
+          orientation === 'vertical'
+            ? ((me.clientX - rect.left) / rect.width) * 100
+            : ((me.clientY - rect.top) / rect.height) * 100
+        setSize(clamp(Math.round(pct)))
+      }
+
+      const onUp = () => {
+        dragging.current = false
+        window.removeEventListener('mousemove', onMove)
+        window.removeEventListener('mouseup', onUp)
+      }
+
+      window.addEventListener('mousemove', onMove)
+      window.addEventListener('mouseup', onUp)
+    },
+    [orientation, clamp],
+  )
+
+  const onKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      const step = e.shiftKey ? 10 : 1
+      if (orientation === 'vertical') {
+        if (e.key === 'ArrowLeft') {
+          e.preventDefault()
+          setSize((s) => clamp(s - step))
+        }
+        if (e.key === 'ArrowRight') {
+          e.preventDefault()
+          setSize((s) => clamp(s + step))
+        }
+      } else {
+        if (e.key === 'ArrowUp') {
+          e.preventDefault()
+          setSize((s) => clamp(s - step))
+        }
+        if (e.key === 'ArrowDown') {
+          e.preventDefault()
+          setSize((s) => clamp(s + step))
+        }
+      }
+      if (e.key === 'Home') {
+        e.preventDefault()
+        setSize(min)
+      }
+      if (e.key === 'End') {
+        e.preventDefault()
+        setSize(max)
+      }
+    },
+    [orientation, min, max, clamp],
+  )
+
+  const firstStyle =
+    orientation === 'vertical'
+      ? { flex: `0 0 ${size}%`, minWidth: 0 }
+      : { flex: `0 0 ${size}%`, minHeight: 0 }
+
+  return (
+    <div
+      ref={containerRef}
+      className={['rp', `rp--${orientation}`, className].filter(Boolean).join(' ')}
+      style={style}
+    >
+      <div className="rp-pane" style={firstStyle}>
+        {children[0]}
+      </div>
+      <div
+        role="separator"
+        tabIndex={0}
+        aria-orientation={orientation}
+        aria-valuenow={size}
+        aria-valuemin={min}
+        aria-valuemax={max}
+        aria-label={label}
+        className="rp-handle"
+        onMouseDown={onMouseDown}
+        onKeyDown={onKeyDown}
+      />
+      <div className="rp-pane rp-pane--second">{children[1]}</div>
+    </div>
+  )
+}

package/src/components/RidgelinePlot.tsx

@@ -0,0 +1,155 @@
+export interface RidgelineSeries {
+  label: string
+  values: number[]
+  color?: string
+}
+
+export interface RidgelinePlotProps {
+  series: RidgelineSeries[]
+  xRange?: [number, number]
+  height?: number
+  ariaLabel?: string
+}
+
+const COLORS = ['#006FFF', '#00C8C8', '#F5A623', '#7FB6FF', '#A878F5', '#F56342']
+const SQRT_TWO_PI = Math.sqrt(2 * Math.PI)
+const NUM_PTS = 80
+
+function bandwidth(vals: number[]): number {
+  const n = vals.length
+  const m = vals.reduce((a, b) => a + b, 0) / n
+  const s = Math.sqrt(vals.reduce((a, b) => a + (b - m) ** 2, 0) / n)
+  return Math.max(0.9 * s * Math.pow(n, -0.2), 0.5)
+}
+
+function kde(vals: number[], bw: number, pts: number[]): number[] {
+  const n = vals.length
+  const c = 1 / (n * bw * SQRT_TWO_PI)
+  return pts.map(
+    (x) =>
+      c *
+      vals.reduce((acc, v) => {
+        const z = (x - v) / bw
+        return acc + Math.exp(-0.5 * z * z)
+      }, 0),
+  )
+}
+
+export function RidgelinePlot({
+  series,
+  xRange,
+  height = 180,
+  ariaLabel = 'Ridgeline plot',
+}: RidgelinePlotProps) {
+  const VW = 380
+  const VH = height
+  const PAD_L = 56
+  const PAD_R = 12
+  const PAD_T = 16
+  const PAD_B = 20
+
+  const TRACK_W = VW - PAD_L - PAD_R
+  const TRACK_H = VH - PAD_T - PAD_B
+  const n = series.length
+  const rowH = TRACK_H / n
+  const maxDensH = rowH * 1.6
+
+  const allVals = series.flatMap((s) => s.values)
+  const [xMin, xMax] = xRange ?? [Math.min(...allVals), Math.max(...allVals)]
+
+  const evalPts = Array.from(
+    { length: NUM_PTS },
+    (_, i) => xMin + (i / (NUM_PTS - 1)) * (xMax - xMin),
+  )
+
+  function xSvg(v: number) {
+    return PAD_L + ((v - xMin) / (xMax - xMin)) * TRACK_W
+  }
+
+  const ridges = series.map((s, si) => {
+    const bw = bandwidth(s.values)
+    const dens = kde(s.values, bw, evalPts)
+    const maxD = Math.max(...dens, 1e-9)
+    const baselineY = PAD_T + (si + 1) * rowH
+    const color = s.color ?? COLORS[si % COLORS.length]
+
+    const d = [
+      `M${xSvg(xMin).toFixed(1)},${baselineY.toFixed(1)}`,
+      ...evalPts.map(
+        (v, i) => `L${xSvg(v).toFixed(1)},${(baselineY - (dens[i] / maxD) * maxDensH).toFixed(1)}`,
+      ),
+      `L${xSvg(xMax).toFixed(1)},${baselineY.toFixed(1)}`,
+      'Z',
+    ].join(' ')
+
+    return { d, baselineY, color, label: s.label }
+  })
+
+  const xTicks = [0, 0.25, 0.5, 0.75, 1].map((t) => {
+    const v = xMin + t * (xMax - xMin)
+    return { v, x: xSvg(v) }
+  })
+
+  const reversedRidges = [...ridges].reverse()
+
+  return (
+    <div role="img" aria-label={ariaLabel} style={{ width: '100%' }}>
+      <svg
+        viewBox={`0 0 ${VW} ${VH}`}
+        style={{ width: '100%', height: 'auto', display: 'block' }}
+        aria-hidden="true"
+        focusable="false"
+      >
+        {xTicks.map(({ v, x }) => (
+          <g key={v}>
+            <line
+              x1={x}
+              y1={PAD_T}
+              x2={x}
+              y2={VH - PAD_B}
+              stroke="rgba(255,255,255,0.06)"
+              strokeWidth={1}
+            />
+            <text
+              x={x}
+              y={VH - PAD_B + 12}
+              fill="#6E7079"
+              fontSize={8}
+              textAnchor="middle"
+              fontFamily="inherit"
+            >
+              {v.toFixed(0)}
+            </text>
+          </g>
+        ))}
+        {reversedRidges.map((r) => (
+          <g key={r.label}>
+            <line
+              x1={PAD_L}
+              y1={r.baselineY}
+              x2={VW - PAD_R}
+              y2={r.baselineY}
+              stroke="rgba(255,255,255,0.08)"
+              strokeWidth={0.5}
+            />
+            <path d={r.d} fill={r.color} opacity={0.45} />
+            <path d={r.d} fill="none" stroke={r.color} strokeWidth={1.2} opacity={0.9} />
+          </g>
+        ))}
+        {ridges.map((r, si) => (
+          <text
+            key={si}
+            x={PAD_L - 4}
+            y={r.baselineY - 2}
+            fill="#A4A7B5"
+            fontSize={8}
+            textAnchor="end"
+            fontFamily="inherit"
+          >
+            {r.label}
+          </text>
+        ))}
+      </svg>
+    </div>
+  )
+}

package/src/components/SankeyDiagram.tsx

@@ -0,0 +1,156 @@
+import { useMemo } from 'react'
+
+export interface SankeyLink {
+  source: string
+  target: string
+  value: number
+}
+
+export interface SankeyNode {
+  id: string
+  label: string
+  color?: string
+}
+
+export interface SankeyDiagramProps {
+  nodes: SankeyNode[]
+  links: SankeyLink[]
+  height?: number
+  ariaLabel?: string
+}
+
+const VW = 320
+const NODE_W = 10
+const NODE_GAP = 8
+const PAD = 16
+const PALETTE = ['#006FFF', '#00C875', '#A78BFA', '#F5A623', '#50B8E7', '#F04949']
+
+interface PositionedNode {
+  id: string
+  label: string
+  color: string
+  x: number
+  y: number
+  h: number
+  side: 'left' | 'right'
+}
+
+export function SankeyDiagram({
+  nodes,
+  links,
+  height = 180,
+  ariaLabel = 'Sankey diagram',
+}: SankeyDiagramProps) {
+  const { positioned, paths } = useMemo(() => {
+    if (!nodes.length || !links.length)
+      return { positioned: [] as PositionedNode[], paths: [] as { d: string; color: string }[] }
+
+    const nodeMap = new Map(
+      nodes.map((n, i) => [n.id, { ...n, color: n.color ?? PALETTE[i % PALETTE.length] }]),
+    )
+    const outflow = new Map<string, number>()
+    const inflow = new Map<string, number>()
+    for (const l of links) {
+      outflow.set(l.source, (outflow.get(l.source) ?? 0) + l.value)
+      inflow.set(l.target, (inflow.get(l.target) ?? 0) + l.value)
+    }
+
+    const leftIds = [...new Set(links.map((l) => l.source))].filter((id) => !inflow.has(id))
+    const rightIds = [...new Set(links.map((l) => l.target))].filter((id) => !outflow.has(id))
+    const totalFlow = links.reduce((s, l) => s + l.value, 0)
+
+    const leftAvailH = height - PAD * 2 - (leftIds.length - 1) * NODE_GAP
+    const rightAvailH = height - PAD * 2 - (rightIds.length - 1) * NODE_GAP
+
+    const positioned: PositionedNode[] = []
+
+    let y = PAD
+    for (const id of leftIds) {
+      const n = nodeMap.get(id)!
+      const h = Math.max(4, ((outflow.get(id) ?? 0) / totalFlow) * leftAvailH)
+      positioned.push({ id, label: n.label, color: n.color, x: PAD, y, h, side: 'left' })
+      y += h + NODE_GAP
+    }
+
+    y = PAD
+    for (const id of rightIds) {
+      const n = nodeMap.get(id)!
+      const h = Math.max(4, ((inflow.get(id) ?? 0) / totalFlow) * rightAvailH)
+      positioned.push({
+        id,
+        label: n.label,
+        color: n.color,
+        x: VW - PAD - NODE_W,
+        y,
+        h,
+        side: 'right',
+      })
+      y += h + NODE_GAP
+    }
+
+    const sourcePort = new Map<string, number>(
+      positioned.filter((n) => n.side === 'left').map((n) => [n.id, n.y]),
+    )
+    const targetPort = new Map<string, number>(
+      positioned.filter((n) => n.side === 'right').map((n) => [n.id, n.y]),
+    )
+
+    const paths: { d: string; color: string }[] = []
+    for (const l of links) {
+      const srcNode = positioned.find((n) => n.id === l.source)
+      const tgtNode = positioned.find((n) => n.id === l.target)
+      if (!srcNode || !tgtNode) continue
+
+      const lh = Math.max(1, (l.value / totalFlow) * leftAvailH)
+      const sy = sourcePort.get(l.source)!
+      const ty = targetPort.get(l.target)!
+      sourcePort.set(l.source, sy + lh)
+      targetPort.set(l.target, ty + lh)
+
+      const x1 = srcNode.x + NODE_W
+      const x2 = tgtNode.x
+      const cx = (x1 + x2) / 2
+      const d = `M${x1},${sy.toFixed(1)} C${cx},${sy.toFixed(1)} ${cx},${ty.toFixed(1)} ${x2},${ty.toFixed(1)} L${x2},${(ty + lh).toFixed(1)} C${cx},${(ty + lh).toFixed(1)} ${cx},${(sy + lh).toFixed(1)} ${x1},${(sy + lh).toFixed(1)} Z`
+      paths.push({ d, color: srcNode.color })
+    }
+
+    return { positioned, paths }
+  }, [nodes, links, height])
+
+  return (
+    <div role="img" aria-label={ariaLabel} style={{ width: '100%' }}>
+      <svg
+        viewBox={`0 0 ${VW} ${height}`}
+        style={{ width: '100%', height: 'auto', display: 'block' }}
+        aria-hidden="true"
+        focusable="false"
+      >
+        {paths.map((p, i) => (
+          <path key={i} d={p.d} fill={p.color} fillOpacity={0.35} />
+        ))}
+        {positioned.map((n) => (
+          <g key={n.id}>
+            <rect
+              x={n.x}
+              y={n.y.toFixed(1)}
+              width={NODE_W}
+              height={n.h.toFixed(1)}
+              fill={n.color}
+              rx={2}
+            />
+            <text
+              x={n.side === 'left' ? n.x + NODE_W + 5 : n.x - 5}
+              y={(n.y + n.h / 2 + 4).toFixed(1)}
+              textAnchor={n.side === 'left' ? 'start' : 'end'}
+              fill="#C8C9D0"
+              fontSize={9}
+              fontFamily="inherit"
+            >
+              {n.label}
+            </text>
+          </g>
+        ))}
+      </svg>
+    </div>
+  )
+}

package/src/components/ScatterPlot.tsx

@@ -0,0 +1,96 @@
+import { useMemo } from 'react'
+
+export interface ScatterPoint {
+  x: number
+  y: number
+  color?: string
+  r?: number
+  key?: string
+}
+
+export interface ScatterPlotProps {
+  points: ScatterPoint[]
+  xRange?: [number, number]
+  yRange?: [number, number]
+  height?: number
+  ariaLabel?: string
+}
+
+const VW = 400
+const PAD = { t: 12, r: 8, b: 12, l: 8 }
+const DEFAULT_COLOR = '#006FFF'
+
+export function ScatterPlot({
+  points,
+  xRange,
+  yRange,
+  height = 160,
+  ariaLabel = 'Scatter plot',
+}: ScatterPlotProps) {
+  const { dots, gridLines } = useMemo(() => {
+    if (!points.length) return { dots: [], gridLines: [] }
+    const xs = points.map((p) => p.x)
+    const ys = points.map((p) => p.y)
+    const x0 = xRange?.[0] ?? Math.min(...xs)
+    const x1 = xRange?.[1] ?? Math.max(...xs)
+    const y0 = yRange?.[0] ?? Math.min(...ys)
+    const y1 = yRange?.[1] ?? Math.max(...ys)
+    const xSpan = x1 - x0 || 1
+    const ySpan = y1 - y0 || 1
+    const chartW = VW - PAD.l - PAD.r
+    const chartH = height - PAD.t - PAD.b
+
+    const toX = (x: number) => PAD.l + ((x - x0) / xSpan) * chartW
+    const toY = (y: number) => PAD.t + chartH - ((y - y0) / ySpan) * chartH
+
+    const gridLines = [0.25, 0.5, 0.75].map((f) => ({
+      x: PAD.l + f * chartW,
+      y: PAD.t + (1 - f) * chartH,
+    }))
+
+    const dots = points.map((p, i) => ({
+      cx: toX(p.x).toFixed(1),
+      cy: toY(p.y).toFixed(1),
+      r: p.r ?? 5,
+      color: p.color ?? DEFAULT_COLOR,
+      key: p.key ?? String(i),
+    }))
+
+    return { dots, gridLines }
+  }, [points, xRange, yRange, height])
+
+  return (
+    <div role="img" aria-label={ariaLabel} style={{ width: '100%' }}>
+      <svg
+        viewBox={`0 0 ${VW} ${height}`}
+        style={{ width: '100%', height: 'auto', display: 'block' }}
+        aria-hidden="true"
+        focusable="false"
+      >
+        {gridLines.map((g, i) => (
+          <g key={i}>
+            <line
+              x1={g.x}
+              y1={PAD.t}
+              x2={g.x}
+              y2={PAD.t + (height - PAD.t - PAD.b)}
+              stroke="rgba(255,255,255,0.06)"
+              strokeWidth={1}
+            />
+            <line
+              x1={PAD.l}
+              y1={g.y}
+              x2={VW - PAD.r}
+              y2={g.y}
+              stroke="rgba(255,255,255,0.06)"
+              strokeWidth={1}
+            />
+          </g>
+        ))}
+        {dots.map((d) => (
+          <circle key={d.key} cx={d.cx} cy={d.cy} r={d.r} fill={d.color} fillOpacity={0.8} />
+        ))}
+      </svg>
+    </div>
+  )
+}