Glass Dock

/**
 * VibeBox Motion · Glass Dock
 * Copyright (c) 2026 VibeBox. Licensed under the VibeBox Motion Free License:
 * https://motion.vibeboxph.com/license
 * Use it in unlimited personal, commercial and client projects.
 * Do not sell or redistribute it as a component, kit, template or builder.
 */
"use client";

import { useRef, useState, type PointerEvent } from "react";
import { cn } from "@/lib/utils";
import { Glass, GlassGlyphIcon, type GlassGlyph } from "@/lib/vibebox/glass";

export type GlassDockItem = { id: string; label: string; glyph: GlassGlyph; badge?: number };

export type GlassDockProps = {
  /** The apps or destinations, left to right. */
  items?: GlassDockItem[];
  /** The id of the open one, marked with a dot. Uncontrolled when left out. */
  active?: string;
  /** Called with an item's id when it is chosen. */
  onSelect?: (id: string) => void;
  /** Resting size of an icon in pixels. */
  size?: number;
  /** How far the icon under the pointer grows (1 keeps them flat). */
  magnify?: number;
  tone?: "auto" | "dark" | "light";
  className?: string;
};

const DEFAULT_ITEMS: GlassDockItem[] = [
  { id: "home", label: "Home", glyph: "home" },
  { id: "search", label: "Search", glyph: "search" },
  { id: "mail", label: "Mail", glyph: "mail", badge: 3 },
  { id: "music", label: "Music", glyph: "music" },
  { id: "camera", label: "Camera", glyph: "camera" },
  { id: "settings", label: "Settings", glyph: "settings" },
];

/**
 * A dock of glass icons that swell toward the pointer, like the one on a desktop. The size follows
 * a bell curve of the distance, set with transform only; touch and reduced motion keep them flat.
 */
export function GlassDock({ items = DEFAULT_ITEMS, active, onSelect, size = 52, magnify = 1.55, tone, className }: GlassDockProps) {
  const [own, setOwn] = useState(items[0]?.id);
  const current = active ?? own;
  const refs = useRef<(HTMLLIElement | null)[]>([]);
  const root = useRef<HTMLElement | null>(null);
  const frame = useRef(0);

  /*
   * Each icon grows on a bell curve of its distance from the pointer. Growing by transform alone
   * would let a big icon sit on its neighbours, so every icon is also shifted outward by the growth
   * of the ones before it (and the whole row re-centred): the icons stay side by side. Distances use
   * the resting centres (offsetLeft), so the curve does not chase its own movement.
   */
  const apply = (clientX: number | null) => {
    window.cancelAnimationFrame(frame.current);
    frame.current = window.requestAnimationFrame(() => {
      const nodes = refs.current.filter((node): node is HTMLLIElement => Boolean(node));
      const host = root.current;
      if (!host) return;
      const left = host.getBoundingClientRect().left;
      const scales = nodes.map((node) => {
        if (clientX === null) return 1;
        const centre = node.offsetLeft + node.offsetWidth / 2;
        const distance = Math.abs(clientX - left - centre);
        return 1 + (magnify - 1) * Math.exp(-((distance / (size * 1.1)) ** 2));
      });
      const growth = scales.map((value) => (value - 1) * size);
      const total = growth.reduce((sum, value) => sum + value, 0);
      let before = 0;
      nodes.forEach((node, index) => {
        const g = growth[index] ?? 0;
        node.style.setProperty("--s", (scales[index] ?? 1).toFixed(3));
        node.style.setProperty("--x", `${(before + g / 2 - total / 2).toFixed(1)}px`);
        before += g;
      });
    });
  };
  const onMove = (event: PointerEvent) => {
    if (event.pointerType !== "mouse" || magnify <= 1) return;
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    apply(event.clientX);
  };

  return (
    <Glass
      as="nav"
      data-vb="glass-dock"
      aria-label="Dock"
      tone={tone}
      radius={Math.round(size * 0.42)}
      still
      rootRef={root}
      onPointerMove={onMove}
      onPointerLeave={() => apply(null)}
      className={cn("inline-flex items-end px-3 py-2", className)}
    >
      <ul className="flex items-end gap-2">
        {items.map((item, index) => (
          <li
            key={item.id}
            ref={(node) => {
              refs.current[index] = node;
            }}
            className="group relative origin-bottom [transform:translate3d(var(--x,0px),0,0)_scale(var(--s,1))] transition-transform duration-150 ease-out motion-reduce:transition-none"
          >
            <button
              type="button"
              aria-label={item.label}
              aria-current={current === item.id ? "true" : undefined}
              onClick={() => {
                setOwn(item.id);
                onSelect?.(item.id);
              }}
              style={{ width: size, height: size, borderRadius: Math.round(size * 0.3) }}
              className="relative grid place-items-center border border-white/25 bg-gradient-to-b from-white/30 to-white/5 shadow-[inset_0_1px_0_rgb(255_255_255/0.5)] transition-colors hover:from-white/40 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
            >
              <GlassGlyphIcon name={item.glyph} className="size-[46%]" />
              {item.badge ? (
                <span className="absolute -top-1 -right-1 grid h-4 min-w-4 place-items-center rounded-full bg-[#ff4d6d] px-1 font-mono text-[0.6rem] leading-none font-semibold text-white">{item.badge}</span>
              ) : null}
            </button>
            <span aria-hidden="true" className={cn("mx-auto mt-1 block size-1 rounded-full bg-white transition-opacity", current === item.id ? "opacity-90" : "opacity-0")} />
            <span
              aria-hidden="true"
              className="pointer-events-none absolute -top-8 left-1/2 -translate-x-1/2 rounded-md bg-black/60 px-2 py-0.5 text-[0.7rem] whitespace-nowrap text-white opacity-0 backdrop-blur-sm transition-opacity group-focus-within:opacity-100 group-hover:opacity-100"
            >
              {item.label}
            </span>
          </li>
        ))}
      </ul>
    </Glass>
  );
}

/**
 * VibeBox Motion · Glass Dock
 * Copyright (c) 2026 VibeBox. Licensed under the VibeBox Motion Free License:
 * https://motion.vibeboxph.com/license
 * Use it in unlimited personal, commercial and client projects.
 * Do not sell or redistribute it as a component, kit, template or builder.
 */
export * from "./glass-dock.client";