"use client";

import { GroupedMagnifyDock } from "./index";

export interface DemoProps {
  magnification?: number;
  distance?: number;
  iconSize?: number;
  accent?: string;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ magnification = 1.6, distance = 120, iconSize = 40, accent = "#7C5CFF" }: DemoProps) {
  return (
    <div className="flex w-full items-center justify-center p-10">
      <GroupedMagnifyDock magnification={magnification} distance={distance} iconSize={iconSize} accent={accent} />
    </div>
  );
}

1d:T1c94, 1e:T16249,

<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref } from "vue";

interface Shape {
  tag: "path" | "circle" | "rect";
  attrs: Record<string, string | number>;
}
interface DockLink {
  label: string;
  shapes: Shape[];
}

const props = withDefaults(
  defineProps<{
    magnification?: number;
    distance?: number;
    iconSize?: number;
    accent?: string;
  }>(),
  { magnification: 1.6, distance: 120, iconSize: 40, accent: "#7C5CFF" },
);

const PRIMARY: DockLink[] = [
  { label: "Home", shapes: [{ tag: "path", attrs: { d: "M4 11.5 12 4l8 7.5" } }, { tag: "path", attrs: { d: "M6 10v9h5v-6h2v6h5v-9" } }] },
  { label: "Explore", shapes: [{ tag: "circle", attrs: { cx: 12, cy: 12, r: 8.5 } }, { tag: "path", attrs: { d: "M14.8 9.2 13 13l-3.8 1.8L11 11z" } }] },
  {
    label: "Library",
    shapes: [
      { tag: "rect", attrs: { x: 4, y: 4, width: 6.5, height: 6.5, rx: 1.4 } },
      { tag: "rect", attrs: { x: 13.5, y: 4, width: 6.5, height: 6.5, rx: 1.4 } },
      { tag: "rect", attrs: { x: 4, y: 13.5, width: 6.5, height: 6.5, rx: 1.4 } },
      { tag: "rect", attrs: { x: 13.5, y: 13.5, width: 6.5, height: 6.5, rx: 1.4 } },
    ],
  },
  { label: "Activity", shapes: [{ tag: "path", attrs: { d: "M3 12h4l2 7 4-14 2 7h6" } }] },
];

const SECONDARY: DockLink[] = [
  { label: "Messages", shapes: [{ tag: "path", attrs: { d: "M4.5 6a1.5 1.5 0 0 1 1.5-1.5h12A1.5 1.5 0 0 1 19.5 6v8a1.5 1.5 0 0 1-1.5 1.5H9l-4 3.5v-3.5H6A1.5 1.5 0 0 1 4.5 14z" } }] },
  {
    label: "Settings",
    shapes: [
      { tag: "circle", attrs: { cx: 12, cy: 12, r: 3.2 } },
      { tag: "path", attrs: { d: "M12 3v3M12 18v3M4.9 7.1l2.4 1.6M16.7 15.3l2.4 1.6M4.9 16.9l2.4-1.6M16.7 8.7l2.4-1.6" } },
    ],
  },
];

const allLinks: DockLink[] = [...PRIMARY, ...SECONDARY];
const primaryCount = PRIMARY.length;

const dockRef = ref<HTMLDivElement | null>(null);
const iconRefs = ref<HTMLButtonElement[]>([]);
const scales = ref<number[]>(allLinks.map(() => 1));
const reducedMotion = ref(false);
let mediaQuery: MediaQueryList | null = null;
function onMediaChange() {
  reducedMotion.value = mediaQuery?.matches ?? false;
}

let sweepRaf = 0;
function stopSweep() {
  if (sweepRaf) cancelAnimationFrame(sweepRaf);
  sweepRaf = 0;
}

// Idle sweep: drift a phantom pointer across the dock once on mount so the magnification reads
// without a real pointer. Stops the instant a real pointermove takes over.
function runIdleSweep() {
  const dock = dockRef.value;
  if (!dock || reducedMotion.value) return;
  const rect = dock.getBoundingClientRect();
  const from = rect.left - props.distance * 0.5;
  const to = rect.right + props.distance * 0.5;
  const delay = 450;
  const duration = 1500;
  const started = performance.now();
  const step = (now: number) => {
    const elapsed = now - started - delay;
    if (elapsed < 0) {
      sweepRaf = requestAnimationFrame(step);
      return;
    }
    const t = Math.min(1, elapsed / duration);
    const eased = t * t * (3 - 2 * t);
    applyScales(from + (to - from) * eased);
    if (t < 1) {
      sweepRaf = requestAnimationFrame(step);
    } else {
      onLeave();
      sweepRaf = 0;
    }
  };
  sweepRaf = requestAnimationFrame(step);
}

onMounted(() => {
  mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
  reducedMotion.value = mediaQuery.matches;
  mediaQuery.addEventListener("change", onMediaChange);
  runIdleSweep();
});
onBeforeUnmount(() => {
  mediaQuery?.removeEventListener("change", onMediaChange);
  stopSweep();
});

const clampedMagnification = computed(() => Math.max(1, props.magnification));
const dividerHeight = computed(() => Math.round(props.iconSize * 0.85));
const iconBg = computed(() => `${props.accent}1f`);
const iconBorder = computed(() => `${props.accent}45`);

function applyScales(x: number) {
  scales.value = iconRefs.value.map((el) => {
    if (!el) return 1;
    const rect = el.getBoundingClientRect();
    const center = rect.left + rect.width / 2;
    const d = Math.abs(x - center);
    if (d >= props.distance) return 1;
    const falloff = Math.cos((d / props.distance) * (Math.PI / 2));
    return 1 + (clampedMagnification.value - 1) * falloff;
  });
}
function onMove(event: PointerEvent) {
  stopSweep();
  if (reducedMotion.value) return;
  applyScales(event.clientX);
}
function onLeave() {
  stopSweep();
  scales.value = iconRefs.value.map(() => 1);
}

function styleFor(index: number) {
  const scale = reducedMotion.value ? 1 : (scales.value[index] ?? 1);
  return {
    width: `${props.iconSize}px`,
    height: `${props.iconSize}px`,
    transform: `scale(${scale})`,
    backgroundColor: iconBg.value,
    borderColor: iconBorder.value,
  };
}
</script>

<template>
  <div ref="dockRef" class="dock" role="group" aria-label="Dock navigation" @pointermove="onMove" @pointerleave="onLeave">
    <template v-for="(link, i) in allLinks" :key="link.label">
      <span v-if="i === primaryCount" aria-hidden="true" class="dock-divider" :style="{ height: dividerHeight + 'px' }" />
      <div class="dock-item">
        <button ref="iconRefs" type="button" class="dock-btn" :aria-label="link.label" :style="styleFor(i)">
          <span class="dock-icon" :style="{ color: accent }">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
              <component :is="shape.tag" v-for="(shape, si) in link.shapes" :key="si" v-bind="shape.attrs" />
            </svg>
          </span>
        </button>
        <span aria-hidden="true" class="dock-tooltip">{{ link.label }}</span>
      </div>
    </template>
  </div>
</template>

<style scoped>
.dock {
  display: flex;
  width: fit-content;
  align-items: flex-end;
  gap: 0.375rem;
  margin: 0 auto;
  padding: 0.625rem 0.75rem;
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 9999px;
  background: rgb(255 255 255 / 0.06);
  backdrop-filter: blur(10px);
}
.dock-divider {
  flex-shrink: 0;
  align-self: center;
  width: 1px;
  margin: 0 0.25rem;
  background: rgb(255 255 255 / 0.15);
}
.dock-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dock-btn {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid;
  border-radius: 9999px;
  cursor: pointer;
  outline: none;
  transform-origin: bottom;
  transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dock-btn:focus-visible {
  box-shadow: 0 0 0 2px #0b0d10, 0 0 0 4px rgb(255 255 255 / 0.7);
}
.dock-icon {
  display: flex;
  width: 50%;
  height: 50%;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.dock-icon svg {
  width: 100%;
  height: 100%;
}
.dock-tooltip {
  position: absolute;
  top: -2rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 0.375rem;
  background: #14171c;
  color: rgb(255 255 255 / 0.9);
  font: 500 11px/1.3 system-ui, sans-serif;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transition: opacity 150ms ease;
}
.dock-btn:hover ~ .dock-tooltip,
.dock-btn:focus-visible ~ .dock-tooltip {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .dock-btn {
    transition: none;
  }
}
</style>

Nearby