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:T1d33,// Hairline UI · split-pane · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components 'use client'; /* ───────────────────────────────────────────────────────── * SPLIT PANE: desktop-grade resizable dual surface * * divider 1px hairline border with a centered grab pill; * hover expands the line to an active primary accent * drag zero-lag direct DOM updates; dragging beyond * min/max limits introduces logarithmic rubber-band * resistance * spring releasing past boundary limits triggers an * analytical WAAPI damped harmonic spring back * to the boundary threshold * snapping double-clicking the divider smoothly cycles * between 50%, 25%, and 75% preset layouts * collapse built-in controls fold either pane to 0 width, * docking the hairline divider flush to the edge * touch expanded touch targets enable fluid dragging on * mobile devices * * Fully accessible separator semantics with keyboard step. * ───────────────────────────────────────────────────────── */ import * as React from 'react'; import { ChevronLeft, ChevronRight, GripVertical } from 'lucide-react'; import { INTERACTION_FOCUS, useInteractionReducedMotion } from './ui-interaction-motion'; import { useSplitPane } from './use-split-pane'; export interface SplitPaneProps extends Omit, 'onChange'> { first: React.ReactNode; second: React.ReactNode; split?: number; defaultSplit?: number; minSize?: number; maxSize?: number; orientation?: 'horizontal' | 'vertical'; collapsible?: boolean; disabled?: boolean; onSplitChange?: (split: number) => void; onSplitCommit?: (split: number) => void; } export function SplitPane({ first, second, split, defaultSplit = 50, minSize = 15, maxSize = 85, orientation = 'horizontal', collapsible = true, disabled = false, onSplitChange, onSplitCommit, className = '', ...props }: SplitPaneProps) { const reduced = useInteractionReducedMotion(); const isHorizontal = orientation !== 'vertical'; const pane = useSplitPane({ orientation, split, defaultSplit, minSize, maxSize, disabled, reduced, onChange: onSplitChange, onCommit: onSplitCommit, }); return (

{/* First Pane */}

{first}

{/* 1px Hairline Divider Container */}

{/* Full Hairline Line */}

{/* Dead-Centered Draggable Grab Handle Button */} {/* Optional Collapsible Controls */} {collapsible && !pane.dragging && (

{pane.collapsed === 'first' ? ( ) : pane.collapsed === 'second' ? ( ) : (

)}

{/* Second Pane */}

{second}

); } 50:T1fe8,// Hairline UI · split-pane · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components 'use client'; import * as React from 'react'; import { EASE_OUT, springFrames } from './ui-interaction-motion'; type Orientation = 'horizontal' | 'vertical'; type SplitPaneOptions = { orientation?: Orientation; split?: number; // 0 to 100 defaultSplit?: number; minSize?: number; // default 15 maxSize?: number; // default 85 disabled?: boolean; reduced?: boolean; onChange?: (split: number) => void; onCommit?: (split: number) => void; }; export function useSplitPane(options: SplitPaneOptions) { const containerRef = React.useRef(null); const firstPaneRef = React.useRef(null); const dividerRef = React.useRef(null); const optionsRef = React.useRef(options); optionsRef.current = options; const [dragging, setDragging] = React.useState(false); const [collapsed, setCollapsed] = React.useState<'first' | 'second' | null>(null); const gesture = React.useRef<{ id: number; startSplit: number; currentSplit: number; containerSize: number; containerStart: number; } | null>(null); const min = options.minSize ?? 15; const max = options.maxSize ?? 85; const paint = React.useCallback( (splitPercent: number, animate: boolean) => { const o = optionsRef.current; const pane = firstPaneRef.current; if (pane) { pane.style.transition = animate && !o.reduced ? `flex-basis 380ms ${EASE_OUT}` : 'none'; pane.style.flexBasis = `${splitPercent}%`; } dividerRef.current?.setAttribute('aria-valuenow', String(Math.round(splitPercent))); }, [] ); const commit = React.useCallback( (splitPercent: number, animate = true) => { const clean = Math.max(min, Math.min(max, splitPercent)); paint(clean, animate); setCollapsed(null); optionsRef.current.onChange?.(clean); optionsRef.current.onCommit?.(clean); }, [min, max, paint] ); const collapse = React.useCallback( (side: 'first' | 'second') => { const pane = firstPaneRef.current; if (!pane) return; setCollapsed(side); const targetPercent = side === 'first' ? 0 : 100; paint(targetPercent, true); optionsRef.current.onChange?.(targetPercent); optionsRef.current.onCommit?.(targetPercent); }, [paint] ); const expand = React.useCallback(() => { setCollapsed(null); commit(optionsRef.current.defaultSplit ?? 50, true); }, [commit]); const snapCycle = React.useCallback(() => { const o = optionsRef.current; const current = o.split ?? o.defaultSplit ?? 50; let next = 50; if (Math.abs(current - 50) < 3) next = 25; else if (Math.abs(current - 25) < 3) next = 75; else next = 50; commit(next, true); }, [commit]); const finish = React.useCallback( (cancelled: boolean) => { const g = gesture.current; if (!g) return; gesture.current = null; setDragging(false); if (cancelled) { paint(g.startSplit, true); optionsRef.current.onChange?.(g.startSplit); } else { // If release was in rubber-band territory beyond min or max, spring back smoothly const o = optionsRef.current; const current = g.currentSplit; if (current < min || current > max) { const target = current < min ? min : max; const pane = firstPaneRef.current; if (pane && !o.reduced) { const frames = springFrames(current, target, 0, 480); const keyframes = frames.map((f) => ({ flexBasis: `${f.value}%` })); const anim = pane.animate(keyframes, { duration: 480, fill: 'forwards' }); anim.onfinish = () => { pane.style.flexBasis = `${target}%`; anim.cancel(); commit(target, false); }; } else { commit(target, false); } } else { commit(g.currentSplit, false); } } }, [min, max, commit, paint] ); React.useLayoutEffect(() => { if (!gesture.current && collapsed === null) { const val = options.split ?? options.defaultSplit ?? 50; paint(val, true); } }, [options.split, options.defaultSplit, options.reduced, collapsed, paint]); const startDrag = React.useCallback( (event: React.PointerEvent) => { if (event.button !== 0 || !event.isPrimary || optionsRef.current.disabled) return; const container = containerRef.current; if (!container) return; const rect = container.getBoundingClientRect(); const isHorizontal = optionsRef.current.orientation !== 'vertical'; const containerSize = isHorizontal ? rect.width : rect.height; const containerStart = isHorizontal ? rect.left : rect.top; event.currentTarget.setPointerCapture(event.pointerId); event.currentTarget.focus({ preventScroll: true }); const currentSplit = optionsRef.current.split ?? optionsRef.current.defaultSplit ?? 50; gesture.current = { id: event.pointerId, startSplit: currentSplit, currentSplit, containerSize: Math.max(1, containerSize), containerStart, }; setDragging(true); setCollapsed(null); paint(currentSplit, false); }, [paint] ); const onPointerMove = React.useCallback( (event: React.PointerEvent) => { const g = gesture.current; const o = optionsRef.current; if (!g || g.id !== event.pointerId) return; const isHorizontal = o.orientation !== 'vertical'; const clientPos = isHorizontal ? event.clientX : event.clientY; const rawPercent = ((clientPos - g.containerStart) / g.containerSize) * 100; // Rubber-band resistance curve beyond min/max limits let dampedPercent = rawPercent; if (rawPercent < min) { const overflow = min - rawPercent; dampedPercent = min - Math.pow(overflow, 0.7); } else if (rawPercent > max) { const overflow = rawPercent - max; dampedPercent = max + Math.pow(overflow, 0.7); } g.currentSplit = dampedPercent; paint(dampedPercent, false); o.onChange?.(dampedPercent); }, [min, max, paint] ); const onKeyDown = React.useCallback( (event: React.KeyboardEvent) => { if (event.key === 'Escape') { event.preventDefault(); finish(true); return; } const isHorizontal = optionsRef.current.orientation !== 'vertical'; const prevKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp'; const nextKey = isHorizontal ? 'ArrowRight' : 'ArrowDown'; if (![prevKey, nextKey, 'Home', 'End', 'Enter'].includes(event.key)) return; event.preventDefault(); if (event.key === 'Enter') { snapCycle(); return; } const current = optionsRef.current.split ?? optionsRef.current.defaultSplit ?? 50; if (event.key === 'Home') { commit(min); return; } if (event.key === 'End') { commit(max); return; } const mult = event.shiftKey ? 10 : 1; const delta = (event.key === nextKey ? 1 : -1) * mult; commit(current + delta); }, [min, max, snapCycle, commit, finish] ); return { containerRef, firstPaneRef, dividerRef, dragging, collapsed, collapse, expand, snapCycle, dividerProps: { onPointerDown: startDrag, onPointerMove, onPointerUp: (e: React.PointerEvent) => { if (e.pointerId === gesture.current?.id) finish(false); }, onPointerCancel: (e: React.PointerEvent) => { if (e.pointerId === gesture.current?.id) finish(true); }, onLostPointerCapture: (e: React.PointerEvent) => { if (e.pointerId === gesture.current?.id) finish(true); }, onDoubleClick: snapCycle, onBlur: () => finish(true), onKeyDown, }, }; } 51:Tc68,// Hairline UI · split-pane · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components 'use client'; import * as React from 'react'; export const EASE_OUT = 'cubic-bezier(0.16, 1, 0.3, 1)'; export const EASE_SETTLE = 'cubic-bezier(0.22, 1.18, 0.36, 1)'; export const INTERACTION_FOCUS = 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background'; const query = '(prefers-reduced-motion: reduce)'; const subscribe = (notify: () => void) => { const media = window.matchMedia(query); media.addEventListener('change', notify); return () => media.removeEventListener('change', notify); }; export const useInteractionReducedMotion = () => React.useSyncExternalStore(subscribe, () => window.matchMedia(query).matches, () => false); export function useInteractionActivity() { const ref = React.useRef(null); const [visible, setVisible] = React.useState(false); const [hidden, setHidden] = React.useState(false); React.useEffect(() => { const el = ref.current; if (!el) return; const observer = new IntersectionObserver(([entry]) => setVisible(entry.isIntersecting)); observer.observe(el); const visibility = () => setHidden(document.hidden); visibility(); document.addEventListener('visibilitychange', visibility); return () => { observer.disconnect(); document.removeEventListener('visibilitychange', visibility); }; }, []); return { ref, active: visible && !hidden }; } export function interactionIcon(on: boolean, reduced: boolean): React.CSSProperties { return { opacity: on ? 1 : 0, transform: on ? 'none' : 'scale(0.6)', filter: on ? 'blur(0px)' : 'blur(3px)', transition: reduced ? 'none' : `opacity 220ms ${EASE_OUT}, transform 380ms ${EASE_OUT}, filter 220ms ${EASE_OUT}` }; } /** Sample recent movement rather than averaging a long drag and losing its release velocity. */ export type PointerSample = { x: number; time: number }; export function samplePointer(samples: PointerSample[], x: number, time: number) { samples.push({ x, time }); while (samples.length > 2 && time - samples[0].time > 100) samples.shift(); } export function releaseVelocity(samples: PointerSample[], now: number) { if (samples.length < 2 || now - samples[samples.length - 1].time > 100) return 0; const first = samples[0], last = samples[samples.length - 1]; return (last.x - first.x) / Math.max(1, last.time - first.time); } /** A damped spring sampled by WAAPI: no React renders or perpetual frame loop. */ export function springFrames(from: number, to: number, velocity = 0, duration = 520) { const omega = 20, damping = 0.82, damped = omega * Math.sqrt(1 - damping * damping); const displacement = from - to; const coefficient = (velocity * 1000 + damping * omega * displacement) / damped; return Array.from({ length: 33 }, (_, i) => { const t = (i / 32) * duration / 1000; const value = to + Math.exp(-damping * omega * t) * (displacement * Math.cos(damped * t) + coefficient * Math.sin(damped * t)); return { value: i === 32 ? to : value, offset: i / 32 }; }); } 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":"registry/split-pane.tsx","content":"$4f","type":"registry:component"},{"path":"registry/use-split-pane.ts","content":"$50","type":"registry:component"},{"path":"registry/ui-interaction-motion.ts","content":"$51","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]