@pie-element/graphing 10.1.1 → 10.1.2-next.1

package/dist/controller/defaults.d.ts

@@ -0,0 +1,59 @@
+/**
+ * @synced-from pie-elements/packages/graphing/controller/src/defaults.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+declare const _default: {
+    answers: {
+        correctAnswer: {
+            name: string;
+            marks: never[];
+        };
+    };
+    arrows: {
+        left: boolean;
+        right: boolean;
+        up: boolean;
+        down: boolean;
+    };
+    backgroundMarks: never[];
+    coordinatesOnHover: boolean;
+    defaultGridConfiguration: number;
+    domain: {
+        min: number;
+        max: number;
+        step: number;
+        labelStep: number;
+        axisLabel: string;
+    };
+    graph: {
+        width: number;
+        height: number;
+    };
+    includeAxes: boolean;
+    labels: {};
+    labelsEnabled: boolean;
+    padding: boolean;
+    prompt: string;
+    promptEnabled: boolean;
+    range: {
+        min: number;
+        max: number;
+        step: number;
+        labelStep: number;
+        axisLabel: string;
+    };
+    rationale: string;
+    rationaleEnabled: boolean;
+    standardGrid: boolean;
+    studentInstructionsEnabled: boolean;
+    teacherInstructions: string;
+    teacherInstructionsEnabled: boolean;
+    title: string;
+    titleEnabled: boolean;
+    toolbarTools: string[];
+};
+export default _default;

package/dist/controller/defaults.js

@@ -0,0 +1,61 @@
+var e = {
+	answers: { correctAnswer: {
+		name: "Correct Answer",
+		marks: []
+	} },
+	arrows: {
+		left: !0,
+		right: !0,
+		up: !0,
+		down: !0
+	},
+	backgroundMarks: [],
+	coordinatesOnHover: !1,
+	defaultGridConfiguration: 0,
+	domain: {
+		min: -5,
+		max: 5,
+		step: 1,
+		labelStep: 1,
+		axisLabel: "x"
+	},
+	graph: {
+		width: 500,
+		height: 500
+	},
+	includeAxes: !0,
+	labels: {},
+	labelsEnabled: !0,
+	padding: !0,
+	prompt: "",
+	promptEnabled: !0,
+	range: {
+		min: -5,
+		max: 5,
+		step: 1,
+		labelStep: 1,
+		axisLabel: "y"
+	},
+	rationale: "",
+	rationaleEnabled: !0,
+	standardGrid: !1,
+	studentInstructionsEnabled: !0,
+	teacherInstructions: "",
+	teacherInstructionsEnabled: !0,
+	title: "",
+	titleEnabled: !0,
+	toolbarTools: [
+		"circle",
+		"line",
+		"label",
+		"parabola",
+		"point",
+		"polygon",
+		"ray",
+		"segment",
+		"sine",
+		"vector"
+	]
+};
+//#endregion
+export { e as default };

package/dist/controller/index.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @synced-from pie-elements/packages/graphing/controller/src/index.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+export declare const compareMarks: (mark1: any, mark2: any) => boolean;
+export declare const comparLabelMarks: (mark1: any, mark2: any) => "correct" | "incorrect";
+export declare const getAnswerCorrected: ({ sessionAnswers, marks: correctAnswers, withPointLabel }: {
+    sessionAnswers: any;
+    marks: any;
+    withPointLabel?: boolean | undefined;
+}) => any[];
+export declare const getBestAnswer: (question: any, session: any, env?: {}) => {
+    bestScore: number;
+    bestScoreAnswerKey: null;
+    answersCorrected: any[];
+    foundOneSolution: boolean;
+};
+export declare const normalize: (question: any) => any;
+export declare function model(question: any, session: any, env: any): Promise<unknown>;
+/**
+* Generates detailed trace log for scoring evaluation
+* @param {Object} model - the question model
+* @param {Object} session - the student session
+* @param {Object} env - the environment
+* @returns {Array} traceLog - array of trace messages
+*/
+export declare const getLogTrace: (question: any, session: any, env: any) => string[];
+export declare function outcome(question: any, session: any, env?: {}): Promise<unknown>;
+export declare const createCorrectResponseSession: (question: any, env: any) => Promise<unknown>;
+export declare const validate: (model?: {}, config?: {}) => {};

package/dist/controller/index.js

@@ -0,0 +1,179 @@
+import e from "./defaults.js";
+import { equalMarks as t, equalPointWithLabel as n, sortedAnswers as r } from "./utils.js";
+import i from "debug";
+import { cloneDeep as a, isEmpty as o, uniqWith as s } from "@pie-element/shared-lodash";
+import { partialScoring as c } from "@pie-element/shared-controller-utils";
+//#region src/controller/index.ts
+var l = i("@pie-element:graphing:controller"), u = () => ({
+	point: [],
+	segment: [],
+	line: [],
+	ray: [],
+	vector: [],
+	polygon: [],
+	circle: [],
+	sine: [],
+	parabola: [],
+	absolute: [],
+	exponential: []
+}), d = {
+	incorrect: 0,
+	correct: 1,
+	missing: 2
+}, f = (e, n) => !!(e && n && e.type === n.type && t[e.type] && t[e.type](e, n)), p = (e, t) => e.label === t.label ? "correct" : "incorrect", m = ({ sessionAnswers: e, marks: t, withPointLabel: r = !1 }) => {
+	e ||= [], t ||= [];
+	let i = a(e).reduce((e, i) => {
+		let a = t.find((e) => f(i, e));
+		return i.correctness = (a && i.type === "point" && r ? n(i, a) : a) ? "correct" : "incorrect", a && (i.correctnesslabel = p(i, a), i.correctlabel = a.label ? a.label : "", i.label = i.label ? i.label : ""), [...e, i];
+	}, []), o = a(t).reduce((t, n) => e.find((e) => f(n, e)) ? t : [...t, {
+		...n,
+		correctness: "missing"
+	}], []);
+	return [...i, ...o];
+}, h = ({ scoringType: e, env: t }) => {
+	let n = e;
+	return e && (n = e === "partial scoring"), c.enabled({ partialScoring: n }, t);
+}, g = (e, t, n = {}) => {
+	let { answers: i = {}, scoringType: c } = e || {}, { answer: l } = t || {};
+	Object.entries(i || {}).forEach(([e, t]) => i[e] = {
+		...t,
+		marks: t?.marks.filter((e) => !e.building)
+	}), l ||= [], l = l.filter((e) => !e.building), i = o(i) ? { correctAnswer: u() } : {
+		correctAnswer: i.correctAnswer,
+		...r(i)
+	};
+	let d = h({
+		scoringType: c,
+		env: n
+	}), p = s(l, f);
+	return Object.entries(i).reduce((e, t) => {
+		let n = t[0], { marks: r } = t[1] || {};
+		if (!r || !r.length) return e;
+		let i = m({
+			sessionAnswers: p,
+			marks: r
+		}), a = m({
+			sessionAnswers: p,
+			marks: r,
+			withPointLabel: !0
+		}), o = a.filter((e) => e.correctness === "correct"), s = a.filter((e) => e.correctness !== "missing"), c = r.length, l = o.length;
+		return s.length > c && (l -= s.length - c), l < 0 && (l = 0), (l / c > e.bestScore || !e.foundOneSolution) && (d ? e.bestScore = parseFloat((l / c).toFixed(2)) : e.bestScore = Math.floor(l / c), e.bestScoreAnswerKey = n, e.answersCorrected = i, e.foundOneSolution = !0), e;
+	}, {
+		bestScore: 0,
+		bestScoreAnswerKey: null,
+		answersCorrected: a(p).map((e) => ({
+			...e,
+			correctness: "incorrect"
+		})),
+		foundOneSolution: !1
+	});
+}, _ = (t) => ({
+	...e,
+	...t
+});
+function v(e, t, n) {
+	return new Promise((r) => {
+		let i = _(e);
+		t ??= {};
+		let { defaultTool: a, extraCSSRules: s, prompt: c, promptEnabled: u, graph: f, answers: p, toolbarTools: m, ...h } = i || {}, { arrows: v } = i, { mode: y, role: b } = n || {};
+		typeof v == "boolean" && (v = v ? {
+			left: !0,
+			right: !0,
+			up: !0,
+			down: !0
+		} : {
+			left: !1,
+			right: !1,
+			up: !1,
+			down: !1
+		});
+		let x = (m || []).filter((e) => e !== "label"), S = a || x.length && x[0] || "", C = {
+			...h,
+			answers: p,
+			arrows: v,
+			defaultTool: S,
+			disabled: n.mode !== "gather",
+			prompt: u ? c : null,
+			rationale: null,
+			size: f,
+			showKeyLegend: n.mode === "evaluate",
+			showToggle: n.mode === "evaluate" && !o(p) && p.correctAnswer && p.correctAnswer.marks && !o(p.correctAnswer.marks),
+			teacherInstructions: null,
+			toolbarTools: m,
+			extraCSSRules: s
+		};
+		if (b === "instructor" && (y === "view" || y === "evaluate")) {
+			let { rationale: e, rationaleEnabled: t, teacherInstructions: n, teacherInstructionsEnabled: r } = i || {};
+			C.rationale = t ? e : null, C.teacherInstructions = r ? n : null;
+		}
+		if (y === "evaluate") if (!o(p) && p.correctAnswer && p.correctAnswer.marks && !o(p.correctAnswer.marks)) {
+			let { answersCorrected: e, bestScoreAnswerKey: r, bestScore: a } = g(i, t, n);
+			C.answersCorrected = e.sort((e, t) => d[e.correctness] - d[t.correctness]), C.correctResponse = r ? (p[r] || {}).marks : [], C.showToggle = C.showToggle && a !== 1;
+		} else C.answersCorrected = t && t.answer || [], C.correctResponse = [];
+		l("base: ", C), r(C);
+	});
+}
+var y = (e, t, n) => {
+	let r = [], { answers: i = {}, scoringType: a } = e || {}, o = t && t.answer || [];
+	if (!o.length) return ["Student did not interact with the graph."];
+	r.push(`Student added ${o.length} object(s) to the graph.`);
+	let s = h({
+		scoringType: a,
+		env: n
+	}), { answersCorrected: c, bestScore: l, bestScoreAnswerKey: u } = g(e, t, n), d = u && i[u] && i[u].marks || [], f = 0, p = 0, m = 0;
+	for (let e = 0; e < c.length; e++) {
+		let t = c[e].correctness;
+		t === "correct" ? f++ : t === "incorrect" ? p++ : t === "missing" && m++;
+	}
+	if (f > 0 && r.push(`Correct objects: ${f}.`), p > 0 && r.push(`Incorrect objects: ${p}.`), m > 0 && r.push(`Missing required objects: ${m}.`), c.forEach((e, t) => {
+		let n = e.type || "graph object", i = e.label ? `'${e.label}'` : "", a = `with index ${t + 1}`;
+		e.correctness === "correct" && r.push(`${n.charAt(0).toUpperCase() + n.slice(1)} ${i || a} is correct.`), e.correctness === "incorrect" && r.push(`${n.charAt(0).toUpperCase() + n.slice(1)} ${i || a} does not match the expected ${n}.`), e.correctness === "missing" && r.push(`Expected ${n} ${i || a} was not plotted by the student.`);
+	}), o.length > d.length) {
+		let e = o.length - d.length;
+		r.push(`${e} extra object(s) were plotted and are penalized in scoring.`);
+	}
+	return s ? r.push("Score calculated using partial scoring.") : r.push("Score calculated using all-or-nothing scoring."), r.push(`Final score: ${l}.`), r;
+};
+function b(e, t, n = {}) {
+	return new Promise((r) => {
+		(!t || o(t)) && r({
+			score: 0,
+			empty: !0,
+			logTrace: ["Student did not interact with the graph."]
+		}), (n.mode !== "evaluate" || o(e.answers) || e.answers && e.answers.correctAnswer && o(e.answers.correctAnswer.marks)) && r({
+			score: 0,
+			empty: !0,
+			logTrace: ["Student did not interact with the graph."]
+		});
+		let { bestScore: i } = g(e, t, n);
+		r({
+			score: i,
+			empty: !1,
+			logTrace: y(e, t, n)
+		});
+	});
+}
+var x = (e, t) => new Promise((n) => {
+	if (t.mode !== "evaluate" && t.role === "instructor") {
+		let { answers: t } = e || {}, r = [];
+		t && Object.values(t) && (r = (t.correctAnswer || Object.values(t)[0] || {}).marks || []), n({
+			answer: r,
+			id: "1"
+		});
+	} else n(null);
+}), S = (e) => (e || "").replace(/(<(?!img|iframe|source)([^>]+)>)/gi, ""), C = (e = {}, t = {}) => {
+	let { answers: n, toolbarTools: r } = e, i = {}, a = {};
+	return (r || []).filter((e) => e !== "label").length || (i.toolbarToolsError = "There should be at least 1 tool defined."), [
+		"teacherInstructions",
+		"prompt",
+		"rationale"
+	].forEach((n) => {
+		t[n]?.required && !S(e[n]) && (i[n] = "This field is required.");
+	}), Object.entries(n || {}).forEach(([e, t]) => {
+		t.marks.length || (a[e] = "At least 1 graph object should be defined."), t.marks.length > 0 && t.marks.forEach((t) => {
+			t.building && (a[e] = "At least 1 graph object is not correctly defined.");
+		});
+	}), o(a) || (i.correctAnswerErrors = a), i;
+};
+//#endregion
+export { p as comparLabelMarks, f as compareMarks, x as createCorrectResponseSession, m as getAnswerCorrected, g as getBestAnswer, y as getLogTrace, v as model, _ as normalize, b as outcome, C as validate };

package/dist/controller/utils.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @synced-from pie-elements/packages/graphing/controller/src/utils.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+export declare const equalPoint: (A: any, B: any) => boolean;
+export declare const equalPointWithLabel: (A: any, B: any) => boolean;
+export declare const equalSegment: (segment1: any, segment2: any) => boolean;
+export declare const equalVector: (vector1: any, vector2: any) => boolean;
+export declare const sortedAnswers: (answers: any) => {};
+export declare const equalLine: (line1: any, line2: any) => boolean;
+export declare const equalRay: (ray1: any, ray2: any) => boolean;
+export declare const constructSegmentsFromPoints: (points: any) => any;
+export declare const removeDuplicateSegments: (segments: any) => unknown[];
+export declare const removeInvalidSegments: (segments: any) => any;
+export declare const equalPolygon: (poly1: any, poly2: any) => boolean;
+export declare const equalCircle: (c1: any, c2: any) => boolean;
+export declare const equalSine: (sine1: any, sine2: any) => boolean;
+export declare const equalParabola: (p1: any, p2: any) => boolean;
+export declare const equalAbsolute: (p1: any, p2: any) => boolean;
+export declare const equalExponential: (p1: any, p2: any) => boolean;
+export declare const equalMarks: {
+    circle: (sessAnswer: any, mark: any) => boolean;
+    line: (sessAnswer: any, mark: any) => boolean;
+    parabola: (sessAnswer: any, mark: any) => boolean;
+    absolute: (sessAnswer: any, mark: any) => boolean;
+    exponential: (sessAnswer: any, mark: any) => boolean;
+    point: (sessAnswer: any, mark: any) => boolean;
+    polygon: (sessAnswer: any, poly: any) => boolean;
+    ray: (sessAnswer: any, mark: any) => boolean;
+    segment: (sessAnswer: any, mark: any) => boolean;
+    sine: (sessAnswer: any, mark: any) => boolean;
+    vector: (sessAnswer: any, mark: any) => boolean;
+};

package/dist/controller/utils.js

@@ -0,0 +1,111 @@
+import { differenceWith as e, isEqual as t, uniq as n, uniqWith as r } from "@pie-element/shared-lodash";
+import { getAmplitudeAndFreq as i, pointsToABC as a, pointsToABForExponential as o, pointsToAForAbsolute as s } from "@pie-lib/graphing-utils";
+//#region src/controller/utils.ts
+var c = (e, n) => (e = { ...e }, n = { ...n }, t(e.x, n.x) && t(e.y, n.y)), l = (e, n) => {
+	let r = !0;
+	return e = { ...e }, n = { ...n }, (e.label || n.label) && (r = t(e.label, n.label)), t(e.x, n.x) && t(e.y, n.y) && r;
+}, u = (e, n) => t(e.from, n.from) && t(e.to, n.to) || t(e.to, n.from) && t(e.from, n.to), d = (e, n) => t(e.from, n.from) && t(e.to, n.to), f = (e) => Object.keys(e || {}).sort().reduce((t, n) => (n !== "correctAnswer" && (t[n] = e[n]), t), {}), p = (e) => {
+	e = {
+		...e,
+		to: { ...e.to },
+		from: { ...e.from }
+	};
+	let t = e.from.x, n = e.from.y, r = e.to.x, i = e.to.y;
+	return {
+		a: i - n,
+		b: t - r,
+		c: r * n - t * i
+	};
+}, m = (e) => Math.round(e * 1e4) / 1e4, h = (e, t) => {
+	let { a: r, b: i, c: a } = p(e), { a: o, b: s, c } = p(t), l = [];
+	if (o !== 0) l.push(m(r / o));
+	else if (r !== o) return !1;
+	if (s !== 0) l.push(m(i / s));
+	else if (i !== s) return !1;
+	if (c !== 0) l.push(m(a / c));
+	else if (a !== c) return !1;
+	return n(l).length === 1;
+}, g = (e, t) => {
+	e = {
+		...e,
+		to: { ...e.to },
+		from: { ...e.from }
+	}, t = {
+		...t,
+		to: { ...t.to },
+		from: { ...t.from }
+	};
+	let n = (e.to.y - e.from.y) / (e.to.x - e.from.x), r = (t.to.y - t.from.y) / (t.to.x - t.from.x), i = Math.atan2(e.to.y - e.from.y, e.to.x - e.from.x) * 180 / Math.PI, a = Math.atan2(t.to.y - t.from.y, t.to.x - t.from.x) * 180 / Math.PI;
+	return n === r && e.from.x === t.from.x && e.from.y === t.from.y && i === a;
+}, _ = (e) => (e || []).map((t, n) => ({
+	from: t,
+	to: e[(n + 1) % e.length]
+})), v = (e) => (e ||= [], r(e, (e, t) => u(e, t))), y = (e) => (e ||= [], e.filter((e) => !t(e.from, e.to))), b = (t, n) => {
+	let { points: r } = t, { points: i } = n, a = _(r), o = _(i), s = v(y(a)), c = v(y(o)), l = e(s, c, u), d = e(c, s, u);
+	return (!l || !l.length) && (!d || !d.length);
+}, x = (e, n) => {
+	if (e = {
+		...e,
+		root: { ...e.root },
+		edge: { ...e.edge }
+	}, n = {
+		...n,
+		root: { ...n.root },
+		edge: { ...n.edge }
+	}, t(n.edge, e.edge) && t(n.root, e.root)) return !0;
+	let r = Math.sqrt((e.edge.x - e.root.x) ** 2 + (e.edge.y - e.root.y) ** 2), i = Math.sqrt((n.edge.x - n.root.x) ** 2 + (n.edge.y - n.root.y) ** 2);
+	return t(n.root, e.root) && t(r, i);
+}, S = (e, t) => {
+	let n = ({ root: e, edge: t }) => {
+		e = { ...e }, t = { ...t };
+		let { amplitude: n, freq: r } = i(e, t), a = Math.abs(e.y - t.y) * 2, o = Math.abs(e.x - t.x) * 2, s = t.x, c = t.y;
+		for (; s < 0 && o !== 0;) s += o, c = c < e.y ? c + a : c - a;
+		for (; s - o > 0 && o !== 0;) s -= o, c = c < e.y ? c + a : c - a;
+		return {
+			amplitude: m(n),
+			freq: m(r),
+			min: m(t.y < e.y ? t.y : t.y - a),
+			max: m(t.y < e.y ? t.y + a : t.y),
+			edgeAboveZeroX: m(s),
+			edgeAboveZeroY: m(c)
+		};
+	}, r = n(e), a = n(t), { amplitude: o, freq: s, min: c, max: l, edgeAboveZeroX: u, edgeAboveZeroY: d } = r, { amplitude: f, freq: p, min: h, max: g, edgeAboveZeroX: _, edgeAboveZeroY: v } = a;
+	return Math.abs(o) === Math.abs(f) && Math.abs(s) === Math.abs(p) && c === h && l === g && u === _ && d === v;
+}, C = (e, t) => {
+	let { edge: n } = e, { edge: r } = t, { root: i } = e, { root: o } = t;
+	i = { ...i }, o = { ...o };
+	let s = n || { ...i }, c = r || { ...o }, l = {
+		x: i.x - (s.x - i.x),
+		y: s.y
+	}, u = {
+		x: o.x - (c.x - o.x),
+		y: c.y
+	};
+	if (!n || !r) return !1;
+	let { a: d, b: f, c: p } = a(i, n, l), { a: m, b: h, c: g } = a(o, r, u), _ = (e) => Math.round(e * 1e4) / 1e4;
+	return _(d) === _(m) && _(f) === _(h) && _(p) === _(g);
+}, w = (e, n) => {
+	let { edge: r } = e, { edge: i } = n, { root: a } = e, { root: o } = n;
+	a = { ...a }, o = { ...o };
+	let c = r || { ...a }, l = i || { ...o }, u = s(a, c), d = s(o, l);
+	return t(o, a) && t(d, u);
+}, T = (e, n) => {
+	let { edge: r } = e, { edge: i } = n, { root: a } = e, { root: s } = n;
+	a = { ...a }, s = { ...s };
+	let c = r || { ...a }, l = i || { ...s }, { a1: u, b1: d } = o(a, c), { a2: f, b2: p } = o(s, l);
+	return t(f, u) && t(p, d);
+}, E = {
+	circle: (e, t) => x(e, t),
+	line: (e, t) => h(e, t),
+	parabola: (e, t) => C(e, t),
+	absolute: (e, t) => w(e, t),
+	exponential: (e, t) => T(e, t),
+	point: (e, t) => c(e, t),
+	polygon: (e, t) => b(e, t),
+	ray: (e, t) => g(e, t),
+	segment: (e, t) => u(e, t),
+	sine: (e, t) => S(e, t),
+	vector: (e, t) => d(e, t)
+};
+//#endregion
+export { E as equalMarks, l as equalPointWithLabel, f as sortedAnswers };

package/dist/delivery/index.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @synced-from pie-elements/packages/graphing/src/index.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import Main from './main.js';
+export { Main as Component };
+export default class Graphing extends HTMLElement {
+    constructor();
+    set model(m: any);
+    set session(s: any);
+    get session(): any;
+    connectedCallback(): void;
+    isComplete: (answer: any) => boolean;
+    changeAnswers: any;
+    _render(): void;
+    disconnectedCallback(): void;
+}

package/dist/delivery/index.js

@@ -0,0 +1,43 @@
+import e from "./main.js";
+import t from "react";
+import { createRoot as n } from "react-dom/client";
+import { SessionChangedEvent as r } from "@pie-element/shared-player-events";
+import { renderMath as i } from "@pie-element/shared-math-rendering-mathjax";
+//#region src/delivery/index.ts
+var a = class extends HTMLElement {
+	constructor() {
+		super(), this._root = null;
+	}
+	set model(e) {
+		this._model = e, this._render();
+	}
+	set session(e) {
+		this._session = e, this._render();
+	}
+	get session() {
+		return this._session;
+	}
+	connectedCallback() {
+		this._render();
+	}
+	isComplete = (e) => Array.isArray(e) && e.length > 0;
+	changeAnswers = (e) => {
+		this._session.answer = e, this.dispatchEvent(new r(this.tagName.toLowerCase(), this.isComplete(this._session.answer))), this._render();
+	};
+	_render() {
+		if (!this._model || !this._session) return;
+		let r = t.createElement(e, {
+			model: this._model,
+			session: this._session,
+			onAnswersChange: this.changeAnswers
+		});
+		this._root ||= n(this), this._root.render(r), queueMicrotask(() => {
+			i(this);
+		});
+	}
+	disconnectedCallback() {
+		this._root && this._root.unmount();
+	}
+};
+//#endregion
+export { e as Component, a as default };

package/dist/delivery/main.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @synced-from pie-elements/packages/graphing/src/main.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+export declare class Main extends React.Component {
+    static propTypes: {
+        model: PropTypes.Validator<object>;
+        session: PropTypes.Validator<object>;
+        onAnswersChange: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    state: {
+        showingCorrect: boolean;
+    };
+    toggleCorrect: (showingCorrect: any) => void;
+    render(): React.JSX.Element;
+}
+export default Main;

package/dist/delivery/main.js

@@ -0,0 +1,107 @@
+import e from "react";
+import t from "prop-types";
+import { styled as n } from "@mui/material/styles";
+import { GraphContainer as r, KeyLegend as i } from "@pie-lib/graphing";
+import * as a from "@pie-lib/render-ui";
+import { Collapsible as o, PreviewPrompt as s, UiLayout as c, color as l, hasMedia as u, hasText as d } from "@pie-lib/render-ui";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import m from "@pie-lib/correct-answer-toggle";
+//#region src/delivery/main.tsx
+function h(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function g(e, t) {
+	return !e || h(e) ? e : h(e.default) ? e.default : t && h(e[t]) ? e[t] : t && h(e[t]?.default) ? e[t].default : e;
+}
+var _ = g(c, "UiLayout") || g(S.UiLayout, "UiLayout"), v = g(s, "PreviewPrompt") || g(S.PreviewPrompt, "PreviewPrompt"), y = g(o, "Collapsible") || g(S.Collapsible, "Collapsible"), b = a, x = b.default, S = x && typeof x == "object" ? x : b, C = n(_)({
+	color: l.text(),
+	backgroundColor: l.background()
+}), w = n(y)(({ theme: e }) => ({ marginBottom: e.spacing(2) })), T = n(r)(({ theme: e }) => ({
+	marginTop: e.spacing(2),
+	marginBottom: e.spacing(2)
+})), E = class extends e.Component {
+	static propTypes = {
+		model: t.object.isRequired,
+		session: t.object.isRequired,
+		onAnswersChange: t.func
+	};
+	state = { showingCorrect: !1 };
+	toggleCorrect = (e) => this.setState({ showingCorrect: e });
+	render() {
+		let { model: e, onAnswersChange: t, session: n } = this.props, { showingCorrect: r } = this.state, { answer: a } = n || {}, { answersCorrected: o, arrows: s, backgroundMarks: c, coordinatesOnHover: l, correctResponse: h, defaultTool: g, disabled: _, domain: b, extraCSSRules: x, labels: S, labelsEnabled: E, prompt: D, range: O, rationale: k, showKeyLegend: A, showToggle: j, title: M, titleEnabled: N, teacherInstructions: P, toolbarTools: F, language: I } = e || {}, L = e?.size || e?.graph || {}, R = o || a || [], z = F?.includes("label") || !1, B = e.rationale && (d(e.rationale) || u(e.rationale));
+		return /* @__PURE__ */ p(C, {
+			extraCSSRules: x,
+			children: [
+				e.teacherInstructions && (d(e.teacherInstructions) || u(e.teacherInstructions)) && /* @__PURE__ */ f(w, {
+					labels: {
+						hidden: "Show Teacher Instructions",
+						visible: "Hide Teacher Instructions"
+					},
+					children: /* @__PURE__ */ f(v, { prompt: P })
+				}),
+				D && /* @__PURE__ */ f(v, {
+					className: "prompt",
+					prompt: D
+				}),
+				/* @__PURE__ */ f(m, {
+					show: j,
+					toggled: r,
+					onToggle: this.toggleCorrect,
+					language: I
+				}),
+				r && j ? /* @__PURE__ */ f(T, {
+					axesSettings: { includeArrows: s },
+					backgroundMarks: c.filter((e) => !e.building),
+					coordinatesOnHover: l,
+					disabled: !0,
+					disabledLabels: !0,
+					disabledTitle: !0,
+					domain: b,
+					labels: S,
+					marks: h.map((e) => ({
+						...e,
+						correctness: "correct"
+					})),
+					onChangeMarks: t,
+					range: O,
+					showLabels: E,
+					showTitle: N,
+					size: L,
+					title: M,
+					toolbarTools: F,
+					language: I
+				}) : /* @__PURE__ */ f(T, {
+					axesSettings: { includeArrows: s },
+					backgroundMarks: c.filter((e) => !e.building),
+					coordinatesOnHover: l,
+					defaultTool: g,
+					disabled: _,
+					disabledLabels: !0,
+					disabledTitle: !0,
+					domain: b,
+					labels: S,
+					marks: R,
+					onChangeMarks: t,
+					range: O,
+					showLabels: E,
+					showTitle: N,
+					size: L,
+					title: M,
+					toolbarTools: F,
+					language: I,
+					limitLabeling: !0
+				}),
+				A && !r && /* @__PURE__ */ f(i, { isLabelAvailable: z }),
+				B && /* @__PURE__ */ f(y, {
+					labels: {
+						hidden: "Show Rationale",
+						visible: "Hide Rationale"
+					},
+					children: /* @__PURE__ */ f(v, { prompt: k })
+				})
+			]
+		});
+	}
+};
+//#endregion
+export { E as default };