@blotch/angular-lynx 22.2.9 → 22.2.11

package/fesm2022/blotch-angular-lynx.mjs

@@ -1571,99 +1571,323 @@ const takePageHandOver = () => {
 	handingOverPage = false;
 	return handing;
 };
-let firstRenderPending = true;
-const deferredCallbacks = [];
-const isFirstRenderPending = () => firstRenderPending;
-const markFirstRenderComplete = () => {
-	firstRenderPending = false;
-	if (deferredCallbacks.length === 0) return;
-	const callbacks = deferredCallbacks.splice(0);
-	setTimeout(() => {
-		for (const callback of callbacks) callback();
-	}, 0);
+var LynxEvent = class {
+	static NONE = 0;
+	static CAPTURING_PHASE = 1;
+	static AT_TARGET = 2;
+	static BUBBLING_PHASE = 3;
+	type;
+	bubbles;
+	cancelable;
+	composed;
+	timeStamp = Date.now();
+	isTrusted = false;
+	target = null;
+	currentTarget = null;
+	eventPhase = 0;
+	defaultPrevented = false;
+	cancelBubble = false;
+	constructor(type, init = {}) {
+		this.type = String(type);
+		this.bubbles = !!init.bubbles;
+		this.cancelable = !!init.cancelable;
+		this.composed = !!init.composed;
+	}
+	get srcElement() {
+		return this.target;
+	}
+	preventDefault() {
+		if (this.cancelable) this.defaultPrevented = true;
+	}
+	stopPropagation() {
+		this.cancelBubble = true;
+	}
+	stopImmediatePropagation() {
+		this.cancelBubble = true;
+	}
+	composedPath() {
+		return this.currentTarget ? [this.currentTarget] : [];
+	}
 };
-const runAfterFirstRender = (callback) => {
-	if (!firstRenderPending) {
-		callback();
-		return;
+var LynxCustomEvent = class extends LynxEvent {
+	detail;
+	constructor(type, init = {}) {
+		super(type, init);
+		this.detail = init.detail ?? null;
 	}
-	deferredCallbacks.push(callback);
 };
-let insideChangeDetection = false;
-const setInsideChangeDetection = (value) => {
-	insideChangeDetection = value;
+const installEventClasses = (target) => {
+	if (typeof target["Event"] === "undefined") target["Event"] = LynxEvent;
+	if (typeof target["CustomEvent"] === "undefined") target["CustomEvent"] = LynxCustomEvent;
 };
-const isInsideChangeDetection = () => insideChangeDetection;
-const DASHARRAY_ATTRIBUTE = /(\s)stroke-dasharray\s*=\s*(?:"([^"]*)"|'([^']*)')/g;
-const DASHARRAY_DECLARATION = /(^|[;"'\s])stroke-dasharray\s*:\s*([^;"']*);?/g;
-const DASH_LENGTH = /^[+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?(?:px)?$/i;
-const normalizeDashArray = (value) => {
-	const tokens = value.trim().split(/[\s,]+/).filter((token) => token.length > 0);
-	if (tokens.length === 0 || !tokens.every((t) => DASH_LENGTH.test(t))) return null;
-	return tokens.map((token) => token.replace(/px$/i, "")).join(" ");
+const createEvent = (type) => {
+	return new (globalThis.Event ?? LynxEvent)(type);
 };
-const sanitizeSvgContent = (content) => {
-	if (!content.includes("stroke-dasharray")) return content;
-	return content.replace(DASHARRAY_ATTRIBUTE, (_match, space, double, single) => {
-		const normalized = normalizeDashArray(double ?? single);
-		return normalized === null ? "" : `${space}stroke-dasharray="${normalized}"`;
-	}).replace(DASHARRAY_DECLARATION, (_match, before, value) => {
-		const normalized = normalizeDashArray(value);
-		return normalized === null ? before : `${before}stroke-dasharray:${normalized};`;
+const captureOf = (options) => typeof options === "boolean" ? options : !!options?.capture;
+const setEventProperty = (event, name, value) => {
+	Object.defineProperty(event, name, {
+		value,
+		writable: true,
+		configurable: true,
+		enumerable: true
 	});
 };
-const toDOMRect = (rect) => {
-	const { left = 0, top = 0, width = 0, height = 0 } = rect ?? {};
-	const box = {
-		x: left,
-		y: top,
-		width,
-		height,
-		top,
-		left,
-		right: left + width,
-		bottom: top + height
-	};
-	return {
-		...box,
-		toJSON: () => ({ ...box })
-	};
+const withProperties = (event, values, run) => {
+	const saved = Object.keys(values).map((name) => [name, Object.getOwnPropertyDescriptor(event, name)]);
+	for (const [name, value] of Object.entries(values)) setEventProperty(event, name, value);
+	try {
+		run();
+	} finally {
+		for (const [name, descriptor] of saved) if (descriptor) Object.defineProperty(event, name, descriptor);
+		else delete event[name];
+	}
 };
-var LayoutTracker = class {
-	#host;
-	#observers = /* @__PURE__ */ new Set();
-	#listening = false;
-	rect = null;
-	constructor(host) {
-		this.#host = host;
+var GlobalEventTarget = class {
+	#entries = /* @__PURE__ */ new Map();
+	#owner;
+	#onTypesChange = () => {};
+	constructor(owner) {
+		this.#owner = owner ?? this;
+	}
+	set onTypesChange(callback) {
+		this.#onTypesChange = callback;
+	}
+	addEventListener(type, callback, options) {
+		if (!callback) return;
+		const capture = captureOf(options);
+		const signal = typeof options === "object" ? options.signal : void 0;
+		if (signal?.aborted) return;
+		const list = this.#entries.get(type) ?? [];
+		if (list.some((e) => e.callback === callback && e.capture === capture)) return;
+		const entry = {
+			callback,
+			capture,
+			once: typeof options === "object" && !!options.once,
+			unlinkSignal: null
+		};
+		if (signal) {
+			const abort = () => this.#remove(type, entry);
+			signal.addEventListener("abort", abort);
+			entry.unlinkSignal = () => signal.removeEventListener?.("abort", abort);
+		}
+		list.push(entry);
+		this.#entries.set(type, list);
+		if (list.length === 1) this.#onTypesChange();
 	}
-	start() {
-		if (this.#listening) return;
-		this.#listening = true;
-		this.#host.listen("bindlayoutchange", (event) => {
-			const detail = event?.detail;
-			if (detail && typeof detail.width === "number") this.#update(detail);
+	removeEventListener(type, callback, options) {
+		const capture = captureOf(options);
+		const entry = this.#entries.get(type)?.find((e) => e.callback === callback && e.capture === capture);
+		if (entry) this.#remove(type, entry);
+	}
+	dispatchEvent(event) {
+		return dispatchThrough(event, this.#owner, [this]);
+	}
+	get types() {
+		return [...this.#entries.keys()];
+	}
+	hasListeners(type) {
+		return this.#entries.has(type);
+	}
+	get owner() {
+		return this.#owner;
+	}
+	invoke(type, event, phase, state) {
+		const list = this.#entries.get(type);
+		if (!list) return;
+		const ordered = phase === 2 ? [...list.filter((e) => e.capture), ...list.filter((e) => !e.capture)] : list.filter((e) => e.capture === (phase === 1));
+		withProperties(event, {
+			currentTarget: this.#owner,
+			eventPhase: phase
+		}, () => this.#run(type, ordered, event, state));
+	}
+	#run(type, entries, event, state) {
+		for (const entry of entries) {
+			if (!this.#entries.get(type)?.includes(entry)) continue;
+			if (entry.once) this.#remove(type, entry);
+			try {
+				if (typeof entry.callback === "function") entry.callback.call(this.#owner, event);
+				else entry.callback.handleEvent(event);
+			} catch (error) {
+				queueMicrotask(() => {
+					throw error;
+				});
+			}
+			if (state.stoppedImmediately) break;
+		}
+	}
+	#remove(type, entry) {
+		const list = this.#entries.get(type);
+		const index = list?.indexOf(entry) ?? -1;
+		if (!list || index < 0) return;
+		list.splice(index, 1);
+		entry.unlinkSignal?.();
+		if (list.length > 0) return;
+		this.#entries.delete(type);
+		this.#onTypesChange();
+	}
+};
+var PathDispatch = class {
+	#event;
+	#target;
+	#path;
+	#type;
+	#state;
+	constructor(event, target, path, type = event.type) {
+		this.#event = event;
+		this.#target = target;
+		this.#path = path;
+		this.#type = type;
+		if (event.target == null) setEventProperty(event, "target", target);
+		this.#state = {
+			stopped: false,
+			stoppedImmediately: false
+		};
+	}
+	#tracking(run) {
+		const event = this.#event;
+		const state = this.#state;
+		const stop = event.stopPropagation;
+		const stopImmediately = event.stopImmediatePropagation;
+		withProperties(event, {
+			stopPropagation: () => {
+				state.stopped = true;
+				stop.call(event);
+			},
+			stopImmediatePropagation: () => {
+				state.stopped = true;
+				state.stoppedImmediately = true;
+				stopImmediately.call(event);
+			}
+		}, run);
+	}
+	#phaseOf(index, outerPhase) {
+		return this.#path[index].owner === this.#target ? 2 : outerPhase;
+	}
+	capture() {
+		this.#tracking(() => {
+			for (let i = this.#path.length - 1; i >= 0; i--) {
+				if (this.#state.stopped) return;
+				const phase = this.#phaseOf(i, 1);
+				if (phase === 2) continue;
+				this.#path[i].invoke(this.#type, this.#event, phase, this.#state);
+			}
 		});
-		this.#host.measure((rect) => {
-			if (rect && !this.rect) this.#update(rect);
+	}
+	bubble() {
+		const bubbles = this.#event.bubbles !== false;
+		this.#tracking(() => {
+			for (let i = 0; i < this.#path.length; i++) {
+				if (this.#state.stopped) return;
+				const phase = this.#phaseOf(i, 3);
+				if (phase === 2 || bubbles) this.#path[i].invoke(this.#type, this.#event, phase, this.#state);
+			}
 		});
+		return !this.#event.defaultPrevented;
 	}
-	observe(observer) {
-		this.start();
-		this.#observers.add(observer);
-		return () => this.#observers.delete(observer);
+};
+const dispatchThrough = (event, target, path) => {
+	const dispatch = new PathDispatch(event, target, path);
+	dispatch.capture();
+	return dispatch.bubble();
+};
+var LynxGlobalDocument = class extends GlobalEventTarget {
+	#events;
+	constructor(events) {
+		super();
+		this.#events = events;
 	}
-	#update(detail) {
-		const rect = {
-			left: detail.left,
-			top: detail.top,
-			width: detail.width,
-			height: detail.height
+	get defaultView() {
+		return this.#events.window.owner;
+	}
+	get body() {
+		return this.#events.page;
+	}
+	getElementById(_id) {
+		return null;
+	}
+	querySelector(_selector) {
+		return null;
+	}
+	querySelectorAll(_selector) {
+		return [];
+	}
+	dispatchEvent(event) {
+		return dispatchThrough(event, this, [this, this.#events.window]);
+	}
+};
+const screenViewport = () => {
+	const info = globalThis.lynx?.SystemInfo ?? globalThis.SystemInfo;
+	const ratio = info?.pixelRatio ?? 1;
+	return {
+		width: (info?.pixelWidth ?? 0) / ratio,
+		height: (info?.pixelHeight ?? 0) / ratio
+	};
+};
+var GlobalEvents = class {
+	window;
+	document;
+	#source;
+	#page = null;
+	#lookup = () => void 0;
+	#size = null;
+	#pending = [];
+	constructor(windowObject, createSource) {
+		this.window = new GlobalEventTarget(windowObject);
+		this.document = new LynxGlobalDocument(this);
+		this.#source = createSource(this);
+		this.window.onTypesChange = () => this.#sync();
+		this.document.onTypesChange = () => this.#sync();
+	}
+	attach(page, lookup) {
+		this.#page = page;
+		this.#lookup = lookup;
+		this.#sync();
+	}
+	get page() {
+		return this.#page;
+	}
+	get viewport() {
+		return this.#source.viewport?.() ?? this.#size;
+	}
+	hasListeners(type) {
+		return this.document.hasListeners(type) || this.window.hasListeners(type);
+	}
+	targetFor(uniqueId) {
+		return (uniqueId === void 0 ? void 0 : this.#lookup(uniqueId)) ?? this.#page ?? this.document;
+	}
+	early(key, deliveries) {
+		const dispatches = deliveries.map(({ type, event, target }) => new PathDispatch(event, target, [this.document, this.window], type));
+		for (const dispatch of dispatches) dispatch.capture();
+		const pending = {
+			key,
+			dispatches
 		};
-		const old = this.rect;
-		this.rect = rect;
-		if (old && old.left === rect.left && old.top === rect.top && old.width === rect.width && old.height === rect.height) return;
-		for (const observer of Array.from(this.#observers)) observer(rect);
+		this.#pending.push(pending);
+		setTimeout(() => this.#finish(pending), 0);
+	}
+	late(key) {
+		const pending = this.#pending.find((p) => p.key === key);
+		if (pending) this.#finish(pending);
+	}
+	finishPending() {
+		for (const pending of this.#pending.slice()) this.#finish(pending);
+	}
+	resized(size) {
+		const before = this.#size ?? screenViewport();
+		this.#size = size;
+		if (before.width === size.width && before.height === size.height) return;
+		if (!this.window.hasListeners("resize")) return;
+		dispatchThrough(createEvent("resize"), this.window.owner, [this.window]);
+	}
+	#finish(pending) {
+		const index = this.#pending.indexOf(pending);
+		if (index < 0) return;
+		this.#pending.splice(index, 1);
+		for (const dispatch of pending.dispatches) dispatch.bubble();
+	}
+	#sync() {
+		const types = /* @__PURE__ */ new Set([...this.document.types, ...this.window.types]);
+		this.#source.sync(this.#page, types);
 	}
 };
 const POINTER_EVENT_NAMES = /* @__PURE__ */ new Set([
@@ -1678,6 +1902,8 @@ const POINTER_EVENT_NAMES = /* @__PURE__ */ new Set([
 	"gotpointercapture",
 	"lostpointercapture"
 ]);
+const MAX_TOUCH_NUMBER = 65535;
+const pointerIdOf = (touch) => touch.identifier >= 0 && touch.identifier <= MAX_TOUCH_NUMBER ? touch.identifier : 0;
 var LynxPointerEvent = class {
 	type;
 	pointerId;
@@ -1829,49 +2055,410 @@ var PointerEventSource = class {
 	}
 	#onStart(event) {
 		for (const touch of event.changedTouches ?? []) {
+			const id = pointerIdOf(touch);
 			const offset = this.#offset(event, touch);
-			this.#down.set(touch.identifier, offset);
-			this.#primary ??= touch.identifier;
+			this.#down.set(id, offset);
+			this.#primary ??= id;
 			this.lastOffset = offset;
-			this.#fire("pointerover", touch.identifier, touch, event, offset);
-			this.#fire("pointerenter", touch.identifier, touch, event, offset);
-			this.#fire("pointerdown", touch.identifier, touch, event, offset);
+			this.#fire("pointerover", id, touch, event, offset);
+			this.#fire("pointerenter", id, touch, event, offset);
+			this.#fire("pointerdown", id, touch, event, offset);
 		}
 	}
 	#onMove(event) {
 		for (const touch of event.changedTouches ?? []) {
-			if (!this.#down.has(touch.identifier)) continue;
+			const id = pointerIdOf(touch);
+			if (!this.#down.has(id)) continue;
 			const offset = this.#offset(event, touch);
-			this.#down.set(touch.identifier, offset);
+			this.#down.set(id, offset);
 			this.lastOffset = offset;
-			this.#fire("pointermove", touch.identifier, touch, event, offset);
+			this.#fire("pointermove", id, touch, event, offset);
 		}
 	}
 	#onEnd(event, canceled) {
 		for (const touch of event.changedTouches ?? []) {
-			if (!this.#down.has(touch.identifier)) continue;
-			const offset = canceled ? this.#down.get(touch.identifier) : this.#offset(event, touch);
+			const id = pointerIdOf(touch);
+			if (!this.#down.has(id)) continue;
+			const offset = canceled ? this.#down.get(id) : this.#offset(event, touch);
 			this.lastOffset = offset;
-			this.#fire(canceled ? "pointercancel" : "pointerup", touch.identifier, touch, event, offset);
-			if (this.#captured.delete(touch.identifier)) this.#fire("lostpointercapture", touch.identifier, touch, event, offset);
-			this.#fire("pointerout", touch.identifier, touch, event, offset);
-			this.#fire("pointerleave", touch.identifier, touch, event, offset);
-			this.#down.delete(touch.identifier);
-			if (this.#primary === touch.identifier) this.#primary = null;
+			this.#fire(canceled ? "pointercancel" : "pointerup", id, touch, event, offset);
+			if (this.#captured.delete(id)) this.#fire("lostpointercapture", id, touch, event, offset);
+			this.#fire("pointerout", id, touch, event, offset);
+			this.#fire("pointerleave", id, touch, event, offset);
+			this.#down.delete(id);
+			if (this.#primary === id) this.#primary = null;
 		}
 	}
 	#fire(type, pointerId, touch, event, offset) {
 		const listeners = this.#listeners.get(type);
 		if (!listeners) return;
 		const position = offset ?? this.#down.get(pointerId);
-		const pressed = type === "pointerdown" || type === "pointermove" || type === "pointerover" ? 1 : 0;
-		const pointerEvent = new LynxPointerEvent(type, pointerId, this.#primary === null || this.#primary === pointerId, touch?.clientX ?? touch?.pageX ?? 0, touch?.clientY ?? touch?.pageY ?? 0, touch?.pageX ?? 0, touch?.pageY ?? 0, position.offsetX, position.offsetY, type === "pointermove" ? -1 : 0, pressed, pressed ? .5 : 0, event?.timestamp ?? Date.now(), this.#host.eventTarget);
+		const pointerEvent = pointerEventFor(type, {
+			pointerId,
+			isPrimary: this.#primary === null || this.#primary === pointerId,
+			...position
+		}, touch, event?.timestamp, this.#host.eventTarget);
 		for (const listener of listeners.slice()) {
 			listener(pointerEvent);
 			if (pointerEvent.immediatePropagationStopped) break;
 		}
 	}
 };
+const pointerEventFor = (type, pointer, touch, timeStamp, target) => {
+	const pressed = type === "pointerdown" || type === "pointermove" || type === "pointerover" ? 1 : 0;
+	return new LynxPointerEvent(type, pointer.pointerId, pointer.isPrimary, touch?.clientX ?? touch?.pageX ?? 0, touch?.clientY ?? touch?.pageY ?? 0, touch?.pageX ?? 0, touch?.pageY ?? 0, pointer.offsetX, pointer.offsetY, type === "pointermove" ? -1 : 0, pressed, pressed ? .5 : 0, timeStamp ?? Date.now(), target);
+};
+const TOUCH_EVENTS = [
+	"touchstart",
+	"touchmove",
+	"touchend",
+	"touchcancel"
+];
+const POINTER_EVENTS = /* @__PURE__ */ new Set([
+	"pointerover",
+	"pointerdown",
+	"pointermove",
+	"pointerup",
+	"pointercancel",
+	"pointerout"
+]);
+const POINTERS_FOR = {
+	touchstart: ["pointerover", "pointerdown"],
+	touchmove: ["pointermove"],
+	touchend: ["pointerup", "pointerout"],
+	touchcancel: ["pointercancel", "pointerout"]
+};
+const sizeOf$1 = (event) => {
+	const size = Array.isArray(event.detail) ? event.detail[1] : void 0;
+	if (!Array.isArray(size) || size.length < 2) return null;
+	return {
+		width: Number(size[0]),
+		height: Number(size[1])
+	};
+};
+var NativeScreenSource = class {
+	#events;
+	#page = null;
+	#listening = /* @__PURE__ */ new Map();
+	#down = /* @__PURE__ */ new Set();
+	#primary = null;
+	constructor(events) {
+		this.#events = events;
+	}
+	sync(page, types) {
+		if (page !== this.#page) {
+			this.#stop([...this.#listening.keys()]);
+			this.#page = page;
+		}
+		if (!page) return;
+		const wanted = /* @__PURE__ */ new Set(["resize"]);
+		if ([...types].some((t) => POINTER_EVENTS.has(t) || TOUCH_EVENTS.includes(t))) for (const name of TOUCH_EVENTS) wanted.add(name);
+		if (types.has("click")) wanted.add("tap");
+		this.#stop([...this.#listening.keys()].filter((n) => !wanted.has(n)));
+		for (const name of wanted) if (!this.#listening.has(name)) this.#listening.set(name, this.#listen(page, name));
+	}
+	#listen(page, name) {
+		if (name === "resize") return page.addEventListener("bindresize", (event) => {
+			const size = sizeOf$1(event);
+			if (size) this.#events.resized(size);
+		});
+		const stopEarly = page.addEventListener(`global-bind${name}`, (event) => this.#begin(name, event));
+		const stopLate = page.addTrailingEventListener(`bind${name}`, () => this.#events.late(name));
+		return () => {
+			stopEarly();
+			stopLate();
+		};
+	}
+	#stop(names) {
+		for (const name of names) {
+			this.#listening.get(name)?.();
+			this.#listening.delete(name);
+			if (name === "touchstart") {
+				this.#down.clear();
+				this.#primary = null;
+			}
+		}
+	}
+	#begin(name, event) {
+		this.#events.finishPending();
+		const target = this.#events.targetFor(event.target?.uid);
+		const deliveries = name === "tap" ? [{
+			type: "click",
+			event,
+			target
+		}] : [...this.#pointers(name, event, target), {
+			type: name,
+			event,
+			target
+		}];
+		this.#events.early(name, deliveries.filter((d) => this.#events.hasListeners(d.type)));
+	}
+	#pointers(name, event, target) {
+		const deliveries = [];
+		for (const touch of event.changedTouches ?? []) {
+			const id = pointerIdOf(touch);
+			if (name === "touchstart") {
+				this.#down.add(id);
+				this.#primary ??= id;
+			} else if (!this.#down.has(id)) continue;
+			for (const type of POINTERS_FOR[name]) deliveries.push({
+				type,
+				event: this.#pointerEvent(type, touch, event, target),
+				target
+			});
+			if (name === "touchend" || name === "touchcancel") {
+				this.#down.delete(id);
+				if (this.#primary === id) this.#primary = null;
+			}
+		}
+		return deliveries;
+	}
+	#pointerEvent(type, touch, event, target) {
+		return pointerEventFor(type, {
+			pointerId: pointerIdOf(touch),
+			isPrimary: this.#primary === pointerIdOf(touch),
+			offsetX: touch.x ?? 0,
+			offsetY: touch.y ?? 0
+		}, touch, event.timestamp, target);
+	}
+};
+const KEY_EVENTS = /* @__PURE__ */ new Set([
+	"keydown",
+	"keyup",
+	"keypress"
+]);
+var WebScreenSource = class {
+	#events;
+	#page = null;
+	#listening = /* @__PURE__ */ new Map();
+	constructor(events) {
+		this.#events = events;
+	}
+	sync(page, types) {
+		if (page !== this.#page) {
+			this.#stop([...this.#listening.keys()]);
+			this.#page = page;
+		}
+		const scope = this.#scope();
+		if (!scope) return;
+		this.#stop([...this.#listening.keys()].filter((t) => !types.has(t)));
+		for (const type of types) {
+			if (this.#listening.has(type)) continue;
+			this.#listening.set(type, type === "resize" ? this.#observeSize(scope.box) : this.#listen(scope, type));
+		}
+	}
+	viewport() {
+		const rect = this.#scope()?.box.getBoundingClientRect();
+		return rect ? {
+			width: rect.width,
+			height: rect.height
+		} : null;
+	}
+	#scope() {
+		const inside = globalThis.frameElement ?? this.#page?.element;
+		if (!inside) return null;
+		const root = inside.getRootNode();
+		return {
+			root,
+			box: root.host ?? inside
+		};
+	}
+	#listen({ root, box }, type) {
+		const target = KEY_EVENTS.has(type) ? box.ownerDocument : root;
+		const begin = (event) => this.#events.early(event, [{
+			type,
+			event,
+			target: event.target
+		}]);
+		const end = (event) => this.#events.late(event);
+		target.addEventListener(type, begin, true);
+		target.addEventListener(type, end);
+		return () => {
+			target.removeEventListener(type, begin, true);
+			target.removeEventListener(type, end);
+		};
+	}
+	#observeSize(box) {
+		const view = box.ownerDocument.defaultView;
+		let last = null;
+		const observer = new view.ResizeObserver(() => {
+			const size = this.viewport();
+			if (last && last.width === size.width && last.height === size.height) return;
+			const first = last === null;
+			last = size;
+			if (!first) this.#events.resized(size);
+		});
+		observer.observe(box);
+		return () => observer.disconnect();
+	}
+	#stop(types) {
+		for (const type of types) {
+			this.#listening.get(type)();
+			this.#listening.delete(type);
+		}
+	}
+};
+const SCREEN_EVENTS = /* @__PURE__ */ new Set([
+	"pointerover",
+	"pointerdown",
+	"pointermove",
+	"pointerup",
+	"pointercancel",
+	"pointerout",
+	"touchstart",
+	"touchmove",
+	"touchend",
+	"touchcancel",
+	"mousedown",
+	"mousemove",
+	"mouseup",
+	"click",
+	"dblclick",
+	"contextmenu",
+	"wheel",
+	"keydown",
+	"keyup",
+	"keypress",
+	"resize"
+]);
+const INSTALLED = Symbol.for("@blotch/angular-lynx/global-window");
+const isBrowserWindow = (target) => typeof target["document"]?.nodeType === "number";
+const installGlobalWindow = (target, events) => {
+	if (target[INSTALLED]) return;
+	target[INSTALLED] = true;
+	installEventClasses(target);
+	const own = events.window;
+	const browser = isBrowserWindow(target);
+	const original = {
+		add: target["addEventListener"],
+		remove: target["removeEventListener"],
+		dispatch: target["dispatchEvent"]
+	};
+	const ours = (type) => !browser || SCREEN_EVENTS.has(type);
+	target["addEventListener"] = (type, listener, options) => {
+		if (ours(type)) own.addEventListener(type, listener, options);
+		else original.add.call(target, type, listener, options);
+	};
+	target["removeEventListener"] = (type, listener, options) => {
+		if (ours(type)) own.removeEventListener(type, listener, options);
+		else original.remove.call(target, type, listener, options);
+	};
+	target["dispatchEvent"] = (event) => ours(event.type) ? dispatchThrough(event, target, [own]) : original.dispatch.call(target, event);
+	if (browser && !__WEB__) return;
+	for (const [name, axis] of [["innerWidth", "width"], ["innerHeight", "height"]]) Object.defineProperty(target, name, {
+		get: () => (events.viewport ?? screenViewport())[axis],
+		configurable: true,
+		enumerable: true
+	});
+};
+const installGlobalDocument = (target, events) => {
+	if (typeof target["document"]?.nodeType === "number") return;
+	target["document"] = events.document;
+};
+const KEY = Symbol.for("@blotch/angular-lynx/global-events");
+const globalEvents = () => {
+	const store = globalThis;
+	store[KEY] ??= new GlobalEvents(globalThis, (events) => __WEB__ ? new WebScreenSource(events) : new NativeScreenSource(events));
+	return store[KEY];
+};
+let firstRenderPending = true;
+const deferredCallbacks = [];
+const isFirstRenderPending = () => firstRenderPending;
+const markFirstRenderComplete = () => {
+	firstRenderPending = false;
+	if (deferredCallbacks.length === 0) return;
+	const callbacks = deferredCallbacks.splice(0);
+	setTimeout(() => {
+		for (const callback of callbacks) callback();
+	}, 0);
+};
+const runAfterFirstRender = (callback) => {
+	if (!firstRenderPending) {
+		callback();
+		return;
+	}
+	deferredCallbacks.push(callback);
+};
+let insideChangeDetection = false;
+const setInsideChangeDetection = (value) => {
+	insideChangeDetection = value;
+};
+const isInsideChangeDetection = () => insideChangeDetection;
+const DASHARRAY_ATTRIBUTE = /(\s)stroke-dasharray\s*=\s*(?:"([^"]*)"|'([^']*)')/g;
+const DASHARRAY_DECLARATION = /(^|[;"'\s])stroke-dasharray\s*:\s*([^;"']*);?/g;
+const DASH_LENGTH = /^[+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?(?:px)?$/i;
+const normalizeDashArray = (value) => {
+	const tokens = value.trim().split(/[\s,]+/).filter((token) => token.length > 0);
+	if (tokens.length === 0 || !tokens.every((t) => DASH_LENGTH.test(t))) return null;
+	return tokens.map((token) => token.replace(/px$/i, "")).join(" ");
+};
+const sanitizeSvgContent = (content) => {
+	if (!content.includes("stroke-dasharray")) return content;
+	return content.replace(DASHARRAY_ATTRIBUTE, (_match, space, double, single) => {
+		const normalized = normalizeDashArray(double ?? single);
+		return normalized === null ? "" : `${space}stroke-dasharray="${normalized}"`;
+	}).replace(DASHARRAY_DECLARATION, (_match, before, value) => {
+		const normalized = normalizeDashArray(value);
+		return normalized === null ? before : `${before}stroke-dasharray:${normalized};`;
+	});
+};
+const toDOMRect = (rect) => {
+	const { left = 0, top = 0, width = 0, height = 0 } = rect ?? {};
+	const box = {
+		x: left,
+		y: top,
+		width,
+		height,
+		top,
+		left,
+		right: left + width,
+		bottom: top + height
+	};
+	return {
+		...box,
+		toJSON: () => ({ ...box })
+	};
+};
+const measureLayout = (element, callback) => {
+	__InvokeUIMethod(element, "boundingClientRect", {}, (result) => callback(result?.code === 0 && result.data ? result.data : null));
+};
+var LayoutTracker = class {
+	#host;
+	#observers = /* @__PURE__ */ new Set();
+	#listening = false;
+	rect = null;
+	constructor(host) {
+		this.#host = host;
+	}
+	start() {
+		if (this.#listening) return;
+		this.#listening = true;
+		this.#host.listen("bindlayoutchange", (event) => {
+			const detail = event?.detail;
+			if (detail && typeof detail.width === "number") this.#update(detail);
+		});
+		this.#host.measure((rect) => {
+			if (rect && !this.rect) this.#update(rect);
+		});
+	}
+	observe(observer) {
+		this.start();
+		this.#observers.add(observer);
+		return () => this.#observers.delete(observer);
+	}
+	#update(detail) {
+		const rect = {
+			left: detail.left,
+			top: detail.top,
+			width: detail.width,
+			height: detail.height
+		};
+		const old = this.rect;
+		this.rect = rect;
+		if (old && old.left === rect.left && old.top === rect.top && old.width === rect.width && old.height === rect.height) return;
+		for (const observer of Array.from(this.#observers)) observer(rect);
+	}
+};
 const LONG_PRESS_SLOP = 10;
 const TAP_GRACE = 300;
 let tapsDropped = false;
@@ -1927,6 +2514,20 @@ var WebLongPress = class {
 		this.#timer = void 0;
 	}
 };
+const seconds = (value) => Number.isFinite(value) ? value : 0;
+const webVideoDetail = (eventName, video) => {
+	switch (eventName) {
+		case "timeupdate": return {
+			current: seconds(video.currentTime),
+			duration: seconds(video.duration)
+		};
+		case "error": return {
+			errorCode: video.error?.code ?? 0,
+			errorMsg: video.error?.message ?? ""
+		};
+		default: return;
+	}
+};
 const EVENT_PREFIXES = [
 	["capture-bind", "capture-bindEvent"],
 	["capture-catch", "capture-catchEvent"],
@@ -1989,6 +2590,11 @@ const flushesBefore = (first, second) => {
 const isIOS = () => {
 	return ((typeof lynx !== "undefined" ? lynx.SystemInfo : void 0) ?? (typeof SystemInfo !== "undefined" ? SystemInfo : void 0))?.platform === "iOS";
 };
+const listenForScrollsFromTheStart = (element) => {
+	if (__WEB__ || !isIOS()) return;
+	element.addEventListener("bindscroll", ignoreScroll);
+};
+const ignoreScroll = () => {};
 const insertHidesBlurView = (parent, child) => !__WEB__ && child.tagName === "blur-view" && parent.tagName !== "blur-view" && isIOS();
 const isTextish = (el) => el.tagName === "text" || el.tagName === "raw-text";
 var LynxElement = class {
@@ -2014,6 +2620,7 @@ var LynxElement = class {
 	#ownTraits = null;
 	#addedTraits = [];
 	#listeners = [];
+	#heldEvents = /* @__PURE__ */ new Map();
 	#webLongPress = null;
 	#pointerEvents = null;
 	#webPointer = null;
@@ -2029,9 +2636,14 @@ var LynxElement = class {
 	static #pendingAttributeRemovals = /* @__PURE__ */ new Set();
 	#removedAttributes = /* @__PURE__ */ new Set();
 	static #byNativeId = /* @__PURE__ */ new Map();
+	static #pendingReleases = /* @__PURE__ */ new Set();
+	#destroyed = false;
 	static #canonicalFor(ref) {
 		return _a.#byNativeId.get(__GetElementUniqueID(ref)) ?? new _a(ref);
 	}
+	static byUniqueId(uniqueId) {
+		return _a.#byNativeId.get(uniqueId);
+	}
 	constructor(element) {
 		this.#nativeRef = element;
 		_a.#byNativeId.set(__GetElementUniqueID(element), this);
@@ -2040,6 +2652,18 @@ var LynxElement = class {
 		const id = __GetElementUniqueID(this.#nativeRef);
 		if (_a.#byNativeId.get(id) === this) _a.#byNativeId.delete(id);
 	}
+	markDestroyed() {
+		if (this.isRootPageElement) return;
+		this.#destroyed = true;
+		_a.#pendingReleases.add(this);
+		scheduleSettleFlush();
+	}
+	virtualChildren() {
+		return [];
+	}
+	get ownerDocument() {
+		return globalEvents().document;
+	}
 	setProperty(name, value) {
 		this.setAttribute(name, value);
 	}
@@ -2155,6 +2779,7 @@ var LynxElement = class {
 	insertBefore(newChild, refChild) {
 		if (newChild.isRootPageElement) return;
 		newChild.#cancelPendingRemoval();
+		newChild.#keepIfDestroyed();
 		newChild.#removeIfMoveWouldBeLost(this);
 		newChild.#recreateIfDead();
 		if (refChild == null) this.appendChild(newChild);
@@ -2176,6 +2801,7 @@ var LynxElement = class {
 	appendChild(newChild) {
 		if (newChild.isRootPageElement) return;
 		newChild.#cancelPendingRemoval();
+		newChild.#keepIfDestroyed();
 		newChild.#removeIfMoveWouldBeLost(this);
 		newChild.#recreateIfDead();
 		if (wouldFormCycle(this.element, newChild.element)) return;
@@ -2234,10 +2860,18 @@ var LynxElement = class {
 		}
 	}
 	static commitPendingRemovals() {
-		if (_a.#pendingRemovals.size === 0) return;
-		const items = [..._a.#pendingRemovals];
-		_a.#pendingRemovals.clear();
-		for (const el of items) el.#doRemove();
+		if (_a.#pendingRemovals.size > 0) {
+			const items = [..._a.#pendingRemovals];
+			_a.#pendingRemovals.clear();
+			for (const el of items) el.#doRemove();
+		}
+		_a.#commitPendingReleases();
+	}
+	static #commitPendingReleases() {
+		if (_a.#pendingReleases.size === 0) return;
+		const elements = [..._a.#pendingReleases];
+		_a.#pendingReleases.clear();
+		for (const el of elements) if (el.#destroyed && !el.#jsParent && !el._virtualParent) el.#release();
 	}
 	static #enqueueTextNormalization(el) {
 		_a.#pendingTextNormalization.add(el);
@@ -2289,6 +2923,11 @@ var LynxElement = class {
 	#cancelPendingRemoval() {
 		_a.#pendingRemovals.delete(this);
 	}
+	#keepIfDestroyed() {
+		if (!this.#destroyed) return;
+		this.#destroyed = false;
+		_a.#pendingReleases.delete(this);
+	}
 	#removeIfMoveWouldBeLost(newParent) {
 		if (__WEB__ || this.#paintingDead || this._virtualParent) return;
 		const oldParent = __GetParent(this.element);
@@ -2296,7 +2935,7 @@ var LynxElement = class {
 		if (flushesBefore(newParent.element, oldParent)) this.#doRemove();
 	}
 	#doRemove() {
-		const parent = this.parentNode();
+		const parent = __GetParent(this.element);
 		if (!parent) return;
 		for (const anim of this.#activeAnimations) anim.cancel();
 		if (this.#activeAnimations.length > 0) {
@@ -2304,7 +2943,7 @@ var LynxElement = class {
 			__AddInlineStyle(this.element, "transform", null);
 			this.#activeAnimations.length = 0;
 		}
-		__RemoveElement(parent.element, this.element);
+		__RemoveElement(parent, this.element);
 		const jsParent = this.#jsParent;
 		if (jsParent) {
 			const i = jsParent.#children.indexOf(this);
@@ -2314,6 +2953,15 @@ var LynxElement = class {
 		}
 		this.#markPaintingDead();
 		if (jsParent && isTextish(this)) _a.#enqueueTextNormalization(jsParent);
+		if (this.#destroyed) this.#release();
+	}
+	#release() {
+		this.#destroyed = false;
+		this.#paintingDead = true;
+		this.deregisterNative();
+		for (const { eventType, eventName } of this.#nativeHandlers.values()) __AddEvent(this.element, eventType, eventName, void 0);
+		for (const child of this.#children) child.#release();
+		for (const child of this.virtualChildren()) child.#release();
 	}
 	#markPaintingDead() {
 		this.#paintingDead = true;
@@ -2384,10 +3032,19 @@ var LynxElement = class {
 		const parsed = parseEventName(name);
 		if (!parsed) return () => {};
 		if (__WEB__ && parsed.eventName === "longpress") this.#listenForWebLongPress();
-		const entry = {
+		return this.#add({
 			...parsed,
 			listener: cb
-		};
+		});
+	}
+	addTrailingEventListener(name, cb) {
+		return this.#add({
+			...parseEventName(name),
+			listener: cb,
+			trailing: true
+		});
+	}
+	#add(entry) {
 		this.#listeners.push(entry);
 		this.#syncNativeHandler(entry);
 		return () => this.#removeListener(entry);
@@ -2454,7 +3111,7 @@ var LynxElement = class {
 	#layoutTracker() {
 		this.#layout ??= new LayoutTracker({
 			listen: (event, listener) => this.addEventListener(event, listener),
-			measure: (callback) => __InvokeUIMethod(this.element, "boundingClientRect", {}, (result) => callback(result?.code === 0 && result.data ? result.data : null))
+			measure: (callback) => measureLayout(this.element, callback)
 		});
 		return this.#layout;
 	}
@@ -2511,14 +3168,18 @@ var LynxElement = class {
 	}
 	#listenersLike(entry) {
 		const key = nativeEventKey(entry.eventType, entry.eventName);
-		return this.#listeners.filter((other) => nativeEventKey(other.eventType, other.eventName) === key);
+		const like = this.#listeners.filter((other) => nativeEventKey(other.eventType, other.eventName) === key);
+		return [...like.filter((other) => !other.trailing), ...like.filter((other) => other.trailing)];
 	}
 	#syncNativeHandler(entry) {
 		const key = nativeEventKey(entry.eventType, entry.eventName);
+		if (this.#heldEvents.has(key)) return;
 		const listeners = this.#listenersLike(entry);
 		const current = this.#nativeHandlers.get(key);
 		const eventType = listeners.length ? combinedEventType(listeners) : null;
 		if (current?.eventType === eventType) return;
+		scheduleSettleFlush();
+		this.#sendHandlersWithNextFlush();
 		if (current) {
 			__AddEvent(this.element, current.eventType, entry.eventName, void 0);
 			this.#nativeHandlers.delete(key);
@@ -2535,6 +3196,25 @@ var LynxElement = class {
 			value: handler.dispatch
 		});
 	}
+	holdNativeEvent(eventName) {
+		this.#heldEvents.set(eventName, (this.#heldEvents.get(eventName) ?? 0) + 1);
+		this.#nativeHandlers.delete(eventName);
+	}
+	releaseNativeEvent(eventName) {
+		const held = this.#heldEvents.get(eventName);
+		if (held === void 0) return;
+		if (held > 1) {
+			this.#heldEvents.set(eventName, held - 1);
+			return;
+		}
+		this.#heldEvents.delete(eventName);
+		const entry = this.#listeners.find((listener) => listener.eventName === eventName && listener.eventType !== "global-bindEvent");
+		if (entry) this.#syncNativeHandler(entry);
+	}
+	#sendHandlersWithNextFlush() {
+		if (__WEB__) return;
+		__SetDataset(this.element, { ...this.#dataset });
+	}
 	#dispatch(entry, event) {
 		if (event && typeof event === "object") {
 			if (typeof event.stopPropagation !== "function") event.stopPropagation = () => {};
@@ -2542,6 +3222,10 @@ var LynxElement = class {
 			if (typeof event.stopImmediatePropagation !== "function") event.stopImmediatePropagation = () => {};
 		}
 		if (__WEB__ && entry.eventName === "tap" && dropsTap()) return void 0;
+		if (__WEB__ && this.tagName === "video" && event && typeof event === "object") {
+			const detail = webVideoDetail(entry.eventName, this.element);
+			if (detail) event.detail = detail;
+		}
 		const pointer = __WEB__ ? this.#webPointer : this.#pointerEvents?.lastOffset;
 		if (pointer && entry.eventName === "tap" && event && typeof event === "object" && event.offsetX === void 0) {
 			event.offsetX = pointer.offsetX;
@@ -2647,6 +3331,11 @@ var LynxListElement = class extends LynxElement {
 		}
 		return children;
 	}
+	virtualChildren() {
+		const children = [];
+		for (let child = this.#firstVirtualChild; child; child = child._virtualNext) children.push(child);
+		return children;
+	}
 	getCommittedUIChildren() {
 		return this.#committedUIChildren;
 	}
@@ -5315,6 +6004,9 @@ const noHandler = () => ({
 });
 var LynxMainThreadEvent = class LynxMainThreadEvent {
 	#el = inject(ElementRef).nativeElement;
+	get #host() {
+		return this.#el;
+	}
 	#registrations = /* @__PURE__ */ new Map();
 	mainThreadBindtap;
 	mainThreadCatchtap;
@@ -5359,9 +6051,13 @@ var LynxMainThreadEvent = class LynxMainThreadEvent {
 				__workletMap[workletId] = handle;
 			}
 			if (workletId === void 0) {
-				if (this.#registrations.delete(inputName)) __AddEvent(elementRef, eventType, eventName, noHandler());
+				if (this.#registrations.delete(inputName)) {
+					__AddEvent(elementRef, eventType, eventName, noHandler());
+					this.#host.releaseNativeEvent?.(eventName);
+				}
 				continue;
 			}
+			if (!this.#registrations.has(inputName)) this.#host.holdNativeEvent?.(eventName);
 			__AddEvent(elementRef, eventType, eventName, {
 				type: "worklet",
 				value: {
@@ -5377,6 +6073,7 @@ var LynxMainThreadEvent = class LynxMainThreadEvent {
 		if (!elementRef) return;
 		for (const [inputName, { eventType, eventName }] of this.#registrations) {
 			__AddEvent(elementRef, eventType, eventName, noHandler());
+			this.#host.releaseNativeEvent?.(eventName);
 			this.#release(inputName);
 		}
 		this.#registrations.clear();
@@ -8971,6 +9668,7 @@ const CONTEXT_EVENTS = /* @__PURE__ */ new Set([
 	"webglcontextrestored",
 	"webglcontextcreationerror"
 ]);
+const contextFinalizer = typeof FinalizationRegistry === "function" ? new FinalizationRegistry((free) => free()) : null;
 const kebab = (name) => name.startsWith("--") ? name : name.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
 const createStyle = (element) => {
 	return new Proxy({}, {
@@ -9080,6 +9778,7 @@ var LynxCanvasElement = class extends LynxElement {
 			return null;
 		}
 		this.#context = new LynxWebGL2RenderingContext(bridge, contextId, this, resolved);
+		contextFinalizer?.register(this, () => bridge.destroy(contextId));
 		return this.#context;
 	}
 	addEventListener(name, cb) {
@@ -9210,6 +9909,7 @@ var LynxDocument = class {
 		if (isAndroid()) __SetID(pageElement, ANDROID_BLUR_CAPTURE_TARGET);
 		this.#pageId = __GetElementUniqueID(pageElement);
 		setPageElementRef(pageElement);
+		globalEvents().attach(this.page, (id) => LynxElement.byUniqueId(id));
 		return this.page;
 	}
 	createElement(name, value) {
@@ -9217,7 +9917,11 @@ var LynxDocument = class {
 		/* v8 ignore next */
 		if (__PROFILE__) devStats.elementCreated++;
 		scheduleSettleFlush();
-		if (tag === "list") return createListElement(this.#pageId);
+		if (tag === "list") {
+			const list = createListElement(this.#pageId);
+			listenForScrollsFromTheStart(list);
+			return list;
+		}
 		if (tag === "page") {
 			const result = createPageElement(this.page, this.#pageElementRequested);
 			this.#pageElementRequested = result.pageElementRequested;
@@ -9228,6 +9932,7 @@ var LynxDocument = class {
 		el.tagName = tag;
 		if (tag === "raw-text") el.setInitialText(value ?? "");
 		if (tag === "blur-view") el.updateBlurMaterial();
+		if (tag === "scroll-view") listenForScrollsFromTheStart(el);
 		return el;
 	}
 	createText(value) {
@@ -9278,6 +9983,7 @@ var LynxHydrateDocument = class {
 		page.tagName = "page";
 		page.isRootPageElement = true;
 		this.#page = page;
+		globalEvents().attach(page, (id) => LynxElement.byUniqueId(id));
 		return page;
 	}
 	createElement(tag, value) {
@@ -9306,7 +10012,48 @@ var LynxHydrateDocument = class {
 		this.#page?.appendChild(newChild);
 	}
 };
+const LYNX_ELEMENT_TAGS = /* @__PURE__ */ new Set([
+	"page",
+	"view",
+	"text",
+	"raw-text",
+	"inline-truncation",
+	"image",
+	"scroll-view",
+	"list",
+	"list-item",
+	"block",
+	"if",
+	"for",
+	"frame",
+	"input",
+	"textarea",
+	"overlay",
+	"svg",
+	"viewpager",
+	"viewpager-item",
+	"refresh",
+	"refresh-header",
+	"title-bar-view",
+	"scroll-coordinator",
+	"scroll-coordinator-header",
+	"scroll-coordinator-toolbar",
+	"scroll-coordinator-slot",
+	"scroll-coordinator-slot-drag",
+	"blur-view",
+	"webview",
+	"video",
+	"cover-view",
+	"canvas",
+	"comment"
+]);
+const tagClassOf = (tag) => `_ngtag-${tag.toLowerCase()}`;
+const tagClassFor = (tag) => LYNX_ELEMENT_TAGS.has(tag) ? null : tagClassOf(tag);
 const collapseWhitespace = (value) => value.replace(/[ \t\n\r\f\v]+/g, " ");
+const markTag = (element, tag) => {
+	const tagClass = tagClassFor(tag);
+	if (tagClass) element.addScopeClass(tagClass);
+};
 var LynxRenderer = class {
 	#document;
 	#data = {};
@@ -9318,7 +10065,9 @@ var LynxRenderer = class {
 	}
 	destroy() {}
 	createElement(name, _namespace) {
-		return this.#document.createElement(name);
+		const element = this.#document.createElement(name);
+		markTag(element, name);
+		return element;
 	}
 	createComment(_value) {
 		return this.#document.createComment();
@@ -9327,7 +10076,7 @@ var LynxRenderer = class {
 		return this.#document.createText(collapseWhitespace(value));
 	}
 	destroyNode = (node) => {
-		node.deregisterNative?.();
+		node.markDestroyed?.();
 		node.releaseContext?.();
 	};
 	appendChild(parent, newChild) {
@@ -9376,10 +10125,18 @@ var LynxRenderer = class {
 	setValue(node, value) {
 		node.setAttribute("text", collapseWhitespace(value));
 	}
-	listen(target, eventName, callback, _options) {
-		return target.addEventListener(eventName, callback);
+	listen(target, eventName, callback, options) {
+		const resolved = typeof target === "string" ? globalTarget(target, eventName) : target;
+		const remove = resolved.addEventListener(eventName, callback, options);
+		return typeof remove === "function" ? remove : () => resolved.removeEventListener(eventName, callback, options);
 	}
 };
+const globalTarget = (name, eventName) => {
+	const document = globalEvents().document;
+	const target = name === "window" ? document.defaultView : name === "document" ? document : name === "body" ? document.body : null;
+	if (!target) throw new Error(`Unsupported event target ${name} for event ${eventName}`);
+	return target;
+};
 var EmulatedLynxRenderer = class extends LynxRenderer {
 	#contentClass;
 	#hostClass;
@@ -9482,10 +10239,7 @@ const provideRenderer = () => {
 		},
 		{
 			provide: DOCUMENT,
-			useValue: {
-				getElementById: () => null,
-				defaultView: globalThis
-			}
+			useFactory: () => globalEvents().document
 		},
 		{
 			provide: APP_BASE_HREF,
@@ -10649,7 +11403,7 @@ var LynxImageElement = class {
 		for (const listener of Array.from(this.#listeners.get(type) ?? [])) listener.call(this, event);
 	}
 };
-const isLynxElement = (value) => typeof value === "object" && value !== null && typeof value.observeLayout === "function" && "element" in value;
+const isLynxElement$1 = (value) => typeof value === "object" && value !== null && typeof value.observeLayout === "function" && "element" in value;
 const installCanvasGlobals = (target) => {
 	const install = (name, value) => {
 		if (typeof target[name] === "undefined") target[name] = value;
@@ -10683,7 +11437,7 @@ const installCanvasGlobals = (target) => {
 	if (typeof nativeGetComputedStyle !== "function") target["getComputedStyle"] = Object.assign(() => emptyComputedStyle(), { forLynxElements: true });
 	else if (!nativeGetComputedStyle.forLynxElements) {
 		const wrapped = (element, pseudo) => {
-			if (!isLynxElement(element)) return nativeGetComputedStyle.call(target, element, pseudo);
+			if (!isLynxElement$1(element)) return nativeGetComputedStyle.call(target, element, pseudo);
 			const node = element.element;
 			const view = node.ownerDocument?.defaultView;
 			return view ? view.getComputedStyle(node, pseudo) : emptyComputedStyle();
@@ -10758,7 +11512,7 @@ var LynxResizeObserver = class {
 		this.#callback = callback;
 	}
 	observe(target) {
-		if (!isLynxElement(target)) throw new TypeError("Failed to execute 'observe' on 'ResizeObserver': the target is not an element");
+		if (!isLynxElement$1(target)) throw new TypeError("Failed to execute 'observe' on 'ResizeObserver': the target is not an element");
 		if (this.#observed.has(target)) return;
 		let last = null;
 		const notify = (rect) => {
@@ -10773,7 +11527,7 @@ var LynxResizeObserver = class {
 		});
 	}
 	unobserve(target) {
-		if (!isLynxElement(target)) return;
+		if (!isLynxElement$1(target)) return;
 		this.#observed.get(target)?.();
 		this.#observed.delete(target);
 	}
@@ -10803,12 +11557,12 @@ const wrapResizeObserver = (NativeResizeObserver) => {
 			});
 		}
 		observe(target, options) {
-			const node = isLynxElement(target) ? target.element : target;
-			if (isLynxElement(target)) this.#targets.set(node, target);
+			const node = isLynxElement$1(target) ? target.element : target;
+			if (isLynxElement$1(target)) this.#targets.set(node, target);
 			this.#observer.observe(node, options);
 		}
 		unobserve(target) {
-			const node = isLynxElement(target) ? target.element : target;
+			const node = isLynxElement$1(target) ? target.element : target;
 			this.#targets.delete(node);
 			this.#observer.unobserve(node);
 		}
@@ -10818,6 +11572,401 @@ const wrapResizeObserver = (NativeResizeObserver) => {
 		}
 	};
 };
+const isLynxElement = (value) => typeof value === "object" && value !== null && "element" in value && typeof value.addEventListener === "function" && typeof value.observeLayout === "function" && typeof value.parentNode === "function";
+const SCROLL_EVENTS = /* @__PURE__ */ new Map([
+	["scroll-view", "bindscroll"],
+	["list", "bindscroll"],
+	["viewpager", "bindoffsetchange"],
+	["scroll-coordinator", "bindoffset"]
+]);
+const measurements = /* @__PURE__ */ new Map();
+let sampleMeasurements = null;
+const measure = (element) => {
+	const native = element.element;
+	const shared = sampleMeasurements?.get(native) ?? measurements.get(native);
+	if (shared) return shared;
+	let answered = false;
+	const rect = new Promise((resolve) => measureLayout(native, (box) => {
+		answered = true;
+		measurements.delete(native);
+		resolve(box);
+	}));
+	sampleMeasurements?.set(native, rect);
+	if (!answered) measurements.set(native, rect);
+	return rect;
+};
+const measureGeometry = async (target, root) => {
+	const scrollContainers = [];
+	let top = target;
+	let inRoot = false;
+	while (!top.isRootPageElement) {
+		const parent = top.parentNode();
+		if (!parent) break;
+		if (parent === root) {
+			inRoot = true;
+			break;
+		}
+		if (SCROLL_EVENTS.has(parent.tagName)) scrollContainers.push(parent);
+		top = parent;
+	}
+	if (!root) inRoot = top.isRootPageElement === true;
+	const rootElement = root ?? (inRoot ? top : null);
+	const clips = inRoot ? scrollContainers : [];
+	const [box, rootBox, ...scrollBoxes] = await Promise.all([
+		measure(target),
+		rootElement ? measure(rootElement) : null,
+		...clips.map(measure)
+	]);
+	return {
+		box: box ?? null,
+		root: rootBox ?? null,
+		inRoot,
+		scrollContainers: scrollBoxes,
+		scrolledBy: root && inRoot && SCROLL_EVENTS.has(root.tagName) ? [...clips, root] : clips
+	};
+};
+const intersect = (a, b, touching) => {
+	const left = Math.max(a.left, b.left);
+	const top = Math.max(a.top, b.top);
+	const right = Math.min(a.left + a.width, b.left + b.width);
+	const bottom = Math.min(a.top + a.height, b.top + b.height);
+	return (touching ? right >= left && bottom >= top : right > left && bottom > top) ? {
+		left,
+		top,
+		width: right - left,
+		height: bottom - top
+	} : null;
+};
+const visiblePart = ({ box, root, scrollContainers }) => {
+	let visible = box;
+	for (const clip of [root, ...scrollContainers]) visible = visible && clip ? intersect(visible, clip, false) : null;
+	return visible;
+};
+const area = (rect) => rect.width * rect.height;
+const exposureEntryFor = (target, geometry, exposed) => {
+	const visible = visiblePart(geometry);
+	const isIntersecting = exposed ?? visible !== null;
+	const { box } = geometry;
+	let intersectionRatio = 0;
+	if (isIntersecting) intersectionRatio = !box || area(box) === 0 ? 1 : visible ? area(visible) / area(box) : 0;
+	return {
+		target,
+		time: performance.now(),
+		rootBounds: geometry.root ? toDOMRect(geometry.root) : null,
+		boundingClientRect: toDOMRect(box),
+		intersectionRect: toDOMRect(isIntersecting ? visible : null),
+		intersectionRatio,
+		isIntersecting
+	};
+};
+const grow = (rect, margin) => {
+	const [top, right, bottom, left] = margin.map((side, index) => side.percent ? side.value * (index % 2 ? rect.width : rect.height) / 100 : side.value);
+	return {
+		left: rect.left - left,
+		top: rect.top - top,
+		width: Math.max(rect.width + left + right, 0),
+		height: Math.max(rect.height + top + bottom, 0)
+	};
+};
+const thresholdIndexOf = (ratio, thresholds) => {
+	let index = 0;
+	while (index < thresholds.length && thresholds[index] <= ratio + 1e-6) index++;
+	return index;
+};
+const measuredEntryFor = (target, geometry, margin, thresholds, exposed) => {
+	const { box } = geometry;
+	const rootBounds = geometry.root && grow(geometry.root, margin);
+	let visible = null;
+	let overlaps = false;
+	let ratio = 0;
+	if (!box) {
+		overlaps = exposed === true;
+		ratio = overlaps ? 1 : 0;
+	} else if (geometry.inRoot && rootBounds) {
+		visible = box;
+		for (const clip of [...geometry.scrollContainers, rootBounds]) visible = visible && clip ? intersect(visible, clip, true) : null;
+		if (visible) {
+			overlaps = true;
+			ratio = area(box) === 0 ? 1 : Math.min(area(visible) / area(box), 1);
+		}
+	}
+	const index = overlaps ? thresholdIndexOf(ratio, thresholds) : 0;
+	return {
+		index,
+		entry: {
+			target,
+			time: performance.now(),
+			rootBounds: rootBounds ? toDOMRect(rootBounds) : null,
+			boundingClientRect: toDOMRect(box),
+			intersectionRect: toDOMRect(visible),
+			intersectionRatio: ratio,
+			isIntersecting: index > 0
+		}
+	};
+};
+const thresholdsOf = (threshold) => {
+	const given = threshold === void 0 ? [] : Array.isArray(threshold) ? threshold.map(Number) : [Number(threshold)];
+	for (const value of given) if (!(value >= 0 && value <= 1)) throw new RangeError("Failed to construct 'IntersectionObserver': Threshold values must be numbers between 0 and 1");
+	return Object.freeze(given.length ? given.sort((a, b) => a - b) : [0]);
+};
+const rootMarginOf = (margin) => {
+	const tokens = String(margin ?? "").trim().split(/\s+/).filter(Boolean);
+	if (tokens.length > 4) throw invalidRootMargin();
+	const [top = NO_MARGIN, right = top, bottom = top, left = right] = tokens.map((token) => {
+		const match = /^(-?(?:\d+\.?\d*|\.\d+))(px|%)?$/.exec(token);
+		if (!match || !match[2] && Number(match[1]) !== 0) throw invalidRootMargin();
+		return match[2] ? {
+			text: token,
+			value: Number(match[1]),
+			percent: match[2] === "%"
+		} : NO_MARGIN;
+	});
+	return [
+		top,
+		right,
+		bottom,
+		left
+	];
+};
+const NO_MARGIN = {
+	text: "0px",
+	value: 0,
+	percent: false
+};
+const invalidRootMargin = () => /* @__PURE__ */ new SyntaxError("Failed to construct 'IntersectionObserver': rootMargin must be specified in pixels or percent.");
+const SAMPLE_INTERVAL = 50;
+const SAMPLES_AFTER_SCROLL = 6;
+const scrolling = /* @__PURE__ */ new Map();
+let samplingTimer = null;
+const sampleWhileScrolling = (sample) => {
+	scrolling.set(sample, SAMPLES_AFTER_SCROLL);
+	if (samplingTimer === null) samplingTimer = setTimeout(sampleScrolling, SAMPLE_INTERVAL);
+};
+const sampleScrolling = () => {
+	samplingTimer = null;
+	sampleMeasurements = /* @__PURE__ */ new Map();
+	for (const [sample, left] of Array.from(scrolling)) {
+		if (left > 1) scrolling.set(sample, left - 1);
+		else scrolling.delete(sample);
+		sample();
+	}
+	sampleMeasurements = null;
+	if (scrolling.size && samplingTimer === null) samplingTimer = setTimeout(sampleScrolling, SAMPLE_INTERVAL);
+};
+const stopSampling = (sample) => {
+	scrolling.delete(sample);
+	if (!scrolling.size && samplingTimer !== null) {
+		clearTimeout(samplingTimer);
+		samplingTimer = null;
+	}
+};
+var LynxIntersectionObserver = class {
+	static forLynxElements = true;
+	root;
+	rootMargin;
+	thresholds;
+	#callback;
+	#root;
+	#margin;
+	#measures;
+	#observed = /* @__PURE__ */ new Map();
+	#records = [];
+	#delivering = false;
+	constructor(callback, options = {}) {
+		if (typeof callback !== "function") throw new TypeError("Failed to construct 'IntersectionObserver': parameter 1 is not of type 'Function'.");
+		this.#callback = callback;
+		const root = options.root;
+		if (root === void 0 || root === null || root === globalThis.document) this.#root = null;
+		else if (isLynxElement(root)) this.#root = root;
+		else throw new TypeError("Failed to construct 'IntersectionObserver': Failed to read the 'root' property from 'IntersectionObserverInit': The provided value is not of type '(Document or Element)'.");
+		this.root = this.#root;
+		this.#margin = rootMarginOf(options.rootMargin);
+		this.rootMargin = this.#margin.map((side) => side.text).join(" ");
+		this.thresholds = thresholdsOf(options.threshold);
+		this.#measures = this.#root !== null || this.#margin.some((side) => side.value !== 0) || this.thresholds.length !== 1 || this.thresholds[0] !== 0;
+	}
+	observe(target) {
+		if (!isLynxElement(target)) throw new TypeError("Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'.");
+		if (this.#observed.has(target)) return;
+		const stopAppear = target.addEventListener("binduiappear", () => {
+			this.#exposure(target, observation, true);
+		});
+		const stopDisappear = target.addEventListener("binduidisappear", () => {
+			this.#exposure(target, observation, false);
+		});
+		let laidOut = false;
+		const layout = () => {
+			if (this.#measures) {
+				observation.sample();
+				return;
+			}
+			if (laidOut) return;
+			laidOut = true;
+			stopLayout();
+			this.#report(target, observation, null);
+		};
+		const stopLayout = target.observeLayout(layout);
+		const observation = {
+			stop: () => {
+				stopAppear();
+				stopDisappear();
+				stopLayout();
+				for (const stopScroll of observation.scrollListeners.values()) stopScroll();
+				observation.scrollListeners.clear();
+				stopSampling(observation.sample);
+			},
+			index: null,
+			exposed: null,
+			events: 0,
+			measuring: false,
+			again: false,
+			measured: false,
+			scrollListeners: /* @__PURE__ */ new Map(),
+			sample: () => this.#sample(target, observation)
+		};
+		this.#observed.set(target, observation);
+		if (target.layoutRect) queueMicrotask(layout);
+	}
+	unobserve(target) {
+		const observation = this.#observed.get(target);
+		if (!observation) return;
+		observation.stop();
+		this.#observed.delete(target);
+		this.#records = this.#records.filter((entry) => entry.target !== target);
+	}
+	disconnect() {
+		for (const observation of this.#observed.values()) observation.stop();
+		this.#observed.clear();
+		this.#records = [];
+	}
+	takeRecords() {
+		return this.#records.splice(0);
+	}
+	#exposure(target, observation, exposed) {
+		observation.exposed = exposed;
+		if (this.#measures) observation.sample();
+		else this.#report(target, observation, exposed);
+	}
+	async #report(target, observation, exposed) {
+		const event = exposed === null ? 0 : ++observation.events;
+		const geometry = await measureGeometry(target, null);
+		if (this.#observed.get(target) !== observation) return;
+		if (observation.events !== event) return;
+		const entry = exposureEntryFor(target, geometry, exposed);
+		const index = entry.isIntersecting ? 1 : 0;
+		if (index === observation.index) return;
+		observation.index = index;
+		this.#queue(entry);
+	}
+	#sample(target, observation) {
+		if (this.#observed.get(target) !== observation) return;
+		if (observation.measuring) {
+			observation.again = true;
+			return;
+		}
+		observation.measuring = true;
+		measureGeometry(target, this.#root).then((geometry) => {
+			observation.measuring = false;
+			if (this.#observed.get(target) !== observation) return;
+			this.#listenForScrolls(observation, geometry.scrolledBy);
+			if (geometry.box) observation.measured = true;
+			const { entry, index } = measuredEntryFor(target, geometry, this.#margin, this.thresholds, observation.measured ? null : observation.exposed);
+			if (index !== observation.index) {
+				observation.index = index;
+				this.#queue(entry);
+			}
+			if (observation.again) {
+				observation.again = false;
+				observation.sample();
+			}
+		});
+	}
+	#listenForScrolls(observation, scrolledBy) {
+		const current = new Set(scrolledBy);
+		for (const [scroller, stopScroll] of observation.scrollListeners) {
+			if (current.has(scroller)) continue;
+			stopScroll();
+			observation.scrollListeners.delete(scroller);
+		}
+		for (const scroller of scrolledBy) {
+			if (observation.scrollListeners.has(scroller)) continue;
+			const event = SCROLL_EVENTS.get(scroller.tagName);
+			observation.scrollListeners.set(scroller, scroller.addEventListener(event, () => {
+				sampleWhileScrolling(observation.sample);
+			}));
+		}
+	}
+	#queue(entry) {
+		this.#records.push(entry);
+		this.#deliverSoon();
+	}
+	#deliverSoon() {
+		if (this.#delivering) return;
+		this.#delivering = true;
+		queueMicrotask(() => {
+			this.#delivering = false;
+			const records = this.takeRecords();
+			if (records.length) this.#callback.call(this, records, this);
+		});
+	}
+};
+const wrapIntersectionObserver = (NativeIntersectionObserver) => {
+	const toNode = (value) => isLynxElement(value) ? value.element : value;
+	return class LynxWebIntersectionObserver {
+		static forLynxElements = true;
+		root;
+		#observer;
+		#targets = /* @__PURE__ */ new Map();
+		constructor(callback, options) {
+			this.root = options?.root ?? null;
+			this.#observer = new NativeIntersectionObserver((entries) => callback(entries.map((entry) => this.#entry(entry)), this), options && {
+				...options,
+				root: toNode(options.root)
+			});
+		}
+		get rootMargin() {
+			return this.#observer.rootMargin;
+		}
+		get thresholds() {
+			return this.#observer.thresholds;
+		}
+		observe(target) {
+			const node = toNode(target);
+			if (node !== target) this.#targets.set(node, target);
+			this.#observer.observe(node);
+		}
+		unobserve(target) {
+			const node = toNode(target);
+			this.#targets.delete(node);
+			this.#observer.unobserve(node);
+		}
+		disconnect() {
+			this.#targets.clear();
+			this.#observer.disconnect();
+		}
+		takeRecords() {
+			return this.#observer.takeRecords().map((entry) => this.#entry(entry));
+		}
+		#entry(entry) {
+			const target = this.#targets.get(entry.target);
+			if (!target) return entry;
+			return {
+				target,
+				time: entry.time,
+				rootBounds: entry.rootBounds,
+				boundingClientRect: entry.boundingClientRect,
+				intersectionRect: entry.intersectionRect,
+				intersectionRatio: entry.intersectionRatio,
+				isIntersecting: entry.isIntersecting
+			};
+		}
+	};
+};
+const installIntersectionObserver = (target) => {
+	const native = target["IntersectionObserver"];
+	if (typeof native === "undefined") target["IntersectionObserver"] = LynxIntersectionObserver;
+	else if (!native.forLynxElements) target["IntersectionObserver"] = wrapIntersectionObserver(native);
+};
 const readBundledAsset = (url) => {
 	const lynxGlobal = globalThis.lynx;
 	if (typeof lynxGlobal?.module !== "function") return null;
@@ -11055,8 +12204,19 @@ const parseUrl$1 = (input) => {
 	try {
 		return new URL(input).href;
 	} catch {
-		throw new TypeError(`Failed to parse URL from ${input}. Lynx has no page URL to resolve a relative URL against, so requests need an absolute URL.`);
+		throw new TypeError(`Failed to parse URL from ${input}. Lynx has no page URL to resolve a relative URL against, so this needs an absolute URL.`);
+	}
+};
+const isRelative = (url) => !/^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(url);
+const PLACEHOLDER_BASE = "http://placeholder.invalid/";
+const parseRequestUrl = (input) => {
+	if (!isRelative(input)) return parseUrl$1(input);
+	try {
+		new URL(input, PLACEHOLDER_BASE);
+	} catch {
+		throw new TypeError(`Failed to parse URL from ${input}.`);
 	}
+	return input;
 };
 const DEFAULT_OPTIONS = {
 	cache: "default",
@@ -11096,7 +12256,7 @@ var LynxRequest = class LynxRequest extends LynxBody {
 		};
 		if (source !== null && (upper === "GET" || upper === "HEAD")) throw new TypeError("Failed to construct 'Request': Request with GET/HEAD method cannot have body.");
 		super(source);
-		this.url = base ? base.url : parseUrl$1(String(input));
+		this.url = base ? base.url : parseRequestUrl(String(input));
 		this.method = normalizedMethod;
 		this.headers = new LynxHeaders(init.headers ?? base?.headers);
 		if (type !== null && !this.headers.has("content-type")) this.headers.set("content-type", type);
@@ -11215,21 +12375,18 @@ var LynxResponse = class LynxResponse extends LynxBody {
 	}
 };
 let nextFetchId = 0;
-const isRelative = (url) => !/^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(url);
-const bundledResponse = (input, init) => {
-	if (typeof input !== "string" || !isRelative(input)) return null;
-	if (init?.method && init.method.toUpperCase() !== "GET") return null;
-	const bytes = readBundledAsset(input);
-	if (!bytes) return null;
+const bundledResponse = (request) => {
+	const bytes = request.method === "GET" ? readBundledAsset(request.url) : null;
+	if (!bytes) return /* @__PURE__ */ new TypeError(`Failed to fetch ${request.url}. Lynx has no page URL to resolve a relative URL against: only a GET of a file the app bundles can use one, and other requests need an absolute URL.`);
 	return new LynxResponse(new ExtractedBody(bytes), {
 		status: 200,
 		statusText: "OK",
 		headers: {
-			"content-type": typeOfAsset(input),
+			"content-type": typeOfAsset(request.url),
 			"content-length": String(bytes.byteLength)
 		}
 	}, {
-		url: input,
+		url: request.url,
 		redirected: false,
 		type: "basic"
 	});
@@ -11267,18 +12424,13 @@ const localResponse = (url) => {
 	return null;
 };
 const relayFetch = (input, init) => new Promise((resolve, reject) => {
-	const bundled = bundledResponse(input, init);
-	if (bundled) {
-		resolve(bundled);
-		return;
-	}
 	const request = new LynxRequest(input, init);
 	const { signal } = request;
 	if (signal.aborted) {
 		reject(signal.reason);
 		return;
 	}
-	const local = localResponse(request.url);
+	const local = isRelative(request.url) ? bundledResponse(request) : localResponse(request.url);
 	if (local) {
 		if (local instanceof LynxResponse) resolve(local);
 		else reject(local);
@@ -12327,18 +13479,24 @@ if (typeof Node === "undefined") try {
 	});
 	globalThis.Node = LynxNode;
 } catch {}
-if (typeof document === "undefined") globalThis.document = {
+if (isMainThread()) installGlobalDocument(globalThis, globalEvents());
+else if (typeof document === "undefined") globalThis.document = {
 	defaultView: globalThis,
 	querySelector: () => null
 };
 try {
 	if (typeof window === "undefined") globalThis.window = globalThis;
-} catch {}
+} catch {
+	if (__WEB__) window = globalThis;
+}
 try {
 	if (typeof navigator === "undefined") globalThis.navigator = { userAgent: "" };
 } catch {}
-if (typeof globalThis.addEventListener !== "function") globalThis.addEventListener = () => {};
-if (typeof globalThis.removeEventListener !== "function") globalThis.removeEventListener = () => {};
+if (isMainThread()) installGlobalWindow(globalThis, globalEvents());
+else {
+	if (typeof globalThis.addEventListener !== "function") globalThis.addEventListener = () => {};
+	if (typeof globalThis.removeEventListener !== "function") globalThis.removeEventListener = () => {};
+}
 if (typeof globalThis.setTimeout !== "function" && typeof lynx !== "undefined") {
 	const _lynx = lynx;
 	globalThis.setTimeout = _lynx.setTimeout;
@@ -12355,7 +13513,10 @@ if (typeof globalThis.requestIdleCallback !== "function" || typeof globalThis.ca
 	}), 0);
 	globalThis.cancelIdleCallback = (id) => clearTimeout(id);
 }
-if (isMainThread()) installCanvasGlobals(globalThis);
+if (isMainThread()) {
+	installCanvasGlobals(globalThis);
+	installIntersectionObserver(globalThis);
+}
 var Opcode;
 (function(Opcode) {
 	Opcode[Opcode["Begin"] = 0] = "Begin";