"use client";

import { StarCountButton } from "./index";

export interface DemoProps {
  accentColor?: string;
  count?: number;
  rollDuration?: number;
  skin?: "solid" | "outline" | "ghost";
  burst?: boolean;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ accentColor = "#F5C542", count = 4820, rollDuration = 900, skin = "outline", burst = true }: DemoProps) {
  return (
    <div className="flex flex-col items-center gap-5 p-8 text-current">
      <div className="flex flex-wrap items-center justify-center gap-4">
        <StarCountButton accentColor={accentColor} count={count} rollDuration={rollDuration} skin={skin} burst={burst} />
        <StarCountButton accentColor={accentColor} count={312} rollDuration={rollDuration} skin="solid" burst={burst} />
      </div>
      <p className="text-xs text-current/45">atlas-kit / fieldbook-cli</p>
    </div>
  );
}

1d:T1fc4, 1e:T1b6f6,

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

const props = withDefaults(
  defineProps<{
    accentColor?: string;
    count?: number;
    rollDuration?: number;
    skin?: "solid" | "outline" | "ghost";
    burst?: boolean;
  }>(),
  { accentColor: "#F5C542", count: 4820, rollDuration: 900, skin: "outline", burst: true },
);

const DIGIT_HEIGHT = 16;
const STRIP_CYCLES = 24;
const STRIP_BASE = 120;
const STAR_PATH = "M12 3 L14.12 9.09 20.56 9.22 15.42 13.11 17.29 19.28 12 15.6 6.71 19.28 8.58 13.11 3.44 9.22 9.88 9.09 Z";
const BURST_ANGLES = [-150, -125, -100, -80, -60, -35, -10];
const strip = Array.from({ length: STRIP_CYCLES * 10 }, (_, i) => i % 10);

interface Particle {
  id: number;
  dx: number;
  dy: number;
}

function digitsOf(value: number, length: number): number[] {
  return String(Math.max(0, Math.round(value)))
    .padStart(length, "0")
    .split("")
    .map(Number);
}

function inkFor(hex: string): string {
  const clean = hex.replace("#", "");
  const r = parseInt(clean.slice(0, 2), 16) || 0;
  const g = parseInt(clean.slice(2, 4), 16) || 0;
  const b = parseInt(clean.slice(4, 6), 16) || 0;
  const luma = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
  return luma > 0.6 ? "#171207" : "#FFFBF0";
}

const starred = ref(false);
const reduced = ref(false);
const digitLen = ref(String(props.count).length);
const cursors = ref<number[]>(Array(digitLen.value).fill(STRIP_BASE));
const particles = ref<Particle[]>([]);
const announcement = ref("");
const total = ref(0);
let nextParticleId = 0;
let mql: MediaQueryList | null = null;

const seconds = computed(() => (reduced.value ? 0.001 : props.rollDuration / 1000));
const ink = computed(() => (props.skin === "solid" ? inkFor(props.accentColor) : undefined));
const label = computed(() => `${total.value || props.count} stars, ${starred.value ? "starred" : "not starred"}`);

function reveal() {
  const len = String(props.count).length;
  digitLen.value = len;
  cursors.value = digitsOf(props.count, len).map((d) => STRIP_BASE + d);
  total.value = props.count;
}

function spawnBurst() {
  BURST_ANGLES.forEach((angle, i) => {
    const rad = (angle * Math.PI) / 180;
    const dist = 16 + (i % 3) * 5;
    const id = nextParticleId++;
    particles.value = [...particles.value, { id, dx: Math.cos(rad) * dist, dy: Math.sin(rad) * dist }];
    window.setTimeout(
      () => {
        particles.value = particles.value.filter((p) => p.id !== id);
      },
      500 + (i % 3) * 20,
    );
  });
}

function toggle() {
  const next = !starred.value;
  starred.value = next;
  const nextTotal = props.count + (next ? 1 : 0);
  const dir = nextTotal >= total.value ? 1 : -1;
  const len = Math.max(digitLen.value, String(nextTotal).length);
  const prevDigits = digitsOf(total.value, len);
  const nextDigits = digitsOf(nextTotal, len);
  const padded = cursors.value.length < len ? [...Array(len - cursors.value.length).fill(STRIP_BASE), ...cursors.value] : cursors.value;
  digitLen.value = len;
  cursors.value = nextDigits.map((d, i) => (d === prevDigits[i] ? padded[i] : padded[i] + dir));
  total.value = nextTotal;
  announcement.value = `${next ? "Starred" : "Unstarred"}, ${nextTotal.toLocaleString()} stars`;
  if (props.burst && next && !reduced.value) spawnBurst();
}

let io: IntersectionObserver | null = null;
const root = ref<HTMLButtonElement | null>(null);

onMounted(() => {
  mql = window.matchMedia("(prefers-reduced-motion: reduce)");
  reduced.value = mql.matches;
  mql.addEventListener("change", () => {
    reduced.value = mql!.matches;
  });
  if (root.value && typeof IntersectionObserver !== "undefined") {
    io = new IntersectionObserver(
      (entries) => {
        if (entries[0]?.isIntersecting) {
          reveal();
          io?.disconnect();
        }
      },
      { threshold: 0.4 },
    );
    io.observe(root.value);
  } else {
    reveal();
  }
});

onUnmounted(() => {
  io?.disconnect();
});
</script>

<template>
  <button
    ref="root"
    type="button"
    role="switch"
    :aria-checked="starred"
    :aria-label="label"
    class="scb"
    :class="[`scb--${skin}`, { 'scb--pressed': false }]"
    :style="{
      backgroundColor: skin === 'solid' ? accentColor : undefined,
      color: ink,
      '--scb-ring': accentColor,
    }"
    @click="toggle"
  >
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="scb__glyph" aria-hidden="true">
      <rect x="4" y="3" width="13" height="18" rx="2" />
      <path d="M8 3v18" />
      <path d="M8 8h5" />
    </svg>

    <span class="scb__digits" aria-hidden="true">
      <span v-for="(c, i) in cursors" :key="i" class="scb__col">
        <span class="scb__strip" :style="{ transform: `translateY(${-c * DIGIT_HEIGHT}px)`, transitionDuration: `${seconds}s` }">
          <span v-for="(d, di) in strip" :key="di" class="scb__digit">{{ d }}</span>
        </span>
      </span>
    </span>

    <span class="scb__star">
      <svg width="18" height="18" viewBox="0 0 24 24" class="scb__star-svg">
        <path :d="STAR_PATH" :fill="starred ? accentColor : 'none'" :stroke="accentColor" stroke-width="1.75" stroke-linejoin="round" />
      </svg>
      <svg
        v-for="p in particles"
        :key="p.id"
        width="6"
        height="6"
        viewBox="0 0 24 24"
        class="scb__particle"
        :style="{ '--dx': p.dx + 'px', '--dy': p.dy + 'px' }"
      >
        <path :d="STAR_PATH" :fill="accentColor" />
      </svg>
    </span>

    <span class="scb__sr" role="status" aria-live="polite">{{ announcement }}</span>
  </button>
</template>

<style scoped>
.scb {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.25rem;
  padding: 0 0.75rem;
  border-radius: 6px;
  font: 500 14px/1 system-ui, sans-serif;
  color: currentColor;
  cursor: pointer;
  user-select: none;
  outline: none;
  transition:
    transform 150ms ease,
    border-color 150ms ease,
    background-color 150ms ease;
}
.scb:hover {
  transform: translateY(-1px);
}
.scb:active {
  transform: scale(0.97);
}
.scb:focus-visible {
  box-shadow: 0 0 0 2px var(--scb-ring, #f5c542);
}
.scb--outline {
  border: 1px solid rgb(from currentColor r g b / 0.2);
  background: rgb(from currentColor r g b / 0.04);
}
.scb--ghost {
  border: 1px solid transparent;
  background: transparent;
}
.scb--ghost:hover {
  background: rgb(from currentColor r g b / 0.06);
}
.scb--solid {
  border: 1px solid rgb(0 0 0 / 0.1);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35);
}
.scb__glyph {
  flex-shrink: 0;
  opacity: 0.8;
}
.scb__digits {
  display: flex;
  align-items: center;
}
.scb__col {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 16px;
  width: 0.62em;
  vertical-align: middle;
}
.scb__strip {
  position: absolute;
  inset-inline: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.scb__digit {
  height: 16px;
  line-height: 16px;
}
.scb__star {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  width: 18px;
  flex-shrink: 0;
}
.scb__star-svg {
  position: relative;
  z-index: 1;
}
.scb__star-svg path {
  transition: fill 220ms ease;
}
.scb__particle {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -3px;
  pointer-events: none;
  animation: scb-burst 500ms ease-out forwards;
}
@keyframes scb-burst {
  from {
    transform: translate(0, 0) scale(0.9);
    opacity: 1;
  }
  to {
    transform: translate(var(--dx), var(--dy)) scale(0.4);
    opacity: 0;
  }
}
.scb__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (prefers-reduced-motion: reduce) {
  .scb__particle {
    animation-duration: 1ms;
  }
}
</style>

Nearby