"use client";

import * as React from "react";
import { FocusScrollList, type FocusScrollListItem } from "./index";

export interface DemoProps {
  itemCount?: number;
  showGradients?: boolean;
  enableArrowNavigation?: boolean;
  accentColor?: string;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ itemCount = 12, showGradients = true, enableArrowNavigation = true, accentColor = "#38BDF8" }: DemoProps) {
  const [current, setCurrent] = React.useState<FocusScrollListItem | null>(null);

  return (
    <div className="flex w-full flex-col items-center gap-3 p-6">
      <div className="flex w-full max-w-[420px] items-baseline justify-between px-1">
        <span className="text-sm font-medium text-white/80">Session queue</span>
        <span className="text-xs text-white/40">{current ? `Up next: ${current.title}` : "Hover a row to preview"}</span>
      </div>
      <FocusScrollList
        itemCount={itemCount}
        showGradients={showGradients}
        enableArrowNavigation={enableArrowNavigation}
        accentColor={accentColor}
        onSelectionChange={(_, item) => setCurrent(item)}
      />
    </div>
  );
}

1e:T217b, 1f:T1998f,

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

const props = withDefaults(
  defineProps<{
    itemCount?: number;
    showGradients?: boolean;
    enableArrowNavigation?: boolean;
    accentColor?: string;
  }>(),
  { itemCount: 12, showGradients: true, enableArrowNavigation: true, accentColor: "#38BDF8" },
);

const emit = defineEmits<{ selectionChange: [index: number, item: { title: string; subtitle: string; meta: string }] }>();

interface Item {
  title: string;
  subtitle: string;
  meta: string;
}

const POOL: Item[] = [
  { title: "Amber Static", subtitle: "Cove Lights", meta: "3:12" },
  { title: "Low Tide Radio", subtitle: "Nightshift", meta: "4:05" },
  { title: "Paper Skyline", subtitle: "Marrow", meta: "2:48" },
  { title: "Halflight", subtitle: "Given Ground", meta: "3:37" },
  { title: "Slow Static", subtitle: "Cove Lights", meta: "2:59" },
  { title: "Wire and Salt", subtitle: "Tanager", meta: "3:44" },
  { title: "Six Rooms", subtitle: "Marrow", meta: "4:21" },
  { title: "Undertow", subtitle: "Given Ground", meta: "3:08" },
  { title: "Coastal Drift", subtitle: "Nightshift", meta: "3:52" },
  { title: "Faint Signal", subtitle: "Tanager", meta: "2:36" },
  { title: "Winter Freight", subtitle: "Marrow", meta: "4:14" },
  { title: "Open Water", subtitle: "Cove Lights", meta: "3:29" },
  { title: "Northbound", subtitle: "Given Ground", meta: "3:16" },
  { title: "Glass Corridor", subtitle: "Tanager", meta: "4:02" },
  { title: "Quiet Static", subtitle: "Nightshift", meta: "2:51" },
  { title: "Second Wind", subtitle: "Marrow", meta: "3:33" },
  { title: "Loose Thread", subtitle: "Cove Lights", meta: "3:07" },
  { title: "Afterimage", subtitle: "Given Ground", meta: "4:18" },
  { title: "Blue Hour", subtitle: "Tanager", meta: "2:44" },
  { title: "Last Call", subtitle: "Nightshift", meta: "3:55" },
];

const rows = computed(() => POOL.slice(0, Math.max(1, Math.min(props.itemCount, POOL.length))));

const containerRef = ref<HTMLUListElement | null>(null);
const rowRefs = ref<(HTMLButtonElement | null)[]>([]);
const setRowRef = (el: Element | null, index: number) => {
  rowRefs.value[index] = el as HTMLButtonElement | null;
};

const selected = ref(0);
const confirmed = ref<number | null>(null);
const metrics = reactive<{ scale: number; opacity: number }[]>(rows.value.map(() => ({ scale: 1, opacity: 1 })));

let reducedMotion = false;
let rafId: number | null = null;
let confirmTimer: ReturnType<typeof setTimeout> | null = null;

function measure() {
  const container = containerRef.value;
  if (!container || reducedMotion) return;
  const box = container.getBoundingClientRect();
  const centerY = box.top + box.height / 2;
  rowRefs.value.forEach((row, i) => {
    if (!row) {
      metrics[i] = { scale: 1, opacity: 1 };
      return;
    }
    const rect = row.getBoundingClientRect();
    const distance = Math.abs(rect.top + rect.height / 2 - centerY);
    const normalized = Math.min(distance / (box.height / 2 + rect.height / 2), 1);
    metrics[i] = { scale: 1 - normalized * 0.22, opacity: 1 - normalized * 0.68 };
  });
}

function scheduleMeasure() {
  if (rafId !== null) return;
  rafId = requestAnimationFrame(() => {
    rafId = null;
    measure();
  });
}

function select(index: number) {
  selected.value = index;
  emit("selectionChange", index, rows.value[index]);
}

function confirm(index: number) {
  select(index);
  confirmed.value = index;
  if (confirmTimer) clearTimeout(confirmTimer);
  confirmTimer = setTimeout(() => {
    confirmed.value = null;
  }, 480);
}

function onKeydown(event: KeyboardEvent, index: number) {
  if (event.key === "Enter") {
    event.preventDefault();
    confirm(index);
    return;
  }
  if (!props.enableArrowNavigation) return;
  if (event.key === "ArrowDown") {
    event.preventDefault();
    rowRefs.value[Math.min(index + 1, rows.value.length - 1)]?.focus();
  } else if (event.key === "ArrowUp") {
    event.preventDefault();
    rowRefs.value[Math.max(index - 1, 0)]?.focus();
  }
}

onMounted(() => {
  reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  nextTick(measure);
  window.addEventListener("resize", scheduleMeasure);
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", scheduleMeasure);
  if (rafId !== null) cancelAnimationFrame(rafId);
  if (confirmTimer) clearTimeout(confirmTimer);
});
</script>

<template>
  <div class="fsl" :style="{ '--fsl-accent': accentColor }">
    <ul ref="containerRef" class="fsl__panel" aria-label="Session queue" @scroll="scheduleMeasure">
      <li v-for="(item, index) in rows" :key="item.title + index" class="fsl__item">
        <button
          type="button"
          :ref="(el) => setRowRef(el as Element | null, index)"
          class="fsl__row"
          :class="{ 'fsl__row--active': selected === index, 'fsl__row--confirmed': confirmed === index }"
          :style="{
            transform: `scale(${metrics[index]?.scale ?? 1})`,
            opacity: metrics[index]?.opacity ?? 1,
          }"
          :aria-current="selected === index"
          @mouseenter="select(index)"
          @focus="select(index)"
          @keydown="onKeydown($event, index)"
        >
          <span class="fsl__swatch" :class="{ 'fsl__swatch--active': selected === index }" aria-hidden="true" />
          <span class="fsl__text">
            <span class="fsl__title">{{ item.title }}</span>
            <span class="fsl__subtitle">{{ item.subtitle }}</span>
          </span>
          <span class="fsl__meta">{{ item.meta }}</span>
        </button>
      </li>
    </ul>
    <template v-if="showGradients">
      <div class="fsl__fade fsl__fade--top" aria-hidden="true" />
      <div class="fsl__fade fsl__fade--bottom" aria-hidden="true" />
    </template>
  </div>
</template>

<style scoped>
.fsl {
  position: relative;
  width: 100%;
  max-width: 420px;
}
.fsl__panel {
  position: relative;
  margin: 0;
  list-style: none;
  display: flex;
  height: 400px;
  flex-direction: column;
  gap: 0.375rem;
  overflow-y: auto;
  border-radius: 1rem;
  border: 1px solid rgb(255 255 255 / 0.1);
  background: #101317;
  padding: 0.625rem;
  scrollbar-width: thin;
}
.fsl__panel::-webkit-scrollbar {
  width: 6px;
}
.fsl__panel::-webkit-scrollbar-thumb {
  background: rgb(255 255 255 / 0.15);
  border-radius: 9999px;
}
.fsl__panel::-webkit-scrollbar-track {
  background: transparent;
}
.fsl__item {
  flex-shrink: 0;
}
.fsl__row {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid transparent;
  background: rgb(255 255 255 / 0.03);
  padding: 0.625rem 0.75rem;
  text-align: left;
  color: inherit;
  cursor: pointer;
  font: inherit;
  outline: none;
  transition: background-color 150ms ease, border-color 150ms ease, transform 160ms ease, opacity 160ms ease;
}
.fsl__row:hover {
  background: rgb(255 255 255 / 0.06);
}
.fsl__row:focus-visible {
  border-color: color-mix(in srgb, var(--fsl-accent) 60%, transparent);
}
.fsl__row--active {
  border-color: color-mix(in srgb, var(--fsl-accent) 40%, transparent);
  background: color-mix(in srgb, var(--fsl-accent) 12%, transparent);
}
.fsl__row--confirmed {
  box-shadow: 0 0 0 1px var(--fsl-accent);
}
.fsl__swatch {
  height: 2rem;
  width: 2rem;
  flex-shrink: 0;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, rgb(255 255 255 / 0.14), transparent);
}
.fsl__swatch--active {
  background: linear-gradient(135deg, var(--fsl-accent), transparent);
}
.fsl__text {
  min-width: 0;
  flex: 1;
}
.fsl__title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 500;
  color: #fff;
}
.fsl__subtitle {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  color: rgb(255 255 255 / 0.5);
}
.fsl__meta {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: rgb(255 255 255 / 0.4);
}
.fsl__fade {
  position: absolute;
  inset-inline: 0;
  height: 2.5rem;
  pointer-events: none;
}
.fsl__fade--top {
  top: 0;
  border-radius: 1rem 1rem 0 0;
  background: linear-gradient(to bottom, #101317 0%, transparent 100%);
}
.fsl__fade--bottom {
  bottom: 0;
  border-radius: 0 0 1rem 1rem;
  background: linear-gradient(to top, #101317 0%, transparent 100%);
}
@media (prefers-reduced-motion: reduce) {
  .fsl__row {
    transition: background-color 150ms ease, border-color 150ms ease;
  }
}
</style>

Nearby