4d: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"] 4e: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/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"],"ItemStyles"] 4f:I[34002,["/_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"],"CodeEditor"] 50: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"] 51:T6776,"use client"; import * as React from "react"; import { motion, useMotionValue, useSpring, useTransform } from "motion/react"; import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@/lib/utils"; import * as Primitive from "@radix-ui/react-scroll-area"; import { motionTokens, useChoreography } from "@/lib/cojeev-motion/choreography"; import { useMotionVisibility } from "@/lib/cojeev-motion/use-motion-visibility"; import { acquirePageScrollbar, acquireElementScrollbar, pageScrollGeometry, scrollThumbPath, scrollVelocity } from "@/lib/cojeev-motion/scroll-thumb"; import { assignMotionRef } from "@/lib/cojeev-motion/refs"; function useScrollFeedback(host:React.RefObject,mountedElement:HTMLDivElement|null,orientation:"vertical"|"horizontal",documentScroll=false,scrollElement?:HTMLElement|null) { const {quiet}=useChoreography(); const {enabled,inView}=useMotionVisibility(host,mountedElement); const [dragging,setDragging]=React.useState(false); const hovered=React.useRef(false); const engagementTarget=useMotionValue(0),pointerTarget=useMotionValue(0),velocityTarget=useMotionValue(0),pressureTarget=useMotionValue(0); const engagement=useSpring(engagementTarget,motionTokens.spring.responsive),bend=useSpring(pointerTarget,motionTokens.spring.gentle),velocity=useSpring(velocityTarget,motionTokens.spring.responsive),pressure=useSpring(pressureTarget,motionTokens.spring.expressive); const contour=useTransform([engagement,bend,velocity,pressure],values=>scrollThumbPath(...values as [number,number,number,number])); const gripOffset=useTransform(velocity,value=>value*5); const active=!quiet&&enabled&&inView; React.useEffect(()=>{ if(!active){ for(const value of [engagementTarget,pointerTarget,velocityTarget,pressureTarget,engagement,bend,velocity,pressure])value.jump(0); host.current?.removeAttribute("data-scrolling"); }else{engagementTarget.set(dragging?1:hovered.current ? .65 : 0);pressureTarget.set(dragging?1:0);} },[active,dragging,host,engagementTarget,pointerTarget,velocityTarget,pressureTarget,engagement,bend,velocity,pressure]); React.useEffect(()=>{ const rail=host.current; const owner=scrollElement??(documentScroll?document.scrollingElement:rail?.closest('[data-slot="scroll-area"]')?.querySelector('[data-radix-scroll-area-viewport]')); if(!rail||!owner)return; const read=()=>orientation==="vertical"?owner.scrollTop:owner.scrollLeft; let previous=read(),time=performance.now(),timer:ReturnType|undefined; const onScroll=()=>{ const next=read(),now=performance.now(),delta=next-previous,impulse=scrollVelocity(delta,now-time); previous=next;time=now; if(!delta)return; rail.dataset.direction=delta>0?"forward":"backward"; if(!active)return; rail.dataset.scrolling="true";rail.dataset.scrollVelocity=String(Number(impulse.toFixed(3)));velocityTarget.set(impulse); clearTimeout(timer);timer=setTimeout(()=>{velocityTarget.set(0);rail.removeAttribute("data-scrolling");rail.removeAttribute("data-scroll-velocity")},120); }; const source=documentScroll?window:owner; source.addEventListener("scroll",onScroll,{passive:true}); return()=>{clearTimeout(timer);source.removeEventListener("scroll",onScroll);}; },[host,mountedElement,orientation,documentScroll,scrollElement,active,velocityTarget]); const hover=(value:boolean)=>{hovered.current=value;if(active)engagementTarget.set(dragging?1:value ? .65 : 0);if(!value&&!dragging)pointerTarget.set(0);}; const press=(value:boolean)=>{setDragging(value);if(active){pressureTarget.set(value?1:0);engagementTarget.set(value?1:hovered.current ? .65 : 0);}if(!value)pointerTarget.set(0);}; const point=(event:React.PointerEvent)=>{ const thumb=host.current?.querySelector('[data-slot="scroll-area-thumb"],[data-slot="page-scrollbar-thumb"]'); if(!active||!thumb)return; const rect=thumb.getBoundingClientRect(),offset=orientation==="vertical"?event.clientY-rect.top:event.clientX-rect.left,length=orientation==="vertical"?rect.height:rect.width; pointerTarget.set(Math.max(-1,Math.min(1,offset/Math.max(1,length)*2-1))); }; return {contour,gripOffset,active,dragging,hover,press,point}; } function ScrollThumbPaint({feedback,orientation="vertical"}:{feedback:ReturnType;orientation?:"vertical"|"horizontal"}) { return <>; } /** Radix positions its thumb from a `requestAnimationFrame` loop it invokes immediately. * Production minifiers read that IIFE's `@__PURE__` callee as a pure call and delete the * loop, leaving the thumb written only on a gesture's first frame. Repeat Radix's own * geometry from the live DOM so the paint survives any build, in any bundle a consumer * makes of this file. The follow loop is armed by a scroll event and releases itself as * soon as the position settles, so an idle scrollport costs nothing. */ function useThumbTracking(scrollbar: HTMLDivElement | null, orientation: "vertical" | "horizontal") { React.useEffect(() => { const viewport = scrollbar?.closest('[data-slot="scroll-area"]')?.querySelector("[data-radix-scroll-area-viewport]"); if (!scrollbar || !viewport) return; const vertical = orientation === "vertical"; const rail = getComputedStyle(scrollbar); let frame = 0, previous = NaN; const sync = () => { const position = vertical ? viewport.scrollTop : viewport.scrollLeft; const moved = position !== previous; previous = position; const thumb = scrollbar.querySelector('[data-slot="scroll-area-thumb"]'); if (!thumb) return moved; const padding = vertical ? parseFloat(rail.paddingTop) + parseFloat(rail.paddingBottom) : parseFloat(rail.paddingLeft) + parseFloat(rail.paddingRight); const travel = Math.max(0, (vertical ? scrollbar.clientHeight : scrollbar.clientWidth) - padding - (vertical ? thumb.offsetHeight : thumb.offsetWidth)); const maxScroll = Math.max(0, vertical ? viewport.scrollHeight - viewport.offsetHeight : viewport.scrollWidth - viewport.offsetWidth); // A right-to-left scrollport counts left from zero, so its thumb travels negative. const reversed = !vertical && rail.direction === "rtl"; const clamped = reversed ? Math.min(0, Math.max(-maxScroll, position)) : Math.min(maxScroll, Math.max(0, position)); const offset = maxScroll > 0 ? clamped / maxScroll * travel : 0; thumb.style.transform = vertical ? `translate3d(0, ${offset}px, 0)` : `translate3d(${offset}px, 0, 0)`; return moved; }; // Smooth, keyboard and inertial scrolling all keep moving after their last scroll // event, so follow the position until it stops changing rather than trusting events. const follow = () => { frame = sync() ? requestAnimationFrame(follow) : 0; }; const onScroll = () => { sync(); if (!frame) frame = requestAnimationFrame(follow); }; sync(); viewport.addEventListener("scroll", onScroll, { passive: true }); // An expanded or collapsed group changes the range without any scrolling of its own. const resize = new ResizeObserver(() => { previous = NaN; sync(); }); resize.observe(viewport); if (viewport.firstElementChild) resize.observe(viewport.firstElementChild); return () => { if (frame) cancelAnimationFrame(frame); resize.disconnect(); viewport.removeEventListener("scroll", onScroll); }; }, [scrollbar, orientation]); } export const scrollAreaVariants = cva("v-scroll", { variants: { variant: { default: "", ink: "-ink", plain: "-plain" } }, defaultVariants: { variant: "default" }, }); export type ScrollbarVariant = "organic" | "rounded" | "minimal"; export type ScrollbarAppearanceProps = { /** Visible thumb thickness in pixels. The 24px rail remains the hit target. */ scrollbarSize?: number; /** Thumb and active-rail color. */ scrollbarColor?: string; /** Organic contour is the default; rounded and minimal use simpler paint. */ scrollbarVariant?: ScrollbarVariant; }; export const defaultScrollbarAppearance = { scrollbarSize: 6, scrollbarColor: "var(--v-text-2)", scrollbarVariant: "organic", } as const satisfies Required; const ScrollbarAppearanceContext = React.createContext>(defaultScrollbarAppearance); function scrollbarAppearance( { scrollbarSize, scrollbarColor, scrollbarVariant }: ScrollbarAppearanceProps, inherited: Required = defaultScrollbarAppearance, ) { scrollbarSize ??= inherited.scrollbarSize; scrollbarColor ??= inherited.scrollbarColor; scrollbarVariant ??= inherited.scrollbarVariant; const size = Number.isFinite(scrollbarSize) ? Math.max(2, Math.min(16, scrollbarSize)) : 6; return { size, color: scrollbarColor, variant: scrollbarVariant, style: { "--scrollbar-size": `${size}px`, ...(scrollbarColor ? { "--scrollbar-color": scrollbarColor } : {}), } as React.CSSProperties, }; } export type ScrollbarProviderProps = React.PropsWithChildren; /** Mount once to share scrollbar appearance; individual controls may still override it. */ export function ScrollbarProvider({ children, scrollbarSize, scrollbarColor, scrollbarVariant }: ScrollbarProviderProps) { const inherited = React.useContext(ScrollbarAppearanceContext); const ownsRootPolicy = inherited === defaultScrollbarAppearance; const appearance = scrollbarAppearance({ scrollbarSize, scrollbarColor, scrollbarVariant }, inherited); React.useEffect(() => { if (!ownsRootPolicy) return; const root = document.documentElement; const previousPolicy = root.getAttribute("data-scrollbar-policy"); const previousSize = root.style.getPropertyValue("--cojeev-scrollbar-size"); const previousColor = root.style.getPropertyValue("--cojeev-scrollbar-color"); root.dataset.scrollbarPolicy = "cojeev"; root.style.setProperty("--cojeev-scrollbar-size", `${appearance.size}px`); root.style.setProperty("--cojeev-scrollbar-color", appearance.color ?? defaultScrollbarAppearance.scrollbarColor); return () => { if (previousPolicy === null) root.removeAttribute("data-scrollbar-policy"); else root.setAttribute("data-scrollbar-policy", previousPolicy); if (previousSize) root.style.setProperty("--cojeev-scrollbar-size", previousSize); else root.style.removeProperty("--cojeev-scrollbar-size"); if (previousColor) root.style.setProperty("--cojeev-scrollbar-color", previousColor); else root.style.removeProperty("--cojeev-scrollbar-color"); }; }, [ownsRootPolicy, appearance.size, appearance.color]); return {children}; } export type ScrollAreaProps = React.ComponentProps & VariantProps & { viewportClassName?: string; /** Native viewport attributes, including a ref, scroll listener or accessible name. */ viewportProps?: React.ComponentProps; /** Compose a primitive around the actual scrolling element, preserving its ref. */ viewportWrapper?: (viewport: React.ReactElement) => React.ReactNode; } & ScrollbarAppearanceProps; function ScrollViewport({ style, ...props }: React.ComponentProps) { // An asChild parent such as Select.Viewport supplies an overflow shorthand. // Normalize it before Radix writes its own axis styles to the same DOM node. const { overflow, ...rest } = style ?? {}; const axes = typeof overflow === "string" ? overflow.split(/\s+/) : []; const normalized = axes.length ? { ...rest, overflowX: rest.overflowX ?? axes[0], overflowY: rest.overflowY ?? axes[1] ?? axes[0] } as React.CSSProperties : rest; return ; } export function ScrollArea({ className, variant, children, viewportClassName, viewportProps, viewportWrapper, type = "auto", scrollbarSize, scrollbarColor, scrollbarVariant, style, ...props }: ScrollAreaProps) { const inheritedAppearance = React.useContext(ScrollbarAppearanceContext); const appearance = scrollbarAppearance({ scrollbarSize, scrollbarColor, scrollbarVariant }, inheritedAppearance); const viewport = ( {children} ); return {viewportWrapper ? viewportWrapper(viewport) : viewport} ; } export type ScrollAreaListProps = ScrollAreaProps & { maxHeight?: React.CSSProperties["maxHeight"] }; /** Internal list scrollport: its owning menu/list retains focus and semantics. */ export function ScrollAreaList({ maxHeight = "var(--list-scroll-max-height, min(320px, 60dvh))", className, style, viewportProps, ...props }: ScrollAreaListProps) { return ; } /** Preserve a consumer's native asChild element while wrapping only its contents. */ export function scrollAreaListChildren(children: React.ReactNode, asChild?: boolean) { if (asChild && React.isValidElement<{ children?: React.ReactNode }>(children)) return React.cloneElement(children, { children: {children.props.children} }); return {children}; } export type ScrollBarProps = React.ComponentProps & ScrollbarAppearanceProps; export function ScrollBar({ className, ref, scrollbarSize, scrollbarColor, scrollbarVariant, style, orientation = "vertical", onPointerEnter, onPointerLeave, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onLostPointerCapture, ...props }: ScrollBarProps) { const inheritedAppearance = React.useContext(ScrollbarAppearanceContext); const appearance = scrollbarAppearance({ scrollbarSize, scrollbarColor, scrollbarVariant }, inheritedAppearance); const host = React.useRef(null); const [mountedElement, setMountedElement] = React.useState(null); const hostRef = React.useCallback((element: HTMLDivElement | null) => { host.current = element; setMountedElement(element); const release = assignMotionRef(ref, element); return () => { host.current = null; setMountedElement(null); release(); }; }, [ref]); const feedback=useScrollFeedback(host,mountedElement,orientation); const {active,dragging}=feedback; useThumbTracking(mountedElement,orientation); return ( { onPointerEnter?.(event); feedback.hover(true); feedback.point(event); }} onPointerLeave={event => { onPointerLeave?.(event); feedback.hover(false); }} onPointerDown={event => { onPointerDown?.(event); if (event.defaultPrevented || event.button !== 0) return; feedback.press(true); feedback.point(event); }} onPointerMove={event => { onPointerMove?.(event); feedback.point(event); }} onPointerUp={event => { onPointerUp?.(event); feedback.press(false); }} onPointerCancel={event => { onPointerCancel?.(event); feedback.press(false); }} onLostPointerCapture={event => { onLostPointerCapture?.(event); feedback.press(false); }} > {appearance.variant === "organic" && } ); } export type PageScrollBarProps = React.ComponentProps<"div"> & ScrollbarAppearanceProps; /** Mount once near the application root. The document remains the scroll owner. */ export function PageScrollBar(props: PageScrollBarProps) { return ; } export type ElementScrollBarProps = PageScrollBarProps & { /** Null during attachment never falls back to taking over the document. */ scrollElement: HTMLElement | null; /** Refresh after a controlled value changes without a native input event. */ refreshKey?: unknown; }; /** Mount beside an existing native scrolling element, inside a positioned parent. */ export function ElementScrollBar(props: ElementScrollBarProps) { return ; } function OwnedScrollBar({ scrollElement, refreshKey, className, ref, onKeyDown, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onLostPointerCapture, scrollbarSize, scrollbarColor, scrollbarVariant, style, ...props }: PageScrollBarProps & { scrollElement?: HTMLElement | null; refreshKey?: unknown }) { const inheritedAppearance = React.useContext(ScrollbarAppearanceContext); const appearance = scrollbarAppearance({ scrollbarSize, scrollbarColor, scrollbarVariant }, inheritedAppearance); const host = React.useRef(null); const [mountedElement,setMountedElement]=React.useState(null); const externalRef = React.useCallback((element: HTMLDivElement | null) => { host.current = element; setMountedElement(element); const release = assignMotionRef(ref, element); return () => { host.current = null; setMountedElement(null); release(); }; }, [ref]); const generatedId = `page-scroll-${React.useId().replace(/:/g, "")}`; const [controlledId, setControlledId] = React.useState(generatedId); const [metrics, setMetrics] = React.useState({ maxScroll: 0, thumbSize: 0, thumbOffset: 0, travel: 0, scrollTop: 0, viewport: 0, nativeFallback: false }); const metricsRef = React.useRef(metrics); const drag = React.useRef<{ pointerId: number; grabOffset: number } | null>(null); const feedback=useScrollFeedback(host,mountedElement,"vertical",scrollElement===undefined,scrollElement); const {active,dragging}=feedback; const refresh = React.useRef<() => void>(() => {}); React.useLayoutEffect(() => refresh.current(), [refreshKey]); React.useEffect(() => { const rail = host.current, documentElement = document.documentElement; if (!rail) return; if (scrollElement === null) return; const owner = scrollElement ?? document.scrollingElement ?? documentElement; const previousId = owner.getAttribute("id"); if (!previousId) owner.setAttribute("id", generatedId); const restoreNativeScrollbar = scrollElement ? acquireElementScrollbar(owner) : acquirePageScrollbar(documentElement); let frame = 0; const measure = () => { frame = 0; setControlledId(previousId || generatedId); const next = { ...pageScrollGeometry(owner.scrollHeight, owner.clientHeight, rail.getBoundingClientRect().height, owner.scrollTop), scrollTop: owner.scrollTop, viewport: owner.clientHeight, // This adapter owns only vertical paint. An explicitly unwrapped // editor keeps both native axes rather than losing horizontal access. nativeFallback: !!scrollElement && owner.scrollWidth > owner.clientWidth + 1, }; if (scrollElement) owner.setAttribute("data-element-scrollbar", next.nativeFallback ? "horizontal" : "mounted"); metricsRef.current = next; setMetrics(old => Object.keys(next).every(key => next[key as keyof typeof next] === old[key as keyof typeof old]) ? old : next); }; const schedule = () => { if (!frame) frame = requestAnimationFrame(measure); }; refresh.current = schedule; schedule(); const resize = new ResizeObserver(schedule); resize.observe(owner); resize.observe(rail); if (!scrollElement && document.body) resize.observe(document.body); const source = scrollElement ?? window; source.addEventListener("scroll", schedule, { passive: true }); source.addEventListener("input", schedule, { passive: true }); window.addEventListener("resize", schedule, { passive: true }); window.visualViewport?.addEventListener("resize", schedule); return () => { if (frame) cancelAnimationFrame(frame); resize.disconnect(); source.removeEventListener("scroll", schedule); source.removeEventListener("input", schedule); window.removeEventListener("resize", schedule); window.visualViewport?.removeEventListener("resize", schedule); if (!previousId && owner.id === generatedId) owner.removeAttribute("id"); restoreNativeScrollbar(); refresh.current = () => {}; }; }, [generatedId, scrollElement]); const scrollTo = (top: number) => { if (scrollElement === null) return; const owner = scrollElement ?? document.scrollingElement ?? document.documentElement; owner.scrollTo({ top: Math.max(0, Math.min(metricsRef.current.maxScroll, top)), behavior: "instant" }); }; const point=feedback.point; const move = (clientY: number) => { if (!drag.current || !host.current) return; const { travel, maxScroll } = metricsRef.current; const position = clientY - host.current.getBoundingClientRect().top - drag.current.grabOffset; scrollTo(travel > 0 ? position / travel * maxScroll : 0); }; const release = () => { drag.current = null; feedback.press(false); }; const hasOverflow = scrollElement !== null && metrics.maxScroll > 0; return (
{ feedback.hover(true); point(event); props.onPointerEnter?.(event); }} onPointerLeave={event => { feedback.hover(false); props.onPointerLeave?.(event); }} onPointerDown={event => { onPointerDown?.(event); if (event.defaultPrevented || event.button !== 0 || metrics.maxScroll <= 0) return; const relative = event.clientY - event.currentTarget.getBoundingClientRect().top - metrics.thumbOffset; const onThumb = event.target instanceof Element && !!event.target.closest('[data-slot="page-scrollbar-thumb"]'); drag.current = { pointerId: event.pointerId, grabOffset: onThumb ? relative : metrics.thumbSize / 2 }; event.currentTarget.setPointerCapture(event.pointerId); event.preventDefault(); feedback.press(true); move(event.clientY); point(event); }} onPointerMove={event => { onPointerMove?.(event); if (drag.current?.pointerId === event.pointerId) move(event.clientY); point(event); }} onPointerUp={event => { onPointerUp?.(event); release(); if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId); }} onPointerCancel={event => { onPointerCancel?.(event); release(); }} onLostPointerCapture={event => { onLostPointerCapture?.(event); release(); }} onKeyDown={event => { onKeyDown?.(event); if (event.defaultPrevented) return; const { scrollTop, viewport, maxScroll } = metricsRef.current; const targets: Record = { ArrowDown: scrollTop + 48, ArrowUp: scrollTop - 48, PageDown: scrollTop + viewport * .9, PageUp: scrollTop - viewport * .9, Home: 0, End: maxScroll, " ": scrollTop + viewport * .9 * (event.shiftKey ? -1 : 1) }; if (event.key in targets) { event.preventDefault(); scrollTo(targets[event.key]); } }} >
{appearance.variant === "organic" && }

); } 52:T2985,@layer cojeev-states { /* Native overflow keeps its own scroll semantics while sharing the app's slim, theme-aware fallback. Managed controls below replace only the visible thumb. */ html[data-scrollbar-policy="cojeev"] { --cojeev-scrollbar-size: 4px; --cojeev-scrollbar-color: var(--v-text-2); } :where(html[data-scrollbar-policy="cojeev"],html[data-scrollbar-policy="cojeev"] *) { scrollbar-width: thin; scrollbar-color: var(--cojeev-scrollbar-color,var(--v-text-2)) transparent; } :where(html[data-scrollbar-policy="cojeev"],html[data-scrollbar-policy="cojeev"] *)::-webkit-scrollbar { width: var(--cojeev-scrollbar-size,6px); height: var(--cojeev-scrollbar-size,6px); } :where(html[data-scrollbar-policy="cojeev"],html[data-scrollbar-policy="cojeev"] *)::-webkit-scrollbar-track { background:transparent; } :where(html[data-scrollbar-policy="cojeev"],html[data-scrollbar-policy="cojeev"] *)::-webkit-scrollbar-thumb { border-radius:999px; background:var(--cojeev-scrollbar-color,var(--v-text-2)); } :where(html[data-scrollbar-policy="cojeev"],html[data-scrollbar-policy="cojeev"] *)::-webkit-scrollbar-thumb:hover { background:color-mix(in oklab,var(--cojeev-scrollbar-color,var(--v-text-2)) 76%,var(--v-brand)); } /* The Radix viewport owns scroll. The thumb's SVG is decorative geometry only. */ [data-slot="scroll-area"].v-scroll { position: relative; isolation: isolate; overflow: hidden; max-height: var(--h, 240px); padding: 6px 6px 6px 18px; border-radius: var(--r-card-sm, 20px); background: var(--v-canvas); color: var(--v-text); box-shadow: inset 0 0 0 1px var(--v-border); } [data-slot="scroll-area"].-ink { background: var(--v-ink); color: var(--v-on-ink); } [data-slot="scroll-area"].-plain { min-width:0; max-width:100%; padding:0; background:transparent; color:inherit; box-shadow:none; border-radius:inherit; } /* Leave room for control paint so decorative SVG overhang cannot invent a tiny scroll range (and an almost full-height thumb) when content fits. */ [data-slot="scroll-area"].-plain > [data-slot="scroll-area-viewport"] { height:auto; max-height:var(--h,320px); padding:8px 24px 12px 8px; } [data-slot="scroll-area"].-plain > [data-slot="scroll-area-viewport"] > div { table-layout:fixed; width:100%; } .v-list-scroll { --h:min(320px,60dvh); } [data-slot="scroll-area-viewport"] { width: 100%; height: 100%; max-height: calc(var(--h, 240px) - 12px); border-radius: inherit; overscroll-behavior: contain; scrollbar-width: none; padding-right: 24px; } [data-slot="scroll-area-viewport"]::-webkit-scrollbar { display:none; width:0; height:0; } [data-slot="scroll-area-viewport"]:focus-visible { outline: 2px solid var(--v-brand); outline-offset: -3px; } [data-slot="scroll-area-viewport"] > div > :is(p,.v-body) { margin: 0; padding: 12px 0; border-bottom: 1px solid color-mix(in oklab,var(--v-border) 70%,transparent); font-size: var(--fs-body, 14px); line-height: 1.6; } [data-slot="scroll-area-viewport"] > div > :is(p,.v-body):last-child { border-bottom: 0; } [data-slot="scroll-area"].-ink [data-slot="scroll-area-viewport"] > div > :is(p,.v-body) { border-bottom-color: color-mix(in oklab,var(--v-on-ink) 14%,transparent); } [data-slot="scroll-area-scrollbar"] { display: flex; --scrollbar-size: 6px; padding: 0 calc((24px - var(--scrollbar-size)) / 2); touch-action: none; user-select: none; border-radius: 999px; background: transparent; transition: background-color 160ms ease; z-index: 2; } [data-slot="scroll-area-scrollbar"][data-orientation="vertical"] { width: 24px; } [data-slot="scroll-area-scrollbar"][data-orientation="horizontal"] { height: 24px; padding: calc((24px - var(--scrollbar-size)) / 2) 0; flex-direction: column; } [data-slot="scroll-area-scrollbar"]::before { content: ""; position: absolute; inset: 0 calc((24px - var(--scrollbar-size)) / 2); border-radius: inherit; pointer-events: none; } [data-slot="scroll-area-scrollbar"][data-orientation="horizontal"]::before { inset: calc((24px - var(--scrollbar-size)) / 2) 0; } [data-slot="scroll-area-scrollbar"]:hover::before, [data-slot="scroll-area-scrollbar"][data-dragging="true"]::before { background: color-mix(in oklab,var(--scrollbar-color,var(--v-pink)) 24%,transparent); } [data-slot="scroll-area-thumb"] { position: relative; flex: 1; /* Match Radix's 18px geometry floor; a larger CSS minimum breaks its travel. */ min-height: 18px; background: transparent; color: var(--scrollbar-color,var(--v-text-2)); } [data-slot="scroll-area-thumb"]::before { content: ""; position: absolute; inset: -4px; } [data-slot="scroll-area-scrollbar"][data-orientation="horizontal"] [data-slot="scroll-area-thumb"] { min-width: 18px; min-height: 0; } .v-scroll__contour { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; fill: currentColor; } [data-slot="scroll-area-scrollbar"]:hover [data-slot="scroll-area-thumb"], [data-slot="scroll-area-scrollbar"][data-scrolling="true"] [data-slot="scroll-area-thumb"] { color: var(--scrollbar-color,var(--v-pink-deep)); } [data-slot="scroll-area-scrollbar"][data-dragging="true"] [data-slot="scroll-area-thumb"] { color: var(--scrollbar-color,var(--v-pink)); } [data-slot="scroll-area"].-ink [data-slot="scroll-area-thumb"] { color: var(--scrollbar-color,color-mix(in oklab,var(--v-on-ink) 65%,transparent)); } [data-slot="scroll-area-scrollbar"][data-scrollbar-variant="rounded"] [data-slot="scroll-area-thumb"]::after, [data-slot="scroll-area-scrollbar"][data-scrollbar-variant="minimal"] [data-slot="scroll-area-thumb"]::after { content:""; position:absolute; inset:0; border-radius:999px; background:currentColor; } [data-slot="scroll-area-scrollbar"][data-scrollbar-variant="minimal"] [data-slot="scroll-area-thumb"]::after { opacity:.72; } [data-slot="scroll-area-scrollbar"][data-scrollbar-variant="minimal"] [data-slot="scroll-area-thumb"]::after { border-radius:0; } :root[data-mode="dark"] [data-slot="scroll-area"].-ink { background: var(--v-canvas); color: var(--v-text); } @media (prefers-reduced-motion: reduce) { [data-slot="scroll-area-scrollbar"] { transition: none; } [data-slot="scroll-area-viewport"] { scroll-behavior: auto; } } [data-slot="scroll-area-scrollbar"][data-motion="off"] { transition: none; } /* Document scrolling stays native; the mounted attribute exists only while the overlay owns the paint, and the pending attribute only inside the head bootstrap's bounded window. The effect that writes "mounted" cannot run before hydration, so the pending marker is what keeps the native bar from painting and then being swapped. Neither attribute exists without scripting, and the bootstrap drops the pending one after its timeout, so a bundle that never arrives leaves the native scrollbar in place. */ html[data-page-scrollbar="mounted"], html[data-page-scrollbar-pending], html[data-page-scrollbar="mounted"] body, html[data-page-scrollbar-pending] body { scrollbar-width: none; } html[data-page-scrollbar="mounted"]::-webkit-scrollbar, html[data-page-scrollbar-pending]::-webkit-scrollbar, html[data-page-scrollbar="mounted"] body::-webkit-scrollbar, html[data-page-scrollbar-pending] body::-webkit-scrollbar { width: 0; height: 0; } .v-page-scrollbar { position: fixed; right: 2px; top: var(--page-scrollbar-top,80px); bottom: 16px; width: 24px; border-radius: 999px; z-index: 50; touch-action: none; user-select: none; --scrollbar-size: 6px; color: var(--scrollbar-color,var(--v-text-2)); background: transparent; transition: background-color 160ms ease; } .v-page-scrollbar[data-overflow="false"] { visibility: hidden; pointer-events: none; } .v-page-scrollbar:hover, .v-page-scrollbar[data-scrolling="true"] { color: var(--scrollbar-color,var(--v-pink-deep)); } .v-page-scrollbar[data-dragging="true"] { color: var(--scrollbar-color,var(--v-pink)); } .v-page-scrollbar:focus-visible { outline: 2px solid var(--v-brand); outline-offset: -1px; } [data-slot="page-scrollbar-thumb"] { position: absolute; left:calc((24px - var(--scrollbar-size)) / 2); right:calc((24px - var(--scrollbar-size)) / 2); top:0; min-height: 0; } [data-slot="page-scrollbar-thumb"] svg { display: block; width: 100%; height: 100%; fill: currentColor; pointer-events: none; } .v-page-scrollbar[data-scrollbar-variant="rounded"] [data-slot="page-scrollbar-thumb"]::after, .v-page-scrollbar[data-scrollbar-variant="minimal"] [data-slot="page-scrollbar-thumb"]::after { content:""; position:absolute; inset:0; border-radius:999px; background:currentColor; } .v-page-scrollbar[data-scrollbar-variant="minimal"] [data-slot="page-scrollbar-thumb"]::after { opacity:.72; } .v-page-scrollbar[data-scrollbar-variant="minimal"] [data-slot="page-scrollbar-thumb"]::after { border-radius:0; } .v-page-scrollbar[data-motion="off"] { transition: none; } @media (pointer: coarse) { .v-page-scrollbar { right: 0; width: 24px; } } @media (prefers-reduced-motion: reduce) { .v-page-scrollbar { transition: none; } } /* A fixed-size grip stays readable even when the proportional thumb is long. */ .v-scroll__grip { position:absolute; left:50%; top:50%; translate:-50% -50%; display:flex; flex-direction:column; gap:3px; color:var(--v-canvas); pointer-events:none; } .v-scroll__grip i { display:block; width:min(3px,var(--scrollbar-size,6px)); height:min(3px,var(--scrollbar-size,6px)); border-radius:50%; background:currentColor; } [data-orientation="horizontal"] .v-scroll__grip { flex-direction:row; } [data-dragging="true"] .v-scroll__grip { color:var(--ink-fixed); } .v-page-scrollbar::before { content:""; position:absolute; top:4px; bottom:4px; left:50%; width:1px; background:var(--v-border); pointer-events:none; } [data-slot="page-scrollbar-thumb"]::before { content:""; position:absolute; inset:0 -3px; } .v-page-scrollbar[data-slot="element-scrollbar"] { position:absolute; top:4px; bottom:18px; inset-inline-end:1px; z-index:2; } .v-page-scrollbar[data-slot="element-scrollbar"]::before { display:none; } :root [data-element-scrollbar="mounted"] { scrollbar-width:none; } [data-element-scrollbar="mounted"]::-webkit-scrollbar { width:0; height:0; } :root [data-element-scrollbar="horizontal"] { scrollbar-width:auto; } [data-slot="element-scrollbar"][data-native-fallback] { visibility:hidden; pointer-events:none; } @media(forced-colors:active) { :root [data-element-scrollbar="mounted"] { scrollbar-width:auto; } [data-element-scrollbar="mounted"]::-webkit-scrollbar { width:auto; height:auto; } [data-slot="element-scrollbar"] { display:none; } } } 4c:["$","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"}]]}]}],["$","li","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","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":"class-variance-authority"}]]}]}],["$","li","@radix-ui/react-scroll-area",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-scroll-area","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-scroll-area"}]]}]}]]}],["$","$L4d",null,{"namespace":"@000h-cojeev","registryDependencies":["https://000h.cojeev.com/r/cojeev.json"]}]]}],["$","$L4e",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L4f",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"@/styles/cojeev/scroll-area.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L50",null,{"files":[{"path":"registry/cojeev/ui/scroll-area.tsx","content":"$51","type":"registry:ui"},{"path":"registry/cojeev/styles/scroll-area.css","content":"$52","type":"registry:file","target":"styles/cojeev/scroll-area.css"}],"className":"h-[70svh] min-h-80"}]]}]