@pie-element/element-player 0.1.2-next.13 → 0.1.2-next.15

package/README.md

@@ -83,7 +83,6 @@ For elements with import maps:
 
 - Loads elements via dynamic ESM imports: `import('@pie-element/hotspot')`
 - Handles session state and user interactions
-- Manages math rendering internally (MathJax)
 - Emits `session-changed` events
 - Works with both React and Svelte elements
 
@@ -92,16 +91,18 @@ For elements with import maps:
 - Loads print exports: `import('@pie-element/hotspot/print')`
 - Stateless (no session management)
 - Optimized for print layouts
-- Manages math rendering internally (MathJax)
 - Role-based rendering (student/instructor)
 
 **All views:**
 
 - Use import maps for module resolution
 - Self-contained (no external setup needed)
-- Handle math rendering automatically
 - Support for both React and Svelte elements
 
+### Math rendering
+
+The player typesets math through `window['@pie-lib/math-rendering'].renderMath`, read on every render. A renderer the host installs there before the player mounts, such as the legacy MathJax 3 one, is used and no MathJax 4 loads. Without one, the player installs a MathJax 4 renderer from `@pie-element/shared-math-rendering-mathjax`, which elements and later players on the page share.
+
 ### Events
 
 The player dispatches each event from `<pie-element-player>`, bubbling and composed. A bubble-phase listener on the player, on an ancestor or on `document` hears each event once, with `event.target` the player; a listener outside a shadow root that contains the player sees that root's host instead. The element's own `session-changed` stops at the element, and the player dispatches its copy in its place. A capture-phase listener on the player or above it also hears every `session-changed` the element dispatches, ahead of the player's copy, and should ignore events whose `event.composedPath()[0]` is not the player. That equals `event.target` when no shadow root lies between listener and player. A closed shadow root hides the player from both, so listen in the bubble phase there.

package/dist/{math-mathjax-iaHklMFp.js → math-mathjax-Y_CMClAV.js}

@@ -41,22 +41,29 @@ function _() {
 	return window.MathJax;
 }
 function v(e) {
-	let t = e.includes("\\displaystyle") ? e.replace("\\displaystyle", "").trim() : e;
-	for (let [e, n] of u) if (t.startsWith(e) && t.endsWith(n)) return t.substring(e.length, t.length - n.length);
-	return t;
+	for (let [t, n] of u) if (e.startsWith(t) && e.endsWith(n)) return e.substring(t.length, e.length - n.length);
+	return e;
 }
 function y(e) {
+	return v(e.includes("\\displaystyle") ? e.replace("\\displaystyle", "").trim() : e);
+}
+var b = "mathjax_ignore", x = "mathjax_process";
+function S(e, t) {
+	let n = e.closest(`.${b}, .${x}`);
+	return n !== null && t.contains(n) && !n.classList.contains(x);
+}
+function C(e) {
 	for (let t of e.querySelectorAll("[data-latex]")) {
-		if (t.dataset.mathHandled || t.closest("mjx-container")) continue;
-		let e = t.textContent;
-		e && (t.textContent = `\\(${v(e)}\\)`.replace(l, "\\newline "), t.dataset.mathHandled = "true");
+		if (t.dataset.mathHandled || t.closest("mjx-container") || S(t, e)) continue;
+		let n = t.textContent;
+		n && (t.textContent = `\\(${y(n)}\\)`.replace(l, "\\newline "), t.dataset.mathHandled = "true");
 	}
 }
-function b(e, t) {
+function w(e, t) {
 	for (let t of e.querySelectorAll("math")) if (!t.closest("mjx-assistive-mml")) return !0;
 	return (t ? c : s).test(e.textContent ?? "");
 }
-function x(e) {
+function T(e) {
 	return new Promise((t, n) => {
 		let { useSingleDollar: r = !1, accessibility: s = !0, loadFonts: c = !0, srcUrl: l } = e, u = {
 			loader: {
@@ -67,7 +74,7 @@ function x(e) {
 				typeset: !1,
 				ready: () => {
 					let e = _(), r = e?.startup, i = !!e?.version?.startsWith("4.");
-					i && S(e), r?.defaultReady?.(), i && C(r?.document), Promise.resolve(r?.promise).then(() => t(), n);
+					i && E(e), r?.defaultReady?.(), i && D(r?.document), Promise.resolve(r?.promise).then(() => t(), n);
 				}
 			},
 			tex: { macros: { ...a } },
@@ -85,11 +92,11 @@ function x(e) {
 		d.src = l || i, d.async = !0, d.onerror = () => n(/* @__PURE__ */ Error("Failed to load MathJax")), document.head.appendChild(d);
 	});
 }
-function S(e) {
+function E(e) {
 	let t = e?._?.output?.chtml_ts?.CHTML;
 	t && (t.STYLESHEETID = f);
 }
-function C(e) {
+function D(e) {
 	if (!e) return;
 	let t = /* @__PURE__ */ new WeakSet(), n = (e) => {
 		let n = e.typesetRoot;
@@ -103,32 +110,32 @@ function C(e) {
 		return t && g(t), !1;
 	});
 	let r = e.outputJax?.chtmlStyles;
-	r?.id === p && (r.id = f), E();
+	r?.id === p && (r.id = f), A();
 }
-function w(e) {
+function O(e) {
 	return e instanceof HTMLStyleElement && m.includes(e.id);
 }
-function T(e) {
+function k(e) {
 	n("foreign-output-stylesheet", `another MathJax added <style id="${e.id}"> to <head>`);
 }
-function E() {
-	let e = document.head, t = [...e.children].find(w);
+function A() {
+	let e = document.head, t = [...e.children].find(O);
 	if (t) {
-		T(t);
+		k(t);
 		return;
 	}
 	let n = new MutationObserver((e) => {
 		for (let t of e) {
-			let e = [...t.addedNodes].find(w);
+			let e = [...t.addedNodes].find(O);
 			if (e) {
-				T(e), n.disconnect();
+				k(e), n.disconnect();
 				return;
 			}
 		}
 	});
 	n.observe(e, { childList: !0 });
 }
-function D(e) {
+function j(e) {
 	return new Promise((t, n) => {
 		let r = e.startup ?? {};
 		e.startup = r;
@@ -139,27 +146,27 @@ function D(e) {
 		};
 	});
 }
-function O(e) {
+function M(e) {
 	let t = _();
-	return t ? t.version ? t.startup?.promise ? Promise.resolve(t.startup.promise).then(() => void 0) : Promise.resolve() : D(t) : x(e);
+	return t ? t.version ? t.startup?.promise ? Promise.resolve(t.startup.promise).then(() => void 0) : Promise.resolve() : j(t) : T(e);
 }
-function k(e) {
-	return O(e).then(() => {
+function N(e) {
+	return M(e).then(() => {
 		typeof _()?.typesetPromise != "function" && console.warn("[mathjax-renderer] MathJax on this page has no typesetPromise; math stays untypeset.");
 	});
 }
-function A(e) {
+function P(e) {
 	let t = globalThis, n = t[d];
-	return n || (n = k(e), t[d] = n), n;
+	return n || (n = N(e), t[d] = n), n;
 }
-function j(e = {}) {
+function F(e = {}) {
 	let t = e.useSingleDollar ?? !1;
 	return async (i) => {
 		if (typeof window > "u") return;
 		let a = r();
-		a && n("mathjax-3-global", `window.MathJax is MathJax ${a}`), y(i);
-		let o = A(e);
-		if (!b(i, t)) {
+		a && n("mathjax-3-global", `window.MathJax is MathJax ${a}`), C(i);
+		let o = P(e);
+		if (!w(i, t)) {
 			o.catch(() => {});
 			return;
 		}
@@ -169,4 +176,4 @@ function j(e = {}) {
 	};
 }
 //#endregion
-export { j as t };
+export { F as t };