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:T30ae,"use client"; import { memo, useCallback, useRef, useState } from "react"; import { motion } from "motion/react"; import { useReducedMotion } from "@/hooks/use-reduced-motion"; import { cn } from "@/lib/utils"; // Layout in sheet units; everything is placed in percentages of these, so // the sheet scales down on narrow screens without re-measuring. const D = 48; // bubble diameter const PITCH_X = 58; // Hex packing: rows sit sqrt(3)/2 of the pitch apart, offset by half. const PITCH_Y = 51; const PAD = 20; const EASE_OUT = [0.23, 1, 0.32, 1] as const; // The squash is quick so a drag across a row reads as a string of pops, // not a queue of animations. const POP = { duration: 0.18, times: [0, 0.35, 1], ease: EASE_OUT }; // A little bounce as the air comes back: the one place it belongs. const INFLATE = { type: "spring", duration: 0.4, bounce: 0.35 } as const; // Reset ripples diagonally from the top left corner. const WAVE_STEP = 0.03; // Clear plastic is a physical material, so the dome is built from light // rather than a fill colour: a hard specular glint up top left, a softer // reflection low on the right, a bright rim where the film curves away, and // a shadow side. White and black at low alpha read as clear plastic on // either theme's surface. const DOME = [ "radial-gradient(ellipse 24% 14% at 36% 25%, light-dark(oklch(1 0 0 / 0.95), oklch(1 0 0 / 0.55)), oklch(1 0 0 / 0) 100%)", "radial-gradient(ellipse 30% 9% at 58% 83%, light-dark(oklch(1 0 0 / 0.7), oklch(1 0 0 / 0.14)), oklch(1 0 0 / 0) 100%)", "radial-gradient(circle at 40% 35%, light-dark(oklch(1 0 0 / 0.6), oklch(1 0 0 / 0.08)), light-dark(oklch(0 0 0 / 0.05), oklch(1 0 0 / 0.02)) 78%)", ].join(", "); const DOME_EDGE = [ "inset 0 0 0 1px light-dark(oklch(0 0 0 / 0.09), oklch(1 0 0 / 0.14))", "inset -3px -5px 9px light-dark(oklch(0 0 0 / 0.1), oklch(0 0 0 / 0.55))", "inset 2px 3px 5px light-dark(oklch(1 0 0 / 1), oklch(1 0 0 / 0.07))", "0 5px 9px -4px light-dark(oklch(0 0 0 / 0.22), oklch(0 0 0 / 0.8))", ].join(", "); type Cell = { row: number; col: number; x: number; y: number }; function layout(rows: number, cols: number) { const cells: Cell[] = []; for (let row = 0; row < rows; row++) { for (let col = 0; col < cols; col++) { cells.push({ row, col, x: PAD + D / 2 + col * PITCH_X + (row % 2 ? PITCH_X / 2 : 0), y: PAD + D / 2 + row * PITCH_Y, }); } } return { cells, width: PAD * 2 + D + (cols - 1) * PITCH_X + PITCH_X / 2, height: PAD * 2 + D + (rows - 1) * PITCH_Y, }; } export function BubbleWrap({ rows = 4, cols = 6, label = "Bubble wrap", onPop, onComplete, className, }: { rows?: number; cols?: number; label?: string; onPop?: (popped: number, total: number) => void; onComplete?: () => void; className?: string; }) { const reduceMotion = !!useReducedMotion(); const [{ cells, width, height }] = useState(() => layout(rows, cols)); const total = cells.length; const [popped, setPopped] = useState(() => Array(total).fill(false), ); const poppedRef = useRef(popped); const [active, setActive] = useState(0); const sheet = useRef(null); const buttons = useRef<(HTMLButtonElement | null)[]>([]); const drag = useRef<{ id: number; x: number; y: number } | null>(null); const count = popped.filter(Boolean).length; const register = useCallback((i: number, el: HTMLButtonElement | null) => { buttons.current[i] = el; }, []); const pop = useCallback( (i: number) => { if (poppedRef.current[i]) return; const next = poppedRef.current.slice(); next[i] = true; poppedRef.current = next; setPopped(next); navigator.vibrate?.(8); const n = next.filter(Boolean).length; onPop?.(n, next.length); if (n === next.length) onComplete?.(); }, [onPop, onComplete], ); const reset = () => { const next = Array(total).fill(false); poppedRef.current = next; setPopped(next); }; // Pops every bubble within reach of the segment from a to b, sampled // densely enough that a fast swipe can't jump over one. const sweep = (ax: number, ay: number, bx: number, by: number) => { const steps = Math.max( 1, Math.ceil(Math.hypot(bx - ax, by - ay) / (D / 4)), ); for (let s = 0; s <= steps; s++) { const px = ax + ((bx - ax) * s) / steps; const py = ay + ((by - ay) * s) / steps; cells.forEach((c, i) => { // 0.45 of the diameter: gaps between bubbles stay safe to touch. if (Math.hypot(c.x - px, c.y - py) < D * 0.45) pop(i); }); } }; const toUnits = (e: React.PointerEvent) => { const box = sheet.current!.getBoundingClientRect(); return { x: ((e.clientX - box.left) / box.width) * width, y: ((e.clientY - box.top) / box.height) * height, }; }; const endDrag = (e: React.PointerEvent) => { if (drag.current?.id === e.pointerId) drag.current = null; }; const move = useCallback( (i: number, key: string) => { const c = cells[i]; const at = (row: number, col: number) => cells.findIndex((x) => x.row === row && x.col === col); const next = { ArrowLeft: at(c.row, Math.max(c.col - 1, 0)), ArrowRight: at(c.row, Math.min(c.col + 1, cols - 1)), ArrowUp: at(Math.max(c.row - 1, 0), c.col), ArrowDown: at(Math.min(c.row + 1, rows - 1), c.col), Home: at(c.row, 0), End: at(c.row, cols - 1), }[key]; if (next === undefined) return false; setActive(next); buttons.current[next]?.focus(); return true; }, [cells, rows, cols], ); const done = count === total; return (

{count} / {total} popped {done ? "All clear" : ""}

{ if (e.button !== 0 || drag.current) return; e.currentTarget.setPointerCapture(e.pointerId); const p = toUnits(e); drag.current = { id: e.pointerId, ...p }; sweep(p.x, p.y, p.x, p.y); }} onPointerMove={(e) => { const d = drag.current; if (!d || d.id !== e.pointerId) return; const p = toUnits(e); sweep(d.x, d.y, p.x, p.y); d.x = p.x; d.y = p.y; }} onPointerUp={endDrag} onPointerCancel={endDrag} > {cells.map((c, i) => ( ))}

); } const Bubble = memo(function Bubble({ register, index, cell, popped, focusable, left, top, size, delay, reduceMotion, onPop, onFocusIndex, onMove, }: { register: (i: number, el: HTMLButtonElement | null) => void; index: number; cell: Cell; popped: boolean; focusable: boolean; left: number; top: number; size: number; delay: number; reduceMotion: boolean; onPop: (i: number) => void; onFocusIndex: (i: number) => void; onMove: (i: number, key: string) => boolean; }) { const squash = reduceMotion ? { duration: 0 } : popped ? POP : { ...INFLATE, delay }; // Each bubble's creases sit at a different angle so the popped sheet // doesn't look stamped. const twist = (index * 47) % 360; return ( ); }); export default function BubbleWrapDemo() { 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/bubble-wrap.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"}]]}]