"use client";

import { SendFlightButton } from "./index";

export interface DemoProps {
  label?: string;
  sentLabel?: string;
  accent?: string;
  sequenceMs?: number;
  autoReplay?: boolean;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ label = "Send message", sentLabel = "Sent", accent = "#38BDF8", sequenceMs = 4500, autoReplay = true }: DemoProps) {
  return (
    <div className="flex w-full flex-wrap items-center justify-center gap-4 p-8">
      <SendFlightButton label={label} sentLabel={sentLabel} accent={accent} sequenceMs={sequenceMs} autoReplay={autoReplay} />
      <SendFlightButton label="Deploy build" sentLabel="Deployed" accent="#9BE15D" sequenceMs={sequenceMs} autoReplay={false} />
    </div>
  );
}

1d:T2676, 1e:T23f35,

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

const props = withDefaults(
  defineProps<{
    label?: string;
    sentLabel?: string;
    accent?: string;
    sequenceMs?: number;
    autoReplay?: boolean;
  }>(),
  { label: "Send message", sentLabel: "Sent", accent: "#38BDF8", sequenceMs: 4500, autoReplay: true },
);

type Stage = "rest" | "away" | "sending" | "return" | "done" | "rewind";

const stage = ref<Stage>("rest");
const dots = ref(1);

const running = computed(() => stage.value !== "rest");
const total = computed(() => Math.max(1500, props.sequenceMs));
const awayMs = computed(() => `${total.value * 0.16}ms`);
const returnMs = computed(() => `${total.value * 0.2}ms`);
const announced = computed(() =>
  stage.value === "sending" || stage.value === "return" ? "Sending" : stage.value === "done" || stage.value === "rewind" ? props.sentLabel : "",
);

let timers: number[] = [];

function clearTimers() {
  for (const id of timers) window.clearTimeout(id);
  timers = [];
}

function at(fn: () => void, ms: number) {
  timers.push(window.setTimeout(fn, ms));
}

function startRun() {
  if (stage.value !== "rest") return;
  clearTimers();
  stage.value = "away";
  dots.value = 1;
  const t = total.value;
  at(() => (stage.value = "sending"), t * 0.16);
  const step = (t * 0.42) / 6;
  for (let i = 1; i <= 5; i++) at(() => (dots.value = (dots.value % 3) + 1), t * 0.16 + step * i);
  at(() => (stage.value = "return"), t * 0.58);
  at(() => (stage.value = "done"), t * 0.78);
  at(() => (stage.value = "rewind"), t + 1100);
  at(() => (stage.value = "rest"), t + 1700);
  if (props.autoReplay) at(startRun, t + 2400);
}

onMounted(() => {
  if (props.autoReplay) at(startRun, 700);
});

onBeforeUnmount(clearTimers);
</script>

<template>
  <button
    type="button"
    class="flight"
    :data-stage="stage"
    :data-dots="dots"
    :disabled="running"
    :aria-busy="running"
    :aria-label="props.label"
    :style="{ '--flight-accent': props.accent, '--away-ms': awayMs, '--return-ms': returnMs }"
    @click="startRun"
  >
    <span class="flight__capsule">
      <span class="flight__slot">
        <span class="flight__bob">
          <svg class="flight__plane" viewBox="0 0 128 128" aria-hidden="true" fill="none">
            <path d="M112 26 L20 62 L56 76 L64 106 L80 84 Z" stroke="#262B31" stroke-width="7" stroke-linejoin="round" stroke-linecap="round" />
            <path d="M112 26 L56 76" stroke="#262B31" stroke-width="7" stroke-linecap="round" />
          </svg>
        </span>
        <svg class="flight__check" viewBox="0 0 128 128" aria-hidden="true" fill="none">
          <path d="M30 70 L55 94 L100 42" stroke="var(--flight-accent)" stroke-width="9" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
      </span>
      <span class="flight__words">
        <span class="flight__sizer flight__word--rest">{{ props.label }}</span>
        <span class="flight__sizer flight__word--done">{{ props.sentLabel }}</span>
        <span class="flight__sizer">
          Sending
          <span class="flight__dotrow"><span class="flight__dot" /><span class="flight__dot" /><span class="flight__dot" /></span>
        </span>
        <span class="flight__word flight__word--rest">{{ props.label }}</span>
        <span class="flight__word flight__word--sending">
          Sending
          <span class="flight__dotrow"><span class="flight__dot" /><span class="flight__dot" /><span class="flight__dot" /></span>
        </span>
        <span class="flight__word flight__word--done">{{ props.sentLabel }}</span>
      </span>
      <span class="flight__live" role="status">{{ announced }}</span>
    </span>
  </button>
</template>

<style scoped>
.flight {
  position: relative;
  display: inline-flex;
  padding: 5px;
  border: 1px solid rgb(20 24 30 / 0.28);
  border-radius: 13px;
  background: linear-gradient(180deg, #f2f3f5 0%, #d5d9df 100%);
  box-shadow: 0 10px 22px -12px rgb(8 10 14 / 0.55), 0 2px 5px rgb(8 10 14 / 0.25);
  font: 700 14px/1 system-ui, sans-serif;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow 180ms ease;
}
.flight:hover:not(:disabled) {
  box-shadow: 0 14px 26px -12px rgb(8 10 14 / 0.65), 0 3px 7px rgb(8 10 14 / 0.3);
}
.flight:disabled {
  cursor: progress;
}
.flight:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--flight-accent), 0 10px 22px -12px rgb(8 10 14 / 0.55);
}
.flight__capsule {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 16px;
  border-radius: 9px;
  background: linear-gradient(180deg, #ffffff 0%, #e3e6ea 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.95), inset 0 -2px 4px rgb(15 18 22 / 0.1), 0 2px 5px rgb(15 18 22 / 0.2);
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.flight:hover:not(:disabled) .flight__capsule {
  transform: translateY(-1px);
}
.flight:active:not(:disabled) .flight__capsule {
  transform: translateY(0);
}
.flight__slot {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
}
.flight__bob {
  display: block;
  width: 100%;
  height: 100%;
}
.flight:not(:disabled):hover .flight__bob {
  animation: flight-bob 0.8s ease-in-out infinite alternate;
}
.flight:not(:disabled):active .flight__bob {
  animation: none;
  transform: translate(-2px, 2px);
}
@keyframes flight-bob {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-3px);
  }
}
.flight__plane {
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(-12deg);
  transition: opacity 300ms ease, transform 450ms cubic-bezier(0.22, 0.9, 0.34, 1);
}
[data-stage="away"] .flight__plane {
  animation: flight-away var(--away-ms) cubic-bezier(0.55, 0, 0.85, 0.36) forwards;
}
[data-stage="sending"] .flight__plane {
  opacity: 0;
  transform: translate(-58px, 2px) rotate(-48deg) scale(0.35);
}
[data-stage="return"] .flight__plane {
  animation: flight-return var(--return-ms) linear forwards;
}
[data-stage="done"] .flight__plane {
  opacity: 0;
  transform: translate(64px, -2px) rotate(12deg);
}
[data-stage="rewind"] .flight__plane {
  animation: flight-rewind 500ms ease forwards;
}
@keyframes flight-away {
  to {
    transform: translate(-58px, 2px) rotate(-48deg) scale(0.35);
    opacity: 0;
  }
}
@keyframes flight-return {
  0% {
    transform: translate(-58px, 2px) rotate(-30deg) scale(0.5);
    opacity: 0;
  }
  40% {
    transform: translate(-6px, -1px) rotate(-4deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(64px, -2px) rotate(12deg) scale(0.9);
    opacity: 0;
  }
}
@keyframes flight-rewind {
  from {
    transform: translate(64px, -2px) rotate(12deg);
    opacity: 0;
  }
  to {
    transform: rotate(-12deg);
    opacity: 1;
  }
}
.flight__check {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 250ms ease;
}
[data-stage="done"] .flight__check {
  animation: flight-check 450ms cubic-bezier(0.2, 0.9, 0.3, 1.25) forwards;
}
@keyframes flight-check {
  from {
    opacity: 0;
    transform: translateY(-14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.flight__words {
  display: inline-grid;
  align-items: center;
  justify-items: center;
}
.flight__sizer,
.flight__word {
  grid-area: 1 / 1;
}
.flight__sizer {
  visibility: hidden;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.flight__word {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
  color: #20252b;
  text-shadow: 0 1px 0 rgb(255 255 255 / 0.75);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 260ms ease, transform 260ms ease;
}
[data-stage="rest"] .flight__word--rest {
  opacity: 1;
  transform: none;
}
[data-stage="away"] .flight__word--sending,
[data-stage="sending"] .flight__word--sending,
[data-stage="return"] .flight__word--sending {
  opacity: 1;
  transform: none;
}
[data-stage="done"] .flight__word--done,
[data-stage="rewind"] .flight__word--done {
  opacity: 1;
  transform: none;
}
.flight__dotrow {
  display: flex;
  align-items: center;
  gap: 3px;
  padding-bottom: 1px;
}
.flight__dot {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--flight-accent);
  opacity: 0.22;
  transform: scale(0.7);
  transition: opacity 160ms ease, transform 160ms ease;
}
[data-dots="1"] .flight__dot:nth-child(1),
[data-dots="2"] .flight__dot:nth-child(-n + 2),
[data-dots="3"] .flight__dot {
  opacity: 0.95;
  transform: none;
}
.flight__live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .flight:not(:disabled):hover .flight__bob {
    animation: none;
  }
  [data-stage="away"] .flight__plane {
    animation: flight-away-fade 300ms ease forwards;
  }
  [data-stage="sending"] .flight__plane,
  [data-stage="done"] .flight__plane {
    opacity: 0;
    transform: none;
  }
  [data-stage="return"] .flight__plane {
    animation: flight-return-fade var(--return-ms) ease forwards;
  }
  [data-stage="rewind"] .flight__plane {
    animation: flight-rewind-fade 500ms ease forwards;
  }
  [data-stage="done"] .flight__check {
    animation: flight-check-fade 400ms ease forwards;
  }
  .flight__word {
    transform: none;
  }
  .flight__capsule {
    transition: none;
  }
}
@keyframes flight-away-fade {
  to {
    opacity: 0;
  }
}
@keyframes flight-return-fade {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes flight-rewind-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes flight-check-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
</style>

Nearby