Toolbar Tooltips

'use client'

import { useRef, useState, type ReactNode } from 'react'
import './toolbar-tooltips.css'

export interface ToolItem { id: string; label: string; shortcut?: string; icon: ReactNode; sep?: boolean }
export interface ToolbarTooltipsProps {
  items: ToolItem[]
  onAction?: (id: string) => void
  delay?: number
  fill?: 'dark' | 'light'
  className?: string
}

/** Icon toolbar with one tooltip that glides between buttons. */
export function ToolbarTooltips({ items, onAction, delay = 400, fill = 'dark', className }: ToolbarTooltipsProps) {
  const [tip, setTip] = useState<{ i: number; x: number } | null>(null)
  const [open, setOpen] = useState(false)
  const [warm, setWarm] = useState(false)
  const [pressed, setPressed] = useState<string[]>([])
  const t = useRef<ReturnType<typeof setTimeout> | null>(null)
  const cool = useRef<ReturnType<typeof setTimeout> | null>(null)
  const refs = useRef<(HTMLButtonElement | null)[]>([])
  const tipRef = useRef<HTMLSpanElement>(null)
  const show = (i: number) => {
    const el = refs.current[i]
    if (!el) return
    if (cool.current) clearTimeout(cool.current)
    const center = el.offsetLeft + el.offsetWidth / 2
    setTip({ i, x: center })
    if (open || warm) { setOpen(true); return }
    if (t.current) clearTimeout(t.current)
    t.current = setTimeout(() => { setOpen(true); setWarm(true) }, delay)
  }
  const hide = () => {
    if (t.current) clearTimeout(t.current)
    setOpen(false)
    cool.current = setTimeout(() => setWarm(false), 500)
  }
  const w = tipRef.current?.offsetWidth ?? 0
  const cur = tip ? items[tip.i] : null
  return (
    <div role="toolbar" aria-label="Formatting" className={['sd-tbt', className].filter(Boolean).join(' ')} data-fill={fill} onMouseLeave={hide}>
      {items.map((it, i) => (
        <span key={it.id} style={{ display: 'contents' }}>
          {it.sep && <span className="sd-tbt__sep" aria-hidden />}
          <button
            ref={(el) => { refs.current[i] = el }}
            type="button"
            className="sd-tbt__b"
            aria-label={it.label}
            aria-pressed={pressed.includes(it.id)}
            aria-keyshortcuts={it.shortcut}
            tabIndex={i === (tip?.i ?? 0) ? 0 : -1}
            onMouseEnter={() => show(i)}
            onFocus={() => show(i)}
            onBlur={hide}
            onClick={() => { setPressed((p) => (p.includes(it.id) ? p.filter((x) => x !== it.id) : [...p, it.id])); onAction?.(it.id) }}
            onKeyDown={(e) => {
              const d = e.key === 'ArrowRight' ? 1 : e.key === 'ArrowLeft' ? -1 : 0
              if (d) { e.preventDefault(); refs.current[(i + d + items.length) % items.length]?.focus() }
            }}
          >
            {it.icon}
          </button>
        </span>
      ))}
      <span ref={tipRef} className="sd-tbt__tip" aria-hidden data-open={open || undefined} data-glide={warm || undefined} style={{ '--x': `${(tip?.x ?? 0) - w / 2}px` } as React.CSSProperties}>
        {cur?.label}{cur?.shortcut && <kbd>{cur.shortcut}</kbd>}
      </span>
    </div>
  )
}

.sd-tbt { --bg: #1c1c1c; --fg: #f6f6f6; --mute: #8e8e8e; --line: rgb(255 255 255 / 0.1); --soft: rgb(255 255 255 / 0.07); --strong: #fafafa; --on: #111; 
  color: var(--fg); font-size: 14px; line-height: 1.4; -webkit-tap-highlight-color: transparent; }
.sd-tbt[data-fill='light'] { --bg: #fff; --fg: #121212; --mute: #6f6f6f; --line: rgb(0 0 0 / 0.09); --soft: rgb(0 0 0 / 0.05); --strong: #111; --on: #fff; }
.sd-tbt button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.sd-tbt :focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.sd-tbt .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sd-tbt { position: relative; display: inline-flex; gap: 2px; padding: 5px; border-radius: 14px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.sd-tbt__b { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; color: var(--mute); transition: color 150ms, background-color 150ms; }
.sd-tbt__b:hover, .sd-tbt__b:focus-visible, .sd-tbt__b[aria-pressed='true'] { color: var(--fg); background: var(--soft); }
.sd-tbt__b svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sd-tbt__sep { width: 1px; margin: 6px 3px; background: var(--line); }
.sd-tbt__tip { position: absolute; bottom: calc(100% + 8px); left: 0; display: flex; gap: 8px; align-items: center; padding: 6px 9px; border-radius: 8px; background: var(--strong); color: var(--on); font-size: 12px; font-weight: 500; white-space: nowrap; pointer-events: none; opacity: 0; transform: translateX(var(--x)) translateY(4px); transition: opacity 160ms, transform 160ms; }
.sd-tbt__tip[data-open] { opacity: 1; transform: translateX(var(--x)); }
.sd-tbt__tip[data-glide] { transition: opacity 160ms, transform 240ms cubic-bezier(0.3, 1.1, 0.4, 1); }
.sd-tbt__tip kbd { font: 500 11px/1 ui-monospace, monospace; opacity: 0.6; }
@media (prefers-reduced-motion: reduce) { .sd-tbt *, .sd-tbt *::before, .sd-tbt *::after { animation: none !important; transition: none !important; } }