"use client";

import { TravelingToolbarTooltip, type TravelingTooltipItem } from "./index";

function IconBold() {
  return (
    <svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
      <path d="M6.5 4h4.6a2.9 2.9 0 0 1 0 5.8H6.5z" />
      <path d="M6.5 9.8h5a3.2 3.2 0 0 1 0 6.4h-5z" />
    </svg>
  );
}

function IconItalic() {
  return (
    <svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
      <path d="M9.5 4h5.5" />
      <path d="M5 16h5.5" />
      <path d="M12 4 8 16" />
    </svg>
  );
}

function IconUnderline() {
  return (
    <svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5.5 3.5v6a4.5 4.5 0 0 0 9 0v-6" />
      <path d="M4.5 16.5h11" />
    </svg>
  );
}

function IconLink() {
  return (
    <svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
      <path d="M8.7 12.3a3 3 0 0 1 0-4.6l2.1-2.1a3 3 0 1 1 4.6 4.2l-1.1 1.1" />
      <path d="M11.3 7.7a3 3 0 0 1 0 4.6l-2.1 2.1a3 3 0 1 1-4.6-4.2l1.1-1.1" />
    </svg>
  );
}

function IconAlign() {
  return (
    <svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 5h12" />
      <path d="M7 9.3h9" />
      <path d="M4 13.7h12" />
      <path d="M7 18h9" />
    </svg>
  );
}

function IconImage() {
  return (
    <svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3.3" y="4.3" width="13.4" height="11.4" rx="2" />
      <circle cx="7.5" cy="8.5" r="1.3" />
      <path d="M4.2 14.5 8.3 10.4l2.7 2.7 1.8-1.8 3 3" />
    </svg>
  );
}

const items: TravelingTooltipItem[] = [
  { id: "bold", label: "Bold", icon: <IconBold /> },
  { id: "italic", label: "Italic", icon: <IconItalic /> },
  { id: "underline", label: "Underline", icon: <IconUnderline /> },
  { id: "link", label: "Insert link", icon: <IconLink /> },
  { id: "align", label: "Align text", icon: <IconAlign /> },
  { id: "image", label: "Insert image", icon: <IconImage /> },
];

export interface DemoProps {
  openDelay?: number;
  closeDelay?: number;
  accentColor?: string;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ openDelay = 400, closeDelay = 300, accentColor = "#38BDF8" }: DemoProps) {
  return (
    <div className="flex w-full items-center justify-center p-8">
      <TravelingToolbarTooltip items={items} openDelay={openDelay} closeDelay={closeDelay} accentColor={accentColor} />
    </div>
  );
}

1e:T131e, 1f:Tf9cd,

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

const props = withDefaults(
  defineProps<{ openDelay?: number; closeDelay?: number; accentColor?: string }>(),
  { openDelay: 400, closeDelay: 300, accentColor: "#38BDF8" },
);

interface Item {
  id: string;
  label: string;
  mark: string;
}

const items: Item[] = [
  { id: "bold", label: "Bold", mark: "B" },
  { id: "italic", label: "Italic", mark: "I" },
  { id: "underline", label: "Underline", mark: "U" },
  { id: "link", label: "Insert link", mark: "Lk" },
  { id: "align", label: "Align text", mark: "Al" },
  { id: "image", label: "Insert image", mark: "Im" },
];

const GAP = 10;
const containerRef = ref<HTMLElement | null>(null);
const anchor = reactive({ left: 0, top: 0, ready: false });
const label = ref("");
const activeId = ref<string | null>(null);
const visible = ref(false);
let visibleNow = false;
let openTimer: ReturnType<typeof setTimeout> | undefined;
let closeTimer: ReturnType<typeof setTimeout> | undefined;

function measure(el: HTMLElement) {
  const container = containerRef.value;
  if (!container) return { left: 0, top: 0 };
  const c = container.getBoundingClientRect();
  const b = el.getBoundingClientRect();
  return { left: b.left - c.left + b.width / 2, top: b.top - c.top - GAP };
}

function activate(item: Item, event: FocusEvent | PointerEvent) {
  const el = event.currentTarget as HTMLElement;
  clearTimeout(closeTimer);
  const pos = measure(el);
  anchor.left = pos.left;
  anchor.top = pos.top;
  anchor.ready = true;
  label.value = item.label;
  activeId.value = item.id;
  if (visibleNow) return;
  clearTimeout(openTimer);
  openTimer = setTimeout(() => {
    visibleNow = true;
    visible.value = true;
  }, props.openDelay);
}

function deactivate() {
  clearTimeout(openTimer);
  closeTimer = setTimeout(() => {
    visibleNow = false;
    visible.value = false;
  }, props.closeDelay);
}

function activeStyle(item: Item) {
  if (activeId.value !== item.id || !visible.value) return {};
  return { backgroundColor: `${props.accentColor}26`, boxShadow: `inset 0 0 0 1px ${props.accentColor}66`, color: "#fff" };
}

onBeforeUnmount(() => {
  clearTimeout(openTimer);
  clearTimeout(closeTimer);
});
</script>

<template>
  <div ref="containerRef" class="ttt-wrap">
    <div class="ttt-toolbar">
      <button
        v-for="item in items"
        :key="item.id"
        type="button"
        class="ttt-btn"
        :aria-label="item.label"
        :style="activeStyle(item)"
        @pointerenter="activate(item, $event)"
        @pointerleave="deactivate"
        @focus="activate(item, $event)"
        @blur="deactivate"
      >
        <span aria-hidden="true">{{ item.mark }}</span>
      </button>
    </div>
    <div
      v-if="anchor.ready"
      class="ttt-tooltip"
      role="tooltip"
      aria-hidden="true"
      :style="{
        left: anchor.left + 'px',
        top: anchor.top + 'px',
        opacity: visible ? 1 : 0,
        borderColor: accentColor + '55',
        boxShadow: '0 10px 24px -8px ' + accentColor + '66',
      }"
    >
      {{ label }}
      <span class="ttt-arrow" :style="{ borderColor: accentColor + '55' }" />
    </div>
  </div>
</template>

<style scoped>
.ttt-wrap {
  position: relative;
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 0;
}
.ttt-toolbar {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid rgb(255 255 255 / 0.1);
  background: rgb(255 255 255 / 0.04);
  border-radius: 1rem;
  padding: 0.375rem;
}
.ttt-btn {
  position: relative;
  display: flex;
  height: 2.25rem;
  width: 2.25rem;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 0.5rem;
  background: transparent;
  color: rgb(255 255 255 / 0.65);
  font: 600 0.7rem/1 system-ui, sans-serif;
  cursor: pointer;
  outline: none;
  transition: color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}
.ttt-btn:hover {
  color: #fff;
}
.ttt-btn:focus-visible {
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.5);
}
.ttt-tooltip {
  position: absolute;
  z-index: 20;
  left: 0;
  top: 0;
  pointer-events: none;
  transform: translate(-50%, -100%);
  white-space: nowrap;
  border: 1px solid;
  border-radius: 0.375rem;
  background: #0f1216;
  color: #fff;
  font: 500 0.75rem/1.25 system-ui, sans-serif;
  padding: 0.375rem 0.625rem;
  transition: left 380ms cubic-bezier(0.22, 1.15, 0.36, 1), top 380ms cubic-bezier(0.22, 1.15, 0.36, 1), opacity 150ms ease-out;
}
.ttt-arrow {
  position: absolute;
  left: 50%;
  top: 100%;
  height: 0.5rem;
  width: 0.5rem;
  background: #0f1216;
  border-right: 1px solid;
  border-bottom: 1px solid;
  transform: translate(-50%, -50%) rotate(45deg);
}
@media (prefers-reduced-motion: reduce) {
  .ttt-tooltip {
    transition: opacity 150ms ease-out;
  }
}
</style>

Nearby