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 ?? '';

}

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) => `${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 });

}

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

  const duration = motionDuration(180);

  const to = node.offsetHeight;

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

  noteBusy(duration);

  node.animate(

    [{ height: `${from}px`, overflow: 'hidden' }, { height: `${to}px`, overflow: 'hidden' }],

    { duration, easing: 'cubic-bezier(0.2, 0.8, 0.2, 1)' }

  );

}