50: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/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"],"RegistryDependencies"] 51: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"] 52:T28f3,// Hairline UI · image-compare · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components 'use client'; /* ───────────────────────────────────────────────────────── * IMAGE COMPARE: two pictures, one divide * * drag press anywhere and the divide is thrown to your * finger, then follows it exactly * reveal the "after" picture sits in a window that slides one * way while the picture inside slides back the other: * two moving layers, nothing repainted while you drag * labels each side's label fades as its picture runs out * keys arrows by 1%, Shift by 10%, Home and End; a * double-click brings the divide home to the middle * ───────────────────────────────────────────────────────── */ import * as React from 'react'; import { ChevronsLeftRight, ImageOff } from 'lucide-react'; import { EASE_OUT, INTERACTION_FOCUS, useInteractionReducedMotion } from './ui-interaction-motion'; import { TextMorph } from './text-morph'; export type CompareImage = { src: string; alt: string; className?: string }; export interface ImageCompareProps extends Omit, 'onChange'> { before: CompareImage; after: CompareImage; beforeLabel?: string; afterLabel?: string; label?: string; value?: number; defaultValue?: number; onValueChange?: (value: number) => void; onValueCommit?: (value: number) => void; aspectRatio?: number; } const clamp = (value: number) => (Number.isFinite(value) ? Math.max(0, Math.min(100, value)) : 50); function Picture({ image }: { image: CompareImage }) { const [failed, setFailed] = React.useState(false); return failed ? (

) : (

setFailed(true)} className={`size-full select-none object-cover ${image.className ?? ''}`} /> ); } // The same strings are written by React and by the gesture, so either can take over from the other. const windowAt = (p: number) => `translate3d(${p - 100}%,0,0)`; const pictureAt = (p: number) => `translate3d(${100 - p}%,0,0)`; const lineAt = (p: number) => `translate3d(${p}%,0,0)`; const handleAt = (p: number) => `translate3d(clamp(22px, ${p}%, calc(100% - 22px)),0,0)`; export function ImageCompare({ before, after, beforeLabel = 'Before', afterLabel = 'After', label = 'Image comparison', value, defaultValue = 50, onValueChange, onValueCommit, aspectRatio = 1.6, className = '', ...props }: ImageCompareProps) { const reduced = useInteractionReducedMotion(); const [own, setOwn] = React.useState(clamp(defaultValue)); const position = clamp(value ?? own); const frame = React.useRef(null); const win = React.useRef(null); const picture = React.useRef(null); const line = React.useRef(null); const rail = React.useRef(null); const handle = React.useRef(null); const afterTag = React.useRef(null); const beforeTag = React.useRef(null); const gesture = React.useRef<{ id: number; origin: number; last: number; left: number; width: number; moved: boolean } | null>(null); const hintId = React.useId(); const motion = (on: boolean) => { const t = on && !reduced ? `transform 420ms ${EASE_OUT}` : 'none'; for (const el of [win.current, picture.current, line.current, rail.current]) if (el) el.style.transition = t; }; const paint = (p: number) => { if (win.current) win.current.style.transform = windowAt(p); if (picture.current) picture.current.style.transform = pictureAt(p); if (line.current) line.current.style.transform = lineAt(p); if (rail.current) rail.current.style.transform = handleAt(p); if (afterTag.current) afterTag.current.style.opacity = p > 12 ? '1' : '0'; if (beforeTag.current) beforeTag.current.style.opacity = p < 88 ? '1' : '0'; handle.current?.setAttribute('aria-valuenow', String(Math.round(p))); handle.current?.setAttribute('aria-valuetext', `${Math.round(p)}% ${afterLabel}`); }; /** Settle on a value: React state, the parent, and an eased move when it wasn't under the finger. */ const go = (next: number, animate: boolean, commit = true) => { const p = clamp(next); motion(animate); paint(p); if (value === undefined) setOwn(p); onValueChange?.(p); if (commit) onValueCommit?.(p); return p; }; // A controlled value that changes from outside eases there. React.useLayoutEffect(() => { if (gesture.current) return; motion(true); paint(position); // eslint-disable-next-line react-hooks/exhaustive-deps }, [position]); const finish = (event: React.PointerEvent, cancelled = false) => { const state = gesture.current; if (!state || event.pointerId !== state.id) return; gesture.current = null; // A release near the middle snaps home. const next = cancelled ? state.origin : Math.abs(state.last - 50) < 3 ? 50 : state.last; go(next, cancelled || next !== state.last || !state.moved, !cancelled); }; return (

{ if (event.button !== 0 || !event.isPrimary) return; // Keep the handle focused: the mousedown that follows would otherwise move focus to the page. event.preventDefault(); const rect = event.currentTarget.getBoundingClientRect(); event.currentTarget.setPointerCapture(event.pointerId); // Focus follows the press so the arrow keys work next, without a keyboard focus ring after a mouse drag. handle.current?.focus({ preventScroll: true, focusVisible: false } as FocusOptions); const p = clamp(((event.clientX - rect.left) / Math.max(1, rect.width)) * 100); gesture.current = { id: event.pointerId, origin: position, last: p, left: rect.left, width: Math.max(1, rect.width), moved: false }; // Thrown to the finger, then attached to it. motion(true); paint(p); }} onPointerMove={(event) => { const state = gesture.current; if (!state || state.id !== event.pointerId) return; if (!state.moved) { state.moved = true; motion(false); } state.last = clamp(((event.clientX - state.left) / state.width) * 100); paint(state.last); onValueChange?.(state.last); }} onDoubleClick={() => go(50, true)} onPointerUp={(event) => finish(event)} onPointerCancel={(event) => finish(event, true)} onLostPointerCapture={(event) => finish(event, true)} >

12 ? 1 : 0 }} > {afterLabel} {beforeLabel}

Drag to compare. Arrow keys adjust by one percent, Shift and arrows by ten. Home and End reveal either image. Double-click to centre.

); } 53:Tc6b,// Hairline UI · image-compare · 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 }; }); } 4f:["$","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","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@hairline","registryDependencies":["https://hairlineui.com/r/text-morph.json?as=dependency"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/image-compare.tsx","content":"$52","type":"registry:component"},{"path":"registry/ui-interaction-motion.ts","content":"$53","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]