Floating elements that know where they're at.

<script>
	import { watchBgCanvas } from '@mzebley/canvas-watch/svelte';

	let tint = $state(null);
</script>

<div
	class="card"
	use:watchBgCanvas={{ onChange: (detail) => (tint = detail.appliedClass) }}
>
	Currently over: {tint ?? 'nothing'}
</div>

<script>
	import { canvasWatch } from '@mzebley/canvas-watch/svelte';
	const hero = canvasWatch('#hero');
</script>

<header class:past-hero={hero.aboveViewport}>
	{hero.missing ? 'Hero not found' : hero.state}
</header>
<section id="hero">…</section>

import {
	Directive,
	ElementRef,
	EventEmitter,
	inject,
	NgZone,
	Output,
	type OnDestroy,
	type OnInit,
} from '@angular/core';
import {
	getSharedWatcher,
	scheduleRefresh,
	type CanvasChangeDetail,
} from '@mzebley/canvas-watch';

@Directive({
	selector: '[canvasWatch]',
	standalone: true,
})
export class CanvasWatchDirective implements OnInit, OnDestroy {
	@Output() canvasChange = new EventEmitter<CanvasChangeDetail>();

	private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);
	private readonly zone = inject(NgZone);
	private unwatch?: () => void;

	private readonly listener = (event: Event): void => {
		const detail = (event as CustomEvent<CanvasChangeDetail>).detail;
		// Re-enter the zone only when a change actually fires (rare), so change
		// detection runs for consumers without paying for it on every scroll.
		this.zone.run(() => this.canvasChange.emit(detail));
	};

	ngOnInit(): void {
		const node = this.host.nativeElement;
		// Register outside the zone: the shared watcher is created lazily on first
		// use, and its scroll listener + rAF loop must not be zone-patched —
		// otherwise every scroll event app-wide triggers change detection.
		this.zone.runOutsideAngular(() => {
			this.unwatch = getSharedWatcher().watch(node);
			// Pick up trigger zones already in the DOM (coalesced across mounts).
			scheduleRefresh();
			node.addEventListener('canvaschange', this.listener);
		});
	}

	ngOnDestroy(): void {
		this.host.nativeElement.removeEventListener('canvaschange', this.listener);
		this.unwatch?.();
	}
}

import { Component } from '@angular/core';
import type { CanvasChangeDetail } from '@mzebley/canvas-watch';
import { CanvasWatchDirective } from './canvas-watch.directive';

@Component({
	standalone: true,
	imports: [CanvasWatchDirective],
	template: `
		<section class="canvas-brand-emphasis-trigger">…</section>
		<div class="card" canvasWatch (canvasChange)="onTint($event)">…</div>
	`,
})
export class DemoComponent {
	onTint(detail: CanvasChangeDetail) {
		// detail.appliedClass / detail.previousClass
	}
}

<section class="canvas-brand-emphasis-trigger">…</section>

<div class="card watch-bg-canvas">…</div>

import { createCanvasWatcher } from '@mzebley/canvas-watch';

const watcher = createCanvasWatcher();

// Scan the DOM for .watch-bg-canvas elements and *-trigger zones.
watcher.refresh();

// …after adding or removing watched/trigger elements:
watcher.refresh();

// …on teardown:
watcher.destroy();

const stop = watcher.observeViewport('#hero', (detail) => {
	console.log(detail.state); // missing | above | within | below
});

// Later
stop();

<header class="site-header" data-canvas-watch-viewport="#hero"></header>
<section id="hero"></section>