malice

import { cubicOut } from 'svelte/easing';

import { fade, slide, type TransitionConfig } from 'svelte/transition';

const entering = new Set<string>();

const leaving = new Set<string>();

let busyUntil = 0;

export function motionDuration(ms: number): number {

  return typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 0 : ms;

}

export function motionActive(): boolean {

  return performance.now() < busyUntil;

}

function noteBusy(ms: number): void {

  busyUntil = Math.max(busyUntil, performance.now() + ms + 60);

}

export function setRowMotion(enter: Iterable<string>, leave: Iterable<string>): void {

  entering.clear();

  leaving.clear();

  for (const key of enter) entering.add(key);

  for (const key of leave) leaving.add(key);

}

function rowKey(node: Element): string {

  const { item, row } = (node as HTMLElement).dataset;

  return item ?? row ?? '';

}

/** Sub-pixel sizes from many rows easing out together made the pinned bottom flip between roundings. */

function wholePixels(css: string): string {

  return css.replace(/(-?\d*\.?\d+)px/g, (_, n: string) => `${Math.round(Number(n))}px`);

}

function reveal(node: Element, ms: number, axis: 'x' | 'y' = 'y'): TransitionConfig {

  const duration = motionDuration(ms);

  if (duration === 0) return { duration: 0 };

  noteBusy(duration);

  const base = slide(node, { duration, easing: cubicOut, axis });

  return { duration, easing: cubicOut, css: (t, u) => `${wholePixels(base.css?.(t, u) ?? '')};opacity: ${t};` };

}

export function rowIn(node: Element): TransitionConfig {

  return entering.has(rowKey(node)) ? reveal(node, 200) : { duration: 0 };

}

export function rowOut(node: Element): TransitionConfig {

  return leaving.has(rowKey(node)) ? reveal(node, 160) : { duration: 0 };

}

export function expand(node: Element, params: { axis?: 'x' | 'y' } = {}): TransitionConfig {

  return reveal(node, 170, params.axis);

}

export function dissolve(node: Element): TransitionConfig {

  const duration = motionDuration(150);

  if (duration > 0) noteBusy(duration);

  return fade(node, { duration });

}

const settling = new WeakSet<HTMLElement>();

export function settleHeight(node: HTMLElement, from: number): void {

  const duration = motionDuration(180);

  const to = node.offsetHeight;

  if (duration === 0 || Math.abs(to - from) < 2 || settling.has(node) || node.getAnimations({ subtree: true }).length > 0) return;

  noteBusy(duration);

  settling.add(node);

  const start = performance.now();

  node.style.overflow = 'hidden';

  const step = (now: number) => {

    const t = Math.min(1, (now - start) / duration);

    if (t < 1) {

      node.style.height = `${Math.round(from + (to - from) * cubicOut(t))}px`;

      requestAnimationFrame(step);

    } else {

      node.style.height = '';

      node.style.overflow = '';

      settling.delete(node);

    }

  };

  node.style.height = `${Math.round(from)}px`;

  requestAnimationFrame(step);

}