@nous-research/ui 0.14.2 → 0.16.0

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/index.ts

@@ -0,0 +1,109 @@
+export { AnimatedCount, useAnimatedCount } from './ui/components/animated-count'
+export { AsciiSkeleton, Scramble as AsciiScramble } from './ui/components/ascii'
+export { Badge } from './ui/components/badge'
+export { NousGirlBadge } from './ui/components/badges/nous-girl'
+export { BlendMode, useBlendMode, withBlendMode } from './ui/components/blend-mode'
+export type { BlendModeProps } from './ui/components/blend-mode'
+export { Blink } from './ui/components/blink'
+export { Button } from './ui/components/button'
+export { Checkbox } from './ui/components/checkbox'
+export { CommandBlock, CopyButton } from './ui/components/command-block'
+export { Cursor } from './ui/components/cursor'
+export { DropdownMenu } from './ui/components/dropdown-menu'
+export { FitText } from './ui/components/fit-text'
+export { BarChart, LineChart } from './ui/components/graphs'
+export { Cell, Grid } from './ui/components/grid'
+export { HoverBg } from './ui/components/hover-bg'
+export * as Icons from './ui/components/icons'
+export { DiscordIcon } from './ui/components/icons/discord'
+export { GitHubIcon } from './ui/components/icons/github'
+export { ImageDistortion } from './ui/components/image-distortion'
+export type { AutoPlayPattern } from './ui/components/image-distortion'
+export { LevaClient } from './ui/components/leva-client'
+export { ListItem } from './ui/components/list-item'
+export { Modal } from './ui/components/modal'
+export { FilterGroup, Segmented } from './ui/components/segmented'
+export { Switch } from './ui/components/switch'
+export { Tabs, TabsList, TabsTrigger } from './ui/components/tabs'
+export { Poster } from './ui/components/poster'
+export type {
+  PosterAspect,
+  PosterProps,
+  PosterVariant
+} from './ui/components/poster'
+export {
+  applyLens,
+  BLEND_MODES,
+  LENSES,
+  LENS_0,
+  LENS_5I,
+  lens0,
+  lens5i,
+  toggleLens,
+  $lightMode
+} from './ui/components/overlays'
+export {
+  Glitch,
+  Greys,
+  Lens,
+  Noise,
+  Overlays,
+  Vignette
+} from './ui/components/overlays'
+export type { LensPreset } from './ui/components/overlays'
+export { Progress } from './ui/components/progress'
+export { SceneCanvas } from './ui/components/scene-canvas'
+export { Scramble } from './ui/components/scramble'
+export { Select, SelectOption } from './ui/components/select'
+export { SelectionSwitcher } from './ui/components/selection-switcher'
+export { Spinner } from './ui/components/spinner'
+export { Stats } from './ui/components/stats'
+export { TerminalDemo } from './ui/components/terminal-demo'
+export type { TerminalDemoStep } from './ui/components/terminal-demo'
+export { ThemeToggle } from './ui/components/theme-toggle'
+export { TierCard } from './ui/components/tier-card'
+export type { TierCardPrice, TierCardProps } from './ui/components/tier-card'
+export { TV } from './ui/components/tv'
+export { Watchlist } from './ui/components/watchlist'
+
+export { Typography } from './ui/components/typography'
+export type { TypographyProps } from './ui/components/typography'
+export { H1 } from './ui/components/typography/h1'
+export { H2 } from './ui/components/typography/h2'
+export { Legend } from './ui/components/typography/legend'
+export { Small } from './ui/components/typography/small'
+
+export { BasicPage } from './ui/basic-page'
+export { Header } from './ui/header'
+export type { HeaderLink, HeaderProps, HeaderSocial } from './ui/header'
+export { Footer } from './ui/footer'
+export type {
+  FooterGroup,
+  FooterLink,
+  FooterProps
+} from './ui/footer'
+export { Socials } from './ui/components/socials'
+export type { SocialLink } from './ui/components/socials'
+export { LayoutWrapper } from './ui/layout-wrapper'
+
+export {
+  FONT_SANS,
+  FONT_MONO,
+  FONT_RULES_COMPRESSED,
+  FONT_RULES_EXPANDED,
+  FONT_MONDWEST
+} from './fonts'
+
+export { cn, clamp, smoothstep, hexToVec3, truncate, stripWpStyles } from './utils'
+export { polyRef } from './utils'
+export type { PolyComponent, PolyProps, PolyRef } from './utils'
+export { hexToRgb, rgbToHex, colorDodge, colorMix } from './utils/color'
+
+export { useCappedFrame } from './hooks/use-capped-frame'
+export { useCssVarDims } from './hooks/use-css-var-dims'
+export { $gpuTier, useGpuTier } from './hooks/use-gpu-tier'
+export {
+  useSmoothControls,
+  getControlAtom,
+  setControlValue
+} from './hooks/use-smooth-controls'

package/src/ui/basic-page.tsx

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react'
+
+import { Cell, Grid } from './components/grid'
+import { Progress } from './components/progress'
+import { H1 } from './components/typography/h1'
+import { Small } from './components/typography/small'
+
+export function BasicPage({ children, subtitle, title }: BasicPageProps) {
+  return (
+    <>
+      <Grid>
+        <Cell>
+          <Progress value={0} />
+        </Cell>
+      </Grid>
+
+      <Grid className="lg:grid-cols-[max-content_1fr]">
+        <Cell className="-order-1">
+          <div className="sticky top-4 flex flex-col gap-4">
+            {title ? <H1 className="-mb-2 pr-10 opacity-90">{title}</H1> : null}
+            {subtitle ? <Small className="opacity-60">{subtitle}</Small> : null}
+          </div>
+        </Cell>
+
+        <Cell className="post bg-current/3">{children}</Cell>
+      </Grid>
+    </>
+  )
+}
+
+interface BasicPageProps extends React.PropsWithChildren {
+  subtitle?: string
+  title?: ReactNode
+}

package/src/ui/build.css

@@ -0,0 +1,4 @@
+@import "tailwindcss";
+@source "../";
+@import "./fonts.css";
+@import "./globals.css";

package/src/ui/components/animated-count.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+
+import {
+  AnimatedCount,
+  useAnimatedCount
+} from './animated-count'
+import { Button } from './button'
+import { Typography } from './typography'
+import { Small } from './typography/small'
+
+const meta = {
+  args: { damping: 1, duration: 1600, value: 84210 },
+  component: AnimatedCount,
+  title: 'Components/AnimatedCount'
+} satisfies Meta<typeof AnimatedCount>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {
+  render: args => (
+    <Typography className="text-4xl font-bold tabular-nums" expanded>
+      <AnimatedCount {...args} />
+    </Typography>
+  )
+}
+
+function LiveCount() {
+  const ts = useState(() => new Date())[0]
+  const value = useAnimatedCount(1000, 12, ts)
+
+  return <AnimatedCount duration={500} value={value} />
+}
+
+export const Live: StoryObj = {
+  render: () => (
+    <div className="flex flex-col gap-2">
+      <Small className="opacity-40">Live ticker (rate = 12)</Small>
+
+      <Typography className="text-4xl font-bold tabular-nums" expanded>
+        <LiveCount />
+      </Typography>
+    </div>
+  )
+}
+
+export const Manual: StoryObj = {
+  render: () => {
+    const [value, setValue] = useState(100)
+
+    return (
+      <div className="flex flex-col gap-4">
+        <Typography className="text-4xl font-bold tabular-nums" expanded>
+          <AnimatedCount duration={800} value={value} />
+        </Typography>
+
+        <div className="flex gap-2">
+          <Button onClick={() => setValue(v => v + 1000)}>+1000</Button>
+          <Button onClick={() => setValue(v => v + 100)}>+100</Button>
+          <Button onClick={() => setValue(v => Math.max(0, v - 100))}>-100</Button>
+        </div>
+      </div>
+    )
+  }
+}

package/src/ui/components/animated-count.tsx

@@ -0,0 +1,168 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+
+const ease = (t: number) => (t < 0.5 ? 4 * t ** 3 : 1 - (-2 * t + 2) ** 3 / 2)
+const easeD = (t: number) => (t < 0.5 ? 12 * t ** 2 : 6 * (-2 * t + 2) ** 2)
+
+export function useAnimatedCount(
+  from: number,
+  rate: number,
+  ts = new Date(),
+  pausedAt?: Date
+) {
+  const [value, setValue] = useState(from)
+  const current = useRef(from)
+
+  useEffect(() => {
+    if (!rate) {
+      return
+    }
+
+    let raf: number
+    let prev = Date.now()
+    let last = current.current
+
+    const target = () =>
+      from +
+      Math.floor(
+        ((pausedAt
+          ? Math.max(0, pausedAt.getTime() - ts.getTime())
+          : Date.now() - ts.getTime()) /
+          1e3) *
+          rate *
+          0.9
+      )
+
+    const tick = () => {
+      const now = Date.now()
+      current.current +=
+        (target() - current.current) * Math.min(1, ((now - prev) / 1e3) * 3)
+      prev = now
+
+      const rounded = Math.round(current.current)
+
+      if (rounded !== last) {
+        last = rounded
+        setValue(rounded)
+      }
+
+      if (!pausedAt || Math.abs(current.current - target()) > 0.5) {
+        raf = requestAnimationFrame(tick)
+      }
+    }
+
+    raf = requestAnimationFrame(tick)
+
+    return () => cancelAnimationFrame(raf)
+  }, [from, ts, rate, pausedAt])
+
+  return value
+}
+
+export function AnimatedCount({
+  damping = 1,
+  duration,
+  pausedAt,
+  rate = 0,
+  value
+}: Props) {
+  const id = useRef(Math.random().toString(36).slice(2, 9))
+  const prev = useRef(value)
+  const [display, setDisplay] = useState(value)
+  const [velocity, setVelocity] = useState(rate)
+
+  useEffect(() => {
+    if (!duration) {
+      prev.current = value
+      return
+    }
+
+    const start = prev.current
+    const delta = value - start
+    const dur = duration * damping
+    prev.current = value
+
+    if (!delta) {
+      setVelocity(0)
+      return
+    }
+
+    const t0 = performance.now()
+
+    const tick = (now: number) => {
+      const t = Math.min((now - t0) / dur, 1)
+      setDisplay(Math.round(start + delta * ease(t)))
+      setVelocity(Math.abs((delta * easeD(t)) / dur) * 1000)
+      t < 1 ? requestAnimationFrame(tick) : setVelocity(0)
+    }
+
+    const raf = requestAnimationFrame(tick)
+
+    return () => cancelAnimationFrame(raf)
+  }, [value, duration, rate, damping])
+
+  const digits = Math.round(duration ? display : value).toLocaleString().split('')
+  const v = duration ? velocity : rate
+  const paused = !duration && pausedAt
+
+  const blurred = new Set(
+    digits
+      .map((c, i) => {
+        if (!/\d/.test(c) || v <= 0 || paused) {
+          return -1
+        }
+
+        const pos =
+          digits.filter(x => /\d/.test(x)).length -
+          digits.slice(0, i + 1).filter(x => /\d/.test(x)).length
+
+        return (10 ** Math.max(0, pos) / v) * 1e3 < 500 ? i : -1
+      })
+      .filter(i => i >= 0)
+  )
+
+  return (
+    <>
+      <svg className="pointer-events-none absolute size-0">
+        <defs>
+          {digits.map((_, i) => (
+            <filter
+              id={`blur-${id.current}-${i}`}
+              key={i}
+              suppressHydrationWarning
+            >
+              <feGaussianBlur
+                stdDeviation={`0 ${blurred.has(i) ? 1 + [...blurred].indexOf(i) * 0.6 : 0}`}
+              />
+            </filter>
+          ))}
+        </defs>
+      </svg>
+
+      <span className="inline-flex tabular-nums">
+        {digits.map((c, i) => (
+          <span
+            className="inline-block text-center"
+            key={i}
+            style={{
+              filter: blurred.has(i) ? `url(#blur-${id.current}-${i})` : 'none',
+              width: c === ',' ? '0.4ch' : '1ch'
+            }}
+            suppressHydrationWarning
+          >
+            {c}
+          </span>
+        ))}
+      </span>
+    </>
+  )
+}
+
+interface Props {
+  damping?: number
+  duration?: number
+  pausedAt?: Date
+  rate?: number
+  value: number
+}