@nastechai-research/ui 0.13.2

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
+}

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

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { AsciiSkeleton, Scramble } from './ascii'
+import { Typography } from './typography'
+
+const meta = {
+  title: 'Components/Effects/Ascii'
+} satisfies Meta
+
+export default meta
+
+type Story = StoryObj
+
+export const RevealScramble: Story = {
+  render: () => (
+    <Typography className="text-lg" mono>
+      <Scramble delay={200} text="PSYCHE NETWORK" />
+    </Typography>
+  )
+}
+
+export const Skeleton: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <AsciiSkeleton cols={20} rows={1} />
+      <AsciiSkeleton cols={40} rows={3} />
+      <AsciiSkeleton cols={60} rows={5} speed={120} />
+    </div>
+  )
+}

package/src/ui/components/ascii.tsx

@@ -0,0 +1,110 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+
+const BLOCK = '░▒▓█▄▀▐▌─│┌┐└┘├┤┬┴┼╌╎⣀⣤⣶⣿'
+const ALPHA = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%&*'
+
+const rand = (chars: string) => chars[(Math.random() * chars.length) | 0]
+
+export function Scramble({
+  delay = 0,
+  text
+}: {
+  delay?: number
+  text: string
+}) {
+  const [display, setDisplay] = useState(text)
+  const iter = useRef(0)
+
+  useEffect(() => {
+    iter.current = 0
+
+    const timeout = setTimeout(() => {
+      const interval = setInterval(() => {
+        setDisplay(
+          text
+            .split('')
+            .map((c, i) =>
+              c === ' ' ? ' ' : i < iter.current ? text[i] : rand(ALPHA)
+            )
+            .join('')
+        )
+
+        iter.current += 1 / 3
+
+        if (iter.current >= text.length) {
+          clearInterval(interval)
+          setDisplay(text)
+        }
+      }, 30)
+
+      return () => clearInterval(interval)
+    }, delay)
+
+    return () => clearTimeout(timeout)
+  }, [text, delay])
+
+  return <>{display}</>
+}
+
+export function AsciiSkeleton({
+  className = '',
+  cols = 12,
+  rows = 1,
+  speed = 80
+}: {
+  className?: string
+  cols?: number
+  rows?: number
+  speed?: number
+}) {
+  const ref = useRef<HTMLSpanElement>(null)
+
+  useEffect(() => {
+    const el = ref.current
+
+    if (!el) {
+      return
+    }
+
+    const total = cols * rows
+    let frame = 0
+
+    const tick = () => {
+      let text = ''
+
+      for (let i = 0; i < total; i++) {
+        const x = i % cols
+        const shimmer = (x - frame * 0.5 + cols * 2) % (cols * 2)
+
+        text += shimmer < 6 ? ' ' : rand(BLOCK)
+
+        if (rows > 1 && x === cols - 1) {
+          text += '\n'
+        }
+      }
+
+      el.textContent = text
+      frame++
+    }
+
+    tick()
+    const id = setInterval(tick, speed)
+
+    return () => clearInterval(id)
+  }, [cols, rows, speed])
+
+  return (
+    <span
+      aria-hidden
+      className={`inline-block leading-tight opacity-20 select-none ${className}`}
+      ref={ref}
+      style={{
+        fontFamily: 'monospace',
+        fontSize: 'inherit',
+        letterSpacing: '0.05em'
+      }}
+    />
+  )
+}

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

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { Badge } from './badge'
+import { NousGirlBadge } from './badges/nous-girl'
+
+const meta = {
+  args: { children: 'LIVE' },
+  component: Badge,
+  title: 'Components/Feedback/Badge'
+} satisfies Meta<typeof Badge>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const Row: Story = {
+  render: () => (
+    <div className="flex items-center gap-3">
+      <Badge>2.47</Badge>
+      <Badge>LIVE</Badge>
+      <Badge>14B</Badge>
+      <Badge>DEMO</Badge>
+    </div>
+  )
+}
+
+export const NousGirl: StoryObj = {
+  render: () => <NousGirlBadge className="h-20 w-auto" />
+}

package/src/ui/components/badge.tsx

@@ -0,0 +1,60 @@
+import { cn } from '../../utils'
+
+import { BlendMode, type BlendModeProps } from './blend-mode'
+
+const BASE_CN =
+  'inline-flex items-center font-compressed text-display px-2 py-1 leading-none tracking-[0.2em]'
+
+const TONE_CLASSES: Record<Exclude<Tone, 'default'>, string> = {
+  destructive:
+    'border border-destructive/30 bg-destructive/15 text-destructive',
+  outline: 'border border-midground/30 bg-transparent text-midground/80',
+  secondary: 'border border-midground/15 bg-midground/8 text-midground',
+  success: 'border border-success/30 bg-success/15 text-success',
+  warning: 'border border-warning/30 bg-warning/15 text-warning'
+}
+
+export const Badge = ({
+  className,
+  style,
+  tone = 'default',
+  ...props
+}: BadgeProps) => {
+  // `tone="default"` keeps the original Lens-aware BlendMode treatment so
+  // existing brand-style consumers (nousnet-web etc.) render unchanged.
+  if (tone === 'default') {
+    return (
+      <BlendMode
+        as="span"
+        background="mg/0.075"
+        className={cn(BASE_CN, className)}
+        color="mg"
+        style={{ opacity: 'var(--midground-alpha)', ...style }}
+        {...(props as BlendModeProps<'span'>)}
+      />
+    )
+  }
+
+  // Semantic tones bypass BlendMode and use --color-* tokens directly so
+  // red stays red and green stays green regardless of the active Lens.
+  return (
+    <span
+      className={cn(BASE_CN, TONE_CLASSES[tone], className)}
+      style={style}
+      {...(props as React.HTMLAttributes<HTMLSpanElement>)}
+    />
+  )
+}
+
+type Tone =
+  | 'default'
+  | 'destructive'
+  | 'outline'
+  | 'secondary'
+  | 'success'
+  | 'warning'
+
+interface BadgeProps
+  extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'> {
+  tone?: Tone
+}