52:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T8bd,"use client"; import { X } from "lucide-react"; import { useId, type ComponentProps, type ReactNode } from "react"; import { Button } from "./button"; import { FeedbackIcon, type FeedbackVariant } from "./feedback"; import { cn } from "./lib/cn"; import "./shared/alert.css"; import "./alert.css"; export type AlertProps = Omit, "title"> & { title: ReactNode; variant?: FeedbackVariant; loading?: boolean; action?: ReactNode; onDismiss?: () => void; }; export function Alert({ title, variant = "neutral", loading = false, children, action, onDismiss, className, ...props }: AlertProps) { const titleId = useId(); return (

{title}

{children != null && (

{children}

)} {action != null && (

{action}

)}

{onDismiss && ( )}

); } 55:T125a,"use client"; import { Slot, Slottable } from "@radix-ui/react-slot"; import { LoaderCircle } from "lucide-react"; import { useLayoutEffect, useRef, useState, type ComponentProps, type ReactNode, } from "react"; import { cn } from "./lib/cn"; import "./shared/loading-indicator.css"; import "./button.css"; /* Colour, material and press live in button.css keyed on data-variant, so a consumer's utility classes still override them. Raised to press: the button sinks 1px into an inner shade instead of scaling. */ const variants = { default: "", secondary: "", ghost: "", destructive: "", }; const sizes = { sm: "h-8 gap-1.5 rounded-control px-3 text-[13px] max-md:min-h-11 [@media(pointer:coarse)]:min-h-11", md: "h-[var(--control-height)] gap-2 rounded-button px-3.5 text-sm", lg: "h-11 gap-2 rounded-touch px-[18px] text-[15px]", icon: "size-[var(--control-height)] rounded-button p-0", }; export type ButtonProps = ComponentProps<"button"> & { variant?: keyof typeof variants; size?: keyof typeof sizes; asChild?: boolean; /** Shows a spinner over the label and swallows clicks while keeping focus and width. */ loading?: boolean; /** Animate a meaningful label/icon change, such as saving → saved. */ feedbackKey?: string; }; export function Button({ className, variant = "default", size = "md", asChild = false, loading = false, feedbackKey, disabled, "aria-disabled": ariaDisabled, children, onClick, onClickCapture, tabIndex, type = "button", ...props }: ButtonProps) { const Component = asChild ? Slot : "button"; const nativeDisabled = Boolean(disabled); const blocked = nativeDisabled || loading || ariaDisabled === true || ariaDisabled === "true"; return ( { if (blocked && (event.key === "Enter" || event.key === " ")) { event.preventDefault(); } props.onKeyDown?.(event); }} onClickCapture={(event) => { if (blocked) { event.preventDefault(); event.stopPropagation(); return; } onClickCapture?.(event); }} onClick={onClick} > {loading && asChild && ( )} {loading && !asChild && feedbackKey === undefined && ( )} {loading && !asChild && feedbackKey === undefined ? ( {children} ) : feedbackKey !== undefined && !asChild ? ( {loading && ( ) : ( children )} ); } function ButtonFeedback({ stateKey, children, }: { stateKey: string; children: ReactNode; }) { const content = useRef(null); const [initialKey] = useState(stateKey); const [width, setWidth] = useState(); useLayoutEffect(() => { const element = content.current; if (!element) return; const measure = () => setWidth(element.offsetWidth); measure(); const observer = new ResizeObserver(measure); observer.observe(element); return () => observer.disconnect(); }, [stateKey]); return ( {children} ); } 56:Tb6d,"use client"; import { CircleAlert, CircleCheck, LoaderCircle } from "lucide-react"; import { useId, type ReactNode } from "react"; import { Label } from "./label"; import { cn } from "./lib/cn"; import "./shared/field-message.css"; import "./shared/loading-indicator.css"; import "./field.css"; export type FieldControlProps = { id: string; "aria-describedby"?: string; "aria-invalid"?: true; "aria-required"?: true; }; export const isEmail = (value: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value.trim()); /** * A label, a control and one message line wired together for assistive * technology. Hint, async status and error share the same reserved line and * rewrite it in place, so validation never pushes the next field down. */ export function Field({ label, description, error, status, statusTone = "pending", count, required, optional, action, className, children, }: { label: string; /** Hint shown on the message line until a status or error replaces it. */ description?: ReactNode; /** Replaces the hint and is announced when it appears. */ error?: string; /** An async result such as “Checking availability…” or “Available”. */ status?: string; statusTone?: "pending" | "success"; /** Right-aligned counter on the message line, e.g. “6 / 40”. */ count?: string; required?: boolean; /** Adds "(optional)" after the label. */ optional?: boolean; /** Something aligned with the label, such as a "Forgot password?" link. */ action?: ReactNode; className?: string; children: (props: FieldControlProps) => ReactNode; }) { const id = useId(); const message = `${id}-message`; const hasMessage = Boolean(error || status || description || count); const tone = error ? "error" : status ? statusTone : "hint"; return (

{label} {optional && (optional)} {action}

{children({ id, "aria-describedby": hasMessage ? message : undefined, "aria-invalid": error ? true : undefined, "aria-required": required ? true : undefined, })}

{tone === "error" &&

); } 57:T6db,import type { ComponentProps, ReactNode } from "react"; import { cn } from "./lib/cn"; import "./shared/input.css"; import "./shared/input-2.css"; import "./input.css"; const fieldText = "w-full min-w-0 text-base text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed md:text-sm"; export type InputProps = ComponentProps<"input"> & { /** Fixed text or an icon before the value, e.g. "caliper.app/". */ leading?: ReactNode; /** Text, an icon or a status after the value, e.g. a spinner or a count. */ trailing?: ReactNode; }; /** * A recessed text field. Fields sit slightly below the paper (an inner shade * and a 3:1 ring); buttons stand on it, so what you fill and what you press * never look alike. */ export function Input({ className, leading, trailing, ...props }: InputProps) { if (leading === undefined && trailing === undefined) { return ( ); } return ( {leading !== undefined && {leading}} {trailing !== undefined && {trailing}} ); } 58:Tc43,"use client"; import { useEffect, useRef, useState } from "react"; import { useInView } from "./text-motion"; import { cn } from "./lib/cn"; const easeOut = (t: number) => 1 - Math.pow(1 - t, 3); /** Counts from the value on screen to the next one, retargeting smoothly if it changes mid-count. */ export function NumberTween({ value, format, locale = "en-US", prefix = "", suffix = "", duration = 900, animateOnView = false, className, }: { value: number; format?: Intl.NumberFormatOptions; locale?: string; prefix?: string; suffix?: string; /** Milliseconds for a full count. Small changes finish sooner. */ duration?: number; /** Count up from zero the first time the number scrolls into view. */ animateOnView?: boolean; className?: string; }) { const [viewRef, seen] = useInView(true, 0.6); const out = useRef(null); const shown = useRef(animateOnView ? 0 : value); const frame = useRef(0); const [live, setLive] = useState(false); const formatter = new Intl.NumberFormat(locale, format); const text = (n: number) => `${prefix}${formatter.format(n)}${suffix}`; const final = text(value); const wait = animateOnView && !seen; // Rendered once; later frames are written straight to the DOM so React never resets a count in progress. const [initial] = useState(() => (animateOnView ? text(0) : text(value))); useEffect(() => { const element = out.current; if (!element || wait) return; const f = new Intl.NumberFormat(locale, format); const write = (n: number) => { element.textContent = `${prefix}${f.format(n)}${suffix}`; }; cancelAnimationFrame(frame.current); const from = shown.current; if (from === value || window.matchMedia("(prefers-reduced-motion: reduce)").matches) { shown.current = value; write(value); return; } const span = Math.abs(value - from); const scale = Math.max(Math.abs(value), Math.abs(from), 1); const total = Math.max(280, duration * Math.min(1, 0.35 + (span / scale) * 0.65)); const start = performance.now(); const tick = (now: number) => { const t = Math.min(1, (now - start) / total); shown.current = from + (value - from) * easeOut(t); write(t === 1 ? value : shown.current); if (t < 1) frame.current = requestAnimationFrame(tick); else shown.current = value; }; frame.current = requestAnimationFrame(tick); return () => cancelAnimationFrame(frame.current); // eslint-disable-next-line react-hooks/exhaustive-deps }, [value, wait, JSON.stringify(format), locale, prefix, suffix, duration]); useEffect(() => { const id = requestAnimationFrame(() => setLive(true)); return () => cancelAnimationFrame(id); }, []); return ( {final} ); } 59:T1b5e,"use client"; import { useId, useState } from "react"; import { Alert } from "./alert"; import { Button } from "./button"; import { Field } from "./field"; import { Input } from "./input"; import { cn } from "./lib/cn"; import { NumberTween } from "./number-tween"; import "./shared/prompt-suggestion.css"; import "./prediction-market.css"; export type MarketOutcome = { id: string; label: string; /** 0 to 1. */ price: number; change?: number }; export type TradeResult = void | { error?: string }; /** A question with prices that read as probabilities, and a small order form. It places nothing itself. */ export function PredictionMarket({ question, description, outcomes, volume, closes, balance, currency = "USD", onTrade, className, }: { question: string; description?: string; outcomes: readonly MarketOutcome[]; volume: number; /** Readable close time, such as "Closes Dec 1". */ closes: string; /** Spendable balance. */ balance: number; currency?: string; onTrade: (order: { outcomeId: string; amount: number; shares: number }) => Promise | TradeResult; className?: string; }) { const [outcomeId, setOutcomeId] = useState(outcomes[0]?.id ?? ""); const [raw, setRaw] = useState(""); const [pending, setPending] = useState(false), [error, setError] = useState(""), [done, setDone] = useState(""); const group = useId(); const money = new Intl.NumberFormat("en-US", { style: "currency", currency }); const outcome = outcomes.find((o) => o.id === outcomeId) ?? outcomes[0]; const amount = Number.parseFloat(raw); const valid = Number.isFinite(amount) && amount > 0; const shares = valid && outcome ? amount / outcome.price : 0; const problem = !raw ? "" : !valid ? "Enter an amount above zero." : amount > balance ? `You only have ${money.format(balance)} available.` : ""; const ready = valid && !problem && !!outcome; const submit = async () => { if (!ready || pending) return; setPending(true); setError(""); setDone(""); try { const result = await onTrade({ outcomeId: outcome.id, amount, shares }); if (result && result.error) setError(result.error); else { setDone(`Order placed: ${shares.toFixed(1)} shares of ${outcome.label} for ${money.format(amount)}.`); setRaw(""); } } catch (e) { setError(e instanceof Error ? e.message : "The order could not be placed."); } finally { setPending(false); } }; return (

{question}

{description &&

{description}

}

Volume {new Intl.NumberFormat("en-US", { notation: "compact", style: "currency", currency, maximumFractionDigits: 1 }).format(volume)} {closes}

Outcome {outcomes.map((o) => ( setOutcomeId(o.id)} /> {o.label} {o.change !== undefined && o.change !== 0 && ( {o.change > 0 ? "▲" : "▼"} {Math.abs(Math.round(o.change * 100))} points this week )} {Math.round(o.price * 100)}% chance, {Math.round(o.price * 100)} cents per share ))}

{(control) => (

setRaw(e.target.value.replace(/[^\d.]/g, ""))} />

{[10, 25, 100].map((n) => ( ))}

)}

Price per share: {outcome ? `${(outcome.price * 100).toFixed(0)}¢` : "—"}
Shares: {ready ? : "—"}
If {outcome?.label ?? "it"} happens, you receive: {ready ? : "—"}

{error && }

Prices are chances, not promises. If you are wrong you lose what you spend. Sample market for demonstration.

{done}

); } 5a:T28b2,"use client"; import { Fragment, useEffect, useLayoutEffect, useRef, useState, type CSSProperties, type ElementType, type ReactNode, } from "react"; import { cn } from "./lib/cn"; import "./text-motion.css"; type Style = CSSProperties & Record<`--${string}`, string | number>; const reducedMotion = () => typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches; /** Reports when an element enters the viewport. `once` keeps it true afterwards. */ export function useInView(once = true, threshold = 0.35) { const ref = useRef(null); const [inView, setInView] = useState(false); useEffect(() => { const element = ref.current; if (!element) return; if (typeof IntersectionObserver === "undefined") { const id = requestAnimationFrame(() => setInView(true)); return () => cancelAnimationFrame(id); } const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { setInView(true); if (once) observer.disconnect(); } else if (!once) setInView(false); }, { threshold }, ); observer.observe(element); return () => observer.disconnect(); }, [once, threshold]); return [ref, inView] as const; } /* ------------------------------------------------------------------ */ export function TextReveal({ children, as = "p", by = "word", mode = "stagger", stagger = 36, play, className, }: { children: string; as?: ElementType; by?: "word" | "char"; /** "stagger" plays once on entering view; "scroll" brightens words as the block scrolls past. */ mode?: "stagger" | "scroll"; /** Delay between units in milliseconds. */ stagger?: number; /** Controls playback instead of viewport entry. Toggle to replay. */ play?: boolean; className?: string; }) { const [ref, inView] = useInView(true, 0.4); const [progress, setProgress] = useState(0); const frame = useRef(0); const words = children.trim().split(/\s+/); const shown = play ?? inView; useEffect(() => { if (mode !== "scroll") return; const update = () => { const element = ref.current; if (!element) return; const box = element.getBoundingClientRect(); const vh = window.innerHeight; const value = (vh * 0.85 - box.top) / (box.height + vh * 0.35); setProgress(reducedMotion() ? 1 : Math.max(0, Math.min(1, value))); }; const onScroll = () => { cancelAnimationFrame(frame.current); frame.current = requestAnimationFrame(update); }; update(); window.addEventListener("scroll", onScroll, { passive: true }); window.addEventListener("resize", onScroll); return () => { cancelAnimationFrame(frame.current); window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); }; }, [mode, ref]); let index = 0; const unit = (text: string, key: string, scrollIndex?: number) => { const i = index++; const style: Style = { "--i": i }; if (scrollIndex !== undefined) style.opacity = Math.max(0.2, Math.min(1, progress * (words.length + 2) - scrollIndex)); return ( {text} ); }; const Tag = as; return ( {children} ); } /* ------------------------------------------------------------------ */ export function InViewTitle({ children, eyebrow, as = "h2", align = "start", className, }: { children: string; eyebrow?: string; as?: ElementType; align?: "start" | "center"; className?: string; }) { const [ref, inView] = useInView(true, 0.5); const words = children.trim().split(/\s+/); const Heading = as; return (

{eyebrow && (

{eyebrow}

)} {children}

); } /* ------------------------------------------------------------------ */ type Glyph = { key: string; ch: string }; const glyphs = (text: string): Glyph[] => { const seen = new Map(); return [...text].map((ch) => { const n = (seen.get(ch) ?? 0) + 1; seen.set(ch, n); return { key: `${ch}:${n}`, ch }; }); }; /** Changes text so characters that stay glide to their new place, new ones rise in and old ones fade away. */ export function TextMorph({ children, as = "span", className, }: { children: string; as?: ElementType; className?: string; }) { const root = useRef(null); const last = useRef<{ text: string; width: number; boxes: Map } | null>(null); const list = glyphs(children); useLayoutEffect(() => { const element = root.current; if (!element) return; const origin = element.getBoundingClientRect(); const boxes = new Map(); const nodes = element.querySelectorAll("[data-glyph]"); nodes.forEach((node) => { const r = node.getBoundingClientRect(); boxes.set(node.dataset.glyph!, { x: r.left - origin.left, y: r.top - origin.top, ch: node.textContent ?? "" }); }); const before = last.current; if (before && before.text !== children && !reducedMotion()) { const style = getComputedStyle(element); const styles = { duration: 360, easing: style.getPropertyValue("--ease-showcase").trim() || "cubic-bezier(0.22, 1, 0.36, 1)", fill: "none" as const }; nodes.forEach((node) => { const now = boxes.get(node.dataset.glyph!)!; const prev = before.boxes.get(node.dataset.glyph!); if (prev) { if (Math.abs(prev.x - now.x) > 0.5 || Math.abs(prev.y - now.y) > 0.5) node.animate([{ transform: `translate(${prev.x - now.x}px, ${prev.y - now.y}px)` }, { transform: "translate(0, 0)" }], styles); } else node.animate([{ opacity: 0, transform: "translateY(0.45em)", filter: "blur(3px)" }, { opacity: 1, transform: "translateY(0)", filter: "blur(0)" }], { ...styles, duration: 300 }); }); before.boxes.forEach((prev, key) => { if (boxes.has(key) || !prev.ch.trim()) return; const ghost = document.createElement("span"); ghost.textContent = prev.ch; ghost.setAttribute("aria-hidden", "true"); Object.assign(ghost.style, { position: "absolute", left: `${prev.x}px`, top: `${prev.y}px`, pointerEvents: "none", whiteSpace: "pre" }); element.append(ghost); ghost.animate([{ opacity: 1, transform: "translateY(0)", filter: "blur(0)" }, { opacity: 0, transform: "translateY(-0.4em)", filter: "blur(3px)" }], { duration: 220, easing: "ease-out" }).onfinish = () => ghost.remove(); }); if (Math.abs(before.width - origin.width) > 0.5) element.animate([{ width: `${before.width}px` }, { width: `${origin.width}px` }], styles); } last.current = { text: children, width: origin.width, boxes }; }, [children]); // Glyphs are grouped by word, so a long line wraps at spaces (never inside a // word) while every glyph still animates on its own. const words: (typeof list)[] = []; for (const glyph of list) { if (/\s/u.test(glyph.ch)) words.push([glyph]); else if (words.length && !/\s/u.test(words[words.length - 1]![0]!.ch)) words[words.length - 1]!.push(glyph); else words.push([glyph]); } const Tag = as; return ( {children} ); } /* ------------------------------------------------------------------ */ export function TextShimmer({ children, as = "span", active = true, duration = 2200, className, }: { children: ReactNode; as?: ElementType; /** Stops the sweep and shows the text normally when false. */ active?: boolean; /** One sweep in milliseconds. */ duration?: number; className?: string; }) { const [ref, visible] = useInView(false, 0); const Tag = as; return ( {children} ); } 5b:T57b,/* Shared by alert.tsx, toast.tsx; each imports it. Edit freely. */ @layer theme, base, components, utilities; @layer components { [data-slot="feedback-message"] { display: block; animation: caliper-fade-in var(--duration-normal) var(--ease-out); } :is([data-slot="alert"], [data-slot="toast"])[data-variant="success"] [data-slot="feedback-icon"] { background: var(--success-subtle); color: var(--success); } :is([data-slot="alert"], [data-slot="toast"])[data-variant="warning"] [data-slot="feedback-icon"] { background: var(--warning-subtle); color: var(--warning); } :is([data-slot="alert"], [data-slot="toast"])[data-variant="error"] [data-slot="feedback-icon"] { background: var(--destructive-subtle); color: var(--destructive); } @container (max-width: 22rem) { [data-slot="feedback-copy"] { display: contents; } [data-slot="feedback-title"] { grid-column: 2; grid-row: 1; min-width: 0; padding-top: 0.25rem; } [data-slot="feedback-description"], [data-slot="feedback-action"] { grid-column: 1 / -1; margin-top: 0; } [data-slot="feedback-description"] { grid-row: 2; } [data-slot="feedback-action"] { grid-row: 3; } } @media (prefers-reduced-motion: reduce) { [data-slot="feedback-message"] { animation: none; } } } 5c:T465,/* alert.tsx's styles; it imports this file. Edit freely. */ @layer theme, base, components, utilities; @layer components { [data-slot="alert"] { container-type: inline-size; opacity: 1; transform: translateY(0); transition-property: opacity, transform, display; transition-duration: var(--duration-normal); transition-timing-function: var(--ease-out); transition-behavior: allow-discrete; } [data-slot="alert"][hidden] { display: none !important; opacity: 0; pointer-events: none; transition-duration: var(--duration-fast); } @starting-style { [data-slot="alert"]:not([hidden]) { opacity: 0; transform: translateY(var(--motion-enter-distance)); } } @container (max-width: 22rem) { [data-slot="alert"] > [data-slot="button"] { grid-column: 3; grid-row: 1; } } @media (prefers-reduced-motion: reduce) { [data-slot="alert"] { transition: none; transform: none !important; } @starting-style { [data-slot="alert"]:not([hidden]) { opacity: 1; transform: none; } } } } 5d:T136e,/* button.tsx's styles; it imports this file. Edit freely. */ @layer theme, base, components, utilities; @layer components { [data-slot="button"] { transition-property: background-color, color, border-color; transition-duration: var(--duration-fast); transition-timing-function: var(--ease-out); } /* Button material. Raised to press: a lit top edge and a small lift; the press travels 1px down and swaps the lift for an inner shade. Only translate animates (release on the settle curve); shadows swap. */ [data-slot="button"] { --b-bg: var(--raised); --b-bg-hover: var(--raised-hover); --b-bg-press: var(--raised-press); --b-fg: var(--foreground); --b-shadow: var(--shadow-raised); --b-shadow-press: var(--shadow-raised-press); background-color: var(--b-bg); color: var(--b-fg); box-shadow: var(--b-shadow); transition-property: background-color, color, border-color, translate; transition-duration: var(--duration-fast), var(--duration-fast), var(--duration-fast), var(--duration-normal); transition-timing-function: var(--ease-out), var(--ease-out), var(--ease-out), var(--ease-settle); } [data-slot="button"][data-variant="default"] { --b-bg: var(--accent); --b-bg-hover: var(--accent-hover); --b-bg-press: var(--accent-press); --b-fg: var(--accent-foreground); --b-shadow: var(--shadow-accent); --b-shadow-press: var(--shadow-accent-press); } [data-slot="button"][data-variant="destructive"] { --b-bg: var(--danger-fill); --b-bg-hover: var(--danger-fill-hover); --b-bg-press: var(--danger-fill-press); --b-fg: var(--danger-fill-foreground); --b-shadow: var(--shadow-danger); --b-shadow-press: var(--shadow-danger-press); } [data-slot="button"][data-variant="ghost"] { --b-bg: transparent; --b-bg-hover: var(--muted); --b-bg-press: var(--muted); --b-fg: var(--muted-foreground); --b-shadow: none; --b-shadow-press: none; } @media (hover: hover) { [data-slot="button"]:hover { background-color: var(--b-bg-hover); } [data-slot="button"][data-variant="ghost"]:hover { color: var(--foreground); } } [data-slot="button"]:active:not(:disabled):not([aria-disabled="true"]):not( [aria-busy="true"] ) { translate: 0 var(--motion-press-travel); background-color: var(--b-bg-press); box-shadow: var(--b-shadow-press); transition-duration: var(--duration-fast), var(--duration-fast), var(--duration-fast), 90ms; transition-timing-function: var(--ease-out); } [data-slot="button"]:is(:disabled, [aria-disabled="true"]):not([aria-busy="true"]) { background-color: var(--sunken); color: var(--muted-foreground); box-shadow: inset 0 0 0 1px var(--border); } [data-slot="button"][data-variant="ghost"]:is(:disabled, [aria-disabled="true"]):not( [aria-busy="true"] ) { background-color: transparent; box-shadow: none; } /* Loading keeps the exact width: the label stays in flow but invisible. */ [data-slot="button-label"] { display: inline-flex; align-items: center; gap: inherit; } /* Opacity, not visibility, so the label still names the button. */ [data-slot="button-label"][data-hidden="true"] { opacity: 0; } [data-slot="button-busy"] { position: absolute; inset: 0; display: grid; place-items: center; } [data-slot="button-feedback"] { display: inline-flex; align-items: center; gap: inherit; overflow: clip; transition: width var(--duration-normal) var(--ease-out); } [data-slot="button-feedback-label"] { display: inline-flex; flex-shrink: 0; align-items: center; gap: inherit; width: max-content; } [data-slot="button-feedback-label"][data-enter="true"] { animation: caliper-feedback-enter var(--duration-normal) var(--ease-out); } [data-slot="button"][aria-busy="true"] { pointer-events: none; } [data-slot="button"][data-action-phase="error"] { color: var(--danger); } @media (prefers-reduced-motion: reduce) { [data-slot="button"], [data-slot="button-feedback"] { transition: none; } [data-slot="button"]:active:not(:disabled):not([aria-disabled="true"]):not( [aria-busy="true"] ) { translate: none; } [data-slot="button-feedback-label"], [data-slot="button-feedback-label"][data-enter="true"] { animation: none; } } /* Toggle: pressed is recessed, as a toggled tool in a button group is. */ /* Four attributes, so it wins over the group and toolbar pressed rules in any stylesheet order. */ [data-slot="button"][data-variant="ghost"][data-toggle][aria-pressed="true"] { --b-bg: var(--sunken); --b-bg-hover: var(--sunken); --b-bg-press: var(--sunken); --b-fg: var(--foreground); --b-shadow: var(--shadow-sunken); --b-shadow-press: var(--shadow-sunken); } } 5e:T519,/* Shared by combobox.tsx, input.tsx, select-menu.tsx, select.tsx, textarea.tsx; each imports it. Edit freely. */ @layer theme, base, components, utilities; @layer components { @media (hover: hover) { :is([data-slot="input"], [data-slot="textarea"], [data-slot="select"]):hover:enabled:not(:focus-visible):not([aria-invalid="true"]) { box-shadow: var(--shadow-field-hover); } } :is([data-slot="input"], [data-slot="textarea"], [data-slot="select"]):focus-visible { outline: none; box-shadow: var(--shadow-field-focus); transition: none; } :is([data-slot="input"], [data-slot="textarea"], [data-slot="select"])[aria-invalid="true"] { box-shadow: var(--shadow-field-invalid); } :is([data-slot="input"], [data-slot="textarea"], [data-slot="select"])[aria-invalid="true"]:focus-visible { box-shadow: var(--shadow-field-invalid), 0 0 0 4px color-mix(in srgb, var(--danger) 18%, transparent); } :is([data-slot="input"], [data-slot="textarea"], [data-slot="select"]):disabled { background-color: var(--sunken); box-shadow: var(--shadow-field-quiet); color: var(--muted-foreground); } :is([data-slot="input"], [data-slot="textarea"])[readonly] { background-color: var(--sunken); box-shadow: var(--shadow-field-quiet); } } 5f:T8c5,/* input.tsx's styles; it imports this file. Edit freely. */ @layer theme, base, components, utilities; @layer components { /* Recessed to fill. One ring for every field: 3:1 at rest, darker on hover, a 2px ember ring with a soft halo on focus, danger when invalid. Disabled and read-only drop into the sunken fill and stay legible. */ [data-slot="input-group"] { border: 0; background-color: var(--field); box-shadow: var(--shadow-field); transition: box-shadow var(--duration-fast) var(--ease-out); } @media (hover: hover) { [data-slot="input-group"]:not([data-disabled]):not([data-invalid]):hover:not(:focus-within) { box-shadow: var(--shadow-field-hover); } } [data-slot="input-group"]:focus-within { outline: none; box-shadow: var(--shadow-field-focus); transition: none; } [data-slot="input-group"][data-invalid] { box-shadow: var(--shadow-field-invalid); } [data-slot="input-group"][data-invalid]:focus-within { box-shadow: var(--shadow-field-invalid), 0 0 0 4px color-mix(in srgb, var(--danger) 18%, transparent); } [data-slot="input-group"][data-disabled] { background-color: var(--sunken); box-shadow: var(--shadow-field-quiet); color: var(--muted-foreground); } [data-slot="input-group"][data-readonly] { background-color: var(--sunken); box-shadow: var(--shadow-field-quiet); } [data-slot="input-bare"] { border: 0; box-shadow: none; outline: none; } [data-slot="input-affix"] { display: inline-flex; align-items: center; height: 20px; padding-inline-end: 10px; margin-inline-end: 2px; color: var(--muted-foreground); box-shadow: 1px 0 0 var(--border); white-space: nowrap; } [data-slot="input-affix"]:dir(rtl) { box-shadow: -1px 0 0 var(--border); } [data-slot="input-affix"]:has(> svg:only-child) { padding-inline-end: 0; box-shadow: none; } [data-slot="input-trailing"] { display: inline-flex; align-items: center; gap: 6px; color: var(--muted-foreground); white-space: nowrap; font-size: 12px; } :is([data-slot="input-affix"], [data-slot="input-trailing"]) svg { width: 16px; height: 16px; } } 60:T5e5,/* prediction-market.tsx's styles; it imports this file. Edit freely. */ @layer theme, base, components, utilities; @layer components { [data-slot="outcome"] { position: relative; display: flex; align-items: center; min-height: 3rem; padding: 0 0.875rem; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-control); cursor: pointer; transition: border-color var(--duration-fast) var(--ease-out); } [data-slot="outcome"] input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; } [data-slot="outcome-bar"] { position: absolute; inset: 0; background: color-mix(in srgb, var(--chart-1) 14%, transparent); transform-origin: left; transition: transform var(--duration-travel) var(--ease-showcase), background-color var(--duration-fast) var(--ease-out); } [data-slot="outcome"]:hover { border-color: var(--muted-foreground); } [data-slot="outcome"][data-selected="true"] { border-color: var(--foreground); box-shadow: inset 0 0 0 1px var(--foreground); } [data-slot="outcome"][data-selected="true"] [data-slot="outcome-bar"] { background: color-mix(in srgb, var(--chart-1) 26%, transparent); } [data-slot="outcome"]:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { [data-slot="outcome-bar"] { transition: none; animation: none; } } } 61:Tcde,/* text-motion.tsx's styles; it imports this file. Edit freely. */ @layer theme, base, components, utilities; @layer components { [data-slot="reveal-unit"] { display: inline-block; } [data-slot="text-reveal"][data-mode="stagger"] [data-slot="reveal-unit"] { opacity: 0; transform: translateY(0.55em); filter: blur(5px); } [data-slot="text-reveal"][data-mode="stagger"][data-state="shown"] [data-slot="reveal-unit"] { opacity: 1; transform: none; filter: none; transition: opacity var(--duration-deliberate) var(--ease-out), transform var(--duration-deliberate) var(--ease-out), filter var(--duration-deliberate) var(--ease-out); transition-delay: calc(var(--i, 0) * var(--stagger, 36ms)); } [data-slot="text-reveal"][data-mode="scroll"] [data-slot="reveal-unit"] { transition: opacity var(--duration-fast) linear; } [data-slot="title-mask"] { display: inline-block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; vertical-align: top; } [data-slot="title-word"] { display: inline-block; transform: translateY(110%); transition: transform var(--duration-travel) var(--ease-showcase); transition-delay: calc(var(--i, 0) * 60ms); } [data-slot="in-view-title"][data-state="shown"] [data-slot="title-word"] { transform: none; } [data-slot="title-eyebrow"] { opacity: 0; transition: opacity var(--duration-normal) var(--ease-out); } [data-slot="in-view-title"][data-state="shown"] [data-slot="title-eyebrow"] { opacity: 1; } [data-slot="title-rule"] { width: 3rem; height: 2px; border-radius: 2px; background: var(--chart-1); transform: scaleX(0); transform-origin: left; transition: transform var(--duration-travel) var(--ease-showcase) 240ms; } [data-slot="in-view-title"][data-align="center"] [data-slot="title-rule"] { transform-origin: center; } [data-slot="in-view-title"][data-state="shown"] [data-slot="title-rule"] { transform: scaleX(1); } [data-slot="text-shimmer"] { color: var(--muted-foreground); } [data-slot="text-shimmer"][data-active="true"] { color: transparent; background-image: linear-gradient( 100deg, var(--muted-foreground) 38%, var(--foreground) 50%, var(--muted-foreground) 62% ); background-size: 250% 100%; background-position: 120% 0; -webkit-background-clip: text; background-clip: text; animation: caliper-shimmer var(--shimmer, 2200ms) linear infinite; } [data-slot="text-shimmer"][data-active="true"][data-visible="false"] { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { [data-slot="text-reveal"][data-mode="stagger"] [data-slot="reveal-unit"] { opacity: 1; transform: none; filter: none; transition: none; } [data-slot="title-word"], [data-slot="title-rule"], [data-slot="title-eyebrow"] { transform: none; opacity: 1; transition: none; } [data-slot="text-shimmer"][data-active="true"] { background-image: none; color: var(--muted-foreground); animation: none; } } @keyframes caliper-shimmer { to { background-position: -120% 0; } } } 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@radix-ui/react-slot",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-slot","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@radix-ui/react-slot"}]]}]}],["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"clsx"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"tailwind-merge"}]]}]}]]}],["$","$L52",null,{"namespace":"@caliper","registryDependencies":["https://caliperui.site/r/styles.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"ui/alert.tsx","content":"$54","type":"registry:ui","target":"components/ui/alert.tsx"},{"path":"ui/button.tsx","content":"$55","type":"registry:ui","target":"components/ui/button.tsx"},{"path":"ui/feedback.tsx","content":"import { CircleCheck, CircleX, Info, LoaderCircle, TriangleAlert } from \"lucide-react\";\nimport \"./feedback.css\";\n\nexport type FeedbackVariant = \"neutral\" | \"success\" | \"warning\" | \"error\";\n\nconst icons = {\n neutral: Info,\n success: CircleCheck,\n warning: TriangleAlert,\n error: CircleX,\n};\n\nexport function FeedbackIcon({\n variant,\n loading = false,\n}: {\n variant: FeedbackVariant;\n loading?: boolean;\n}) {\n const Icon = loading ? LoaderCircle : icons[variant];\n return (\n \n \n \n \n \n );\n}\n","type":"registry:ui","target":"components/ui/feedback.tsx"},{"path":"ui/field.tsx","content":"$56","type":"registry:ui","target":"components/ui/field.tsx"},{"path":"ui/input.tsx","content":"$57","type":"registry:ui","target":"components/ui/input.tsx"},{"path":"ui/label.tsx","content":"import type { ComponentProps } from \"react\";\nimport { cn } from \"./lib/cn\";\n\nexport function Label({ className, ...props }: ComponentProps<\"label\">) {\n return (\n \n );\n}\n","type":"registry:ui","target":"components/ui/label.tsx"},{"path":"ui/lib/cn.ts","content":"import { clsx, type ClassValue } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n extend: { theme: { radius: [\"control\", \"surface\", \"overlay\"], shadow: [\"overlay\"] } },\n});\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","type":"registry:ui","target":"components/ui/lib/cn.ts"},{"path":"ui/number-tween.tsx","content":"$58","type":"registry:ui","target":"components/ui/number-tween.tsx"},{"path":"ui/prediction-market.tsx","content":"$59","type":"registry:ui","target":"components/ui/prediction-market.tsx"},{"path":"ui/text-motion.tsx","content":"$5a","type":"registry:ui","target":"components/ui/text-motion.tsx"},{"path":"ui/shared/alert.css","content":"$5b","type":"registry:file","target":"components/ui/shared/alert.css"},{"path":"ui/alert.css","content":"$5c","type":"registry:file","target":"components/ui/alert.css"},{"path":"ui/shared/loading-indicator.css","content":"/* Shared by button.tsx, confirm-morph.tsx, expanding-button-group.tsx, field.tsx; each imports it. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n [data-slot=\"loading-indicator\"] {\n animation: caliper-spin var(--duration-loading) var(--ease-linear) infinite;\n }\n\n @media (prefers-reduced-motion: reduce) {\n [data-slot=\"loading-indicator\"] {\n animation: none;\n }\n }\n}\n","type":"registry:file","target":"components/ui/shared/loading-indicator.css"},{"path":"ui/button.css","content":"$5d","type":"registry:file","target":"components/ui/button.css"},{"path":"ui/feedback.css","content":"/* feedback.tsx's styles; it imports this file. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n [data-slot=\"feedback-icon\"] {\n display: flex;\n width: 2rem;\n height: 2rem;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border-radius: var(--radius-surface);\n background: var(--muted);\n color: var(--muted-foreground);\n transition:\n color var(--duration-fast) var(--ease-out),\n background-color var(--duration-fast) var(--ease-out);\n }\n [data-slot=\"feedback-symbol\"] {\n display: flex;\n animation: caliper-feedback-symbol-enter var(--duration-normal) var(--ease-out);\n }\n [data-slot=\"feedback-icon\"] svg {\n width: 1rem;\n height: 1rem;\n }\n\n @media (prefers-reduced-motion: reduce) {\n [data-slot=\"feedback-icon\"] {\n transition: none;\n transform: none !important;\n }\n [data-slot=\"feedback-symbol\"] {\n animation: none;\n }\n }\n}\n","type":"registry:file","target":"components/ui/feedback.css"},{"path":"ui/shared/field-message.css","content":"/* Shared by date-input.tsx, field.tsx, scrub-field.tsx; each imports it. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n [data-slot=\"field-message\"] {\n display: flex;\n align-items: flex-start;\n gap: 6px;\n min-height: 18px;\n margin: 0;\n font-size: 12px;\n line-height: 18px;\n color: var(--muted-foreground);\n }\n [data-slot=\"field-message\"] svg {\n flex: none;\n width: 14px;\n height: 14px;\n margin-top: 2px;\n }\n [data-slot=\"field-message\"][data-tone=\"error\"] {\n color: var(--danger);\n }\n [data-slot=\"field-message\"][data-tone=\"success\"] {\n color: var(--success);\n }\n}\n","type":"registry:file","target":"components/ui/shared/field-message.css"},{"path":"ui/field.css","content":"/* field.tsx's styles; it imports this file. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n [data-slot=\"field-count\"] {\n margin-left: auto;\n color: var(--muted-foreground);\n font-family: var(--font-mono);\n font-size: 11px;\n font-variant-numeric: tabular-nums;\n }\n}\n","type":"registry:file","target":"components/ui/field.css"},{"path":"ui/shared/input.css","content":"/* Shared by combobox.tsx, input.tsx; each imports it. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n [data-slot=\"input\"] {\n transition-property: background-color, color, border-color;\n transition-duration: var(--duration-fast);\n transition-timing-function: var(--ease-out);\n }\n\n /* Recessed to fill. One ring for every field: 3:1 at rest, darker on\n hover, a 2px ember ring with a soft halo on focus, danger when invalid.\n Disabled and read-only drop into the sunken fill and stay legible. */\n [data-slot=\"input\"] {\n border: 0;\n background-color: var(--field);\n box-shadow: var(--shadow-field);\n transition: box-shadow var(--duration-fast) var(--ease-out);\n }\n\n @media (prefers-reduced-motion: reduce) {\n [data-slot=\"input\"] {\n transition: none;\n }\n }\n}\n","type":"registry:file","target":"components/ui/shared/input.css"},{"path":"ui/shared/input-2.css","content":"$5e","type":"registry:file","target":"components/ui/shared/input-2.css"},{"path":"ui/input.css","content":"$5f","type":"registry:file","target":"components/ui/input.css"},{"path":"ui/shared/prompt-suggestion.css","content":"/* Shared by blog-grid.tsx, changelog-feed.tsx, prediction-market.tsx, prompt-input.tsx; each imports it. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n [data-slot=\"prompt-suggestion\"] {\n padding: 0.375rem 0.75rem;\n border: 1px solid var(--border);\n border-radius: 999px;\n font-size: 0.8125rem;\n color: var(--muted-foreground);\n outline: none;\n transition:\n background-color var(--duration-fast) var(--ease-out),\n color var(--duration-fast) var(--ease-out);\n }\n [data-slot=\"prompt-suggestion\"]:hover:not(:disabled) {\n background: var(--muted);\n color: var(--foreground);\n }\n [data-slot=\"prompt-suggestion\"]:focus-visible {\n outline: 2px solid var(--ring);\n outline-offset: 2px;\n }\n}\n","type":"registry:file","target":"components/ui/shared/prompt-suggestion.css"},{"path":"ui/prediction-market.css","content":"$60","type":"registry:file","target":"components/ui/prediction-market.css"},{"path":"ui/text-motion.css","content":"$61","type":"registry:file","target":"components/ui/text-motion.css"}],"className":"h-[70svh] min-h-80"}]]}]