Shimmer.

---
/**
 * Shimmer: a label with a light sweep, to show the agent is working.
 *
 * Ported from Beautiful UI `components/atoms/Shimmer.tsx`
 * (MIT, © 2026 Shane Levine). Inherits font size and weight. The text stays
 * real text; put it in an `aria-live` region when it appears dynamically.
 * Under reduced motion it renders as plain secondary ink.
 *
 * @example
 * <Shimmer>Drafting the weekly report…</Shimmer>
 */
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"span">;

const { class: className, ...rest } = Astro.props;
---

<span class:list={["vs-shimmer", className]} {...rest}><slot /></span>

<style>
  .vs-shimmer {
    display: inline-block;
    background-image: linear-gradient(90deg, var(--vs-ink-3) 35%, var(--vs-ink) 50%, var(--vs-ink-3) 65%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: vs-shimmer-text 1.8s linear infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    .vs-shimmer {
      animation: none;
      background: none;
      color: var(--vs-ink-2);
    }
  }
  @media (forced-colors: active) {
    .vs-shimmer {
      background: none;
      color: CanvasText;
    }
  }
</style>