63:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 64:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 65:Tae6,import { scaleLinear } from "d3-scale"; /** A value domain, low to high. */ export type Domain = readonly [number, number]; export type NiceScaleOptions = { /** Keep zero inside the domain. Bars and areas need it; lines may drop it. Default true. */ zero?: boolean; /** Roughly how many gridlines. Default 4. */ ticks?: number; }; /** * A clean value domain and its gridline values for a set of numbers: rounded to tick steps * (0 / 2K / 4K …), zero kept by default, and a flat or empty series still gets a usable range. */ export function niceScale(values: Iterable, { zero = true, ticks = 4 }: NiceScaleOptions = {}) { let lo = Infinity; let hi = -Infinity; for (const v of values) { if (!Number.isFinite(v)) continue; if (v < lo) lo = v; if (v > hi) hi = v; } if (lo === Infinity) [lo, hi] = [0, 1]; if (zero) [lo, hi] = [Math.min(0, lo), Math.max(0, hi)]; if (lo === hi) [lo, hi] = lo === 0 ? [0, 1] : [lo - Math.abs(lo) * 0.1, hi + Math.abs(hi) * 0.1]; // d3's tick count is a hint; step it down until there are at most `ticks + 1` lines. for (let count = ticks; ; count--) { const scale = scaleLinear().domain([lo, hi]).nice(count); const t = scale.ticks(count); if (t.length <= ticks + 1 || count <= 1) { const [a, b] = scale.domain(); return { domain: [a, b] as Domain, ticks: t }; } } } /** Maps a value in `domain` to a pixel in `range`; `range` may run high to low (y grows down). */ export function linear(domain: Domain, range: Domain) { const [d0, d1] = domain; const [r0, r1] = range; const k = d1 === d0 ? 0 : (r1 - r0) / (d1 - d0); return (v: number) => r0 + (v - d0) * k; } export const lerp = (a: number, b: number, t: number) => a + (b - a) * t; /** * Which of `count` evenly spaced x labels to show at `width`: at most one per `minGap` px * (Arc's 76), always keeping the newest, then stepping back from it so the gaps stay even. */ export function thinLabels(count: number, width: number, minGap = 76): number[] { if (count <= 0) return []; if (count === 1) return [0]; const spacing = width / (count - 1); const step = Math.max(1, Math.ceil(minGap / Math.max(spacing, 0.0001))); const out: number[] = []; for (let i = count - 1; i >= 0; i -= step) out.unshift(i); return out; } /** Evenly spaced bands for bars: the band width, each band's left edge, and a bar width capped at 24px with ≥ 2px air. */ export function bands(count: number, width: number, { maxBar = 24, gap = 0.32 }: { maxBar?: number; gap?: number } = {}) { const band = count > 0 ? width / count : width; const bar = Math.max(1, Math.min(maxBar, band - Math.max(2, band * gap))); return { band, bar, left: (i: number) => i * band, center: (i: number) => i * band + band / 2 }; } 66:T498,"use client"; import { useLayoutEffect, useRef, useState, type RefObject } from "react"; export type ChartSize = { width: number; height: number }; /** * The content-box size of an element, kept current with a ResizeObserver and rounded to * whole pixels so sub-pixel jitter never re-renders a chart. 0 × 0 until measured (and on the * server), so draw nothing until `width > 0`. */ export function useChartSize(): [RefObject, ChartSize] { const ref = useRef(null); const [size, setSize] = useState({ width: 0, height: 0 }); useLayoutEffect(() => { const el = ref.current; if (!el) return; const update = (width: number, height: number) => { const w = Math.round(width); const h = Math.round(height); setSize((s) => (s.width === w && s.height === h ? s : { width: w, height: h })); }; const rect = el.getBoundingClientRect(); update(rect.width, rect.height); const ro = new ResizeObserver(([entry]) => update(entry.contentRect.width, entry.contentRect.height)); ro.observe(el); return () => ro.disconnect(); }, []); return [ref, size]; } 67:T2130,"use client"; import { animate, type AnimationPlaybackControls, type Transition } from "motion/react"; import { useLayoutEffect, useRef, useState } from "react"; import { smooth } from "../../lib/motion"; import { lerp, type Domain } from "./scales"; export type Curve = "monotone" | "linear"; /* ---------- Sampling ------------------------------------------------------- */ // d3-shape's curveMonotoneX tangents (Steffen 1990) for evenly spaced points, so a sampled // curve is the exact curve d3 would draw. With x evenly spaced the Bézier's x is linear in t, // so each segment is a cubic Hermite in y and can be evaluated at any x directly. function tangents(v: readonly number[]) { const n = v.length; const t = new Float64Array(n); if (n < 2) return t; const s = (i: number) => v[i + 1] - v[i]; // secant over one step for (let i = 1; i < n - 1; i++) { const s0 = s(i - 1); const s1 = s(i); const p = (s0 + s1) / 2; t[i] = (Math.sign(s0) + Math.sign(s1)) * Math.min(Math.abs(s0), Math.abs(s1), 0.5 * Math.abs(p)) || 0; } t[0] = n > 2 ? (3 * s(0) - t[1]) / 2 : s(0); t[n - 1] = n > 2 ? (3 * s(n - 2) - t[n - 2]) / 2 : s(0); return t; } /** * Samples a series of evenly spaced values at `count` evenly spaced positions across the * same span, along a monotone (d3 `curveMonotoneX`) or straight curve. Two series with * different lengths sampled at the same `count` share their x positions: that is what lets * a 7-point line morph into a 30-point one without inventing or dropping vertices. */ export function sampleSeries(values: readonly number[], count: number, curve: Curve = "monotone"): Float64Array { const out = new Float64Array(count); const n = values.length; if (n === 0) return out; if (n === 1 || count === 1) return out.fill(n === 1 ? values[0] : values[n - 1]); const t = curve === "monotone" ? tangents(values) : null; for (let k = 0; k < count; k++) { const pos = (k / (count - 1)) * (n - 1); const i = Math.min(n - 2, Math.floor(pos)); const u = pos - i; const y0 = values[i]; const y1 = values[i + 1]; if (!t) { out[k] = y0 + (y1 - y0) * u; continue; } const u2 = u * u; const u3 = u2 * u; out[k] = (2 * u3 - 3 * u2 + 1) * y0 + (u3 - 2 * u2 + u) * t[i] + (-2 * u3 + 3 * u2) * y1 + (u3 - u2) * t[i + 1]; } return out; } /** The sampled value at `u` ∈ [0, 1] along a sampled series (linear between samples). */ export function sampleAt(samples: ArrayLike, u: number) { const n = samples.length; if (n === 0) return 0; if (n === 1) return samples[0]; const pos = Math.max(0, Math.min(1, u)) * (n - 1); const i = Math.min(n - 2, Math.floor(pos)); return lerp(samples[i], samples[i + 1], pos - i); } function resample(samples: Float64Array, count: number) { if (samples.length === count) return samples; const out = new Float64Array(count); for (let k = 0; k < count; k++) out[k] = sampleAt(samples, count === 1 ? 1 : k / (count - 1)); return out; } const round = (n: number) => Math.round(n * 100) / 100; /** An SVG path through the samples. `x(u)` maps 0–1 across the plot, `y(v)` a value to a pixel. */ export function samplesToPath(samples: ArrayLike, x: (u: number) => number, y: (v: number) => number) { const n = samples.length; if (n === 0) return ""; let d = ""; for (let k = 0; k < n; k++) d += `${k ? "L" : "M"}${round(x(n === 1 ? 1 : k / (n - 1)))},${round(y(samples[k]))}`; return d; } /** The same line closed down to `baseY`, for an area fill. */ export function samplesToArea(samples: ArrayLike, x: (u: number) => number, y: (v: number) => number, baseY: number) { if (samples.length === 0) return ""; return `${samplesToPath(samples, x, y)}L${round(x(1))},${round(baseY)}L${round(x(0))},${round(baseY)}Z`; } /** Where a series rests when it enters or leaves: zero if the domain holds it, else the nearer edge. */ export const baselineOf = ([lo, hi]: Domain) => Math.min(hi, Math.max(lo, 0)); /* ---------- useMorphPath --------------------------------------------------- */ /** What the chart should show: each series' values (evenly spaced in x) and the value domain. */ export type MorphShape = { series: Readonly>; domain: Domain }; /** What is on screen this frame: every series sampled on shared x positions, and the domain. */ export type MorphFrame = { series: Record; domain: Domain }; export type UseMorphPathOptions = { /** Draws a frame: write `d` attributes and move gridlines here. Called outside React render. */ onFrame: (frame: MorphFrame) => void; /** Shared x samples per series. Default 160; keep ≥ 8 per data segment for smooth curves. */ samples?: number; curve?: Curve; /** The morph's transition. Default `smooth` (no overshoot: data should not wobble past its value). */ transition?: Transition; /** False jumps to every new shape (reduced motion, scrubbing a slider). Default true. */ animate?: boolean; }; const signature = (shape: MorphShape, count: number, curve: Curve) => { let s = `${count}|${curve}|${shape.domain[0]},${shape.domain[1]}`; for (const key of Object.keys(shape.series)) s += `|${key}:${shape.series[key].join(",")}`; return s; }; /** * Morphs a set of paths between shapes the way Arc does, without React re-rendering a frame: * every series is resampled onto the same x positions, so any shape tweens into any other * point for point, and the value domain rides the same progress so gridlines and lines stay * in register. A change mid-morph starts from what is on screen. Series that appear grow out * of the baseline; series that leave flatten into it and are then dropped from the frame. * * const morph = useMorphPath({ series: { revenue }, domain }, { onFrame: (f) => { * line.current?.setAttribute("d", samplesToPath(f.series.revenue, x, y)); * }}); * * Returns `get()` (the current frame) and `redraw()` (re-emit it, e.g. after a resize). */ export function useMorphPath(shape: MorphShape, { onFrame, samples = 160, curve = "monotone", transition = smooth, animate: animated = true }: UseMorphPathOptions) { const frame = useRef(null); const anim = useRef(null); const draw = useRef(onFrame); const shapeRef = useRef(shape); const options = useRef({ samples, curve, transition, animated }); useLayoutEffect(() => { draw.current = onFrame; shapeRef.current = shape; options.current = { samples, curve, transition, animated }; }); const key = signature(shape, samples, curve); useLayoutEffect(() => { const { samples: count, curve: c, transition: tr, animated: anime } = options.current; const next = shapeRef.current; const target: MorphFrame = { series: {}, domain: next.domain }; for (const k of Object.keys(next.series)) target.series[k] = sampleSeries(next.series[k], count, c); const from = frame.current; anim.current?.stop(); if (!from || !anime) { frame.current = target; draw.current(target); return; } const keys = new Set([...Object.keys(from.series), ...Object.keys(target.series)]); const a: Record = {}; const b: Record = {}; for (const k of keys) { a[k] = from.series[k] ? resample(from.series[k], count) : new Float64Array(count).fill(baselineOf(from.domain)); b[k] = target.series[k] ?? new Float64Array(count).fill(baselineOf(target.domain)); } const live: MorphFrame = { series: {}, domain: from.domain }; for (const k of keys) live.series[k] = new Float64Array(count); anim.current = animate(0, 1, { ...tr, onUpdate: (p) => { for (const k of keys) { const out = live.series[k]; const s0 = a[k]; const s1 = b[k]; for (let i = 0; i < count; i++) out[i] = s0[i] + (s1[i] - s0[i]) * p; } live.domain = [lerp(from.domain[0], target.domain[0], p), lerp(from.domain[1], target.domain[1], p)]; frame.current = live; draw.current(live); }, onComplete: () => { frame.current = target; draw.current(target); }, }); }, [key]); useLayoutEffect(() => () => anim.current?.stop(), []); const [api] = useState(() => ({ get: () => frame.current, redraw: () => { if (frame.current) draw.current(frame.current); }, })); return api; } 68:T242a,"use client"; import { animate, motion, useMotionValue, type MotionValue, type Transition } from "motion/react"; import { useCallback, useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore, type CSSProperties, type FocusEvent, type KeyboardEvent, type PointerEvent, type ReactNode, } from "react"; import { enter, exitFast, instant, smooth, snappy } from "../../lib/motion"; /* ---------- Active index store --------------------------------------------- */ /** * The scrubbed index, outside React state: the plot never re-renders while you scrub. * Only the pieces that show the value (tooltip, headline) subscribe. */ export type ActiveStore = { get(): number | null; set(index: number | null): void; subscribe(listener: () => void): () => void; }; export function createActiveStore(): ActiveStore { let value: number | null = null; const listeners = new Set<() => void>(); return { get: () => value, set(next) { if (next === value) return; value = next; for (const l of listeners) l(); }, subscribe(l) { listeners.add(l); return () => listeners.delete(l); }, }; } /** One store per chart, stable across renders. */ export function useActiveStore() { const [store] = useState(createActiveStore); return store; } /** Subscribe a component to the scrubbed index (re-renders only that component). */ export function useActiveIndex(store: ActiveStore) { return useSyncExternalStore(store.subscribe, store.get, () => null); } /* ---------- Scrub: pointer, keyboard, crosshair ---------------------------- */ export type UseChartScrubOptions = { /** Number of points (or bars). */ count: number; store: ActiveStore; /** The pixel x of point `i`, relative to the scrub surface. */ xOf: (index: number) => number; /** The nearest index to a pixel x on the scrub surface. */ indexAt: (x: number) => number; /** What a screen reader hears for point `i`: date, then every visible value. */ valueText: (index: number) => string; /** The figure's name, e.g. "Revenue, last 30 days". */ label: string; onActiveChange?: (index: number | null) => void; reduced?: boolean; /** How the crosshair glides between points. Default `snappy`. */ transition?: Transition; }; /** * The interaction model every Eased chart shares (Arc's, kept): the plot is one * `role="slider"` whose value is the scrubbed point. Pointer and touch scrub it (vertical * page scroll still works); arrows step, PageUp/PageDown jump a tenth, Home/End go to the * ends, Escape lets go. `aria-valuetext` reads the date and every value, updated in place. * * Returns props to spread on the scrub surface (a div exactly over the plot) and the * crosshair's motion values: `x` glides to the active point, `opacity` fades it in and out. */ export function useChartScrub({ count, store, xOf, indexAt, valueText, label, onActiveChange, reduced = false, transition = snappy }: UseChartScrubOptions) { const ref = useRef(null); const x = useMotionValue(0); const opacity = useMotionValue(0); const latest = useRef({ count, xOf, valueText, onActiveChange, reduced, transition }); useLayoutEffect(() => { latest.current = { count, xOf, valueText, onActiveChange, reduced, transition }; }); // Follow the store: glide the crosshair, keep ARIA current, notify. useEffect(() => { let shown = store.get() !== null; const sync = () => { const i = store.get(); const { xOf, valueText, onActiveChange, reduced, transition, count } = latest.current; const el = ref.current; if (el && count > 0) { const now = i ?? count - 1; el.setAttribute("aria-valuenow", String(now)); el.setAttribute("aria-valuetext", valueText(now)); } if (i === null) { animate(opacity, 0, reduced ? instant : exitFast); shown = false; } else { const target = xOf(i); if (!shown || reduced) x.jump(target); else animate(x, target, transition); animate(opacity, 1, reduced ? instant : { duration: 0.12 }); shown = true; } onActiveChange?.(i); }; return store.subscribe(sync); }, [store, x, opacity]); // Data or size changed under an active point: clamp it and re-seat the crosshair. useLayoutEffect(() => { const i = store.get(); if (i === null) return; if (i > count - 1) store.set(count > 0 ? count - 1 : null); else animate(x, xOf(i), reduced ? instant : smooth); }, [count, xOf, store, x, reduced]); const fromPointer = useCallback( (e: PointerEvent) => { const rect = e.currentTarget.getBoundingClientRect(); const i = indexAt(e.clientX - rect.left); store.set(Math.max(0, Math.min(count - 1, i))); }, [count, indexAt, store], ); const onKeyDown = (e: KeyboardEvent) => { if (count === 0) return; const i = store.get() ?? count - 1; const page = Math.max(1, Math.round(count / 10)); const next: Record = { ArrowRight: i + 1, ArrowUp: i + 1, ArrowLeft: i - 1, ArrowDown: i - 1, PageUp: i + page, PageDown: i - page, Home: 0, End: count - 1, Escape: null, }; if (!(e.key in next)) return; e.preventDefault(); const n = next[e.key]; store.set(n === null ? null : Math.max(0, Math.min(count - 1, n))); }; const last = Math.max(0, count - 1); const props = { ref, role: "slider", tabIndex: count > 0 ? 0 : -1, "aria-label": label, "aria-valuemin": 0, "aria-valuemax": last, "aria-valuenow": last, "aria-valuetext": count > 0 ? valueText(last) : undefined, "aria-orientation": "horizontal" as const, onKeyDown, onFocus: (e: FocusEvent) => { // Keyboard focus lands on the newest point; pointer focus is handled by the pointer. if (e.currentTarget.matches(":focus-visible") && store.get() === null && count > 0) store.set(count - 1); }, onBlur: () => store.set(null), onPointerDown: fromPointer, onPointerMove: fromPointer, onPointerLeave: () => store.set(null), onPointerCancel: () => store.set(null), style: { touchAction: "pan-y" } as CSSProperties, }; return { props, x, opacity }; } /* ---------- Tooltip -------------------------------------------------------- */ export type ChartTooltipProps = { store: ActiveStore; /** The pixel x of point `i`, in the same coordinates as the tooltip's container. */ xOf: (index: number) => number; /** The container's width; the tooltip flips to the left of the point before it overflows. */ width: number; /** Gap between the point and the tooltip, px. Default 12. */ offset?: number; /** Distance from the container's top, px. Default 0. */ top?: number; reduced?: boolean; /** The content for point `i`. Re-rendered only while scrubbing, and only here. */ children: (index: number) => ReactNode; className?: string; }; /** * A floating readout that follows the scrubbed point on its own `smooth` spring, a beat * behind the crosshair, and flips sides before it would leave the plot. It keeps showing the * last point while it fades out, so content never blanks mid-exit. `aria-hidden`: the slider * already reads the same values. */ export function ChartTooltip({ store, xOf, width, offset = 12, top = 0, reduced = false, children, className = "" }: ChartTooltipProps) { const index = useActiveIndex(store); const [shown, setShown] = useState(null); const el = useRef(null); const x = useMotionValue(0); const visible = useRef(false); if (index !== null && index !== shown) setShown(index); useLayoutEffect(() => { if (index === null || !el.current) { visible.current = false; return; } const w = el.current.offsetWidth; const px = xOf(index); const right = px + offset + w <= width; const target = Math.max(0, Math.min(width - w, right ? px + offset : px - offset - w)); if (!visible.current || reduced) x.jump(target); else animate(x, target, smooth); visible.current = true; }, [index, xOf, width, offset, reduced, x]); return ( {shown !== null && children(shown)} ); } /** The crosshair's motion values, for a vertical rule in the plot's `

{items.map((item) => { const shift = item.align === "start" ? "" : item.align === "end" ? "-translate-x-full" : "-translate-x-1/2"; return ( {item.text} ); })}

); } 6a:Te68,"use client"; import type { ReactNode } from "react"; import { press } from "../../lib/press"; export type ChartKey = { key: string; label: string; /** CSS colour, usually `chartColor(n)`. */ color: string; /** Previous-period style: a dashed line key. */ dashed?: boolean; }; /** A series' identity mark: a short line key for lines, a rounded square for bars and areas. */ export function ChartSwatch({ color, shape = "square", dashed = false, off = false }: { color: string; shape?: "line" | "square"; dashed?: boolean; off?: boolean }) { if (shape === "line") { return ( ); } return ( ); } export type ChartLegendProps = { items: readonly ChartKey[]; /** Keys currently hidden. */ hidden?: ReadonlySet; /** Makes each key a toggle button. Leave out for a static legend. */ onToggle?: (key: string) => void; /** Hovering or focusing a key previews it: the chart dims the others. */ onPreview?: (key: string | null) => void; shape?: "line" | "square"; /** Extra content on the right, e.g. a total. */ trailing?: ReactNode; className?: string; }; /** * The legend: always present for two or more series, so identity never rests on colour. * As toggles, each key is a pressed/unpressed button; the row is pulled left by the buttons' * padding so the first swatch sits on the content's left line (rule 104). */ export function ChartLegend({ items, hidden, onToggle, onPreview, shape = "square", trailing, className = "" }: ChartLegendProps) { return (

{item.label} ); return (

{onToggle ? ( ) : ( {body} )}

); })}

{trailing}

); } 6b:T723,import type { ReactNode } from "react"; export type ChartDataColumn = { /** Column header, e.g. the series label. */ label: string; /** The cell's text for a row. */ value: (datum: D, index: number) => ReactNode; }; export type ChartDataTableProps = { /** What the table lists, e.g. "Revenue by day". */ caption: string; data: readonly D[]; /** The row header (usually the formatted date or category). */ rowLabel: (datum: D, index: number) => ReactNode; /** Header of the row-label column. Default "Date". */ rowLabelHeader?: string; columns: readonly ChartDataColumn[]; }; /** * Every point of a chart as a real ``, visually hidden. Screen reader users get the * whole dataset in table navigation, and anyone who cannot tell two hues apart has the * numbers. Pair it with an `aria-hidden` SVG. * * The hiding sits on a wrapper, not the table: a table treats sr-only's 1px size as a minimum * and overflow only clips its cells, so a hidden table still adds about 22px of scroll per row. */ export function ChartDataTable({ caption, data, rowLabel, rowLabelHeader = "Date", columns }: ChartDataTableProps) { return (

{columns.map((c) => ( ))} {data.map((d, i) => ( {columns.map((c) => ( ))} ))}

{caption}
{rowLabelHeader}	{c.label}
{rowLabel(d, i)}	{c.value(d, i)}

); } 6c:T4b4,"use client"; import { animate, useInView, useMotionValue } from "motion/react"; import { useEffect, type RefObject } from "react"; import { ease } from "../../lib/motion"; export type DrawInOptions = { reduced?: boolean; /** Seconds. Default 0.9: a chart is read left to right, so it is drawn at reading pace. */ duration?: number; delay?: number; /** Share of the chart that must be on screen. Default 0.35. */ amount?: number; }; /** * 0 → 1 once, the first time `ref` scrolls into view; then never again (rule 83: entrances * run once per mount). Drive a left-to-right clip, bar heights or dot opacity from it. * Reduced motion starts at 1. */ export function useDrawIn(ref: RefObject, { reduced = false, duration = 0.9, delay = 0, amount = 0.35 }: DrawInOptions = {}) { const progress = useMotionValue(0); const inView = useInView(ref, { once: true, amount }); useEffect(() => { if (reduced) { progress.jump(1); return; } if (!inView) return; const controls = animate(progress, 1, { duration, delay, ease: ease.inOut }); return () => controls.stop(); }, [inView, reduced, progress, duration, delay]); return progress; } 6d:Tbc4,"use client"; import type { Transition } from "motion/react"; import { createContext, useCallback, useContext, useMemo, useState, type ReactNode } from "react"; import { smooth } from "../../lib/motion"; /** * The shared date range of a page of charts. Changing it is one coordinated beat: every chart * under the provider morphs on the same transition, starting in the same frame. * * Frozen contract (lane 5 → Range Picker, Metrics Dashboard): * range the selected range key, e.g. "7d" * setRange select another range * beat increments on every change; key per-change effects off it * transition the morph every chart under the provider uses * compare whether a previous-period series is shown * setCompare toggle it */ export type ChartRangeValue = { range: R; setRange: (range: R) => void; beat: number; transition: Transition; compare: boolean; setCompare: (compare: boolean) => void; }; export const ChartRangeContext = createContext(null); export type ChartRangeProviderProps = { /** Controlled range. */ value?: R; /** Uncontrolled initial range. */ defaultValue?: R; onValueChange?: (range: R) => void; compare?: boolean; defaultCompare?: boolean; onCompareChange?: (compare: boolean) => void; /** The morph shared by every chart below. Default `smooth`. */ transition?: Transition; children: ReactNode; }; export function ChartRangeProvider({ value, defaultValue, onValueChange, compare: compareProp, defaultCompare = false, onCompareChange, transition = smooth, children, }: ChartRangeProviderProps) { const [inner, setInner] = useState(defaultValue as R); const [innerCompare, setInnerCompare] = useState(defaultCompare); const [beat, setBeat] = useState(0); const range = value ?? inner; const compare = compareProp ?? innerCompare; const setRange = useCallback( (next: R) => { if (next === range) return; setInner(next); setBeat((b) => b + 1); onValueChange?.(next); }, [range, onValueChange], ); const setCompare = useCallback( (next: boolean) => { setInnerCompare(next); onCompareChange?.(next); }, [onCompareChange], ); const ctx = useMemo( () => ({ range, setRange, beat, transition, compare, setCompare }) as unknown as ChartRangeValue, [range, setRange, beat, transition, compare, setCompare], ); return {children}; } /** The surrounding range, or null outside a `ChartRangeProvider`. */ export function useChartRange() { return useContext(ChartRangeContext) as ChartRangeValue | null; } /** The morph transition a chart should use: the provider's, else `fallback`. */ export function useChartTransition(fallback: Transition = smooth) { return useContext(ChartRangeContext)?.transition ?? fallback; } 6e:T83b,/** * The chart palette: six categorical hues in a fixed order, stepped separately for light and * dark and validated as a set (adjacent CVD ΔE ≥ 8.4, normal-vision ΔE ≥ 19.3, both themes). * Slots 3–5 sit under 3:1 on a white surface, which is why every chart ships a data table and * a legend: identity is never colour alone. * * They live here until `eased.css` carries them. Declared at zero specificity, so the same * variables in `eased.css` (or your own theme) win the moment they exist. */ const LIGHT = [ "oklch(57.5% 0.163 255.5)", // blue "oklch(67.1% 0.175 40.6)", // orange "oklch(66.9% 0.141 162.1)", // aqua "oklch(76.4% 0.161 75.1)", // amber "oklch(71.6% 0.141 357.4)", // pink "oklch(52.7% 0.197 283.4)", // violet ]; const DARK = [ "oklch(62.2% 0.161 255.1)", "oklch(62.2% 0.173 40.1)", "oklch(62.1% 0.128 163.1)", "oklch(67% 0.143 73.2)", "oklch(62.2% 0.171 0.8)", "oklch(67% 0.145 286.8)", ]; const vars = (colors: string[]) => colors.map((c, i) => `--eased-chart-${i + 1}:${c};`).join(""); /** The CSS the charts inject; also what to paste into `eased.css` to make the tokens global. */ export const CHART_TOKENS_CSS = `:where(:root){${vars(LIGHT)}--eased-chart-grid:var(--eased-line-subtle);--eased-chart-cursor:var(--eased-line-strong);}` + `:where(.dark,[data-theme="dark"]){${vars(DARK)}}`; /** * Renders the chart tokens once per document (React 19 hoists and dedupes a ` ); } /** Number of categorical slots. A seventh series is not a generated hue: fold it into "Other". */ export const CHART_SLOTS = 6; /** * The colour for series slot `n` (1-based) as a CSS variable. Slots past six fall back to * muted text rather than cycling, so two series never share a hue silently. */ export function chartColor(n: number) { return n >= 1 && n <= CHART_SLOTS ? `var(--eased-chart-${n})` : "var(--eased-text-muted)"; } 6f:T2c6f,"use client"; import { arc as d3arc } from "d3-shape"; import { animate, type AnimationPlaybackControls, type Transition } from "motion/react"; import { useLayoutEffect, useRef, useState } from "react"; import { smooth } from "../../lib/motion"; import { lerp } from "./scales"; import { spreadLabels } from "./value-label"; /* * Angles follow d3-shape: radians, clockwise, zero at 12 o'clock. A full turn is `TAU`. */ export const TAU = Math.PI * 2; /** One keyed arc: where it starts and ends, in radians. */ export type ArcSlice = { key: string; start: number; end: number }; /** The point at `angle` and `radius` from the centre (y grows down, as in SVG). */ export function polar(angle: number, radius: number): [number, number] { return [Math.sin(angle) * radius, -Math.cos(angle) * radius]; } /** * The angle of an offset from the centre, in [0, TAU): the inverse of `polar`, for hit testing. * Arcs laid out from a negative `startAngle` (a gauge from −0.75π) carry negative angles, so * test them against `a > Math.PI ? a - TAU : a`, or whichever turn their sweep covers. */ export function angleOf(dx: number, dy: number) { const a = Math.atan2(dx, -dy); return a < 0 ? a + TAU : a; } export const midAngle = (s: { start: number; end: number }) => (s.start + s.end) / 2; export type PieLayoutOptions = { /** Where the first slice starts. Default 0 (12 o'clock). */ startAngle?: number; /** Where the last slice ends. Default `TAU`; a gauge might sweep from −0.75π to 0.75π. */ endAngle?: number; }; /** * Splits a sweep between keyed values in the order given, never sorted, so the same key * keeps its place from one dataset to the next and morphs in place. A zero, negative or * missing value is a zero-width slice on its seam: it stays in the layout, so it can grow * back out of the same place. */ export function pieLayout(items: readonly { key: string; value: number }[], { startAngle = 0, endAngle = TAU }: PieLayoutOptions = {}): ArcSlice[] { const values = items.map((d) => (Number.isFinite(d.value) && d.value > 0 ? d.value : 0)); const total = values.reduce((s, v) => s + v, 0); const k = total > 0 ? (endAngle - startAngle) / total : 0; let at = startAngle; return items.map((d, i) => { const start = at; at += values[i] * k; return { key: d.key, start, end: at }; }); } export type ArcShape = { outerRadius: number; /** 0 draws a pie wedge. Default 0. */ innerRadius?: number; /** Rounds the arc's four corners, px; d3 clamps it to half the ring's thickness. Default 0. */ cornerRadius?: number; /** Surface gap between neighbouring arcs, px, constant from the inner to the outer edge. Default 0. */ gap?: number; }; type ArcArgs = ArcShape & { start: number; end: number }; const ARC = d3arc() .innerRadius((a) => a.innerRadius ?? 0) .outerRadius((a) => a.outerRadius) .cornerRadius((a) => a.cornerRadius ?? 0) .padRadius((a) => a.outerRadius) .padAngle((a) => (a.gap ? a.gap / a.outerRadius : 0)) .startAngle((a) => a.start) .endAngle((a) => a.end) .digits(2); /** The SVG path of one arc around (0, 0), or "" when it has no width to draw. */ export function arcPath(shape: ArcShape, start: number, end: number) { if (!(end - start > 1e-4) || shape.outerRadius <= 0) return ""; return ARC({ ...shape, start, end }) ?? ""; } /* ---------- useArcMorph ---------------------------------------------------- */ export type UseArcMorphOptions = { /** Draws a frame: write `d` attributes and move labels here. Called outside React render. */ onFrame: (slices: readonly ArcSlice[]) => void; /** The morph's transition. Default `smooth` (no overshoot). */ transition?: Transition; /** False jumps to every new layout (reduced motion). Default true. */ animate?: boolean; /** * Where a key with no partner grows out of and closes into: `"seam"` (default), its place * in a ring of touching slices; `"start"`, its own start angle, for arcs that each start at * the same angle (concentric rings, gauges). */ grow?: "seam" | "start"; }; /** Each key's start and end on both sides of a morph. */ type Pair = { key: string; a: { start: number; end: number }; b: { start: number; end: number } }; /** * Where a slice with no partner on the other side sits: zero-width on the seam it grows out * of or closes into, i.e. the end of the nearest key before it that both sides share (else * the start of the nearest one after it, else its own start). */ function seam(order: readonly ArcSlice[], index: number, other: ReadonlyMap) { for (let j = index - 1; j >= 0; j--) { const s = other.get(order[j].key); if (s) return s.end; } for (let j = index + 1; j < order.length; j++) { const s = other.get(order[j].key); if (s) return s.start; } return order[index].start; } function pairsOf(from: readonly ArcSlice[], to: readonly ArcSlice[], grow: "seam" | "start"): Pair[] { const before = new Map(from.map((s) => [s.key, s])); const after = new Map(to.map((s) => [s.key, s])); const pairs: Pair[] = to.map((s, i) => { const a = before.get(s.key); const at = a ? 0 : grow === "start" ? s.start : seam(to, i, before); return { key: s.key, a: a ?? { start: at, end: at }, b: s }; }); // Leaving keys keep their place: after the nearest key before them that is still there. from.forEach((s, i) => { if (after.has(s.key)) return; const at = grow === "start" ? s.start : seam(from, i, after); let index = 0; for (let j = i - 1; j >= 0; j--) { const k = pairs.findIndex((p) => p.key === from[j].key); if (k !== -1) { index = k + 1; break; } } pairs.splice(index, 0, { key: s.key, a: s, b: { start: at, end: at } }); }); return pairs; } const sameKeys = (a: readonly string[], b: readonly string[]) => a.length === b.length && a.every((k, i) => k === b[i]); /** * Morphs keyed arcs between layouts without React re-rendering a frame: every key tweens its * start and end angle on one progress, from whatever is on screen. A key that appears grows * out of the seam where it will sit; a key that leaves closes into its seam and is then * dropped. A change mid-morph starts from the frame on screen. * * const { keys } = useArcMorph(pieLayout(items), { onFrame: (slices) => { * for (const s of slices) paths.current[s.key]?.setAttribute("d", arcPath(shape, s.start, s.end)); * }}); * * `keys` are the slices on screen, leaving ones included, in drawing order: render one * element per key. `get()` is the current frame; `redraw()` re-emits it, e.g. after a resize. */ export function useArcMorph(slices: readonly ArcSlice[], { onFrame, transition = smooth, animate: animated = true, grow = "seam" }: UseArcMorphOptions) { const frame = useRef(null); const anim = useRef(null); const draw = useRef(onFrame); const latest = useRef({ slices, transition, animated, grow }); const [keys, setKeys] = useState(() => slices.map((s) => s.key)); useLayoutEffect(() => { draw.current = onFrame; latest.current = { slices, transition, animated, grow }; }); const settle = (next: readonly string[]) => setKeys((k) => (sameKeys(k, next) ? k : next)); const signature = slices.map((s) => `${s.key}:${s.start.toFixed(5)}:${s.end.toFixed(5)}`).join("|"); useLayoutEffect(() => { const { slices, transition: tr, animated: anime, grow: g } = latest.current; const target = slices.map((s) => ({ ...s })); const from = frame.current; anim.current?.stop(); if (!from || !anime) { frame.current = target; settle(target.map((s) => s.key)); draw.current(target); return; } const pairs = pairsOf(from, target, g); settle(pairs.map((p) => p.key)); const live: ArcSlice[] = pairs.map((p) => ({ key: p.key, ...p.a })); anim.current = animate(0, 1, { ...tr, onUpdate: (t) => { pairs.forEach((p, i) => { live[i].start = lerp(p.a.start, p.b.start, t); live[i].end = lerp(p.a.end, p.b.end, t); }); frame.current = live; draw.current(live); }, onComplete: () => { frame.current = target; settle(target.map((s) => s.key)); draw.current(target); }, }); }, [signature]); useLayoutEffect(() => () => anim.current?.stop(), []); // A key that just mounted has an element now: give it this frame's shape. useLayoutEffect(() => { if (frame.current) draw.current(frame.current); }, [keys]); const [api] = useState(() => ({ get: () => frame.current as readonly ArcSlice[] | null, redraw: () => { if (frame.current) draw.current(frame.current); }, })); return { keys, get: api.get, redraw: api.redraw }; } /* ---------- Outside labels ------------------------------------------------- */ export type ArcLabelPlacement = { key: string; /** Which column the label sits in. */ side: "left" | "right"; /** Where the label's text starts (right) or ends (left), and its vertical centre, relative to the centre. */ x: number; y: number; /** The leader line, relative to the centre: out from the arc, an elbow, then level into the label. */ leader: string; }; export type ArcLabelOptions = { /** The arcs' outer radius, px. */ radius: number; /** How far the leader runs out from the arc before it turns, px. Default 12. */ elbow?: number; /** The gap between the ring and each label column, px. Default 28. */ column?: number; /** The space above and below the centre the labels may use, px. */ top: number; bottom: number; /** A label's line height plus the air it needs, px. Default 20. */ pitch?: number; /** Arcs narrower than this (radians) get no label. Default 0.02. */ minAngle?: number; }; /** * Outside labels for a ring: a column each side, each label level with the middle of its arc * where there is room, and spread apart (`spreadLabels`) where there is not. When a column * cannot hold them all, the labels of the narrowest arcs drop out. Returns a placement per * labelled arc; arcs that got none are left out. */ export function arcLabelLayout(slices: readonly ArcSlice[], { radius, elbow = 12, column = 28, top, bottom, pitch = 20, minAngle = 0.02 }: ArcLabelOptions): ArcLabelPlacement[] { const out: ArcLabelPlacement[] = []; for (const side of ["right", "left"] as const) { const items = slices .filter((s) => s.end - s.start >= minAngle && (Math.sin(midAngle(s)) >= 0) === (side === "right")) .map((s) => ({ key: s.key, at: polar(midAngle(s), radius + elbow)[1], priority: s.end - s.start, slice: s })); const placed = spreadLabels(items, { min: top + pitch / 2, max: bottom - pitch / 2, pitch }); const dir = side === "right" ? 1 : -1; const x = dir * (radius + column); for (const item of items) { const y = placed.get(item.key); if (y === undefined) continue; const mid = midAngle(item.slice); const [x0, y0] = polar(mid, radius + 3); const [x1] = polar(mid, radius + elbow); const r = (n: number) => Math.round(n * 100) / 100; out.push({ key: item.key, side, x, y, leader: `M${r(x0)},${r(y0)}L${r(x1)},${r(y)}L${r(x - dir * 4)},${r(y)}` }); } } return out; } 70:T1191,"use client"; import type { ReactNode, Ref } from "react"; import { NumberRoll, type NumberRollFormat } from "../number-roll/number-roll"; /* ---------- ChartValueLabel ------------------------------------------------ */ export type ValueLabelAlign = "start" | "center" | "end"; export type ChartValueLabelProps = NumberRollFormat & { value: number; /** Text before the number, e.g. the slice or series name. */ label?: ReactNode; /** False shows a new value at once instead of rolling to it. Default true. */ animated?: boolean; /** Fades the label back while another part of the chart is active. */ dimmed?: boolean; ref?: Ref; className?: string; }; /** * A value printed on a chart: an optional name, then the number, which rolls to each new * value (NumberRoll). It renders hidden at the top left of its positioned container; the * chart moves it each frame with `placeValueLabel`, so it rides a morph without React * re-rendering. `aria-hidden`: the chart's slider and data table already read every value. */ export function ChartValueLabel({ value, label, animated = true, dimmed = false, ref, className = "", ...format }: ChartValueLabelProps) { return (

{label != null && {label}}

); } export type ValueLabelPlacement = { /** The anchor point in the container, px; `align` says which edge of the label sits on it. */ x: number; /** The label's vertical centre, px. */ y: number; align: ValueLabelAlign; /** False fades the label out where it stands. */ visible: boolean; /** Truncates the name past this width, px. */ maxWidth?: number; }; const SHIFT: Record = { start: "0%", center: "-50%", end: "-100%" }; /** Moves a `ChartValueLabel` to its spot for this frame. Call it from a chart's `onFrame`. */ export function placeValueLabel(el: HTMLElement | null, { x, y, align, visible, maxWidth }: ValueLabelPlacement) { if (!el) return; el.style.transform = `translate(${Math.round(x * 2) / 2}px, ${Math.round(y * 2) / 2}px) translate(${SHIFT[align]}, -50%)`; el.style.maxWidth = maxWidth === undefined ? "" : `${Math.max(0, Math.floor(maxWidth))}px`; el.toggleAttribute("data-hidden", !visible); } /* ---------- Collision ------------------------------------------------------ */ export type SpreadItem = { key: string; /** Where the label wants to sit, px along the axis. */ at: number; /** Which labels to keep when they do not all fit; higher stays. Default 0. */ priority?: number; }; /** * One-dimensional label collision: keeps each label as close to where it wants to be as it * can while every pair stays at least `pitch` apart inside [min, max]. When they do not all * fit, the lowest-priority labels drop out first. Returns the position of every label kept. * Works along any axis: a column of arc labels, a row of bar value labels. */ export function spreadLabels(items: readonly SpreadItem[], { min, max, pitch }: { min: number; max: number; pitch: number }): Map { const fit = Math.max(0, Math.floor((max - min) / pitch) + 1); let kept = [...items].sort((a, b) => a.at - b.at); if (kept.length > fit) { const drop = new Set( [...kept] .sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0)) .slice(0, kept.length - fit) .map((d) => d.key), ); kept = kept.filter((d) => !drop.has(d.key)); } const pos = kept.map((d) => Math.max(min, Math.min(max, d.at))); // Down from the top, then back up from the bottom: the smallest move that clears every overlap. for (let i = 1; i < pos.length; i++) pos[i] = Math.max(pos[i], pos[i - 1] + pitch); if (pos.length && pos[pos.length - 1] > max) { pos[pos.length - 1] = max; for (let i = pos.length - 2; i >= 0; i--) pos[i] = Math.min(pos[i], pos[i + 1] - pitch); } return new Map(kept.map((d, i) => [d.key, pos[i]])); } 71:Te5c,import type { Domain } from "./scales"; import { chartColor } from "./tokens"; /** * The colour of a cell with no value (null, NaN, or 0 when zero is empty): the line colour, one * step firmer than the chart grid so an empty cell still reads as a cell (1.44:1 on a light * surface, 1.65:1 on a dark one). */ export const SEQUENTIAL_EMPTY = "var(--eased-line)"; export type SequentialStop = { /** 0 for the lightest step. */ step: number; color: string; /** The step covers values from `from` (inclusive) to `to` (exclusive; the last step includes it). */ from: number; to: number; }; export type SequentialScale = { domain: Domain; steps: number; /** The colour for missing values. */ empty: string; /** One per step, lightest first: a legend draws these. */ stops: readonly SequentialStop[]; /** The step a value falls in, clamped to the domain, or -1 when it is empty. */ step: (value: number | null | undefined) => number; /** The step's colour, or `empty`. */ color: (value: number | null | undefined) => string; }; export type SequentialScaleOptions = { /** How many colour steps the domain splits into, 2 to 9. Default 5. */ steps?: number; /** The hue the ramp builds to. Default `chartColor(1)`. */ color?: string; /** Draw a value of exactly 0 as empty, not as the lightest step: counts, where nothing happened. Default true. */ zeroIsEmpty?: boolean; }; /** * The ramp alone: `steps` colours from just past the empty cell to past the hue. The first * steps mix the hue into the empty colour in even shares (at most half for the first of two); * the last leans 30% toward the text colour, one more even lightness step past the hue. Mixed * in Oklab, so the ramp keeps one hue and its lightness changes evenly (Oklab L 0.80 → 0.47 in * light, 0.43 → 0.72 in dark): darker means more on a light surface, brighter on a dark one, * and it reads under every colour vision deficiency. With five steps, neighbouring steps differ * by 1.28–1.56:1 in contrast, and the first sits 1.28:1 from empty: tell values apart in the * tooltip or table, not by shade alone. */ export function sequentialColors(steps = 5, color = chartColor(1)): string[] { const n = Math.max(2, Math.min(9, Math.round(steps))); return Array.from({ length: n }, (_, i) => i === n - 1 ? `color-mix(in oklab, ${color} 70%, var(--eased-text))` : `color-mix(in oklab, ${color} ${Math.round(((i + 1) / Math.max(2, n - 1)) * 1000) / 10}%, ${SEQUENTIAL_EMPTY})`, ); } /** * A sequential colour scale for magnitudes: heatmaps, cohort and retention tables. Splits * `domain` into `steps` equal bins, each a token-built colour, and returns the bins as legend * stops. Pass a fixed domain (e.g. [0, 1] for retention) when two datasets should share colours. */ export function sequentialScale(domain: Domain, { steps = 5, color = chartColor(1), zeroIsEmpty = true }: SequentialScaleOptions = {}): SequentialScale { const colors = sequentialColors(steps, color); const n = colors.length; const [lo, hi] = domain; const span = hi - lo; const step = (value: number | null | undefined) => { if (value == null || !Number.isFinite(value) || (zeroIsEmpty && value === 0)) return -1; if (span <= 0) return n - 1; return Math.max(0, Math.min(n - 1, Math.floor(((value - lo) / span) * n))); }; return { domain, steps: n, empty: SEQUENTIAL_EMPTY, stops: colors.map((c, i) => ({ step: i, color: c, from: lo + (span * i) / n, to: lo + (span * (i + 1)) / n })), step, color: (value) => { const s = step(value); return s === -1 ? SEQUENTIAL_EMPTY : colors[s]; }, }; } 62:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}],["$","li","d3-scale",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/d3-scale","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"d3-scale"}]]}]}],["$","li","d3-shape",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/d3-shape","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"d3-shape"}]]}]}]]}],["$","$L63",null,{"namespace":"@registrydirectory","registryDependencies":["https://eased.dev/r/eased-tokens.json","https://eased.dev/r/eased-motion.json","https://eased.dev/r/eased-number-roll.json"]}]]}],null]}],["$","$L64",null,{"files":[{"path":"src/registry/eased/_primitives/chart-core/scales.ts","content":"$65","type":"registry:ui","target":"@components/eased/_primitives/chart-core/scales.ts"},{"path":"src/registry/eased/_primitives/chart-core/use-chart-size.ts","content":"$66","type":"registry:ui","target":"@components/eased/_primitives/chart-core/use-chart-size.ts"},{"path":"src/registry/eased/_primitives/chart-core/morph.ts","content":"$67","type":"registry:ui","target":"@components/eased/_primitives/chart-core/morph.ts"},{"path":"src/registry/eased/_primitives/chart-core/scrub.tsx","content":"$68","type":"registry:ui","target":"@components/eased/_primitives/chart-core/scrub.tsx"},{"path":"src/registry/eased/_primitives/chart-core/grid.tsx","content":"$69","type":"registry:ui","target":"@components/eased/_primitives/chart-core/grid.tsx"},{"path":"src/registry/eased/_primitives/chart-core/legend.tsx","content":"$6a","type":"registry:ui","target":"@components/eased/_primitives/chart-core/legend.tsx"},{"path":"src/registry/eased/_primitives/chart-core/data-table.tsx","content":"$6b","type":"registry:ui","target":"@components/eased/_primitives/chart-core/data-table.tsx"},{"path":"src/registry/eased/_primitives/chart-core/draw-in.ts","content":"$6c","type":"registry:ui","target":"@components/eased/_primitives/chart-core/draw-in.ts"},{"path":"src/registry/eased/_primitives/chart-core/range.tsx","content":"$6d","type":"registry:ui","target":"@components/eased/_primitives/chart-core/range.tsx"},{"path":"src/registry/eased/_primitives/chart-core/tokens.tsx","content":"$6e","type":"registry:ui","target":"@components/eased/_primitives/chart-core/tokens.tsx"},{"path":"src/registry/eased/_primitives/chart-core/polar.ts","content":"$6f","type":"registry:ui","target":"@components/eased/_primitives/chart-core/polar.ts"},{"path":"src/registry/eased/_primitives/chart-core/value-label.tsx","content":"$70","type":"registry:ui","target":"@components/eased/_primitives/chart-core/value-label.tsx"},{"path":"src/registry/eased/_primitives/chart-core/sequential.ts","content":"$71","type":"registry:ui","target":"@components/eased/_primitives/chart-core/sequential.ts"}],"className":"h-[70svh] min-h-80"}]]}]