"use client";

import { ScrollingContentStrip } from "./index";

export interface DemoProps {
  speed?: number;
  reverse?: boolean;
  pauseOnHover?: boolean;
  accent?: string;
  gap?: number;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ speed = 28, reverse = false, pauseOnHover = true, accent = "#38BDF8", gap = 16 }: DemoProps) {
  return (
    <div className="w-full px-4 py-6">
      <ScrollingContentStrip speed={speed} reverse={reverse} pauseOnHover={pauseOnHover} accent={accent} gap={gap} />
    </div>
  );
}

1d:T19fc, 1e:T13c9b,

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

const props = withDefaults(
  defineProps<{
    speed?: number;
    reverse?: boolean;
    pauseOnHover?: boolean;
    accent?: string;
    gap?: number;
  }>(),
  { speed: 28, reverse: false, pauseOnHover: true, accent: "#38BDF8", gap: 16 },
);

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

const cards: Card[] = [
  { id: "inventory", label: "Inventory sync", mark: "IN" },
  { id: "routing", label: "Order routing", mark: "OR" },
  { id: "pricing", label: "Live pricing", mark: "LP" },
  { id: "fraud", label: "Fraud checks", mark: "FC" },
  { id: "warehouse", label: "Warehouse feed", mark: "WF" },
  { id: "tax", label: "Tax rules", mark: "TX" },
  { id: "returns", label: "Returns desk", mark: "RD" },
  { id: "carrier", label: "Carrier rates", mark: "CR" },
];

const trackEl = ref<HTMLDivElement | null>(null);
const groupEl = ref<HTMLDivElement | null>(null);
const loopDistance = ref(0);
const offset = ref(0);

const isHovering = ref(false);
const isFocusWithin = ref(false);
const isDragging = ref(false);
const reducedMotion = ref(false);

interface DragState {
  id: number;
  startX: number;
  startOffset: number;
  dragging: boolean;
}

let rafId = 0;
let lastTime = 0;
let resizeObserver: ResizeObserver | null = null;
let mediaQuery: MediaQueryList | null = null;
let dragState: DragState | null = null;

const paused = computed(() => (props.pauseOnHover && isHovering.value) || isFocusWithin.value || isDragging.value);

function measure() {
  if (groupEl.value) loopDistance.value = groupEl.value.getBoundingClientRect().width + props.gap;
}

function tick(time: number) {
  if (lastTime === 0) lastTime = time;
  const delta = time - lastTime;
  lastTime = time;
  if (!reducedMotion.value && !paused.value && loopDistance.value > 0) {
    const pxPerMs = loopDistance.value / (props.speed * 1000);
    const direction = props.reverse ? -1 : 1;
    let next = offset.value + direction * pxPerMs * delta;
    next = ((next % loopDistance.value) + loopDistance.value) % loopDistance.value;
    offset.value = next;
    if (trackEl.value) trackEl.value.style.transform = `translate3d(${-next}px,0,0)`;
  }
  rafId = requestAnimationFrame(tick);
}

function onPointerDown(event: PointerEvent) {
  if (event.pointerType === "mouse" && event.button !== 0) return;
  dragState = { id: event.pointerId, startX: event.clientX, startOffset: offset.value, dragging: false };
}

function onPointerMove(event: PointerEvent) {
  if (!dragState || dragState.id !== event.pointerId) return;
  const delta = event.clientX - dragState.startX;
  if (!dragState.dragging) {
    if (Math.abs(delta) < 6) return;
    dragState.dragging = true;
    isDragging.value = true;
    (event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);
  }
  const distance = loopDistance.value || 1;
  let next = dragState.startOffset - delta;
  next = ((next % distance) + distance) % distance;
  offset.value = next;
  if (trackEl.value) trackEl.value.style.transform = `translate3d(${-next}px,0,0)`;
}

function endDrag(event: PointerEvent) {
  if (dragState?.dragging) {
    try {
      (event.currentTarget as HTMLElement).releasePointerCapture(event.pointerId);
    } catch {
      // pointer already released
    }
  }
  dragState = null;
  isDragging.value = false;
}

function onFocusIn() {
  isFocusWithin.value = true;
}

function onFocusOut(event: FocusEvent) {
  const container = event.currentTarget as HTMLElement;
  if (!container.contains(event.relatedTarget as Node)) isFocusWithin.value = false;
}

onMounted(() => {
  measure();
  if (groupEl.value) {
    resizeObserver = new ResizeObserver(measure);
    resizeObserver.observe(groupEl.value);
  }
  mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
  reducedMotion.value = mediaQuery.matches;
  mediaQuery.addEventListener("change", (event) => {
    reducedMotion.value = event.matches;
  });
  rafId = requestAnimationFrame(tick);
});

onBeforeUnmount(() => {
  cancelAnimationFrame(rafId);
  resizeObserver?.disconnect();
});
</script>

<template>
  <div
    class="strip"
    @pointerenter="isHovering = true"
    @pointerleave="isHovering = false"
    @focusin="onFocusIn"
    @focusout="onFocusOut"
    @pointerdown="onPointerDown"
    @pointermove="onPointerMove"
    @pointerup="endDrag"
    @pointercancel="endDrag"
  >
    <div ref="trackEl" class="track" :style="{ gap: gap + 'px' }">
      <div ref="groupEl" class="group" :style="{ gap: gap + 'px' }">
        <button v-for="card in cards" :key="card.id" type="button" class="card" :style="{ '--strip-accent': accent }">
          <span class="mark" aria-hidden="true">{{ card.mark }}</span>
          {{ card.label }}
        </button>
      </div>
      <div class="group" aria-hidden="true" :style="{ gap: gap + 'px' }">
        <div v-for="card in cards" :key="`dup-${card.id}`" class="card" :style="{ '--strip-accent': accent }">
          <span class="mark" aria-hidden="true">{{ card.mark }}</span>
          {{ card.label }}
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.strip {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 1rem;
  background: color-mix(in srgb, currentColor 5%, transparent);
  padding: 1.25rem 0;
  touch-action: pan-y;
  color: inherit;
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.track {
  display: flex;
  width: max-content;
  align-items: center;
  will-change: transform;
}
.group {
  display: flex;
  align-items: center;
}
.card {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  border-radius: 0.75rem;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  background: color-mix(in srgb, currentColor 5%, transparent);
  padding: 0.625rem 0.875rem;
  color: inherit;
  font: 500 0.875rem/1.2 system-ui, sans-serif;
}
button.card {
  cursor: pointer;
  outline: none;
}
button.card:hover {
  background: color-mix(in srgb, currentColor 10%, transparent);
}
button.card:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--strip-accent, #38bdf8) 60%, transparent);
}
.mark {
  display: flex;
  height: 1.5rem;
  width: 1.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  border: 1px solid var(--strip-accent, #38bdf8);
  color: var(--strip-accent, #38bdf8);
  font-size: 0.625rem;
  font-weight: 600;
}
</style>

Nearby