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 }: { children: ReactNode }) {
  return (
    <aside className="pouf-sidebar sticky top-(--s8) flex flex-col gap-(--s2) max-[900px]:static">
      {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', {
  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 bg-[var(--tone,var(--yellow))]',
        '[box-shadow:inset_0_-6px_0_rgba(0,0,0,0.08)]',
        toneClass(tone),
      )}
    >
      {children}
    </span>
  )
}

/** The reference's uppercase section eyebrow. Restricted to white surfaces:
 * --muted measures 3.93:1 on --bg (fails) but 4.64:1 on white (passes). */
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', {
  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]" },
    truncate: { true: 'truncate min-w-0' },
  },
  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)]',
    },
  },
  defaultVariants: { variant: 'default' },
})

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

export function Card({ children, variant }: CardProps) {
  return <div className={card({ variant })}>{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 cushion-control',
        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}>
        {children}
      </button>
    )
  }
  return <div className={className}>{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 }: { src: string; alt: string }) {
  return (
    <img
      className="pouf-figure block max-w-[420px] w-full h-auto rounded-control bg-bg cushion-field"
      src={src}
      alt={alt}
      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 type { ReactNode } from 'react'
import { toneClass, type Tone } from './tone'

interface ButtonProps {
  children: ReactNode
  onClick?: () => void
  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',
    '[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: {
        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-ink bg-transparent [box-shadow:inset_0_0_0_2px_rgba(201,168,255,0.55)] enabled:hover:bg-bg enabled:hover:cushion-field disabled:[box-shadow:none]',
      },
      block: {
        true: 'flex w-full',
        false: 'inline-flex',
      },
    },
    defaultVariants: { size: 'md', variant: 'solid', block: false },
  },
)

/** 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 } = {},
): string {
  const { tone = 'purple', size, variant, block } = opts
  return cx(button({ size, variant, block }), toneClass(tone))
}

export function Button({
  children,
  onClick,
  tone = 'purple',
  size = 'md',
  variant = 'solid',
  block,
  disabled,
  loading,
  type = 'button',
  label,
}: ButtonProps) {
  return (
    <button
      type={type}
      className={buttonClasses({ tone, size, variant, block })}
      onClick={onClick}
      disabled={disabled || loading}
      aria-busy={loading || undefined}
      aria-label={label}
    >
      {loading && (
        <span
          className="size-[15px] rounded-[50%] border-[3px] border-solid border-[rgba(58,46,92,0.25)] border-t-ink [animation:pouf-spin_620ms_linear_infinite]"
          aria-hidden="true"
        />
      )}
      {children}
    </button>
  )
}

import { cva } from 'class-variance-authority'
import { useId, type ReactNode } 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)">
      {/* --muted fails on --bg at small sizes (3.93:1); labels use ink. */}
      <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-ink 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 py-4 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 py-2 [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 {
  value: string
  onChange: (value: string) => void
  id?: string
  describedBy?: string
  placeholder?: string
  type?: 'text' | 'password'
  mono?: boolean
  invalid?: boolean
  disabled?: boolean
  label?: string
  /** Internal: the NumberInput capsule carries the chrome. */
  bare?: boolean
}

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

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

interface TextareaProps {
  value: string
  onChange: (value: string) => void
  id?: string
  describedBy?: string
  placeholder?: string
  rows?: number
  mono?: boolean
  invalid?: boolean
  disabled?: boolean
  label?: string
}

export function Textarea({
  value,
  onChange,
  id,
  describedBy,
  placeholder,
  rows = 4,
  mono,
  invalid,
  disabled,
  label,
}: TextareaProps) {
  return (
    <textarea
      id={id}
      className={`${inputClasses({ invalid: !!invalid, mono })} pouf-textarea resize-y min-h-[100px]`}
      value={value}
      onChange={(e) => onChange(e.target.value)}
      placeholder={placeholder}
      rows={rows}
      disabled={disabled}
      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-ink 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>
  )
}

import * as RCheck from '@radix-ui/react-checkbox'
import clsx from 'clsx'

interface CheckboxProps {
  checked: boolean | 'indeterminate'
  onChange: (checked: boolean | 'indeterminate') => void
  id?: string
  disabled?: boolean
  label?: string
  /** Keep `label` as the accessible name but stop rendering it visibly.
   *  For rows that already display the text themselves — without this, the
   *  only way to give the box an accessible name was to also print a second
   *  copy of the text next to it. Opt-in, so existing call sites are
   *  unchanged. */
  hideLabel?: boolean
}

export function Checkbox({ checked, onChange, id, disabled, label, hideLabel }: CheckboxProps) {
  return (
    <div className="pouf-checkbox-row inline-flex items-center gap-(--s2)">
      <RCheck.Root
        id={id}
        className={clsx([
          'pouf-checkbox w-7 h-7 rounded-[9px] border-none p-0 cursor-pointer cushion-field flex-none',
          'flex items-center justify-center',
          '[transition:background_160ms_ease,transform_160ms_cubic-bezier(0.23,1,0.32,1)]',
          'enabled:active:[transform:scale(0.92)]',
          'data-[state=checked]:bg-purple disabled:opacity-50 disabled:cursor-not-allowed',
        ],
        checked === 'indeterminate' ? 'bg-purple' : 'bg-bg')}
        // Pass the real tri-state to Radix. Passing `checked === true` collapsed
        // indeterminate to false, so Radix hid the Indicator entirely and the box
        // painted a blank purple blob with no dash. Radix renders the Indicator for
        // 'indeterminate' too, so the minus glyph below now shows.
        checked={checked === 'indeterminate' ? 'indeterminate' : checked}
        onCheckedChange={onChange}
        disabled={disabled}
        aria-label={label}
      >
        <RCheck.Indicator className={[
            'pouf-checkbox__indicator text-ink flex [&_svg]:w-5 [&_svg]:h-5',
            /* The check draws itself in. Radix mounts the indicator on check, so
             * a keyframe entry is correct; uncheck unmounts instantly. Reduced
             * motion keeps the state change legible, drops the drawing. */
            '[&_path]:[stroke-dasharray:1]',
            '[&_path]:[animation:pouf-check-draw_250ms_cubic-bezier(0.23,1,0.32,1)_both]',
            'motion-reduce:[&_path]:[animation-name:pouf-check-fade]',
          ].join(' ')}>
          {/* Inline rather than Icon: the draw-in animation needs pathLength=1
              on the stroke, which the shared icon vocabulary has no reason to
              carry. Geometry and stroke match the Tabler set (24 viewbox, 2.4
              stroke, round caps) so the glyphs read as the same hand. */}
          <svg
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth={2.4}
            strokeLinecap="round"
            strokeLinejoin="round"
            aria-hidden="true"
          >
            {checked === 'indeterminate' ? (
              <path d="M5 12h14" pathLength={1} />
            ) : (
              <path d="M5 12l5 5L20 7" pathLength={1} />
            )}
          </svg>
        </RCheck.Indicator>
      </RCheck.Root>
      {label && !hideLabel && (
        <label htmlFor={id} className="pouf-checkbox__label text-[15px] font-bold text-ink cursor-pointer">
          {label}
        </label>
      )}
    </div>
  )
}

import * as RRadio from '@radix-ui/react-radio-group'

interface RadioOption {
  value: string
  label: string
}

interface RadioGroupProps {
  value: string
  onChange: (value: string) => void
  options: RadioOption[]
  label: string
  disabled?: boolean
}

export function RadioGroup({ value, onChange, options, label, disabled }: RadioGroupProps) {
  return (
    <RRadio.Root
      className="pouf-radio-group flex flex-col gap-(--s2)"
      value={value}
      onValueChange={onChange}
      disabled={disabled}
      aria-label={label}
    >
      {options.map((o) => (
        <div key={o.value} className="pouf-radio-row flex items-center gap-(--s2)">
          <RRadio.Item id={`radio-${o.value}`} value={o.value} className={[
              /* Sized with the checkbox — they sit in the same forms. */
              'pouf-radio w-7 h-7 rounded-[50%] bg-bg border-none p-0 cursor-pointer cushion-field flex-none',
              'flex items-center justify-center [transition:background_160ms_ease]',
              'data-[state=checked]:bg-purple disabled:opacity-50 disabled:cursor-not-allowed',
            ].join(' ')}>
            <RRadio.Indicator className={[
                /* A white dot on the purple disc, not a dark one: an ink dot on
                 * lavender read as a pupil in a puffy eye. */
                'pouf-radio__indicator w-2.5 h-2.5 rounded-[50%] bg-surface',
                '[box-shadow:0_1px_1px_rgba(58,46,92,0.3)]',
              ].join(' ')} />
          </RRadio.Item>
          <label htmlFor={`radio-${o.value}`} className="pouf-radio__label text-[15px] font-bold text-ink cursor-pointer">
            {o.label}
          </label>
        </div>
      ))}
    </RRadio.Root>
  )
}

import * as RSlider from '@radix-ui/react-slider'

interface SliderProps {
  value: number[]
  onChange: (value: number[]) => void
  min?: number
  max?: number
  step?: number
  disabled?: boolean
  label?: string
}

export function Slider({ value, onChange, min = 0, max = 100, step = 1, disabled, label }: SliderProps) {
  return (
    <RSlider.Root
      className={[
        'pouf-slider relative flex items-center w-full h-7 [touch-action:none] select-none',
        'data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed',
      ].join(' ')}
      value={value}
      onValueChange={onChange}
      min={min}
      max={max}
      step={step}
      disabled={disabled}
      aria-label={label}
    >
      <RSlider.Track className="pouf-slider__track relative flex-1 h-3.5 rounded-[999px] bg-bg cushion-field">
        <RSlider.Range className="pouf-slider__range absolute h-full rounded-[999px] bg-purple [box-shadow:inset_0_-3px_0_rgba(0,0,0,0.1)]" />
      </RSlider.Track>
      {value.map((_, i) => (
        <RSlider.Thumb key={i} className={[
            /* Ties to the range it drags via the same purple ring — one
             * control, not a bead and a separate knob. */
            'pouf-slider__thumb block w-[22px] h-[22px] rounded-[50%] bg-surface border-none cursor-pointer',
            '[box-shadow:inset_0_0_0_3px_var(--purple),inset_0_-2px_0_rgba(0,0,0,0.08),0_3px_6px_rgba(58,46,92,0.22)]',
            '[transition:box-shadow_140ms_ease,transform_140ms_ease]',
            'hover:[transform:scale(1.08)] active:[transform:scale(0.94)]',
            'focus-visible:[outline:3px_solid_var(--ink)] focus-visible:outline-offset-[3px]',
            'data-[disabled]:cursor-not-allowed',
          ].join(' ')} aria-label={label ? `${label} thumb ${i + 1}` : undefined} />
      ))}
    </RSlider.Root>
  )
}