@nous-research/ui 0.15.0 → 0.16.0

package/src/ui/components/command-block.tsx

@@ -0,0 +1,86 @@
+'use client'
+
+import { useCallback, useState } from 'react'
+
+import { cn } from '../../utils'
+
+import { Small } from './typography/small'
+
+/**
+ * A "copy to clipboard" button that briefly shows a "Copied!" confirmation.
+ * Designed to sit alongside a short command string, not as a general button.
+ */
+export function CopyButton({
+  children,
+  className,
+  copiedLabel = 'Copied!',
+  label = 'Copy',
+  resetDelayMs = 2000,
+  text
+}: CopyButtonProps) {
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = useCallback(() => {
+    void navigator.clipboard.writeText(text).then(() => {
+      setCopied(true)
+      setTimeout(() => setCopied(false), resetDelayMs)
+    })
+  }, [resetDelayMs, text])
+
+  return (
+    <button
+      className={cn(
+        'font-courier text-display cursor-pointer border-none bg-transparent text-xs',
+        'tracking-widest',
+        'hover:text-midground tap-highlight-transparent transition-colors',
+        'flex items-center justify-center',
+        copied ? 'text-midground' : 'text-text-secondary',
+        className
+      )}
+      onClick={handleCopy}
+      type="button"
+    >
+      {children ?? (copied ? copiedLabel : label)}
+    </button>
+  )
+}
+
+/**
+ * A labeled, copy-able command (or code) display. Pairs `<CopyButton>` with
+ * a monospace code block. Used for install/setup instructions.
+ */
+export function CommandBlock({ className, code, label }: CommandBlockProps) {
+  return (
+    <div className={cn('flex flex-col gap-1', className)}>
+      <div className="flex items-center justify-between">
+        <Small className="opacity-50">{label}</Small>
+
+        <CopyButton text={code} />
+      </div>
+
+      <div
+        className={cn(
+          'bg-background/40 font-courier border border-current/20',
+          'px-3 py-2 text-[0.6875rem] leading-relaxed lowercase'
+        )}
+      >
+        <code className="break-all">{code}</code>
+      </div>
+    </div>
+  )
+}
+
+interface CommandBlockProps {
+  className?: string
+  code: string
+  label: string
+}
+
+interface CopyButtonProps {
+  children?: React.ReactNode
+  className?: string
+  copiedLabel?: string
+  label?: string
+  resetDelayMs?: number
+  text: string
+}

package/src/ui/components/cursor.tsx

@@ -0,0 +1,115 @@
+'use client'
+
+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 }: { scale?: number }) {
+  const $root = useRef<HTMLDivElement>(null)
+  const $arrow = useRef<HTMLDivElement>(null)
+  const $ptr = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const [root, arrow, ptr] = [$root.current, $arrow.current, $ptr.current]
+
+    if (!root || !arrow || !ptr) {
+      return
+    }
+
+    const on = (
+      el: EventTarget,
+      ev: string,
+      fn: EventListener,
+      opts?: AddEventListenerOptions
+    ) => {
+      el.addEventListener(ev, fn, opts)
+
+      return () => el.removeEventListener(ev, fn)
+    }
+
+    return [
+      on(
+        document,
+        'mousemove',
+        (e: Event) => {
+          const { clientX: x, clientY: y } = e as MouseEvent
+          root.style.translate = `${x}px ${y}px`
+          root.style.opacity = '1'
+        },
+        { passive: true }
+      ),
+
+      on(
+        document,
+        'mouseover',
+        (e: Event) => {
+          const isPtr = !!(e.target as HTMLElement).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 as unknown as void)
+  }, [])
+
+  return (
+    <div
+      aria-hidden
+      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
+      }}
+    >
+      <div ref={$arrow} style={{ inset: 0, position: 'absolute' }}>
+        <svg viewBox="0 0 16 16">
+          <path
+            d="M1 1L1 14L5 10L8 15L10 14L7 9L12 9L1 1Z"
+            fill="#fff"
+            stroke="#000"
+            strokeLinejoin="round"
+            strokeWidth={1}
+          />
+        </svg>
+      </div>
+
+      <div ref={$ptr} style={{ inset: 0, opacity: 0, position: 'absolute' }}>
+        <svg viewBox="0 0 28 29">
+          <path
+            d={HAND}
+            fill="#fff"
+            stroke="#000"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            style={{ paintOrder: 'stroke fill' }}
+          />
+        </svg>
+      </div>
+    </div>
+  )
+}

package/src/ui/components/dropdown-menu.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+
+import { DropdownMenu } from './dropdown-menu'
+import { Small } from './typography/small'
+
+const OPTIONS = [
+  { label: 'Option A', value: 'a' as const },
+  { label: 'Option B', value: 'b' as const },
+  { label: 'Option C', value: 'c' as const }
+]
+
+function Demo({ direction }: { direction: 'down' | 'left' | 'right' | 'up' }) {
+  const [value, setValue] = useState<'a' | 'b' | 'c'>('a')
+
+  return (
+    <DropdownMenu
+      direction={direction}
+      onChange={setValue}
+      options={OPTIONS}
+      value={value}
+    />
+  )
+}
+
+const meta: Meta<typeof DropdownMenu> = {
+  component: DropdownMenu,
+  title: 'Components/DropdownMenu'
+}
+
+export default meta
+
+type Story = StoryObj<typeof DropdownMenu>
+
+export const Down: Story = { render: () => <Demo direction="down" /> }
+export const Up: Story = { render: () => <Demo direction="up" /> }
+export const Right: Story = { render: () => <Demo direction="right" /> }
+export const Left: Story = { render: () => <Demo direction="left" /> }
+
+export const AllDirections: Story = {
+  render: () => (
+    <div className="flex gap-10">
+      {(['down', 'up', 'right', 'left'] as const).map(direction => (
+        <div className="flex flex-col gap-1" key={direction}>
+          <Small className="capitalize opacity-40">{direction}</Small>
+
+          <Demo direction={direction} />
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/ui/components/dropdown-menu.tsx

@@ -0,0 +1,117 @@
+'use client'
+
+import { useEffect, useId, useRef, useState } from 'react'
+
+import { cn } from '../../utils'
+
+const font = 'font-mondwest text-[.9375rem] leading-[1.4] tracking-[0.1875rem]'
+
+type Direction = 'down' | 'up' | 'left' | 'right'
+
+type AnchorStyle = React.CSSProperties & Record<string, string | number>
+
+export function DropdownMenu<T extends string>({
+  className,
+  direction = 'down',
+  onChange,
+  options,
+  value
+}: {
+  className?: string
+  direction?: Direction
+  onChange: (value: T) => void
+  options: { label: string; value: T }[]
+  value: T
+}) {
+  const id = useId()
+  const [open, setOpen] = useState(false)
+  const ref = useRef<HTMLSpanElement>(null)
+
+  const anchor = `--dropdown-${id.replace(/:/g, '')}`
+
+  const panelStyle: AnchorStyle = {
+    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 as Node)) {
+          setOpen(false)
+        }
+      },
+      { signal: ac.signal }
+    )
+
+    return () => ac.abort()
+  }, [open])
+
+  return (
+    <span
+      className={cn('relative inline-block align-top', className)}
+      ref={ref}
+    >
+      <span
+        className={cn(font, 'inline-block cursor-pointer hover:underline')}
+        onClick={() => setOpen(!open)}
+        style={{ anchorName: anchor } as AnchorStyle}
+      >
+        {options.find(o => o.value === value)?.label ?? value}{' '}
+        {open ? '↑' : '↓'}
+      </span>
+
+      {open && (
+        <div
+          className="bg-background-base z-50 flex flex-col"
+          style={panelStyle}
+        >
+          {options.map(o => (
+            <span
+              className={cn(
+                font,
+                'block cursor-pointer p-2 whitespace-nowrap',
+                o.value === value ? 'underline' : 'hover:bg-midground/10'
+              )}
+              key={o.value}
+              onClick={() => {
+                onChange(o.value)
+                setOpen(false)
+              }}
+            >
+              {o.label}
+            </span>
+          ))}
+        </div>
+      )}
+    </span>
+  )
+}

package/src/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/src/ui/components/fit-text/index.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { FitText } from '../fit-text'
+
+const meta: Meta<typeof FitText> = {
+  args: { children: 'Fit Text', max: 'infinity * 1px', min: '1em' },
+  component: FitText,
+  title: 'Components/FitText'
+}
+
+export default meta
+
+type Story = StoryObj<typeof FitText>
+
+export const Playground: Story = {}
+
+export const Fills: Story = {
+  render: () => (
+    <div className="w-full">
+      <FitText className="font-sans font-bold">Design System</FitText>
+    </div>
+  )
+}
+
+export const CappedMax: Story = {
+  render: () => (
+    <div className="w-full">
+      <FitText className="font-mondwest" max="4rem">
+        Capped max at 4rem
+      </FitText>
+    </div>
+  )
+}

package/src/ui/components/fit-text/index.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+import { createElement } from 'react'
+
+import { cn, type PolyProps, polyRef } from '../../../utils'
+
+export const FitText = polyRef<'span', OwnProps>(
+  (
+    { 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
+    } as React.CSSProperties
+
+    return createElement(
+      (as ?? 'span') as React.ElementType,
+      { ...rest, className: cn('fit-text', className), ref, style },
+      <>
+        <span>
+          <span>{children}</span>
+        </span>
+
+        <span aria-hidden="true">{children}</span>
+      </>
+    )
+  }
+)
+
+interface OwnProps {
+  children: string
+  max?: string
+  min?: string
+}
+
+export type FitTextProps<T extends React.ElementType = 'span'> = PolyProps<
+  T,
+  OwnProps
+>

package/src/ui/components/graphs/bar-chart.tsx

@@ -0,0 +1,153 @@
+'use client'
+
+import * as Plot from '@observablehq/plot'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+
+import { cn } from '../../../utils'
+
+import {
+  accessor,
+  CHART_MARGINS,
+  CHART_STYLE,
+  type ChartProps,
+  Crosshair,
+  type CrosshairState,
+  type DataPoint,
+  setupCrosshair,
+  stylePlot,
+  useDims,
+  withChartBlend
+} from './utils'
+
+export const BarChart = withChartBlend(
+  <T extends DataPoint>({
+    backgroundColor: _,
+    className,
+    color: fillColor,
+    data = [],
+    formatTooltip,
+    formatX: formatXProp,
+    formatY: formatYProp,
+    x = 'label' as keyof T,
+    xDomain,
+    xTicks = [0, 50000, 100000],
+    y = 'value' as keyof T,
+    yDomain = [0, 10],
+    yTicks = [10, 8, 4, 2],
+    ...props
+  }: BarChartProps<T> & { backgroundColor?: string; color?: string }) => {
+    const ref = useRef<HTMLDivElement>(null)
+    const plotRef = useRef<HTMLDivElement>(null)
+    const [crosshair, setCrosshair] = useState<CrosshairState>({ x: null })
+    const dims = useDims(ref)
+
+    const formatX = useCallback(
+      (v: unknown) =>
+        formatXProp?.(v) ??
+        (typeof v === 'number' ? v.toLocaleString('en-US') : String(v)),
+      [formatXProp]
+    )
+
+    const formatY = useCallback(
+      (v: number) => formatYProp?.(v) ?? String(v),
+      [formatYProp]
+    )
+
+    const getX = useMemo(() => accessor<T, unknown>(x), [x])
+    const getY = useMemo(() => accessor<T, number>(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) as number))
+      ]
+
+      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 as (d: T) => unknown,
+            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 as HTMLElement)
+      plotRef.current.appendChild(plot)
+
+      const cleanup = setupCrosshair(
+        ref.current,
+        data,
+        d => getX(d) as number,
+        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 (
+      <div
+        className={cn('relative aspect-4/1 w-full overflow-clip', className)}
+        ref={ref}
+        {...props}
+      >
+        <div className="absolute inset-0" ref={plotRef} />
+
+        <Crosshair
+          color={fillColor}
+          containerWidth={dims.w}
+          height={dims.h}
+          {...crosshair}
+        />
+      </div>
+    )
+  }
+)
+
+interface BarChartProps<T extends DataPoint> extends ChartProps<T> {
+  xDomain?: [number, number]
+}

package/src/ui/components/graphs/index.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { BarChart, LineChart } from '../graphs'
+import { Small } from '../typography/small'
+
+const LINE_DATA = (['primary', 'secondary', 'tertiary'] as const).flatMap(
+  (series, si) =>
+    [0, 50000, 100000, 150000].map((label, i) => ({
+      label,
+      series,
+      value: 0.15 + si * 0.1 + (i % 2) * 0.05 + Math.sin(i + si) * 0.08
+    }))
+)
+
+const BAR_DATA = (() => {
+  let x = 42
+  const f = () => (x = (1103515245 * x + 12345) % 0x80000000) / 0x80000000
+
+  return Array.from({ length: 100 }, (_, i) => ({
+    label: (i / 99) * 150000,
+    value: f() * 10
+  }))
+})()
+
+const meta = {
+  parameters: { layout: 'padded' },
+  title: 'Components/Graphs'
+} satisfies Meta
+
+export default meta
+
+type Story = StoryObj
+
+export const Line: Story = {
+  render: () => (
+    <div>
+      <Small className="mb-5 block opacity-50">LineChart</Small>
+
+      <LineChart
+        data={LINE_DATA}
+        series="series"
+        x="label"
+        y="value"
+        yDomain={[0, 0.5]}
+      />
+    </div>
+  )
+}
+
+export const Bar: Story = {
+  render: () => (
+    <div>
+      <Small className="mb-5 block opacity-50">BarChart</Small>
+
+      <BarChart
+        data={BAR_DATA}
+        x="label"
+        xDomain={[0, 150000]}
+        y="value"
+        yDomain={[0, 10]}
+      />
+    </div>
+  )
+}