5e: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 5f:T3b8f,"use client"; import { useEffect, useId, useRef, useState } from "react"; import type { CSSProperties, ReactNode } from "react"; import "./Dock.css"; /* ---------- Refracción real (solo Chromium): mapa de desplazamiento generado en canvas ---------- */ /** Solo Chromium acepta url(#filtro) dentro de backdrop-filter; el resto cae al desenfoque simple. */ function canRefract(): boolean { if (typeof CSS === "undefined" || typeof navigator === "undefined") return false; return /Chrome\//.test(navigator.userAgent) && CSS.supports("backdrop-filter", "url(#a)"); } interface RefractionMap { url: string; scale: number; w: number; h: number } /** Mapa de desplazamiento: en el bisel la luz se curva hacia adentro y, con zoom > 1, el centro también amplía. */ function buildRefractionMap(w: number, h: number, radius: number, bezel: number, zoom = 1): RefractionMap | null { if (w < 4 || h < 4) return null; const c = document.createElement("canvas"); c.width = w; c.height = h; const ctx = c.getContext("2d"); if (!ctx) return null; const img = ctx.createImageData(w, h); const vx = new Float32Array(w * h); const vy = new Float32Array(w * h); const hw = w / 2, hh = h / 2, r = Math.min(radius, hw, hh); const k = 1 - 1 / zoom; let max = 0.001; for (let y = 0; y < h; y++) { for (let x = 0; x < w; x++) { const px = x + 0.5 - hw, py = y + 0.5 - hh; const qx = Math.abs(px) - (hw - r), qy = Math.abs(py) - (hh - r); const sdf = Math.hypot(Math.max(qx, 0), Math.max(qy, 0)) + Math.min(Math.max(qx, qy), 0) - r; if (sdf > 0) continue; let nx: number, ny: number; if (qx > 0 && qy > 0) { const l = Math.hypot(qx, qy) || 1; nx = (Math.sign(px) * qx) / l; ny = (Math.sign(py) * qy) / l; } else if (qx > qy) { nx = Math.sign(px); ny = 0; } else { nx = 0; ny = Math.sign(py); } const t = Math.min(1, -sdf / bezel); const m = Math.pow(1 - t, 2.2) * bezel; const dx = -nx * m - px * k, dy = -ny * m - py * k; const i = y * w + x; vx[i] = dx; vy[i] = dy; max = Math.max(max, Math.abs(dx), Math.abs(dy)); } } const d = img.data; for (let i = 0; i < w * h; i++) { d[i * 4] = Math.round(127.5 + (127.5 * vx[i]) / max); d[i * 4 + 1] = Math.round(127.5 + (127.5 * vy[i]) / max); d[i * 4 + 2] = 128; d[i * 4 + 3] = 255; } ctx.putImageData(img, 0, 0); return { url: c.toDataURL("image/png"), scale: max * 2, w, h }; } /** Mide el elemento y mantiene su mapa de refracción al día (solo si el navegador lo soporta). */ function useRefractionMap(ref: React.RefObject, radius: number, bezel: number, zoom = 1): RefractionMap | null { const [mapa, setMapa] = useState(null); useEffect(() => { if (!canRefract()) return; const el = ref.current; if (!el) return; let raf = 0; const run = () => { const m = buildRefractionMap(el.offsetWidth, el.offsetHeight, radius, bezel, zoom); if (m) setMapa((p) => (p && p.w === m.w && p.h === m.h ? p : m)); }; const ro = new ResizeObserver(() => { cancelAnimationFrame(raf); raf = requestAnimationFrame(run); }); ro.observe(el); run(); return () => { ro.disconnect(); cancelAnimationFrame(raf); }; }, [ref, radius, bezel, zoom]); return mapa; } /** Filtro SVG: desenfoque, desplazamiento por el mapa y saturación; con dispersión separa los canales RGB como un cristal real. */ function RefractionFilter({ id, mapa, strength, blur = 0, saturate = 1.6, dispersion = 0 }: { id: string; mapa: RefractionMap; strength: number; blur?: number; saturate?: number; dispersion?: number }) { const s = mapa.scale * strength; const disp = (scale: number, result: string) => ( ); return ( ); } /** Valor de backdrop-filter: el filtro SVG si hay refracción; desenfoque + saturación si no. */ function glassBackdrop(id: string, mapa: RefractionMap | null, blur: number, saturate = 1.6): string { return mapa ? `url(#${id})` : `blur(${blur}px) saturate(${saturate}) brightness(1.06)`; } export type DockIconName = "home" | "search" | "mail" | "music" | "camera" | "sliders" | "chat" | "compass"; export interface DockItem { /** Nombre del ícono (también su etiqueta accesible y su globo). */ label: string; /** Ícono propio o un nodo SVG tuyo. */ icon: DockIconName | ReactNode; /** Colores del degradado del ícono: arriba y abajo. */ colors?: [string, string]; /** Muestra el puntito de "abierto" debajo. */ active?: boolean; } export interface DockProps { /** Íconos del dock. */ items?: DockItem[]; /** Tamaño base de cada ícono, en px. */ size?: number; /** Cuánto crece el ícono bajo el cursor (1 = no crece). */ magnify?: number; /** Distancia, en px, a la que el cursor todavía agranda íconos. */ reach?: number; /** Desenfoque del fondo detrás del vidrio, en px. */ blur?: number; /** Fuerza de la refracción en el borde del dock (0 = sin curvar la luz). */ refraction?: number; /** Pinta una escena de color animada detrás (para verlo refractar). */ scene?: boolean; /** Se llama al pulsar un ícono. */ onSelect?: (label: string) => void; /** Clase extra para el contenedor. */ className?: string; /** Estilos extra para el contenedor. */ style?: CSSProperties; } const PALETA: [string, string][] = [ ["#8fc2ff", "#3d63ff"], ["#ffa6cd", "#f0408d"], ["#7ae8ff", "#1f86f0"], ["#ffb48f", "#ff3f6c"], ["#c3a6ff", "#6a3df0"], ["#c8d2e4", "#5d6b86"], ]; const ITEMS: DockItem[] = [ { label: "Home", icon: "home", active: true }, { label: "Search", icon: "search" }, { label: "Mail", icon: "mail", active: true }, { label: "Music", icon: "music" }, { label: "Camera", icon: "camera" }, { label: "Settings", icon: "sliders" }, ]; /** Glifos propios, trazo blanco de 1.8 en una cuadrícula de 24. */ function Glifo({ name }: { name: DockIconName }) { const p = { fill: "none", stroke: "currentColor", strokeWidth: 1.8, strokeLinecap: "round", strokeLinejoin: "round" } as const; return ( ); } /** Dock de vidrio: los íconos crecen bajo el cursor con un resorte y el panel curva la luz en sus bordes. */ export function Dock({ items = ITEMS, size = 46, magnify = 1.75, reach = 110, blur = 1.5, refraction = 1, scene = false, onSelect, className = "", style, }: DockProps) { const panel = useRef(null); const celdas = useRef<(HTMLButtonElement | null)[]>([]); const filtro = useRef(null); const imagen = useRef(null); const fid = "furin-dock-" + useId().replace(/[^a-zA-Z0-9]/g, ""); const [ajuste, setAjuste] = useState(1); const tam = Math.round(size * ajuste); const gap = Math.round(tam * 0.22); const mapa = useRefractionMap(panel, 30, 22); // En contenedores angostos los íconos se achican para que el dock siga cabiendo aun con la ampliación. useEffect(() => { const padre = panel.current?.parentElement?.parentElement; if (!padre) return; const mide = () => { const libre = padre.clientWidth; if (!libre) return; const n = items.length; const reposo = n * size + (n - 1) * Math.round(size * 0.22) + 24; const extra = size * (magnify - 1) * 2.2; const sig = Math.max(0.55, Math.min(1, (libre - 12) / (reposo + extra))); setAjuste((a) => (Math.abs(sig - a) > 0.01 ? sig : a)); }; const ro = new ResizeObserver(mide); ro.observe(padre); mide(); return () => ro.disconnect(); }, [items.length, size, magnify]); const [rebota, setRebota] = useState(-1); // Física: cada ícono es un resorte hacia su escala objetivo; el bucle duerme cuando el cursor se va y todo se asienta. useEffect(() => { const root = panel.current; if (!root) return; const quieto = window.matchMedia("(prefers-reduced-motion: reduce)").matches; const n = items.length; const st = Array.from({ length: n }, () => ({ s: 1, v: 0 })); const sigma = reach / 2.1; let px: number | null = null; let raf = 0; let t0 = 0; const tick = (t: number) => { const dt = Math.min(0.032, (t - t0) / 1000 || 0.016); t0 = t; const b = root.getBoundingClientRect(); const centro = b.left + b.width / 2; let activo = px !== null; let mejor = -1, mejorS = 1.35; for (let i = 0; i < n; i++) { const el = celdas.current[i]; if (!el) continue; const reposo = (i - (n - 1) / 2) * (tam + gap); const d = px === null ? 1e4 : Math.abs(px - centro - reposo); const objetivo = 1 + (magnify - 1) * Math.exp(-(d * d) / (2 * sigma * sigma)); const o = st[i]; if (quieto) { o.s = objetivo; o.v = 0; } else { for (let k = 0; k < 2; k++) { const a = 260 * (objetivo - o.s) - 21 * o.v; o.v += a * (dt / 2); o.s += o.v * (dt / 2); } } if (Math.abs(objetivo - o.s) > 0.002 || Math.abs(o.v) > 0.01) activo = true; const px2 = tam * o.s; el.style.width = el.style.height = `${px2.toFixed(2)}px`; if (o.s > mejorS) { mejor = i; mejorS = o.s; } } for (let i = 0; i < n; i++) celdas.current[i]?.classList.toggle("is-hot", i === mejor); // El filtro de refracción sigue el ancho vivo del panel; el mapa se estira, no se regenera. const w = root.offsetWidth, h = root.offsetHeight; const f = filtro.current, im = imagen.current; if (f && im && w) { f.setAttribute("width", String(w)); f.setAttribute("height", String(h)); im.setAttribute("width", String(w)); im.setAttribute("height", String(h)); } raf = activo ? requestAnimationFrame(tick) : 0; }; const wake = () => { if (!raf) { t0 = performance.now(); raf = requestAnimationFrame(tick); } }; const move = (e: PointerEvent) => { px = e.clientX; wake(); }; const leave = () => { px = null; wake(); }; root.addEventListener("pointermove", move); root.addEventListener("pointerdown", move); root.addEventListener("pointerleave", leave); root.addEventListener("pointercancel", leave); wake(); return () => { root.removeEventListener("pointermove", move); root.removeEventListener("pointerdown", move); root.removeEventListener("pointerleave", leave); root.removeEventListener("pointercancel", leave); cancelAnimationFrame(raf); }; }, [items.length, tam, gap, magnify, reach]); const vars = { "--furin-dock-size": `${tam}px`, "--furin-dock-gap": `${gap}px` } as CSSProperties; const back = glassBackdrop(fid, mapa, blur, 1.5); return ( <> {scene ? : null} {mapa ? : null} ); } function Scene() { return ( ); } export default Dock; 60:T1503,.furin-dock { position: relative; z-index: 1; display: grid; font-family: Geist, system-ui, -apple-system, sans-serif; margin-top: 40px; } .furin-dock__panel { position: relative; border-radius: 30px; padding: 12px; touch-action: none; } .furin-dock__cristal { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(160deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.03) 48%, rgba(255, 255, 255, 0.09)), rgba(255, 255, 255, 0.06); box-shadow: 0 24px 30px -14px rgba(5, 8, 30, 0.55), 0 4px 8px -2px rgba(5, 8, 30, 0.3), inset 0 -10px 18px -8px rgba(255, 255, 255, 0.2), inset 0 12px 16px -12px rgba(255, 255, 255, 0.42); } .furin-dock__rim { position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; pointer-events: none; background: linear-gradient(140deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.1) 28%, rgba(255, 255, 255, 0.04) 62%, rgba(255, 255, 255, 0.55)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } .furin-dock__fila { position: relative; display: flex; align-items: flex-end; gap: var(--furin-dock-gap); height: var(--furin-dock-size); } .furin-dock__item { position: relative; flex: none; padding: 0; border: 0; background: none; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; } .furin-dock__icono { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 24%; color: #fff; background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 46%), linear-gradient(180deg, var(--furin-dock-c1), var(--furin-dock-c2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -2px 3px rgba(0, 0, 20, 0.18), 0 0 0 0.5px rgba(0, 0, 30, 0.25), 0 6px 10px -4px rgba(5, 8, 40, 0.55); } .furin-dock__icono svg { width: 54%; height: 54%; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 40, 0.35)); } .furin-dock__item:focus-visible .furin-dock__icono { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85); } .furin-dock__item.is-bounce .furin-dock__icono { animation: furin-dock-rebote 0.6s cubic-bezier(0.3, 0, 0.4, 1); } @keyframes furin-dock-rebote { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-16px); } 55% { transform: translateY(0); } 72% { transform: translateY(-6px); } } .furin-dock__tip { position: absolute; left: 50%; bottom: calc(100% + 10px); padding: 6px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #fff; white-space: nowrap; background: rgba(20, 24, 60, 0.55); -webkit-backdrop-filter: blur(10px) saturate(1.5); backdrop-filter: blur(10px) saturate(1.5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 6px 14px -6px rgba(5, 8, 30, 0.6); opacity: 0; transform: translate(-50%, 6px) scale(0.92); transition: opacity 0.18s, transform 0.28s cubic-bezier(0.3, 1.5, 0.5, 1); pointer-events: none; } .furin-dock__item.is-hot .furin-dock__tip, .furin-dock__item:focus-visible .furin-dock__tip { opacity: 1; transform: translate(-50%, 0) scale(1); } .furin-dock__punto { position: absolute; left: 50%; bottom: -8px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: rgba(255, 255, 255, 0.9); box-shadow: 0 0 6px rgba(255, 255, 255, 0.8); } @media (prefers-reduced-motion: reduce) { .furin-dock__item.is-bounce .furin-dock__icono { animation: none; } .furin-dock__tip { transition: none; } } /* Escena de color: formas con borde nítido para que la refracción se note (solo se pinta con scene). */ .furin-dock-scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: linear-gradient(160deg, #0d1236 0%, #1b0f3d 55%, #0b2335 100%); } .furin-dock-scene i { position: absolute; border-radius: 50%; animation: furin-dock-flota var(--t, 14s) ease-in-out infinite alternate; } .furin-dock-scene i:nth-child(1) { --t: 13s; --dx: 80px; --dy: 40px; width: 190px; height: 190px; left: 6%; top: 10%; background: radial-gradient(circle at 32% 28%, #ffd0ea 0, #ff5aa5 42%, #c21f78 100%); } .furin-dock-scene i:nth-child(2) { --t: 17s; --dx: -70px; --dy: -50px; width: 230px; height: 230px; right: 0%; top: 28%; background: radial-gradient(circle at 34% 30%, #bcd3ff, #4f7dff 45%, #2437c9); } .furin-dock-scene i:nth-child(3) { --t: 11s; --dx: 90px; --dy: -60px; width: 150px; height: 150px; left: 30%; bottom: -4%; background: radial-gradient(circle at 34% 30%, #d3fff3, #37e0b9 45%, #0a8e86); } .furin-dock-scene i:nth-child(4) { --t: 9s; --dx: -60px; --dy: 70px; width: 90px; height: 90px; right: 28%; top: 4%; background: radial-gradient(circle at 34% 30%, #fff2cc, #ffb347 50%, #e6700f); } .furin-dock-scene b { position: absolute; inset: -10% -14%; background: repeating-linear-gradient(105deg, transparent 0 44px, rgba(255, 255, 255, 0.22) 44px 47px); animation: furin-dock-lineas 12s ease-in-out infinite alternate; } @keyframes furin-dock-flota { to { transform: translate(var(--dx), var(--dy)) scale(1.1); } } @keyframes furin-dock-lineas { to { transform: translateX(-70px); } } @media (prefers-reduced-motion: reduce) { .furin-dock-scene i, .furin-dock-scene b { animation: none; } } 5d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L5e",null,{"files":[{"path":"registry/dock/Dock.tsx","content":"$5f","type":"registry:component","target":"components/furin/dock/Dock.tsx"},{"path":"registry/dock/Dock.css","content":"$60","type":"registry:file","target":"components/furin/dock/Dock.css"}],"className":"h-[70svh] min-h-80"}]]}]