4e: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 4f:T118c,/** * Shared animation constants for SmoothUI components. * * Spring configs follow project guidelines + Fluid Functionalism tiers * (`lib/springs.ts`): fast / moderate / slow with slightly quicker exits. * * Easing curves use cubic-bezier arrays compatible with Motion's `ease` property. */ import { type RefObject, useEffect, useState } from "react"; export type { SpringTier } from "./springs"; export { exitFallbackMs, spring } from "./springs"; /** @deprecated Prefer `spring.moderate` — kept for existing call sites */ export const SPRING_DEFAULT = { bounce: 0.1, duration: 0.25, type: "spring" as const, }; /** @deprecated Prefer `spring.fast` — kept for existing call sites */ export const SPRING_SNAPPY = { bounce: 0, duration: 0.2, type: "spring" as const, }; /** Ease-out curve for entering elements — cubic-bezier(.23, 1, .32, 1) */ export const EASE_OUT = [0.23, 1, 0.32, 1] as const; /** Ease-in-out curve for moving elements — cubic-bezier(0.645, 0.045, 0.355, 1) */ export const EASE_IN_OUT = [0.645, 0.045, 0.355, 1] as const; /** Instant transition for reduced-motion contexts */ export const DURATION_INSTANT = { duration: 0 }; /** Standard animation durations (seconds) */ export const DURATION = { complex: 0.4, default: 0.25, fast: 0.15, slow: 0.3, } as const; /** * Overlay enter — dialogs, menus, popovers. * Opacity + slight scale; keep bounce low so chrome feels solid. */ export const OVERLAY_ENTER = { opacity: 1, scale: 1, y: 0, } as const; export const OVERLAY_ENTER_INITIAL = { opacity: 0, scale: 0.97, y: 6, } as const; export const OVERLAY_EXIT = { opacity: 0, scale: 0.97, y: 6, } as const; /** Transition to pair with OVERLAY_* when motion is allowed */ export const OVERLAY_TRANSITION = SPRING_DEFAULT; /** * Press feedback — buttons, menu items, chips. * Prefer CSS `active:scale-[…]` with `motion-reduce:active:scale-100` when * Motion is not already on the node; use these when driving via `animate`. */ export const PRESS_SCALE = 0.97 as const; export const PRESS_SCALE_DEEP = 0.94 as const; export const PRESS_TRANSITION = { duration: DURATION.fast, ease: EASE_OUT, } as const; /** Focus-visible ring timing for CSS transitions (not layout motion). */ export const FOCUS_RING_TRANSITION = "box-shadow 0.15s cubic-bezier(0.23, 1, 0.32, 1)" as const; export type SpringConfig = typeof SPRING_DEFAULT; export type EasingCurve = readonly [number, number, number, number]; /** * Shared preset for infinite animations (skeleton shimmer, spinner, indeterminate * progress, status pulse). A loop gets an explicit `repeatDelay`, a compositor * hint while it runs, and pauses while its element is off screen * (`useLoopInView`). Reduced motion renders no loop at all, so callers check it * before they reach for this. */ export const LOOP_CLASS = "will-change-transform" as const; /** Rest between repeats, in seconds. A spinner turns continuously. */ export const LOOP_REPEAT_DELAY = { progress: 0.2, pulse: 0.6, shimmer: 0.3, spin: 0, } as const; /** Wrap a transition so it repeats forever with the given rest between runs. */ export const loopTransition = ( transition: T, repeatDelay = 0 ) => ({ ...transition, repeat: Number.POSITIVE_INFINITY, repeatDelay, repeatType: "loop" as const, }); /** Linear easing as a cubic-bezier, for continuous rotation. */ export const EASE_LINEAR = [0, 0, 1, 1] as const; interface LoopInViewOptions { /** Observe the parent instead of the element (for a child that a clipped track hides). */ observeParent?: boolean; } /** * Whether a looping element is on screen. Starts true (and stays true where * IntersectionObserver is missing) so the loop is never stuck off. */ export const useLoopInView = ( ref: RefObject, { observeParent = false }: LoopInViewOptions = {} ): boolean => { const [inView, setInView] = useState(true); useEffect(() => { const element = ref.current; const target = observeParent ? (element?.parentElement ?? element) : element; if (!target || typeof IntersectionObserver === "undefined") { return; } const observer = new IntersectionObserver((entries) => { const latest = entries.at(-1); if (latest) { setInView(latest.isIntersecting); } }); observer.observe(target); return () => observer.disconnect(); }, [ref, observeParent]); return inView; }; 50:T499,/** * Shared spring tiers for SmoothUI — aligned with Fluid Functionalism motion * (https://www.fluidfunctionalism.com/docs/motion): enter is a spring, exit is * a slightly faster tween so dismissals feel crisp. * * Prefer these over hand-written durations so lists, menus, overlays, and * fluid-hover travel share one tempo. */ export const spring = { /** Hover highlights, fades, small toggles */ fast: { bounce: 0, duration: 0.08, exit: { duration: 0.06 }, type: "spring" as const, }, /** * Critically damped — dropdowns, tabs, panels, fluid-hover travel when the * target size changes. Lands with no overshoot. */ moderate: { bounce: 0, duration: 0.16, exit: { duration: 0.12 }, type: "spring" as const, }, /** Dialogs, drawers, larger chrome */ slow: { bounce: 0.12, duration: 0.24, exit: { duration: 0.16 }, type: "spring" as const, }, } as const; /** Safety timeout (ms) for deferred unmount after an exit tween. */ export const exitFallbackMs = (tier: { exit: { duration: number } }) => Math.round(tier.exit.duration * 1000) + 100; export type SpringTier = keyof typeof spring; 51:T37eb,"use client"; import { type Dispatch, type RefObject, type SetStateAction, useCallback, useEffect, useRef, useState, } from "react"; export interface ItemRect { height: number; left: number; top: number; width: number; } export interface UseFluidHoverOptions { /** * Which direction to resolve the nearest item along. * - `"y"` — vertical lists (default) * - `"x"` — horizontal strips * - `"xy"` — 2-D grids (Euclidean distance to center) */ axis?: "x" | "y" | "xy"; /** * Route clicks that land in gaps/padding to the lit item. * Pass `false` to leave empty space inert, or `{ maxDistance }` to limit. */ gapClick?: boolean | { maxDistance?: number }; /** * Skip an item without unregistering it (e.g. collapsed sub-tree). * Consulted per mouse move — keep it cheap. */ isItemDisabled?: (element: HTMLElement) => boolean; } export interface UseFluidHoverReturn { activeIndex: number | null; handlers: { onClick: (e: React.MouseEvent) => void; onMouseEnter: () => void; onMouseLeave: () => void; onMouseMove: (e: React.MouseEvent) => void; }; isMeasured: boolean; itemRects: ItemRect[]; measureItems: () => void; registerItem: (index: number, element: HTMLElement | null) => void; remeasure: () => void; sessionRef: RefObject; setActiveIndex: Dispatch>; } export interface PickNearestInput { axis: "x" | "y" | "xy"; border: { x: number; y: number }; containerRect: { height: number; left: number; top: number; width: number }; isDisabled?: (index: number) => boolean; layoutSize: { height: number; width: number }; point: { x: number; y: number }; rects: readonly (ItemRect | undefined)[]; scroll: { x: number; y: number }; } /** * Nearest-item rule: an item the pointer is inside wins; otherwise the item * whose center is nearest does. Ties keep the first item. */ export const pickNearest = ({ axis, point, rects, containerRect, scroll, border, layoutSize, isDisabled, }: PickNearestInput): number | null => { const scaleX = layoutSize.width > 0 ? containerRect.width / layoutSize.width : 1; const scaleY = layoutSize.height > 0 ? containerRect.height / layoutSize.height : 1; let closestIndex: number | null = null; let closestDistance = Number.POSITIVE_INFINITY; let containingIndex: number | null = null; for (let index = 0; index < rects.length; index++) { const r = rects[index]; if (!r) { continue; } if (isDisabled?.(index)) { continue; } if (axis === "xy") { const left = containerRect.left + (border.x + r.left - scroll.x) * scaleX; const top = containerRect.top + (border.y + r.top - scroll.y) * scaleY; const width = r.width * scaleX; const height = r.height * scaleY; if ( point.x >= left && point.x <= left + width && point.y >= top && point.y <= top + height ) { containingIndex = index; } const distance = Math.hypot( point.x - (left + width / 2), point.y - (top + height / 2) ); if (distance < closestDistance) { closestDistance = distance; closestIndex = index; } continue; } const horizontal = axis === "x"; const mousePos = horizontal ? point.x : point.y; const scale = horizontal ? scaleX : scaleY; const itemStart = (horizontal ? containerRect.left : containerRect.top) + ((horizontal ? border.x : border.y) + (horizontal ? r.left : r.top) - (horizontal ? scroll.x : scroll.y)) * scale; const itemSize = (horizontal ? r.width : r.height) * scale; if (mousePos >= itemStart && mousePos <= itemStart + itemSize) { containingIndex = index; } const distance = Math.abs(mousePos - (itemStart + itemSize / 2)); if (distance < closestDistance) { closestDistance = distance; closestIndex = index; } } return containingIndex ?? closestIndex; }; /** Set on the highlighted item (boolean attribute). */ export const ACTIVE_ATTR = "data-fluid-hover-active"; /** Set on the container: the highlighted index, or absent. */ export const ACTIVE_INDEX_ATTR = "data-fluid-hover-active-index"; const ACTIVATOR_SELECTOR = "a[href], button, [role='menuitem'], [role='menuitemradio'], [role='menuitemcheckbox'], [role='option'], [role='radio'], [role='checkbox'], [role='tab'], [role='link'], [role='button']"; const resolveActivator = (element: HTMLElement): HTMLElement => { if (element.matches(ACTIVATOR_SELECTOR) || element.hasAttribute("tabindex")) { return element; } return element.querySelector(ACTIVATOR_SELECTOR) ?? element; }; const MEASUREMENT_ATTEMPTS = 3; /** * Tracks the nearest list/strip/grid item under the cursor so a single * highlight can glide between rows instead of blinking on `:hover`. */ export const useFluidHover = ( containerRef: RefObject, options: UseFluidHoverOptions = {} ): UseFluidHoverReturn => { const { axis = "y", isItemDisabled, gapClick = true } = options; const gapClickMaxDistance = typeof gapClick === "object" ? (gapClick.maxDistance ?? Number.POSITIVE_INFINITY) : Number.POSITIVE_INFINITY; const itemsRef = useRef(new Map()); const [activeIndex, setActiveIndex] = useState(null); const activeIndexRef = useRef(null); activeIndexRef.current = activeIndex; useEffect(() => { const container = containerRef.current; if (activeIndex === null) { container?.removeAttribute(ACTIVE_INDEX_ATTR); } else { container?.setAttribute(ACTIVE_INDEX_ATTR, String(activeIndex)); } const active = activeIndex === null ? undefined : itemsRef.current.get(activeIndex); active?.setAttribute(ACTIVE_ATTR, ""); return () => { active?.removeAttribute(ACTIVE_ATTR); if (activeIndex !== null) { itemsRef.current.get(activeIndex)?.removeAttribute(ACTIVE_ATTR); } }; }, [activeIndex, containerRef]); const [itemRects, setItemRects] = useState([]); const [isMeasured, setIsMeasured] = useState(false); const itemRectsRef = useRef([]); const sessionRef = useRef(0); const rafIdRef = useRef(null); const remeasureRafIdRef = useRef(null); const runMeasurement = useCallback(() => { const container = containerRef.current; if (!container) { return false; } const rects: ItemRect[] = []; let everyItemHasLayout = true; for (const [index, element] of itemsRef.current) { const hasLayoutBox = element.offsetParent !== null || element.offsetWidth > 0 || element.offsetHeight > 0; if (!hasLayoutBox) { everyItemHasLayout = false; continue; } let top = element.offsetTop; let left = element.offsetLeft; let ancestor = element.offsetParent as HTMLElement | null; while ( ancestor && ancestor !== container && container.contains(ancestor) ) { top += ancestor.offsetTop + ancestor.clientTop; left += ancestor.offsetLeft + ancestor.clientLeft; ancestor = ancestor.offsetParent as HTMLElement | null; } rects[index] = { height: element.offsetHeight, left, top, width: element.offsetWidth, }; } if (!everyItemHasLayout) { return false; } const prev = itemRectsRef.current; let changed = prev.length !== rects.length; for (let i = 0; !changed && i < rects.length; i++) { const p = prev[i]; const r = rects[i]; if (p === r) { continue; } changed = !(p && r) || p.top !== r.top || p.left !== r.left || p.width !== r.width || p.height !== r.height; } if (changed) { itemRectsRef.current = rects; setItemRects(rects); } return true; }, [containerRef]); const measureItems = useCallback(() => { runMeasurement(); }, [runMeasurement]); const scheduleMeasurement = useCallback( (attemptsLeft: number) => { if (remeasureRafIdRef.current !== null) { cancelAnimationFrame(remeasureRafIdRef.current); } remeasureRafIdRef.current = requestAnimationFrame(() => { remeasureRafIdRef.current = null; if (runMeasurement()) { setIsMeasured(true); } else if (attemptsLeft > 1) { scheduleMeasurement(attemptsLeft - 1); } }); }, [runMeasurement] ); const remeasure = useCallback(() => { setIsMeasured(false); scheduleMeasurement(MEASUREMENT_ATTEMPTS); }, [scheduleMeasurement]); const itemRoRef = useRef(null); const getItemRo = useCallback(() => { if (itemRoRef.current === null && typeof ResizeObserver !== "undefined") { itemRoRef.current = new ResizeObserver(() => scheduleMeasurement(MEASUREMENT_ATTEMPTS) ); } return itemRoRef.current; }, [scheduleMeasurement]); const registerItem = useCallback( (index: number, element: HTMLElement | null) => { if (element) { itemsRef.current.set(index, element); getItemRo()?.observe(element); if (index === activeIndexRef.current) { element.setAttribute(ACTIVE_ATTR, ""); } } else { const previous = itemsRef.current.get(index); if (previous) { itemRoRef.current?.unobserve(previous); } previous?.removeAttribute(ACTIVE_ATTR); itemsRef.current.delete(index); if (index === activeIndexRef.current) { setActiveIndex((current) => current === index && !itemsRef.current.has(index) ? null : current ); } } remeasure(); }, [remeasure, getItemRo] ); const handleMouseMove = useCallback( (e: React.MouseEvent) => { const mouseX = e.clientX; const mouseY = e.clientY; if (rafIdRef.current !== null) { cancelAnimationFrame(rafIdRef.current); } rafIdRef.current = requestAnimationFrame(() => { rafIdRef.current = null; const container = containerRef.current; if (!container) { return; } setActiveIndex( pickNearest({ axis, border: { x: container.clientLeft, y: container.clientTop }, containerRect: container.getBoundingClientRect(), isDisabled: isItemDisabled ? (index) => { const el = itemsRef.current.get(index); return Boolean(el && isItemDisabled(el)); } : undefined, layoutSize: { height: container.offsetHeight, width: container.offsetWidth, }, point: { x: mouseX, y: mouseY }, rects: itemRectsRef.current, scroll: { x: container.scrollLeft, y: container.scrollTop }, }) ); }); }, [axis, containerRef, isItemDisabled] ); const handleMouseEnter = useCallback(() => { sessionRef.current += 1; }, []); const handleMouseLeave = useCallback(() => { if (rafIdRef.current !== null) { cancelAnimationFrame(rafIdRef.current); rafIdRef.current = null; } setActiveIndex(null); }, []); const handleClick = useCallback( (e: React.MouseEvent) => { const target = e.target as Node | null; if (!target) { return; } for (const element of itemsRef.current.values()) { if (element.contains(target)) { return; } } if (!target.isConnected) { return; } const control = (target as Element).closest?.( "input, textarea, select, button, a, summary, [contenteditable], [role='textbox'], [role='searchbox'], [role='button']" ); if (control) { return; } if (gapClick === false) { return; } const index = activeIndexRef.current; if (index === null) { return; } const element = itemsRef.current.get(index); if (!element || isItemDisabled?.(element)) { return; } if (gapClickMaxDistance !== Number.POSITIVE_INFINITY) { const r = element.getBoundingClientRect(); const dx = Math.max(r.left - e.clientX, 0, e.clientX - r.right); const dy = Math.max(r.top - e.clientY, 0, e.clientY - r.bottom); if (Math.hypot(dx, dy) > gapClickMaxDistance) { return; } } resolveActivator(element).click(); }, [isItemDisabled, gapClick, gapClickMaxDistance] ); useEffect(() => { const container = containerRef.current; if (!container || typeof ResizeObserver === "undefined") { return; } const ro = new ResizeObserver(() => scheduleMeasurement(MEASUREMENT_ATTEMPTS) ); ro.observe(container); return () => ro.disconnect(); }, [containerRef, scheduleMeasurement]); useEffect( () => () => { if (rafIdRef.current !== null) { cancelAnimationFrame(rafIdRef.current); } if (remeasureRafIdRef.current !== null) { cancelAnimationFrame(remeasureRafIdRef.current); } itemRoRef.current?.disconnect(); itemRoRef.current = null; }, [] ); return { activeIndex, handlers: { onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseMove: handleMouseMove, }, isMeasured, itemRects, measureItems, registerItem, remeasure, sessionRef, setActiveIndex, }; }; /** * Registers an item with its fluid-hover list for as long as it is mounted. */ export const useRegisterFluidHoverItem = ( registerItem: | ((index: number, element: HTMLElement | null) => void) | undefined, index: number | undefined, ref: RefObject ) => { useEffect(() => { if (!registerItem || index === undefined) { return; } registerItem(index, ref.current); return () => registerItem(index, null); }, [index, registerItem, ref]); }; 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4e",null,{"files":[{"path":"animation.ts","content":"$4f","type":"registry:lib","target":"components/smoothui/lib/animation.ts"},{"path":"springs.ts","content":"$50","type":"registry:lib","target":"components/smoothui/lib/springs.ts"},{"path":"use-fluid-hover.ts","content":"$51","type":"registry:lib","target":"components/smoothui/lib/use-fluid-hover.ts"}],"className":"h-[70svh] min-h-80"}]]}]