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:T35a6,// Hairline UI · magnifying-dock · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components 'use client'; /* ───────────────────────────────────────────────────────── * MAGNIFYING DOCK: a dock that opens its tools in place * * lens tools near the pointer grow and the row parts around * them; the tray widens with them. Transforms only, * eased in one frame loop that sleeps when it settles * label one name rides above the tool under the pointer, * gliding from tool to tool while its letters morph * select a soft pad glides to the chosen tool and keeps * riding its magnification * open a tool with content grows the dock itself up into * its panel: the tray widens and rises, the title * morphs, and switching tools slides the new panel in * from the side you moved toward * close choose the open tool again, press Escape or click * away, and the panel folds back into the tray * * Every tool is a real button in a toolbar: arrow keys move * between them, and keyboard focus magnifies like the pointer. * ───────────────────────────────────────────────────────── */ import * as React from 'react'; import { NumberRoll } from './number-roll'; import { TextMorph } from './text-morph'; import { EASE_OUT, INTERACTION_FOCUS, useInteractionReducedMotion } from './ui-interaction-motion'; import { useDockLens } from './use-dock-lens'; export interface DockItem { id: string; label: string; icon: React.ReactNode; /** What the dock opens into when this tool is chosen. Without it, the tool only selects. */ content?: React.ReactNode; /** The open panel's heading; defaults to label. */ title?: string; /** A count on the icon, e.g. unread messages; 0 folds it away. */ badge?: number; disabled?: boolean; } export interface MagnifyingDockProps extends Omit, 'onChange'> { items: DockItem[]; value?: string; defaultValue?: string; onValueChange?: (id: string) => void; open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; label?: string; /** Rest size of a tool in px, 32–56. */ size?: number; /** Peak scale under the pointer, 1–2. */ magnification?: number; /** Width of the open panel in px; it never exceeds the space available. */ panelWidth?: number; } const GAP = 6; const INSET = 8; const LABEL_ROOM = 34; const clamp = (n: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, Number.isFinite(n) ? n : lo)); function Pane({ dir, reduced, leaving, onDone, children }: { dir: number; reduced: boolean; leaving?: boolean; onDone?: () => void; children: React.ReactNode }) { const ref = React.useRef(null); React.useLayoutEffect(() => { const el = ref.current; if (!el || reduced || !dir) { if (leaving) onDone?.(); return; } const frames = leaving ? [{ opacity: 1, transform: 'none', filter: 'blur(0px)' }, { opacity: 0, transform: `translateX(${-dir * 24}px)`, filter: 'blur(4px)' }] : [{ opacity: 0, transform: `translateX(${dir * 24}px)`, filter: 'blur(4px)' }, { opacity: 1, transform: 'none', filter: 'blur(0px)' }]; const animation = el.animate(frames, { duration: leaving ? 220 : 360, delay: leaving ? 0 : 40, easing: EASE_OUT, fill: leaving ? 'forwards' : 'backwards' }); if (leaving) animation.onfinish = () => onDone?.(); return () => animation.cancel(); // Runs once per pane: each pane is keyed by its tool. // eslint-disable-next-line react-hooks/exhaustive-deps }, []); return (

{children}

); } export function MagnifyingDock({ items, value, defaultValue, onValueChange, open: openProp, defaultOpen = false, onOpenChange, label = 'Tools', size = 40, magnification = 1.6, panelWidth = 340, className = '', ...props }: MagnifyingDockProps) { const reduced = useInteractionReducedMotion(); const S = clamp(size, 32, 56); const M = clamp(magnification, 1, 2); const id = React.useId(); const [ownValue, setOwnValue] = React.useState(defaultValue ?? items.find((item) => !item.disabled)?.id); const selectedId = value ?? ownValue; const selected = Math.max(0, items.findIndex((item) => item.id === selectedId)); const [ownOpen, setOwnOpen] = React.useState(defaultOpen); const open = (openProp ?? ownOpen) && Boolean(items[selected]?.content); const [hovered, setHovered] = React.useState(null); const lens = useDockLens({ count: items.length, size: S, gap: GAP, inset: INSET, magnification: M, reduced, onHover: setHovered }); const root = React.useRef(null); const content = React.useRef(null); const [rootWidth, setRootWidth] = React.useState(0); const panelW = Math.max(200, Math.min(panelWidth, rootWidth ? rootWidth - 16 : panelWidth)); // The panel shows the open tool; while folding away it keeps the last one. const [shown, setShown] = React.useState(selected); const [leaving, setLeaving] = React.useState<{ key: number; index: number; dir: number }[]>([]); const dir = React.useRef(0); const leaveKey = React.useRef(0); const [wasOpen, setWasOpen] = React.useState(open); if (open !== wasOpen) setWasOpen(open); if (open && shown !== selected) { // Switching inside an open panel slides; opening on a different tool just shows it. dir.current = wasOpen ? Math.sign(selected - shown) : 0; if (wasOpen && !reduced) setLeaving((l) => [...l, { key: ++leaveKey.current, index: shown, dir: dir.current }]); setShown(selected); } const setOpen = (next: boolean) => { if (openProp === undefined) setOwnOpen(next); onOpenChange?.(next); }; const choose = (index: number) => { const item = items[index]; if (!item || item.disabled) return; if (item.id !== selectedId) { if (value === undefined) setOwnValue(item.id); onValueChange?.(item.id); } if (!item.content) { if (open) setOpen(false); return; } if (!open) dir.current = 0; setOpen(!(open && item.id === selectedId)); }; React.useLayoutEffect(() => { lens.set({ selected, open, panelWidth: panelW }); }); // Sizes the open panel from its content, and the panel width from the space the dock has. React.useLayoutEffect(() => { const el = content.current; const box = root.current; if (!el || !box) return; const measure = () => { lens.set({ panelHeight: el.offsetHeight }); setRootWidth((w) => (w === box.clientWidth ? w : box.clientWidth)); }; measure(); const observer = new ResizeObserver(measure); observer.observe(el); observer.observe(box); return () => observer.disconnect(); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); // Click away to fold the panel. React.useEffect(() => { if (!open) return; const away = (event: PointerEvent) => { if (!root.current?.contains(event.target as Node)) setOpen(false); }; document.addEventListener('pointerdown', away); return () => document.removeEventListener('pointerdown', away); // eslint-disable-next-line react-hooks/exhaustive-deps }, [open]); const enabled = items.map((item, index) => ({ item, index })).filter(({ item }) => !item.disabled); const onToolKey = (event: React.KeyboardEvent, index: number) => { if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return; event.preventDefault(); const at = enabled.findIndex((entry) => entry.index === index); const next = event.key === 'Home' ? enabled[0] : event.key === 'End' ? enabled.at(-1) : enabled[(at + (event.key === 'ArrowRight' ? 1 : -1) + enabled.length) % enabled.length]; if (next) lens.icons.current[next.index]?.focus({ preventScroll: true }); }; const band = S + 2 * INSET; const headroom = Math.ceil(S * (M - 1)) + LABEL_ROOM; const restWidth = items.length * S + Math.max(0, items.length - 1) * GAP + 2 * INSET; const shownItem = items[shown] ?? items[selected]; const hoverItem = hovered !== null ? items[hovered] : undefined; return (

{ props.onKeyDown?.(event); if (event.key === 'Escape' && open) { event.preventDefault(); setOpen(false); lens.icons.current[selected]?.focus({ preventScroll: true }); } }} className={`relative w-full text-foreground ${className}`} style={{ height: band + headroom, ...props.style }} > {/* The tray: one surface that widens with the lens and rises into the panel. */}

); } 53:T20d8,// Hairline UI · magnifying-dock · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components 'use client'; import * as React from 'react'; /* * The dock's motion engine. One frame loop eases every moving part toward its target and * stops when they all settle, so a resting dock costs nothing. * * lens tools near the pointer scale up and the row parts around them. Distances are * measured from fixed rest positions, so growth never feeds back into the pointer * maths. Only transforms move: no layout while you sweep across it. * marker the selected tool's pad glides to the new tool and rides its magnification. * label one name that follows the tool under the pointer and lifts above its new height. * surface the tray widens with the lens, and grows up into the open panel. */ export type DockLensOptions = { count: number; size: number; gap: number; inset: number; magnification: number; reduced: boolean; onHover: (index: number | null) => void; }; type Targets = { pointer: number | null; focus: number | null; selected: number; open: boolean; panelHeight: number; panelWidth: number }; // Seconds to close ~63% of the gap. While the pointer sweeps the lens is all but attached to it (TRACK); entering and // leaving the dock, where the targets jump, ease more gently (LENS) so the tools swell and settle instead of snapping. const TRACK = 0.016; const LENS = 0.06; const GLIDE = 0.075; const SURFACE = 0.085; export function useDockLens({ count, size, gap, inset, magnification, reduced, onHover }: DockLensOptions) { const icons = React.useRef<(HTMLElement | null)[]>([]); const pad = React.useRef(null); const label = React.useRef(null); const surface = React.useRef(null); const panel = React.useRef(null); const row = React.useRef(null); const target = React.useRef({ pointer: null, focus: null, selected: 0, open: false, panelHeight: 0, panelWidth: 0 }); const sim = React.useRef({ s: [] as number[], o: [] as number[], pad: NaN, labelX: NaN, labelLift: 0, labelOpacity: 0, open: 0, height: 0, width: 0, last: 0 }); const frame = React.useRef(0); const hovered = React.useRef(null); const origin = React.useRef(null); const opts = React.useRef({ count, size, gap, inset, magnification, reduced, onHover }); opts.current = { count, size, gap, inset, magnification, reduced, onHover }; const tick = React.useCallback((now: number) => { frame.current = 0; const { count: n, size: S, gap: G, inset: P, magnification: M, reduced: still, onHover: hover } = opts.current; const t = target.current; const st = sim.current; const dt = st.last ? Math.min(0.064, (now - st.last) / 1000) : 1 / 60; st.last = now; const ease = (tau: number) => (still ? 1 : 1 - Math.exp(-dt / tau)); let moving = false; const approach = (from: number, to: number, k: number) => { const next = Number.isNaN(from) ? to : from + (to - from) * k; if (Math.abs(next - to) > 0.0005) moving = true; return Math.abs(next - to) <= 0.0005 ? to : next; }; const step = S + G; const rest = (i: number) => P + i * step + S / 2; const anchor = t.focus !== null ? rest(t.focus) : t.pointer; const reach = S * 2.4; const peak = still ? 1 : t.open ? Math.min(M, 1.22) : M; // The lens: scale per tool, then the offsets that part the row around the growth. let extra = 0; for (let i = 0; i < n; i++) { const d = anchor === null ? Infinity : Math.abs(anchor - rest(i)); const f = d < reach ? (1 + Math.cos((d / reach) * Math.PI)) / 2 : 0; const goal = 1 + (peak - 1) * f; st.s[i] = approach(st.s[i] ?? 1, goal, ease(Math.abs(goal - (st.s[i] ?? 1)) > 0.12 ? LENS : TRACK)); extra += S * (st.s[i] - 1); } let run = 0; for (let i = 0; i < n; i++) { const e = S * (st.s[i] - 1); st.o[i] = run + e / 2 - extra / 2; run += e; const el = icons.current[i]; if (el) el.style.transform = `translate3d(${st.o[i]}px,0,0) scale(${st.s[i]})`; } // The pad glides between rest positions and borrows the magnification of the tools it passes. st.pad = approach(st.pad, rest(t.selected), ease(GLIDE)); const u = Math.max(0, Math.min(n - 1, (st.pad - rest(0)) / step)); const i0 = Math.floor(u), i1 = Math.min(n - 1, i0 + 1), w = u - i0; const padOffset = (st.o[i0] ?? 0) * (1 - w) + (st.o[i1] ?? 0) * w; const padScale = (st.s[i0] ?? 1) * (1 - w) + (st.s[i1] ?? 1) * w; if (pad.current) pad.current.style.transform = `translate3d(${st.pad - S / 2 + padOffset}px,0,0) scale(${padScale})`; // The label: the tool nearest the pointer, lifted above its current height. const near = anchor === null ? null : Math.max(0, Math.min(n - 1, Math.round((anchor - rest(0)) / step))); if (near !== hovered.current && near !== null) hover(near); if (near !== null) hovered.current = near; const shown = near ?? hovered.current; if (shown !== null) { st.labelX = approach(st.labelX, rest(shown) + (st.o[shown] ?? 0), ease(GLIDE * 0.8)); st.labelLift = approach(st.labelLift, S * ((st.s[shown] ?? 1) - 1), ease(TRACK * 2)); } st.labelOpacity = approach(st.labelOpacity, near !== null && !t.open ? 1 : 0, ease(near !== null ? 0.06 : 0.05)); if (label.current) { label.current.style.transform = `translate3d(${st.labelX}px,${-st.labelLift - (1 - st.labelOpacity) * 4}px,0) translateX(-50%)`; label.current.style.opacity = String(st.labelOpacity); } // The surface: a tray that widens with the lens and grows up into the panel. st.open = approach(st.open, t.open ? 1 : 0, ease(SURFACE)); st.height = approach(st.height, t.open ? t.panelHeight : 0, ease(SURFACE)); const restWidth = n * S + (n - 1) * G + 2 * P; st.width = approach(st.width, t.open ? Math.max(restWidth, t.panelWidth) : restWidth, ease(SURFACE)); const band = S + 2 * P; const wide = Math.max(st.width, restWidth + extra); if (surface.current) { surface.current.style.width = `${wide}px`; surface.current.style.height = `${band + st.height}px`; surface.current.style.borderRadius = `${band / 2 + (20 - band / 2) * Math.min(1, st.open * 1.6)}px`; } if (panel.current) { panel.current.style.height = `${st.height}px`; panel.current.style.width = `${wide - 2}px`; panel.current.style.opacity = String(Math.max(0, (st.open - 0.35) / 0.65)); panel.current.style.visibility = st.open < 0.01 && !t.open ? 'hidden' : 'visible'; } if (moving) frame.current = requestAnimationFrame(tick); else st.last = 0; }, []); const kick = React.useCallback(() => { if (!frame.current) frame.current = requestAnimationFrame(tick); }, [tick]); // A rAF id kept in a ref must be cleared on unmount, or StrictMode's remount thinks the loop is still running. React.useEffect(() => { // A scroll under a resting pointer moves the row: measure again on the next move. const forget = () => { origin.current = null; }; window.addEventListener('scroll', forget, { passive: true, capture: true }); window.addEventListener('resize', forget); return () => { window.removeEventListener('scroll', forget, { capture: true }); window.removeEventListener('resize', forget); cancelAnimationFrame(frame.current); frame.current = 0; }; }, []); React.useLayoutEffect(() => { sim.current.last = 0; tick(performance.now()); }, [count, size, gap, inset, magnification, reduced, tick]); return { icons, pad, label, surface, panel, row, set(next: Partial) { Object.assign(target.current, next); kick(); }, pointer(event: React.PointerEvent) { if (event.pointerType === 'touch' || !row.current) return; // The row never moves under the lens (only transforms do), so its edge is read once per hover. if (origin.current === null) origin.current = row.current.getBoundingClientRect().left; target.current.focus = null; target.current.pointer = event.clientX - origin.current; kick(); }, leave() { origin.current = null; target.current.pointer = null; kick(); }, }; } 54:Tc6d,// Hairline UI · magnifying-dock · 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":[null,["$","$L50",null,{"namespace":"@hairline","registryDependencies":["https://hairlineui.com/r/text-morph.json?as=dependency","https://hairlineui.com/r/number-roll.json?as=dependency"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/magnifying-dock.tsx","content":"$52","type":"registry:component"},{"path":"registry/use-dock-lens.ts","content":"$53","type":"registry:component"},{"path":"registry/ui-interaction-motion.ts","content":"$54","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]