4c: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:T1846,import React, { createContext, useContext, useEffect, useRef, useState } from 'react'; import { getScrollBarSizeKey, scrollAreaStyleKeys } from '../lib/core'; import type { ScrollAreaBaseProps, ScrollBarBaseProps } from '../lib/core'; import styles from './scroll-area.module.scss'; interface ScrollAreaContextValue { viewportRef: React.RefObject; } const ScrollAreaContext = createContext(null); function useScrollAreaContext(): ScrollAreaContextValue { const context = useContext(ScrollAreaContext); if (!context) { throw new Error('ScrollArea sub-components must be used within .'); } return context; } export interface ScrollAreaProps extends React.HTMLAttributes, ScrollAreaBaseProps {} const ScrollArea = React.forwardRef(({ className = '', children, ...props }, ref) => { const viewportRef = useRef(null); return (

{children}

); }); ScrollArea.displayName = 'ScrollArea'; interface ScrollBarMetrics { size: number; offset: number; visible: boolean; } export interface ScrollBarProps extends React.HTMLAttributes, ScrollBarBaseProps {} const ScrollBar = React.forwardRef(({ className = '', orientation = 'vertical', ...props }, ref) => { const context = useScrollAreaContext(); const trackRef = useRef(null); const dragRef = useRef(null); const [metrics, setMetrics] = useState({ size: 0, offset: 0, visible: false }); const isVertical = orientation === 'vertical'; useEffect(() => { const viewport = context.viewportRef.current; const track = trackRef.current; if (!viewport || !track) { return; } function update() { const track = trackRef.current; const viewport = context.viewportRef.current; if (!track || !viewport) { return; } const trackSize = isVertical ? track.clientHeight : track.clientWidth; const scrollable = isVertical ? viewport.scrollHeight - viewport.clientHeight : viewport.scrollWidth - viewport.clientWidth; const visibleSize = isVertical ? viewport.clientHeight : viewport.clientWidth; const total = visibleSize + scrollable; const size = total > 0 ? Math.max((visibleSize / total) * trackSize, 24) : 0; const maxOffset = trackSize - size; const scrollPos = isVertical ? viewport.scrollTop : viewport.scrollLeft; const offset = scrollable > 0 && maxOffset > 0 ? (scrollPos / scrollable) * maxOffset : 0; setMetrics({ size, offset, visible: scrollable > 0 }); } update(); viewport.addEventListener('scroll', update, { passive: true }); window.addEventListener('resize', update); const observer = new ResizeObserver(update); observer.observe(viewport); observer.observe(track); return () => { viewport.removeEventListener('scroll', update); window.removeEventListener('resize', update); observer.disconnect(); }; }, [context.viewportRef, isVertical]); function scrollToOffset(offset: number) { const track = trackRef.current; const viewport = context.viewportRef.current; if (!track || !viewport) { return; } const trackSize = isVertical ? track.clientHeight : track.clientWidth; const maxOffset = trackSize - metrics.size; const scrollable = isVertical ? viewport.scrollHeight - viewport.clientHeight : viewport.scrollWidth - viewport.clientWidth; if (maxOffset <= 0 || scrollable <= 0) { return; } const ratio = offset / maxOffset; if (isVertical) { viewport.scrollTop = ratio * scrollable; } else { viewport.scrollLeft = ratio * scrollable; } } function handlePointerDown(event: React.PointerEvent) { const track = trackRef.current; if (!track) { return; } track.setPointerCapture(event.pointerId); const rect = track.getBoundingClientRect(); const pos = isVertical ? event.clientY : event.clientX; const trackStart = isVertical ? rect.top : rect.left; const trackSize = isVertical ? rect.height : rect.width; const maxOffset = trackSize - metrics.size; const offset = Math.min(Math.max(0, pos - trackStart - metrics.size / 2), maxOffset); dragRef.current = offset; scrollToOffset(offset); } function handlePointerMove(event: React.PointerEvent) { const dragOffset = dragRef.current; const track = trackRef.current; if (dragOffset === null || !track || !track.hasPointerCapture(event.pointerId)) { return; } const rect = track.getBoundingClientRect(); const pos = isVertical ? event.clientY : event.clientX; const trackStart = isVertical ? rect.top : rect.left; const trackSize = isVertical ? rect.height : rect.width; const maxOffset = trackSize - metrics.size; const offset = Math.min(Math.max(0, pos - trackStart - metrics.size / 2), maxOffset); dragRef.current = offset; scrollToOffset(offset); } function handlePointerUp() { dragRef.current = null; } function setTrackRef(element: HTMLDivElement | null) { trackRef.current = element; if (typeof ref === 'function') { ref(element); } else if (ref) { ref.current = element; } } return (

); }); ScrollBar.displayName = 'ScrollBar'; export { ScrollArea, ScrollBar }; export default ScrollArea; 4b:["$","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":[null,["$","$L4c",null,{"namespace":"@tile-ui","registryDependencies":["@tile-ui/core","@tile-ui/styles"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"packages/react/src/components/scroll-area/scroll-area.tsx","content":"$4e","type":"registry:ui","target":"components/ui/scroll-area/scroll-area.tsx"},{"path":"packages/styles/scss/components/scroll-area.module.scss","content":"@use '../../../styles/variables/colors' as *;\n\n.root {\n\tposition: relative;\n\toverflow: hidden;\n}\n\n.viewport {\n\twidth: 100%;\n\theight: 100%;\n\toverflow: auto;\n\tscrollbar-width: none;\n\t-ms-overflow-style: none;\n\n\t&::-webkit-scrollbar {\n\t\tdisplay: none;\n\t}\n\n\t&:focus-visible {\n\t\toutline: none;\n\t\tbox-shadow: 0 0 0 3px color-mix(in srgb, $ring 50%, transparent);\n\t}\n}\n\n.scrollbar {\n\tposition: absolute;\n\tz-index: 10;\n\tdisplay: flex;\n\tpadding: 1px;\n\ttouch-action: none;\n\tuser-select: none;\n\ttransition: opacity $transition-fast;\n\n\t&.vertical {\n\t\ttop: 0;\n\t\tright: 0;\n\t\twidth: 0.625rem;\n\t\theight: 100%;\n\t\tborder-left: 1px solid transparent;\n\t}\n\n\t&.horizontal {\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\theight: 0.625rem;\n\t\twidth: 100%;\n\t\tflex-direction: column;\n\t\tborder-top: 1px solid transparent;\n\t}\n}\n\n.thumb {\n\tposition: relative;\n\tborder-radius: $radius-full;\n\tbackground-color: $border;\n\n\t.vertical & {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n\n\t.horizontal & {\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n}\n","type":"registry:file","target":"components/ui/scroll-area/scroll-area.module.scss"},{"path":"packages/react/src/components/scroll-area/index.ts","content":"export { ScrollArea, ScrollBar, type ScrollAreaProps, type ScrollBarProps } from './scroll-area';\n","type":"registry:ui","target":"components/ui/scroll-area/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]