4f: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"] 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/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"] 51:T2602,.dock { position: absolute; z-index: 10; display: flex; gap: var(--dock-gap); box-sizing: border-box; padding: var(--dock-pad); border-radius: calc(var(--dock-base) * var(--dock-round) * 0.5 + var(--dock-pad)); background: var(--dock-panel); box-shadow: inset 0 0 0 1px var(--dock-panel-edge), inset 0 1px 0 var(--dock-panel-highlight), var(--dock-panel-shadow); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); touch-action: none; transition: translate 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease; } .dock[data-hidden] { opacity: 0; pointer-events: none; transition: translate 0.36s cubic-bezier(0.55, 0, 0.75, 0.15), opacity 0.24s ease 0.1s; } .dock::before { content: ''; position: absolute; z-index: -1; display: none; } .dock:hover::before { display: block; } .dock--bottom, .dock--top { left: 50%; height: var(--dock-thickness); transform: translateX(-50%); } .dock--left, .dock--right { top: 50%; flex-direction: column; width: var(--dock-thickness); transform: translateY(-50%); } .dock--bottom { bottom: 12px; align-items: flex-end; } .dock--top { top: 12px; align-items: flex-start; } .dock--left { left: 12px; align-items: flex-start; } .dock--right { right: 12px; align-items: flex-end; } .dock--bottom[data-hidden] { translate: 0 calc(100% + 12px); } .dock--top[data-hidden] { translate: 0 calc(-100% - 12px); } .dock--left[data-hidden] { translate: calc(-100% - 12px) 0; } .dock--right[data-hidden] { translate: calc(100% + 12px) 0; } .dock--bottom::before, .dock--top::before { left: 0; right: 0; height: calc(var(--dock-reach) + 8px); } .dock--left::before, .dock--right::before { top: 0; bottom: 0; width: calc(var(--dock-reach) + 8px); } .dock--bottom::before { bottom: 100%; } .dock--top::before { top: 100%; } .dock--left::before { left: 100%; } .dock--right::before { right: 100%; } .dock-item { position: relative; flex: none; width: var(--dock-base); height: var(--dock-base); margin: 0; padding: 0; border: 0; background: none; color: var(--dock-ink); font: inherit; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } .dock-item:hover, .dock-item:focus-visible { z-index: 1; } .dock-tile { position: absolute; top: 0; left: 0; width: var(--dock-base); height: var(--dock-base); transform-origin: 0 0; pointer-events: none; } .dock-face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: calc(var(--dock-base) * var(--dock-round) * 0.5); background: var(--dock-tile); box-shadow: inset 0 0 0 1px var(--dock-tile-edge), inset 0 1px 0 var(--dock-tile-highlight), var(--dock-tile-shadow); font-size: calc(var(--dock-base) * 0.44); line-height: 1; transition: filter 0.2s ease; } .dock--bare .dock-face { overflow: visible; background: none; box-shadow: none; font-size: calc(var(--dock-base) * 0.62); } .dock-item:active .dock-face, .dock-item[data-open] .dock-face { filter: var(--dock-press); transition-duration: 0s; } .dock-item:focus-visible .dock-face { outline: 2px solid var(--dock-accent); outline-offset: 3px; } .dock-badge { position: absolute; top: calc(var(--dock-base) * (0.1465 * var(--dock-round) - 0.19)); right: calc(var(--dock-base) * (0.1465 * var(--dock-round) - 0.19)); box-sizing: border-box; min-width: calc(var(--dock-base) * 0.38); height: calc(var(--dock-base) * 0.38); padding: 0 calc(var(--dock-base) * 0.1); border-radius: calc(var(--dock-base) * 0.19); background: var(--dock-badge); color: #ffffff; font-size: calc(var(--dock-base) * 0.22); font-weight: 600; font-variant-numeric: tabular-nums; line-height: calc(var(--dock-base) * 0.38); text-align: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); pointer-events: none; } .dock-badge:empty { top: calc(var(--dock-base) * (0.1465 * var(--dock-round) - 0.11)); right: calc(var(--dock-base) * (0.1465 * var(--dock-round) - 0.11)); min-width: 0; width: calc(var(--dock-base) * 0.22); height: calc(var(--dock-base) * 0.22); padding: 0; } .dock-dot { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--dock-dot); pointer-events: none; } .dock--bottom .dock-dot, .dock--top .dock-dot { left: 50%; margin-left: -2px; } .dock--left .dock-dot, .dock--right .dock-dot { top: 50%; margin-top: -2px; } .dock--bottom .dock-dot { top: calc(100% + max(var(--dock-pad) / 2, 5px) - 2px); } .dock--top .dock-dot { bottom: calc(100% + max(var(--dock-pad) / 2, 5px) - 2px); } .dock--left .dock-dot { right: calc(100% + max(var(--dock-pad) / 2, 5px) - 2px); } .dock--right .dock-dot { left: calc(100% + max(var(--dock-pad) / 2, 5px) - 2px); } .dock-separator { flex: none; align-self: center; border-radius: 1px; background: var(--dock-separator); } .dock--bottom .dock-separator, .dock--top .dock-separator { width: 1px; height: calc(var(--dock-base) * 0.72); } .dock--left .dock-separator, .dock--right .dock-separator { width: calc(var(--dock-base) * 0.72); height: 1px; } .dock-label { position: absolute; padding: 6px 10px; border-radius: 8px; background: var(--dock-label); color: var(--dock-label-ink); box-shadow: inset 0 0 0 1px var(--dock-panel-edge), 0 8px 20px -8px rgba(0, 0, 0, 0.35); font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.16s ease, transform 0.16s ease; } .dock--bottom .dock-label { bottom: calc(100% + 12px); left: 50%; transform: translate(-50%, 4px); } .dock--top .dock-label { top: calc(100% + 12px); left: 50%; transform: translate(-50%, -4px); } .dock--left .dock-label { top: 50%; left: calc(100% + 12px); transform: translate(-4px, -50%); } .dock--right .dock-label { top: 50%; right: calc(100% + 12px); transform: translate(4px, -50%); } .dock-item:focus-visible .dock-label { opacity: 1; } .dock--bottom .dock-item:focus-visible .dock-label, .dock--top .dock-item:focus-visible .dock-label { transform: translate(-50%, 0); } .dock--left .dock-item:focus-visible .dock-label, .dock--right .dock-item:focus-visible .dock-label { transform: translate(0, -50%); } @media (hover: hover) { .dock-item:hover .dock-label { opacity: 1; } .dock--bottom .dock-item:hover .dock-label, .dock--top .dock-item:hover .dock-label { transform: translate(-50%, 0); } .dock--left .dock-item:hover .dock-label, .dock--right .dock-item:hover .dock-label { transform: translate(0, -50%); } } .dock .dock-item[data-hop] .dock-label { opacity: 0; } .dock-menu { position: fixed; top: 0; left: 0; z-index: 1000; visibility: hidden; color: var(--dock-menu-ink); font-size: 13px; line-height: 1; } .dock-menu-shadow { position: absolute; inset: 0; border-radius: 10px; box-shadow: var(--dock-menu-shadow); pointer-events: none; } .dock-menu-glass { position: absolute; inset: -9px; -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8); pointer-events: none; } .dock-menu-shape { position: absolute; top: -9px; left: -9px; width: calc(100% + 18px); height: calc(100% + 18px); overflow: visible; pointer-events: none; } .dock-menu-shape path { fill: var(--dock-menu); stroke: var(--dock-menu-edge); stroke-width: 1px; } .dock-menu-list { position: relative; display: flex; flex-direction: column; box-sizing: border-box; min-width: 172px; max-width: 280px; padding: 5px; outline: none; } .dock-menu-highlight { position: absolute; top: 0; left: 5px; right: 5px; height: 24px; border-radius: 6px; background: var(--dock-accent); opacity: 0; pointer-events: none; transition: transform 0.16s cubic-bezier(0.3, 0.8, 0.3, 1), height 0.16s cubic-bezier(0.3, 0.8, 0.3, 1), opacity 0.12s ease; } .dock-menu-row { position: relative; display: flex; align-items: center; gap: 5px; box-sizing: border-box; width: 100%; height: 24px; margin: 0; padding: 0 10px 0 7px; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; text-align: left; white-space: nowrap; cursor: default; outline: none; -webkit-tap-highlight-color: transparent; } .dock-menu-row[data-active] { color: #ffffff; } .dock-menu-row[aria-disabled='true'] { color: var(--dock-menu-muted); } .dock-menu-check { display: flex; flex: none; align-items: center; justify-content: center; width: 14px; } .dock-menu-icon { display: flex; flex: none; align-items: center; justify-content: center; margin-right: 1px; font-size: 15px; } .dock-menu-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .dock-menu-shortcut { flex: none; margin-left: 18px; color: var(--dock-menu-muted); } .dock-menu-row[data-active] .dock-menu-shortcut { color: rgba(255, 255, 255, 0.72); } .dock-menu-chevron { display: flex; flex: none; margin-left: 14px; color: var(--dock-menu-muted); } .dock-menu-row[data-active] .dock-menu-chevron { color: inherit; } .dock-menu-separator { flex: none; height: 1px; margin: 5px 10px; background: var(--dock-menu-separator); } @media (prefers-reduced-motion: reduce) { .dock, .dock[data-hidden], .dock-menu-highlight { transition: none; } } 52:T9c91,'use client'; import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'; import { createPortal } from 'react-dom'; import './Dock.css'; export type DockSide = 'bottom' | 'top' | 'left' | 'right'; export type DockMenuItem = { label?: React.ReactNode; onClick?: () => void; icon?: React.ReactNode; checked?: boolean; disabled?: boolean; shortcut?: React.ReactNode; items?: DockMenuItem[]; separator?: boolean; }; export type DockItemData = { icon?: React.ReactNode; label?: string; onClick?: () => void; className?: string; active?: boolean; badge?: React.ReactNode; menu?: DockMenuItem[]; separator?: boolean; }; export type DockSpring = { mass?: number; stiffness?: number; damping?: number; }; export type DockProps = { items?: DockItemData[]; position?: DockSide; theme?: 'dark' | 'light'; baseItemSize?: number; magnification?: number; distance?: number; panelHeight?: number; gap?: number; roundness?: number; spring?: DockSpring; bounce?: boolean; autoHide?: boolean; tiles?: boolean; showLabels?: boolean; showIndicators?: boolean; showBadges?: boolean; badgeColor?: string; accentColor?: string; className?: string; style?: React.CSSProperties; }; type Tokens = Record; type Point = { x: number; y: number }; type Edge = { left: number; right: number; top: number }; type Frame = { left: number; top: number; width: number; height: number }; type SubMenu = { index: number; keyboard: boolean; edge: Edge }; type MenuState = { id: number; index: number; point: Point; keyboard: boolean; closing: boolean; restore: boolean; rows?: DockMenuItem[]; }; type MenuCallbacks = { onSelect?: (row: DockMenuItem, keyboard: boolean) => void; onDismiss?: (restore: boolean) => void; onBack?: () => void; onExited?: () => void; }; type DockMenuProps = MenuCallbacks & { rows: DockMenuItem[]; label?: string; side?: DockSide | null; point?: Point; edge?: Edge; tokens: Tokens; nested?: boolean; focusFirst?: boolean; closing?: boolean; pressingRef: { current: boolean }; onEnter?: () => void; }; type Motion = { size: number; velocity: number; lift: number; rise: number; launch: number; gravity: number; hopping: boolean; drawn: string; node: HTMLButtonElement | null; }; type Actions = { hop: (index: number) => void; focus: (index: number) => void; hold: (index: number | null) => void; }; type Press = { id: number; x: number; y: number; timer: number; cleanup: () => void }; const SIDES: DockSide[] = ['bottom', 'top', 'left', 'right']; const EDGE = 12; const HOP = 0.4; const HOP_TIME = 0.38; const HOLD_TIME = 450; const TAIL = 9; const TAIL_HALF = 9; const MENU_RADIUS = 10; const MENU_GAP = 8; const MARGIN = 8; const POP = 'cubic-bezier(0.2, 1.25, 0.4, 1)'; const THEMES: Record<'dark' | 'light', Tokens> = { dark: { '--dock-panel': 'rgba(38, 35, 46, 0.66)', '--dock-panel-edge': 'rgba(255, 255, 255, 0.08)', '--dock-panel-highlight': 'rgba(255, 255, 255, 0.07)', '--dock-panel-shadow': '0 22px 44px -20px rgba(0, 0, 0, 0.8), 0 6px 16px -8px rgba(0, 0, 0, 0.5)', '--dock-tile': 'linear-gradient(180deg, #3a3644 0%, #27242f 100%)', '--dock-tile-edge': 'rgba(255, 255, 255, 0.07)', '--dock-tile-highlight': 'rgba(255, 255, 255, 0.12)', '--dock-tile-shadow': '0 4px 10px -4px rgba(0, 0, 0, 0.7)', '--dock-ink': '#f4f4f5', '--dock-label': '#2a2731', '--dock-label-ink': '#f4f4f5', '--dock-dot': 'rgba(255, 255, 255, 0.72)', '--dock-separator': 'rgba(255, 255, 255, 0.12)', '--dock-press': 'brightness(0.75)', '--dock-menu': 'rgba(40, 37, 47, 0.8)', '--dock-menu-edge': 'rgba(255, 255, 255, 0.13)', '--dock-menu-ink': '#f4f4f5', '--dock-menu-muted': 'rgba(244, 244, 245, 0.42)', '--dock-menu-separator': 'rgba(255, 255, 255, 0.1)', '--dock-menu-shadow': '0 18px 40px -12px rgba(0, 0, 0, 0.65), 0 3px 10px rgba(0, 0, 0, 0.3)' }, light: { '--dock-panel': 'rgba(240, 240, 243, 0.8)', '--dock-panel-edge': 'rgba(24, 24, 27, 0.07)', '--dock-panel-highlight': 'rgba(255, 255, 255, 0.95)', '--dock-panel-shadow': '0 22px 44px -22px rgba(24, 24, 27, 0.3), 0 6px 16px -10px rgba(24, 24, 27, 0.16)', '--dock-tile': 'linear-gradient(180deg, #ffffff 0%, #f6f6f8 100%)', '--dock-tile-edge': 'rgba(24, 24, 27, 0.08)', '--dock-tile-highlight': 'rgba(255, 255, 255, 1)', '--dock-tile-shadow': '0 4px 10px -5px rgba(24, 24, 27, 0.25)', '--dock-ink': '#27272a', '--dock-label': '#ffffff', '--dock-label-ink': '#18181b', '--dock-dot': 'rgba(24, 24, 27, 0.55)', '--dock-separator': 'rgba(24, 24, 27, 0.12)', '--dock-press': 'brightness(0.9)', '--dock-menu': 'rgba(248, 248, 250, 0.86)', '--dock-menu-edge': 'rgba(24, 24, 27, 0.1)', '--dock-menu-ink': '#18181b', '--dock-menu-muted': 'rgba(24, 24, 27, 0.4)', '--dock-menu-separator': 'rgba(24, 24, 27, 0.1)', '--dock-menu-shadow': '0 18px 40px -14px rgba(24, 24, 27, 0.3), 0 3px 10px rgba(24, 24, 27, 0.1)' } }; const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect; const hasBadge = (badge: React.ReactNode) => badge !== undefined && badge !== null && badge !== false; const usable = (row?: DockMenuItem | null): row is DockMenuItem => !!row && !row.separator && !row.disabled; const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), Math.max(min, max)); const menuPath = (width: number, height: number, side: DockSide | null, at: number) => { const r = MENU_RADIUS; const p = (x: number, y: number) => `${(x + TAIL).toFixed(2)} ${(y + TAIL).toFixed(2)}`; const tail = (x: number, y: number, dx: number, dy: number, nx: number, ny: number) => { const q = (u: number, v: number) => p(x + dx * u + nx * v, y + dy * u + ny * v); return `L ${q(-TAIL_HALF, 0)} L ${q(-TAIL_HALF * 0.18, TAIL * 0.82)} Q ${q(0, TAIL)} ${q(TAIL_HALF * 0.18, TAIL * 0.82)} L ${q(TAIL_HALF, 0)}`; }; return [ `M ${p(r, 0)}`, side === 'top' ? tail(at, 0, 1, 0, 0, -1) : '', `L ${p(width - r, 0)} A ${r} ${r} 0 0 1 ${p(width, r)}`, side === 'right' ? tail(width, at, 0, 1, 1, 0) : '', `L ${p(width, height - r)} A ${r} ${r} 0 0 1 ${p(width - r, height)}`, side === 'bottom' ? tail(at, height, -1, 0, 0, 1) : '', `L ${p(r, height)} A ${r} ${r} 0 0 1 ${p(0, height - r)}`, side === 'left' ? tail(0, at, 0, -1, -1, 0) : '', `L ${p(0, r)} A ${r} ${r} 0 0 1 ${p(r, 0)} Z` ].join(' '); }; const CheckGlyph = () => ( ); const ChevronGlyph = () => ( ); function DockMenu({ rows, label, side = null, point, edge, tokens, nested = false, focusFirst = false, closing = false, pressingRef, onSelect, onDismiss, onBack, onEnter, onExited }: DockMenuProps) { const outerRef = useRef(null); const listRef = useRef(null); const glassRef = useRef(null); const shapeRef = useRef(null); const pathRef = useRef(null); const highlightRef = useRef(null); const rowRefs = useRef<(HTMLButtonElement | null)[]>([]); const frameRef = useRef(null); const timerRef = useRef(0); const aliveRef = useRef(true); const reduceRef = useRef(false); const callbacks = useRef({}); const [active, setActive] = useState(-1); const [sub, setSub] = useState(null); const [blink, setBlink] = useState(false); const [chosen, setChosen] = useState(false); const checks = rows.some(row => row && !row.separator && row.checked !== undefined); callbacks.current = { onSelect, onDismiss, onBack, onExited }; useIsomorphicLayoutEffect(() => { const outer = outerRef.current; const list = listRef.current; const glass = glassRef.current; const shape = pathRef.current; if (!outer || !list || !glass || !shape) return undefined; aliveRef.current = true; const layers = [outer.firstElementChild, glass, shapeRef.current, list].filter((layer): layer is Element => Boolean(layer) ); const { x, y } = point ?? { x: 0, y: 0 }; const box = edge ?? { left: 0, right: 0, top: 0 }; const reduce = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false; reduceRef.current = reduce; const width = list.offsetWidth; const height = list.offsetHeight; const vw = document.documentElement.clientWidth; const vh = document.documentElement.clientHeight; let left: number; let top: number; let at = 0; let origin: string; if (side === 'bottom' || side === 'top') { left = clamp(x - width / 2, MARGIN, vw - MARGIN - width); top = side === 'bottom' ? y - TAIL - height : y + TAIL; at = clamp(x - left, MENU_RADIUS + TAIL_HALF, width - MENU_RADIUS - TAIL_HALF); origin = `${at}px ${side === 'bottom' ? height + TAIL : -TAIL}px`; } else if (side === 'left' || side === 'right') { top = clamp(y - height / 2, MARGIN, vh - MARGIN - height); left = side === 'right' ? x - TAIL - width : x + TAIL; at = clamp(y - top, MENU_RADIUS + TAIL_HALF, height - MENU_RADIUS - TAIL_HALF); origin = `${side === 'right' ? width + TAIL : -TAIL}px ${at}px`; } else { const flip = box.right - 4 + width > vw - MARGIN && box.left + 4 - width >= MARGIN; left = flip ? box.left + 4 - width : box.right - 4; top = clamp(box.top - 5, MARGIN, vh - MARGIN - height); origin = flip ? 'right top' : 'left top'; } const path = menuPath(width, height, side, at); frameRef.current = { left, top, width, height }; outer.style.left = `${left}px`; outer.style.top = `${top}px`; outer.style.transformOrigin = origin; outer.style.visibility = 'visible'; glass.style.clipPath = `path('${path}')`; shape.setAttribute('d', path); if (reduce) { layers.forEach(layer => layer.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 120, easing: 'ease-out' })); } else { outer.animate([{ transform: `scale(${nested ? 0.94 : 0.82})` }, { transform: 'scale(1)' }], { duration: nested ? 220 : 340, easing: POP }); layers.forEach(layer => layer.animate([{ opacity: 0 }, { opacity: 1 }], { duration: nested ? 120 : 160, easing: 'ease-out' }) ); } const first = rows.findIndex(usable); if (focusFirst && first >= 0) { setActive(first); rowRefs.current[first]?.focus({ preventScroll: true }); } else { list.focus({ preventScroll: true }); } return () => { aliveRef.current = false; window.clearTimeout(timerRef.current); }; }, []); useEffect(() => { if (!closing) return undefined; const outer = outerRef.current; const layers = [outer?.firstElementChild, glassRef.current, shapeRef.current, listRef.current].filter( (layer): layer is Element => Boolean(layer) ); const duration = reduceRef.current ? 100 : 150; let done = false; const finish = () => { if (done || !aliveRef.current) return; done = true; callbacks.current.onExited?.(); }; if (outer && !reduceRef.current) { outer.animate([{ transform: 'scale(1)' }, { transform: 'scale(0.96)' }], { duration, easing: 'ease-in', fill: 'forwards' }); } layers.forEach(layer => layer.animate([{ opacity: 1 }, { opacity: 0 }], { duration, easing: 'ease-in', fill: 'forwards' }) ); const timer = window.setTimeout(finish, duration); return () => window.clearTimeout(timer); }, [closing]); useIsomorphicLayoutEffect(() => { const highlight = highlightRef.current; if (!highlight) return; const row = rowRefs.current[active]; if (!row || blink) { if (blink) highlight.style.transition = 'none'; highlight.style.opacity = '0'; return; } const jump = highlight.style.opacity !== '1' || reduceRef.current; if (jump) highlight.style.transition = 'none'; highlight.style.transform = `translateY(${row.offsetTop}px)`; highlight.style.height = `${row.offsetHeight}px`; highlight.style.opacity = '1'; if (jump) { void highlight.offsetHeight; highlight.style.transition = ''; } }, [active, blink]); const activate = (index: number) => { setActive(index); rowRefs.current[index]?.focus({ preventScroll: true }); }; const openSub = (index: number, keyboard: boolean) => { window.clearTimeout(timerRef.current); const frame = frameRef.current; const row = rowRefs.current[index]; if (!frame || !row) return; setSub({ index, keyboard, edge: { left: frame.left, right: frame.left + frame.width, top: frame.top + row.offsetTop } }); }; const closeSub = () => { window.clearTimeout(timerRef.current); setSub(null); }; const choose = (index: number, keyboard: boolean) => { if (chosen) return; const row = rows[index]; setChosen(true); setActive(index); window.clearTimeout(timerRef.current); if (reduceRef.current) { callbacks.current.onSelect?.(row, keyboard); return; } setBlink(true); window.setTimeout(() => aliveRef.current && setBlink(false), 70); window.setTimeout(() => aliveRef.current && callbacks.current.onSelect?.(row, keyboard), 150); }; const enterRow = (index: number) => { if (chosen || active === index || !usable(rows[index])) return; activate(index); window.clearTimeout(timerRef.current); if (rows[index].items?.length) { if (sub?.index !== index) timerRef.current = window.setTimeout(() => openSub(index, false), 120); } else if (sub) { timerRef.current = window.setTimeout(closeSub, 220); } }; const onKeyDown = (event: React.KeyboardEvent) => { if (chosen) return; const { key } = event; const order = rows.flatMap((row, i) => (usable(row) ? [i] : [])); let handled = true; if (key === 'ArrowDown' || key === 'ArrowUp' || key === 'Home' || key === 'End') { if (order.length) { const at = order.indexOf(active); let next = order[0]; if (key === 'End') next = order[order.length - 1]; else if (key === 'ArrowDown') next = order[(at + 1) % order.length]; else if (key === 'ArrowUp') next = order[at <= 0 ? order.length - 1 : at - 1]; if (sub) closeSub(); activate(next); } } else if (key === 'ArrowRight' && rows[active]?.items?.length) { openSub(active, true); } else if ((key === 'ArrowLeft' || key === 'Escape') && nested) { callbacks.current.onBack?.(); } else if (key === 'Escape' || key === 'Tab') { callbacks.current.onDismiss?.(true); } else { handled = false; } if (handled) { event.preventDefault(); event.stopPropagation(); } }; const subRow = sub ? rows[sub.index] : null; return ( <> {createPortal(

, document.body )} {sub ? ( callbacks.current.onSelect?.(row, keyboard)} onDismiss={restore => callbacks.current.onDismiss?.(restore)} onBack={() => { const index = sub.index; closeSub(); activate(index); }} onEnter={() => { window.clearTimeout(timerRef.current); setActive(sub.index); }} /> ) : null} ); } export default function Dock({ items = [], position = 'bottom', theme = 'dark', baseItemSize = 50, magnification = 70, distance = 200, panelHeight = 68, gap = 10, roundness = 0.5, spring = { mass: 0.1, stiffness: 150, damping: 12 }, bounce = true, autoHide = false, tiles = true, showLabels = true, showIndicators = true, showBadges = true, badgeColor = '#ff453a', accentColor = '#0a84ff', className = '', style }: DockProps) { const rootRef = useRef(null); const itemRefs = useRef<(HTMLButtonElement | null)[]>([]); const wakeRef = useRef<(() => void) | null>(null); const actionsRef = useRef(null); const menuRef = useRef(null); const serialRef = useRef(0); const pressRef = useRef(null); const pressingRef = useRef(false); const skipRef = useRef(-1); const [fit, setFit] = useState(1); const [menu, setMenu] = useState(null); const side = SIDES.includes(position) ? position : 'bottom'; const vertical = side === 'left' || side === 'right'; const rawBase = Math.max(16, baseItemSize); const rawPeak = Math.max(rawBase, magnification); const rawThickness = Math.max(rawBase, panelHeight); const rawGap = Math.max(0, gap); const length = items.reduce((sum, item) => sum + (item?.separator ? 1 : rawBase), 0) + rawGap * Math.max(0, items.length - 1) + rawThickness - rawBase; const base = rawBase * fit; const peak = rawPeak * fit; const thickness = rawThickness * fit; const tokens: Tokens = { ...(THEMES[theme] ?? THEMES.dark), '--dock-accent': accentColor, '--dock-badge': badgeColor }; const settings = { items, side, vertical, length: length + rawPeak - rawBase, base, peak, thickness, gap: rawGap * fit, distance: Math.max(1, distance) * fit, mass: Math.max(0.01, spring?.mass ?? 0.1), stiffness: Math.max(1, spring?.stiffness ?? 150), damping: Math.max(0, spring?.damping ?? 12), bounce, autoHide }; const settingsRef = useRef(settings); settingsRef.current = settings; menuRef.current = menu; useEffect(() => { wakeRef.current?.(); }); useIsomorphicLayoutEffect(() => { if (autoHide) rootRef.current?.setAttribute('data-hidden', ''); }, []); useIsomorphicLayoutEffect(() => { const root = rootRef.current; if (!root) return undefined; const host = root.offsetParent ?? document.documentElement; const measure = () => { const s = settingsRef.current; const room = (s.vertical ? host.clientHeight : host.clientWidth) - EDGE * 2; const next = s.length > 0 ? Math.min(1, Math.max(0.4, room / s.length)) : 1; setFit(Math.round(next * 1000) / 1000); }; measure(); const observer = new ResizeObserver(measure); observer.observe(host); return () => observer.disconnect(); }, [length, vertical, rawPeak, rawBase]); useEffect(() => { const root = rootRef.current; if (!root) return undefined; const reduce = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false; const motion = new Map(); const pointer = { x: 0, y: 0, inside: false }; let focused = -1; let held: number | null = null; let lastFocus: number | null = null; let lastRest: number[] = []; let lastBase = settingsRef.current.base; let hidden = root.hasAttribute('data-hidden'); let hiding = settingsRef.current.autoHide; let hideTimer = 0; let raf = 0; let last = 0; let alive = true; const entry = (index: number): Motion => { let state = motion.get(index); if (!state) { state = { size: settingsRef.current.base, velocity: 0, lift: 0, rise: 0, launch: 0, gravity: 0, hopping: false, drawn: '', node: null }; motion.set(index, state); } return state; }; const tick = (now: number) => { raf = 0; if (!alive) return; const s = settingsRef.current; const dt = Math.min(1 / 30, Math.max(0.001, (now - last) / 1000)); last = now; if (s.base !== lastBase) { const ratio = s.base / lastBase; motion.forEach(state => { state.size *= ratio; state.velocity *= ratio; }); lastBase = s.base; } const rect = root.getBoundingClientRect(); const center = s.vertical ? rect.top + rect.height / 2 : rect.left + rect.width / 2; const spans = s.items.map(item => (item?.separator ? 1 : s.base)); let cursor = -(spans.reduce((sum, span) => sum + span, 0) + s.gap * Math.max(0, spans.length - 1)) / 2; const rest = spans.map(span => { const middle = cursor + span / 2; cursor += span + s.gap; return middle; }); let focus: number | null = null; if (held !== null) focus = held; else if (pointer.inside) focus = (s.vertical ? pointer.y : pointer.x) - center; else if (rest[focused] !== undefined) focus = rest[focused]; lastFocus = focus; lastRest = rest; const steps = Math.max(1, Math.ceil(dt * 240)); const h = dt / steps; const k = s.stiffness / s.mass; const c = s.damping / s.mass; let moving = false; s.items.forEach((item, index) => { const node = itemRefs.current[index]; if (!node || item?.separator) return; const state = entry(index); const reach = focus === null ? 1 : Math.abs(focus - rest[index]) / s.distance; const target = s.base + (s.peak - s.base) * (reach < 1 ? Math.cos((reach * Math.PI) / 2) ** 2 : 0); if (reduce) { state.size = target; state.velocity = 0; } else { for (let i = 0; i < steps; i++) { state.velocity = (state.velocity + h * k * (target - state.size)) / (1 + h * c + h * h * k); state.size += state.velocity * h; if (!state.hopping) continue; state.rise -= state.gravity * h; state.lift += state.rise * h; if (state.lift > 0) continue; state.lift = 0; state.rise *= -0.36; if (state.rise < state.launch * 0.2) { state.rise = 0; state.hopping = false; node.removeAttribute('data-hop'); } } } if (Math.abs(state.velocity) < 0.01 && Math.abs(target - state.size) < 0.01) { state.size = target; state.velocity = 0; } else { moving = true; } if (state.hopping) moving = true; const size = Math.max(1, state.size); const drawn = `${size.toFixed(2)} ${state.lift.toFixed(2)} ${s.side}`; if (drawn === state.drawn && node === state.node) return; state.drawn = drawn; state.node = node; const lift = s.side === 'bottom' || s.side === 'right' ? -state.lift : state.lift; const tile = node.firstElementChild as HTMLElement | null; node.style.width = `${size}px`; node.style.height = `${size}px`; if (tile) tile.style.transform = `translate(${s.vertical ? `${lift}px, 0` : `0, ${lift}px`}) scale(${size / s.base})`; }); if (moving) raf = requestAnimationFrame(tick); }; const wake = () => { if (raf || !alive) return; last = performance.now(); raf = requestAnimationFrame(tick); }; const show = () => { window.clearTimeout(hideTimer); hideTimer = 0; if (!hidden) return; hidden = false; root.removeAttribute('data-hidden'); }; const hide = () => { window.clearTimeout(hideTimer); hideTimer = 0; const blocked = pointer.inside || held !== null || root.contains(document.activeElement); if (hidden || !settingsRef.current.autoHide || blocked) return; hidden = true; root.setAttribute('data-hidden', ''); }; const hideLater = () => { if (hidden || hideTimer || !settingsRef.current.autoHide) return; hideTimer = window.setTimeout(hide, 600); }; wakeRef.current = () => { const enabled = settingsRef.current.autoHide; if (enabled !== hiding) { hiding = enabled; if (enabled) hide(); else show(); } wake(); }; actionsRef.current = { hop: (index: number) => { const node = itemRefs.current[index]; if (reduce || !settingsRef.current.bounce || !node) return; const state = entry(index); if (state.hopping) return; const height = state.size * HOP; state.gravity = (8 * height) / (HOP_TIME * HOP_TIME); state.launch = (state.gravity * HOP_TIME) / 2; state.rise = state.launch; state.hopping = true; node.setAttribute('data-hop', ''); wake(); }, focus: (index: number) => { focused = index; wake(); }, hold: (index: number | null) => { if (index === null) { held = null; wake(); hideLater(); return; } held = lastFocus ?? lastRest[index] ?? 0; show(); wake(); } }; const onMove = (event: PointerEvent) => { pointer.x = event.clientX; pointer.y = event.clientY; pointer.inside = true; show(); wake(); }; const onLeave = () => { pointer.inside = false; wake(); hideLater(); }; const onFocusOut = (event: FocusEvent) => { if (!root.contains(event.relatedTarget as Node | null)) hideLater(); }; const onWindowMove = (event: PointerEvent) => { const s = settingsRef.current; if (!s.autoHide || pointer.inside) return; const host = root.offsetParent; const rect = host ? host.getBoundingClientRect() : { left: 0, top: 0, right: window.innerWidth, bottom: window.innerHeight }; const zone = EDGE + s.thickness * 0.6; const x = event.clientX; const y = event.clientY; const within = x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom; const near = { bottom: y >= rect.bottom - zone, top: y <= rect.top + zone, left: x <= rect.left + zone, right: x >= rect.right - zone }[s.side]; if (within && near) show(); else hideLater(); }; root.addEventListener('pointermove', onMove); root.addEventListener('pointerdown', onMove); root.addEventListener('pointerleave', onLeave); root.addEventListener('pointercancel', onLeave); root.addEventListener('focusin', show); root.addEventListener('focusout', onFocusOut); window.addEventListener('pointermove', onWindowMove); window.addEventListener('pointerdown', onWindowMove); wake(); return () => { alive = false; cancelAnimationFrame(raf); window.clearTimeout(hideTimer); root.removeEventListener('pointermove', onMove); root.removeEventListener('pointerdown', onMove); root.removeEventListener('pointerleave', onLeave); root.removeEventListener('pointercancel', onLeave); root.removeEventListener('focusin', show); root.removeEventListener('focusout', onFocusOut); window.removeEventListener('pointermove', onWindowMove); window.removeEventListener('pointerdown', onWindowMove); wakeRef.current = null; actionsRef.current = null; const press = pressRef.current; if (press) { window.clearTimeout(press.timer); press.cleanup(); } }; }, []); const closeMenu = useCallback((restore: boolean) => { const current = menuRef.current; if (!current || current.closing) return; const rows = settingsRef.current.items[current.index]?.menu ?? []; const next = { ...current, closing: true, restore, rows }; menuRef.current = next; setMenu(next); }, []); const finishMenu = useCallback(() => { const current = menuRef.current; menuRef.current = null; setMenu(null); actionsRef.current?.hold(null); if (current?.restore) itemRefs.current[current.index]?.focus({ preventScroll: true }); }, []); useEffect(() => { if (!menu || menu.closing) return undefined; const owner = itemRefs.current[menu.index]; const onDown = (event: PointerEvent) => { const target = event.target; if (target instanceof Element && (target.closest('[data-dock-menu]') || owner?.contains(target))) return; closeMenu(false); }; const onScroll = (event: Event) => { if (event.target instanceof Element && event.target.closest('[data-dock-menu]')) return; closeMenu(false); }; const onAway = () => closeMenu(false); document.addEventListener('pointerdown', onDown, true); window.addEventListener('scroll', onScroll, true); window.addEventListener('resize', onAway); window.addEventListener('blur', onAway); return () => { document.removeEventListener('pointerdown', onDown, true); window.removeEventListener('scroll', onScroll, true); window.removeEventListener('resize', onAway); window.removeEventListener('blur', onAway); }; }, [menu, closeMenu]); const openMenu = (index: number, mode: 'pointer' | 'keyboard' | 'press') => { const node = itemRefs.current[index]; if (!node || !items[index]?.menu?.length) return false; const current = menuRef.current; if (current && current.index === index && !current.closing) return true; actionsRef.current?.hold(index); const rect = node.getBoundingClientRect(); const point = { bottom: { x: rect.left + rect.width / 2, y: rect.top - MENU_GAP }, top: { x: rect.left + rect.width / 2, y: rect.bottom + MENU_GAP }, left: { x: rect.right + MENU_GAP, y: rect.top + rect.height / 2 }, right: { x: rect.left - MENU_GAP, y: rect.top + rect.height / 2 } }[side]; serialRef.current += 1; const next: MenuState = { id: serialRef.current, index, point, keyboard: mode === 'keyboard', closing: false, restore: false }; menuRef.current = next; setMenu(next); return true; }; const endPress = () => { const press = pressRef.current; if (!press) return; window.clearTimeout(press.timer); press.cleanup(); pressRef.current = null; }; const startPress = (event: React.PointerEvent, index: number) => { endPress(); const target = event.currentTarget; const press: Press = { id: event.pointerId, x: event.clientX, y: event.clientY, timer: 0, cleanup: () => {} }; if (target.hasPointerCapture?.(event.pointerId)) target.releasePointerCapture(event.pointerId); const onMove = (moved: PointerEvent) => { if (moved.pointerId !== press.id) return; if (Math.hypot(moved.clientX - press.x, moved.clientY - press.y) > 8) endPress(); }; const onUp = (released: PointerEvent) => { if (released.pointerId === press.id) endPress(); }; press.cleanup = () => { window.removeEventListener('pointermove', onMove); window.removeEventListener('pointerup', onUp); window.removeEventListener('pointercancel', onUp); }; press.timer = window.setTimeout(() => { press.cleanup(); pressRef.current = null; if (!openMenu(index, 'press')) return; skipRef.current = index; pressingRef.current = true; window.addEventListener( 'pointerup', () => { pressingRef.current = false; }, { once: true } ); }, HOLD_TIME); window.addEventListener('pointermove', onMove); window.addEventListener('pointerup', onUp); window.addEventListener('pointercancel', onUp); pressRef.current = press; }; const onItemKeyDown = (event: React.KeyboardEvent, index: number) => { const toward = { bottom: 'ArrowUp', top: 'ArrowDown', left: 'ArrowRight', right: 'ArrowLeft' }[side]; if (event.key === 'ContextMenu' || (event.shiftKey && event.key === 'F10') || event.key === toward) { if (openMenu(index, 'keyboard')) event.preventDefault(); return; } const order = items.flatMap((item, i) => (item?.separator ? [] : [i])); const at = order.indexOf(index); const keys = vertical ? ['ArrowUp', 'ArrowDown'] : ['ArrowLeft', 'ArrowRight']; let next: number | undefined; if (event.key === keys[0]) next = order[(at - 1 + order.length) % order.length]; else if (event.key === keys[1]) next = order[(at + 1) % order.length]; else if (event.key === 'Home') next = order[0]; else if (event.key === 'End') next = order[order.length - 1]; if (next === undefined) return; event.preventDefault(); itemRefs.current[next]?.focus(); }; const openIndex = menu && !menu.closing ? menu.index : -1; return ( ); } 4e:["$","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","react-dom@^19.0.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-dom","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":"react-dom@^19.0.0"}]]}]}]]}],["$","$L4f",null,{"namespace":"@react-bits","registryDependencies":[]}]]}],null]}],["$","$L50",null,{"files":[{"path":"Dock.css","content":"$51","type":"registry:file","target":"@components/Dock.css"},{"path":"Dock.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]