@nous-research/ui 0.15.0 → 0.17.0

package/src/ui/components/scene-canvas.tsx

@@ -0,0 +1,254 @@
+'use client'
+
+import { Canvas, useFrame, useThree } from '@react-three/fiber'
+import {
+  Suspense,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState
+} from 'react'
+import * as THREE from 'three'
+
+const GL = {
+  alpha: true,
+  antialias: true,
+  depth: true,
+  outputColorSpace: 'srgb',
+  powerPreference: 'high-performance',
+  stencil: false
+} as const
+
+const tmp = {
+  camDir: new THREE.Vector3(),
+  hit: new THREE.Vector3(),
+  ndc: new THREE.Vector2(),
+  origin: new THREE.Vector3(0, 0, 0),
+  plane: new THREE.Plane(),
+  ray: new THREE.Raycaster()
+}
+
+type Bounds = { height: number; pageX: number; pageY: number; width: number }
+
+function useBounds(target: HTMLElement | null) {
+  const bounds = useRef<Bounds | null>(null)
+
+  useLayoutEffect(() => {
+    if (!target) {
+      return
+    }
+
+    const measure = () => {
+      const b = target.getBoundingClientRect()
+      bounds.current = {
+        height: b.height,
+        pageX: b.left + window.scrollX,
+        pageY: b.top + window.scrollY,
+        width: b.width
+      }
+    }
+
+    measure()
+
+    const ro = new ResizeObserver(measure)
+    ro.observe(target)
+    ro.observe(document.body)
+    window.addEventListener('resize', measure, { passive: true })
+
+    return () => {
+      ro.disconnect()
+      window.removeEventListener('resize', measure)
+    }
+  }, [target])
+
+  return bounds
+}
+
+function PositionedGroup({
+  baseZoom,
+  bounds,
+  children
+}: React.PropsWithChildren<{
+  baseZoom: number
+  bounds: React.RefObject<Bounds | null>
+}>) {
+  const ref = useRef<THREE.Group>(null)
+  const { camera, size, viewport } = useThree()
+
+  useFrame(() => {
+    const g = ref.current
+    const b = bounds.current
+
+    if (!g || !b) {
+      return
+    }
+
+    const left = b.pageX - window.scrollX
+    const top = b.pageY - window.scrollY
+
+    tmp.ndc.set(
+      ((left + b.width / 2) / size.width) * 2 - 1,
+      1 - ((top + b.height / 2) / size.height) * 2
+    )
+
+    camera.getWorldDirection(tmp.camDir)
+    tmp.plane.setFromNormalAndCoplanarPoint(tmp.camDir, tmp.origin)
+    tmp.ray.setFromCamera(tmp.ndc, camera)
+
+    const hit = tmp.ray.ray.intersectPlane(tmp.plane, tmp.hit)
+
+    if (hit) {
+      g.position.copy(hit)
+    }
+
+    const zoom = (camera as THREE.Camera & { zoom?: number }).zoom ?? 1
+
+    g.scale.setScalar(
+      Math.min(
+        (b.width / size.width) * viewport.width,
+        (b.height / size.height) * viewport.height
+      ) * (baseZoom > 0 ? zoom / baseZoom : 1)
+    )
+  })
+
+  return <group ref={ref}>{children}</group>
+}
+
+export function SceneCanvas({
+  camera,
+  children,
+  className,
+  contained,
+  frameloop = 'always',
+  noEvents,
+  style
+}: SceneCanvasProps) {
+  const [container, setContainer] = useState<HTMLDivElement | null>(null)
+  const baseZoom = camera?.zoom ?? 150
+
+  const bounds = useBounds(
+    contained ? (container?.parentElement ?? null) : null
+  )
+
+  useEffect(() => {
+    const el = contained && !noEvents ? container : null
+
+    if (!el) {
+      return
+    }
+
+    const lock = () => (document.body.style.userSelect = 'none')
+    const unlock = () => (document.body.style.userSelect = '')
+
+    el.addEventListener('pointerdown', lock)
+    window.addEventListener('pointerup', unlock)
+
+    return () => {
+      el.removeEventListener('pointerdown', lock)
+      window.removeEventListener('pointerup', unlock)
+    }
+  }, [container, contained, noEvents])
+
+  // Pause the R3F render loop when the tab is hidden. Even on
+  // `frameloop="always"` scenes we don't want the GPU running while the
+  // user can't see anything — this is the dominant fix for the "fans
+  // crank up after hours of idle" symptom.
+  const [pageHidden, setPageHidden] = useState(
+    typeof document !== 'undefined' && document.hidden
+  )
+
+  useEffect(() => {
+    const onVisibility = () => setPageHidden(document.hidden)
+    document.addEventListener('visibilitychange', onVisibility)
+
+    return () => document.removeEventListener('visibilitychange', onVisibility)
+  }, [])
+
+  const effectiveFrameloop = pageHidden ? 'never' : frameloop
+
+  const cam = useMemo(
+    () => ({
+      far: camera?.far ?? 100,
+      near: camera?.near ?? -100,
+      position: camera?.position ?? ([0, 0, 10] as [number, number, number]),
+      zoom: baseZoom * (contained ? 1 : 2)
+    }),
+    [baseZoom, camera, contained]
+  )
+
+  const canvas = (
+    <Canvas
+      camera={cam}
+      className={className}
+      dpr={[1, 2]}
+      eventPrefix={contained ? 'client' : 'offset'}
+      eventSource={contained ? (container ?? undefined) : undefined}
+      frameloop={effectiveFrameloop}
+      gl={GL}
+      orthographic
+      style={
+        contained
+          ? {
+              height: '100dvh',
+              inset: 0,
+              pointerEvents: 'none',
+              position: 'fixed',
+              width: '100dvw',
+              zIndex: 0,
+              ...style
+            }
+          : { height: '100%', width: '100%', ...style }
+      }
+    >
+      {contained ? (
+        <PositionedGroup baseZoom={baseZoom} bounds={bounds}>
+          {children()}
+        </PositionedGroup>
+      ) : (
+        children()
+      )}
+    </Canvas>
+  )
+
+  return contained ? (
+    <Suspense>
+      <div
+        ref={setContainer}
+        style={{
+          height: '100%',
+          inset: 0,
+          pointerEvents: noEvents ? 'none' : 'auto',
+          position: 'absolute',
+          width: '100%',
+          zIndex: 1
+        }}
+      />
+      {canvas}
+    </Suspense>
+  ) : (
+    canvas
+  )
+}
+
+interface SceneCanvasProps {
+  camera?: {
+    far?: number
+    near?: number
+    position?: [number, number, number]
+    zoom?: number
+  }
+  children: () => React.ReactNode
+  className?: string
+  contained?: boolean
+  /**
+   * R3F frame-loop mode. Defaults to `'always'` for backwards
+   * compatibility, but `'demand'` is strongly preferred for static
+   * scenes (use `invalidate()` from `useThree` to request frames). The
+   * canvas additionally pauses (forces `'never'`) while the document
+   * is hidden, regardless of this setting.
+   */
+  frameloop?: 'always' | 'demand' | 'never'
+  noEvents?: boolean
+  style?: React.CSSProperties
+}

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

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useRef } from 'react'
+
+import { Scramble } from './scramble'
+import { Typography } from './typography'
+import { Small } from './typography/small'
+
+const meta: Meta<typeof Scramble> = {
+  component: Scramble,
+  title: 'Components/Effects/Scramble'
+}
+
+export default meta
+
+type Story = StoryObj<typeof Scramble>
+
+export const HoverToScramble: Story = {
+  render: () => {
+    const ref = useRef<HTMLDivElement>(null)
+
+    return (
+      <div className="flex flex-col gap-2" ref={ref}>
+        <Small className="opacity-40">Hover the container</Small>
+
+        <Typography as="div" className="text-lg" mono>
+          <Scramble target={ref}>HOVER TO SCRAMBLE THIS TEXT</Scramble>
+        </Typography>
+      </div>
+    )
+  }
+}
+
+export const Tuned: Story = {
+  render: () => {
+    const ref = useRef<HTMLDivElement>(null)
+
+    return (
+      <div className="flex flex-col gap-2" ref={ref}>
+        <Small className="opacity-40">dur=1200, spread=2</Small>
+
+        <Typography as="div" className="text-lg" mono>
+          <Scramble dur={1200} spread={2} target={ref}>
+            FASTER WAVE, TIGHTER SPREAD
+          </Scramble>
+        </Typography>
+      </div>
+    )
+  }
+}

package/src/ui/components/scramble.tsx

@@ -0,0 +1,95 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import type { RefObject } from 'react'
+
+const CHARS = '.,·-─~+:;=*π""┐┌┘┴┬╗╔╝╚╬╠╣╩╦║░▒▓█▄▀▌▐■!?&#$@0123456789*'
+
+export function Scramble({
+  children,
+  dur = 666,
+  spread = 1,
+  target
+}: ScrambleProps) {
+  const text = String(children)
+  const len = text.length
+  const [display, setDisplay] = useState(text)
+  const frame = useRef<null | number>(null)
+  const waves = useRef<{ pos: number; time: number }[]>([])
+
+  useEffect(() => {
+    const el = target?.current
+
+    if (!el) {
+      return
+    }
+
+    const animate = () => {
+      const t = Date.now()
+      waves.current = waves.current.filter(w => t - w.time < dur)
+
+      if (!waves.current.length) {
+        setDisplay(text)
+        frame.current = null
+
+        return
+      }
+
+      setDisplay(
+        text
+          .split('')
+          .map((c, i) => {
+            if (c === ' ') {
+              return c
+            }
+
+            for (const w of waves.current) {
+              const age = t - w.time
+
+              const rad =
+                (Math.min(age / dur, 1) *
+                  (Math.max(w.pos, len - w.pos - 1) + 5)) /
+                spread
+
+              const dist = Math.abs(i - w.pos)
+              const int = rad - dist
+
+              if (dist <= rad && int > 0 && int <= 3) {
+                return CHARS[(dist * 3 + ((age / 40) | 0)) % CHARS.length]
+              }
+            }
+
+            return c
+          })
+          .join('')
+      )
+
+      frame.current = requestAnimationFrame(animate)
+    }
+
+    const onEnter = () => {
+      waves.current.push({ pos: len >> 1, time: Date.now() })
+      frame.current ??= requestAnimationFrame(animate)
+    }
+
+    el.addEventListener('mouseenter', onEnter)
+
+    return () => {
+      el.removeEventListener('mouseenter', onEnter)
+      frame.current && cancelAnimationFrame(frame.current)
+    }
+  }, [target, text, len, dur, spread])
+
+  useEffect(() => {
+    setDisplay(text)
+  }, [text])
+
+  return <>{display}</>
+}
+
+interface ScrambleProps {
+  children: string
+  dur?: number
+  spread?: number
+  target?: RefObject<HTMLElement | null>
+}

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

@@ -0,0 +1,101 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+
+import {
+  FilterGroup,
+  Segmented
+} from './segmented'
+
+type Density = 'compact' | 'comfortable' | 'spacious'
+type Severity = 'all' | 'info' | 'warn' | 'error'
+
+const DENSITY_OPTIONS: { label: string; value: Density }[] = [
+  { label: 'Compact', value: 'compact' },
+  { label: 'Comfortable', value: 'comfortable' },
+  { label: 'Spacious', value: 'spacious' }
+]
+
+const SEVERITY_OPTIONS: { label: string; value: Severity }[] = [
+  { label: 'All', value: 'all' },
+  { label: 'Info', value: 'info' },
+  { label: 'Warn', value: 'warn' },
+  { label: 'Error', value: 'error' }
+]
+
+function Demo({ size }: { size?: 'md' | 'sm' }) {
+  const [value, setValue] = useState<Density>('comfortable')
+
+  return (
+    <Segmented
+      onChange={setValue}
+      options={DENSITY_OPTIONS}
+      size={size}
+      value={value}
+    />
+  )
+}
+
+const meta: Meta<typeof Segmented> = {
+  component: Segmented,
+  title: 'Components/Forms/Segmented'
+}
+
+export default meta
+
+type Story = StoryObj<typeof Segmented>
+
+export const Playground: Story = { render: () => <Demo /> }
+
+export const Medium: Story = { render: () => <Demo size="md" /> }
+
+export const TwoOptions: Story = {
+  render: () => {
+    function TwoOptionsDemo() {
+      const [value, setValue] = useState<'on' | 'off'>('on')
+
+      return (
+        <Segmented
+          onChange={setValue}
+          options={[
+            { label: 'On', value: 'on' },
+            { label: 'Off', value: 'off' }
+          ]}
+          value={value}
+        />
+      )
+    }
+
+    return <TwoOptionsDemo />
+  }
+}
+
+export const InFilterGroup: Story = {
+  render: () => {
+    function FilterDemo() {
+      const [severity, setSeverity] = useState<Severity>('all')
+      const [density, setDensity] = useState<Density>('comfortable')
+
+      return (
+        <div className="flex flex-wrap items-center gap-6">
+          <FilterGroup label="Severity">
+            <Segmented
+              onChange={setSeverity}
+              options={SEVERITY_OPTIONS}
+              value={severity}
+            />
+          </FilterGroup>
+
+          <FilterGroup label="Density">
+            <Segmented
+              onChange={setDensity}
+              options={DENSITY_OPTIONS}
+              value={density}
+            />
+          </FilterGroup>
+        </div>
+      )
+    }
+
+    return <FilterDemo />
+  }
+}

package/src/ui/components/segmented.tsx

@@ -0,0 +1,81 @@
+'use client'
+
+import { type ReactNode } from 'react'
+
+import { cn } from '../../utils'
+
+export function Segmented<T extends string>({
+  className,
+  onChange,
+  options,
+  size = 'sm',
+  value
+}: SegmentedProps<T>) {
+  return (
+    <div
+      className={cn(
+        'inline-flex border border-midground/15 bg-background/30',
+        className
+      )}
+      role="radiogroup"
+    >
+      {options.map(opt => {
+        const active = opt.value === value
+
+        return (
+          <button
+            aria-checked={active}
+            className={cn(
+              'font-mondwest text-display tracking-[0.1em]',
+              'transition-colors cursor-pointer whitespace-nowrap',
+              'border-r border-midground/15 last:border-r-0',
+              'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-midground/30',
+              size === 'sm' && 'h-7 px-2.5 text-xs',
+              size === 'md' && 'h-8 px-3 text-xs',
+              active
+                ? 'bg-midground text-background'
+                : 'text-text-secondary hover:bg-midground/10 hover:text-midground'
+            )}
+            key={opt.value}
+            onClick={() => onChange(opt.value)}
+            role="radio"
+            type="button"
+          >
+            {opt.label}
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+export function FilterGroup({ children, className, label }: FilterGroupProps) {
+  return (
+    <div className={cn('flex items-center gap-2', className)}>
+      <span className="font-mondwest text-display text-xs tracking-[0.12em] text-text-tertiary">
+        {label}
+      </span>
+
+      {children}
+    </div>
+  )
+}
+
+interface FilterGroupProps {
+  children: ReactNode
+  className?: string
+  label: string
+}
+
+interface SegmentedOption<T extends string> {
+  label: string
+  value: T
+}
+
+interface SegmentedProps<T extends string> {
+  className?: string
+  onChange: (value: T) => void
+  options: SegmentedOption<T>[]
+  size?: 'md' | 'sm'
+  value: T
+}

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

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+
+import { Select, SelectOption } from './select'
+import { Small } from './typography/small'
+
+const PROVIDERS = [
+  { label: 'OpenAI', value: 'openai' },
+  { label: 'Anthropic', value: 'anthropic' },
+  { label: 'Google', value: 'google' },
+  { label: 'Mistral', value: 'mistral' },
+  { label: 'xAI', value: 'xai' }
+]
+
+function Demo({
+  disabled,
+  placeholder
+}: {
+  disabled?: boolean
+  placeholder?: string
+}) {
+  const [value, setValue] = useState<string>('anthropic')
+
+  return (
+    <div className="w-72">
+      <Select
+        disabled={disabled}
+        onValueChange={setValue}
+        placeholder={placeholder}
+        value={value}
+      >
+        {PROVIDERS.map(p => (
+          <SelectOption key={p.value} value={p.value}>
+            {p.label}
+          </SelectOption>
+        ))}
+      </Select>
+    </div>
+  )
+}
+
+const meta: Meta<typeof Select> = {
+  component: Select,
+  title: 'Components/Forms/Select'
+}
+
+export default meta
+
+type Story = StoryObj<typeof Select>
+
+export const Playground: Story = { render: () => <Demo /> }
+
+export const Disabled: Story = { render: () => <Demo disabled /> }
+
+export const Empty: Story = {
+  render: () => {
+    function EmptyDemo() {
+      const [value, setValue] = useState<string>('')
+
+      return (
+        <div className="w-72">
+          <Select
+            onValueChange={setValue}
+            placeholder="Choose a provider…"
+            value={value}
+          >
+            {PROVIDERS.map(p => (
+              <SelectOption key={p.value} value={p.value}>
+                {p.label}
+              </SelectOption>
+            ))}
+          </Select>
+        </div>
+      )
+    }
+
+    return <EmptyDemo />
+  }
+}
+
+export const NextToLabel: Story = {
+  render: () => (
+    <div className="grid w-72 gap-2">
+      <Small className="opacity-60 uppercase tracking-wider">Provider</Small>
+      <Demo />
+    </div>
+  )
+}