import { cva } from 'class-variance-authority'
import type { ReactNode } from 'react'

/** Layout primitives exist so a screen never writes `display:flex` itself.
 * Without them the first screen that needs a gap reaches for an inline style,
 * and spacing silently escapes the design system. */

type Gap = 1 | 2 | 3 | 4 | 5 | 6

/* The --gap indirection is kept from the original: children may not read it,
 * but emitting the same custom property keeps the computed-style contract
 * byte-identical, and it remains the single knob a wrapper can retune. */
const gapVariant = {
  1: '[--gap:var(--s1)] gap-[var(--gap,var(--s4))]',
  2: '[--gap:var(--s2)] gap-[var(--gap,var(--s4))]',
  3: '[--gap:var(--s3)] gap-[var(--gap,var(--s4))]',
  4: '[--gap:var(--s4)] gap-[var(--gap,var(--s4))]',
  5: '[--gap:var(--s5)] gap-[var(--gap,var(--s4))]',
  6: '[--gap:var(--s6)] gap-[var(--gap,var(--s4))]',
} as const

/* min-width: 0 on BOTH layout primitives, everywhere.
 *
 * A flex item defaults to `min-width: auto` — "never shrink below my content" —
 * and that default cascades: `<Text truncate>` can only ellipsis if EVERY
 * ancestor between it and the sized container is allowed to shrink. One Stack
 * without this and a long title (some run 200 characters of Persian)
 * drags the whole row wider than the dialog, producing a horizontal scrollbar
 * and pushing content off-screen.
 *
 * Set on the primitives rather than at call sites, because "remember min-width:0
 * on every wrapper" is exactly the kind of rule that gets forgotten once and
 * then looks like a mysterious layout bug. */

const stack = cva('pouf-stack flex flex-col min-w-0', {
  variants: { gap: gapVariant },
  defaultVariants: { gap: 4 },
})

interface StackProps {
  children: ReactNode
  gap?: Gap
}

export function Stack({ children, gap }: StackProps) {
  return <div className={stack({ gap })}>{children}</div>
}

const row = cva('pouf-row flex flex-row min-w-0', {
  variants: {
    gap: gapVariant,
    align: { center: 'items-center', top: 'items-start' },
    justify: { start: '', center: 'justify-center', between: 'justify-between', end: 'justify-end' },
    wrap: { true: 'flex-wrap', false: 'flex-nowrap' },
  },
  defaultVariants: { gap: 4, align: 'center', justify: 'start', wrap: true },
})

interface RowProps {
  children: ReactNode
  gap?: Gap
  align?: 'center' | 'top'
  /** `center` exists because without it a screen has no way to centre anything
   *  and reaches for an inline style — which is how the QR code ended up
   *  left-aligned in its dialog. */
  justify?: 'start' | 'center' | 'between' | 'end'
  wrap?: boolean
}

export function Row({ children, gap, align, justify, wrap }: RowProps) {
  return <div className={row({ gap, align, justify, wrap })}>{children}</div>
}

export function Spacer() {
  return <div className="pouf-spacer flex-auto min-w-0" />
}

/* Column counts are variants, not a --cols override, so a screen never needs an
 * inline style to lay out. Every variant collapses to one column under 900px. */
const grid = cva('pouf-grid grid', {
  variants: {
    cols: {
      2: 'grid-cols-2 max-[900px]:grid-cols-1',
      3: 'grid-cols-3 max-[900px]:grid-cols-1',
      4: 'grid-cols-4 max-[900px]:grid-cols-1',
      sidebar:
        '[grid-template-columns:minmax(0,2fr)_minmax(0,1fr)] max-[900px]:[grid-template-columns:minmax(0,1fr)]',
    },
    gap: gapVariant,
  },
  defaultVariants: { cols: 2, gap: 4 },
})

interface GridProps {
  children: ReactNode
  cols?: 2 | 3 | 4 | 'sidebar'
  gap?: Gap
}

export function Grid({ children, cols, gap }: GridProps) {
  return <div className={grid({ cols, gap })}>{children}</div>
}

export function Shell({ children }: { children: ReactNode }) {
  return (
    <div
      className={[
        'pouf-shell grid [grid-template-columns:260px_minmax(0,1fr)] gap-(--s6) p-(--s8) max-w-[1440px] mx-auto [align-items:start]',
        /* Below 900px: single column, tighter padding, and clearance for the
         * fixed bottom bar plus the home-indicator inset on iOS. */
        'max-[900px]:[grid-template-columns:minmax(0,1fr)] max-[900px]:p-(--s4)',
        'max-[900px]:pb-[calc(96px+env(safe-area-inset-bottom,0px))]',
      ].join(' ')}
    >
      {children}
    </div>
  )
}

export function Sidebar({
  children,
  mobile = 'show',
}: {
  children: ReactNode
  /** Hide desktop sidebar chrome when the screen supplies BottomNav on phones. */
  mobile?: 'show' | 'hide'
}) {
  return (
    <aside
      className={[
        'pouf-sidebar sticky top-(--s8) flex flex-col gap-(--s2)',
        mobile === 'hide' ? 'max-[900px]:hidden' : 'max-[900px]:static',
      ].join(' ')}
    >
      {children}
    </aside>
  )
}

import * as RSeparator from '@radix-ui/react-separator'

export function Separator() {
  return (
    <RSeparator.Root
      className="pouf-separator border-none h-px bg-[rgba(201,168,255,0.3)] my-(--s2) mx-0"
      decorative
    />
  )
}

import * as RScroll from '@radix-ui/react-scroll-area'
import type { ReactNode } from 'react'

interface ScrollAreaProps {
  children: ReactNode
  maxHeight?: string
}

export function ScrollArea({ children, maxHeight = '400px' }: ScrollAreaProps) {
  return (
    // maxHeight lives on the VIEWPORT, not the Root: the viewport scrolls itself,
    // and a percentage height:100% against a Root that only has max-height never
    // resolves (a percentage height needs an explicit parent height), so the old
    // build just clipped and never scrolled. A max-height on the scrolling element
    // directly needs no such resolution.
    // type="auto" rather than Radix's default "hover": the bar is then present
    // whenever the content actually overflows, instead of only once a pointer is
    // already inside. With the default, a capped area reads as CONTENT THAT JUST
    // ENDS — the last line is sliced in half with nothing on screen saying it
    // scrolls, which is exactly how it looked in the gallery. Touch and
    // keyboard users never hover at all.
    <RScroll.Root className="pouf-scroll" type="auto">
      <RScroll.Viewport className="pouf-scroll__viewport" style={{ maxHeight }}>
        {children}
      </RScroll.Viewport>
      <RScroll.Scrollbar className="pouf-scroll__bar" orientation="vertical">
        <RScroll.Thumb className="pouf-scroll__thumb" />
      </RScroll.Scrollbar>
    </RScroll.Root>
  )
}

import * as RAspect from '@radix-ui/react-aspect-ratio'
import type { ReactNode } from 'react'

export function AspectRatio({ ratio = 16 / 9, children }: { ratio?: number; children: ReactNode }) {
  return (
    <div className="pouf-aspect w-full rounded-control overflow-hidden bg-bg cushion-field">
      <RAspect.Root ratio={ratio}>{children}</RAspect.Root>
    </div>
  )
}

import { cva, cx } from 'class-variance-authority'
import type { ReactNode } from 'react'
import { toneClass, type Tone } from './tone'

interface HeadingProps {
  children: ReactNode
  level?: 1 | 2 | 3
}

const heading = cva('font-black [text-wrap:balance]', {
  variants: {
    level: {
      1: 'pouf-h1 text-[48px] tracking-[-1px] leading-[1.1]',
      2: 'pouf-h2 text-[28px] tracking-[-0.5px] leading-[1.2]',
      /* h1/h2 set 1.1/1.2; without this h3 inherits the body's 1.5 and its line
         box towers over the 44px blob it commonly sits beside. */
      3: 'pouf-h3 text-[19px] tracking-[-0.2px] leading-[1.2]',
    },
  },
  defaultVariants: { level: 2 },
})

export function Heading({ children, level = 2 }: HeadingProps) {
  const Tag = `h${level}` as const
  return <Tag className={heading({ level })}>{children}</Tag>
}

/** The reference's yellow highlight-swatch behind a word. */
export function Highlight({ children, tone = 'yellow' }: { children: ReactNode; tone?: Tone }) {
  return (
    <span
      className={cx(
        'pouf-highlight inline-block px-[14px] rounded-control text-[var(--on-accent)] bg-[var(--tone,var(--yellow))]',
        '[box-shadow:inset_0_-6px_0_rgba(0,0,0,0.08)]',
        toneClass(tone),
      )}
    >
      {children}
    </span>
  )
}

/** The reference's compact uppercase section eyebrow. The muted token clears
 * AA contrast on both the page background and white surfaces. */
export function Eyebrow({ children }: { children: ReactNode }) {
  return (
    <div className="pouf-eyebrow text-[14px] tracking-[2px] uppercase font-extrabold text-muted">
      {children}
    </div>
  )
}

interface TextProps {
  children: ReactNode
  size?: 'sm' | 'md'
  muted?: boolean
  /** Tabular numerals — use for any figure in a column that must align. */
  num?: boolean
  mono?: boolean
  truncate?: boolean
}

const text = cva('pouf-text font-bold [overflow-wrap:anywhere]', {
  variants: {
    size: { md: 'text-[15px]', sm: 'text-[13px]' },
    muted: { true: 'text-muted' },
    num: { true: '[font-variant-numeric:tabular-nums] [font-feature-settings:"tnum"]' },
    mono: { true: "[font-family:ui-monospace,'SF_Mono',Menlo,monospace] [font-variant-numeric:tabular-nums]" },
    /* Truncation needs a real box. On an inline span the parent can be 120px
     * wide while the span's own visual rect remains its full 380px intrinsic
     * width, creating page overflow in documentation and real layouts. */
    truncate: { true: 'block truncate min-w-0 max-w-full' },
  },
  defaultVariants: { size: 'md' },
})

export function Text({ children, size, muted, num, mono, truncate }: TextProps) {
  return (
    // dir="auto" by default, and deliberately not opt-in.
    //
    // Almost everything an app renders is user-generated: names, titles and
    // raw message text, in whatever language the person writes. Without this,
    // a Persian or Arabic title renders with its emoji and punctuation on the
    // wrong side — visibly wrong, and easy to miss if your own test data is
    // all English.
    //
    // Safe as a blanket default: dir="auto" resolves from the first STRONG
    // character, and digits/punctuation are neutral — so "+2.41%" and "SKU-1420"
    // stay LTR. Opting in per call site would mean remembering it at every one,
    // which is how the bug comes back.
    <span dir="auto" className={text({ size, muted, num, mono, truncate })}>
      {children}
    </span>
  )
}

import { cva } from 'class-variance-authority'
import type { ReactNode } from 'react'

/* Vertical padding is biased by half the lip on every padded variant: the
 * cushion's floor inset paints INSIDE the box, so symmetric padding reads
 * bottom-heavy. Same total height, optically centred content. */
const card = cva('pouf-card bg-surface rounded-card cushion-card', {
  variants: {
    variant: {
      default: 'px-(--s7) pt-[calc(var(--s7)-var(--lip)/2)] pb-[calc(var(--s7)+var(--lip)/2)]',
      flush: 'p-0',
      tight: 'px-(--s4) pt-[calc(var(--s4)-var(--lip)/2)] pb-[calc(var(--s4)+var(--lip)/2)]',
    },
    motion: {
      none: '',
      lift:
        '[transition:transform_160ms_ease] hover:[transform:translateY(-4px)] motion-reduce:[transform:none] motion-reduce:hover:[transform:none]',
      'tilt-left':
        '[transform:rotate(-0.6deg)] [transition:transform_160ms_ease] hover:[transform:rotate(0deg)_translateY(-4px)] motion-reduce:[transform:none] motion-reduce:hover:[transform:none]',
      'tilt-right':
        '[transform:rotate(0.6deg)] [transition:transform_160ms_ease] hover:[transform:rotate(0deg)_translateY(-4px)] motion-reduce:[transform:none] motion-reduce:hover:[transform:none]',
    },
  },
  defaultVariants: { variant: 'default', motion: 'none' },
})

interface CardProps {
  children: ReactNode
  /** flush: no padding, clipped — for a card that wraps its own scroll region.
   *  tight: 16px instead of the reference's 32px, for dense panels. */
  variant?: 'default' | 'flush' | 'tight'
  /** Playful, composited hover motion for linked or featured cards. */
  motion?: 'none' | 'lift' | 'tilt-left' | 'tilt-right'
}

export function Card({ children, variant, motion }: CardProps) {
  return <div className={card({ variant, motion })}>{children}</div>
}

interface RowCardProps {
  children: ReactNode
  /** Renders a <button> when provided — keyboard-operable for free. */
  onClick?: () => void
  selected?: boolean
}

/* Interactivity and selection are cva variants rather than cascading selector
 * overrides: a selected row simply never emits the hover/active utilities, so
 * it cannot flicker back to a white cushion under the pointer. [font:inherit]
 * keeps the button voice identical to the div voice (the shorthand also
 * resets line-height to inherit, which the button base compensation set to
 * normal). */
const rowCard = cva(
  [
    'pouf-rowcard block w-full text-left [font:inherit] text-inherit border-none',
    'rounded-control px-(--s4) pt-[calc(var(--s4)-var(--lip-row)/2)] pb-[calc(var(--s4)+var(--lip-row)/2)]',
    '[transition:box-shadow_140ms_ease,transform_140ms_ease]',
  ],
  {
    variants: {
      interactive: { true: 'cursor-pointer' },
      selected: {
        /* The same words navlink--active speaks for "the active one of a set":
         * a tone fill on the whole cushion. Ink on --purple is 6.10:1. */
        true: [
          'bg-purple text-[var(--on-accent)] cushion-control',
          /* Headings and muted Text own explicit dark-mode colours, so normal
           * inheritance cannot make them readable on the selected pastel.
           * Selection owns the whole cushion and therefore its complete text
           * palette, not only the outer button's currentColor. */
          '[&_.pouf-h1]:text-[var(--on-accent)] [&_.pouf-h2]:text-[var(--on-accent)]',
          '[&_.pouf-h3]:text-[var(--on-accent)] [&_.pouf-text]:text-[var(--on-accent)]',
        ].join(' '),
        false: 'bg-surface cushion-row',
      },
    },
    compoundVariants: [
      {
        interactive: true,
        selected: false,
        className:
          'hover:cushion-row-hover hover:[transform:translateY(-1px)] active:[transform:translateY(1px)] active:cushion-control-active',
      },
    ],
    defaultVariants: { selected: false },
  },
)

/** "Every row a cushion" — one puffy surface per position / item / message.
 *
 * No tonal-edge prop. It was tried as a border and as an inset bar and read as
 * an artifact against the cushion's rounded silhouette both times. Rows convey
 * their state through the Blob's tone and the Badge's text, which had to exist
 * regardless — so the prop is gone rather than left as a tempting no-op.
 */
export function RowCard({ children, onClick, selected }: RowCardProps) {
  const className = rowCard({ interactive: !!onClick, selected: !!selected })

  if (onClick) {
    return (
      <button
        type="button"
        className={className}
        onClick={onClick}
        aria-pressed={selected}
        data-selected={selected || undefined}
      >
        {children}
      </button>
    )
  }
  return <div className={className} data-selected={selected || undefined}>{children}</div>
}

import type { ReactNode } from 'react'
import { Card } from './surface'
import { Blob } from './media'
import { Text } from './text'
import type { IconLike } from './Icon'
import type { Tone } from './tone'

/** A headline figure on its own cushion.
 *
 * This existed twice, verbatim — `StatTile` in one screen and `Stat` in
 * another — and the copies had already drifted apart: one took the full Tone,
 * the other narrowed it to four. Divergent copies of one idea is the thing a
 * design system exists to stop, so it lives here now. It takes the full Tone;
 * the narrowed signature was the drift, not the intent.
 *
 * The tile leads with its own icon and tone because the block it replaced put
 * four unadorned numbers on one card, where "0", "0 / 0" and "+$0.00" all
 * carried identical weight and nothing said which one you actually came for.
 */
export function Stat({ label, value, icon, tone }: { label: string; value: string; icon: IconLike; tone: Tone }) {
  return (
    <Card variant="tight">
      <div className="pouf-stat flex items-center gap-(--s3)">
        <Blob tone={tone} size="sm" icon={icon} />
        <div className="pouf-stat__text flex flex-col gap-[2px] min-w-0">
          <span className="pouf-stat__label text-[12px] font-extrabold tracking-[1.4px] uppercase text-muted whitespace-nowrap">
            {label}
          </span>
          {/* dir="auto" for the same reason Text sets it: a value can be a
              non-Latin string (a person's name in a "top contributor" tile). */}
          <span
            className='pouf-stat__value text-[26px] font-black leading-[1.05] tracking-[-0.5px] text-ink [font-variant-numeric:tabular-nums] [font-feature-settings:"tnum"]'
            dir="auto"
          >
            {value}
          </span>
        </div>
      </div>
    </Card>
  )
}

interface MetricProps {
  label: string
  /** `null` means UNKNOWN, and renders as an em-dash — never as 0.
   *
   * This is the whole reason the component exists. The pattern it replaces was
   * hand-written at ~34 sites, each re-deriving the rule, e.g.
   * `{p.reviews > 0 ? `${pct}%` : '—'}` with the comment "A satisfaction score
   * over zero reviews is not 0% — it's unknown." Any site that forgot printed
   * "0%", which reads as "everybody hated it" — a real number, and the opposite
   * of the truth. The caller still decides *whether* a value is known; only that
   * answer needs domain knowledge. What is uniform, and therefore belongs here,
   * is how unknown looks. */
  value: ReactNode | null
  /** Tabular figures, so digits line up down a column. On by default: a metric
   *  is a number unless it isn't (a plan name, a region). */
  num?: boolean
  mono?: boolean
}

/** A labelled readout: small muted label, value beneath.
 *
 * A readout is atomic: "−$24.75" must never break after the minus, and a
 * two-line label reads as two metrics — hence nowrap; the ROW wraps whole
 * metrics instead. Inside a Row ([.pouf-row>&]) metrics divide the spare
 * width evenly (a KPI strip) but never below one-line content. */
export function Metric({ label, value, num = true, mono }: MetricProps) {
  return (
    <div className="pouf-metric flex flex-col gap-(--s1) min-w-0 whitespace-nowrap [.pouf-row>&]:flex-[1_1_0] [.pouf-row>&]:min-w-max">
      <Text size="sm" muted>
        {label}
      </Text>
      <Text num={num} mono={mono}>
        {value ?? '—'}
      </Text>
    </div>
  )
}

import { cva, cx } from 'class-variance-authority'
import type { ReactNode } from 'react'
import { toneClass, type Tone } from './tone'
import { renderIcon, type IconLike } from './Icon'

interface BlobProps {
  /** A named role (Tabler-backed, from Icon) OR any icon element from any
   *  library — lucide, phosphor, your own SVG. The named set is a convenience,
   *  not a requirement. */
  icon: IconLike
  tone?: Tone
  size?: 'sm' | 'md' | 'lg'
  /** Decorative by default — a blob beside a visible label is noise to a
   *  screen reader. Pass a label only when the icon is the sole meaning. */
  label?: string
}

/* Optically centred, not geometrically centred: the blob carries a 4px white
 * highlight on top and an 8px dark floor on the bottom. That floor reads as
 * the cushion's underside rather than its face, so the face a viewer sees is
 * the upper portion — and a mathematically perfect centre sits visibly low in
 * it. Nudging the glyph by half the difference, (8-4)/2, puts it in the middle
 * of the face people actually perceive. */
const blob = cva(
  [
    'pouf-blob inline-flex items-center justify-center flex-none text-[var(--on-accent)]',
    'bg-[var(--tone,var(--purple))] cushion-blob [&>svg]:[transform:translateY(-2px)]',
  ],
  {
    variants: {
      size: {
        sm: 'w-11 h-11 rounded-[14px] text-[20px]',
        md: 'w-[60px] h-[60px] rounded-[18px] text-[26px]',
        lg: 'w-20 h-20 rounded-blob text-[36px]',
      },
    },
    defaultVariants: { size: 'lg' },
  },
)

/** The reference's icon tile. */
export function Blob({ icon, tone = 'purple', size = 'lg', label }: BlobProps) {
  return (
    <span
      className={cx(blob({ size }), toneClass(tone))}
      role={label ? 'img' : undefined}
      aria-label={label}
      aria-hidden={label ? undefined : true}
    >
      {renderIcon(icon, size === 'sm' ? 'sm' : size === 'md' ? 'md' : 'lg')}
    </span>
  )
}

/* FLAT, deliberately. A badge is a label, not a control. It used to carry the
 * cushion recipe and so read as a small pressable pill. In a design system
 * whose entire vocabulary for "interactive" is depth, letting a static label
 * borrow that depth devalues the signal for every real button on screen.
 * flex-none + self-start: never squashed by a long neighbour, and never
 * stretched into a banner by a flex column. A badge hugs its own text. */
export function Badge({ children, tone = 'purple' }: { children: ReactNode; tone?: Tone }) {
  return (
    <span
      className={cx(
        'pouf-badge inline-flex items-center gap-[6px] text-[12px] font-black tracking-[0.4px] uppercase',
        'text-[var(--on-accent)] bg-[var(--tone,var(--purple))] rounded-pill px-3 py-[5px] [box-shadow:none]',
        'flex-none whitespace-nowrap self-start',
        toneClass(tone),
      )}
    >
      {children}
    </span>
  )
}

/** A status dot. Always pair with text — colour alone can't carry state. */
export function Dot({ tone = 'purple' }: { tone?: Tone }) {
  return (
    <span
      className={cx(
        'pouf-dot w-[9px] h-[9px] rounded-[50%] bg-[var(--tone,var(--purple))]',
        '[box-shadow:inset_0_-2px_0_rgba(0,0,0,0.15)] flex-none',
        toneClass(tone),
      )}
      aria-hidden="true"
    />
  )
}

/** An image, framed in clay.
 *
 * `alt` is required with no default: these render user-supplied screenshots,
 * and an unlabelled image is exactly the case alt text exists for.
 * Lazy by default — a gallery can be dozens of photos. */
export function Figure({ src, alt, width, height }: { src: string; alt: string; width: number; height: number }) {
  return (
    <img
      className="pouf-figure block max-w-[420px] w-full h-auto rounded-control bg-bg cushion-field"
      src={src}
      alt={alt}
      width={width}
      height={height}
      loading="lazy"
    />
  )
}

import * as RAvatar from '@radix-ui/react-avatar'
import { cva, cx } from 'class-variance-authority'
import { toneClass, type Tone } from './tone'
import { renderIcon, type IconLike } from './Icon'

interface AvatarProps {
  src?: string
  alt?: string
  fallback?: string
  icon?: IconLike
  tone?: Tone
  size?: 'sm' | 'md' | 'lg'
}

/* The root carries the cast shadow: overflow:hidden clips a CHILD's shadow
 * (the old build put the whole blob recipe on the fallback and lost the drop),
 * but never the element's own. Inner highlight/floor live on the fallback
 * face; a photo supplies its own light, so an image avatar keeps just the
 * drop. */
const avatar = cva(
  'pouf-avatar inline-flex items-center justify-center overflow-hidden flex-none bg-bg [box-shadow:0_10px_20px_rgba(58,46,92,0.15)]',
  {
    variants: {
      size: {
        sm: 'w-8 h-8 rounded-[14px]',
        md: 'w-12 h-12 rounded-blob',
        lg: 'w-[72px] h-[72px] rounded-blob',
      },
    },
    defaultVariants: { size: 'md' },
  },
)

/* SOFT, blurred insets — not the hard 0-blur bands the Blob uses. On a circle,
 * overflow:hidden clips a hard `inset 0 -6px 0` band into a crescent that
 * reads as a second, clipped disc. A blurred inset instead shades the sphere
 * smoothly: light gathered at the top, a soft floor at the bottom, no hard
 * edge to clip. Initials scale with the face — 15px letters were rattling
 * around the 72px avatar and crowding the 32px one. */
const fallback = cva(
  [
    'pouf-avatar__fallback w-full h-full flex items-center justify-center font-black text-[var(--on-accent)]',
    'bg-[var(--tone,var(--purple))]',
    '[box-shadow:inset_0_4px_8px_rgba(255,255,255,0.5),inset_0_-7px_11px_rgba(0,0,0,0.06)]',
  ],
  {
    variants: {
      size: { sm: 'text-[12px]', md: 'text-[15px]', lg: 'text-[22px]' },
    },
    defaultVariants: { size: 'md' },
  },
)

export function Avatar({ src, alt, fallback: fallbackText, icon, tone = 'purple', size = 'md' }: AvatarProps) {
  return (
    <RAvatar.Root className={avatar({ size })}>
      {src && <RAvatar.Image className="pouf-avatar__img w-full h-full object-cover" src={src} alt={alt ?? ''} />}
      <RAvatar.Fallback className={cx(fallback({ size }), toneClass(tone))}>
        {icon ? renderIcon(icon, size === 'lg' ? 'md' : 'sm') : fallbackText?.slice(0, 2).toUpperCase()}
      </RAvatar.Fallback>
    </RAvatar.Root>
  )
}

import { cva, cx } from 'class-variance-authority'
import {
  forwardRef,
  type ButtonHTMLAttributes,
  type MouseEventHandler,
  type ReactNode,
} from 'react'
import { toneClass, type Tone } from './tone'

interface ButtonProps
  extends Omit<
    ButtonHTMLAttributes<HTMLButtonElement>,
    'children' | 'className' | 'style' | 'onClick' | 'type' | 'disabled'
  > {
  children: ReactNode
  onClick?: MouseEventHandler<HTMLButtonElement>
  tone?: Tone
  size?: 'sm' | 'md' | 'lg'
  /** quiet: no cushion until hover — for tertiary actions that shouldn't
   *  compete with the primary cushion on the same row. */
  variant?: 'solid' | 'quiet'
  block?: boolean
  disabled?: boolean
  /** Shows a spinner and blocks the click. A submit that fires twice because
   *  it looked idle is a real double-write, so pending state is not
   *  decoration here — it's a safety property. */
  loading?: boolean
  type?: 'button' | 'submit'
  /** Required when the label alone isn't descriptive (icon-only buttons). */
  label?: string
}

/* 'pouf-btn' rides along as an unstyled MARKER class: it carries no rules of
 * its own anymore, but container selectors (e.g. the dialog head's
 * `> .pouf-btn` spacing override) still address buttons through it.
 *
 * Same-property utilities don't cascade like the old selectors did, so
 * solid/quiet each own their background and shadow outright. A disabled
 * cushion must read as pressed-flat, not merely faded: the affordance is the
 * depth, so removing the depth is the real signal — solid goes pressed,
 * quiet (already flat) goes bare. */
const button = cva(
  [
    'pouf-btn relative items-center justify-center gap-(--s2) font-pouf font-black leading-none',
    /* Colour lives on the variants, not here: `solid` sits on a pastel accent
     * and must follow --on-accent (which stays dark in dark mode), while
     * `quiet` is transparent on the page and follows --ink. In light mode both
     * resolve to the same value, so this is a no-op for the goldens. */
    'border-none cursor-pointer [touch-action:manipulation]',
    '[transition:box-shadow_120ms_ease,transform_120ms_ease]',
    'enabled:active:[transform:translateY(2px)] enabled:active:cushion-control-active',
    'disabled:cursor-not-allowed disabled:opacity-50',
  ],
  {
    variants: {
      size: {
        /* Centre labels in the complete cushion silhouette. The old 6px
         * top/bottom bias placed type visibly high once the floor lip and
         * drop-shadow were read as part of the control. */
        sm: 'text-[13px] px-4 py-[9px] min-h-[38px] rounded-[14px]',
        md: 'text-[15px] px-[26px] py-[14px] min-h-12 rounded-control',
        lg: 'text-[17px] px-8 py-[18px] min-h-14 rounded-control',
      },
      variant: {
        solid:
          'text-[var(--on-accent)] bg-[var(--tone,var(--purple))] cushion-control disabled:cushion-control-active disabled:[transform:translateY(2px)]',
        quiet:
          'text-[var(--quiet-ink,var(--ink))] bg-transparent [box-shadow:inset_0_0_0_2px_rgba(201,168,255,0.55)] enabled:hover:bg-bg enabled:hover:text-ink enabled:hover:cushion-field disabled:[box-shadow:none]',
      },
      block: {
        true: 'flex w-full',
        false: 'inline-flex',
      },
      shape: {
        label: '',
        icon: '',
      },
    },
    compoundVariants: [
      { size: 'sm', shape: 'icon', className: 'w-[38px] px-0' },
      { size: 'md', shape: 'icon', className: 'w-12 px-0' },
      { size: 'lg', shape: 'icon', className: 'w-14 px-0' },
    ],
    defaultVariants: { size: 'md', variant: 'solid', block: false, shape: 'label' },
  },
)

/** The button look as a class string, exported because Segmented, Tabs,
 *  ToggleGroup, and BottomNav's menu compose literal buttons — sharing the
 *  builder means a toggle can never drift from the button it imitates. */
export function buttonClasses(
  opts: {
    tone?: Tone
    size?: 'sm' | 'md' | 'lg'
    variant?: 'solid' | 'quiet'
    block?: boolean
    shape?: 'label' | 'icon'
  } = {},
): string {
  const { tone = 'purple', size, variant, block, shape } = opts
  return cx(button({ size, variant, block, shape }), toneClass(tone))
}

function LoadingSpinner() {
  return (
    <span
      className="size-[15px] rounded-[50%] border-[3px] border-solid border-[color-mix(in_srgb,currentColor_24%,transparent)] border-t-current [animation:pouf-spin_620ms_linear_infinite]"
      aria-hidden="true"
    />
  )
}

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
  {
    children,
    onClick,
    tone = 'purple',
    size = 'md',
    variant = 'solid',
    block,
    disabled,
    loading,
    type = 'button',
    label,
    ...nativeProps
  },
  ref,
) {
  return (
    <button
      ref={ref}
      {...nativeProps}
      type={type}
      className={buttonClasses({ tone, size, variant, block })}
      onClick={onClick}
      disabled={disabled || loading}
      aria-busy={loading || undefined}
      aria-label={label}
    >
      {loading && <LoadingSpinner />}
      {children}
    </button>
  )
})

interface IconButtonProps
  extends Omit<
    ButtonHTMLAttributes<HTMLButtonElement>,
    'children' | 'className' | 'style' | 'onClick' | 'type' | 'disabled' | 'aria-label'
  > {
  icon: ReactNode
  /** Icon-only actions must always expose their meaning to assistive tech. */
  label: string
  onClick?: MouseEventHandler<HTMLButtonElement>
  tone?: Tone
  size?: 'sm' | 'md' | 'lg'
  variant?: 'solid' | 'quiet'
  disabled?: boolean
  loading?: boolean
  type?: 'button' | 'submit'
}

/** A square, labelled icon action. The required `label` prevents the common
 * accessible-name omission, while the shape stays aligned with Button sizes. */
export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(
  {
    icon,
    label,
    onClick,
    tone = 'purple',
    size = 'md',
    variant = 'quiet',
    disabled,
    loading,
    type = 'button',
    ...nativeProps
  },
  ref,
) {
  return (
    <button
      ref={ref}
      {...nativeProps}
      type={type}
      className={buttonClasses({ tone, size, variant, shape: 'icon' })}
      onClick={onClick}
      disabled={disabled || loading}
      aria-busy={loading || undefined}
      aria-label={label}
      title={nativeProps.title ?? label}
    >
      {loading ? <LoadingSpinner /> : <span aria-hidden="true">{icon}</span>}
    </button>
  )
})

import { cva } from 'class-variance-authority'
import {
  forwardRef,
  useId,
  type InputHTMLAttributes,
  type ReactNode,
  type TextareaHTMLAttributes,
} from 'react'

interface FieldProps {
  label: string
  children: (id: string, describedBy: string | undefined) => ReactNode
  hint?: string
  error?: string
}

/** Wraps any control with a real <label for>, hint and error text, and wires
 * aria-describedby. Screens pass a render fn so the same wrapper serves Input,
 * Select and Switch without duplicating the a11y plumbing. */
export function Field({ label, children, hint, error }: FieldProps) {
  const id = useId()
  const describedBy = error ? `${id}-err` : hint ? `${id}-hint` : undefined
  return (
    <div className="pouf-field flex flex-col gap-(--s2)">
      {/* Labels use ink so their compact uppercase treatment stays emphatic. */}
      <label className="pouf-label text-[13px] font-black tracking-[0.6px] uppercase text-ink" htmlFor={id}>
        {label}
      </label>
      {children(id, describedBy)}
      {hint && !error && (
        <span className="pouf-hint text-[13px] font-bold text-muted" id={`${id}-hint`}>
          {hint}
        </span>
      )}
      {/* FIELD-level validation message: a compact one-liner under a control.
        * NOT the page alert cushion (ErrorNote) — this one must stay quiet, so
        * it keeps the flat little pill it always was. self-start: hug the
        * message rather than stretch to fill a flex/grid cell. */}
      {error && (
        <span
          className="pouf-error text-[13px] font-extrabold text-[var(--on-accent)] bg-orange rounded-xl py-(--s2) px-(--s3) [align-self:start] max-w-full"
          id={`${id}-err`}
          role="alert"
        >
          {error}
        </span>
      )}
    </div>
  )
}

/* One cva for every input voice in the system, exported because the Select and
 * Combobox triggers (and Combobox's search input) wear the same field chrome.
 * `bare` is the NumberInput-capsule voice: the capsule carries the chrome, so
 * the input inside goes transparent and shadowless, and even its disabled fade
 * is suppressed (the capsule already fades; double-fading blurs the value).
 * Shadow ownership is per-variant because same-property utilities don't
 * cascade; a focused invalid input shows the focus ring (pseudo specificity),
 * matching the original selector order. */
export const inputClasses = cva(
  'pouf-input font-bold text-[15px] text-ink border-none rounded-control w-full placeholder:text-muted',
  {
    variants: {
      bare: {
        false: 'bg-bg px-5 pt-[14px] pb-[18px] min-h-[52px] focus:outline-none focus-visible:outline-none disabled:opacity-55 disabled:cursor-not-allowed',
        true: 'bg-transparent flex-1 min-w-0 min-h-0 text-center px-0 pt-[6px] pb-[10px] [box-shadow:none] focus:[box-shadow:none] focus:outline-none focus-visible:outline-none disabled:opacity-100 disabled:cursor-not-allowed',
      },
      invalid: { true: '', false: '' },
      /* mono OWNS font-family — a base font-pouf would fight it (same-property
       * utilities don't cascade; stylesheet order is not the cascade). */
      mono: {
        true: "[font-family:ui-monospace,'SF_Mono',Menlo,monospace] [font-variant-numeric:tabular-nums]",
        false: 'font-pouf',
      },
    },
    compoundVariants: [
      { bare: false, invalid: false, className: 'cushion-field focus:[box-shadow:var(--pouf-field-focus)]' },
      {
        bare: false,
        invalid: true,
        className:
          '[box-shadow:var(--pouf-field),inset_0_0_0_3px_var(--orange)] focus:[box-shadow:var(--pouf-field-focus)]',
      },
    ],
    defaultVariants: { bare: false, invalid: false, mono: false },
  },
)

interface InputProps
  extends Omit<
    InputHTMLAttributes<HTMLInputElement>,
    'children' | 'className' | 'style' | 'value' | 'onChange'
  > {
  value: string
  onChange: (value: string) => void
  onBlur?: InputHTMLAttributes<HTMLInputElement>['onBlur']
  id?: string
  name?: string
  describedBy?: string
  placeholder?: string
  type?: InputHTMLAttributes<HTMLInputElement>['type']
  autoComplete?: string
  inputMode?: InputHTMLAttributes<HTMLInputElement>['inputMode']
  autoCapitalize?: string
  spellCheck?: boolean
  required?: boolean
  mono?: boolean
  invalid?: boolean
  disabled?: boolean
  label?: string
  /** Internal: the NumberInput capsule carries the chrome. */
  bare?: boolean
}

export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
  {
    value,
    onChange,
    describedBy,
    type = 'text',
    mono,
    invalid,
    label,
    bare,
    ...nativeProps
  },
  ref,
) {
  return (
    <input
      ref={ref}
      {...nativeProps}
      className={inputClasses({ bare: !!bare, invalid: !!invalid, mono })}
      value={value}
      onChange={(e) => onChange(e.target.value)}
      type={type}
      aria-invalid={invalid || undefined}
      aria-describedby={describedBy}
      aria-label={label}
    />
  )
})

/* ------------------------------------------------------------------ */
/* Textarea                                                            */
/* ------------------------------------------------------------------ */

interface TextareaProps
  extends Omit<
    TextareaHTMLAttributes<HTMLTextAreaElement>,
    'children' | 'className' | 'style' | 'value' | 'onChange'
  > {
  value: string
  onChange: (value: string) => void
  onBlur?: TextareaHTMLAttributes<HTMLTextAreaElement>['onBlur']
  id?: string
  name?: string
  describedBy?: string
  placeholder?: string
  autoComplete?: string
  spellCheck?: boolean
  required?: boolean
  rows?: number
  mono?: boolean
  invalid?: boolean
  disabled?: boolean
  label?: string
}

export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(
  {
    value,
    onChange,
    describedBy,
    rows = 4,
    mono,
    invalid,
    label,
    ...nativeProps
  },
  ref,
) {
  return (
    <textarea
      ref={ref}
      {...nativeProps}
      className={`${inputClasses({ invalid: !!invalid, mono })} pouf-textarea resize-y min-h-[100px]`}
      value={value}
      onChange={(e) => onChange(e.target.value)}
      rows={rows}
      aria-invalid={invalid || undefined}
      aria-describedby={describedBy}
      aria-label={label}
    />
  )
})

import { cva } from 'class-variance-authority'
import { inputClasses } from './Input'
import { useEffect, useRef, type KeyboardEvent, type PointerEvent } from 'react'
import { Icon } from './Icon'
import { normalizeOnBlur, sanitizeNumeric, stepValue } from './numberinput-math'

interface NumberInputProps {
  value: string
  onChange: (value: string) => void
  step?: number
  min?: number
  max?: number
  id?: string
  describedBy?: string
  placeholder?: string
  invalid?: boolean
  disabled?: boolean
  label?: string
}

/** A spinbutton composite replacing <input type="number">: the native spinner
 * can only be hidden, never restyled, and its arrows are sub-touch-size.
 * Deliberately NOT role="spinbutton" — that role on a text input is unreliable
 * across screen readers (react-aria's documented finding), so this stays a
 * plain labelled textbox and the stepping lives in two labelled buttons.
 *
 * The buttons are tabIndex={-1}, like the native spinner's arrows: keyboard
 * users already have ArrowUp/Down, PageUp/Down (±10×step) and Home/End on the
 * field itself, so tabbing through them would be two stops of pure noise. */
/* The capsule carries the field chrome; the input inside goes bare and the
 * focus ring moves up here (focus-within) to wrap the whole control, steppers
 * included. Invalid outranks focus-within, matching the original :has() rule's
 * higher specificity. The capsule fades for disabled; the bare input suppresses
 * its own fade so the value doesn't double-blur. */
const capsule = cva('pouf-numberinput flex items-center gap-1 h-14 px-2 py-0 rounded-pill bg-bg', {
  variants: {
    invalid: {
      false: 'cushion-field focus-within:[box-shadow:var(--pouf-field-focus)]',
      true: '[box-shadow:var(--pouf-field),inset_0_0_0_3px_var(--orange)]',
    },
    disabled: { true: 'opacity-55' },
  },
  defaultVariants: { invalid: false },
})

/* A scaled-down control cushion: full --pouf-control's 16px drop would bleed
 * past the capsule and read as smudge, not lift. The mini's 5px floor lip
 * paints inside the box, so a geometrically centred icon reads low — same
 * optical trick as the blob's glyph. touch-action: rapid taps must step, not
 * double-tap-zoom. */
const stepper = [
  'pouf-numberinput__btn flex-none inline-flex items-center justify-center w-10 h-10 p-0 border-none',
  'rounded-pill bg-purple text-[var(--on-accent)] cursor-pointer',
  '[box-shadow:inset_0_-5px_0_rgba(0,0,0,0.12),inset_0_3px_0_rgba(255,255,255,0.4),0_3px_6px_rgba(58,46,92,0.18)]',
  '[transition:box-shadow_120ms_ease,transform_120ms_ease] [touch-action:manipulation] select-none',
  '[&_svg]:[transform:translateY(-1px)]',
  'enabled:active:[transform:translateY(1px)] enabled:active:cushion-control-active',
  'disabled:cursor-not-allowed disabled:opacity-50 disabled:cushion-control-active disabled:[transform:translateY(1px)]',
].join(' ')


export function NumberInput({
  value,
  onChange,
  step = 1,
  min,
  max,
  id,
  describedBy,
  placeholder,
  invalid,
  disabled,
  label,
}: NumberInputProps) {
  // Hold-to-repeat reads through a ref: the timer callback outlives the render
  // that armed it, and stepping from a stale value would rubber-band.
  const latest = useRef({ value, step, min, max, onChange })
  latest.current = { value, step, min, max, onChange }
  const timer = useRef<ReturnType<typeof setTimeout> | null>(null)

  const stop = () => {
    if (timer.current !== null) {
      clearTimeout(timer.current)
      timer.current = null
    }
  }
  useEffect(() => stop, [])

  const fire = (dir: 1 | -1) => {
    const { value, step, min, max, onChange } = latest.current
    const next = stepValue(value, dir, { step, min, max })
    // Parked at a bound: stop the repeat rather than tick forever. Once the
    // button disables at the bound it swallows pointer events, so the
    // pointerup that would normally clear this timer never arrives.
    if (next === value) {
      stop()
      return
    }
    onChange(next)
  }

  const press = (dir: 1 | -1) => (e: PointerEvent<HTMLButtonElement>) => {
    // Native spinners never move focus; preventDefault keeps it that way and
    // suppresses long-press selection on touch.
    e.preventDefault()
    fire(dir)
    const tick = () => {
      fire(dir)
      timer.current = setTimeout(tick, 60)
    }
    timer.current = setTimeout(tick, 400)
  }

  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
    const apply = (dir: 1 | -1, mult = 1) => {
      e.preventDefault()
      onChange(stepValue(value, dir, { step, min, max, mult }))
    }
    if (e.key === 'ArrowUp') apply(1)
    else if (e.key === 'ArrowDown') apply(-1)
    else if (e.key === 'PageUp') apply(1, 10)
    else if (e.key === 'PageDown') apply(-1, 10)
    else if (e.key === 'Home' && min !== undefined) {
      e.preventDefault()
      onChange(String(min))
    } else if (e.key === 'End' && max !== undefined) {
      e.preventDefault()
      onChange(String(max))
    }
  }

  const parsed = Number.parseFloat(value)
  const atMin = min !== undefined && Number.isFinite(parsed) && parsed <= min
  const atMax = max !== undefined && Number.isFinite(parsed) && parsed >= max

  return (
    <div className={capsule({ invalid: !!invalid, disabled: !!disabled })}>
      <button
        type="button"
        className={stepper}
        aria-label="Decrease"
        tabIndex={-1}
        disabled={disabled || atMin}
        onPointerDown={press(-1)}
        onPointerUp={stop}
        onPointerLeave={stop}
        onPointerCancel={stop}
      >
        <Icon name="flat" />
      </button>
      <input
        id={id}
        className={inputClasses({ bare: true, mono: true, invalid: !!invalid })}
        value={value}
        onChange={(e) => onChange(sanitizeNumeric(e.target.value))}
        onBlur={() => onChange(normalizeOnBlur(value, { min, max }))}
        onKeyDown={onKeyDown}
        inputMode="decimal"
        placeholder={placeholder}
        disabled={disabled}
        aria-invalid={invalid || undefined}
        aria-describedby={describedBy}
        aria-label={label}
      />
      <button
        type="button"
        className={stepper}
        aria-label="Increase"
        tabIndex={-1}
        disabled={disabled || atMax}
        onPointerDown={press(1)}
        onPointerUp={stop}
        onPointerLeave={stop}
        onPointerCancel={stop}
      >
        <Icon name="add" />
      </button>
    </div>
  )
}