60: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"] 61: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"] 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"],"ScrollArea"] 63: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"] 64: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"] 65:T45ac,"use client"; import { useEffect, useId, useRef, useState } from "react"; import { animate, motion, useMotionTemplate, useMotionValue } from "motion/react"; import { useReducedMotion } from "@/hooks/use-reduced-motion"; import { cn } from "@/lib/utils"; export type SortableGridItem = { id: string; label: string; icon: React.ReactNode }; const COLS = 3; // Positions are in percent of a tile's own size, so the grid needs no // measuring to render: the gap is 10% of a tile, one slot is 110%. const PITCH = 110; const TILE_WIDTH = `${100 / (COLS + (COLS - 1) * (PITCH / 100 - 1))}%`; // Mouse drags start after a small move, so a sloppy click stays a click. const MOUSE_THRESHOLD = 4; // Touch waits for a hold instead, leaving quick swipes to scroll the page. const LONG_PRESS = 250; // A finger that moves this far before the hold completes is scrolling. const TOUCH_SLOP = 8; // How far past the grid edge a tile can be pulled, in percent of a tile, // before it stiffens. Small enough that it never widens the page. const EDGE_GIVE = 8; const LIFT_SCALE = 1.05; // The lab-wide press scale, so a tap feels the same here as on any button. const PRESS_SCALE = 0.96; // No bounce anywhere: a tile that overshoots its slot reads as a wrong drop. const SHIFT = { type: "spring", duration: 0.35, bounce: 0 } as const; // Starts from the release velocity, so a flung tile glides home. const DROP = { type: "spring", duration: 0.4, bounce: 0 } as const; const LIFT = { type: "spring", duration: 0.25, bounce: 0 } as const; const PRESS = { type: "spring", duration: 0.15, bounce: 0 } as const; // Layered and transparent so it darkens whatever is underneath. The 1px ring // keeps the lifted edge visible in dark mode, where shadows barely show. const LIFTED_SHADOW = [ "0 0 0 1px light-dark(oklch(0 0 0 / 0.06), oklch(1 0 0 / 0.1))", "0 4px 8px light-dark(oklch(0 0 0 / 0.06), oklch(0 0 0 / 0.4))", "0 20px 40px -12px light-dark(oklch(0 0 0 / 0.24), oklch(0 0 0 / 0.8))", ].join(", "); const slot = (index: number) => ({ x: (index % COLS) * PITCH, y: Math.floor(index / COLS) * PITCH, }); // Gives freely at first, then stiffens so it never passes EDGE_GIVE. function resist(value: number, max: number) { if (value < 0) return EDGE_GIVE * Math.tanh(value / (EDGE_GIVE * 3)); if (value > max) return max + EDGE_GIVE * Math.tanh((value - max) / (EDGE_GIVE * 3)); return value; } export function SortableGrid({ items, onReorder, label, className, }: { items: SortableGridItem[]; onReorder: (items: SortableGridItem[]) => void; label: string; className?: string; }) { const reduceMotion = !!useReducedMotion(); const gridRef = useRef(null); const buttons = useRef(new Map()); const [dragId, setDragId] = useState(null); const [held, setHeld] = useState<{ id: string; before: SortableGridItem[] } | null>( null, ); const [focusId, setFocusId] = useState(items[0]?.id); const [announcement, setAnnouncement] = useState(""); const instructions = useId(); const rows = Math.ceil(items.length / COLS); // Pointer handlers outlive the render that created them. const latest = useRef({ items, onReorder }); const dragging = useRef(false); useEffect(() => { latest.current = { items, onReorder }; }); // Once a hold turns into a drag, the page must stop scrolling. Only a // non-passive native listener can cancel touchmove. useEffect(() => { const grid = gridRef.current; if (!grid) return; const block = (e: TouchEvent) => { if (dragging.current && e.cancelable) e.preventDefault(); }; grid.addEventListener("touchmove", block, { passive: false }); return () => grid.removeEventListener("touchmove", block); }, []); const name = (id: string) => items.find((i) => i.id === id)?.label ?? ""; const place = (index: number) => `row ${Math.floor(index / COLS) + 1}, column ${(index % COLS) + 1}`; const moveTo = (id: string, target: number) => { const list = latest.current.items; const from = list.findIndex((i) => i.id === id); const to = Math.max(0, Math.min(target, list.length - 1)); if (from === to || from < 0) return false; const next = [...list]; next.splice(to, 0, ...next.splice(from, 1)); // Kept current right away, so moves within one frame see the new order. latest.current.items = next; latest.current.onReorder(next); return true; }; const pointer = { // One percent of a tile, in px, measured when a drag starts. unit: () => (gridRef.current?.offsetWidth ?? 0) / (100 * COLS + (PITCH - 100) * (COLS - 1)), lift: (id: string) => { dragging.current = true; setDragId(id); }, move: (id: string, x: number, y: number) => { const col = Math.max(0, Math.min(Math.round(x / PITCH), COLS - 1)); const row = Math.max(0, Math.min(Math.round(y / PITCH), rows - 1)); moveTo(id, row * COLS + col); }, drop: (id: string) => { dragging.current = false; setDragId(null); const index = latest.current.items.findIndex((i) => i.id === id); setAnnouncement(`Dropped ${name(id)} at ${place(index)}.`); }, busy: () => dragging.current || held !== null, }; const onKeyDown = (id: string, e: React.KeyboardEvent) => { const index = items.findIndex((i) => i.id === id); const delta = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -COLS, ArrowDown: COLS }[ e.key ]; if (e.key === " " || e.key === "Enter") { e.preventDefault(); if (e.repeat || dragging.current) return; if (held?.id === id) { setHeld(null); setAnnouncement(`Dropped ${name(id)} at ${place(index)}.`); } else { setHeld({ id, before: items }); setAnnouncement( `Picked up ${name(id)} at ${place(index)}. Arrow keys move it, Space drops it, Escape cancels.`, ); } return; } if (e.key === "Escape" && held?.id === id) { e.preventDefault(); onReorder(held.before); setHeld(null); const back = held.before.findIndex((i) => i.id === id); setAnnouncement(`Cancelled. ${name(id)} is back at ${place(back)}.`); return; } if (delta === undefined) return; e.preventDefault(); const target = index + delta; // Up and down stop at the edges instead of wrapping to another column. if (target < 0 || target >= items.length) return; if (held?.id === id) { if (moveTo(id, target)) setAnnouncement(`Moved ${name(id)} to ${place(target)}.`); } else { const next = items[target].id; setFocusId(next); buttons.current.get(next)?.focus(); } }; return (

{/* Rendered in a stable order and placed by transform, so reordering never moves DOM nodes out from under focus or a drag. */} {[...items] .sort((a, b) => a.id.localeCompare(b.id)) .map((item) => { const index = items.indexOf(item); return ( { if (el) buttons.current.set(item.id, el); else buttons.current.delete(item.id); }} onFocus={() => setFocusId(item.id)} onBlur={() => { // Tabbing away while holding a tile drops it where it is. if (held?.id === item.id) { setHeld(null); setAnnouncement(`Dropped ${item.label} at ${place(index)}.`); } }} onKeyDown={(e) => onKeyDown(item.id, e)} /> ); })}

Drag to reorder, or press Space to pick up, arrow keys to move, Space to drop and Escape to cancel.

{announcement}

); } type PointerApi = { unit: () => number; lift: (id: string) => void; move: (id: string, x: number, y: number) => void; drop: (id: string) => void; busy: () => boolean; }; function Tile({ item, index, total, lifted, held, focusable, reduceMotion, describedBy, pointer, buttonRef, onFocus, onBlur, onKeyDown, }: { item: SortableGridItem; index: number; total: number; lifted: boolean; held: boolean; focusable: boolean; reduceMotion: boolean; describedBy: string; pointer: PointerApi; buttonRef: (el: HTMLButtonElement | null) => void; onFocus: () => void; onBlur: () => void; onKeyDown: (e: React.KeyboardEvent) => void; }) { const home = slot(index); const x = useMotionValue(home.x); const y = useMotionValue(home.y); const scale = useMotionValue(1); const zIndex = useMotionValue(0); const transform = useMotionTemplate`translate(${x}%, ${y}%) scale(${scale})`; const dragging = useRef(false); const state = useRef({ index, lifted, reduceMotion, pointer }); const cleanup = useRef<() => void>(undefined); useEffect(() => { state.current = { index, lifted, reduceMotion, pointer }; }); useEffect(() => () => cleanup.current?.(), []); const settle = (velocity?: { x: number; y: number }) => { const target = slot(state.current.index); if (state.current.reduceMotion) { x.jump(target.x); y.jump(target.y); if (!state.current.lifted) zIndex.set(0); return; } const spring = velocity ? DROP : SHIFT; const flights = [ animate(x, target.x, { ...spring, velocity: velocity?.x }), animate(y, target.y, { ...spring, velocity: velocity?.y }), ]; // Stays above its neighbours until it has landed. Promise.all(flights).then(() => { if (!state.current.lifted && !dragging.current) zIndex.set(0); }); }; // Every tile but the one under the pointer glides to its new slot. The // keyboard-held tile moves the same way, so both paths look alike. useEffect(() => { if (!dragging.current) settle(); // settle reads everything else from refs. // eslint-disable-next-line react-hooks/exhaustive-deps }, [index]); // Keyboard lift and drop. A pointer drop lowers the tile itself, once it // has landed (see settle), so it never slips under a neighbour mid-flight. useEffect(() => { const keyboardDrop = !lifted && zIndex.get() === 2; if (lifted) zIndex.set(2); if (reduceMotion) { scale.jump(1); if (keyboardDrop) zIndex.set(0); return; } if (dragging.current) return; const lift = animate(scale, lifted ? LIFT_SCALE : 1, LIFT); if (keyboardDrop) { zIndex.set(1); lift.then(() => { if (!state.current.lifted) zIndex.set(0); }); } }, [lifted, reduceMotion, scale, zIndex]); const onPointerDown = (e: React.PointerEvent) => { if (e.button !== 0 || !e.isPrimary || state.current.pointer.busy()) return; const touch = e.pointerType === "touch"; const start = { x: e.clientX, y: e.clientY }; const origin = { x: x.get(), y: y.get() }; const id = item.id; const max = { x: (COLS - 1) * PITCH, y: (Math.ceil(total / COLS) - 1) * PITCH }; let unit = 1; let last = start; let timer: ReturnType | undefined; if (!state.current.reduceMotion) animate(scale, PRESS_SCALE, PRESS); const follow = () => { const nx = resist(origin.x + (last.x - start.x) / unit, max.x); const ny = resist(origin.y + (last.y - start.y) / unit, max.y); x.set(nx); y.set(ny); state.current.pointer.move(id, nx, ny); }; const begin = () => { dragging.current = true; unit = state.current.pointer.unit() || 1; zIndex.set(2); state.current.pointer.lift(id); if (touch) navigator.vibrate?.(8); if (state.current.reduceMotion) scale.jump(1); else animate(scale, LIFT_SCALE, LIFT); follow(); }; const onMove = (ev: PointerEvent) => { if (ev.pointerId !== e.pointerId) return; last = { x: ev.clientX, y: ev.clientY }; if (dragging.current) { follow(); return; } const moved = Math.hypot(last.x - start.x, last.y - start.y); if (touch && moved > TOUCH_SLOP) finish(false); else if (!touch && moved > MOUSE_THRESHOLD) begin(); }; const finish = (drop: boolean) => { clearTimeout(timer); window.removeEventListener("pointermove", onMove); window.removeEventListener("pointerup", onUp); window.removeEventListener("pointercancel", onUp); cleanup.current = undefined; const wasDragging = dragging.current; dragging.current = false; if (!state.current.reduceMotion) animate(scale, 1, wasDragging ? LIFT : PRESS); if (!wasDragging) return; zIndex.set(1); // Keep the hand's speed, so a flick carries into the landing. settle(drop ? { x: x.getVelocity(), y: y.getVelocity() } : { x: 0, y: 0 }); state.current.pointer.drop(id); }; const onUp = (ev: PointerEvent) => { if (ev.pointerId === e.pointerId) finish(true); }; // Listening on window, not with pointer capture, so the drag survives // anything React does to the DOM mid-gesture. window.addEventListener("pointermove", onMove); window.addEventListener("pointerup", onUp); window.addEventListener("pointercancel", onUp); cleanup.current = () => finish(false); if (touch) timer = setTimeout(begin, LONG_PRESS); }; return ( e.preventDefault()} onFocus={onFocus} onBlur={onBlur} onKeyDown={onKeyDown} style={{ transform, zIndex, width: TILE_WIDTH, boxShadow: lifted ? LIFTED_SHADOW : "var(--shadow-raised)", }} className={cn( "absolute top-0 left-0 flex aspect-square origin-center touch-manipulation flex-col items-center justify-center gap-2.5 rounded-2xl bg-background text-foreground outline-hidden transition-[box-shadow] duration-200 ease-out select-none [-webkit-touch-callout:none] focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-foreground", lifted ? "cursor-grabbing" : "cursor-grab", )} > {item.label} ); } const APPS: SortableGridItem[] = [ { id: "a", label: "Mail", icon: ( <> ), }, { id: "b", label: "Calendar", icon: ( <> ), }, { id: "c", label: "Photos", icon: ( <> ), }, { id: "d", label: "Notes", icon: ( <> ), }, { id: "e", label: "Music", icon: ( <> ), }, { id: "f", label: "Maps", icon: ( <> ), }, { id: "g", label: "Weather", icon: ( <> ), }, { id: "h", label: "Clock", icon: ( <> ), }, { id: "i", label: "Files", icon: ( ), }, ]; export default function SortableGridDemo() { const [apps, setApps] = useState(APPS); return ; } 5f:["$","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"}]]}]}]]}],["$","$L60",null,{"namespace":"@xevrion","registryDependencies":["utils"]}]]}],["$","$L61",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":["$","$L62",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)"}]]}]]}],["$","$L63",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":["$","$L62",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)"}]]}]]}],["$","$L63",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":["$","$L62",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)"}]]}]]}],["$","$L63",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L64",null,{"files":[{"path":"components/sortable-grid.tsx","content":"$65","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"}]]}]