@nous-research/ui 0.15.0 → 0.17.0

package/src/ui/components/theme-toggle.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import { useStore } from '@nanostores/react'
+
+import { cn } from '../../utils'
+
+import { $lightMode, toggleLens } from './overlays'
+
+export function ThemeToggle({ className, style }: ThemeToggleProps) {
+  const light = useStore($lightMode)
+
+  return (
+    <button
+      aria-label={light ? 'Switch to dark mode' : 'Switch to light mode'}
+      className={cn(
+        'relative flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full',
+        'border border-current/25 bg-current/8 transition-colors',
+        'hover:bg-current/15',
+        className
+      )}
+      onClick={toggleLens}
+      style={style}
+      type="button"
+    >
+      <svg
+        className="absolute left-1 size-3.5 opacity-40"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        viewBox="0 0 24 24"
+      >
+        <circle cx={12} cy={12} r={5} />
+
+        <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
+      </svg>
+
+      <svg
+        className="absolute right-1 size-3.5 opacity-40"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        viewBox="0 0 24 24"
+      >
+        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+      </svg>
+
+      <span
+        aria-hidden
+        className={cn(
+          'bg-midground absolute size-4 rounded-full',
+          'transition-transform duration-200 ease-out'
+        )}
+        style={{ transform: `translateX(${light ? 2 : 22}px)` }}
+      />
+    </button>
+  )
+}
+
+interface ThemeToggleProps {
+  className?: string
+  style?: React.CSSProperties
+}

package/src/ui/components/tier-card.stories.tsx

@@ -0,0 +1,217 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import fillerBg from '../../assets/filler-bg0.webp'
+import { TierCard } from './tier-card'
+
+const SCOUT_SRC = fillerBg.src ?? (fillerBg as unknown as string)
+
+// Same tier palette referenced in `Poster.stories.tsx` and originally from
+// `nous-account-service/src/app/manage-subscription/_components/TierCard.tsx`.
+// Keep the two in sync so a design review can compare the card layout and
+// the bare poster side-by-side.
+const TIERS = [
+  {
+    bullets: ['Free models only'],
+    label: 'Scout',
+    price: { primary: 'Free', primarySuffix: '/mo' },
+    src: SCOUT_SRC,
+    tint: '#88ccaa'
+  },
+  {
+    bullets: ['300+ models', 'Hosted tool usage', '$5 monthly credits'],
+    label: 'Visor',
+    price: { primary: '$5', primarySuffix: '/mo' },
+    src: '/img/hermes-2.png',
+    tint: '#99bbdd'
+  },
+  {
+    bullets: [
+      '300+ models',
+      'Hosted tool usage',
+      '$20 monthly credits',
+      '$40 rollover cap'
+    ],
+    label: 'Angel',
+    price: { primary: '$20', primarySuffix: '/mo' },
+    src: '/img/hermes-3.jpg',
+    tint: '#ccaa88'
+  },
+  {
+    bullets: [
+      '300+ models',
+      'Hosted tool usage',
+      '$50 monthly credits',
+      '$100 rollover cap'
+    ],
+    label: 'Herald',
+    price: { primary: '$50', primarySuffix: '/mo' },
+    src: '/img/hermes-4.png',
+    tint: '#dd8899'
+  },
+  {
+    bullets: [
+      '300+ models',
+      'Hosted tool usage',
+      '$150 monthly credits',
+      '$300 rollover cap'
+    ],
+    label: 'Muse',
+    price: { primary: '$200', primarySuffix: '/mo' },
+    src: '/img/hermes-1.png',
+    tint: '#ccaa88'
+  }
+] as const
+
+const HIGHEST_OVERLAY = {
+  overlay: 'rgba(180, 30, 20, 1)',
+  tint: '#ff4444',
+  tintStrength: { active: 0.55, inactive: 0.35 }
+}
+
+const meta = {
+  args: {
+    bullets: [...TIERS[2].bullets],
+    image: TIERS[2].src,
+    price: TIERS[2].price,
+    tint: TIERS[2].tint,
+    title: TIERS[2].label
+  },
+  argTypes: {
+    badge: { control: 'text' },
+    bullets: { control: 'object' },
+    className: { table: { disable: true } },
+    image: { control: 'text' },
+    isCurrent: { control: 'boolean' },
+    onSelect: { action: 'select' },
+    overlay: { control: 'color' },
+    price: { control: 'object' },
+    selected: { control: 'boolean' },
+    tint: { control: 'color' },
+    tintStrength: { control: 'object' },
+    title: { control: 'text' }
+  },
+  component: TierCard,
+  decorators: [
+    (Story, context) => {
+      // Stories that provide their own layout (e.g. `Row`) opt in via the
+      // `tierCardRaw` param. Everything else gets the compact 16rem preview
+      // frame on top of the dark background lens.
+      if (context.parameters?.tierCardRaw) {
+        return <Story />
+      }
+
+      return (
+        <div
+          className="bg-background flex items-center justify-center p-8"
+          style={{ minHeight: '100dvh' }}
+        >
+          <div className="w-[22rem]">
+            <Story />
+          </div>
+        </div>
+      )
+    }
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Selectable subscription-tier card. Fully presentational: the consumer owns the data (tier schema, price formatting, imagery, tints). Toggle `selected` to see the `.arc-border` shimmer and `mix-blend-mode: plus-lighter` lift on the headline / price.'
+      }
+    },
+    layout: 'fullscreen'
+  },
+  title: 'Components/Data Display/TierCard'
+} satisfies Meta<typeof TierCard>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+/** Default resting state. Hover to preview the arc-border shimmer. */
+export const Idle: Story = {}
+
+/** Selected state — arc-border, active distortion, lifted text. */
+export const Selected: Story = {
+  args: { selected: true }
+}
+
+/** Current plan, not selected — subtle midground border hint. */
+export const Current: Story = {
+  args: { badge: '(current)', isCurrent: true }
+}
+
+/** Current plan AND selected — both treatments compose. */
+export const CurrentSelected: Story = {
+  args: { badge: '(current)', isCurrent: true, selected: true }
+}
+
+/** Highest tier red-overlay treatment. */
+export const HighestTier: Story = {
+  args: {
+    ...HIGHEST_OVERLAY,
+    bullets: [...TIERS[3].bullets],
+    image: TIERS[3].src,
+    price: { primary: '$200', primarySuffix: '/mo' },
+    selected: true,
+    title: 'Sovereign'
+  }
+}
+
+/** Struck-through comparison price (e.g. first-payment discount). */
+export const WithDiscount: Story = {
+  args: {
+    bullets: [...TIERS[2].bullets],
+    image: TIERS[2].src,
+    price: {
+      primary: '$10',
+      primarySuffix: 'first payment',
+      secondary: '$20',
+      secondarySuffix: '/mo'
+    },
+    tint: TIERS[2].tint,
+    title: TIERS[2].label
+  }
+}
+
+/**
+ * Full 5-card row approximating the live manage-subscription page, with
+ * the highest tier carrying the red overlay. Click any card to toggle
+ * selection — mirrors the interaction model in the consumer app.
+ */
+export const Row: StoryObj = {
+  // Opt out of the compact single-card wrapper (see the meta decorator)
+  // and supply a full-width grid instead.
+  decorators: [
+    Story => (
+      <div
+        className="bg-background flex items-center justify-center p-10"
+        style={{ minHeight: '100dvh' }}
+      >
+        <div className="grid w-full max-w-[90rem] grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5">
+          <Story />
+        </div>
+      </div>
+    )
+  ],
+  parameters: { layout: 'fullscreen', tierCardRaw: true },
+  render: () => (
+    <>
+      {TIERS.map((tier, i) => {
+        const isHighest = i === TIERS.length - 1
+
+        return (
+          <TierCard
+            bullets={[...tier.bullets]}
+            image={tier.src}
+            key={tier.label}
+            price={tier.price}
+            selected={i === 2}
+            title={tier.label}
+            {...(isHighest ? HIGHEST_OVERLAY : { tint: tier.tint })}
+          />
+        )
+      })}
+    </>
+  )
+}

package/src/ui/components/tier-card.tsx

@@ -0,0 +1,190 @@
+'use client'
+
+import { cn } from '../../utils'
+
+import { ImageDistortion } from './image-distortion'
+import { Typography } from './typography'
+import { Small } from './typography/small'
+
+/**
+ * Selectable tier / pricing card. Full-bleed distorted image background,
+ * readable overlay text, and an animated `.arc-border` shimmer on the
+ * selected state. Fully presentational — the consumer owns the data
+ * (tier schema, price formatting, tier imagery / tints).
+ *
+ * Visual states:
+ * - `selected`: brightens the distortion, activates `.arc-border`, and
+ *   composites the headline / price with `mix-blend-mode: plus-lighter`
+ *   so the text lifts off the image regardless of tint.
+ * - `isCurrent`: subtle midground-tinted border hint (suppressed when
+ *   `selected` wins).
+ * - `overlay`: optional top-layer color blended with `mix-blend-mode:
+ *   color` — used for the "highest tier" red treatment on top of any
+ *   base tint.
+ */
+export function TierCard({
+  badge,
+  bullets,
+  className,
+  image,
+  isCurrent = false,
+  onSelect,
+  overlay,
+  price,
+  selected = false,
+  tint,
+  tintStrength,
+  title
+}: TierCardProps) {
+  return (
+    <button
+      className={cn(
+        'group relative flex w-full cursor-pointer flex-col border border-current/20',
+        'text-left transition-colors duration-300',
+        selected && 'border-midground/60',
+        isCurrent && !selected && 'border-midground/30',
+        className
+      )}
+      onClick={onSelect}
+      type="button"
+    >
+      <span
+        aria-hidden
+        className={cn(
+          'arc-border transition-opacity duration-200',
+          selected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
+        )}
+      />
+
+      <div
+        className="relative aspect-[3/4] min-h-0 w-full flex-1 overflow-hidden"
+        style={{ backgroundColor: 'var(--background)' }}
+      >
+        <ImageDistortion
+          active={selected}
+          src={image}
+          tint={tint}
+          tintStrength={tintStrength}
+        />
+
+        {overlay && (
+          <div
+            className="pointer-events-none absolute inset-0"
+            style={{ backgroundColor: overlay, mixBlendMode: 'color' }}
+          />
+        )}
+
+        <div className="pointer-events-none absolute inset-0 z-[1] flex flex-col justify-between p-3">
+          <div className="flex flex-col gap-0.5">
+            <Typography variant="sm" 
+              className={cn(
+                'block drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)] text-[1.2rem]',
+                'transition-colors',
+                selected && 'text-midground'
+              )}
+              style={selected ? { mixBlendMode: 'plus-lighter' } : undefined}
+            >
+              {title}
+              {badge && <span className="ml-1 opacity-50">{badge}</span>}
+            </Typography>
+
+            {price.secondary ? (
+              <>
+                <Typography
+                  className="block text-md line-through opacity-50 drop-shadow-[0_1px_3px_rgba(0,0,0,0.6)]"
+                  expanded
+                  style={{ mixBlendMode: 'plus-lighter' }}
+                >
+                  {price.secondary}
+                  {price.secondarySuffix && (
+                    <span className="text-[1rem]">
+                      {price.secondarySuffix}
+                    </span>
+                  )}
+                </Typography>
+
+                <Typography
+                  className="block text-xl font-bold drop-shadow-[0_1px_3px_rgba(0,0,0,0.6)]"
+                  expanded
+                  style={{ mixBlendMode: 'plus-lighter' }}
+                >
+                  {price.primary}
+                  {price.primarySuffix && (
+                    <span className="text-[1rem] opacity-60">
+                      {' '}
+                      {price.primarySuffix}
+                    </span>
+                  )}
+                </Typography>
+              </>
+            ) : (
+              <Typography
+                className="block text-xl font-bold drop-shadow-[0_1px_3px_rgba(0,0,0,0.6)]"
+                expanded
+                style={{ mixBlendMode: 'plus-lighter' }}
+              >
+                {price.primary}
+                {price.primarySuffix && (
+                  <span className="text-[1rem] opacity-60">
+                    {price.primarySuffix}
+                  </span>
+                )}
+              </Typography>
+            )}
+          </div>
+
+          {bullets.length > 0 && (
+            <ul className="flex flex-col gap-1">
+              {bullets.map((bullet, i) => (
+                <li
+                  className={cn(
+                    'font-courier text-display text-[1rem] leading-tight tracking-tight',
+                    'drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)]',
+                  )}
+                  key={typeof bullet === 'string' ? bullet : i}
+                >
+                  · {bullet}
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </div>
+    </button>
+  )
+}
+
+export interface TierCardPrice {
+  /** Headline price, e.g. `"$20"` or `"Free"`. */
+  primary: string
+  /** Small suffix rendered after `primary`, e.g. `"/mo"` or `"first payment"`. */
+  primarySuffix?: string
+  /** Optional struck-through comparison price rendered above `primary`, e.g. `"$30"`. */
+  secondary?: string
+  /** Small suffix rendered after `secondary`. */
+  secondarySuffix?: string
+}
+
+export interface TierCardProps {
+  /** Small annotation after the title, e.g. `"(current)"`. */
+  badge?: React.ReactNode
+  /** Feature list rendered under the price. */
+  bullets: React.ReactNode[]
+  className?: string
+  /** Background image URL. */
+  image: string
+  /** Applies the "current plan" border hint when not `selected`. */
+  isCurrent?: boolean
+  onSelect?: () => void
+  /** Color blended with `mix-blend-mode: color` over the image (used for the highest-tier red treatment). */
+  overlay?: string
+  price: TierCardPrice
+  /** Applies selected chrome (arc-border shimmer, active distortion, plus-lighter text blend). */
+  selected?: boolean
+  /** Shader tint passed through to `ImageDistortion`. */
+  tint?: string
+  /** Active / inactive tint strength passed through to `ImageDistortion`. */
+  tintStrength?: { active: number; inactive: number }
+  /** Tier name / headline. */
+  title: React.ReactNode
+}

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

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { useToast } from '../../hooks/use-toast'
+import { Button } from './button'
+import { Toast } from './toast'
+
+const meta: Meta<typeof Toast> = {
+  component: Toast,
+  title: 'Components/Feedback/Toast'
+}
+
+export default meta
+
+type Story = StoryObj<typeof Toast>
+
+export const Success: Story = {
+  render: () => {
+    function Demo() {
+      const { showToast, toast } = useToast()
+
+      return (
+        <>
+          <Button onClick={() => showToast('Operation succeeded', 'success')}>
+            Show success toast
+          </Button>
+          <Toast toast={toast} />
+        </>
+      )
+    }
+
+    return <Demo />
+  }
+}
+
+export const Error: Story = {
+  render: () => {
+    function Demo() {
+      const { showToast, toast } = useToast()
+
+      return (
+        <>
+          <Button
+            destructive
+            onClick={() => showToast('Something went wrong', 'error')}
+          >
+            Show error toast
+          </Button>
+          <Toast toast={toast} />
+        </>
+      )
+    }
+
+    return <Demo />
+  }
+}

package/src/ui/components/toast.tsx

@@ -0,0 +1,49 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { createPortal } from 'react-dom'
+
+import { cn } from '../../utils'
+
+export function Toast({ toast }: ToastProps) {
+  const [visible, setVisible] = useState(false)
+  const [current, setCurrent] = useState(toast)
+
+  useEffect(() => {
+    if (toast) {
+      setCurrent(toast)
+      setVisible(true)
+    } else {
+      setVisible(false)
+      const timer = setTimeout(() => setCurrent(null), 200)
+      return () => clearTimeout(timer)
+    }
+  }, [toast])
+
+  if (!current || typeof document === 'undefined') return null
+
+  return createPortal(
+    <div
+      aria-live="polite"
+      className={cn(
+        'fixed top-16 right-4 z-50 border px-4 py-2.5 font-courier text-xs tracking-wider uppercase backdrop-blur-sm',
+        current.type === 'success'
+          ? 'bg-success/15 text-success border-success/30'
+          : 'bg-destructive/15 text-destructive border-destructive/30'
+      )}
+      role="status"
+      style={{
+        animation: visible
+          ? 'toast-in 200ms ease-out forwards'
+          : 'toast-out 200ms ease-in forwards'
+      }}
+    >
+      {current.message}
+    </div>,
+    document.body
+  )
+}
+
+interface ToastProps {
+  toast: { message: string; type: 'error' | 'success' } | null
+}

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

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Suspense } from 'react'
+
+import { TV } from './tv'
+
+const meta = {
+  component: TV,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Animated WebGL brush inside an SVG television frame. Renders a fragment shader, so it only makes sense on the client.'
+      }
+    }
+  },
+  title: 'Components/Effects/TV'
+} satisfies Meta<typeof TV>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => (
+    <Suspense>
+      <TV className="h-64 w-64" />
+    </Suspense>
+  )
+}
+
+export const Large: Story = {
+  render: () => (
+    <Suspense>
+      <TV className="h-[28rem] w-[28rem]" />
+    </Suspense>
+  )
+}