@nous-research/ui 0.14.2 → 0.16.0

package/src/ui/components/select.tsx

@@ -0,0 +1,267 @@
+'use client'
+
+import {
+  Children,
+  isValidElement,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type CSSProperties,
+  type KeyboardEvent,
+  type ReactElement,
+  type ReactNode
+} from 'react'
+
+import { cn } from '../../utils'
+
+const TRIGGER_CN =
+  'flex h-9 w-full items-center justify-between gap-2 ' +
+  'border border-midground/15 bg-background/40 px-3 py-1 ' +
+  'font-courier text-sm text-left text-midground transition-colors ' +
+  'hover:border-midground/25 ' +
+  'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-midground/30 focus-visible:border-midground/30 ' +
+  'disabled:cursor-not-allowed disabled:opacity-50 ' +
+  'cursor-pointer'
+
+const LISTBOX_CN =
+  'absolute z-50 mt-1 w-full max-h-60 overflow-auto ' +
+  'border border-midground/15 bg-background-base text-midground shadow-lg'
+
+export function Select({
+  children,
+  className,
+  disabled,
+  id,
+  onValueChange,
+  placeholder,
+  style,
+  value
+}: SelectProps) {
+  const [open, setOpen] = useState(false)
+  const [highlightedIndex, setHighlightedIndex] = useState(-1)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const listRef = useRef<HTMLDivElement>(null)
+
+  const options = useMemo(() => collectOptions(children), [children])
+  const selected = options.find(o => o.value === value)
+  const displayLabel = selected?.label ?? placeholder ?? value ?? ''
+
+  const close = useCallback(() => {
+    setOpen(false)
+    setHighlightedIndex(-1)
+  }, [])
+
+  useEffect(() => {
+    if (!open) return
+    const ac = new AbortController()
+    document.addEventListener(
+      'mousedown',
+      e => {
+        if (!containerRef.current?.contains(e.target as Node)) close()
+      },
+      { signal: ac.signal }
+    )
+    return () => ac.abort()
+  }, [open, close])
+
+  useEffect(() => {
+    if (!open || highlightedIndex < 0) return
+    const el = listRef.current?.children[highlightedIndex] as
+      | HTMLElement
+      | undefined
+    el?.scrollIntoView({ block: 'nearest' })
+  }, [open, highlightedIndex])
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (disabled) return
+    switch (e.key) {
+      case 'Enter':
+      case ' ':
+        e.preventDefault()
+        if (!open) {
+          setOpen(true)
+          setHighlightedIndex(options.findIndex(o => o.value === value))
+        } else if (highlightedIndex >= 0 && options[highlightedIndex]) {
+          onValueChange?.(options[highlightedIndex].value)
+          close()
+        }
+        break
+      case 'ArrowDown':
+        e.preventDefault()
+        if (!open) {
+          setOpen(true)
+          setHighlightedIndex(options.findIndex(o => o.value === value))
+        } else {
+          setHighlightedIndex(i => Math.min(i + 1, options.length - 1))
+        }
+        break
+      case 'ArrowUp':
+        e.preventDefault()
+        if (open) setHighlightedIndex(i => Math.max(i - 1, 0))
+        break
+      case 'Home':
+        if (open) {
+          e.preventDefault()
+          setHighlightedIndex(0)
+        }
+        break
+      case 'End':
+        if (open) {
+          e.preventDefault()
+          setHighlightedIndex(options.length - 1)
+        }
+        break
+      case 'Escape':
+        e.preventDefault()
+        close()
+        break
+    }
+  }
+
+  return (
+    <div
+      className={cn('relative', className)}
+      id={id}
+      ref={containerRef}
+      style={style}
+    >
+      <button
+        aria-expanded={open}
+        aria-haspopup="listbox"
+        className={TRIGGER_CN}
+        disabled={disabled}
+        onClick={() => !disabled && setOpen(o => !o)}
+        onKeyDown={handleKeyDown}
+        role="combobox"
+        type="button"
+      >
+        <span className={cn('truncate', !selected && 'text-midground/50')}>
+          {displayLabel}
+        </span>
+
+        <ChevronDownGlyph
+          className={cn(
+            'size-3 shrink-0 text-midground/60 transition-transform',
+            open && 'rotate-180'
+          )}
+        />
+      </button>
+
+      {open && (
+        <div className={LISTBOX_CN} ref={listRef} role="listbox">
+          {options.map((opt, i) => {
+            const isSelected = opt.value === value
+            const isHighlighted = i === highlightedIndex
+
+            return (
+              <div
+                aria-selected={isSelected}
+                className={cn(
+                  'flex cursor-pointer items-center gap-2 px-3 py-2',
+                  'font-courier text-sm transition-colors',
+                  isHighlighted && 'bg-midground/10',
+                  isSelected ? 'text-midground' : 'text-midground/70'
+                )}
+                key={opt.value}
+                onClick={() => {
+                  onValueChange?.(opt.value)
+                  close()
+                }}
+                onMouseEnter={() => setHighlightedIndex(i)}
+                role="option"
+              >
+                <CheckGlyph
+                  className={cn(
+                    'size-3 shrink-0',
+                    isSelected ? 'opacity-100' : 'opacity-0'
+                  )}
+                />
+                <span className="truncate">{opt.label}</span>
+              </div>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}
+
+// Marker component — `Select` reads `value`/`children` from its tree.
+// Renders nothing on its own.
+export function SelectOption(_props: SelectOptionProps) {
+  return null
+}
+
+const ChevronDownGlyph = ({ className }: { className?: string }) => (
+  <svg
+    aria-hidden
+    className={className}
+    fill="none"
+    stroke="currentColor"
+    strokeLinecap="square"
+    strokeWidth={1.5}
+    viewBox="0 0 12 12"
+  >
+    <path d="M2.5 4.5 6 8l3.5-3.5" />
+  </svg>
+)
+
+const CheckGlyph = ({ className }: { className?: string }) => (
+  <svg
+    aria-hidden
+    className={className}
+    fill="none"
+    stroke="currentColor"
+    strokeLinecap="square"
+    strokeWidth={1.5}
+    viewBox="0 0 12 12"
+  >
+    <path d="m2.5 6.5 2.5 2.5L9.5 3.5" />
+  </svg>
+)
+
+function collectOptions(children: ReactNode): SelectOptionData[] {
+  const out: SelectOptionData[] = []
+  Children.forEach(children, child => {
+    if (!isValidElement(child)) return
+    const el = child as ReactElement<{
+      children?: ReactNode
+      value?: unknown
+    }>
+    if (el.props.value !== undefined) {
+      out.push({
+        label:
+          typeof el.props.children === 'string'
+            ? el.props.children
+            : String(el.props.value),
+        value: String(el.props.value)
+      })
+    } else if (el.props.children) {
+      out.push(...collectOptions(el.props.children))
+    }
+  })
+  return out
+}
+
+interface SelectOptionData {
+  label: string
+  value: string
+}
+
+interface SelectOptionProps {
+  children: ReactNode
+  value: string
+}
+
+interface SelectProps {
+  children?: ReactNode
+  className?: string
+  disabled?: boolean
+  id?: string
+  onValueChange?: (value: string) => void
+  placeholder?: string
+  style?: CSSProperties
+  value?: string
+}

package/src/ui/components/selection-switcher.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+import { useEffect } from 'react'
+
+const colors = [
+  'oklch(85% 0.12 330)',
+  'oklch(85% 0.12 300)',
+  'oklch(85% 0.12 270)',
+  'oklch(85% 0.12 230)',
+  'oklch(85% 0.12 180)',
+  'oklch(85% 0.12 150)',
+  'oklch(85% 0.12 120)',
+  'oklch(85% 0.12 90)',
+  'oklch(85% 0.12 60)',
+  'oklch(85% 0.12 30)',
+  'oklch(88% 0.10 80)'
+] as const
+
+export function SelectionSwitcher() {
+  useEffect(() => {
+    const ac = new AbortController()
+    const { signal } = ac
+
+    let idx = 0
+
+    const cycle = () =>
+      requestAnimationFrame(() =>
+        document.documentElement.style.setProperty(
+          '--selection-bg',
+          colors[(idx = (idx + 1) % colors.length)]
+        )
+      )
+
+    const onKey = (e: KeyboardEvent) =>
+      e.key.toLowerCase() === 'a' && (e.metaKey || e.ctrlKey) && cycle()
+
+    document.addEventListener('selectstart', cycle, { signal })
+    document.addEventListener('keydown', onKey, { signal })
+
+    return () => ac.abort()
+  }, [])
+
+  return null
+}

package/src/ui/components/shader.tsx

@@ -0,0 +1,83 @@
+'use client'
+
+import { type ThreeElements, useThree } from '@react-three/fiber'
+import { useEffect, useRef } from 'react'
+import type { ReactNode } from 'react'
+import * as THREE from 'three'
+
+import { useCappedFrame } from '../../hooks/use-capped-frame'
+
+const defaultUniforms = {
+  uResolution: new THREE.Uniform(new THREE.Vector4()),
+  uTime: new THREE.Uniform(0)
+}
+
+export function Shader({
+  children,
+  defines,
+  depthTest,
+  fragmentShader,
+  uniforms,
+  vertexShader,
+  ...props
+}: ShaderProps) {
+  const invalidate = useThree(st => st.invalidate)
+  const { size, viewport } = useThree()
+
+  const isMobile = size.width < 1024
+
+  const uniformsRef = useRef({
+    ...defaultUniforms,
+    ...(uniforms ?? {})
+  })
+
+  useCappedFrame(
+    ({ clock }) => {
+      const w = size.width * viewport.dpr
+      const h = size.height * viewport.dpr
+
+      uniformsRef.current.uTime.value = clock.getElapsedTime()
+      uniformsRef.current.uResolution.value.copy(
+        new THREE.Vector4(w, h, w / h, viewport.dpr)
+      )
+    },
+    isMobile ? 0 : 80
+  )
+
+  useEffect(
+    () => void (uniforms && Object.assign(uniformsRef.current, uniforms)),
+    [uniforms]
+  )
+
+  useEffect(() => void (isMobile && invalidate(80)), [invalidate, isMobile])
+
+  const materialProps = {
+    defines: defines ?? {},
+    depthTest,
+    fragmentShader,
+    side: THREE.DoubleSide,
+    transparent: true,
+    uniforms: uniformsRef.current,
+    vertexShader
+  } satisfies ThreeElements['shaderMaterial']
+
+  if (typeof children === 'function') {
+    return children(<shaderMaterial {...materialProps} />)
+  }
+
+  return (
+    <mesh {...props}>
+      {children ?? <planeGeometry />}
+      <shaderMaterial {...materialProps} />
+    </mesh>
+  )
+}
+
+interface ShaderProps
+  extends Omit<ThreeElements['mesh'], 'children'>,
+    Pick<
+      ThreeElements['shaderMaterial'],
+      'defines' | 'depthTest' | 'fragmentShader' | 'uniforms' | 'vertexShader'
+    > {
+  children?: ((material: ReactNode) => ReactNode) | ReactNode
+}

package/src/ui/components/socials.tsx

@@ -0,0 +1,42 @@
+import { cn } from '../../utils'
+
+export function Socials({ className, items, onNavigate, ...rest }: SocialsProps) {
+  return (
+    <div className={cn('flex items-center gap-3', className)} {...rest}>
+      {items.map(({ external = true, href, icon: Icon, label, onClick }) => (
+        <a
+          className="opacity-60 transition-opacity hover:opacity-100"
+          href={href}
+          key={label}
+          onClick={e => {
+            onClick?.(e)
+            onNavigate?.()
+          }}
+          rel={external ? 'noopener noreferrer' : undefined}
+          target={external ? '_blank' : undefined}
+          title={label}
+        >
+          <Icon />
+        </a>
+      ))}
+    </div>
+  )
+}
+
+export interface SocialLink {
+  external?: boolean
+  href: string
+  icon: React.ComponentType<{ className?: string }>
+  label: string
+  onClick?: React.MouseEventHandler
+}
+
+interface SocialsProps extends React.HTMLAttributes<HTMLDivElement> {
+  items: SocialLink[]
+  /**
+   * Called *in addition* to each link's `onClick` after a click — useful in
+   * mobile drawer / dialog contexts where clicking a link should also close
+   * the surrounding overlay.
+   */
+  onNavigate?: () => void
+}

package/src/ui/components/spinner.stories.tsx

@@ -0,0 +1,101 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { Spinner } from './spinner'
+import { Small } from './typography/small'
+
+const NAMES = [
+  'braille',
+  'braillewave',
+  'dna',
+  'scan',
+  'rain',
+  'scanline',
+  'pulse',
+  'snake',
+  'sparkle',
+  'cascade',
+  'columns',
+  'orbit',
+  'breathe',
+  'waverows',
+  'checkerboard',
+  'helix',
+  'fillsweep',
+  'diagswipe'
+] as const
+
+const meta: Meta<typeof Spinner> = {
+  component: Spinner,
+  title: 'Components/Spinner'
+}
+
+export default meta
+
+type Story = StoryObj<typeof Spinner>
+
+export const Playground: Story = { render: () => <Spinner /> }
+
+export const InlineWithText: Story = {
+  render: () => (
+    <div className="flex items-center gap-2 text-sm text-midground/70">
+      <Spinner /> Loading model info…
+    </div>
+  )
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-end gap-6">
+      <div className="flex flex-col items-center gap-2">
+        <Spinner className="text-xs" />
+        <Small className="opacity-50">xs</Small>
+      </div>
+
+      <div className="flex flex-col items-center gap-2">
+        <Spinner className="text-sm" />
+        <Small className="opacity-50">sm</Small>
+      </div>
+
+      <div className="flex flex-col items-center gap-2">
+        <Spinner className="text-base" />
+        <Small className="opacity-50">base</Small>
+      </div>
+
+      <div className="flex flex-col items-center gap-2">
+        <Spinner className="text-2xl" />
+        <Small className="opacity-50">2xl</Small>
+      </div>
+
+      <div className="flex flex-col items-center gap-2">
+        <Spinner className="text-4xl" />
+        <Small className="opacity-50">4xl</Small>
+      </div>
+    </div>
+  )
+}
+
+export const Tones: Story = {
+  render: () => (
+    <div className="flex items-center gap-4 text-base">
+      <Spinner />
+      <Spinner className="text-warning" />
+      <Spinner className="text-success" />
+      <Spinner className="text-destructive" />
+      <Spinner className="text-midground/40" />
+    </div>
+  )
+}
+
+export const Gallery: Story = {
+  render: () => (
+    <div className="grid grid-cols-3 gap-x-8 gap-y-3 text-base">
+      {NAMES.map(name => (
+        <div className="flex items-center gap-3" key={name}>
+          <Spinner name={name} />
+
+          <Small className="font-mono opacity-60">{name}</Small>
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/ui/components/spinner.tsx

@@ -0,0 +1,60 @@
+'use client'
+
+import {
+  type CSSProperties,
+  type HTMLAttributes,
+  useEffect,
+  useState
+} from 'react'
+import spinners, { type BrailleSpinnerName } from 'unicode-animations'
+
+import { cn } from '../../utils'
+
+/**
+ * Braille unicode spinner. Renders the active frame of a `unicode-animations`
+ * sequence inside an inline `<span>`, advancing on the spinner's own interval.
+ *
+ * Inherits font color and font size from its parent — apply Tailwind utilities
+ * (e.g. `text-warning`, `text-base`) via `className` to style.
+ *
+ * Decorative by default. Pass `aria-label` (and optionally `role="status"`) when
+ * the spinner has no surrounding loading text and screen readers need to know
+ * something is loading.
+ */
+export function Spinner({
+  className,
+  name = 'braille',
+  style,
+  ...props
+}: SpinnerProps) {
+  const [frame, setFrame] = useState(0)
+  const animation = spinners[name]
+
+  useEffect(() => {
+    const id = setInterval(
+      () => setFrame(f => (f + 1) % animation.frames.length),
+      animation.interval
+    )
+    return () => clearInterval(id)
+  }, [animation.frames.length, animation.interval])
+
+  return (
+    <span
+      aria-hidden={props['aria-label'] ? undefined : true}
+      className={cn(
+        'font-mono inline-block leading-none tabular-nums',
+        className
+      )}
+      style={style}
+      {...props}
+    >
+      {animation.frames[frame]}
+    </span>
+  )
+}
+
+interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
+  className?: string
+  name?: BrailleSpinnerName
+  style?: CSSProperties
+}

package/src/ui/components/stats.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { Stats } from './stats'
+
+const meta = {
+  component: Stats,
+  title: 'Components/Stats'
+} satisfies Meta<typeof Stats>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    items: [
+      { label: 'Parameters', value: '36.2b' },
+      { label: 'Checkpoint', value: 'Scratch' },
+      { label: 'HfAuto', value: 'Auto' },
+      { label: 'Type', value: 'Text' },
+      { label: 'Loss', value: '0.56' }
+    ]
+  }
+}

package/src/ui/components/stats.tsx

@@ -0,0 +1,53 @@
+import React, { ReactNode } from 'react'
+
+import { cn } from '../../utils'
+
+import { Typography } from './typography'
+
+export function Stats({ className, items, flip, ...props }: StatsProps) {
+  return (
+    <div className={cn('flex w-full flex-col gap-5', className)} {...props}>
+      {items.map(({ label, value }) => {
+        const valueText = (
+          <Typography
+            className="text-xs leading-[1.4] tracking-widest"
+            expanded
+          >
+            {typeof value === 'string' ? value : value.node}
+          </Typography>
+        )
+        const labelText = (
+          <Typography className="leading-none tracking-[0.2em] opacity-60" mono>
+            {typeof label === 'string' ? label : label.node}
+          </Typography>
+        )
+
+        return (
+          <div
+            className="text-midground text-display grid grid-cols-[auto_1fr_auto] items-center gap-2.5"
+            key={(typeof label === 'string' ? label : label.key ) + '@@@'+(typeof value === 'string' ? value : value.key)}
+          >
+            {flip ? labelText : valueText}
+
+            <Typography
+              className="min-w-0 overflow-hidden text-[13px] leading-[1.4] tracking-[0.4em] opacity-20"
+              expanded
+            >
+              {'·'.repeat(100)}
+            </Typography>
+
+            {flip ? valueText : labelText}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+interface StatsProps extends React.ComponentProps<'div'> {
+  items: {
+    label: string | {key: string, node: ReactNode}
+    value: string | {key: string, node: ReactNode}
+  }[]
+  flip?: boolean
+}