@nous-research/ui 0.15.0 → 0.17.0

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

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { Input } from './input'
+import { Label } from './label'
+
+const meta: Meta<typeof Input> = {
+  component: Input,
+  title: 'Components/Forms/Input'
+}
+
+export default meta
+
+type Story = StoryObj<typeof Input>
+
+export const Playground: Story = {
+  render: () => <Input placeholder="Enter a value…" />
+}
+
+export const Disabled: Story = {
+  render: () => <Input disabled placeholder="Disabled" value="locked" />
+}
+
+export const WithLabel: Story = {
+  render: () => (
+    <div className="grid w-64 gap-1.5">
+      <Label htmlFor="demo-input">Model name</Label>
+      <Input id="demo-input" placeholder="e.g. gpt-4o" />
+    </div>
+  )
+}
+
+export const NumberInput: Story = {
+  render: () => (
+    <div className="grid w-40 gap-1.5">
+      <Label htmlFor="demo-number">Temperature</Label>
+      <Input id="demo-number" type="number" step={0.1} defaultValue={0.7} />
+    </div>
+  )
+}

package/src/ui/components/input.tsx

@@ -0,0 +1,20 @@
+import { cn } from '../../utils'
+
+export function Input({
+  className,
+  ...props
+}: React.InputHTMLAttributes<HTMLInputElement>) {
+  return (
+    <input
+      className={cn(
+        'flex h-9 w-full border border-midground/15 bg-background/40 px-3 py-1 font-courier text-sm transition-colors',
+        'placeholder:text-midground/50',
+        'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-midground/30 focus-visible:border-midground/25',
+        'disabled:cursor-not-allowed disabled:opacity-50',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+

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

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { Input } from './input'
+import { Label } from './label'
+
+const meta: Meta<typeof Label> = {
+  component: Label,
+  title: 'Components/Forms/Label'
+}
+
+export default meta
+
+type Story = StoryObj<typeof Label>
+
+export const Playground: Story = {
+  render: () => <Label>Field label</Label>
+}
+
+export const WithInput: Story = {
+  render: () => (
+    <div className="grid w-64 gap-1.5">
+      <Label htmlFor="label-demo">API key</Label>
+      <Input id="label-demo" type="password" placeholder="sk-…" />
+    </div>
+  )
+}

package/src/ui/components/label.tsx

@@ -0,0 +1,16 @@
+import { cn } from '../../utils'
+
+export function Label({
+  className,
+  ...props
+}: React.LabelHTMLAttributes<HTMLLabelElement>) {
+  return (
+    <label
+      className={cn(
+        'font-mondwest text-xs tracking-[0.1em] uppercase leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+        className
+      )}
+      {...props}
+    />
+  )
+}

package/src/ui/components/leva-client.tsx

@@ -0,0 +1,14 @@
+'use client'
+
+import { Leva } from 'leva'
+import { useEffect, useState } from 'react'
+
+export function LevaClient() {
+  const [hidden, setHidden] = useState(true)
+
+  useEffect(() => {
+    setHidden(!new URLSearchParams(window.location.search).has('dev'))
+  }, [])
+
+  return <Leva {...{ hidden }} />
+}

package/src/ui/components/list-item.stories.tsx

@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+
+import { ListItem } from './list-item'
+
+const PROVIDERS = [
+  { count: 412, name: 'OpenAI', slug: 'openai' },
+  { count: 38, name: 'Anthropic', slug: 'anthropic' },
+  { count: 124, name: 'Google', slug: 'google' },
+  { count: 7, name: 'Mistral', slug: 'mistral' },
+  { count: 4, name: 'xAI', slug: 'xai' }
+]
+
+function Demo() {
+  const [active, setActive] = useState<string>('anthropic')
+
+  return (
+    <div className="w-72 border border-midground/15 bg-background-base">
+      {PROVIDERS.map(p => (
+        <ListItem
+          active={p.slug === active}
+          key={p.slug}
+          onClick={() => setActive(p.slug)}
+        >
+          <span className="flex-1 truncate">{p.name}</span>
+          <span className="text-[0.65rem] tabular-nums text-midground/50">
+            {p.count}
+          </span>
+        </ListItem>
+      ))}
+    </div>
+  )
+}
+
+const meta: Meta<typeof ListItem> = {
+  component: ListItem,
+  title: 'Components/Data Display/ListItem'
+}
+
+export default meta
+
+type Story = StoryObj<typeof ListItem>
+
+export const Playground: Story = { render: () => <Demo /> }
+
+export const WithSubtitle: Story = {
+  render: () => {
+    function MultiLineDemo() {
+      const [active, setActive] = useState<string>('anthropic')
+
+      return (
+        <div className="w-80 border border-midground/15 bg-background-base">
+          {PROVIDERS.map(p => (
+            <ListItem
+              active={p.slug === active}
+              key={p.slug}
+              onClick={() => setActive(p.slug)}
+            >
+              <div className="flex-1 min-w-0">
+                <div className="truncate font-medium">{p.name}</div>
+                <div className="truncate text-[0.65rem] text-midground/60">
+                  {p.slug} · {p.count} models
+                </div>
+              </div>
+            </ListItem>
+          ))}
+        </div>
+      )
+    }
+
+    return <MultiLineDemo />
+  }
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="w-72 border border-midground/15 bg-background-base">
+      <ListItem>Enabled item</ListItem>
+      <ListItem disabled>Disabled item</ListItem>
+      <ListItem active>Active item</ListItem>
+    </div>
+  )
+}

package/src/ui/components/list-item.tsx

@@ -0,0 +1,37 @@
+'use client'
+
+import { forwardRef, type ButtonHTMLAttributes } from 'react'
+
+import { cn } from '../../utils'
+
+export const ListItem = forwardRef<HTMLButtonElement, ListItemProps>(
+  function ListItem(
+    { active = false, children, className, type = 'button', ...props },
+    ref
+  ) {
+    return (
+      <button
+        className={cn(
+          'group relative flex w-full items-center gap-2 px-3 py-2 text-left',
+          'font-courier text-sm transition-colors cursor-pointer',
+          'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-midground/30',
+          'disabled:cursor-not-allowed disabled:text-text-disabled',
+          active
+            ? 'bg-midground/10 text-midground'
+            : 'text-text-secondary hover:text-midground hover:bg-midground/5',
+          className
+        )}
+        data-active={active || undefined}
+        ref={ref}
+        type={type}
+        {...props}
+      >
+        {children}
+      </button>
+    )
+  }
+)
+
+interface ListItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  active?: boolean
+}

package/src/ui/components/overlays/blend-modes.ts

@@ -0,0 +1,13 @@
+export const BLEND_MODES = [
+  'overlay',
+  'multiply',
+  'screen',
+  'difference',
+  'exclusion',
+  'color-dodge',
+  'color-burn',
+  'hard-light',
+  'soft-light',
+  'darken',
+  'lighten'
+] as unknown as React.CSSProperties['mixBlendMode'][]

package/src/ui/components/overlays/glitch.tsx

@@ -0,0 +1,243 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+import * as THREE from 'three'
+
+import { $gpuTier, useGpuTier } from '../../../hooks/use-gpu-tier'
+import { runRenderLoop } from '../../../hooks/use-render-loop'
+import { useSmoothControls } from '../../../hooks/use-smooth-controls'
+import { cn } from '../../../utils'
+
+import { BLEND_MODES } from './blend-modes'
+
+const vert = /*glsl*/ `
+  varying vec2 vUv;
+  void main() {
+    vUv = uv;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+  }
+`
+
+const frag = /*glsl*/ `
+  uniform float uTime, uAlpha, uIntensity, uChroma, uSpeed, uSparsity;
+  uniform vec3 uColor;
+  varying vec2 vUv;
+
+  float hash(vec2 p) { return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); }
+
+  vec2 hash2(vec2 p) {
+    vec3 q = fract(vec3(p.xyx) * vec3(.1031, .1030, .0973));
+    q += dot(q, q.yzx + 33.33);
+    return fract((q.xx + q.yz) * q.zy);
+  }
+
+  float dither(vec2 p, float a) {
+    return step(mod(floor(p.x) + floor(p.y) * 2.0, 4.0) / 4.0, a);
+  }
+
+  void main() {
+    vec3 col = vec3(0.0);
+    float t = uTime * uSpeed;
+    float tSlow = floor(t / 3.0);
+    float dit = dither(gl_FragCoord.xy * 0.5, 0.7);
+
+    for (float i = 0.0; i < 6.0; i++) {
+      float seed = i * 137.3;
+      float epoch = floor((t + hash(vec2(seed, 77.7)) * 200.0) / (4.0 + hash(vec2(seed, 0.0)) * 6.0));
+      float life = fract((t + hash(vec2(seed, 77.7)) * 200.0) / (4.0 + hash(vec2(seed, 0.0)) * 6.0));
+
+      if (hash(vec2(epoch, seed)) > 1.0 - uSparsity * 0.7) continue;
+
+      vec2 center = vec2(hash(vec2(epoch, seed + 13.1)), hash(vec2(epoch, seed + 27.3)));
+      vec2 size = vec2(0.015 + hash(vec2(epoch, seed + 41.5)) * 0.08, 0.008 + hash(vec2(epoch, seed + 53.7)) * 0.04);
+      vec2 d = abs(vUv - center);
+
+      if (d.x < size.x && d.y < size.y) {
+        float fade = smoothstep(0.0, 0.05, life) * smoothstep(1.0, 0.95, life);
+        vec2 gUV = vUv + (hash2(vec2(epoch, seed + 200.0)) - 0.5) * 0.08 * uIntensity;
+        float shift = uChroma * 0.015 * (sin(t * 2.0 + hash(vec2(epoch, seed)) * 6.28) * 0.3 + 0.7);
+
+        col += uColor * vec3(
+          hash(gUV * 50.0 + vec2(shift, 0.0) + epoch),
+          hash(gUV * 50.0 + epoch),
+          hash(gUV * 50.0 - vec2(shift, 0.0) + epoch)
+        ) * dither(gl_FragCoord.xy * 0.5, fade * 0.8 + 0.2) * uIntensity * 0.7;
+      }
+    }
+
+    for (float i = 0.0; i < 12.0; i++) {
+      float seed = i * 211.7 + 1000.0;
+      float epoch = floor((t + hash(vec2(seed, 77.7)) * 150.0) / (3.0 + hash(vec2(seed, 0.0)) * 5.0));
+      float life = fract((t + hash(vec2(seed, 77.7)) * 150.0) / (3.0 + hash(vec2(seed, 0.0)) * 5.0));
+
+      if (hash(vec2(epoch, seed)) > 1.0 - uSparsity * 0.5) continue;
+
+      vec2 pos = vec2(hash(vec2(epoch, seed + 13.1)), hash(vec2(epoch, seed + 27.3)));
+      float px = 0.003 + hash(vec2(epoch, seed + 41.5)) * 0.008;
+
+      if (abs(vUv.x - pos.x) < px && abs(vUv.y - pos.y) < px) {
+        float fade = smoothstep(0.0, 0.1, life) * smoothstep(1.0, 0.9, life);
+        vec3 c = uColor;
+        float cs = hash(vec2(epoch, seed + 700.0));
+
+        if (cs < 0.2) c.r *= 1.8 * uChroma;
+        else if (cs < 0.4) c.b *= 1.8 * uChroma;
+
+        col += c * dither(gl_FragCoord.xy * 0.5, fade * 0.9) * uIntensity;
+      }
+    }
+
+    float tearSize = 25.0 + uSparsity * 10.0;
+    float tearThresh = 0.85 + uSparsity * 0.1;
+
+    float hY = floor(vUv.y * tearSize);
+    if (step(tearThresh, hash(vec2(hY, tSlow))) > 0.0) {
+      float shift = (hash(vec2(hY, tSlow + 50.0)) - 0.5) * 0.25 * uIntensity;
+      col += uColor * step(0.4, hash(vec2(vUv.x + shift, hY + tSlow))) * dit * uIntensity * 0.5;
+    }
+
+    float vX = floor(vUv.x * tearSize);
+    if (step(tearThresh, hash(vec2(vX, tSlow + 100.0))) > 0.0) {
+      float shift = (hash(vec2(vX, tSlow + 150.0)) - 0.5) * 0.25 * uIntensity;
+      col += uColor * step(0.4, hash(vec2(vX + tSlow, vUv.y + shift))) * dit * uIntensity * 0.5;
+    }
+
+    gl_FragColor = vec4(col * uAlpha, max(col.r, max(col.g, col.b)) * uAlpha);
+  }
+`
+
+export function Glitch({ className, style }: GlitchProps) {
+  const gpuTier = useGpuTier()
+
+  const c = useSmoothControls(
+    'Effects/Glitch',
+    {
+      alpha: { max: 2, min: 0, step: 0.01, value: 0.25 },
+      blend: { options: BLEND_MODES, value: 'difference' },
+      chroma: { max: 3, min: 0, step: 0.01, value: 1.17 },
+      color: { value: '#ffe6cb' },
+      enabled: { value: true },
+      intensity: { max: 1, min: 0, step: 0.01, value: 0.59 },
+      sparsity: { max: 1, min: 0, step: 0.01, value: 0.21 },
+      speed: { max: 10, min: 0.1, step: 0.1, value: 1 }
+    },
+    { collapsed: true }
+  )
+
+  const ref = useRef<HTMLCanvasElement>(null)
+  const cRef = useRef(c)
+  cRef.current = c
+
+  const enabled = c.enabled && gpuTier > 0
+
+  useEffect(() => {
+    if (!ref.current || !enabled) {
+      return
+    }
+
+    let renderer: THREE.WebGLRenderer
+
+    try {
+      renderer = new THREE.WebGLRenderer({
+        alpha: true,
+        canvas: ref.current
+      })
+    } catch {
+      // See note in noise.tsx — eager gpu-tier detection should keep us
+      // out of here, but if the driver fails the renderer constructor
+      // anyway, downgrade so other overlays stop trying too.
+      $gpuTier.set(0)
+
+      return
+    }
+
+    const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1)
+    const geo = new THREE.PlaneGeometry(2, 2)
+    const scene = new THREE.Scene()
+
+    const mat = new THREE.ShaderMaterial({
+      fragmentShader: frag,
+      transparent: true,
+      uniforms: {
+        uAlpha: { value: c.alpha },
+        uChroma: { value: c.chroma },
+        uColor: { value: new THREE.Color(c.color) },
+        uIntensity: { value: c.intensity },
+        uSparsity: { value: c.sparsity },
+        uSpeed: { value: c.speed },
+        uTime: { value: 0 }
+      },
+      vertexShader: vert
+    })
+
+    scene.add(new THREE.Mesh(geo, mat))
+
+    const resize = () => {
+      renderer.setSize(innerWidth, innerHeight)
+      // Cap DPR at 1.5 — at full retina (2x) the glitch shader is one
+      // of the heaviest fillrate consumers in the app, and the visual
+      // difference is tiny because it's a chromatic-noise effect.
+      renderer.setPixelRatio(Math.min(devicePixelRatio, 1.5))
+    }
+
+    resize()
+    window.addEventListener('resize', resize)
+
+    let time = 0
+
+    // gpu-tier 1 → ~10fps (legacy), gpu-tier 2 → ~30fps (was 60fps).
+    // Glitch is a background ambient effect; users won't notice 30 vs
+    // 60 but the GPU absolutely will.
+    const minIntervalMs = gpuTier === 1 ? 100 : 33
+
+    const dispose = runRenderLoop({
+      el: ref.current,
+      minIntervalMs,
+      onFrame: deltaSeconds => {
+        time += deltaSeconds
+
+        const v = cRef.current
+
+        mat.uniforms.uTime.value = time
+        mat.uniforms.uAlpha.value = v.alpha
+        mat.uniforms.uChroma.value = v.chroma
+        mat.uniforms.uIntensity.value = v.intensity
+        mat.uniforms.uSparsity.value = v.sparsity
+        mat.uniforms.uSpeed.value = v.speed
+        mat.uniforms.uColor.value.set(v.color)
+
+        renderer.render(scene, camera)
+      }
+    })
+
+    return () => {
+      window.removeEventListener('resize', resize)
+      dispose()
+
+      mat.dispose()
+      geo.dispose()
+      renderer.dispose()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [enabled, gpuTier])
+
+  if (!enabled) {
+    return null
+  }
+
+  return (
+    <canvas
+      className={cn('h-full w-full', className)}
+      ref={ref}
+      style={{
+        mixBlendMode: c.blend as React.CSSProperties['mixBlendMode'],
+        ...style
+      }}
+    />
+  )
+}
+
+interface GlitchProps {
+  className?: string
+  style?: React.CSSProperties
+}