Focus dock

1"use client";2 3import { useRef, useState, type CSSProperties, type ReactNode } from "react";4 5export type FocusDockItem = { id: string; label: string; icon: ReactNode };6export type FocusDockProps = {7  items: FocusDockItem[];8  activeId?: string;9  onSelect?: (id: string) => void;10  label?: string;11};12 13/** Compact navigation dock with restrained pointer magnification. */14export function FocusDock({15  items,16  activeId,17  onSelect,18  label = "Quick navigation",19}: FocusDockProps) {20  const buttons = useRef<(HTMLButtonElement | null)[]>([]);21  const [pointer, setPointer] = useState<{ x: number; width: number } | null>(22    null,23  );24  const [focusIndex, setFocusIndex] = useState<number | null>(null);25  return (26    <nav27      className="focus-dock"28      aria-label={label}