@nous-research/ui 0.1.0

package/dist/ui/components/button.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import { cloneElement } from 'react';
+import { cn } from '../../utils';
+import { Typography } from './typography';
+const buttonVariants = cva([
+    'group relative grid cursor-pointer grid-cols-[auto_1fr_auto] items-center',
+    'px-[.9em_.75em] py-[1.25em]',
+    'leading-0 font-bold tracking-[0.2em] uppercase',
+    'shadow-[inset_-1px_-1px_0_0_#00000080,inset_1px_1px_0_0_#ffffff80]',
+    'active:invert',
+    'disabled:pointer-events-none disabled:bg-midground/15 disabled:text-midground disabled:shadow-none'
+], {
+    compoundVariants: [
+        {
+            class: 'bg-midground text-background-base',
+            invert: false,
+            outlined: false
+        },
+        {
+            class: 'bg-midground/15 text-midground',
+            invert: true,
+            outlined: false
+        },
+        {
+            class: 'shadow-midground',
+            invert: false,
+            outlined: true
+        },
+        {
+            class: 'shadow-[inset_-1px_-1px_0_0_#ffffff12,inset_1px_1px_0_0_#ffffff29]',
+            invert: true,
+            outlined: true
+        }
+    ],
+    defaultVariants: { invert: false, outlined: false },
+    variants: {
+        invert: {
+            true: 'shadow-[inset_-1px_-1px_0_0_#00000080,inset_1px_1px_0_0_#ffffff29]'
+        },
+        outlined: {
+            true: 'text-midground bg-transparent'
+        }
+    }
+});
+const IconSlot = ({ icon, side }) => (_jsxs(_Fragment, { children: [_jsx("span", { className: "w-5" }), _jsx("span", { className: cn('absolute top-1/2 -translate-y-1/2', side === 'left' ? 'left-3' : 'right-3'), children: typeof icon === 'object'
+                ? cloneElement(icon, {
+                    className: 'size-3.5'
+                })
+                : icon })] }));
+export const Button = ({ children, className, invert, outlined, prefix, suffix, ...props }) => (_jsxs(Typography, { as: "button", className: cn(buttonVariants({ invert, outlined }), className), mono: true, ...props, children: [_jsx("span", { "aria-hidden": true, className: "arc-border opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-focus-visible:opacity-100 group-active:opacity-100" }), prefix && _jsx(IconSlot, { icon: prefix, side: "left" }), children, suffix && _jsx(IconSlot, { icon: suffix, side: "right" })] }));
+//# sourceMappingURL=button.js.map

package/dist/ui/components/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/ui/components/button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAEpC,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAA;AAEhC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,MAAM,cAAc,GAAG,GAAG,CACxB;IACE,2EAA2E;IAC3E,6BAA6B;IAC7B,gDAAgD;IAChD,oEAAoE;IACpE,eAAe;IACf,oGAAoG;CACrG,EACD;IACE,gBAAgB,EAAE;QAChB;YACE,KAAK,EAAE,mCAAmC;YAC1C,MAAM,EAAE,KAAK;YACb,QAAQ,EAAE,KAAK;SAChB;QACD;YACE,KAAK,EAAE,gCAAgC;YACvC,MAAM,EAAE,IAAI;YACZ,QAAQ,EAAE,KAAK;SAChB;QACD;YACE,KAAK,EAAE,kBAAkB;YACzB,MAAM,EAAE,KAAK;YACb,QAAQ,EAAE,IAAI;SACf;QACD;YACE,KAAK,EACH,oEAAoE;YACtE,MAAM,EAAE,IAAI;YACZ,QAAQ,EAAE,IAAI;SACf;KACF;IACD,eAAe,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE;IACnD,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,IAAI,EAAE,oEAAoE;SAC3E;QACD,QAAQ,EAAE;YACR,IAAI,EAAE,+BAA+B;SACtC;KACF;CACF,CACF,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,EAChB,IAAI,EACJ,IAAI,EAIL,EAAE,EAAE,CAAC,CACJ,8BACE,eAAM,SAAS,EAAC,KAAK,GAAG,EAExB,eACE,SAAS,EAAE,EAAE,CACX,mCAAmC,EACnC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CACvC,YAEA,OAAO,IAAI,KAAK,QAAQ;gBACvB,CAAC,CAAC,YAAY,CAAC,IAA+B,EAAE;oBAC5C,SAAS,EAAE,UAAU;iBACtB,CAAC;gBACJ,CAAC,CAAC,IAAI,GACH,IACN,CACJ,CAAA;AAED,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EACrB,QAAQ,EACR,SAAS,EACT,MAAM,EACN,QAAQ,EACR,MAAM,EACN,MAAM,EACN,GAAG,KAAK,EACI,EAAE,EAAE,CAAC,CACjB,MAAC,UAAU,IACT,EAAE,EAAC,QAAQ,EACX,SAAS,EAAE,EAAE,CAAC,cAAc,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,EAAE,SAAS,CAAC,EAC9D,IAAI,WACA,KAAK,aAET,oCAEE,SAAS,EAAC,uIAAuI,GACjJ,EACD,MAAM,IAAI,KAAC,QAAQ,IAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAC,MAAM,GAAG,EAChD,QAAQ,EACR,MAAM,IAAI,KAAC,QAAQ,IAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAC,OAAO,GAAG,IACvC,CACd,CAAA"}

package/dist/ui/components/cursor.d.ts

@@ -0,0 +1,3 @@
+export declare function Cursor({ scale }: {
+    scale?: number;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/cursor.js

@@ -0,0 +1,57 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+const INTERACTIVE = 'a, button, [role="button"], input, textarea, select, [data-cursor]';
+const HAND = 'M6.84 21.83c-.47-.6-1.05-1.82-2.07-3.34-.58-.83-2.01-2.41-2.45-3.23a2.1 2.1 0 0 1-.25-1.67 2.2 2.2 0 0 1 2.39-1.67c.85.18 1.63.6 2.25 1.2.43.41.82.85 1.18 1.32.27.34.33.47.63.85.3.39.5.77.35.2-.11-.83-.31-2.23-.6-3.48-.21-.95-.26-1.1-.46-1.82s-.32-1.32-.54-2.13c-.2-.8-.35-1.62-.46-2.44a4.7 4.7 0 0 1 .43-3.08c.58-.55 1.44-.7 2.17-.37a4.4 4.4 0 0 1 1.57 2.17c.43 1.07.72 2.19.86 3.33.27 1.67.79 4.1.8 4.6 0-.61-.11-1.91 0-2.5.12-.6.54-1.1 1.12-1.33.5-.15 1.02-.19 1.53-.1.52.1.98.4 1.29.83.38.98.6 2 .63 3.05.04-.91.2-1.82.47-2.7.28-.39.68-.67 1.15-.8.55-.1 1.11-.1 1.66 0 .46.15.85.44 1.14.82.35.88.56 1.82.63 2.77 0 .23.12-.65.48-1.24a1.67 1.67 0 1 1 3.17 1.07v3.77c-.06.97-.2 1.94-.4 2.9-.29.85-.7 1.65-1.2 2.38-.8.9-1.48 1.92-1.98 3.02a6.67 6.67 0 0 0 .03 3.2c-.68.07-1.37.07-2.05 0-.65-.1-1.45-1.4-1.67-1.8a.63.63 0 0 0-1.13 0c-.37.64-1.18 1.79-1.75 1.85-1.12.14-3.42 0-5.23 0 0 0 .3-1.66-.39-2.27-.68-.6-1.38-1.3-1.9-1.76l-1.4-1.6Z';
+export function Cursor({ scale = 0.8 }) {
+    const $root = useRef(null);
+    const $arrow = useRef(null);
+    const $ptr = useRef(null);
+    useEffect(() => {
+        const [root, arrow, ptr] = [$root.current, $arrow.current, $ptr.current];
+        if (!root || !arrow || !ptr) {
+            return;
+        }
+        const on = (el, ev, fn, opts) => {
+            el.addEventListener(ev, fn, opts);
+            return () => el.removeEventListener(ev, fn);
+        };
+        return [
+            on(document, 'mousemove', (e) => {
+                const { clientX: x, clientY: y } = e;
+                root.style.translate = `${x}px ${y}px`;
+                root.style.opacity = '1';
+            }, { passive: true }),
+            on(document, 'mouseover', (e) => {
+                const isPtr = !!e.target.closest?.(INTERACTIVE);
+                arrow.style.opacity = isPtr ? '0' : '1';
+                ptr.style.opacity = isPtr ? '1' : '0';
+            }, { passive: true }),
+            on(document, 'mousedown', () => {
+                root.style.transform = 'translate(1px, 1px)';
+            }),
+            on(document, 'mouseup', () => {
+                root.style.transform = '';
+            }),
+            on(document.documentElement, 'mouseleave', () => {
+                root.style.opacity = '0';
+            }),
+            on(document.documentElement, 'mouseenter', () => {
+                root.style.opacity = '1';
+            })
+        ].reduce((_, fn) => fn, undefined);
+    }, []);
+    return (_jsxs("div", { "aria-hidden": true, ref: $root, style: {
+            filter: 'drop-shadow(1px 2px 0 #000)',
+            height: 32 * scale,
+            left: 0,
+            opacity: 0,
+            pointerEvents: 'none',
+            position: 'fixed',
+            top: 0,
+            width: 32 * scale,
+            willChange: 'translate',
+            zIndex: 9999
+        }, children: [_jsx("div", { ref: $arrow, style: { inset: 0, position: 'absolute' }, children: _jsx("svg", { viewBox: "0 0 16 16", children: _jsx("path", { d: "M1 1L1 14L5 10L8 15L10 14L7 9L12 9L1 1Z", fill: "#fff", stroke: "#000", strokeLinejoin: "round", strokeWidth: 1 }) }) }), _jsx("div", { ref: $ptr, style: { inset: 0, opacity: 0, position: 'absolute' }, children: _jsx("svg", { viewBox: "0 0 28 29", children: _jsx("path", { d: HAND, fill: "#fff", stroke: "#000", strokeLinejoin: "round", strokeWidth: 2, style: { paintOrder: 'stroke fill' } }) }) })] }));
+}
+//# sourceMappingURL=cursor.js.map

package/dist/ui/components/cursor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cursor.js","sourceRoot":"","sources":["../../../src/ui/components/cursor.tsx"],"names":[],"mappings":"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"}

package/dist/ui/components/dropdown-menu.d.ts

@@ -0,0 +1,12 @@
+type Direction = 'down' | 'up' | 'left' | 'right';
+export declare function DropdownMenu<T extends string>({ className, direction, onChange, options, value }: {
+    className?: string;
+    direction?: Direction;
+    onChange: (value: T) => void;
+    options: {
+        label: string;
+        value: T;
+    }[];
+    value: T;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/components/dropdown-menu.js

@@ -0,0 +1,53 @@
+'use client';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from 'react';
+import { cn } from '../../utils';
+const font = 'font-mondwest text-[.9375rem] leading-[1.4] tracking-[0.1875rem]';
+export function DropdownMenu({ className, direction = 'down', onChange, options, value }) {
+    const id = useId();
+    const [open, setOpen] = useState(false);
+    const ref = useRef(null);
+    const anchor = `--dropdown-${id.replace(/:/g, '')}`;
+    const panelStyle = {
+        position: 'fixed',
+        positionAnchor: anchor,
+        positionTryFallbacks: direction === 'left' || direction === 'right'
+            ? 'flip-inline, flip-block'
+            : 'flip-block, flip-inline',
+        ...(direction === 'up' && {
+            left: 'calc(anchor(left) - 0.5rem)',
+            top: 'calc(anchor(top) + 1rem)',
+            transform: 'translateY(-100%)'
+        }),
+        ...(direction === 'right' && {
+            left: 'calc(anchor(right))',
+            top: 'calc(anchor(top) - 0.5rem)'
+        }),
+        ...(direction === 'left' && {
+            left: 'calc(anchor(left) - 1px)',
+            top: 'calc(anchor(top) - 0.5rem)',
+            transform: 'translateX(-100%)'
+        }),
+        ...(direction === 'down' && {
+            left: 'calc(anchor(left) - 0.5rem)',
+            top: 'calc(anchor(top) - 0.5rem)'
+        })
+    };
+    useEffect(() => {
+        if (!open) {
+            return;
+        }
+        const ac = new AbortController();
+        document.addEventListener('mousedown', e => {
+            if (!ref.current?.contains(e.target)) {
+                setOpen(false);
+            }
+        }, { signal: ac.signal });
+        return () => ac.abort();
+    }, [open]);
+    return (_jsxs("span", { className: cn('relative inline-block align-top', className), ref: ref, children: [_jsxs("span", { className: cn(font, 'inline-block cursor-pointer hover:underline'), onClick: () => setOpen(!open), style: { anchorName: anchor }, children: [options.find(o => o.value === value)?.label ?? value, ' ', open ? '↑' : '↓'] }), open && (_jsx("div", { className: "bg-background-base z-50 flex flex-col", style: panelStyle, children: options.map(o => (_jsx("span", { className: cn(font, 'block cursor-pointer p-2 whitespace-nowrap', o.value === value ? 'underline' : 'hover:bg-midground/10'), onClick: () => {
+                        onChange(o.value);
+                        setOpen(false);
+                    }, children: o.label }, o.value))) }))] }));
+}
+//# sourceMappingURL=dropdown-menu.js.map

package/dist/ui/components/dropdown-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-menu.js","sourceRoot":"","sources":["../../../src/ui/components/dropdown-menu.tsx"],"names":[],"mappings":"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"}

package/dist/ui/components/fit-text/fit-text.css

@@ -0,0 +1,42 @@
+.fit-text {
+  --fit-captured-length: initial;
+  --fit-support-sentinel: var(--fit-captured-length, 9999px);
+
+  display: flex;
+  container-type: inline-size;
+
+  > [aria-hidden] {
+    visibility: hidden;
+  }
+
+  > :not([aria-hidden]) {
+    flex-grow: 1;
+    container-type: inline-size;
+
+    --fit-captured-length: 100cqi;
+    --fit-available-space: var(--fit-captured-length);
+
+    > * {
+      --fit-support-sentinel: inherit;
+      --fit-captured-length: 100cqi;
+      --fit-ratio: tan(
+        atan2(
+          var(--fit-available-space),
+          var(--fit-available-space) - var(--fit-captured-length)
+        )
+      );
+
+      display: block;
+      inline-size: var(--fit-available-space);
+      font-size: clamp(
+        var(--fit-min, 1em),
+        1em * var(--fit-ratio),
+        var(--fit-max, infinity * 1px) - var(--fit-support-sentinel)
+      );
+
+      @container (inline-size > 0) {
+        white-space: nowrap;
+      }
+    }
+  }
+}

package/dist/ui/components/fit-text/index.d.ts

@@ -0,0 +1,9 @@
+import { type PolyProps } from '../../../utils';
+export declare const FitText: import("../../..").PolyComponent<"span", OwnProps>;
+interface OwnProps {
+    children: string;
+    max?: string;
+    min?: string;
+}
+export type FitTextProps<T extends React.ElementType = 'span'> = PolyProps<T, OwnProps>;
+export {};

package/dist/ui/components/fit-text/index.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement } from 'react';
+import { cn, polyRef } from '../../../utils';
+export const FitText = polyRef(({ as, children, className, max, min = '1em', style: baseStyle, ...rest }, ref) => {
+    if (typeof children !== 'string') {
+        return null;
+    }
+    const style = {
+        '--fit-max': max ?? 'infinity * 1px',
+        '--fit-min': min,
+        ...baseStyle
+    };
+    return createElement((as ?? 'span'), { ...rest, className: cn('fit-text', className), ref, style }, _jsxs(_Fragment, { children: [_jsx("span", { children: _jsx("span", { children: children }) }), _jsx("span", { "aria-hidden": "true", children: children })] }));
+});
+//# sourceMappingURL=index.js.map

package/dist/ui/components/fit-text/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/ui/components/fit-text/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAErC,OAAO,EAAE,EAAE,EAAkB,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAE5D,MAAM,CAAC,MAAM,OAAO,GAAG,OAAO,CAC5B,CACE,EAAE,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,GAAG,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EACxE,GAAG,EACH,EAAE;IACF,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE,CAAC;QACjC,OAAO,IAAI,CAAA;IACb,CAAC;IAED,MAAM,KAAK,GAAG;QACZ,WAAW,EAAE,GAAG,IAAI,gBAAgB;QACpC,WAAW,EAAE,GAAG;QAChB,GAAG,SAAS;KACU,CAAA;IAExB,OAAO,aAAa,CAClB,CAAC,EAAE,IAAI,MAAM,CAAsB,EACnC,EAAE,GAAG,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,EAC7D,8BACE,yBACE,yBAAO,QAAQ,GAAQ,GAClB,EAEP,8BAAkB,MAAM,YAAE,QAAQ,GAAQ,IACzC,CACJ,CAAA;AACH,CAAC,CACF,CAAA"}

package/dist/ui/components/graphs/bar-chart.d.ts

@@ -0,0 +1,12 @@
+import { type ChartProps, type DataPoint } from './utils';
+export declare const BarChart: {
+    (props: Omit<BarChartProps<DataPoint> & {
+        backgroundColor?: string;
+        color?: string;
+    }, keyof import("../blend-mode").BlendColors>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface BarChartProps<T extends DataPoint> extends ChartProps<T> {
+    xDomain?: [number, number];
+}
+export {};

package/dist/ui/components/graphs/bar-chart.js

@@ -0,0 +1,75 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as Plot from '@observablehq/plot';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { cn } from '../../../utils';
+import { accessor, CHART_MARGINS, CHART_STYLE, Crosshair, setupCrosshair, stylePlot, useDims, withChartBlend } from './utils';
+export const BarChart = withChartBlend(({ backgroundColor: _, className, color: fillColor, data = [], formatTooltip, formatX: formatXProp, formatY: formatYProp, x = 'label', xDomain, xTicks = [0, 50000, 100000], y = 'value', yDomain = [0, 10], yTicks = [10, 8, 4, 2], ...props }) => {
+    const ref = useRef(null);
+    const plotRef = useRef(null);
+    const [crosshair, setCrosshair] = useState({ x: null });
+    const dims = useDims(ref);
+    const formatX = useCallback((v) => formatXProp?.(v) ??
+        (typeof v === 'number' ? v.toLocaleString('en-US') : String(v)), [formatXProp]);
+    const formatY = useCallback((v) => formatYProp?.(v) ?? String(v), [formatYProp]);
+    const getX = useMemo(() => accessor(x), [x]);
+    const getY = useMemo(() => accessor(y), [y]);
+    useEffect(() => {
+        if (!ref.current ||
+            !plotRef.current ||
+            !data.length ||
+            !dims.h ||
+            !dims.w) {
+            return;
+        }
+        plotRef.current.innerHTML = '';
+        const [xMin, xMax] = [
+            xDomain?.[0] ?? 0,
+            xDomain?.[1] ?? Math.max(...data.map(d => getX(d)))
+        ];
+        const plot = Plot.plot({
+            ...CHART_MARGINS,
+            height: dims.h,
+            marks: [
+                Plot.rectY(data, {
+                    fill: fillColor ?? 'currentColor',
+                    fillOpacity: 0.3,
+                    interval: (xMax - xMin) / data.length,
+                    x: getX,
+                    y: getY
+                }),
+                Plot.axisX({ tickFormat: formatX, ticks: xTicks })
+            ],
+            style: CHART_STYLE,
+            width: dims.w,
+            x: { domain: [xMin, xMax], label: null, type: 'linear' },
+            y: {
+                domain: yDomain,
+                grid: true,
+                label: null,
+                tickFormat: formatY,
+                ticks: yTicks
+            }
+        });
+        stylePlot(plot);
+        plotRef.current.appendChild(plot);
+        const cleanup = setupCrosshair(ref.current, data, d => getX(d), getY, yDomain, d => formatTooltip?.(d) ?? `${formatX(getX(d))}: ${formatY(getY(d))}`, setCrosshair);
+        return cleanup;
+    }, [
+        data,
+        dims.h,
+        dims.w,
+        fillColor,
+        formatTooltip,
+        formatX,
+        formatY,
+        getX,
+        getY,
+        xDomain,
+        xTicks,
+        yDomain,
+        yTicks
+    ]);
+    return (_jsxs("div", { className: cn('relative aspect-4/1 w-full overflow-clip', className), ref: ref, ...props, children: [_jsx("div", { className: "absolute inset-0", ref: plotRef }), _jsx(Crosshair, { color: fillColor, containerWidth: dims.w, height: dims.h, ...crosshair })] }));
+});
+//# sourceMappingURL=bar-chart.js.map

package/dist/ui/components/graphs/bar-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bar-chart.js","sourceRoot":"","sources":["../../../../src/ui/components/graphs/bar-chart.tsx"],"names":[],"mappings":"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"}

package/dist/ui/components/graphs/index.d.ts

@@ -0,0 +1,3 @@
+export { BarChart } from './bar-chart';
+export { LineChart } from './line-chart';
+export * from './utils';

package/dist/ui/components/graphs/index.js

@@ -0,0 +1,4 @@
+export { BarChart } from './bar-chart';
+export { LineChart } from './line-chart';
+export * from './utils';
+//# sourceMappingURL=index.js.map

package/dist/ui/components/graphs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/ui/components/graphs/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAExC,cAAc,SAAS,CAAA"}

package/dist/ui/components/graphs/line-chart.d.ts

@@ -0,0 +1,14 @@
+import { type ChartProps, type DataPoint } from './utils';
+export declare const LineChart: {
+    (props: Omit<LineChartProps<DataPoint> & {
+        backgroundColor?: string;
+        color?: string;
+    }, keyof import("../blend-mode").BlendColors>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface LineChartProps<T extends DataPoint> extends ChartProps<T> {
+    curve?: 'basis' | 'catmull-rom' | 'linear' | 'natural' | 'step';
+    series?: keyof T;
+    showArea?: boolean;
+}
+export {};

package/dist/ui/components/graphs/line-chart.js

@@ -0,0 +1,117 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as Plot from '@observablehq/plot';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { cn } from '../../../utils';
+import { accessor, CHART_MARGINS, CHART_STYLE, Crosshair, setupCrosshair, stylePlot, useDims, withChartBlend } from './utils';
+export const LineChart = withChartBlend(({ backgroundColor: _, className, color: strokeColor, curve = 'natural', data = [], formatTooltip, formatX: formatXProp, formatY: formatYProp, series = 'series', showArea = false, x = 'label', xTicks, y = 'value', yDomain = [0, 0.5], yTicks = 4, ...props }) => {
+    const ref = useRef(null);
+    const plotRef = useRef(null);
+    const [hovered, setHovered] = useState(null);
+    const [crosshair, setCrosshair] = useState({ x: null });
+    const dims = useDims(ref);
+    const formatX = useCallback((v) => formatXProp?.(v) ??
+        (v >= 1e3 ? `${v / 1e3}k` : `${v}`), [formatXProp]);
+    const formatY = useCallback((v) => formatYProp?.(v) ?? `${Math.round(v * 100)}%`, [formatYProp]);
+    const getX = useMemo(() => accessor(x), [x]);
+    const getY = useMemo(() => accessor(y), [y]);
+    const getZ = useCallback((d) => d[series], [series]);
+    useEffect(() => {
+        if (!ref.current ||
+            !plotRef.current ||
+            !data.length ||
+            !dims.h ||
+            !dims.w) {
+            return;
+        }
+        plotRef.current.innerHTML = '';
+        const hasSeries = data.some(d => d[series] !== undefined);
+        const seriesIdx = hasSeries
+            ? data.reduce((acc, d, i) => { var _a; return ((acc[_a = d[series]] ?? (acc[_a] = i)), acc); }, {})
+            : {};
+        const n = Object.keys(seriesIdx).length;
+        const opacity = (d) => {
+            if (!hasSeries) {
+                return 1;
+            }
+            if (hovered) {
+                return d[series] === hovered[series] ? 1 : 0.2;
+            }
+            return 1 - (seriesIdx[d[series]] / Math.max(n - 1, 1)) * 0.2;
+        };
+        const lineOpts = {
+            curve,
+            x: getX,
+            y: getY,
+            ...(hasSeries && { z: getZ })
+        };
+        const plot = Plot.plot({
+            ...CHART_MARGINS,
+            height: dims.h,
+            marks: [
+                ...(showArea
+                    ? [
+                        Plot.areaY(data, {
+                            ...lineOpts,
+                            fill: strokeColor,
+                            fillOpacity: 0.15,
+                            y1: yDomain[0]
+                        })
+                    ]
+                    : []),
+                Plot.lineY(data, {
+                    ...lineOpts,
+                    stroke: 'transparent',
+                    strokeWidth: 16
+                }),
+                Plot.lineY(data, {
+                    ...lineOpts,
+                    stroke: strokeColor,
+                    strokeOpacity: opacity,
+                    strokeWidth: 1.5
+                })
+            ],
+            style: { ...CHART_STYLE, fontStretch: 'expanded' },
+            width: dims.w,
+            x: { label: null, tickFormat: formatX, ticks: xTicks },
+            y: {
+                domain: yDomain,
+                grid: true,
+                label: null,
+                tickFormat: formatY,
+                ticks: yTicks
+            }
+        });
+        plot.addEventListener('input', () => setHovered(plot.value));
+        stylePlot(plot);
+        plot.querySelectorAll('g[aria-label="line"] path').forEach(el => Object.assign(el.style, {
+            transition: 'stroke-opacity 0.2s'
+        }));
+        plotRef.current.appendChild(plot);
+        const cleanup = setupCrosshair(ref.current, data, d => getX(d), getY, yDomain, d => formatTooltip?.(d) ?? `${formatX(getX(d))}: ${formatY(getY(d))}`, setCrosshair, hasSeries ? d => getZ(d) : undefined);
+        return () => {
+            cleanup();
+            plot.parentNode && plot.remove();
+        };
+    }, [
+        curve,
+        data,
+        dims.h,
+        dims.w,
+        formatTooltip,
+        formatX,
+        formatY,
+        getX,
+        getY,
+        getZ,
+        hovered,
+        series,
+        showArea,
+        strokeColor,
+        xTicks,
+        yDomain,
+        yTicks
+    ]);
+    return (_jsxs("div", { className: cn('relative aspect-4/1 w-full overflow-clip', className), ref: ref, ...props, children: [_jsx("div", { className: "absolute inset-0", ref: plotRef }), _jsx(Crosshair, { color: strokeColor, containerWidth: dims.w, height: dims.h, ...crosshair })] }));
+});
+//# sourceMappingURL=line-chart.js.map

package/dist/ui/components/graphs/line-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"line-chart.js","sourceRoot":"","sources":["../../../../src/ui/components/graphs/line-chart.tsx"],"names":[],"mappings":"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"}

package/dist/ui/components/graphs/utils.d.ts

@@ -0,0 +1,52 @@
+import { type ComponentType, type HTMLAttributes, type RefObject } from 'react';
+import { type BlendColors, type BlendModeProps } from '../blend-mode';
+export declare const accessor: <T, R>(key: ((d: T) => R) | keyof T) => (d: T) => R;
+export declare const CHART_MARGINS: {
+    readonly marginBottom: 24;
+    readonly marginLeft: 36;
+    readonly marginRight: 12;
+    readonly marginTop: 8;
+};
+export declare const CHART_STYLE: {
+    readonly background: "transparent";
+    readonly color: "var(--midground)";
+    readonly fontFamily: "var(--font-mono), monospace";
+    readonly fontSize: "11px";
+    readonly overflow: "hidden";
+};
+export declare const stylePlot: (plot: HTMLElement) => void;
+export declare const useDims: (ref: RefObject<HTMLElement | null>) => {
+    h: number;
+    w: number;
+};
+export declare const Crosshair: ({ color, containerWidth, height, points, x }: CrosshairState & {
+    color?: string;
+    containerWidth: number;
+    height: number;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export declare const setupCrosshair: <T extends DataPoint>(container: HTMLElement, data: T[], getX: (d: T) => number, getY: (d: T) => number, yDomain: [number, number], formatTooltip: (d: T) => string, onUpdate: (state: CrosshairState) => void, getZ?: (d: T) => unknown) => () => void;
+export declare const withChartBlend: <P extends BlendModeProps>(Component: ComponentType<P>) => {
+    (props: Omit<P, keyof BlendColors>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export type DataPoint = Record<string, unknown>;
+export interface CrosshairPoint {
+    dotY: number;
+    tooltip: string;
+}
+export interface CrosshairState {
+    points?: CrosshairPoint[];
+    x: null | number;
+}
+export interface ChartProps<T = DataPoint> extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    data?: T[];
+    formatTooltip?: (d: T) => string;
+    formatX?: (v: unknown) => string;
+    formatY?: (v: number) => string;
+    height?: number;
+    x?: ((d: T) => unknown) | keyof T;
+    xTicks?: number | number[];
+    y?: ((d: T) => number) | keyof T;
+    yDomain?: [number, number];
+    yTicks?: number | number[];
+}