Highlight Marker

---
/**
 * HighlightMarker — a highlighter sweeps across phrases, one after another,
 * when the text scrolls into view. Phrases are marked **like this** in the
 * prop and rendered as <mark> elements whose background-size grows from 0
 * to 100% on a per-phrase delay; box-decoration-break keeps the sweep on
 * wrapped lines. Composes Reveal; zero script of its own. The server HTML
 * is the plain sentence with the marks already in place.
 */
import type { HTMLAttributes, HTMLTag } from 'astro/types';
import Reveal from './Reveal.astro';

interface Props extends HTMLAttributes<'p'> {
  /** The sentence; wrap phrases to highlight in double asterisks. */
  text: string;
  /** Element to render. */
  as?: HTMLTag;
  /** Highlight colour; a translucent colour keeps the text legible. */
  color?: string;
  /** Sweep duration per phrase in ms. Unset: the preset's --ma-duration. */
  duration?: number;
  /** Delay in ms before the first sweep. */
  delay?: number;
  /** Play once and stay. */
  once?: boolean;
  /** Fraction visible to trigger. */
  threshold?: number;
}

const { text, as = 'p', color = 'color-mix(in oklch, currentColor 22%, transparent)', duration, delay, once, threshold, class: className, style, ...rest } = Astro.props;
const parts = text.split(/\*\*([^*]+)\*\*/);
let mark = 0;
const vars = [`--ma-marker-color:${color}`, duration !== undefined && `--ma-marker-dur:${duration}ms`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
---

<Reveal as={as} from="none" delay={delay} once={once} threshold={threshold} class={['ma-marker', className].filter(Boolean).join(' ')} style={vars} {...rest}>
  {parts.map((part, i) => (i % 2 ? <mark class="ma-marker__mark" style={`--ma-marker-i:${mark++}`}>{part}</mark> : part))}
</Reveal>

<style is:global>
  @layer components {
    :where(.ma-marker__mark) {
      color: inherit;
      background-color: transparent;
      background-image: linear-gradient(var(--ma-marker-color), var(--ma-marker-color));
      background-repeat: no-repeat;
      background-position: 0 0;
      background-size: 100% 100%;
      padding: 0.08em 0.18em;
      margin-inline: -0.18em;
      border-radius: 0.25em;
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
      /* each phrase waits for the one before it; the delay is the one Reveal writes on this root, so the sweep keeps
         step with the sentence's fade */
      transition: background-size var(--ma-marker-dur, var(--ma-duration)) var(--ma-ease-out) calc(var(--ma-r-delay, 0ms) + var(--ma-marker-i, 0) * var(--ma-marker-dur, var(--ma-duration)));
    }
    :where([data-ma-js] .ma-marker:not(.ma-in) .ma-marker__mark) {
      background-size: 0% 100%;
      transition: none;
    }
    @media (prefers-reduced-motion: reduce) {
      :where(.ma-marker__mark) {
        transition: none;
      }
    }
  }
</style>