@seekalfred/primitives 0.6.0 → 0.7.1

package/dist/line-chart/line-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"line-chart.js","names":[],"sources":["../../src/line-chart/line-chart.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\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 { SMOOTH, SNAPPY, tween } from \"../lib/spring-tween.js\";\n\n/**\n * LineChart: one or more measures over time, when the shape of the trend\n * matters more than any single value.\n *\n * The lines draw left to right the first time the chart is seen. New data\n * morphs every line from the shape on screen, and the value axis slides to its\n * new range while gridlines fade in and out. Hiding a series flattens it into\n * the baseline as it fades and the rest rescale. Hover, drag or the arrow keys\n * scrub: a crosshair glides between points with a dot on each line and a\n * tooltip that follows on its own spring and flips before it leaves the plot.\n * `loading` keeps the current lines on screen, dimmed and breathing.\n *\n * Plain SVG and CSS; one small spring tween drives the shapes, the scale and\n * the crosshair. A visually hidden table carries every value for assistive\n * technology, and the plot itself is a slider.\n */\nexport interface LineChartSeries {\n  /** Stable identity. A series keeps its line across data changes, so switching ranges morphs it. */\n  key: string;\n  /** Name in the legend, the tooltip and the data table. */\n  label: string;\n  /** Any CSS colour. Defaults to chart-1 for the first series, then quieter neutral steps. */\n  color?: string;\n  /** A dashed stroke, for a previous period or a target. */\n  dashed?: boolean;\n  /** A faint fill under the line. Defaults to true for the first series. */\n  area?: boolean;\n}\n\nexport interface LineChartDatum {\n  /** Stable identity, such as an ISO date. */\n  key: string;\n  /** Full label for the tooltip and screen readers, such as \"Tue, Sep 15\". */\n  label: string;\n  /** Short label on the x axis. Leave it out to keep the axis quiet at that point. */\n  axisLabel?: string;\n  /** One value per series key. A missing value counts as zero. */\n  values: Record<string, number | undefined>;\n}\n\nexport interface LineChartProps {\n  data: LineChartDatum[];\n  series: LineChartSeries[];\n  /** What is measured, such as \"Signups\". Names the chart for assistive technology. */\n  label: string;\n  /** Unit after each value in the tooltip, such as \"ms\". */\n  unit?: string;\n  /** Plot height in pixels. The width follows the container. @default 220 */\n  height?: number;\n  /** Formats values in the tooltip and data table. */\n  formatValue?: (value: number, series: LineChartSeries) => string;\n  /** Formats the value axis. Defaults to a compact number, such as 1.2K. */\n  formatTick?: (value: number) => string;\n  /** Controlled hidden series keys. */\n  hiddenSeries?: string[];\n  defaultHiddenSeries?: string[];\n  onHiddenSeriesChange?: (hidden: string[]) => void;\n  /** Called as the crosshair moves, and with null when it leaves. */\n  onActiveChange?: (index: number | null, datum: LineChartDatum | null) => void;\n  /** Keeps the current lines on screen, dimmed, while the next range loads. */\n  loading?: boolean;\n  /** Shown when there are no points. @default \"No data for this range\" */\n  emptyLabel?: string;\n  /** Series toggles above the plot. Shown by default when there is more than one series. */\n  legend?: boolean;\n  /** Header of the first column in the data table read by screen readers. @default \"Date\" */\n  categoryLabel?: string;\n  /** Smooth monotone curves that never swing past the data, or straight segments. @default \"smooth\" */\n  curve?: \"smooth\" | \"linear\";\n  /** Extra classes for the root. Merged last. */\n  className?: string;\n}\n\ntype Point = [x: number, value: number];\ntype Track = { shape: Point[]; presence: number; stop: (() => void) | null };\n\n/** Room above the top gridline, and the gap between the crosshair and its tooltip. */\nconst TOP = 12;\nconst GAP = 14;\n/** The first draw: 480ms x 1.75, slow at both ends. */\nexport const LINE_CHART_DRAW_MS = 840;\nconst PALETTE = [\n  \"var(--color-chart-1)\",\n  \"color-mix(in oklab, var(--color-foreground) 46%, var(--color-surface))\",\n  \"color-mix(in oklab, var(--color-foreground) 26%, var(--color-surface))\",\n];\nconst GROUPED = new Intl.NumberFormat(\"en-US\", { maximumFractionDigits: 1 });\nconst COMPACT = new Intl.NumberFormat(\"en-US\", { notation: \"compact\", maximumFractionDigits: 1 });\nconst GRID = Array.from({ length: 241 }, (_, index) => index / 240);\nconst clamp = (value: number, low: number, high: number) => Math.min(high, Math.max(low, value));\nconst colorOf = (line: LineChartSeries, index: number) =>\n  line.color ?? PALETTE[Math.min(index, PALETTE.length - 1)]!;\nconst clean = (value: number) => Number(value.toPrecision(12));\n\n/** Clean gridlines: the smallest step of 1, 2, 2.5 or 5 that covers the data in four rows or fewer, from zero unless the data dips below it. */\nfunction niceScale(low: number, high: number) {\n  const lo = Math.min(0, low);\n  const hi = Math.max(high, lo + 1);\n  const magnitude = 10 ** Math.floor(Math.log10((hi - lo) / 4));\n  for (const factor of [1, 2, 2.5, 5, 10]) {\n    const step = factor * magnitude;\n    const bottom = Math.floor(lo / step) * step;\n    const top = Math.ceil(hi / step) * step;\n    if ((top - bottom) / step <= 4 + 1e-9) {\n      const ticks: number[] = [];\n      for (let value = bottom; value <= top + step / 2; value += step) ticks.push(clean(value));\n      return { min: clean(bottom), max: clean(top), ticks };\n    }\n  }\n  return { min: lo, max: hi, ticks: [lo, hi] };\n}\n\n/** The line through every value, sampled densely on x from 0 to 1 in data units. Monotone tangents keep a smooth curve from swinging past the data. */\nfunction curveFor(values: number[], smooth: boolean): Point[] {\n  if (values.length === 0) return [];\n  if (values.length === 1) return [[0, values[0]!], [1, values[0]!]];\n  const last = values.length - 1;\n  const step = 1 / last;\n  if (!smooth) return values.map((value, index) => [index * step, value]);\n  const slopes = values.slice(1).map((value, index) => (value - values[index]!) / step);\n  const tangents = values.map((_, index) =>\n    index === 0 || index === last\n      ? 0\n      : (Math.sign(slopes[index - 1]!) + Math.sign(slopes[index]!)) *\n          Math.min(\n            Math.abs(slopes[index - 1]!),\n            Math.abs(slopes[index]!),\n            Math.abs(slopes[index - 1]! + slopes[index]!) / 4,\n          ) || 0,\n  );\n  if (last > 1) {\n    tangents[0] = (3 * slopes[0]! - tangents[1]!) / 2;\n    tangents[last] = (3 * slopes[last - 1]! - tangents[last - 1]!) / 2;\n  } else {\n    tangents[0] = slopes[0]!;\n    tangents[1] = slopes[0]!;\n  }\n  const samples = Math.max(1, Math.min(16, Math.round(192 / last)));\n  const points: Point[] = [];\n  for (let index = 0; index < last; index++) {\n    const low = Math.min(values[index]!, values[index + 1]!);\n    const high = Math.max(values[index]!, values[index + 1]!);\n    for (let sample = 0; sample < samples; sample++) {\n      const t = sample / samples;\n      const t2 = t * t;\n      const t3 = t2 * t;\n      const value =\n        (2 * t3 - 3 * t2 + 1) * values[index]! +\n        (t3 - 2 * t2 + t) * step * tangents[index]! +\n        (3 * t2 - 2 * t3) * values[index + 1]! +\n        (t3 - t2) * step * tangents[index + 1]!;\n      points.push([(index + t) * step, clamp(value, low, high)]);\n    }\n  }\n  points.push([1, values[last]!]);\n  return points;\n}\n\n/** Value of a sampled line at x, straight between samples. */\nfunction valueAt(shape: Point[], x: number) {\n  if (!shape.length) return 0;\n  let low = 0;\n  let high = shape.length - 1;\n  if (x <= shape[low]![0]) return shape[low]![1];\n  if (x >= shape[high]![0]) return shape[high]![1];\n  while (high - low > 1) {\n    const middle = (low + high) >> 1;\n    if (shape[middle]![0] < x) low = middle;\n    else high = middle;\n  }\n  const [x0, y0] = shape[low]!;\n  const [x1, y1] = shape[high]!;\n  return x1 === x0 ? y1 : y0 + ((y1 - y0) * (x - x0)) / (x1 - x0);\n}\n\n/** Axis labels that fit: at most one per 76 pixels, counted back from the latest so the newest always shows. */\nfunction axisPicks(data: LineChartDatum[], width: number) {\n  const labeled = data.flatMap((item, index) => (item.axisLabel ? [index] : []));\n  if (!width || !labeled.length) return [];\n  const room = Math.max(2, Math.floor(width / 76));\n  const stride = Math.ceil(labeled.length / room);\n  return labeled\n    .reverse()\n    .filter((_, rank) => rank % stride === 0)\n    .reverse();\n}\n\nexport const LineChart = forwardRef<HTMLElement, LineChartProps>(function LineChart(\n  {\n    data,\n    series,\n    label,\n    unit = \"\",\n    height = 220,\n    formatValue,\n    formatTick = (value) => COMPACT.format(value),\n    hiddenSeries,\n    defaultHiddenSeries,\n    onHiddenSeriesChange,\n    onActiveChange,\n    loading = false,\n    emptyLabel = \"No data for this range\",\n    legend,\n    categoryLabel = \"Date\",\n    curve = \"smooth\",\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 svg = useRef<SVGSVGElement>(null);\n  const tip = useRef<HTMLDivElement>(null);\n  const gutter = useRef<HTMLDivElement>(null);\n  const uid = `line${useId().replace(/[^a-zA-Z0-9_-]/g, \"\")}`;\n  const last = data.length - 1;\n  const empty = data.length === 0;\n\n  const [ownHidden, setOwnHidden] = useState<string[]>(defaultHiddenSeries ?? []);\n  const hidden = hiddenSeries ?? ownHidden;\n  const toggle = (key: string) => {\n    const next = hidden.includes(key) ? hidden.filter((item) => item !== key) : [...hidden, key];\n    if (hiddenSeries === undefined) setOwnHidden(next);\n    onHiddenSeriesChange?.(next);\n  };\n  const visible = series.filter((line) => !hidden.includes(line.key));\n  const showLegend = legend ?? series.length > 1;\n\n  // Each series becomes a dense curve in data units; the scale fits only the series on show.\n  const signature = `${curve}|${series.map((line) => line.key).join(\",\")}|${data\n    .map((item) => `${item.key}:${series.map((line) => item.values[line.key] ?? 0).join(\",\")}`)\n    .join(\";\")}`;\n  const targets = useMemo(\n    () =>\n      new Map(\n        series.map((line) => [\n          line.key,\n          curveFor(\n            data.map((item) => item.values[line.key] ?? 0),\n            curve === \"smooth\",\n          ),\n        ]),\n      ),\n    // The signature captures everything the curves read.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [signature],\n  );\n  let low = Infinity;\n  let high = -Infinity;\n  for (const line of visible) {\n    for (const item of data) {\n      const value = item.values[line.key] ?? 0;\n      low = Math.min(low, value);\n      high = Math.max(high, value);\n    }\n  }\n  const range = Number.isFinite(low) ? niceScale(low, high) : null;\n  const [steady, setSteady] = useState(() => range ?? niceScale(0, 100));\n  if (range && (range.min !== steady.min || range.max !== steady.max)) setSteady(range);\n\n  // Scrubbing: a new range lets go of the crosshair.\n  const [active, setActive] = useState<number | null>(null);\n  const [seen, setSeen] = useState(signature);\n  if (seen !== signature) {\n    setSeen(signature);\n    setActive(null);\n  }\n  const index = active === null || empty ? null : Math.min(active, last);\n  const scrubbing = index !== null;\n\n  const width = useRef(0);\n  const [plotWidth, setPlotWidth] = useState(0);\n  const [drawn, setDrawn] = useState(false);\n  const tracks = useRef(new Map<string, Track>());\n  const scale = useRef({ min: steady.min, max: steady.max });\n  const cursor = useRef(1);\n  const live = useRef({ series, hidden });\n  useIsomorphicLayoutEffect(() => {\n    live.current = { series, hidden };\n  });\n\n  /** One writer for every drawn attribute: morphs, toggles, the scale, the crosshair and the size all repaint through here. */\n  const paint = useCallback(() => {\n    const w = width.current;\n    const root = svg.current;\n    if (!w || !root) return;\n    const lo = scale.current.min;\n    const span = scale.current.max - lo || 1;\n    const toY = (value: number) => TOP + (1 - (value - lo) / span) * (height - TOP);\n    const at = cursor.current;\n    const dotYs: number[] = [];\n    for (const line of live.current.series) {\n      const track = tracks.current.get(line.key);\n      if (!track) continue;\n      const p = track.presence;\n      const y = (value: number) => toY(lo + (value - lo) * p);\n      const path = track.shape.length\n        ? `M${track.shape.map(([x, value]) => `${(x * w).toFixed(1)},${y(value).toFixed(1)}`).join(\"L\")}`\n        : \"\";\n      const group = root.querySelector<SVGGElement>(`[data-series=\"${CSS.escape(line.key)}\"]`);\n      group?.querySelector(\"[data-part=line]\")?.setAttribute(\"d\", path);\n      group?.querySelector(\"[data-part=area]\")?.setAttribute(\"d\", path ? `${path}L${w},${height}L0,${height}Z` : \"\");\n      if (group) group.style.opacity = String(p);\n      const dot = root.querySelector<SVGCircleElement>(`[data-dot=\"${CSS.escape(line.key)}\"]`);\n      if (dot && track.shape.length) {\n        const cy = y(valueAt(track.shape, at));\n        dot.setAttribute(\"cx\", (at * w).toFixed(1));\n        dot.setAttribute(\"cy\", cy.toFixed(1));\n        if (p > 0.5) dotYs.push(cy);\n      }\n    }\n    // Gridlines and tick labels ride the scale.\n    for (const node of root.querySelectorAll<SVGLineElement>(\"[data-grid]\")) {\n      const yy = String(Math.round(toY(Number(node.dataset.grid))) + 0.5);\n      node.setAttribute(\"y1\", yy);\n      node.setAttribute(\"y2\", yy);\n    }\n    for (const node of gutter.current?.querySelectorAll<HTMLElement>(\"[data-tick]\") ?? []) {\n      node.style.translate = `0 ${Math.round(toY(Number(node.dataset.tick)))}px`;\n    }\n    const cx = Math.round(at * w) + 0.5;\n    const cross = root.querySelector(\"[data-part=crosshair]\");\n    cross?.setAttribute(\"x1\", String(cx));\n    cross?.setAttribute(\"x2\", String(cx));\n    // The tooltip sits beside the crosshair, flips sides before it would leave the plot, and centres on the points it describes.\n    const bubble = tip.current;\n    if (bubble) {\n      const tw = bubble.offsetWidth;\n      const th = bubble.offsetHeight;\n      let x = cx + GAP;\n      if (x + tw > w) x = cx - GAP - tw;\n      const middle = dotYs.length ? dotYs.reduce((sum, value) => sum + value, 0) / dotYs.length : height / 2;\n      bubble.style.translate = `${clamp(x, 0, Math.max(0, w - tw))}px ${clamp(middle - th / 2, 0, Math.max(0, height - th))}px`;\n    }\n  }, [height]);\n\n  // The plot draws in its own pixels: measure the width and follow resizes.\n  useIsomorphicLayoutEffect(() => {\n    const node = plot.current;\n    if (!node) return;\n    const read = () => {\n      width.current = node.clientWidth;\n      setPlotWidth(node.clientWidth);\n      paint();\n    };\n    read();\n    if (typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(read);\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, [paint]);\n  useIsomorphicLayoutEffect(paint);\n\n  // New data morphs every line from the shape on screen, sampled on shared x positions so a range that gains or loses points still flows.\n  useEffect(() => {\n    const moves: { track: Track; xs: number[]; from: number[]; to: number[]; target: Point[] }[] = [];\n    for (const [key, target] of targets) {\n      const track = tracks.current.get(key);\n      if (!track) {\n        tracks.current.set(key, { shape: target, presence: live.current.hidden.includes(key) ? 0 : 1, stop: null });\n        continue;\n      }\n      if (!track.shape.length || !target.length) {\n        track.shape = target;\n        continue;\n      }\n      const xs = [...new Set([...GRID, ...target.map(([x]) => x)])].sort((a, b) => a - b);\n      moves.push({ track, xs, from: xs.map((x) => valueAt(track.shape, x)), to: xs.map((x) => valueAt(target, x)), target });\n    }\n    if (!moves.length) {\n      paint();\n      return;\n    }\n    return tween(\n      SMOOTH,\n      (p) => {\n        for (const move of moves) {\n          move.track.shape = move.xs.map((x, at): Point => [x, move.from[at]! + (move.to[at]! - move.from[at]!) * p]);\n        }\n        paint();\n      },\n      () => {\n        for (const move of moves) move.track.shape = move.target;\n        paint();\n      },\n    );\n  }, [paint, targets]);\n\n  // A hidden series flattens into the baseline as it fades; the ones that stay rescale around it.\n  const hiddenKey = hidden.join(\"|\");\n  useEffect(() => {\n    for (const [key, track] of tracks.current) {\n      const to = hidden.includes(key) ? 0 : 1;\n      if (track.presence === to) continue;\n      track.stop?.();\n      const from = track.presence;\n      track.stop = tween(SMOOTH, (p) => {\n        track.presence = from + (to - from) * p;\n        paint();\n      });\n    }\n    paint();\n    // hiddenKey stands for `hidden`.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [hiddenKey, paint]);\n\n  // The value axis slides to its new range on the smooth spring.\n  useEffect(() => {\n    const from = { ...scale.current };\n    if (from.min === steady.min && from.max === steady.max) return;\n    return tween(SMOOTH, (p) => {\n      scale.current = { min: from.min + (steady.min - from.min) * p, max: from.max + (steady.max - from.max) * p };\n      paint();\n    });\n  }, [paint, steady]);\n\n  // The lines draw left to right the first time the chart is seen with data.\n  useEffect(() => {\n    if (empty || drawn) return;\n    const node = figure.current;\n    if (!node || prefersReducedMotion() || typeof IntersectionObserver === \"undefined\") {\n      setDrawn(true);\n      return;\n    }\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        if (!entry?.isIntersecting) return;\n        observer.disconnect();\n        setDrawn(true);\n      },\n      { threshold: 0.3 },\n    );\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, [drawn, empty]);\n\n  // The crosshair appears on the first scrubbed point and glides between the ones after it.\n  const wasScrubbing = useRef(false);\n  useEffect(() => {\n    if (index === null) {\n      wasScrubbing.current = false;\n      return;\n    }\n    const to = last > 0 ? index / last : 0.5;\n    const from = cursor.current;\n    if (!wasScrubbing.current) {\n      wasScrubbing.current = true;\n      cursor.current = to;\n      paint();\n      return;\n    }\n    return tween(SNAPPY, (p) => {\n      cursor.current = from + (to - from) * p;\n      paint();\n    });\n  }, [index, last, paint]);\n\n  const onActive = useRef(onActiveChange);\n  useIsomorphicLayoutEffect(() => {\n    onActive.current = onActiveChange;\n  });\n  useEffect(() => {\n    onActive.current?.(index, index === null ? null : (data[index] ?? null));\n    // Report only when the scrubbed point changes.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [index]);\n\n  const pointAt = (clientX: number) => {\n    const rect = plot.current?.getBoundingClientRect();\n    if (!rect?.width || last < 1) return Math.max(0, last);\n    return clamp(Math.round(((clientX - rect.left) / rect.width) * last), 0, last);\n  };\n  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === \"Escape\" && scrubbing) {\n      event.preventDefault();\n      setActive(null);\n      return;\n    }\n    const from = index ?? last + 1;\n    const page = Math.max(1, Math.round(data.length / 6));\n    const next = (\n      {\n        ArrowLeft: from - 1,\n        ArrowDown: from - 1,\n        ArrowRight: index === null ? last : from + 1,\n        ArrowUp: index === null ? last : from + 1,\n        PageDown: from - page,\n        PageUp: from + page,\n        Home: 0,\n        End: last,\n      } as Record<string, number>\n    )[event.key];\n    if (next === undefined || empty) return;\n    event.preventDefault();\n    setActive(clamp(next, 0, last));\n  };\n  const onPointerDown = (event: PointerEvent<HTMLDivElement>) => {\n    if (empty) return;\n    if (event.pointerType !== \"mouse\") event.currentTarget.setPointerCapture?.(event.pointerId);\n    setActive(pointAt(event.clientX));\n  };\n  const onPointerMove = (event: PointerEvent<HTMLDivElement>) => {\n    if (!empty && (event.pointerType === \"mouse\" || event.buttons)) setActive(pointAt(event.clientX));\n  };\n\n  const format = (value: number, line: LineChartSeries) =>\n    `${formatValue ? formatValue(value, line) : GROUPED.format(value)}${unit ? ` ${unit}` : \"\"}`;\n  const reading = index === null ? null : data[index];\n  const shown = reading ?? data[last];\n  const valueText = reading\n    ? `${reading.label}: ${visible.map((line) => `${line.label} ${format(reading.values[line.key] ?? 0, line)}`).join(\", \")}`\n    : empty\n      ? emptyLabel\n      : `${visible.length} of ${series.length} series shown`;\n  const summary = empty\n    ? `${label}. ${emptyLabel}.`\n    : `${label}, ${data[0]!.label} to ${data[last]!.label}. ${visible\n        .map((line) => `${line.label}, latest ${format(data[last]!.values[line.key] ?? 0, line)}`)\n        .join(\". \")}.`;\n  const picks = axisPicks(data, plotWidth);\n  const allHidden = !empty && visible.length === 0;\n\n  return (\n    <figure\n      ref={refs}\n      data-slot=\"line-chart\"\n      aria-label={label}\n      aria-busy={loading || undefined}\n      className={cn(\"m-0 grid min-w-0 gap-4 box-border font-sans text-foreground\", className)}\n    >\n      {showLegend ? (\n        <div role=\"group\" aria-label={`${label} series`} className=\"-mx-2 flex min-w-0 flex-wrap gap-x-1 gap-y-0.5\">\n          {series.map((line, at) => (\n            <button\n              key={line.key}\n              type=\"button\"\n              data-slot=\"line-chart-toggle\"\n              aria-pressed={!hidden.includes(line.key)}\n              onClick={() => toggle(line.key)}\n              style={{ \"--series\": colorOf(line, at) } as CSSProperties}\n              className=\"chart-legend-toggle\"\n            >\n              <span aria-hidden=\"true\" data-dashed={line.dashed || undefined} className=\"chart-swatch\" />\n              <span className=\"chart-toggle-label\">{line.label}</span>\n            </button>\n          ))}\n        </div>\n      ) : null}\n      <div\n        data-slot=\"line-chart-chart\"\n        data-scrubbing={scrubbing || undefined}\n        data-loading={loading || undefined}\n        data-drawn={drawn || undefined}\n        className=\"line-chart-frame\"\n      >\n        <div\n          ref={plot}\n          data-slot=\"line-chart-plot\"\n          role=\"slider\"\n          tabIndex={empty ? -1 : 0}\n          aria-label={`${label}, explore by ${categoryLabel.toLowerCase()}`}\n          aria-orientation=\"horizontal\"\n          aria-valuemin={1}\n          aria-valuemax={Math.max(1, data.length)}\n          aria-valuenow={(index ?? last) + 1}\n          aria-valuetext={valueText}\n          onPointerDown={onPointerDown}\n          onPointerMove={onPointerMove}\n          onPointerUp={(event) => {\n            if (event.pointerType !== \"mouse\") setActive(null);\n          }}\n          onPointerCancel={() => setActive(null)}\n          onPointerLeave={(event) => {\n            if (event.pointerType === \"mouse\") setActive(null);\n          }}\n          onKeyDown={onKeyDown}\n          onBlur={() => setActive(null)}\n          onFocus={(event) => {\n            if (event.currentTarget.matches(\":focus-visible\") && !empty) setActive((current) => current ?? last);\n          }}\n          className=\"line-chart-plot\"\n          style={{ height }}\n        >\n          <svg ref={svg} width=\"100%\" height={height} aria-hidden=\"true\" focusable=\"false\" className=\"block overflow-visible\">\n            <defs>\n              <clipPath id={`${uid}-draw`} clipPathUnits=\"userSpaceOnUse\">\n                <rect className=\"line-chart-reveal\" x={-8} y={-16} height={height + 32} style={{ width: drawn ? plotWidth + 16 : 0 }} />\n              </clipPath>\n            </defs>\n            {steady.ticks.slice(1).map((value) => (\n              <line key={value} data-grid={value} className=\"line-chart-grid\" x1={0} x2=\"100%\" />\n            ))}\n            <line className=\"line-chart-baseline\" x1={0} x2=\"100%\" y1={height - 0.5} y2={height - 0.5} />\n            <line data-part=\"crosshair\" className=\"line-chart-crosshair\" y1={TOP - 4} y2={height} />\n            <g className=\"line-chart-series\" clipPath={`url(#${uid}-draw)`}>\n              {series.map((line, at) => (\n                <g key={line.key} data-series={line.key} style={{ \"--series\": colorOf(line, at) } as CSSProperties}>\n                  {(line.area ?? at === 0) ? <path data-part=\"area\" className=\"line-chart-area\" /> : null}\n                  <path data-part=\"line\" data-dashed={line.dashed || undefined} className=\"line-chart-line\" />\n                </g>\n              ))}\n            </g>\n            {series.map((line, at) => (\n              <circle\n                key={line.key}\n                data-dot={line.key}\n                data-hidden={hidden.includes(line.key) || undefined}\n                r={4}\n                className=\"line-chart-dot\"\n                style={{ \"--series\": colorOf(line, at) } as CSSProperties}\n              />\n            ))}\n          </svg>\n          <div ref={tip} aria-hidden=\"true\" data-slot=\"line-chart-tooltip\" className=\"line-chart-tooltip\">\n            <p className=\"m-0 mb-0.5 whitespace-nowrap text-xs tabular-nums text-text-secondary\">{shown?.label ?? \"\"}</p>\n            {visible.map((line) => (\n              <p\n                key={line.key}\n                className=\"m-0 flex min-w-0 items-center gap-2 text-sm\"\n                style={{ \"--series\": colorOf(line, series.indexOf(line)) } as CSSProperties}\n              >\n                <span data-dashed={line.dashed || undefined} className=\"chart-tip-swatch\" />\n                <span className=\"min-w-0 flex-1 truncate text-text-secondary\">{line.label}</span>\n                <span className=\"ms-2 flex-none whitespace-nowrap font-medium tabular-nums text-foreground\">\n                  {format(shown?.values[line.key] ?? 0, line)}\n                </span>\n              </p>\n            ))}\n          </div>\n          {(empty || allHidden) && !loading ? (\n            <p className=\"absolute inset-0 m-0 grid place-items-center text-sm text-muted-foreground pointer-events-none motion-safe:animate-fade-in\">\n              {empty ? emptyLabel : \"Choose a series to show\"}\n            </p>\n          ) : null}\n          {loading && empty ? <span aria-hidden=\"true\" className=\"chart-skeleton\" /> : null}\n        </div>\n        <div ref={gutter} aria-hidden=\"true\" className=\"relative min-w-0 [grid-area:1/2]\">\n          {steady.ticks.map((value) => (\n            <span key={value} data-tick={value} className=\"line-chart-tick motion-safe:animate-fade-in\">\n              <span className=\"block -translate-y-1/2 text-xs leading-none tabular-nums text-muted-foreground\">\n                {formatTick(value)}\n              </span>\n            </span>\n          ))}\n        </div>\n        <div aria-hidden=\"true\" className=\"relative min-w-0 [grid-area:2/1]\">\n          {picks.map((at) => {\n            const share = last > 0 ? at / last : 0.5;\n            return (\n              <span\n                key={`${data[at]!.key}:${data[at]!.axisLabel}`}\n                className=\"absolute top-2 whitespace-nowrap text-xs leading-none tabular-nums text-muted-foreground motion-safe:animate-fade-in\"\n                style={{ left: `${share * 100}%`, translate: `${-share * 100}% 0` }}\n              >\n                {data[at]!.axisLabel}\n              </span>\n            );\n          })}\n        </div>\n      </div>\n      <p className=\"sr-only\">{summary}</p>\n      {empty ? null : (\n        <div className=\"sr-only\">\n          <table>\n            <caption>{label}</caption>\n            <thead>\n              <tr>\n                <th scope=\"col\">{categoryLabel}</th>\n                {series.map((line) => (\n                  <th key={line.key} scope=\"col\">\n                    {line.label}\n                  </th>\n                ))}\n              </tr>\n            </thead>\n            <tbody>\n              {data.map((item) => (\n                <tr key={item.key}>\n                  <th scope=\"row\">{item.label}</th>\n                  {series.map((line) => (\n                    <td key={line.key}>{format(item.values[line.key] ?? 0, line)}</td>\n                  ))}\n                </tr>\n              ))}\n            </tbody>\n          </table>\n        </div>\n      )}\n      <p className=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n        {loading ? \"Loading\" : \"\"}\n      </p>\n    </figure>\n  );\n});\n"],"mappings":";;;;;;;;;AAiGA,MAAM,MAAM;AACZ,MAAM,MAAM;;AAEZ,MAAa,qBAAqB;AAClC,MAAM,UAAU;CACd;CACA;CACA;AACF;AACA,MAAM,UAAU,IAAI,KAAK,aAAa,SAAS,EAAE,uBAAuB,EAAE,CAAC;AAC3E,MAAM,UAAU,IAAI,KAAK,aAAa,SAAS;CAAE,UAAU;CAAW,uBAAuB;AAAE,CAAC;AAChG,MAAM,OAAO,MAAM,KAAK,EAAE,QAAQ,IAAI,IAAI,GAAG,UAAU,QAAQ,GAAG;AAClE,MAAM,SAAS,OAAe,KAAa,SAAiB,KAAK,IAAI,MAAM,KAAK,IAAI,KAAK,KAAK,CAAC;AAC/F,MAAM,WAAW,MAAuB,UACtC,KAAK,SAAS,QAAQ,KAAK,IAAI,OAAO,QAAQ,SAAS,CAAC;AAC1D,MAAM,SAAS,UAAkB,OAAO,MAAM,YAAY,EAAE,CAAC;;AAG7D,SAAS,UAAU,KAAa,MAAc;CAC5C,MAAM,KAAK,KAAK,IAAI,GAAG,GAAG;CAC1B,MAAM,KAAK,KAAK,IAAI,MAAM,KAAK,CAAC;CAChC,MAAM,YAAY,MAAM,KAAK,MAAM,KAAK,OAAO,KAAK,MAAM,CAAC,CAAC;CAC5D,KAAK,MAAM,UAAU;EAAC;EAAG;EAAG;EAAK;EAAG;CAAE,GAAG;EACvC,MAAM,OAAO,SAAS;EACtB,MAAM,SAAS,KAAK,MAAM,KAAK,IAAI,IAAI;EACvC,MAAM,MAAM,KAAK,KAAK,KAAK,IAAI,IAAI;EACnC,KAAK,MAAM,UAAU,QAAQ,IAAI,MAAM;GACrC,MAAM,QAAkB,CAAC;GACzB,KAAK,IAAI,QAAQ,QAAQ,SAAS,MAAM,OAAO,GAAG,SAAS,MAAM,MAAM,KAAK,MAAM,KAAK,CAAC;GACxF,OAAO;IAAE,KAAK,MAAM,MAAM;IAAG,KAAK,MAAM,GAAG;IAAG;GAAM;EACtD;CACF;CACA,OAAO;EAAE,KAAK;EAAI,KAAK;EAAI,OAAO,CAAC,IAAI,EAAE;CAAE;AAC7C;;AAGA,SAAS,SAAS,QAAkB,QAA0B;CAC5D,IAAI,OAAO,WAAW,GAAG,OAAO,CAAC;CACjC,IAAI,OAAO,WAAW,GAAG,OAAO,CAAC,CAAC,GAAG,OAAO,EAAG,GAAG,CAAC,GAAG,OAAO,EAAG,CAAC;CACjE,MAAM,OAAO,OAAO,SAAS;CAC7B,MAAM,OAAO,IAAI;CACjB,IAAI,CAAC,QAAQ,OAAO,OAAO,KAAK,OAAO,UAAU,CAAC,QAAQ,MAAM,KAAK,CAAC;CACtE,MAAM,SAAS,OAAO,MAAM,CAAC,CAAC,CAAC,KAAK,OAAO,WAAW,QAAQ,OAAO,UAAW,IAAI;CACpF,MAAM,WAAW,OAAO,KAAK,GAAG,UAC9B,UAAU,KAAK,UAAU,OACrB,KACC,KAAK,KAAK,OAAO,QAAQ,EAAG,IAAI,KAAK,KAAK,OAAO,MAAO,KACvD,KAAK,IACH,KAAK,IAAI,OAAO,QAAQ,EAAG,GAC3B,KAAK,IAAI,OAAO,MAAO,GACvB,KAAK,IAAI,OAAO,QAAQ,KAAM,OAAO,MAAO,IAAI,CAClD,KAAK,CACb;CACA,IAAI,OAAO,GAAG;EACZ,SAAS,MAAM,IAAI,OAAO,KAAM,SAAS,MAAO;EAChD,SAAS,SAAS,IAAI,OAAO,OAAO,KAAM,SAAS,OAAO,MAAO;CACnE,OAAO;EACL,SAAS,KAAK,OAAO;EACrB,SAAS,KAAK,OAAO;CACvB;CACA,MAAM,UAAU,KAAK,IAAI,GAAG,KAAK,IAAI,IAAI,KAAK,MAAM,MAAM,IAAI,CAAC,CAAC;CAChE,MAAM,SAAkB,CAAC;CACzB,KAAK,IAAI,QAAQ,GAAG,QAAQ,MAAM,SAAS;EACzC,MAAM,MAAM,KAAK,IAAI,OAAO,QAAS,OAAO,QAAQ,EAAG;EACvD,MAAM,OAAO,KAAK,IAAI,OAAO,QAAS,OAAO,QAAQ,EAAG;EACxD,KAAK,IAAI,SAAS,GAAG,SAAS,SAAS,UAAU;GAC/C,MAAM,IAAI,SAAS;GACnB,MAAM,KAAK,IAAI;GACf,MAAM,KAAK,KAAK;GAChB,MAAM,SACH,IAAI,KAAK,IAAI,KAAK,KAAK,OAAO,UAC9B,KAAK,IAAI,KAAK,KAAK,OAAO,SAAS,UACnC,IAAI,KAAK,IAAI,MAAM,OAAO,QAAQ,MAClC,KAAK,MAAM,OAAO,SAAS,QAAQ;GACtC,OAAO,KAAK,EAAE,QAAQ,KAAK,MAAM,MAAM,OAAO,KAAK,IAAI,CAAC,CAAC;EAC3D;CACF;CACA,OAAO,KAAK,CAAC,GAAG,OAAO,KAAM,CAAC;CAC9B,OAAO;AACT;;AAGA,SAAS,QAAQ,OAAgB,GAAW;CAC1C,IAAI,CAAC,MAAM,QAAQ,OAAO;CAC1B,IAAI,MAAM;CACV,IAAI,OAAO,MAAM,SAAS;CAC1B,IAAI,KAAK,MAAM,IAAI,CAAE,IAAI,OAAO,MAAM,IAAI,CAAE;CAC5C,IAAI,KAAK,MAAM,KAAK,CAAE,IAAI,OAAO,MAAM,KAAK,CAAE;CAC9C,OAAO,OAAO,MAAM,GAAG;EACrB,MAAM,SAAU,MAAM,QAAS;EAC/B,IAAI,MAAM,OAAO,CAAE,KAAK,GAAG,MAAM;OAC5B,OAAO;CACd;CACA,MAAM,CAAC,IAAI,MAAM,MAAM;CACvB,MAAM,CAAC,IAAI,MAAM,MAAM;CACvB,OAAO,OAAO,KAAK,KAAK,MAAO,KAAK,OAAO,IAAI,OAAQ,KAAK;AAC9D;;AAGA,SAAS,UAAU,MAAwB,OAAe;CACxD,MAAM,UAAU,KAAK,SAAS,MAAM,UAAW,KAAK,YAAY,CAAC,KAAK,IAAI,CAAC,CAAE;CAC7E,IAAI,CAAC,SAAS,CAAC,QAAQ,QAAQ,OAAO,CAAC;CACvC,MAAM,OAAO,KAAK,IAAI,GAAG,KAAK,MAAM,QAAQ,EAAE,CAAC;CAC/C,MAAM,SAAS,KAAK,KAAK,QAAQ,SAAS,IAAI;CAC9C,OAAO,QACJ,QAAQ,CAAC,CACT,QAAQ,GAAG,SAAS,OAAO,WAAW,CAAC,CAAC,CACxC,QAAQ;AACb;AAEA,MAAa,YAAY,WAAwC,SAAS,UACxE,EACE,MACA,QACA,OACA,OAAO,IACP,SAAS,KACT,aACA,cAAc,UAAU,QAAQ,OAAO,KAAK,GAC5C,cACA,qBACA,sBACA,gBACA,UAAU,OACV,aAAa,0BACb,QACA,gBAAgB,QAChB,QAAQ,UACR,aAEF,KACA;CACA,MAAM,SAAS,OAA2B,IAAI;CAC9C,MAAM,OAAO,cAAc,UAAU,KAAK,MAAM,GAAG,CAAC,GAAG,CAAC;CACxD,MAAM,OAAO,OAAuB,IAAI;CACxC,MAAM,MAAM,OAAsB,IAAI;CACtC,MAAM,MAAM,OAAuB,IAAI;CACvC,MAAM,SAAS,OAAuB,IAAI;CAC1C,MAAM,MAAM,OAAO,MAAM,CAAC,CAAC,QAAQ,mBAAmB,EAAE;CACxD,MAAM,OAAO,KAAK,SAAS;CAC3B,MAAM,QAAQ,KAAK,WAAW;CAE9B,MAAM,CAAC,WAAW,gBAAgB,SAAmB,uBAAuB,CAAC,CAAC;CAC9E,MAAM,SAAS,gBAAgB;CAC/B,MAAM,UAAU,QAAgB;EAC9B,MAAM,OAAO,OAAO,SAAS,GAAG,IAAI,OAAO,QAAQ,SAAS,SAAS,GAAG,IAAI,CAAC,GAAG,QAAQ,GAAG;EAC3F,IAAI,iBAAiB,KAAA,GAAW,aAAa,IAAI;EACjD,uBAAuB,IAAI;CAC7B;CACA,MAAM,UAAU,OAAO,QAAQ,SAAS,CAAC,OAAO,SAAS,KAAK,GAAG,CAAC;CAClE,MAAM,aAAa,UAAU,OAAO,SAAS;CAG7C,MAAM,YAAY,GAAG,MAAM,GAAG,OAAO,KAAK,SAAS,KAAK,GAAG,CAAC,CAAC,KAAK,GAAG,EAAE,GAAG,KACvE,KAAK,SAAS,GAAG,KAAK,IAAI,GAAG,OAAO,KAAK,SAAS,KAAK,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,GAAG,GAAG,CAAC,CAC1F,KAAK,GAAG;CACX,MAAM,UAAU,cAEZ,IAAI,IACF,OAAO,KAAK,SAAS,CACnB,KAAK,KACL,SACE,KAAK,KAAK,SAAS,KAAK,OAAO,KAAK,QAAQ,CAAC,GAC7C,UAAU,QACZ,CACF,CAAC,CACH,GAGF,CAAC,SAAS,CACZ;CACA,IAAI,MAAM;CACV,IAAI,OAAO;CACX,KAAK,MAAM,QAAQ,SACjB,KAAK,MAAM,QAAQ,MAAM;EACvB,MAAM,QAAQ,KAAK,OAAO,KAAK,QAAQ;EACvC,MAAM,KAAK,IAAI,KAAK,KAAK;EACzB,OAAO,KAAK,IAAI,MAAM,KAAK;CAC7B;CAEF,MAAM,QAAQ,OAAO,SAAS,GAAG,IAAI,UAAU,KAAK,IAAI,IAAI;CAC5D,MAAM,CAAC,QAAQ,aAAa,eAAe,SAAS,UAAU,GAAG,GAAG,CAAC;CACrE,IAAI,UAAU,MAAM,QAAQ,OAAO,OAAO,MAAM,QAAQ,OAAO,MAAM,UAAU,KAAK;CAGpF,MAAM,CAAC,QAAQ,aAAa,SAAwB,IAAI;CACxD,MAAM,CAAC,MAAM,WAAW,SAAS,SAAS;CAC1C,IAAI,SAAS,WAAW;EACtB,QAAQ,SAAS;EACjB,UAAU,IAAI;CAChB;CACA,MAAM,QAAQ,WAAW,QAAQ,QAAQ,OAAO,KAAK,IAAI,QAAQ,IAAI;CACrE,MAAM,YAAY,UAAU;CAE5B,MAAM,QAAQ,OAAO,CAAC;CACtB,MAAM,CAAC,WAAW,gBAAgB,SAAS,CAAC;CAC5C,MAAM,CAAC,OAAO,YAAY,SAAS,KAAK;CACxC,MAAM,SAAS,uBAAO,IAAI,IAAmB,CAAC;CAC9C,MAAM,QAAQ,OAAO;EAAE,KAAK,OAAO;EAAK,KAAK,OAAO;CAAI,CAAC;CACzD,MAAM,SAAS,OAAO,CAAC;CACvB,MAAM,OAAO,OAAO;EAAE;EAAQ;CAAO,CAAC;CACtC,gCAAgC;EAC9B,KAAK,UAAU;GAAE;GAAQ;EAAO;CAClC,CAAC;;CAGD,MAAM,QAAQ,kBAAkB;EAC9B,MAAM,IAAI,MAAM;EAChB,MAAM,OAAO,IAAI;EACjB,IAAI,CAAC,KAAK,CAAC,MAAM;EACjB,MAAM,KAAK,MAAM,QAAQ;EACzB,MAAM,OAAO,MAAM,QAAQ,MAAM,MAAM;EACvC,MAAM,OAAO,UAAkB,OAAO,KAAK,QAAQ,MAAM,SAAS,SAAS;EAC3E,MAAM,KAAK,OAAO;EAClB,MAAM,QAAkB,CAAC;EACzB,KAAK,MAAM,QAAQ,KAAK,QAAQ,QAAQ;GACtC,MAAM,QAAQ,OAAO,QAAQ,IAAI,KAAK,GAAG;GACzC,IAAI,CAAC,OAAO;GACZ,MAAM,IAAI,MAAM;GAChB,MAAM,KAAK,UAAkB,IAAI,MAAM,QAAQ,MAAM,CAAC;GACtD,MAAM,OAAO,MAAM,MAAM,SACrB,IAAI,MAAM,MAAM,KAAK,CAAC,GAAG,WAAW,IAAI,IAAI,EAAA,CAAG,QAAQ,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,GAAG,MAC5F;GACJ,MAAM,QAAQ,KAAK,cAA2B,iBAAiB,IAAI,OAAO,KAAK,GAAG,EAAE,GAAG;GACvF,OAAO,cAAc,kBAAkB,CAAC,EAAE,aAAa,KAAK,IAAI;GAChE,OAAO,cAAc,kBAAkB,CAAC,EAAE,aAAa,KAAK,OAAO,GAAG,KAAK,GAAG,EAAE,GAAG,OAAO,KAAK,OAAO,KAAK,EAAE;GAC7G,IAAI,OAAO,MAAM,MAAM,UAAU,OAAO,CAAC;GACzC,MAAM,MAAM,KAAK,cAAgC,cAAc,IAAI,OAAO,KAAK,GAAG,EAAE,GAAG;GACvF,IAAI,OAAO,MAAM,MAAM,QAAQ;IAC7B,MAAM,KAAK,EAAE,QAAQ,MAAM,OAAO,EAAE,CAAC;IACrC,IAAI,aAAa,OAAO,KAAK,EAAA,CAAG,QAAQ,CAAC,CAAC;IAC1C,IAAI,aAAa,MAAM,GAAG,QAAQ,CAAC,CAAC;IACpC,IAAI,IAAI,IAAK,MAAM,KAAK,EAAE;GAC5B;EACF;EAEA,KAAK,MAAM,QAAQ,KAAK,iBAAiC,aAAa,GAAG;GACvE,MAAM,KAAK,OAAO,KAAK,MAAM,IAAI,OAAO,KAAK,QAAQ,IAAI,CAAC,CAAC,IAAI,EAAG;GAClE,KAAK,aAAa,MAAM,EAAE;GAC1B,KAAK,aAAa,MAAM,EAAE;EAC5B;EACA,KAAK,MAAM,QAAQ,OAAO,SAAS,iBAA8B,aAAa,KAAK,CAAC,GAClF,KAAK,MAAM,YAAY,KAAK,KAAK,MAAM,IAAI,OAAO,KAAK,QAAQ,IAAI,CAAC,CAAC,EAAE;EAEzE,MAAM,KAAK,KAAK,MAAM,KAAK,CAAC,IAAI;EAChC,MAAM,QAAQ,KAAK,cAAc,uBAAuB;EACxD,OAAO,aAAa,MAAM,OAAO,EAAE,CAAC;EACpC,OAAO,aAAa,MAAM,OAAO,EAAE,CAAC;EAEpC,MAAM,SAAS,IAAI;EACnB,IAAI,QAAQ;GACV,MAAM,KAAK,OAAO;GAClB,MAAM,KAAK,OAAO;GAClB,IAAI,IAAI,KAAK;GACb,IAAI,IAAI,KAAK,GAAG,IAAI,KAAK,MAAM;GAC/B,MAAM,SAAS,MAAM,SAAS,MAAM,QAAQ,KAAK,UAAU,MAAM,OAAO,CAAC,IAAI,MAAM,SAAS,SAAS;GACrG,OAAO,MAAM,YAAY,GAAG,MAAM,GAAG,GAAG,KAAK,IAAI,GAAG,IAAI,EAAE,CAAC,EAAE,KAAK,MAAM,SAAS,KAAK,GAAG,GAAG,KAAK,IAAI,GAAG,SAAS,EAAE,CAAC,EAAE;EACxH;CACF,GAAG,CAAC,MAAM,CAAC;CAGX,gCAAgC;EAC9B,MAAM,OAAO,KAAK;EAClB,IAAI,CAAC,MAAM;EACX,MAAM,aAAa;GACjB,MAAM,UAAU,KAAK;GACrB,aAAa,KAAK,WAAW;GAC7B,MAAM;EACR;EACA,KAAK;EACL,IAAI,OAAO,mBAAmB,aAAa;EAC3C,MAAM,WAAW,IAAI,eAAe,IAAI;EACxC,SAAS,QAAQ,IAAI;EACrB,aAAa,SAAS,WAAW;CACnC,GAAG,CAAC,KAAK,CAAC;CACV,0BAA0B,KAAK;CAG/B,gBAAgB;EACd,MAAM,QAAyF,CAAC;EAChG,KAAK,MAAM,CAAC,KAAK,WAAW,SAAS;GACnC,MAAM,QAAQ,OAAO,QAAQ,IAAI,GAAG;GACpC,IAAI,CAAC,OAAO;IACV,OAAO,QAAQ,IAAI,KAAK;KAAE,OAAO;KAAQ,UAAU,KAAK,QAAQ,OAAO,SAAS,GAAG,IAAI,IAAI;KAAG,MAAM;IAAK,CAAC;IAC1G;GACF;GACA,IAAI,CAAC,MAAM,MAAM,UAAU,CAAC,OAAO,QAAQ;IACzC,MAAM,QAAQ;IACd;GACF;GACA,MAAM,KAAK,CAAC,mBAAG,IAAI,IAAI,CAAC,GAAG,MAAM,GAAG,OAAO,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,MAAM,IAAI,CAAC;GAClF,MAAM,KAAK;IAAE;IAAO;IAAI,MAAM,GAAG,KAAK,MAAM,QAAQ,MAAM,OAAO,CAAC,CAAC;IAAG,IAAI,GAAG,KAAK,MAAM,QAAQ,QAAQ,CAAC,CAAC;IAAG;GAAO,CAAC;EACvH;EACA,IAAI,CAAC,MAAM,QAAQ;GACjB,MAAM;GACN;EACF;EACA,OAAO,MACL,SACC,MAAM;GACL,KAAK,MAAM,QAAQ,OACjB,KAAK,MAAM,QAAQ,KAAK,GAAG,KAAK,GAAG,OAAc,CAAC,GAAG,KAAK,KAAK,OAAQ,KAAK,GAAG,MAAO,KAAK,KAAK,OAAQ,CAAC,CAAC;GAE5G,MAAM;EACR,SACM;GACJ,KAAK,MAAM,QAAQ,OAAO,KAAK,MAAM,QAAQ,KAAK;GAClD,MAAM;EACR,CACF;CACF,GAAG,CAAC,OAAO,OAAO,CAAC;CAGnB,MAAM,YAAY,OAAO,KAAK,GAAG;CACjC,gBAAgB;EACd,KAAK,MAAM,CAAC,KAAK,UAAU,OAAO,SAAS;GACzC,MAAM,KAAK,OAAO,SAAS,GAAG,IAAI,IAAI;GACtC,IAAI,MAAM,aAAa,IAAI;GAC3B,MAAM,OAAO;GACb,MAAM,OAAO,MAAM;GACnB,MAAM,OAAO,MAAM,SAAS,MAAM;IAChC,MAAM,WAAW,QAAQ,KAAK,QAAQ;IACtC,MAAM;GACR,CAAC;EACH;EACA,MAAM;CAGR,GAAG,CAAC,WAAW,KAAK,CAAC;CAGrB,gBAAgB;EACd,MAAM,OAAO,EAAE,GAAG,MAAM,QAAQ;EAChC,IAAI,KAAK,QAAQ,OAAO,OAAO,KAAK,QAAQ,OAAO,KAAK;EACxD,OAAO,MAAM,SAAS,MAAM;GAC1B,MAAM,UAAU;IAAE,KAAK,KAAK,OAAO,OAAO,MAAM,KAAK,OAAO;IAAG,KAAK,KAAK,OAAO,OAAO,MAAM,KAAK,OAAO;GAAE;GAC3G,MAAM;EACR,CAAC;CACH,GAAG,CAAC,OAAO,MAAM,CAAC;CAGlB,gBAAgB;EACd,IAAI,SAAS,OAAO;EACpB,MAAM,OAAO,OAAO;EACpB,IAAI,CAAC,QAAQ,qBAAqB,KAAK,OAAO,yBAAyB,aAAa;GAClF,SAAS,IAAI;GACb;EACF;EACA,MAAM,WAAW,IAAI,sBAClB,CAAC,WAAW;GACX,IAAI,CAAC,OAAO,gBAAgB;GAC5B,SAAS,WAAW;GACpB,SAAS,IAAI;EACf,GACA,EAAE,WAAW,GAAI,CACnB;EACA,SAAS,QAAQ,IAAI;EACrB,aAAa,SAAS,WAAW;CACnC,GAAG,CAAC,OAAO,KAAK,CAAC;CAGjB,MAAM,eAAe,OAAO,KAAK;CACjC,gBAAgB;EACd,IAAI,UAAU,MAAM;GAClB,aAAa,UAAU;GACvB;EACF;EACA,MAAM,KAAK,OAAO,IAAI,QAAQ,OAAO;EACrC,MAAM,OAAO,OAAO;EACpB,IAAI,CAAC,aAAa,SAAS;GACzB,aAAa,UAAU;GACvB,OAAO,UAAU;GACjB,MAAM;GACN;EACF;EACA,OAAO,MAAM,SAAS,MAAM;GAC1B,OAAO,UAAU,QAAQ,KAAK,QAAQ;GACtC,MAAM;EACR,CAAC;CACH,GAAG;EAAC;EAAO;EAAM;CAAK,CAAC;CAEvB,MAAM,WAAW,OAAO,cAAc;CACtC,gCAAgC;EAC9B,SAAS,UAAU;CACrB,CAAC;CACD,gBAAgB;EACd,SAAS,UAAU,OAAO,UAAU,OAAO,OAAQ,KAAK,UAAU,IAAK;CAGzE,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,WAAW,YAAoB;EACnC,MAAM,OAAO,KAAK,SAAS,sBAAsB;EACjD,IAAI,CAAC,MAAM,SAAS,OAAO,GAAG,OAAO,KAAK,IAAI,GAAG,IAAI;EACrD,OAAO,MAAM,KAAK,OAAQ,UAAU,KAAK,QAAQ,KAAK,QAAS,IAAI,GAAG,GAAG,IAAI;CAC/E;CACA,MAAM,aAAa,UAAyC;EAC1D,IAAI,MAAM,QAAQ,YAAY,WAAW;GACvC,MAAM,eAAe;GACrB,UAAU,IAAI;GACd;EACF;EACA,MAAM,OAAO,SAAS,OAAO;EAC7B,MAAM,OAAO,KAAK,IAAI,GAAG,KAAK,MAAM,KAAK,SAAS,CAAC,CAAC;EACpD,MAAM,OACJ;GACE,WAAW,OAAO;GAClB,WAAW,OAAO;GAClB,YAAY,UAAU,OAAO,OAAO,OAAO;GAC3C,SAAS,UAAU,OAAO,OAAO,OAAO;GACxC,UAAU,OAAO;GACjB,QAAQ,OAAO;GACf,MAAM;GACN,KAAK;EACP,EACA,MAAM;EACR,IAAI,SAAS,KAAA,KAAa,OAAO;EACjC,MAAM,eAAe;EACrB,UAAU,MAAM,MAAM,GAAG,IAAI,CAAC;CAChC;CACA,MAAM,iBAAiB,UAAwC;EAC7D,IAAI,OAAO;EACX,IAAI,MAAM,gBAAgB,SAAS,MAAM,cAAc,oBAAoB,MAAM,SAAS;EAC1F,UAAU,QAAQ,MAAM,OAAO,CAAC;CAClC;CACA,MAAM,iBAAiB,UAAwC;EAC7D,IAAI,CAAC,UAAU,MAAM,gBAAgB,WAAW,MAAM,UAAU,UAAU,QAAQ,MAAM,OAAO,CAAC;CAClG;CAEA,MAAM,UAAU,OAAe,SAC7B,GAAG,cAAc,YAAY,OAAO,IAAI,IAAI,QAAQ,OAAO,KAAK,IAAI,OAAO,IAAI,SAAS;CAC1F,MAAM,UAAU,UAAU,OAAO,OAAO,KAAK;CAC7C,MAAM,QAAQ,WAAW,KAAK;CAC9B,MAAM,YAAY,UACd,GAAG,QAAQ,MAAM,IAAI,QAAQ,KAAK,SAAS,GAAG,KAAK,MAAM,GAAG,OAAO,QAAQ,OAAO,KAAK,QAAQ,GAAG,IAAI,GAAG,CAAC,CAAC,KAAK,IAAI,MACpH,QACE,aACA,GAAG,QAAQ,OAAO,MAAM,OAAO,OAAO;CAC5C,MAAM,UAAU,QACZ,GAAG,MAAM,IAAI,WAAW,KACxB,GAAG,MAAM,IAAI,KAAK,EAAE,CAAE,MAAM,MAAM,KAAK,KAAK,CAAE,MAAM,IAAI,QACrD,KAAK,SAAS,GAAG,KAAK,MAAM,WAAW,OAAO,KAAK,KAAK,CAAE,OAAO,KAAK,QAAQ,GAAG,IAAI,GAAG,CAAC,CACzF,KAAK,IAAI,EAAE;CAClB,MAAM,QAAQ,UAAU,MAAM,SAAS;CACvC,MAAM,YAAY,CAAC,SAAS,QAAQ,WAAW;CAE/C,OACE,qBAAC,UAAD;EACE,KAAK;EACL,aAAU;EACV,cAAY;EACZ,aAAW,WAAW,KAAA;EACtB,WAAW,GAAG,+DAA+D,SAAS;EALxF,UAAA;GAOG,aACC,oBAAC,OAAD;IAAK,MAAK;IAAQ,cAAY,GAAG,MAAM;IAAU,WAAU;IACxD,UAAA,OAAO,KAAK,MAAM,OACjB,qBAAC,UAAD;KAEE,MAAK;KACL,aAAU;KACV,gBAAc,CAAC,OAAO,SAAS,KAAK,GAAG;KACvC,eAAe,OAAO,KAAK,GAAG;KAC9B,OAAO,EAAE,YAAY,QAAQ,MAAM,EAAE,EAAE;KACvC,WAAU;KAPZ,UAAA,CASE,oBAAC,QAAD;MAAM,eAAY;MAAO,eAAa,KAAK,UAAU,KAAA;MAAW,WAAU;KAAgB,CAAA,GAC1F,oBAAC,QAAD;MAAM,WAAU;MAAsB,UAAA,KAAK;KAAY,CAAA,CACjD;IAVD,GAAA,KAAK,GAUJ,CACT;GACE,CAAA,IACH;GACJ,qBAAC,OAAD;IACE,aAAU;IACV,kBAAgB,aAAa,KAAA;IAC7B,gBAAc,WAAW,KAAA;IACzB,cAAY,SAAS,KAAA;IACrB,WAAU;IALZ,UAAA;KAOE,qBAAC,OAAD;MACE,KAAK;MACL,aAAU;MACV,MAAK;MACL,UAAU,QAAQ,KAAK;MACvB,cAAY,GAAG,MAAM,eAAe,cAAc,YAAY;MAC9D,oBAAiB;MACjB,iBAAe;MACf,iBAAe,KAAK,IAAI,GAAG,KAAK,MAAM;MACtC,kBAAgB,SAAS,QAAQ;MACjC,kBAAgB;MACD;MACA;MACf,cAAc,UAAU;OACtB,IAAI,MAAM,gBAAgB,SAAS,UAAU,IAAI;MACnD;MACA,uBAAuB,UAAU,IAAI;MACrC,iBAAiB,UAAU;OACzB,IAAI,MAAM,gBAAgB,SAAS,UAAU,IAAI;MACnD;MACW;MACX,cAAc,UAAU,IAAI;MAC5B,UAAU,UAAU;OAClB,IAAI,MAAM,cAAc,QAAQ,gBAAgB,KAAK,CAAC,OAAO,WAAW,YAAY,WAAW,IAAI;MACrG;MACA,WAAU;MACV,OAAO,EAAE,OAAO;MA1BlB,UAAA;OA4BE,qBAAC,OAAD;QAAK,KAAK;QAAK,OAAM;QAAe;QAAQ,eAAY;QAAO,WAAU;QAAQ,WAAU;QAA3F,UAAA;SACE,oBAAC,QAAD,EAAA,UACE,oBAAC,YAAD;UAAU,IAAI,GAAG,IAAI;UAAQ,eAAc;UACzC,UAAA,oBAAC,QAAD;WAAM,WAAU;WAAoB,GAAG;WAAI,GAAG;WAAK,QAAQ,SAAS;WAAI,OAAO,EAAE,OAAO,QAAQ,YAAY,KAAK,EAAE;UAAI,CAAA;SAC/G,CAAA,EACN,CAAA;SACL,OAAO,MAAM,MAAM,CAAC,CAAC,CAAC,KAAK,UAC1B,oBAAC,QAAD;UAAkB,aAAW;UAAO,WAAU;UAAkB,IAAI;UAAG,IAAG;SAAQ,GAAvE,KAAuE,CACnF;SACD,oBAAC,QAAD;UAAM,WAAU;UAAsB,IAAI;UAAG,IAAG;UAAO,IAAI,SAAS;UAAK,IAAI,SAAS;SAAM,CAAA;SAC5F,oBAAC,QAAD;UAAM,aAAU;UAAY,WAAU;UAAuB,IAAI;UAAS,IAAI;SAAS,CAAA;SACvF,oBAAC,KAAD;UAAG,WAAU;UAAoB,UAAU,QAAQ,IAAI;UACpD,UAAA,OAAO,KAAK,MAAM,OACjB,qBAAC,KAAD;WAAkB,eAAa,KAAK;WAAK,OAAO,EAAE,YAAY,QAAQ,MAAM,EAAE,EAAE;WAAhF,UAAA,CACI,KAAK,QAAQ,OAAO,IAAK,oBAAC,QAAD;YAAM,aAAU;YAAO,WAAU;WAAmB,CAAA,IAAI,MACnF,oBAAC,QAAD;YAAM,aAAU;YAAO,eAAa,KAAK,UAAU,KAAA;YAAW,WAAU;WAAmB,CAAA,CAC1F;UAHK,GAAA,KAAK,GAGV,CACJ;SACA,CAAA;SACF,OAAO,KAAK,MAAM,OACjB,oBAAC,UAAD;UAEE,YAAU,KAAK;UACf,eAAa,OAAO,SAAS,KAAK,GAAG,KAAK,KAAA;UAC1C,GAAG;UACH,WAAU;UACV,OAAO,EAAE,YAAY,QAAQ,MAAM,EAAE,EAAE;SACxC,GANM,KAAK,GAMX,CACF;QACE;;OACL,qBAAC,OAAD;QAAK,KAAK;QAAK,eAAY;QAAO,aAAU;QAAqB,WAAU;QAA3E,UAAA,CACE,oBAAC,KAAD;SAAG,WAAU;SAAyE,UAAA,OAAO,SAAS;QAAM,CAAA,GAC3G,QAAQ,KAAK,SACZ,qBAAC,KAAD;SAEE,WAAU;SACV,OAAO,EAAE,YAAY,QAAQ,MAAM,OAAO,QAAQ,IAAI,CAAC,EAAE;SAH3D,UAAA;UAKE,oBAAC,QAAD;WAAM,eAAa,KAAK,UAAU,KAAA;WAAW,WAAU;UAAoB,CAAA;UAC3E,oBAAC,QAAD;WAAM,WAAU;WAA+C,UAAA,KAAK;UAAY,CAAA;UAChF,oBAAC,QAAD;WAAM,WAAU;WACb,UAAA,OAAO,OAAO,OAAO,KAAK,QAAQ,GAAG,IAAI;UACtC,CAAA;SACL;QATI,GAAA,KAAK,GAST,CACJ,CACE;;QACH,SAAS,cAAc,CAAC,UACxB,oBAAC,KAAD;QAAG,WAAU;QACV,UAAA,QAAQ,aAAa;OACrB,CAAA,IACD;OACH,WAAW,QAAQ,oBAAC,QAAD;QAAM,eAAY;QAAO,WAAU;OAAkB,CAAA,IAAI;MAC1E;;KACL,oBAAC,OAAD;MAAK,KAAK;MAAQ,eAAY;MAAO,WAAU;MAC5C,UAAA,OAAO,MAAM,KAAK,UACjB,oBAAC,QAAD;OAAkB,aAAW;OAAO,WAAU;OAC5C,UAAA,oBAAC,QAAD;QAAM,WAAU;QACb,UAAA,WAAW,KAAK;OACb,CAAA;MACF,GAJK,KAIL,CACP;KACE,CAAA;KACL,oBAAC,OAAD;MAAK,eAAY;MAAO,WAAU;MAC/B,UAAA,MAAM,KAAK,OAAO;OACjB,MAAM,QAAQ,OAAO,IAAI,KAAK,OAAO;OACrC,OACE,oBAAC,QAAD;QAEE,WAAU;QACV,OAAO;SAAE,MAAM,GAAG,QAAQ,IAAI;SAAI,WAAW,GAAG,CAAC,QAAQ,IAAI;QAAK;QAEjE,UAAA,KAAK,GAAG,CAAE;OACP,GALC,GAAG,KAAK,GAAG,CAAE,IAAI,GAAG,KAAK,GAAG,CAAE,WAK/B;MAEV,CAAC;KACE,CAAA;IACF;;GACL,oBAAC,KAAD;IAAG,WAAU;IAAW,UAAA;GAAW,CAAA;GAClC,QAAQ,OACP,oBAAC,OAAD;IAAK,WAAU;IACb,UAAA,qBAAC,SAAD,EAAA,UAAA;KACE,oBAAC,WAAD,EAAA,UAAU,MAAe,CAAA;KACzB,oBAAC,SAAD,EAAA,UACE,qBAAC,MAAD,EAAA,UAAA,CACE,oBAAC,MAAD;MAAI,OAAM;MAAO,UAAA;KAAkB,CAAA,GAClC,OAAO,KAAK,SACX,oBAAC,MAAD;MAAmB,OAAM;MACtB,UAAA,KAAK;KACJ,GAFK,KAAK,GAEV,CACL,CACC,EAAA,CAAA,EACC,CAAA;KACP,oBAAC,SAAD,EAAA,UACG,KAAK,KAAK,SACT,qBAAC,MAAD,EAAA,UAAA,CACE,oBAAC,MAAD;MAAI,OAAM;MAAO,UAAA,KAAK;KAAU,CAAA,GAC/B,OAAO,KAAK,SACX,oBAAC,MAAD,EAAA,UAAoB,OAAO,KAAK,OAAO,KAAK,QAAQ,GAAG,IAAI,EAAM,GAAxD,KAAK,GAAmD,CAClE,CACC,EAAA,GALK,KAAK,GAKV,CACL,EACI,CAAA;IACF,EAAA,CAAA;GACJ,CAAA;GAEP,oBAAC,KAAD;IAAG,WAAU;IAAU,aAAU;IAAS,eAAY;IACnD,UAAA,UAAU,YAAY;GACtB,CAAA;EACG;;AAEZ,CAAC"}

package/dist/mention-input/index.d.ts

@@ -0,0 +1,2 @@
+import { Mention, MentionChannel, MentionInput, MentionInputHandle, MentionInputProps, MentionKind, MentionPerson, MentionValue, mentionText, serializeMentions } from "./mention-input.js";
+export { type Mention, type MentionChannel, MentionInput, type MentionInputHandle, type MentionInputProps, type MentionKind, type MentionPerson, type MentionValue, mentionText, serializeMentions };

package/dist/mention-input/index.js

@@ -0,0 +1,2 @@
+import { MentionInput, mentionText, serializeMentions } from "./mention-input.js";
+export { MentionInput, mentionText, serializeMentions };

package/dist/mention-input/mention-input.d.ts

@@ -0,0 +1,98 @@
+//#region src/mention-input/mention-input.d.ts
+export type MentionKind = "person" | "channel";
+export interface MentionPerson {
+  id: string;
+  name: string;
+  /** One short line under the name, such as a job title. */
+  role?: string;
+  /** Portrait URL. Initials show when it is missing. */
+  avatar?: string;
+}
+export interface MentionChannel {
+  id: string;
+  name: string;
+  description?: string;
+  members?: number;
+}
+/** A mention inside `text`. `start` and `end` are character offsets; the text between them is `@label` or `#label`. */
+export interface Mention {
+  kind: MentionKind;
+  id: string;
+  label: string;
+  start: number;
+  end: number;
+}
+export interface MentionValue {
+  text: string;
+  mentions: Mention[];
+}
+export interface MentionInputHandle {
+  focus: () => void;
+  /** Inserts text at the caret, as if typed. */
+  insert: (text: string) => void;
+  /** Types a trigger at the caret so the suggestions open, adding a space first when needed. */
+  openSuggestions: (kind: MentionKind) => void;
+  clear: () => void;
+  textarea: HTMLTextAreaElement | null;
+}
+/**
+ * MentionInput: a text area with `@` people and `#` channel mentions. Typing a
+ * trigger opens a list of suggestions at the caret; choosing one turns the
+ * trigger and what was typed after it into a mention token. A token is atomic:
+ * the caret steps over it, a click lands on its nearest edge, and one Backspace
+ * removes all of it (and one undo brings it back). The value is plain text plus
+ * a `mentions` array of offsets, ready to store or to notify from.
+ *
+ * It is a real `<textarea>`, not a contenteditable. The tokens are drawn by a
+ * mirror layer under the textarea's own transparent text, which shares every
+ * metric with it, so each token sits exactly under its characters. That keeps
+ * native editing, selection, spellcheck, IME and undo, at a cost: a token can
+ * be tinted but not laid out (no avatar or padding inside the text), and a line
+ * wrap inside a long token follows the text's own wrap.
+ *
+ * The list is the component's own listbox, as the textarea is the combobox
+ * (`aria-activedescendant`), so React Aria's ComboBox, which owns a one-line
+ * input, does not fit.
+ */
+export interface MentionInputProps {
+  /** What the field is for, and its accessible name. */
+  label: string;
+  /** Render the label for screen readers only. */
+  labelHidden?: boolean;
+  value?: MentionValue;
+  defaultValue?: MentionValue;
+  onValueChange?: (value: MentionValue) => void;
+  /** People offered after `@`. Leave it out to turn person mentions off. */
+  people?: MentionPerson[];
+  /** Channels offered after `#`. Leave it out to turn channel mentions off. */
+  channels?: MentionChannel[];
+  /** Called when a suggestion becomes a mention. */
+  onMentionAdd?: (mention: Mention) => void;
+  /** With `submitOnEnter`, Enter submits and Shift+Enter adds a line. */
+  onSubmit?: (value: MentionValue) => void;
+  submitOnEnter?: boolean;
+  placeholder?: string;
+  /** @default 1 */
+  minRows?: number;
+  /** The field grows to this many rows, then scrolls. @default 8 */
+  maxRows?: number;
+  /** Where suggestions open. `auto` flips above when there is no room below. @default "auto" */
+  placement?: "auto" | "top" | "bottom";
+  /** @default 6 */
+  maxSuggestions?: number;
+  /** Helper text under the field. A string, because the copy is animated word by word. */
+  description?: string;
+  /** Error text under the field. It also marks the field invalid. */
+  error?: string;
+  disabled?: boolean;
+  name?: string;
+  id?: string;
+  /** Extra classes for the wrapper. Merged last. */
+  className?: string;
+}
+export declare const mentionText: (kind: MentionKind, label: string) => string;
+/** Turns a value into storage-friendly text, `<@id>` for people and `<#id>` for channels by default. */
+export declare function serializeMentions(value: MentionValue, format?: (mention: Mention) => string): string;
+export declare const MentionInput: import("react").ForwardRefExoticComponent<MentionInputProps & import("react").RefAttributes<MentionInputHandle>>;
+//#endregion
+//# sourceMappingURL=mention-input.d.ts.map