@nous-research/ui 0.15.0 → 0.17.0

package/src/hooks/use-confirm-delete.ts

@@ -0,0 +1,43 @@
+'use client'
+
+import { useCallback, useState } from 'react'
+
+export function useConfirmDelete<TId>({
+  onDelete
+}: {
+  onDelete: (id: TId) => Promise<void>
+}) {
+  const [pendingId, setPendingId] = useState<TId | null>(null)
+  const [isDeleting, setIsDeleting] = useState(false)
+
+  const requestDelete = useCallback((id: TId) => {
+    setPendingId(id)
+  }, [])
+
+  const cancel = useCallback(() => {
+    if (!isDeleting) setPendingId(null)
+  }, [isDeleting])
+
+  const confirm = useCallback(async () => {
+    if (pendingId === null) return
+    const id = pendingId
+    setIsDeleting(true)
+    try {
+      await onDelete(id)
+      setPendingId(null)
+    } catch {
+      // Dialog stays open; caller can surface errors in onDelete
+    } finally {
+      setIsDeleting(false)
+    }
+  }, [pendingId, onDelete])
+
+  return {
+    cancel,
+    confirm,
+    isDeleting,
+    isOpen: pendingId !== null,
+    pendingId,
+    requestDelete
+  } as const
+}

package/src/hooks/use-css-var-dims.ts

@@ -0,0 +1,39 @@
+'use client'
+
+import { useEffect } from 'react'
+
+export function useCssVarDims(
+  name: string,
+  ref: React.RefObject<HTMLElement | null>
+) {
+  useEffect(() => {
+    if (!ref.current) {
+      return
+    }
+
+    const update = (width: number, height: number) => {
+      document.documentElement.style.setProperty(
+        `--${name}-width`,
+        `${width}px`
+      )
+
+      document.documentElement.style.setProperty(
+        `--${name}-height`,
+        `${height}px`
+      )
+    }
+
+    const { height, width } = ref.current.getBoundingClientRect()
+    update(width, height)
+
+    const ro = new ResizeObserver(entries => {
+      for (const entry of entries) {
+        update(entry.contentRect.width, entry.contentRect.height)
+      }
+    })
+
+    ro.observe(ref.current)
+
+    return () => ro.disconnect()
+  }, [name, ref])
+}

package/src/hooks/use-gpu-tier.ts

@@ -0,0 +1,165 @@
+'use client'
+
+import { useStore } from '@nanostores/react'
+import { atom } from 'nanostores'
+
+/**
+ * Tiers:
+ *  0 — no WebGL / software renderer / prefers-reduced-motion / WebGL ctx creation failed
+ *  1 — low-end GPU (integrated, mobile, or failed perf benchmark)
+ *  2 — capable GPU (discrete / high-end integrated)
+ *
+ * Detection runs **synchronously** the first time this module is evaluated
+ * on the client (see the IIFE at the bottom of the file). That means any
+ * consumer reading `$gpuTier` during its first render already sees the
+ * post-detection value, so WebGL components can avoid trying to create a
+ * `THREE.WebGLRenderer` on hardware where context creation will fail.
+ *
+ * The previous version ran the probe inside `nanostores`'s `onMount`
+ * lifecycle, which fires from a microtask after the first listener
+ * subscribes — i.e. after the first React commit. By that point overlay
+ * components had already executed `new THREE.WebGLRenderer(...)` against
+ * the optimistic default, logged `Error creating WebGL context`, and only
+ * unmounted on a follow-up render. Eager module-load detection closes that
+ * race.
+ */
+export const $gpuTier = atom<GpuTier>(2)
+
+const SOFTWARE_PATTERNS =
+  /swiftshader|llvmpipe|softpipe|software|microsoft basic/i
+
+const LOW_END_PATTERNS =
+  /intel.*hd|intel.*uhd|intel.*iris|mali|adreno\s?[1-5]|powervr|apple gpu/i
+
+let detected = false
+
+function detectGpuTier() {
+  if (detected || typeof window === 'undefined') {
+    return
+  }
+
+  detected = true
+
+  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+    $gpuTier.set(0)
+
+    return
+  }
+
+  let gl: null | WebGLRenderingContext = null
+
+  try {
+    const canvas = document.createElement('canvas')
+    gl = (canvas.getContext('webgl') ||
+      canvas.getContext('experimental-webgl')) as null | WebGLRenderingContext
+  } catch {
+    // Some sandboxed / hardened contexts throw on getContext rather than
+    // returning null (e.g. certain corporate browser policies). Treat as
+    // "no WebGL available".
+    $gpuTier.set(0)
+
+    return
+  }
+
+  if (!gl) {
+    $gpuTier.set(0)
+
+    return
+  }
+
+  const ext = gl.getExtension('WEBGL_debug_renderer_info')
+  const renderer = String(
+    ext
+      ? gl.getParameter(ext.UNMASKED_RENDERER_WEBGL)
+      : gl.getParameter(gl.RENDERER)
+  )
+
+  if (SOFTWARE_PATTERNS.test(renderer)) {
+    $gpuTier.set(0)
+    gl.getExtension('WEBGL_lose_context')?.loseContext()
+
+    return
+  }
+
+  if (LOW_END_PATTERNS.test(renderer)) {
+    $gpuTier.set(1)
+    gl.getExtension('WEBGL_lose_context')?.loseContext()
+
+    return
+  }
+
+  $gpuTier.set(2)
+
+  runBenchmark(gl)
+    .then(fps => $gpuTier.set(fps < 30 ? 1 : 2))
+    .catch(() => $gpuTier.set(1))
+    .finally(() => gl?.getExtension('WEBGL_lose_context')?.loseContext())
+}
+
+if (typeof window !== 'undefined') {
+  detectGpuTier()
+}
+
+function runBenchmark(gl: WebGLRenderingContext): Promise<number> {
+  return new Promise(resolve => {
+    const vs = gl.createShader(gl.VERTEX_SHADER)!
+    const fs = gl.createShader(gl.FRAGMENT_SHADER)!
+    gl.shaderSource(
+      vs,
+      'attribute vec2 a;void main(){gl_Position=vec4(a,0,1);}'
+    )
+    gl.shaderSource(
+      fs,
+      'precision highp float;uniform float t;void main(){float v=0.;for(int i=0;i<64;i++)v+=sin(float(i)*t*.01);gl_FragColor=vec4(v*.001);}'
+    )
+    gl.compileShader(vs)
+    gl.compileShader(fs)
+
+    const prog = gl.createProgram()!
+    gl.attachShader(prog, vs)
+    gl.attachShader(prog, fs)
+    gl.linkProgram(prog)
+    gl.useProgram(prog)
+
+    const buf = gl.createBuffer()
+    gl.bindBuffer(gl.ARRAY_BUFFER, buf)
+    gl.bufferData(
+      gl.ARRAY_BUFFER,
+      new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
+      gl.STATIC_DRAW
+    )
+    const a = gl.getAttribLocation(prog, 'a')
+    gl.enableVertexAttribArray(a)
+    gl.vertexAttribPointer(a, 2, gl.FLOAT, false, 0, 0)
+
+    const uT = gl.getUniformLocation(prog, 't')
+    let frames = 0
+    const start = performance.now()
+
+    const tick = () => {
+      gl.uniform1f(uT, frames)
+      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)
+      gl.finish()
+      frames++
+
+      if (performance.now() - start < 200) {
+        requestAnimationFrame(tick)
+      } else {
+        const elapsed = performance.now() - start
+        gl.deleteProgram(prog)
+        gl.deleteShader(vs)
+        gl.deleteShader(fs)
+        gl.deleteBuffer(buf)
+        resolve((frames / elapsed) * 1000)
+      }
+    }
+
+    requestAnimationFrame(tick)
+  })
+}
+
+export function useGpuTier() {
+  return useStore($gpuTier)
+}
+
+type GpuTier = 0 | 1 | 2

package/src/hooks/use-render-loop.ts

@@ -0,0 +1,121 @@
+'use client'
+
+/**
+ * Visibility- and intersection-aware render-loop helper for the WebGL
+ * overlays.
+ *
+ * The overlays were previously running fragment shaders at 60fps for the
+ * entire lifetime of the page — including when the tab was hidden, the
+ * canvas had been scrolled out of view, or the user had been idle for
+ * hours. On retina laptops the compositor cost of mix-blend-mode on a
+ * full-viewport canvas plus continuous WebGL rasterisation is enough to
+ * keep the GPU hot indefinitely, which is what manifests as "fans go
+ * crazy after 2 hours of idle".
+ *
+ * `runRenderLoop` wraps a frame callback so that it:
+ *
+ *   1. Pauses entirely when `document.hidden` is true (background tab,
+ *      minimised window, screen locked).
+ *   2. Pauses when the canvas's bounding rect is offscreen (we tell
+ *      `IntersectionObserver` to look at the canvas itself).
+ *   3. Optionally caps the frame rate via a min-interval — the previous
+ *      `gpuTier === 1 ? setTimeout(loop, 100) : raf` trick is preserved
+ *      and extended so even tier-2 GPUs cap at e.g. 30fps for overlays
+ *      that don't need 60.
+ *
+ * The callback receives the *delta* time in seconds since the last call
+ * (so `uTime` advances correctly across pauses without ever skipping
+ * forward by hours).
+ */
+
+interface RunRenderLoopOptions {
+  /** Element to observe with IntersectionObserver. When fully out of
+   *  view, the loop pauses. Pass the canvas element itself. */
+  el: Element
+  /** Min ms between frames. 0 = no cap (uses requestAnimationFrame).
+   *  Anything > 0 uses setTimeout-driven scheduling. */
+  minIntervalMs?: number
+  /** Frame callback. Receives the elapsed seconds since the previous
+   *  *executed* frame (not since the previous scheduled frame), so
+   *  uniforms keyed off this value will not jump after a long pause. */
+  onFrame: (deltaSeconds: number) => void
+}
+
+export function runRenderLoop({
+  el,
+  minIntervalMs = 0,
+  onFrame
+}: RunRenderLoopOptions) {
+  let running = true
+  let visible = !document.hidden
+  let inView = true
+  let last = performance.now()
+  let raf = 0
+  let timer: ReturnType<typeof setTimeout> | undefined
+
+  const onVisibility = () => {
+    visible = !document.hidden
+
+    // When we come back from a hidden tab, reset the clock so the next
+    // frame's delta is ~one frame, not "hours since I was hidden".
+    if (visible) {
+      last = performance.now()
+      schedule()
+    }
+  }
+
+  const io = new IntersectionObserver(
+    entries => {
+      const wasInView = inView
+      inView = entries.some(e => e.isIntersecting)
+
+      if (!wasInView && inView) {
+        last = performance.now()
+        schedule()
+      }
+    },
+    { threshold: 0 }
+  )
+
+  io.observe(el)
+  document.addEventListener('visibilitychange', onVisibility)
+
+  const tick = () => {
+    if (!running) return
+
+    if (!visible || !inView) {
+      // Don't reschedule — we'll be re-kicked by visibilitychange or IO.
+      return
+    }
+
+    const now = performance.now()
+    const delta = (now - last) / 1000
+    last = now
+
+    onFrame(delta)
+    schedule()
+  }
+
+  function schedule() {
+    if (!running || !visible || !inView) return
+
+    if (minIntervalMs > 0) {
+      timer = setTimeout(tick, minIntervalMs)
+    } else {
+      raf = requestAnimationFrame(tick)
+    }
+  }
+
+  schedule()
+
+  return () => {
+    running = false
+    io.disconnect()
+    document.removeEventListener('visibilitychange', onVisibility)
+    cancelAnimationFrame(raf)
+
+    if (timer !== undefined) {
+      clearTimeout(timer)
+    }
+  }
+}

package/src/hooks/use-smooth-controls.ts

@@ -0,0 +1,318 @@
+'use client'
+
+import gsap from 'gsap'
+import { buttonGroup, useControls } from 'leva'
+import { atom, type WritableAtom } from 'nanostores'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+
+const atomRegistry = new Map<string, Map<string, WritableAtom<any>>>()
+
+const val = (v: any) =>
+  v && typeof v === 'object' && 'value' in v ? v.value : v
+
+const isHex = (v: any) =>
+  /color/i.test(v?.type) || /^#[0-9a-f]{3,8}$/i.test(val(v))
+
+const randHex = () =>
+  `#${Math.floor(Math.random() * 0xffffff)
+    .toString(16)
+    .padStart(6, '0')}`
+
+const randNum = (v: any) =>
+  typeof v === 'object' && ('min' in v || 'max' in v)
+    ? gsap.utils.random(v.min ?? 0, v.max ?? 1, v.step ?? 0.01)
+    : gsap.utils.random(0, 1)
+
+export function useSmoothControls<T extends Record<string, any>>(
+  label: string,
+  initialArgs: T,
+  options?: UseSmoothControlsOptions,
+  dependencies?: Parameters<typeof useControls>[3]
+) {
+  type R = { [K in keyof T]: T[K] extends { value: infer V } ? V : never }
+
+  const entries = useMemo(
+    () => Object.entries(initialArgs ?? {}),
+    [initialArgs]
+  )
+
+  const values = useMemo(
+    () => entries.filter(([, v]) => !/button|folder/i.test(v?.type)),
+    [entries]
+  )
+
+  // Tracks whether this component instance has mounted yet. When a remount
+  // happens (e.g. Storybook changing a `key` prop to force a lens reset), we
+  // want the module-scoped atoms to be reseeded from the new `initialArgs` so
+  // the first paint reflects the newly-selected preset — not leftover values
+  // from the previous mount.
+  const mountedRef = useRef(false)
+
+  const atoms = useMemo(() => {
+    const map = atomRegistry.get(label) ?? new Map<string, WritableAtom<any>>()
+
+    if (!atomRegistry.has(label)) {
+      atomRegistry.set(label, map)
+    }
+
+    const freshMount = !mountedRef.current
+
+    entries.forEach(([k, v]) => {
+      if (v?.schema) {
+        Object.keys(v.schema).forEach(sk => {
+          const key = `${k}.${sk}`
+
+          if (!map.has(key)) {
+            map.set(key, atom(val(v.schema[sk])))
+          } else if (freshMount) {
+            map.get(key)!.set(val(v.schema[sk]))
+          }
+        })
+      } else if (!map.has(k)) {
+        map.set(k, atom(val(v)))
+      } else if (freshMount) {
+        map.get(k)!.set(val(v))
+      }
+    })
+
+    return map
+  }, [label, entries])
+
+  useEffect(() => {
+    mountedRef.current = true
+  }, [])
+
+  const hydrate = useCallback(
+    () =>
+      Object.fromEntries(
+        entries.flatMap(([k, v]) =>
+          v?.schema
+            ? Object.entries(v.schema).map(([k0, v0]: [string, any]) => [
+                k0,
+                atoms.get(`${k}.${k0}`)?.get() ?? val(v0)
+              ])
+            : [[k, atoms.get(k)?.get() ?? val(v)]]
+        )
+      ) as R,
+    [entries, atoms]
+  )
+
+  const [args, update] = useState<R>(hydrate)
+  const setRef = useRef<((values: Partial<R>) => void) | null>(null)
+  const atomVals = useRef<Record<string, any>>({})
+  const fromAtom = useRef(false)
+  const fromControl = useRef<Set<string>>(new Set())
+
+  useEffect(() => {
+    if (Object.keys(args).length !== Object.keys(initialArgs).length) {
+      update(hydrate)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initialArgs, args])
+
+  useEffect(() => {
+    if (!setRef.current) {
+      return
+    }
+
+    const unsubs: Array<() => void> = []
+    let ready = false
+    const initTimeout = setTimeout(() => (ready = true), 100)
+
+    const subscribe = (fullKey: string, updateFn: (v: any) => void) => {
+      const a = atoms.get(fullKey)
+
+      if (!a) {
+        return
+      }
+
+      unsubs.push(
+        a.subscribe(v => {
+          const prev = atomVals.current[fullKey]
+          atomVals.current[fullKey] = v
+
+          if (
+            setRef.current &&
+            ready &&
+            prev !== v &&
+            !fromControl.current.has(fullKey)
+          ) {
+            fromAtom.current = true
+
+            try {
+              updateFn(v)
+            } catch {
+              //
+            }
+
+            setTimeout(() => (fromAtom.current = false), 0)
+          }
+        })
+      )
+
+      atomVals.current[fullKey] = a.get()
+    }
+
+    entries.forEach(([k, v]) => {
+      if (v?.schema) {
+        Object.keys(v.schema).forEach(sk => {
+          subscribe(`${k}.${sk}`, v => {
+            try {
+              setRef.current!({
+                [k]: { ...((args[k] as any) ?? {}), [sk]: v }
+              } as Partial<R>)
+            } catch {
+              //
+            }
+
+            update(st => ({
+              ...st,
+              [k]: { ...((st[k] as any) ?? {}), [sk]: v }
+            }))
+          })
+        })
+      } else {
+        subscribe(k, v => {
+          try {
+            setRef.current!({ [k]: v } as Partial<R>)
+          } catch {
+            //
+          }
+
+          update(st => ({ ...st, [k]: v }))
+        })
+      }
+    })
+
+    return () => {
+      clearTimeout(initTimeout)
+      unsubs.forEach(fn => fn())
+    }
+  }, [label, entries, atoms, args])
+
+  const onChange =
+    (k: string, orig?: (e: any, k0?: string) => void) =>
+    (e: any, k0?: string) => {
+      if (fromAtom.current) {
+        return orig?.(e, k0)
+      }
+
+      const key = k0?.split('.')?.pop() ?? k
+      const fullKey = k0 ?? k
+      const a = atoms.get(fullKey)
+
+      fromControl.current.add(fullKey)
+
+      const sync = (v: any) => {
+        update(st => ({ ...st, [key]: v }))
+        a?.set(v)
+        orig?.(v, k0)
+      }
+
+      if (typeof e === 'number' && args[key] !== e) {
+        gsap.to(args, {
+          duration: options?.duration ?? 0.35,
+          ease: 'circ.out',
+          [key]: e,
+          onComplete: () => void fromControl.current.delete(fullKey),
+          onUpdate: () => {
+            fromControl.current.add(fullKey)
+            sync(args[key])
+            setTimeout(() => fromControl.current.delete(fullKey), 0)
+          }
+        })
+      } else {
+        sync(e)
+        setTimeout(() => fromControl.current.delete(fullKey), 0)
+      }
+    }
+
+  const [, set] = useControls(
+    label,
+    () => ({
+      ...Object.fromEntries(
+        entries.map(([k, v]) =>
+          v?.schema
+            ? [
+                k,
+                {
+                  ...v,
+                  schema: Object.fromEntries(
+                    Object.entries(v.schema).map(([sk, sv]: [string, any]) => [
+                      sk,
+                      { ...sv!, onChange: onChange(k, sv?.onChange) }
+                    ])
+                  )
+                }
+              ]
+            : [k, { ...v, onChange: onChange(k, v?.onChange) }]
+        )
+      ),
+
+      ' ': buttonGroup({
+        flatten: () =>
+          void set(Object.fromEntries(values.map(([k]) => [k, 0]))),
+        randomize: () => {
+          set(
+            Object.fromEntries(
+              values.map(([k, v]) => [k, isHex(v) ? randHex() : randNum(v)])
+            )
+          )
+          options?.onRandomize?.()
+        },
+        reset: () => {
+          set(Object.fromEntries(values.map(([k, v]) => [k, val(v)])))
+          options?.onReset?.()
+        }
+      })
+    }),
+    { collapsed: true, ...options },
+    dependencies ?? []
+  )
+
+  setRef.current = set
+
+  return args
+}
+
+export const getControlAtom = <T = any>(
+  label: string,
+  key: string
+): undefined | WritableAtom<T> =>
+  atomRegistry.get(label)?.get(key) as undefined | WritableAtom<T>
+
+export const setControlValue = <T = any>(
+  label: string,
+  key: string,
+  value: T,
+  options?: { animate?: boolean; duration?: number }
+) => {
+  const a = getControlAtom<T>(label, key)
+
+  if (!a) {
+    return
+  }
+
+  if (
+    options?.animate &&
+    typeof value === 'number' &&
+    typeof a.get() === 'number'
+  ) {
+    const t = { v: a.get() }
+
+    gsap.to(t, {
+      duration: options.duration ?? 0.35,
+      ease: 'circ.out',
+      onUpdate: () => a.set(t.v),
+      v: value
+    })
+  } else {
+    a.set(value)
+  }
+}
+
+type UseSmoothControlsOptions = Parameters<typeof useControls>[2] & {
+  duration?: number
+  onRandomize?: () => void
+  onReset?: () => void
+}

package/src/hooks/use-toast.ts

@@ -0,0 +1,29 @@
+'use client'
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+export function useToast(duration = 3000) {
+  const [toast, setToast] = useState<{
+    message: string
+    type: 'error' | 'success'
+  } | null>(null)
+
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current)
+    }
+  }, [])
+
+  const showToast = useCallback(
+    (message: string, type: 'error' | 'success') => {
+      if (timerRef.current) clearTimeout(timerRef.current)
+      setToast({ message, type })
+      timerRef.current = setTimeout(() => setToast(null), duration)
+    },
+    [duration]
+  )
+
+  return { showToast, toast }
+}