{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"slide-game","type":"registry:block","title":"Slide","description":"A slide game: set a bet and a target, then a reel of colour-coded multiplier cards races past two tabs at the center of the stage, turning in 3D as they pass, slows through the last few and clicks the round's result into place between them. Cards that would beat your target carry a pip, the tabs turn primary on a win and red on a miss, and recent rounds collect in a history strip. Server-decided results, optional tick and win sounds, reduced-motion safe.","author":"Saurabh ","dependencies":["@floating-ui/dom","clsx","lucide-react","motion","tailwind-merge"],"registryDependencies":[],"files":[{"path":"components/motion/slide-game.tsx","type":"registry:component","target":"@components/motion/slide-game.tsx","content":"\"use client\";\n// beui.dev/casino/slide-game\n\nimport { History as HistoryIcon } from \"lucide-react\";\nimport { animate, type MotionValue, motion, useMotionValue, useMotionValueEvent, useReducedMotion, useTransform } from \"motion/react\";\nimport { memo, useEffect, useId, useLayoutEffect, useRef, useState } from \"react\";\nimport { Button } from \"@/components/motion/button\";\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@/components/motion/select\";\nimport { EASE_OUT } from \"@/lib/ease\";\nimport { createGameSounds } from \"@/lib/game-sounds\";\nimport { createTickPlayer } from \"@/lib/tick-sound\";\nimport { cn } from \"@/lib/utils\";\nimport {\n floor2,\n formatMultiplier,\n formatShort,\n GameEyebrow,\n GameHistory,\n type GameHistoryEntry,\n heat,\n PRESS_GUARD,\n SoundToggle,\n useStable,\n} from \"./casino/game-parts\";\n\nexport { formatMultiplier } from \"./casino/game-parts\";\n\nexport interface SlideGameProps {\n /** Target multiplier (controlled). A result at or above it wins. Applies from the next round. Values below 1.01× play as 1.01×. */\n target?: number;\n /** Initial target when uncontrolled. Default 2. */\n defaultTarget?: number;\n /** Called when the Target menu changes between rounds. */\n onTargetChange?: (target: number) => void;\n /** Targets offered in the menu. Default 1.5×, 2×, 3×, 5×, 10×, 25×, 100×. Values below 1.01× are left out. */\n targets?: number[];\n /** Bet amount (controlled), used for the profit readout and passed to `onResult`. */\n bet?: number;\n /** Initial bet when uncontrolled. Default 1. */\n defaultBet?: number;\n /** Called when the bet changes. */\n onBetChange?: (bet: number) => void;\n /** Currency symbol shown before the bet and the profit. Default \"$\". */\n currency?: string;\n /** Formats the profit. Default the currency symbol and two decimals ($1.50). */\n formatAmount?: (amount: number) => string;\n /**\n * Decides each round's result, called once when the round starts. Return a\n * number, or a Promise for one (a server round, a provably fair hash): the\n * button shows Starting… until it settles, and a rejection cancels the\n * round. Values below 1 or not finite play as 1. Default `slideResult()`.\n * The win chance shown assumes its 1% edge.\n */\n getResult?: () => number | Promise;\n /**\n * Called when the reel stops, with the result, the round's target and its bet. The round wins when result >= target.\n * Not called for a round still sliding when the game unmounts; settle those from your own record of `getResult`.\n */\n onResult?: (result: number, target: number, bet: number) => void;\n /** Slide length in seconds. Default 4. */\n duration?: number;\n /** Play synthesized sounds (controlled): a tick per card into the center and a chime on a win. */\n sound?: boolean;\n /** Initial sound state when uncontrolled. Default false. */\n defaultSound?: boolean;\n /** Called when the sound button is toggled. */\n onSoundChange?: (sound: boolean) => void;\n /** Accessible name for the game. Default \"Slide\". */\n \"aria-label\"?: string;\n className?: string;\n}\n\n/**\n * A result from one uniform draw in [0, 1): the reel reaches `m` or more with\n * probability (1 − houseEdge) / m, floored to two decimals and capped at\n * 1,000,000×. Pass your own `random` for a seeded or provably fair round.\n */\nexport function slideResult(random: () => number = Math.random, houseEdge = 0.01) {\n const edge = Math.min(Math.max(houseEdge, 0), 1);\n return Math.min(1_000_000, Math.max(1, Math.floor((100 * (1 - edge)) / (1 - random())) / 100));\n}\n\nconst TARGETS = [1.5, 2, 3, 5, 10, 25, 100];\n// Results never land below 1×, so a lower target would always win and pay nothing.\nconst MIN_TARGET = 1.01;\n// The ½ and 2× buttons stop here, so the field never fills with exponent notation.\nconst MAX_BET = 1_000_000_000;\nconst HISTORY = 12;\n// Round numbers, unique on the page.\nlet rounds = 0;\n\ntype Phase = \"idle\" | \"starting\" | \"sliding\" | \"settled\";\ntype Round = { id: number; result: number; target: number; bet: number };\n\n// Grouped, two decimals, never exponent notation: $1,234,567.50.\nconst AMOUNT = new Intl.NumberFormat(\"en\", { minimumFractionDigits: 2, maximumFractionDigits: 2 });\n\nconst settleValue = (value: number) => (Number.isFinite(value) ? Math.max(1, floor2(value)) : 1);\nconst parseBet = (text: string) => {\n const value = Number.parseFloat(text);\n return Number.isFinite(value) && value > 0 ? value : 0;\n};\n\n/**\n * A slide game: set a bet and a target, then a reel of multiplier cards races\n * past two tabs at the center of the stage, tilting in 3D as they pass, slows\n * through the last few and clicks the result into place between them. At or\n * above the target wins. The result comes from `getResult`, so a server can\n * decide it and the reel only plays it back.\n */\nexport function SlideGame({\n target: targetProp,\n defaultTarget = 2,\n onTargetChange,\n targets = TARGETS,\n bet: betProp,\n defaultBet = 1,\n onBetChange,\n currency = \"$\",\n formatAmount,\n getResult = slideResult,\n onResult,\n duration = 4,\n sound,\n defaultSound = false,\n onSoundChange,\n \"aria-label\": ariaLabel = \"Slide\",\n className,\n}: SlideGameProps) {\n const reduce = useReducedMotion() ?? false;\n const betId = useId();\n const [internalTarget, setInternalTarget] = useState(defaultTarget);\n const rawTarget = targetProp ?? internalTarget;\n const target = Number.isFinite(rawTarget) ? Math.max(MIN_TARGET, rawTarget) : MIN_TARGET;\n // The field keeps what the player typed (\"1.\" mid-edit); a controlled bet\n // that disagrees with it replaces it in the same render.\n const [draft, setDraft] = useState(() => String(betProp ?? defaultBet));\n // The string check stops the loop for a bet the field can't hold (-1, NaN).\n if (betProp !== undefined && betProp !== parseBet(draft) && String(betProp) !== draft) setDraft(String(betProp));\n const bet = betProp ?? parseBet(draft);\n const [internalSound, setInternalSound] = useState(defaultSound);\n const soundOn = sound ?? internalSound;\n const [phase, setPhase] = useState(\"idle\");\n const [round, setRound] = useState(null);\n const [history, setHistory] = useState([]);\n const [announcement, setAnnouncement] = useState(\"\");\n const pending = useRef(0);\n const endedAt = useRef(Number.NEGATIVE_INFINITY);\n const lastTick = useRef(0);\n const sounds = useRef<{ tick: ReturnType; game: ReturnType } | null>(\n null,\n );\n const latest = useRef({ soundOn, onResult });\n useLayoutEffect(() => {\n latest.current = { soundOn, onResult };\n });\n\n useEffect(() => {\n const created = { tick: createTickPlayer(), game: createGameSounds() };\n sounds.current = created;\n return () => {\n created.tick.dispose();\n created.game.dispose();\n sounds.current = null;\n pending.current = 0;\n };\n }, []);\n\n const busy = phase === \"starting\" || phase === \"sliding\";\n // An empty or zero bet can't start a round.\n const noBet = bet <= 0;\n const blocked = busy || noBet;\n const valid = targets.filter((step) => step >= MIN_TARGET);\n const options = valid.includes(target) ? valid : [...valid, target].sort((a, b) => a - b);\n const settled = phase === \"settled\" && round !== null;\n const won = settled ? round.result >= round.target : undefined;\n\n const play = () => {\n if (blocked || performance.now() - endedAt.current < PRESS_GUARD) return;\n // Audio unlocks inside the click.\n if (soundOn) {\n sounds.current?.tick.prepare();\n sounds.current?.game.prepare();\n }\n const id = ++rounds;\n const roundTarget = target;\n const roundBet = bet;\n const before = phase;\n pending.current = id;\n setPhase(\"starting\");\n setAnnouncement(\"\");\n Promise.resolve()\n .then(getResult)\n .then(\n (value) => {\n if (pending.current !== id) return;\n setRound({ id, result: settleValue(value), target: roundTarget, bet: roundBet });\n setPhase(\"sliding\");\n setAnnouncement(`Sliding. Target ${formatShort(roundTarget)}.`);\n },\n () => {\n if (pending.current !== id) return;\n setPhase(before);\n setAnnouncement(\"Couldn't start the round. Try again.\");\n },\n );\n };\n\n const settle = (ended: Round) => {\n const win = ended.result >= ended.target;\n endedAt.current = performance.now();\n setPhase(\"settled\");\n setHistory((items) => [{ id: ended.id, value: ended.result }, ...items].slice(0, HISTORY));\n setAnnouncement(\n `Landed on ${formatMultiplier(ended.result)}. ${win ? \"Win\" : \"Loss\"}, target ${formatShort(ended.target)}.`,\n );\n if (win && latest.current.soundOn) sounds.current?.game.cashOut();\n latest.current.onResult?.(ended.result, ended.target, ended.bet);\n };\n\n // A tick per card reaching the center, at most one per 40ms: the opening rush\n // reads as a whirr and the last few cards click one by one.\n const cross = () => {\n if (!latest.current.soundOn) return;\n const now = performance.now();\n if (now - lastTick.current < 40) return;\n lastTick.current = now;\n sounds.current?.tick.play();\n };\n\n const changeBet = (text: string) => {\n setDraft(text);\n onBetChange?.(parseBet(text));\n };\n const scaleBet = (factor: number) => {\n const next = Math.min(MAX_BET, Math.max(0.01, Math.round(bet * factor * 100) / 100));\n setDraft(next.toFixed(2));\n onBetChange?.(next);\n };\n const changeTarget = (value: string) => {\n const next = Number(value);\n if (targetProp === undefined) setInternalTarget(next);\n onTargetChange?.(next);\n };\n // Stable, so the memoized SoundToggle skips bet keystrokes.\n const toggleSound = useStable(() => {\n const next = !soundOn;\n if (next) {\n sounds.current?.tick.prepare();\n sounds.current?.game.prepare();\n }\n if (sound === undefined) setInternalSound(next);\n onSoundChange?.(next);\n });\n\n const roundTarget = formatShort(round?.target ?? target);\n // Matches slideResult's default 1% edge.\n const odds = 99 / target;\n const chance = odds < 0.01 ? \"<0.01%\" : `${odds.toFixed(2)}%`;\n const profit = bet * (target - 1);\n\n return (\n
\n {/* 24px card corners = 12px panel and stage corners + 12px padding. Under\n 36rem the stage stacks over the controls; at 36rem it keeps ~350px beside them. */}\n
\n
\n
\n
\n \n \n {currency ? (\n \n {currency}\n \n ) : null}\n changeBet(event.target.value)}\n disabled={busy}\n className=\"w-full min-w-0 bg-transparent text-sm font-medium tabular-nums text-foreground outline-none disabled:opacity-50\"\n />\n scaleBet(0.5)}\n disabled={busy}\n aria-label=\"Halve bet\"\n >\n ½\n \n scaleBet(2)}\n disabled={busy}\n aria-label=\"Double bet\"\n >\n 2×\n \n
\n
\n
\n \n Target\n \n \n
\n
\n\n
\n
\n
Win chance
\n
{chance}
\n
\n
\n
Profit on win
\n
\n {formatAmount ? formatAmount(profit) : `${currency}${AMOUNT.format(profit)}`}\n
\n
\n
\n\n {\n // A held Enter repeats clicks; it would start rounds on its own.\n if (event.repeat && event.key === \"Enter\") event.preventDefault();\n }}\n >\n {phase === \"starting\"\n ? \"Starting…\"\n : phase === \"sliding\"\n ? \"Sliding…\"\n : noBet\n ? \"Enter a bet\"\n : settled\n ? \"Slide again\"\n : \"Slide\"}\n \n
\n\n
\n
\n \n \n \n
\n\n {/* The stage is the reel alone, so the edge tabs can hang from its edges. */}\n \n\n
\n \n
\n
\n \n

\n {announcement}\n

\n
\n );\n}\n\nconst CARD_WIDTH = 80;\nconst CARD_HEIGHT = 108;\nconst GAP = 10;\nconst PITCH = CARD_WIDTH + GAP;\n// Cover-flow geometry, by distance from the center in cards: the center card\n// sits 12% larger and flat, neighbours turn up to 50° toward it and fade.\nconst CENTER_SCALE = 1.12;\nconst SCALE_STEP = 0.1;\nconst MIN_SCALE = 0.8;\nconst TURN_STEP = 30;\nconst MAX_TURN = 50;\nconst FADE_STEP = 0.16;\nconst MIN_FADE = 0.3;\n// Cards kept on each side of the center when a new round starts, so the strip\n// on screen never changes; wide enough for any card width.\nconst CONTEXT = 6;\n// Filler cards that race past before the result, and after it.\nconst SPIN_TILES = 48;\nconst TAIL = 6;\n// The slide runs out anywhere inside the result card, not dead center, so the\n// last cards creep past the tabs and the stop reads as physical. Then the\n// card clicks into the center on a short spring, like a detent.\nconst LANDING_SPREAD = 0.7;\nconst DETENT = { type: \"spring\", duration: 0.35, bounce: 0.2 } as const;\n// A game reveal, not UI chrome: it starts at full speed and spends most of its\n// time creeping through the last few cards, where the suspense is. The 300ms\n// UI budget does not apply to it.\nconst SLIDE_EASE = [0.12, 0.7, 0.16, 1] as const;\n// Edge tabs: a notch hanging from the stage's top and bottom edges at the\n// center, a 4px cap with a rounded point. They sit clear of the cards and\n// only change colour with the round.\nconst TAB_HEIGHT = 15;\nconst TAB_CLEARANCE = 12;\n// The landed card swells once as it locks.\nconst LOCK = { duration: 0.4, ease: EASE_OUT } as const;\n\ntype Tile = { id: string; multiplier: number };\ntype ReelState = {\n tiles: Tile[];\n landed: number;\n round: Round | null;\n from: number;\n /** Where the slide runs out, inside the result card. */\n to: number;\n /** The result card centered between the tabs. */\n rest: number;\n};\n\n/** Seeded by the round, so the server and client agree on every card. */\nfunction seeded(seed: string) {\n let state = 2166136261;\n for (const char of seed) state = Math.imul(state ^ char.charCodeAt(0), 16777619);\n return () => {\n state = (state + 0x6d2b79f5) | 0;\n let t = Math.imul(state ^ (state >>> 15), 1 | state);\n t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;\n return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n };\n}\n\n/** Decorative cards on the game's own curve, capped so they fit a card. */\nfunction filler(rand: () => number, count: number, prefix: string): Tile[] {\n return Array.from({ length: count }, (_, i) => ({\n id: `${prefix}-${i}`,\n multiplier: Math.min(1000, slideResult(rand)),\n }));\n}\n\n/** Reel offset that puts card `index` at the center. */\nconst positionOf = (index: number, offset = 0) => -(index * PITCH + CARD_WIDTH / 2 + offset);\n\nconst INITIAL: ReelState = (() => {\n const rand = seeded(\"slide\");\n // The center starts on 1.00×, so the stage reads as a fresh game, not a result.\n const tiles = [...filler(rand, CONTEXT, \"a\"), { id: \"start\", multiplier: 1 }, ...filler(rand, CONTEXT, \"b\")];\n const at = positionOf(CONTEXT);\n return { tiles, landed: CONTEXT, round: null, from: at, to: at, rest: at };\n})();\n\n// Card faces by value: slate under 2×, primary to 10×, amber to 100×, then\n// fuchsia; the history pills follow the same tiers. Cards are physical objects, so they keep their colours in both\n// themes.\nconst FACE = {\n cool: \"bg-zinc-700 text-white\",\n warm: \"bg-primary text-primary-foreground\",\n hot: \"bg-amber-400 text-amber-950\",\n jackpot: \"bg-fuchsia-600 text-white\",\n} as const;\nconst face = (multiplier: number) => (multiplier >= 100 ? \"jackpot\" : heat(multiplier));\n\n/**\n * The strip of cards under the fixed edge tabs. A new round keeps the cards on\n * screen (mid-slide too), appends filler and the result, then slides to it.\n * Cards that would beat `goal` carry a pip, so wins read as they fly past.\n */\nfunction Reel({\n round,\n goal,\n duration,\n reduce,\n busy,\n settled,\n won,\n onCross,\n onSettle,\n}: {\n round: Round | null;\n goal: number;\n duration: number;\n reduce: boolean;\n busy: boolean;\n settled: boolean;\n won: boolean | undefined;\n onCross: () => void;\n onSettle: (round: Round) => void;\n}) {\n const [reel, setReel] = useState(INITIAL);\n const x = useMotionValue(INITIAL.rest);\n const finished = useRef(0);\n const under = useRef(INITIAL.landed);\n const latest = useRef({ reel, onCross, onSettle, duration, reduce });\n useLayoutEffect(() => {\n latest.current = { reel, onCross, onSettle, duration, reduce };\n });\n\n useLayoutEffect(() => {\n if (!round || round.id === reel.round?.id) return;\n const current = Math.round((-x.get() - CARD_WIDTH / 2) / PITCH);\n const start = Math.max(0, current - CONTEXT);\n const kept = reel.tiles.slice(start, current + CONTEXT + 1);\n // Seeded by the result too, so each page load's first round differs.\n const rand = seeded(`${round.id}:${round.result}`);\n const landed = kept.length + SPIN_TILES;\n setReel({\n tiles: [\n ...kept,\n ...filler(rand, SPIN_TILES, `${round.id}-a`),\n { id: `${round.id}-result`, multiplier: round.result },\n ...filler(rand, TAIL, `${round.id}-b`),\n ],\n landed,\n round,\n from: x.get() + start * PITCH,\n to: positionOf(landed, (rand() - 0.5) * CARD_WIDTH * LANDING_SPREAD),\n rest: positionOf(landed),\n });\n }, [round, reel, x]);\n\n useLayoutEffect(() => {\n const played = reel.round;\n if (!played) return;\n // Settles once per round, even when Strict Mode replays this effect.\n const finish = () => {\n if (finished.current === played.id) return;\n finished.current = played.id;\n latest.current.onSettle(played);\n };\n // The rebuilt strip renumbers the card under the tabs; sync the index\n // first so the jump doesn't tick.\n under.current = Math.round((-reel.from - CARD_WIDTH / 2) / PITCH);\n x.jump(reel.from);\n if (latest.current.reduce) {\n x.jump(reel.rest);\n finish();\n return;\n }\n let controls = animate(x, reel.to, {\n duration: latest.current.duration,\n ease: SLIDE_EASE,\n onComplete: () => {\n controls = animate(x, reel.rest, { ...DETENT, onComplete: finish });\n },\n });\n return () => controls.stop();\n }, [reel, x]);\n\n const tone = won === true ? \"text-primary\" : won === false ? \"text-rose-500\" : busy ? \"text-primary\" : \"text-foreground/50\";\n\n // A tick each time a new card reaches the center.\n useMotionValueEvent(x, \"change\", (value) => {\n const count = latest.current.reel.tiles.length;\n const index = Math.min(count - 1, Math.max(0, Math.round((-value - CARD_WIDTH / 2) / PITCH)));\n if (index === under.current) return;\n under.current = index;\n latest.current.onCross();\n });\n\n return (\n \n {/* Cards fade out at the sides; the stage and its tabs don't. */}\n \n \n {reel.tiles.map((tile, index) => (\n = goal}\n landed={settled && index === reel.landed}\n dim={settled && index !== reel.landed}\n reduce={reduce}\n />\n ))}\n \n \n {/* After the strip, so they paint over cards turning out of the 3D plane. */}\n \n \n \n );\n}\n\n/**\n * One card. Its turn, size and fade follow its distance from the center, read straight off the reel's offset.\n * Memoized: the reel holds dozens of cards and every bet keystroke re-renders the stage.\n */\nconst Card = memo(function Card({\n multiplier,\n center,\n x,\n wins,\n landed,\n dim,\n reduce,\n}: {\n multiplier: number;\n /** The card's center along the strip, in px. */\n center: number;\n x: MotionValue;\n wins: boolean;\n landed: boolean;\n dim: boolean;\n reduce: boolean;\n}) {\n // A new round renumbers kept cards; the ref keeps the transforms current.\n const at = useRef(center);\n useLayoutEffect(() => {\n at.current = center;\n });\n const distance = useTransform(x, (value) => (value + at.current) / PITCH);\n const scale = useTransform(distance, (d) => Math.max(MIN_SCALE, CENTER_SCALE - SCALE_STEP * Math.abs(d)));\n const rotateY = useTransform(distance, (d) => Math.max(-MAX_TURN, Math.min(MAX_TURN, d * TURN_STEP)));\n const opacity = useTransform(distance, (d) => Math.max(MIN_FADE, 1 - FADE_STEP * Math.abs(d)));\n const [whole, decimals] = formatMultiplier(multiplier).replace(\"×\", \"\").split(\".\");\n\n return (\n \n \n {/* Four or more whole digits (1000×, 12.5K×) drop a size to stay inside the card. */}\n = 4 ? \"text-base\" : \"text-xl\")}>\n {whole}\n {decimals ? .{decimals} : null}\n ×\n \n {wins ? : null}\n \n \n );\n});\n\n/** A notch on the stage edge, pointing at the center card. */\nfunction EdgeTab({ side, tone }: { side: \"top\" | \"bottom\"; tone: string }) {\n return (\n \n \n \n );\n}\n"},{"path":"components/motion/casino/game-parts.tsx","type":"registry:component","target":"@components/motion/casino/game-parts.tsx","content":"\"use client\";\n\n// Pieces the casino games share, so each one only draws its own stage: the\n// multiplier format and heat colours, the recent-rounds strip, the sound\n// toggle and the small state label above a readout.\n\nimport { Check, Volume2, VolumeX, X } from \"lucide-react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { memo, useCallback, useLayoutEffect, useRef } from \"react\";\nimport { ActionSwapCascadeIcon } from \"@/components/motion/action-swap-cascade\";\nimport { Button } from \"@/components/motion/button\";\nimport { Tooltip } from \"@/components/motion/tooltip\";\nimport { EASE_OUT, SPRING_LAYOUT } from \"@/lib/ease\";\nimport { cn } from \"@/lib/utils\";\n\n// Presses this soon after a round starts or ends are the same press repeated\n// (a double tap, a held key), not the next action (ms).\nexport const PRESS_GUARD = 400;\n\n// Status lines and markers swap on a spring with no bounce.\nexport const SWAP = { type: \"spring\", duration: 0.3, bounce: 0 } as const;\n// Exits are shorter than entrances.\nexport const EXIT = { duration: 0.12, ease: EASE_OUT } as const;\n// A loss shakes the readout once, quickly.\nexport const SHAKE = { duration: 0.3, ease: EASE_OUT } as const;\n// A milestone or a win swells the readout and lets it settle with a little give.\nexport const PULSE = { type: \"spring\", duration: 0.35, bounce: 0.3 } as const;\n\n/**\n * Primary for small text: a shade darker on light surfaces and lighter on\n * dark ones, so 10-12px labels keep 4.5:1. Large text and marks use plain\n * primary.\n */\nexport const PRIMARY_TEXT =\n \"text-[color:color-mix(in_oklab,var(--color-primary)_75%,black)] dark:text-[color:color-mix(in_oklab,var(--color-primary)_80%,white)]\";\n\n/**\n * How hot a multiplier reads: cool under 2×, warm to 10×, hot beyond.\n * Readouts, history and tiles colour by it, so size reads without the digits.\n */\nexport function heat(multiplier: number) {\n return multiplier >= 10 ? \"hot\" : multiplier >= 2 ? \"warm\" : \"cool\";\n}\n\n// Readout and pill colours per heat: neutral, then primary, then amber.\nexport const HEAT_TEXT = {\n cool: \"text-foreground\",\n warm: \"text-primary\",\n hot: \"text-amber-700 dark:text-amber-400\",\n} as const;\nexport const HEAT_PILL = {\n cool: \"bg-foreground/5 text-muted-foreground\",\n warm: `bg-primary/10 ${PRIMARY_TEXT}`,\n hot: \"bg-amber-500/15 text-amber-700 dark:text-amber-400\",\n // Opt-in through GameHistory's `tier`, for games that mark 100× and up.\n jackpot: \"bg-fuchsia-500/15 text-fuchsia-700 dark:text-fuchsia-400\",\n} as const;\n\n// Truncated, never rounded up: a 10,960× payout reads 10.9K×, not 11K×.\nconst COMPACT = new Intl.NumberFormat(\"en\", { notation: \"compact\", maximumFractionDigits: 1, roundingMode: \"trunc\" });\n\n/**\n * Large values: compact up to trillions, then scientific (1.4e100), since\n * compact notation stops at T and would print 1e100 as a 100-digit string.\n */\nfunction formatLarge(multiplier: number) {\n if (multiplier < 1e15) return COMPACT.format(multiplier);\n // From toExponential, not log10: 1e100 / 10 ** 100 is 0.999….\n const [mantissa, exponent] = multiplier.toExponential(6).split(\"e\");\n return `${Math.floor(Number(mantissa) * 10) / 10}e${Number(exponent)}`;\n}\n\n/**\n * A callback with one identity for the component's life that runs the latest\n * render's code. Stands in for useEffectEvent, which needs React 19.2.\n */\nexport function useStable(fn: (...args: A) => R) {\n const ref = useRef(fn);\n useLayoutEffect(() => {\n ref.current = fn;\n });\n return useCallback((...args: A) => ref.current(...args), []);\n}\n\n/** Floors to two decimals, the precision every game settles at. The 1e-9 keeps 2.3 from flooring to 2.29. */\nexport function floor2(value: number) {\n return Math.floor(value * 100 + 1e-9) / 100;\n}\n\n/** A multiplier's number without the sign: 2.50, or shortened when large (12.5K, 1.4e20). */\nexport function formatOdds(multiplier: number) {\n return multiplier < 10_000 ? multiplier.toFixed(2) : formatLarge(multiplier);\n}\n\n/** A multiplier as the games show it: 2.50×, or shortened when large (12.5K×, 1.4e20×). */\nexport function formatMultiplier(multiplier: number) {\n return `${formatOdds(multiplier)}×`;\n}\n\n/** Scale and menu labels: 1.5×, 2×, 1.2K×. */\nexport function formatShort(multiplier: number) {\n return `${multiplier < 1000 ? +multiplier.toFixed(2) : formatLarge(multiplier)}×`;\n}\n\n/** The sound toggle: a quiet 32px icon button in a game card's header. */\nexport const SoundToggle = memo(function SoundToggle({ on, onToggle }: { on: boolean; onToggle: () => void }) {\n return (\n // aria-label names the button; the tooltip shows the same label on hover\n // and focus. Tooltip's asLabel would hydrate differently from the server.\n \n \n \n {on ? : }\n \n \n \n );\n});\n\nexport interface GameHistoryEntry {\n id: number;\n value: number;\n}\n\n/** Recent rounds, newest first, sliding in from the left and coloured by heat. */\nexport const GameHistory = memo(function GameHistory({\n history,\n reduce,\n tier = heat,\n \"aria-label\": ariaLabel,\n className,\n}: {\n history: GameHistoryEntry[];\n reduce: boolean;\n /** Pill colour per value. Default `heat`; return \"jackpot\" to mark a top tier. */\n tier?: (value: number) => keyof typeof HEAT_PILL;\n \"aria-label\": string;\n className?: string;\n}) {\n return (\n \n \n {history.length === 0 ? (\n \n Recent rounds show here\n \n ) : (\n history.map((entry) => (\n \n {formatMultiplier(entry.value)}\n \n ))\n )}\n \n \n );\n});\n\n/**\n * The small uppercase state label over a readout, with a live dot while a\n * round plays and a check or cross once it ends.\n */\nexport function GameEyebrow({\n label,\n state,\n reduce,\n className,\n}: {\n label: string;\n /** `live` shows the dot; `won` and `lost` show a check or cross and tint the label. */\n state: \"idle\" | \"live\" | \"won\" | \"lost\";\n reduce: boolean;\n className?: string;\n}) {\n const icon = state === \"idle\" ? null : state;\n return (\n \n \n {icon ? (\n \n {icon === \"live\" ? (\n \n ) : icon === \"won\" ? (\n \n ) : (\n \n )}\n \n ) : null}\n \n {label}\n

\n );\n}\n"},{"path":"components/motion/button/index.tsx","type":"registry:component","target":"@components/motion/button/index.tsx","content":"export type {\n ButtonLinkProps,\n ButtonProps,\n ButtonSize,\n ButtonVariant,\n} from \"./base\";\nexport { Button, ButtonLink } from \"./base\";\nexport type { MagneticButtonProps } from \"./magnetic\";\nexport { MagneticButton } from \"./magnetic\";\nexport type { MetallicButtonProps } from \"./metallic\";\nexport { MetallicButton } from \"./metallic\";\nexport type { ButtonState, StatefulButtonProps } from \"./stateful\";\nexport { StatefulButton } from \"./stateful\";\n"},{"path":"components/motion/select.tsx","type":"registry:component","target":"@components/motion/select.tsx","content":"\"use client\";\n\nimport { Check, ChevronDown } from \"lucide-react\";\nimport {\n animate,\n type MotionValue,\n motion,\n useMotionValue,\n useMotionValueEvent,\n useReducedMotion,\n useTransform,\n type Variants,\n} from \"motion/react\";\nimport {\n createContext,\n type ReactNode,\n useCallback,\n useContext,\n useEffect,\n useId,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { EASE_OUT } from \"@/lib/ease\";\nimport { type ListboxRow, useListbox } from \"@/lib/hooks/use-listbox\";\nimport { cn } from \"@/lib/utils\";\n\n// One progress value drives the surface, gap, corners and chevron. This short\n// spring suits the full reveal distance; each reader clamps its small internal\n// overshoot, so all visible endpoints settle together. Rows share a short\n// reveal so long lists have no late entries.\nconst UNFOLD_SPRING = {\n type: \"spring\",\n visualDuration: 0.2,\n bounce: 0.12,\n} as const;\n// Exits are faster than entrances: the panel folds back on a short ease.\nconst UNFOLD_EXIT = { duration: 0.2, ease: EASE_OUT } as const;\nconst RADIUS = 12;\n// How far the open panel sits from the trigger once it has pulled away.\nconst GAP = 8;\n// The surface starts as a thin lip flush against the trigger's edge.\nconst LIP = 8;\nconst lerp = (a: number, b: number, t: number) => a + (b - a) * t;\n\nconst ITEM_VARIANTS: Variants = {\n // A shared short reveal keeps late rows in long, scrolled lists ready with\n // the surface. Per-index staggering can delay visible rows by over a second.\n hidden: { opacity: 0, y: -4, transition: { duration: 0.08, ease: EASE_OUT } },\n show: { opacity: 1, y: 0, transition: { duration: 0.12, ease: EASE_OUT } },\n};\n\ntype Placement = \"bottom\" | \"top\";\n\ninterface SelectContextValue {\n value: string | undefined;\n open: boolean;\n setOpen: (open: boolean) => void;\n select: (value: string) => void;\n register: (value: string, label: string, disabled: boolean) => void;\n unregister: (value: string) => void;\n labelFor: (value: string | undefined) => string | undefined;\n rows: ListboxRow[];\n /** Closes the panel; focus inside it returns to the trigger. */\n close: () => void;\n reduce: boolean;\n progress: MotionValue;\n triggerId: string;\n listId: string;\n disabled: boolean;\n placement: Placement;\n setPlacement: (p: Placement) => void;\n}\n\nconst SelectContext = createContext(null);\n// The option keyboard focus is on, resolved during render by the content.\nconst ActiveOptionContext = createContext(undefined);\n\nfunction useSelectContext(component: string) {\n const ctx = useContext(SelectContext);\n if (!ctx) throw new Error(`${component} must be used within