<script setup lang="ts">
/** StatusDot — small live-status dot; pulses when live. Tone maps to status tokens. */
withDefaults(
  defineProps<{
    tone?: 'online' | 'offline' | 'warn' | 'info' | 'starting' | 'wiping' | 'neutral' | 'accent'
    size?: number
    pulse?: boolean
  }>(),
  { tone: 'online', size: 8, pulse: false },
)

const TONE: Record<string, string> = {
  online: 'var(--status-online)',
  offline: 'var(--status-offline)',
  warn: 'var(--status-warn)',
  info: 'var(--status-info)',
  starting: 'var(--status-starting)',
  wiping: 'var(--status-wiping)',
  neutral: 'var(--text-muted)',
  accent: 'var(--accent)',
}
</script>

<template>
  <span
    class="cc-dot"
    :class="pulse && 'cc-dot--pulse'"
    :style="{
      width: size + 'px',
      height: size + 'px',
      background: TONE[tone] || TONE.neutral,
      boxShadow: pulse ? '0 0 8px -1px ' + (TONE[tone] || TONE.neutral) : 'none',
    }"
  />
</template>

<style>
.cc-dot { display: inline-block; flex: none; border-radius: 50%; position: relative; }
.cc-dot--pulse::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit;
  animation: cc-dot-pulse 1.8s var(--ease-out) infinite;
}
@keyframes cc-dot-pulse {
  0% { transform: scale(1); opacity: 0.6; }
  70%, 100% { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .cc-dot--pulse::after { animation: none; } }
</style>
