@pie-element/complex-rubric 7.1.2-next.3 → 7.1.2-next.31

package/dist/browser/{delivery-A_7EWNQT.js → delivery-C6gj3H-c.js}

@@ -1,19 +1,20 @@
-import { $ as e, B as t, G as n, J as r, K as i, L as a, Q as o, R as s, U as c, Y as l, at as u, ct as d, dt as f, et as p, ft as m, ht as h, it as g, lt as _, mt as v, ot as ee, pt as y, q as te, rt as ne, tt as b, ut as re, z as x } from "./private-tags-BTGKqp_N.js";
-import * as S from "react";
-import C from "react";
-import { jsx as w, jsxs as T } from "react/jsx-runtime";
-import { createRoot as E } from "react-dom/client";
+import { i as e } from "./rolldown-runtime-CWhphoD1.js";
+import { Ct as t, E as n, Et as r, L as i, O as a, R as o, Tt as s, X as c, Y as l, Z as u, b as d, c as f, ct as p, ft as m, ht as h, kt as g, l as _, nt as v, o as y, s as b, st as ee, vt as x, w as S, wt as te, xt as C } from "./private-tags-CNPDeXZI.js";
+import * as w from "react";
+import T from "react";
+import { jsx as E, jsxs as D } from "react/jsx-runtime";
+import { createRoot as O } from "react-dom/client";
 //#region ../rubric/dist/delivery/main.js
-var D = /* @__PURE__ */ h(v(), 1);
-function O(e) {
+var k = /* @__PURE__ */ e(g(), 1);
+function A(e) {
 	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
 }
-function k(e, t) {
-	return !e || O(e) ? e : O(e.default) ? e.default : t && O(e[t]) ? e[t] : t && O(e[t]?.default) ? e[t].default : e;
+function j(e, t) {
+	return !e || A(e) ? e : A(e.default) ? e.default : t && A(e[t]) ? e[t] : t && A(e[t]?.default) ? e[t].default : e;
 }
-var ie = k(c, "UiLayout") || k(ae.UiLayout, "UiLayout"), A = t, j = A.default, ae = j && typeof j == "object" ? j : A, oe = u(ie)({
-	color: r.text(),
-	backgroundColor: r.background(),
+var ne = j(d, "UiLayout") || j(re.UiLayout, "UiLayout"), M = _, N = M.default, re = N && typeof N == "object" ? N : M, ie = m(ne)({
+	color: i.text(),
+	backgroundColor: i.background(),
 	"&:not(.MathJax) table": { borderCollapse: "collapse" },
 	"&:not(.MathJax) table td, &:not(.MathJax) table th": {
 		padding: "8px 12px",
@@ -24,38 +25,38 @@ var ie = k(c, "UiLayout") || k(ae.UiLayout, "UiLayout"), A = t, j = A.default, a
 		marginTop: 0,
 		lineHeight: "normal"
 	}
-}), M = u(p)({
+}), P = m(u)({
 	display: "flex",
 	flexDirection: "column",
 	alignItems: "flex-start",
 	padding: "12px 0px"
-}), N = u("div")({ color: r.text() }), se = u("h3")({
-	color: r.text(),
+}), F = m("div")({ color: i.text() }), ae = m("h3")({
+	color: i.text(),
 	fontSize: "16px",
 	fontWeight: "700",
 	margin: 0,
 	paddingBottom: "6px"
-}), ce = u("h4")({
-	color: r.text(),
+}), oe = m("h4")({
+	color: i.text(),
 	fontSize: "16px",
 	fontWeight: "normal",
 	margin: 0,
 	paddingBottom: "6px"
-}), le = u("h2")(({ theme: e }) => ({
+}), se = m("h2")(({ theme: e }) => ({
 	display: "flex",
 	alignItems: "center",
 	cursor: "pointer",
 	userSelect: "none",
 	fontSize: e.typography.fontSize,
 	fontWeight: "500",
-	color: r.tertiary(),
+	color: i.tertiary(),
 	margin: 0
-})), ue = u("span")({
+})), ce = m("span")({
 	display: "inline-flex",
 	transition: "transform 0.2s",
 	marginLeft: 2,
 	alignSelf: "center"
-}), P = u("h2")({
+}), le = m("h2")({
 	position: "absolute",
 	width: "1px",
 	height: "1px",
@@ -65,12 +66,12 @@ var ie = k(c, "UiLayout") || k(ae.UiLayout, "UiLayout"), A = t, j = A.default, a
 	clip: "rect(0,0,0,0)",
 	border: 0,
 	whiteSpace: "nowrap"
-}), F = D.default.shape({
-	excludeZero: D.default.bool,
-	points: D.default.arrayOf(D.default.string),
-	sampleAnswers: D.default.arrayOf(D.default.string),
-	animationsDisabled: D.default.bool
-}), I = class extends C.Component {
+}), I = k.default.shape({
+	excludeZero: k.default.bool,
+	points: k.default.arrayOf(k.default.string),
+	sampleAnswers: k.default.arrayOf(k.default.string),
+	animationsDisabled: k.default.bool
+}), L = class extends T.Component {
 	dudUrl = "javascript:;";
 	constructor(e) {
 		super(e), this.state = {
@@ -79,28 +80,28 @@ var ie = k(c, "UiLayout") || k(ae.UiLayout, "UiLayout"), A = t, j = A.default, a
 		}, this.toggleRubric = this.toggleRubric.bind(this);
 	}
 	static propTypes = {
-		model: D.default.object.isRequired,
-		animationsDisabled: D.default.bool,
-		value: F
+		model: k.default.object.isRequired,
+		animationsDisabled: k.default.bool,
+		value: I
 	};
 	toggleRubric() {
 		this.setState({ rubricOpen: !this.state.rubricOpen }), this.setState({ linkPrefix: this.state.rubricOpen ? "Show" : "Hide" });
 	}
-	shouldRenderPoint = (e, t) => t.excludeZero ? e !== 0 : !0;
+	shouldRenderPoint = (e, t) => !t.excludeZero || e !== 0;
 	render() {
-		let { model: t, value: n } = this.props, { animationsDisabled: r } = this.props;
-		if (r ||= n.animationsDisabled, n && n.points) {
-			let { extraCSSRules: i } = t || {}, { points: a, sampleAnswers: o } = n, s = /* @__PURE__ */ w(e, {
+		let { model: e, value: t } = this.props, { animationsDisabled: n } = this.props;
+		if (n ||= t.animationsDisabled, t && t.points) {
+			let { extraCSSRules: r } = e || {}, { points: i, sampleAnswers: a } = t, s = /* @__PURE__ */ E(c, {
 				component: "nav",
-				children: a.slice(0).reverse().map((e, t) => {
-					t = a.length - t - 1;
-					let r = n.excludeZero ? t + 1 : t;
-					return /* @__PURE__ */ T(C.Fragment, { children: [/* @__PURE__ */ T(M, { children: [/* @__PURE__ */ w(se, { children: r === 1 ? `${r} PT` : `${r} PTS` }), /* @__PURE__ */ w(N, { dangerouslySetInnerHTML: { __html: e } })] }, `P${t}`), o && o[t] && /* @__PURE__ */ T(M, { children: [/* @__PURE__ */ w(ce, { children: "Sample Answer" }), /* @__PURE__ */ w(N, { dangerouslySetInnerHTML: { __html: o[t] } })] }, `S${t}`)] }, t);
+				children: i.slice(0).reverse().map((e, n) => {
+					n = i.length - n - 1;
+					let r = t.excludeZero ? n + 1 : n;
+					return /* @__PURE__ */ D(T.Fragment, { children: [/* @__PURE__ */ D(P, { children: [/* @__PURE__ */ E(ae, { children: r === 1 ? `${r} PT` : `${r} PTS` }), /* @__PURE__ */ E(F, { dangerouslySetInnerHTML: { __html: e } })] }, `P${n}`), a && a[n] && /* @__PURE__ */ D(P, { children: [/* @__PURE__ */ E(oe, { children: "Sample Answer" }), /* @__PURE__ */ E(F, { dangerouslySetInnerHTML: { __html: a[n] } })] }, `S${n}`)] }, n);
 				})
 			});
-			return /* @__PURE__ */ T(oe, {
-				extraCSSRules: i,
-				children: [/* @__PURE__ */ w(P, { children: "Rubric" }), r ? s : /* @__PURE__ */ T(C.Fragment, { children: [/* @__PURE__ */ T(le, {
+			return /* @__PURE__ */ D(ie, {
+				extraCSSRules: r,
+				children: [/* @__PURE__ */ E(le, { children: "Rubric" }), n ? s : /* @__PURE__ */ D(T.Fragment, { children: [/* @__PURE__ */ D(se, {
 					id: "rubric-toggle",
 					tabIndex: 0,
 					role: "button",
@@ -112,9 +113,9 @@ var ie = k(c, "UiLayout") || k(ae.UiLayout, "UiLayout"), A = t, j = A.default, a
 					children: [
 						this.state.linkPrefix,
 						" Rubric",
-						/* @__PURE__ */ w(ue, {
+						/* @__PURE__ */ E(ce, {
 							"aria-hidden": "true",
-							children: this.state.rubricOpen ? /* @__PURE__ */ w("svg", {
+							children: this.state.rubricOpen ? /* @__PURE__ */ E("svg", {
 								width: "20",
 								height: "20",
 								viewBox: "0 0 24 24",
@@ -123,8 +124,8 @@ var ie = k(c, "UiLayout") || k(ae.UiLayout, "UiLayout"), A = t, j = A.default, a
 								strokeWidth: "2",
 								strokeLinecap: "round",
 								strokeLinejoin: "round",
-								children: /* @__PURE__ */ w("polyline", { points: "18 15 12 9 6 15" })
-							}) : /* @__PURE__ */ w("svg", {
+								children: /* @__PURE__ */ E("polyline", { points: "18 15 12 9 6 15" })
+							}) : /* @__PURE__ */ E("svg", {
 								width: "20",
 								height: "20",
 								viewBox: "0 0 24 24",
@@ -133,11 +134,11 @@ var ie = k(c, "UiLayout") || k(ae.UiLayout, "UiLayout"), A = t, j = A.default, a
 								strokeWidth: "2",
 								strokeLinecap: "round",
 								strokeLinejoin: "round",
-								children: /* @__PURE__ */ w("polyline", { points: "6 9 12 15 18 9" })
+								children: /* @__PURE__ */ E("polyline", { points: "6 9 12 15 18 9" })
 							})
 						})
 					]
-				}), /* @__PURE__ */ w(l, {
+				}), /* @__PURE__ */ E(o, {
 					in: this.state.rubricOpen,
 					timeout: {
 						enter: 225,
@@ -148,9 +149,28 @@ var ie = k(c, "UiLayout") || k(ae.UiLayout, "UiLayout"), A = t, j = A.default, a
 			});
 		} else return null;
 	}
-}, L = /* @__PURE__ */ h(te(), 1), R = class extends HTMLElement {
+}, R = /* @__PURE__ */ e(a(), 1), z = class extends HTMLElement {
 	constructor() {
-		super(), L.log("constructor called"), this.onModelChanged = this.onModelChanged.bind(this), this._root = null;
+		super(), R.log("constructor called"), this.onModelChanged = this.onModelChanged.bind(this), this._root = null, this._mathObserver = null, this._mathRenderPending = !1;
+	}
+	_scheduleMathRender = () => {
+		this._mathRenderPending || (this._mathRenderPending = !0, requestAnimationFrame(() => {
+			this._mathObserver && this._mathObserver.disconnect(), n(this), this._mathRenderPending = !1, setTimeout(() => {
+				this._mathObserver && this._mathObserver.observe(this, {
+					childList: !0,
+					subtree: !0
+				});
+			}, 50);
+		}));
+	};
+	_initMathObserver() {
+		this._mathObserver || (this._mathObserver = new MutationObserver(this._scheduleMathRender), this._mathObserver.observe(this, {
+			childList: !0,
+			subtree: !0
+		}));
+	}
+	_disconnectMathObserver() {
+		this._mathObserver &&= (this._mathObserver.disconnect(), null);
 	}
 	set model(e) {
 		this._model = e, this._render();
@@ -159,31 +179,30 @@ var ie = k(c, "UiLayout") || k(ae.UiLayout, "UiLayout"), A = t, j = A.default, a
 		this._model = e, this._render();
 	}
 	connectedCallback() {
-		this._render();
+		this._initMathObserver(), this._render();
 	}
 	_render() {
 		if (this._model) {
-			let e = C.createElement(I, { value: this._model });
-			this._root ||= E(this), this._root.render(e), queueMicrotask(() => {
-				i(this);
-			});
+			this._initMathObserver();
+			let e = T.createElement(L, { value: this._model });
+			this._root ||= O(this), this._root.render(e);
 		}
 	}
 	disconnectedCallback() {
-		this._root && this._root.unmount();
+		this._disconnectMathObserver(), this._root &&= (this._root.unmount(), null);
 	}
-}, z = u("td")({
-	color: r.primaryDark(),
+}, B = m("td")({
+	color: i.primaryDark(),
 	verticalAlign: "middle"
-}), B = u("div")({
-	color: r.secondaryBackground(),
+}), V = m("div")({
+	color: i.secondaryBackground(),
 	textAlign: "center"
-}), V = (e) => {
+}), H = (e) => {
 	let { trait: t, traitIndex: n, scaleIndex: r, showStandards: i, showDescription: a, scorePointsValues: o } = e, { name: s, standards: c, scorePointsDescriptors: l, description: u } = t || {};
-	return /* @__PURE__ */ T("tr", { children: [
-		/* @__PURE__ */ w(z, { children: /* @__PURE__ */ w("div", { dangerouslySetInnerHTML: { __html: s } }) }),
-		i ? /* @__PURE__ */ w("td", { children: /* @__PURE__ */ w("div", { dangerouslySetInnerHTML: { __html: c.join(",") } }) }) : null,
-		a ? /* @__PURE__ */ w("td", { children: /* @__PURE__ */ w("div", { dangerouslySetInnerHTML: { __html: u } }) }) : null,
+	return /* @__PURE__ */ D("tr", { children: [
+		/* @__PURE__ */ E(B, { children: /* @__PURE__ */ E("div", { dangerouslySetInnerHTML: { __html: s } }) }),
+		i ? /* @__PURE__ */ E("td", { children: /* @__PURE__ */ E("div", { dangerouslySetInnerHTML: { __html: c.join(",") } }) }) : null,
+		a ? /* @__PURE__ */ E("td", { children: /* @__PURE__ */ E("div", { dangerouslySetInnerHTML: { __html: u } }) }) : null,
 		o && o.map((e, t) => {
 			let n;
 			try {
@@ -191,36 +210,36 @@ var ie = k(c, "UiLayout") || k(ae.UiLayout, "UiLayout"), A = t, j = A.default, a
 			} catch {
 				n = "";
 			}
-			return /* @__PURE__ */ w("td", { children: n ? /* @__PURE__ */ w("div", { dangerouslySetInnerHTML: { __html: n } }) : /* @__PURE__ */ w(B, { dangerouslySetInnerHTML: { __html: "No Description" } }) }, `table-cell-${t}`);
+			return /* @__PURE__ */ E("td", { children: n ? /* @__PURE__ */ E("div", { dangerouslySetInnerHTML: { __html: n } }) : /* @__PURE__ */ E(V, { dangerouslySetInnerHTML: { __html: "No Description" } }) }, `table-cell-${t}`);
 		})
 	] }, `scale-${r}-trait-${n}`);
 };
-V.propTypes = {
-	showStandards: D.default.bool,
-	showDescription: D.default.bool,
-	scorePointsValues: D.default.arrayOf(D.default.number),
-	scaleIndex: D.default.number,
-	traitIndex: D.default.number,
-	trait: D.default.shape({
-		name: D.default.string,
-		standards: D.default.arrayOf(D.default.string),
-		scorePointsDescriptors: D.default.arrayOf(D.default.string),
-		description: D.default.string
+H.propTypes = {
+	showStandards: k.default.bool,
+	showDescription: k.default.bool,
+	scorePointsValues: k.default.arrayOf(k.default.number),
+	scaleIndex: k.default.number,
+	traitIndex: k.default.number,
+	trait: k.default.shape({
+		name: k.default.string,
+		standards: k.default.arrayOf(k.default.string),
+		scorePointsDescriptors: k.default.arrayOf(k.default.string),
+		description: k.default.string
 	})
 };
 //#endregion
 //#region ../multi-trait-rubric/dist/delivery/scale.js
-var H = u("div")({
+var U = m("div")({
 	display: "flex",
 	position: "relative"
-}), U = u("div")({
+}), ue = m("div")({
 	width: "100%",
 	overflow: "auto"
-}), de = u("table")(({ theme: e }) => ({
+}), de = m("table")(({ theme: e }) => ({
 	borderSpacing: 0,
 	marginBottom: e.spacing(2),
 	borderRadius: "4px",
-	color: r.text(),
+	color: i.text(),
 	fontSize: e.typography.fontSize,
 	lineHeight: "16px",
 	overflow: "unset",
@@ -231,7 +250,7 @@ var H = u("div")({
 	"& th": {
 		padding: e.spacing(2),
 		textAlign: "left",
-		backgroundColor: r.secondaryBackground(),
+		backgroundColor: i.secondaryBackground(),
 		verticalAlign: "bottom"
 	},
 	"& th div": { width: "200px" },
@@ -240,12 +259,12 @@ var H = u("div")({
 		padding: `${e.spacing(2)} ${e.spacing(1)}`,
 		verticalAlign: "top"
 	}
-})), fe = u("table")({ "& td": {
+})), fe = m("table")({ "& td": {
 	border: 0,
 	padding: 0,
 	textAlign: "center",
 	minWidth: "200px"
-} }), pe = u("div")({ marginBottom: "4px" }), me = u("td")({ fontWeight: "normal" }), W = ({ show: e, onClick: t, extraStyles: n, children: r }) => /* @__PURE__ */ w("div", {
+} }), pe = m("div")({ marginBottom: "4px" }), me = m("td")({ fontWeight: "normal" }), W = ({ show: e, onClick: t, extraStyles: n, children: r }) => /* @__PURE__ */ E("div", {
 	style: {
 		height: "calc(100% - 1px)",
 		top: "1px",
@@ -262,12 +281,12 @@ var H = u("div")({
 	children: r
 });
 W.propTypes = {
-	show: D.default.bool,
-	onClick: D.default.func,
-	extraStyles: D.default.object,
-	children: D.default.object
+	show: k.default.bool,
+	onClick: k.default.func,
+	extraStyles: k.default.object,
+	children: k.default.object
 };
-var G = class extends C.Component {
+var G = class extends T.Component {
 	state = {};
 	componentDidMount() {
 		this.tableWrapper && this.tableWrapper.offsetWidth < this.tableWrapper.scrollWidth && this.setState({ showRight: !0 });
@@ -286,9 +305,9 @@ var G = class extends C.Component {
 		});
 	};
 	render() {
-		let { showRight: e, showLeft: t } = this.state, { scale: n, scaleIndex: i, showDescription: a, showPointsLabels: o, showStandards: c, arrowsDisabled: l } = this.props, { excludeZero: u, maxPoints: d, traitLabel: f, traits: p, scorePointsLabels: m } = n || {}, h = [], g, _, v;
+		let { showRight: e, showLeft: t } = this.state, { scale: n, scaleIndex: r, showDescription: a, showPointsLabels: o, showStandards: s, arrowsDisabled: c } = this.props, { excludeZero: l, maxPoints: u, traitLabel: d, traits: p, scorePointsLabels: m } = n || {}, h = [], g, _, v;
 		try {
-			for (let e = d; +(e >= u); --e) h.push(e);
+			for (let e = u; +(e >= l); --e) h.push(e);
 			let { traitStandards: e, traitDescriptions: t } = p.reduce((e, t) => ({
 				traitStandards: [...e.traitStandards, ...t.standards || []],
 				traitDescriptions: [...e.traitDescriptions, ...t.description || []]
@@ -296,21 +315,21 @@ var G = class extends C.Component {
 				traitStandards: [],
 				traitDescriptions: []
 			});
-			g = a && t.length, _ = o && m.length, v = c && e.length;
+			g = a && t.length, _ = o && m.length, v = s && e.length;
 		} catch {
 			g = !1, _ = !1, v = !1;
 		}
-		return /* @__PURE__ */ T(H, { children: [
-			/* @__PURE__ */ w(W, {
-				show: t && !l,
+		return /* @__PURE__ */ D(U, { children: [
+			/* @__PURE__ */ E(W, {
+				show: t && !c,
 				onClick: this.scrollLeft,
 				extraStyles: {
 					left: 0,
-					background: `linear-gradient(to right, white, ${r.background()})`
+					background: `linear-gradient(to right, white, ${i.background()})`
 				},
-				children: /* @__PURE__ */ w(x, {})
+				children: /* @__PURE__ */ E(f, {})
 			}),
-			/* @__PURE__ */ T(U, {
+			/* @__PURE__ */ D(ue, {
 				ref: (e) => {
 					this.tableWrapper = e;
 				},
@@ -320,10 +339,10 @@ var G = class extends C.Component {
 						showLeft: this.tableWrapper.scrollLeft < this.tableWrapper.scrollWidth && this.tableWrapper.scrollLeft > 0
 					});
 				},
-				children: [l && (e || t) ? /* @__PURE__ */ w("div", { children: "The item is too large to fit in print mode." }) : null, /* @__PURE__ */ T(de, { children: [/* @__PURE__ */ w("thead", { children: /* @__PURE__ */ T("tr", { children: [
-					/* @__PURE__ */ w("th", { children: /* @__PURE__ */ w("div", { dangerouslySetInnerHTML: { __html: f } }) }),
-					v ? /* @__PURE__ */ w("th", { children: /* @__PURE__ */ w("div", { children: "Standard(s)" }) }) : null,
-					g ? /* @__PURE__ */ w("th", { children: /* @__PURE__ */ w("div", { children: "Description" }) }) : null,
+				children: [c && (e || t) ? /* @__PURE__ */ E("div", { children: "The item is too large to fit in print mode." }) : null, /* @__PURE__ */ D(de, { children: [/* @__PURE__ */ E("thead", { children: /* @__PURE__ */ D("tr", { children: [
+					/* @__PURE__ */ E("th", { children: /* @__PURE__ */ E("div", { dangerouslySetInnerHTML: { __html: d } }) }),
+					v ? /* @__PURE__ */ E("th", { children: /* @__PURE__ */ E("div", { children: "Standard(s)" }) }) : null,
+					g ? /* @__PURE__ */ E("th", { children: /* @__PURE__ */ E("div", { children: "Description" }) }) : null,
 					h && h.map((e, t) => {
 						let n = "";
 						try {
@@ -331,55 +350,55 @@ var G = class extends C.Component {
 						} catch {
 							n = "";
 						}
-						return /* @__PURE__ */ w("th", { children: /* @__PURE__ */ w(fe, { children: /* @__PURE__ */ T("thead", { children: [_ ? /* @__PURE__ */ w("tr", { children: /* @__PURE__ */ w("td", { children: /* @__PURE__ */ w(pe, { dangerouslySetInnerHTML: { __html: n } }) }) }) : null, /* @__PURE__ */ w("tr", { children: /* @__PURE__ */ w(me, { children: e === 1 ? `${e} point` : `${e} points` }) })] }) }) }, `table-header-${t}`);
+						return /* @__PURE__ */ E("th", { children: /* @__PURE__ */ E(fe, { children: /* @__PURE__ */ D("thead", { children: [_ ? /* @__PURE__ */ E("tr", { children: /* @__PURE__ */ E("td", { children: /* @__PURE__ */ E(pe, { dangerouslySetInnerHTML: { __html: n } }) }) }) : null, /* @__PURE__ */ E("tr", { children: /* @__PURE__ */ E(me, { children: e === 1 ? `${e} point` : `${e} points` }) })] }) }) }, `table-header-${t}`);
 					})
-				] }) }), /* @__PURE__ */ w("tbody", { children: p && p.map((e, t) => /* @__PURE__ */ w(V, {
+				] }) }), /* @__PURE__ */ E("tbody", { children: p && p.map((e, t) => /* @__PURE__ */ E(H, {
 					trait: e,
 					traitIndex: t,
 					showDescription: !!g,
 					showStandards: !!v,
-					scaleIndex: i,
+					scaleIndex: r,
 					scorePointsValues: h,
-					excludeZero: u
-				}, `trait_${i}_${t}`)) })] }, `scale-${i}`)]
+					excludeZero: l
+				}, `trait_${r}_${t}`)) })] }, `scale-${r}`)]
 			}),
-			/* @__PURE__ */ w(W, {
-				show: e && !l,
+			/* @__PURE__ */ E(W, {
+				show: e && !c,
 				onClick: this.scrollRight,
 				extraStyles: {
 					right: 0,
-					background: `linear-gradient(to left, white, ${r.background()})`
+					background: `linear-gradient(to left, white, ${i.background()})`
 				},
-				children: /* @__PURE__ */ w(s, {})
+				children: /* @__PURE__ */ E(b, {})
 			})
 		] });
 	}
 };
 G.propTypes = {
-	scaleIndex: D.default.number,
-	scale: D.default.shape({
-		excludeZero: D.default.bool,
-		maxPoints: D.default.number,
-		scorePointsLabels: D.default.arrayOf(D.default.string),
-		traitLabel: D.default.string,
-		traits: D.default.arrayOf(D.default.shape({
-			name: D.default.string,
-			standards: D.default.arrayOf(D.default.string),
-			scorePointsDescriptors: D.default.arrayOf(D.default.string),
-			description: D.default.string
+	scaleIndex: k.default.number,
+	scale: k.default.shape({
+		excludeZero: k.default.bool,
+		maxPoints: k.default.number,
+		scorePointsLabels: k.default.arrayOf(k.default.string),
+		traitLabel: k.default.string,
+		traits: k.default.arrayOf(k.default.shape({
+			name: k.default.string,
+			standards: k.default.arrayOf(k.default.string),
+			scorePointsDescriptors: k.default.arrayOf(k.default.string),
+			description: k.default.string
 		}))
 	}),
-	showPointsLabels: D.default.bool,
-	showDescription: D.default.bool,
-	showStandards: D.default.bool,
-	arrowsDisabled: D.default.bool
+	showPointsLabels: k.default.bool,
+	showDescription: k.default.bool,
+	showStandards: k.default.bool,
+	arrowsDisabled: k.default.bool
 };
 //#endregion
 //#region ../../../node_modules/.bun/@mui+material@7.3.11+eb26afe407ed7030/node_modules/@mui/material/esm/Link/linkClasses.js
 function he(e) {
-	return f("MuiLink", e);
+	return te("MuiLink", e);
 }
-var ge = re("MuiLink", [
+var ge = t("MuiLink", [
 	"root",
 	"underlineNone",
 	"underlineHover",
@@ -389,11 +408,11 @@ var ge = re("MuiLink", [
 ]), _e = ({ theme: e, ownerState: t }) => {
 	let n = t.color;
 	if ("colorSpace" in e && e.colorSpace) {
-		let r = y(e, `palette.${n}.main`) || y(e, `palette.${n}`) || t.color;
-		return e.alpha(r, .4);
+		let i = r(e, `palette.${n}.main`) || r(e, `palette.${n}`) || t.color;
+		return e.alpha(i, .4);
 	}
-	let r = y(e, `palette.${n}.main`, !1) || y(e, `palette.${n}`, !1) || t.color, i = y(e, `palette.${n}.mainChannel`) || y(e, `palette.${n}Channel`);
-	return "vars" in e && i ? `rgba(${i} / 0.4)` : _(r, .4);
+	let i = r(e, `palette.${n}.main`, !1) || r(e, `palette.${n}`, !1) || t.color, a = r(e, `palette.${n}.mainChannel`) || r(e, `palette.${n}Channel`);
+	return "vars" in e && a ? `rgba(${a} / 0.4)` : C(i, .4);
 }, K = {
 	primary: !0,
 	secondary: !0,
@@ -406,24 +425,24 @@ var ge = re("MuiLink", [
 	textDisabled: !0
 }, q = (e) => {
 	let { classes: t, component: n, focusVisible: r, underline: i } = e;
-	return d({ root: [
+	return x({ root: [
 		"root",
-		`underline${o(i)}`,
+		`underline${l(i)}`,
 		n === "button" && "button",
 		r && "focusVisible"
 	] }, he, t);
-}, ve = u(a, {
+}, ve = m(y, {
 	name: "MuiLink",
 	slot: "Root",
 	overridesResolver: (e, t) => {
 		let { ownerState: n } = e;
 		return [
 			t.root,
-			t[`underline${o(n.underline)}`],
+			t[`underline${l(n.underline)}`],
 			n.component === "button" && t.button
 		];
 	}
-})(g(({ theme: e }) => ({ variants: [
+})(p(({ theme: e }) => ({ variants: [
 	{
 		props: { underline: "none" },
 		style: { textDecoration: "none" }
@@ -450,7 +469,7 @@ var ge = re("MuiLink", [
 		props: ({ underline: e, ownerState: t }) => e === "always" && t.color === "inherit",
 		style: e.colorSpace ? { textDecorationColor: e.alpha("currentColor", .4) } : null
 	},
-	...Object.entries(e.palette).filter(n()).map(([t]) => ({
+	...Object.entries(e.palette).filter(S()).map(([t]) => ({
 		props: {
 			underline: "always",
 			color: t
@@ -498,39 +517,39 @@ var ge = re("MuiLink", [
 			[`&.${ge.focusVisible}`]: { outline: "auto" }
 		}
 	}
-] }))), ye = /*#__PURE__*/ S.forwardRef(function(e, t) {
-	let n = ne({
+] }))), ye = /*#__PURE__*/ w.forwardRef(function(e, t) {
+	let n = ee({
 		props: e,
 		name: "MuiLink"
-	}), r = ee(), { className: i, color: a = "primary", component: o = "a", onBlur: s, onFocus: c, TypographyClasses: l, underline: u = "always", variant: d = "inherit", sx: f, ...p } = n, [h, g] = S.useState(!1), _ = (e) => {
-		b(e.target) || g(!1), s && s(e);
-	}, v = (e) => {
-		b(e.target) && g(!0), c && c(e);
-	}, y = {
+	}), r = h(), { className: i, color: a = "primary", component: o = "a", onBlur: c, onFocus: l, TypographyClasses: u, underline: d = "always", variant: f = "inherit", sx: p, ...m } = n, [g, _] = w.useState(!1), y = (e) => {
+		v(e.target) || _(!1), c && c(e);
+	}, b = (e) => {
+		v(e.target) && _(!0), l && l(e);
+	}, x = {
 		...n,
 		color: a,
 		component: o,
-		focusVisible: h,
-		underline: u,
-		variant: d
+		focusVisible: g,
+		underline: d,
+		variant: f
 	};
-	return /*#__PURE__*/ w(ve, {
+	return /*#__PURE__*/ E(ve, {
 		color: a,
-		className: m(q(y).root, i),
-		classes: l,
+		className: s(q(x).root, i),
+		classes: u,
 		component: o,
-		onBlur: _,
-		onFocus: v,
+		onBlur: y,
+		onFocus: b,
 		ref: t,
-		ownerState: y,
-		variant: d,
-		...p,
-		sx: [...K[a] === void 0 ? [{ color: a }] : [], ...Array.isArray(f) ? f : [f]],
+		ownerState: x,
+		variant: f,
+		...m,
+		sx: [...K[a] === void 0 ? [{ color: a }] : [], ...Array.isArray(p) ? p : [p]],
 		style: {
-			...p.style,
-			...u === "always" && a !== "inherit" && !K[a] && { "--Link-underlineColor": _e({
+			...m.style,
+			...d === "always" && a !== "inherit" && !K[a] && { "--Link-underlineColor": _e({
 				theme: r,
-				ownerState: y
+				ownerState: x
 			}) }
 		}
 	});
@@ -543,7 +562,7 @@ function J(e) {
 function Y(e, t) {
 	return !e || J(e) ? e : J(e.default) ? e.default : t && J(e[t]) ? e[t] : t && J(e[t]?.default) ? e[t].default : e;
 }
-var X = Y(c, "UiLayout") || Y(be.UiLayout, "UiLayout"), Z = t, Q = Z.default, be = Q && typeof Q == "object" ? Q : Z, $ = class extends C.Component {
+var X = Y(d, "UiLayout") || Y(be.UiLayout, "UiLayout"), Z = _, Q = Z.default, be = Q && typeof Q == "object" ? Q : Z, $ = class extends T.Component {
 	constructor(e) {
 		super(e), this.state = {
 			rubricOpen: !1,
@@ -554,39 +573,39 @@ var X = Y(c, "UiLayout") || Y(be.UiLayout, "UiLayout"), Z = t, Q = Z.default, be
 		this.setState({ rubricOpen: !this.state.rubricOpen }), this.setState({ linkPrefix: this.state.rubricOpen ? "Show" : "Hide" });
 	}
 	render() {
-		let { model: e } = this.props, { animationsDisabled: t } = this.props, { extraCSSRules: n, halfScoring: i, scales: a, visible: o, pointLabels: s, description: c, standards: u, arrowsDisabled: d } = e || {};
-		if (t ||= e.animationsDisabled, !a || !o) return null;
-		let f = /* @__PURE__ */ T(X, {
+		let { model: e } = this.props, { animationsDisabled: t } = this.props, { extraCSSRules: n, halfScoring: r, scales: a, visible: s, pointLabels: c, description: l, standards: u, arrowsDisabled: d } = e || {};
+		if (t ||= e.animationsDisabled, !a || !s) return null;
+		let f = /* @__PURE__ */ D(X, {
 			extraCSSRules: n,
 			style: {
 				fontFamily: "Cerebri Sans",
-				color: r.text(),
-				backgroundColor: r.background()
+				color: i.text(),
+				backgroundColor: i.background()
 			},
-			children: [i ? /* @__PURE__ */ w("div", {
+			children: [r ? /* @__PURE__ */ E("div", {
 				style: { marginBottom: "16px" },
 				children: "* Half-point or in-between scores are permitted under this rubric."
-			}) : null, a.map((e, t) => /* @__PURE__ */ w(G, {
+			}) : null, a.map((e, t) => /* @__PURE__ */ E(G, {
 				scale: e,
 				scaleIndex: t,
-				showPointsLabels: s,
-				showDescription: c,
+				showPointsLabels: c,
+				showDescription: l,
 				showStandards: u,
 				arrowsDisabled: d
 			}, `scale_${t}`))]
 		});
-		return t ? f : /* @__PURE__ */ T(X, {
+		return t ? f : /* @__PURE__ */ D(X, {
 			extraCSSRules: n,
 			style: {
-				color: r.text(),
-				backgroundColor: r.background()
+				color: i.text(),
+				backgroundColor: i.background()
 			},
-			children: [/* @__PURE__ */ T(ye, {
-				style: { backgroundColor: r.background() },
+			children: [/* @__PURE__ */ D(ye, {
+				style: { backgroundColor: i.background() },
 				href: this.dudUrl,
 				onClick: this.toggleRubric,
 				children: [this.state.linkPrefix, " Rubric"]
-			}), /* @__PURE__ */ w(l, {
+			}), /* @__PURE__ */ E(o, {
 				style: { marginTop: "16px" },
 				in: this.state.rubricOpen,
 				timeout: {
@@ -599,27 +618,27 @@ var X = Y(c, "UiLayout") || Y(be.UiLayout, "UiLayout"), Z = t, Q = Z.default, be
 	}
 };
 $.propTypes = {
-	model: D.default.shape({
-		halfScoring: D.default.bool,
-		scales: D.default.arrayOf(D.default.shape({
-			excludeZero: D.default.bool,
-			maxPoints: D.default.number,
-			scorePointsLabels: D.default.arrayOf(D.default.string),
-			traitLabel: D.default.string,
-			traits: D.default.arrayOf(D.default.shape({
-				name: D.default.string,
-				description: D.default.string,
-				scorePointsDescriptors: D.default.arrayOf(D.default.string),
-				standards: D.default.arrayOf(D.default.string)
+	model: k.default.shape({
+		halfScoring: k.default.bool,
+		scales: k.default.arrayOf(k.default.shape({
+			excludeZero: k.default.bool,
+			maxPoints: k.default.number,
+			scorePointsLabels: k.default.arrayOf(k.default.string),
+			traitLabel: k.default.string,
+			traits: k.default.arrayOf(k.default.shape({
+				name: k.default.string,
+				description: k.default.string,
+				scorePointsDescriptors: k.default.arrayOf(k.default.string),
+				standards: k.default.arrayOf(k.default.string)
 			}))
 		})),
-		visible: D.default.bool,
-		pointLabels: D.default.bool,
-		description: D.default.bool,
-		standards: D.default.bool,
-		animationsDisabled: D.default.bool
+		visible: k.default.bool,
+		pointLabels: k.default.bool,
+		description: k.default.bool,
+		standards: k.default.bool,
+		animationsDisabled: k.default.bool
 	}),
-	animationsDisabled: D.default.bool
+	animationsDisabled: k.default.bool
 };
 //#endregion
 //#region ../../shared/player-events/dist/index.js
@@ -658,7 +677,26 @@ var xe = class e extends CustomEvent {
 //#region ../multi-trait-rubric/dist/delivery/index.js
 var Se = class extends HTMLElement {
 	constructor() {
-		super(), this._model = {}, this._session = null, this._root = null;
+		super(), this._model = {}, this._session = null, this._root = null, this._mathObserver = null, this._mathRenderPending = !1;
+	}
+	_scheduleMathRender = () => {
+		this._mathRenderPending || (this._mathRenderPending = !0, requestAnimationFrame(() => {
+			this._mathObserver && this._mathObserver.disconnect(), n(this), this._mathRenderPending = !1, setTimeout(() => {
+				this._mathObserver && this._mathObserver.observe(this, {
+					childList: !0,
+					subtree: !0
+				});
+			}, 50);
+		}));
+	};
+	_initMathObserver() {
+		this._mathObserver || (this._mathObserver = new MutationObserver(this._scheduleMathRender), this._mathObserver.observe(this, {
+			childList: !0,
+			subtree: !0
+		}));
+	}
+	_disconnectMathObserver() {
+		this._mathObserver &&= (this._mathObserver.disconnect(), null);
 	}
 	set model(e) {
 		this._model = e, this.dispatchEvent(new xe(this.tagName.toLowerCase(), this._session, !!this._model)), this._render();
@@ -670,22 +708,21 @@ var Se = class extends HTMLElement {
 		return this._session;
 	}
 	connectedCallback() {
-		this._render();
+		this._initMathObserver(), this._render();
 	}
 	_render() {
-		let e = C.createElement($, {
+		this._initMathObserver();
+		let e = T.createElement($, {
 			model: this._model,
 			session: this._session
 		});
-		this._root ||= E(this), this._root.render(e), queueMicrotask(() => {
-			i(this);
-		});
+		this._root ||= O(this), this._root.render(e);
 	}
 	disconnectedCallback() {
-		this._root && this._root.unmount();
+		this._disconnectMathObserver(), this._root &&= (this._root.unmount(), null);
 	}
 };
 //#endregion
-export { R as n, Se as t };
+export { z as n, Se as t };
 
-//# sourceMappingURL=delivery-A_7EWNQT.js.map
+//# sourceMappingURL=delivery-C6gj3H-c.js.map