5f: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 60:I[544296,["/_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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"ItemStyles"] 61:I[8513,["/_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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"ScrollArea"] 62:I[8513,["/_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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"ScrollBar"] 63: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 64:T6c26,"use client"; import { useEffect, useRef, useState } from "react"; import { animate, motion, useAnimate, useMotionValue, useMotionValueEvent, } from "motion/react"; import { useReducedMotion } from "@/hooks/use-reduced-motion"; import { cn } from "@/lib/utils"; type Coin = { id: number; value: number; leaving?: boolean }; type Body = { id: number; r: number; x: number; y: number; vx: number; vy: number; angle: number; }; // The jar, in px. Coins fall in through the mouth at MOUTH_Y and rest on // the glass floor. const JAR_W = 176; const STAGE_H = 260; // 40px above the mouth is where tapped coins appear, just clear of the lid. const MOUTH_Y = 40; const GLASS = 8; const FLOOR = STAGE_H - 12; const LEFT = GLASS; const RIGHT = JAR_W - GLASS; // The glass outlines. The inner wall sits 1px outside where coins stop, so // a resting coin touches the glass instead of overlapping it, and the base // is 10px of solid glass below the floor. The inner corners stay tight // (10px) because the physics floor is square: a rounder curve would let // resting coins sink into the glass. const OUTER = `M2 ${MOUTH_Y + 8} V${FLOOR - 6} Q2 ${STAGE_H - 2} 18 ${STAGE_H - 2} H${JAR_W - 18} Q${JAR_W - 2} ${STAGE_H - 2} ${JAR_W - 2} ${FLOOR - 6} V${MOUTH_Y + 8}`; const INNER = `M${GLASS - 1} ${MOUTH_Y + 8} V${FLOOR - 10} Q${GLASS - 1} ${FLOOR} ${GLASS + 9} ${FLOOR} H${JAR_W - GLASS - 9} Q${JAR_W - GLASS + 1} ${FLOOR} ${JAR_W - GLASS + 1} ${FLOOR - 10} V${MOUTH_Y + 8}`; // Tuned by feel: heavy enough that a coin drops like metal, a bounce that // dies after two or three hops, and slow impacts that don't bounce at all // so a pile can actually come to rest. const GRAVITY = 2400; const RESTITUTION = 0.32; const REST_SPEED = 40; const FLOOR_FRICTION = 0.86; const SUBSTEPS = 4; const ITERATIONS = 4; // Asleep once nothing has moved more than 0.2px a frame for 24 frames. // Position, not speed: in a pile the solver leaves small speeds that the // contacts cancel every frame, so speed alone would never settle. const SLEEP_MOVE = 0.2; const SLEEP_FRAMES = 24; const MAX_THROW = 1400; const EASE_OUT = [0.23, 1, 0.32, 1] as const; const HOME = { type: "spring", stiffness: 500, damping: 34 } as const; // Bigger coins are worth more, like real money. function radius(value: number) { return value >= 5 ? 18 : value >= 2 ? 16 : 14; } // A repeatable scatter for the coins the demo starts with, so the server and // the client agree on where they lie. function seeded(seed: number) { let s = seed; return () => { s = (s * 16807) % 2147483647; return s / 2147483647 - 0.5; }; } // Drops the starting coins one by one and lets each settle, so the jar // opens already holding a believable little pile. function pile(values: number[]) { const rand = seeded(7); const list: Body[] = []; values.forEach((value, id) => { const r = radius(value); list.push({ id, r, x: JAR_W / 2 + rand() * 90, y: MOUTH_Y - r, vx: rand() * 120, vy: 0, angle: rand() * Math.PI * 2, }); for (let i = 0; i < 90; i++) step(list, 1 / 60); }); for (let i = 0; i < 240; i++) step(list, 1 / 60); for (const b of list) b.vx = b.vy = 0; return list; } function step(bodies: Body[], dt: number) { const h = dt / SUBSTEPS; for (let s = 0; s < SUBSTEPS; s++) { for (const b of bodies) { b.vy += GRAVITY * h; b.x += b.vx * h; b.y += b.vy * h; // Rolling without slipping: distance over radius. b.angle += (b.vx * h) / b.r; } for (let it = 0; it < ITERATIONS; it++) { for (const b of bodies) { if (b.x < LEFT + b.r) { b.x = LEFT + b.r; if (b.vx < 0) b.vx = -b.vx * RESTITUTION; } else if (b.x > RIGHT - b.r) { b.x = RIGHT - b.r; if (b.vx > 0) b.vx = -b.vx * RESTITUTION; } if (b.y > FLOOR - b.r) { b.y = FLOOR - b.r; if (b.vy > 0) b.vy = b.vy < REST_SPEED ? 0 : -b.vy * RESTITUTION; b.vx *= FLOOR_FRICTION; } } for (let i = 0; i < bodies.length; i++) { for (let j = i + 1; j < bodies.length; j++) { const a = bodies[i]; const b = bodies[j]; const dx = b.x - a.x; const dy = b.y - a.y; const min = a.r + b.r; const d2 = dx * dx + dy * dy; if (d2 >= min * min || d2 === 0) continue; const d = Math.sqrt(d2); const nx = dx / d; const ny = dy / d; // Mass goes with area, so a big coin shoves a small one aside. const ma = a.r * a.r; const mb = b.r * b.r; const push = (min - d) / (ma + mb); a.x -= nx * push * mb; a.y -= ny * push * mb; b.x += nx * push * ma; b.y += ny * push * ma; const vn = (b.vx - a.vx) * nx + (b.vy - a.vy) * ny; if (vn >= 0) continue; const e = -vn < REST_SPEED ? 0 : RESTITUTION; const impulse = (-(1 + e) * vn) / (1 / ma + 1 / mb); a.vx -= (impulse / ma) * nx; a.vy -= (impulse / ma) * ny; b.vx += (impulse / mb) * nx; b.vy += (impulse / mb) * ny; // Metal on metal grips a little, which is what lets coins stack // instead of sliding off each other forever. const tx = -ny; const ty = nx; const vt = (b.vx - a.vx) * tx + (b.vy - a.vy) * ty; const grip = vt * 0.15; a.vx += (grip * tx * mb) / (ma + mb); a.vy += (grip * ty * mb) / (ma + mb); b.vx -= (grip * tx * ma) / (ma + mb); b.vy -= (grip * ty * ma) / (ma + mb); } } } } } // A random offset in [-spread / 2, spread / 2]. function jitter(spread: number) { return (Math.random() - 0.5) * spread; } function transformOf(b: Body) { return `translate(${(b.x - b.r).toFixed(2)}px, ${(b.y - b.r).toFixed(2)}px) rotate(${b.angle.toFixed(3)}rad)`; } function place(el: HTMLElement, b: Body) { el.style.transform = transformOf(b); } export function TipJar({ denominations = [1, 2, 5], initialCoins = [], currency = "$", capacity = 24, onChange, className, }: { denominations?: number[]; // Coins already in the jar when it first renders. initialCoins?: number[]; currency?: string; capacity?: number; onChange?: (total: number) => void; className?: string; }) { const reduceMotion = useReducedMotion(); const [start] = useState(() => { const settled = pile(initialCoins); return { coins: initialCoins.map((value, id) => ({ id, value })) as Coin[], bodies: settled, // Written once into the markup, so the pile is in place before // hydration instead of flashing in from the corner. transforms: new Map(settled.map((b) => [b.id, transformOf(b)])), total: initialCoins.reduce((sum, v) => sum + v, 0), }; }); const [coins, setCoins] = useState(start.coins); const [ghost, setGhost] = useState(null); const rootRef = useRef(null); const stageRef = useRef(null); const readoutRef = useRef(null); const bodies = useRef(start.bodies); const els = useRef(new Map()); const nextId = useRef(start.coins.length); const frame = useRef(0); const [jarScope, animateJar] = useAnimate(); const format = (v: number) => `${currency}${v.toFixed(2)}`; const total = coins.reduce((sum, c) => (c.leaving ? sum : sum + c.value), 0); const count = coins.filter((c) => !c.leaving).length; const full = count >= capacity; // Counts up to the new total rather than jumping, so each coin reads as // being added to what was there. const shown = useMotionValue(start.total); useMotionValueEvent(shown, "change", (v) => { if (readoutRef.current) readoutRef.current.textContent = format(v); }); useEffect(() => { if (reduceMotion) { shown.jump(total); if (readoutRef.current) readoutRef.current.textContent = format(total); return; } const controls = animate(shown, total, { duration: 0.5, ease: EASE_OUT }); return () => controls.stop(); // format only depends on currency, which the readout text covers. // eslint-disable-next-line react-hooks/exhaustive-deps }, [total, reduceMotion, shown]); useEffect(() => { const ref = frame; return () => cancelAnimationFrame(ref.current); }, []); const render = () => { for (const b of bodies.current) { const el = els.current.get(b.id); if (el) place(el, b); } }; // Runs only while something moves, then sleeps until the next coin. const wake = () => { if (frame.current) return; if (reduceMotion) { // Jump to where everything would come to rest. for (let i = 0; i < 600; i++) step(bodies.current, 1 / 60); for (const b of bodies.current) b.vx = b.vy = 0; render(); return; } let last = 0; let still = 0; const tick = (now: number) => { // The first frame only records the time. const dt = last ? Math.min((now - last) / 1000, 1 / 30) : 0; last = now; const list = bodies.current; const before = list.map((b) => [b.x, b.y]); step(list, dt); render(); const moving = list.some( (b, i) => Math.hypot(b.x - before[i][0], b.y - before[i][1]) > SLEEP_MOVE, ); still = moving || !dt ? 0 : still + 1; if (still > SLEEP_FRAMES) { for (const b of list) b.vx = b.vy = 0; frame.current = 0; return; } frame.current = requestAnimationFrame(tick); }; frame.current = requestAnimationFrame(tick); }; const add = ( value: number, at?: { x: number; y: number; vx: number; vy: number }, ) => { if (full) return; const r = radius(value); const id = nextId.current++; bodies.current.push({ id, r, // Dropped by button: a little off center, so coins don't stack in a // perfect column. x: Math.min( Math.max(at?.x ?? JAR_W / 2 + jitter(48), LEFT + r), RIGHT - r, ), y: Math.min(at?.y ?? r + 4, FLOOR - r), vx: at?.vx ?? 0, vy: at?.vy ?? 0, angle: jitter(Math.PI * 2), }); setCoins((c) => [...c, { id, value }]); onChange?.(total + value); wake(); }; const removeLast = () => { const last = coins.findLast((c) => !c.leaving); if (!last) return; onChange?.(total - last.value); const body = bodies.current.find((b) => b.id === last.id); bodies.current = bodies.current.filter((b) => b.id !== last.id); const el = els.current.get(last.id); if (reduceMotion || !body || !el) { setCoins((c) => c.filter((x) => x.id !== last.id)); wake(); return; } setCoins((c) => c.map((x) => (x.id === last.id ? { ...x, leaving: true } : x)), ); // The jar tips and wobbles back; everything inside gets jostled. animateJar( jarScope.current, { rotate: [0, -6, 4, -2, 0] }, { duration: 0.45, ease: "easeInOut" }, ); for (const b of bodies.current) { b.vx += jitter(160); b.vy -= 140 + jitter(120); } wake(); // The last coin hops out through the mouth and fades as it clears. const side = body.x < JAR_W / 2 ? -1 : 1; const from = `translate(${body.x - body.r}px, ${body.y - body.r}px) rotate(${body.angle}rad)`; const to = `translate(${body.x - body.r + side * 28}px, ${MOUTH_Y - 80}px) rotate(${body.angle + side * 2}rad)`; const exit = el.animate( [ { transform: from, opacity: 1 }, { transform: to, opacity: 0 }, ], { duration: 360, easing: "cubic-bezier(0.23, 1, 0.32, 1)", fill: "forwards", }, ); exit.onfinish = () => setCoins((c) => c.filter((x) => x.id !== last.id)); }; // Dragging a coin from the tray. const drag = useRef<{ pointer: number; value: number; home: { x: number; y: number }; offset: { x: number; y: number }; start: { x: number; y: number }; last: { x: number; y: number; t: number }; v: { x: number; y: number }; active: boolean; } | null>(null); const suppressClick = useRef(false); const gx = useMotionValue(0); const gy = useMotionValue(0); const toRoot = (clientX: number, clientY: number) => { const box = rootRef.current!.getBoundingClientRect(); return { x: clientX - box.left, y: clientY - box.top }; }; const release = (cancelled = false) => { const d = drag.current; drag.current = null; if (!d?.active) return; suppressClick.current = true; const stage = stageRef.current!.getBoundingClientRect(); const root = rootRef.current!.getBoundingClientRect(); const cx = gx.get() + root.left - stage.left; const cy = gy.get() + root.top - stage.top; const r = radius(d.value); const overJar = cx > -r && cx < JAR_W + r && cy < FLOOR && cy > -r * 2; if (overJar && !full && !cancelled) { const clamp = (v: number) => Math.min(Math.max(v, -MAX_THROW), MAX_THROW); setGhost(null); add(d.value, { x: cx, y: cy, vx: clamp(d.v.x), vy: clamp(d.v.y) }); return; } // Missed the jar: it springs home, carrying the throw's speed. Promise.all([ animate(gx, d.home.x, { ...HOME, velocity: d.v.x }), animate(gy, d.home.y, { ...HOME, velocity: d.v.y }), ]).then(() => { if (!drag.current) setGhost(null); }); }; return (

Leave a tip

{full ? "The jar is full. Thank you!" : "Tap a coin, or throw one in."}

{format(start.total)} {count} {count === 1 ? "coin" : "coins"}

Tip total {format(total)}

{/* Where the jar meets the table. */}

{coins.map((coin) => { const r = radius(coin.value); return (

{ if (!el) { els.current.delete(coin.id); return; } els.current.set(coin.id, el); const body = bodies.current.find((b) => b.id === coin.id); if (body && !coin.leaving) place(el, body); }} className="absolute top-0 left-0 transition-[opacity] duration-150 ease-out will-change-transform starting:opacity-0" style={{ width: r * 2, height: r * 2, transform: start.transforms.get(coin.id), }} >

); })} {/* A kraft paper label stuck on the front. Coins pile up behind it, the way they would behind a real one. Kraft and its stamped ink are physical materials, so they are raw colors; the dark theme only dims the room light on them. */}

TIPS thank you {/* A dashed stitch border, like a printed tag. */}

{denominations.map((value) => ( ))}

{ghost !== null && ( )}

); } function CoinFace({ value, currency, lifted = false, }: { value: number; currency: string; lifted?: boolean; }) { // Small change is nickel, the middle coin is bimetallic (a brass ring // around a nickel core), the big one is solid brass. const rim = value >= 2 ? BRASS : NICKEL; const core = value >= 5 ? BRASS : NICKEL; return ( {/* The sunken field, with the value struck in relief. */} = 5 ? 13 : 12, letterSpacing: "-0.02em", textShadow: "0 -0.5px 0 oklch(1 0 0 / 0.6), 0 0.75px 0 oklch(0 0 0 / 0.25)", }} > {currency} {value} ); } // Coin metals are physical materials, so they are raw colors that stay the // same in either theme: highlight, body, shadow, and the tone a struck // number takes on that metal. const NICKEL = { hi: "oklch(0.96 0.004 250)", mid: "oklch(0.82 0.008 250)", lo: "oklch(0.6 0.012 250)", ink: "oklch(0.4 0.014 250)", }; const BRASS = { hi: "oklch(0.95 0.085 95)", mid: "oklch(0.8 0.12 84)", lo: "oklch(0.6 0.11 70)", ink: "oklch(0.42 0.08 62)", }; export default function TipJarDemo() { return ; } 5e:["$","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","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion"}]]}]}]]}],["$","$L5f",null,{"namespace":"@xevrion","registryDependencies":["utils"]}]]}],["$","$L60",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Light Mode"}],["$","div",null,{"children":["$","$L61",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","shadow-raised",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","shadow-raised",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"0 0 0 1px oklch(0 0 0 / 0.06), 0 1px 2px oklch(0 0 0 / 0.06), 0 6px 16px -6px oklch(0 0 0 / 0.12)"}]]}]]}],["$","$L62",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L61",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","shadow-raised",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","shadow-raised",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"0 0 0 1px oklch(1 0 0 / 0.08), 0 1px 2px oklch(0 0 0 / 0.4), 0 6px 16px -6px oklch(0 0 0 / 0.6)"}]]}]]}],["$","$L62",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Theme"}],["$","div",null,{"children":["$","$L61",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","shadow-raised",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","shadow-raised",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--shadow-raised)"}]]}]]}],["$","$L62",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L63",null,{"files":[{"path":"components/tip-jar.tsx","content":"$64","type":"registry:component"},{"path":"hooks/use-reduced-motion.ts","content":"\"use client\";\n\nimport { useSyncExternalStore } from \"react\";\n\n// Motion's useReducedMotion reads the media query on the very first client\n// render, but the server can't know it, so every component that renders\n// differently under reduced motion broke hydration for those users. This\n// reports false during hydration, matching the server HTML, then the real\n// preference straight after, and follows it if it changes.\nconst query = \"(prefers-reduced-motion: reduce)\";\n\nfunction subscribe(onChange: () => void) {\n const media = window.matchMedia(query);\n media.addEventListener(\"change\", onChange);\n return () => media.removeEventListener(\"change\", onChange);\n}\n\nexport function useReducedMotion() {\n return useSyncExternalStore(\n subscribe,\n () => window.matchMedia(query).matches,\n () => false,\n );\n}\n","type":"registry:hook","target":"hooks/use-reduced-motion.ts"}],"className":"h-[70svh] min-h-80"}]]}]