@pie-players/pie-assessment-toolkit 0.2.7 → 0.2.10

package/dist/components/PieAssessmentToolkit.custom-element.js

@@ -0,0 +1,757 @@
+// @ts-nocheck
+import 'svelte/internal/disclose-version';
+import * as $ from 'svelte/internal/client';
+import { ContextProvider, ContextRoot, requestContext } from "@pie-players/pie-context";
+
+import {
+	assessmentToolkitHostRuntimeContext,
+	assessmentToolkitRuntimeContext
+} from "../context/assessment-toolkit-context.js";
+
+import { connectAssessmentToolkitHostRuntimeContext } from "../context/runtime-context-consumer.js";
+import { ToolkitCoordinator } from "../services/ToolkitCoordinator.js";
+
+import {
+	PIE_ITEM_SESSION_CHANGED_EVENT,
+	PIE_REGISTER_EVENT,
+	PIE_UNREGISTER_EVENT
+} from "../runtime/registration-events.js";
+
+import { dispatchCrossBoundaryEvent } from "../runtime/tool-host-contract.js";
+import { SectionRuntimeEngine } from "../runtime/SectionRuntimeEngine.js";
+import { createRuntimeId, shouldHandleBySourceRuntime } from "../runtime/runtime-event-guards.js";
+
+var root = $.from_html(`<div class="pie-assessment-toolkit-anchor svelte-vpe4u2" aria-hidden="true"></div> <!>`, 1);
+
+const $$css = {
+	hash: 'svelte-vpe4u2',
+	code: '.pie-assessment-toolkit-anchor.svelte-vpe4u2 {display:none;}'
+};
+
+export default function PieAssessmentToolkit($$anchor, $$props) {
+	$.push($$props, true);
+	$.append_styles($$anchor, $$css);
+
+	const runtimeId = createRuntimeId("toolkit");
+	const sectionEngine = new SectionRuntimeEngine();
+	const DEFAULT_ENV = { mode: "gather", role: "student" };
+
+	const DEFAULT_ITEM_PLAYER_BY_TYPE = {
+		iife: "pie-item-player",
+		esm: "pie-item-player",
+		preloaded: "pie-item-player",
+		custom: ""
+	};
+
+	let assessmentId = $.prop($$props, 'assessmentId', 7, ""),
+		section = $.prop($$props, 'section', 7, null),
+		sectionId = $.prop($$props, 'sectionId', 7, ""),
+		attemptId = $.prop($$props, 'attemptId', 7, ""),
+		view = $.prop($$props, 'view', 7, "candidate"),
+		env = $.prop($$props, 'env', 23, () => ({})),
+		lazyInit = $.prop($$props, 'lazyInit', 7, true),
+		tools = $.prop($$props, 'tools', 23, () => ({})),
+		accessibility = $.prop($$props, 'accessibility', 23, () => ({})),
+		player = $.prop($$props, 'player', 7, null),
+		playerType = $.prop($$props, 'playerType', 7, ""),
+		coordinator = $.prop($$props, 'coordinator', 7, null),
+		createSectionController = $.prop($$props, 'createSectionController', 7, null),
+		isolation = $.prop($$props, 'isolation', 7, "inherit");
+
+	let anchor = $.state(null);
+	let ownedCoordinator = $.state(null);
+	let inheritedRuntime = $.state(null);
+	let lastOwnership = $.state(null);
+	let provider = null;
+	let contextRoot = null;
+	let hostRuntimeProvider = null;
+	let hostRuntimeRoot = null;
+	let compositionVersion = $.state(0);
+	let compositionModel = $.state(null);
+	let runtimeError = $.state(null);
+	let lastCompositionRevisionKey = $.state("");
+	let pendingCompositionModel = null;
+	let pendingCompositionEmit = false;
+	let compositionEmitRaf = null;
+
+	function getHostElement() {
+		if (!$.get(anchor)) return null;
+
+		const rootNode = $.get(anchor).getRootNode();
+
+		if (rootNode && "host" in rootNode) {
+			return rootNode.host;
+		}
+
+		return $.get(anchor).parentElement;
+	}
+
+	const host = $.derived(() => getHostElement());
+
+	function emit(name, detail) {
+		if (!$.get(host)) return;
+
+		dispatchCrossBoundaryEvent($.get(host), name, detail);
+	}
+
+	function hashString(input) {
+		let hash = 5381;
+
+		for (let index = 0; index < input.length; index += 1) {
+			hash = (hash << 5) + hash ^ input.charCodeAt(index);
+		}
+
+		return (hash >>> 0).toString(36);
+	}
+
+	function getCompositionRevisionKey(model) {
+		const typed = model || {};
+		const sectionId = typed.section?.identifier || typed.sectionId || "";
+		const currentItemIndex = typeof typed.currentItemIndex === "number" ? typed.currentItemIndex : -1;
+		const renderables = Array.isArray(typed.renderables) ? typed.renderables : [];
+
+		const renderableSignature = renderables.map((entry, index) => {
+			const row = entry || {};
+			const entity = row.entity || {};
+			const entityId = typeof entity.id === "string" && entity.id || `renderable-${index}`;
+			const entityVersion = typeof entity.version === "string" && entity.version || (typeof entity.version === "number" ? String(entity.version) : "") || (typeof entity.config?.version === "string" ? entity.config.version : "");
+
+			return `${entityId}:${entityVersion}`;
+		}).join("|");
+
+		const sessionsByItem = typed.itemSessionsByItemId || {};
+
+		const itemSessionSignature = Object.keys(sessionsByItem).sort((left, right) => left.localeCompare(right)).map((itemId) => {
+			const session = sessionsByItem[itemId];
+			const sessionId = typeof session?.id === "string" && session.id || "";
+			const dataPayload = Array.isArray(session?.data) ? session.data : [];
+			let payloadSignature = "";
+
+			try {
+				payloadSignature = hashString(JSON.stringify(dataPayload));
+			} catch {
+				payloadSignature = String(dataPayload.length);
+			}
+
+			return `${itemId}:${sessionId}:${payloadSignature}`;
+		}).join("|");
+
+		return `${sectionId}|${currentItemIndex}|${renderableSignature}|${itemSessionSignature}`;
+	}
+
+	function isKnownPlayerType(value) {
+		return value === "iife" || value === "esm" || value === "preloaded" || value === "custom";
+	}
+
+	function normalizeItemPlayerConfig(hostPlayer, hostPlayerType) {
+		const typeFromConfig = hostPlayer?.type;
+
+		const rawType = isKnownPlayerType(typeFromConfig)
+			? typeFromConfig
+			: isKnownPlayerType(hostPlayerType)
+				? hostPlayerType
+				: hostPlayer?.tagName ? "custom" : "iife";
+
+		const requestedTagName = hostPlayer?.tagName?.trim();
+
+		if (rawType === "custom" && !requestedTagName) {
+			return {
+				type: "iife",
+				tagName: DEFAULT_ITEM_PLAYER_BY_TYPE.iife,
+				version: undefined,
+				source: undefined,
+				isDefault: true
+			};
+		}
+
+		return {
+			type: rawType,
+			tagName: requestedTagName || DEFAULT_ITEM_PLAYER_BY_TYPE[rawType],
+			version: hostPlayer?.version,
+			source: hostPlayer?.source,
+			isDefault: !hostPlayer && !hostPlayerType
+		};
+	}
+
+	function normalizeEnv(input) {
+		const envValue = input || {} || {};
+		const mode = typeof envValue.mode === "string" && envValue.mode.trim() ? envValue.mode.trim() : DEFAULT_ENV.mode;
+		const role = typeof envValue.role === "string" && envValue.role.trim() ? envValue.role.trim() : DEFAULT_ENV.role;
+
+		return { mode, role };
+	}
+
+	function resolveSectionViewFromEnv(input) {
+		const resolvedEnv = normalizeEnv(input);
+
+		if (resolvedEnv.mode === "author") return "author";
+		if (resolvedEnv.role === "instructor") return "scorer";
+
+		return "candidate";
+	}
+
+	async function createDefaultSectionController() {
+		if (createSectionController()) {
+			return createSectionController()();
+		}
+
+		throw new Error("pie-assessment-toolkit requires createSectionController when no coordinator hook provides one");
+	}
+
+	function buildOwnedCoordinator() {
+		const fallbackAssessmentId = assessmentId() || section()?.identifier || `assessment-${Math.random().toString(16).slice(2)}`;
+
+		return new ToolkitCoordinator({
+			assessmentId: fallbackAssessmentId,
+			lazyInit: lazyInit(),
+			tools: tools(),
+			accessibility: accessibility()
+		});
+	}
+
+	const effectiveCoordinator = $.derived(() => {
+		if (isolation() !== "force" && $.get(inheritedRuntime)?.coordinator) {
+			return $.get(inheritedRuntime).coordinator;
+		}
+
+		return coordinator() || $.get(ownedCoordinator);
+	});
+
+	$.user_effect(() => {
+		if (coordinator()) {
+			if ($.get(ownedCoordinator)) {
+				$.set(ownedCoordinator, null);
+			}
+
+			return;
+		}
+
+		if (isolation() !== "force" && $.get(inheritedRuntime)?.coordinator) {
+			if ($.get(ownedCoordinator)) {
+				$.set(ownedCoordinator, null);
+			}
+
+			return;
+		}
+
+		if (!$.get(ownedCoordinator)) {
+			$.set(ownedCoordinator, buildOwnedCoordinator(), true);
+		}
+	});
+
+	const effectiveAssessmentId = $.derived(() => assessmentId() || $.get(effectiveCoordinator)?.assessmentId || "");
+	const effectiveSectionId = $.derived(() => sectionId() || section()?.identifier || `section-${$.get(effectiveAssessmentId) || "default"}`);
+	const effectiveEnv = $.derived(() => normalizeEnv(env()));
+	const effectiveSectionView = $.derived(() => resolveSectionViewFromEnv($.get(effectiveEnv)));
+	const effectiveItemPlayer = $.derived(() => normalizeItemPlayerConfig(player(), playerType()));
+
+	const runtimeContextValue = $.derived(() => {
+		if (!$.get(effectiveCoordinator)) return null;
+
+		const services = $.get(effectiveCoordinator).getServiceBundle();
+
+		return {
+			toolkitCoordinator: $.get(effectiveCoordinator),
+			toolCoordinator: $.get(effectiveCoordinator).toolCoordinator,
+			ttsService: services.ttsService,
+			highlightCoordinator: services.highlightCoordinator,
+			catalogResolver: services.catalogResolver,
+			elementToolStateStore: services.elementToolStateStore,
+			assessmentId: $.get(effectiveAssessmentId),
+			sectionId: $.get(effectiveSectionId),
+			itemPlayer: $.get(effectiveItemPlayer),
+			reportSessionChanged: (itemId, detail) => {
+				const result = sectionEngine.handleItemSessionChanged(itemId, detail);
+
+				emitNormalizedSessionChanged({ itemId, result, fallbackSession: detail });
+			}
+		};
+	});
+
+	const hostRuntimeContextValue = $.derived(() => {
+		if (!$.get(effectiveCoordinator)) return null;
+
+		return { runtimeId, coordinator: $.get(effectiveCoordinator) };
+	});
+
+	function flushCompositionChanged(nextModel) {
+		const nextRevisionKey = getCompositionRevisionKey(nextModel);
+
+		if (nextRevisionKey === $.get(lastCompositionRevisionKey)) {
+			return;
+		}
+
+		$.set(lastCompositionRevisionKey, nextRevisionKey, true);
+		$.set(compositionVersion, $.get(compositionVersion) + 1);
+		$.set(compositionModel, nextModel, true);
+
+		emit("composition-changed", {
+			composition: $.get(compositionModel),
+			version: $.get(compositionVersion)
+		});
+	}
+
+	function emitCompositionChanged(nextModel) {
+		pendingCompositionModel = nextModel ?? sectionEngine.getCompositionModel();
+
+		if (pendingCompositionEmit) return;
+
+		pendingCompositionEmit = true;
+
+		const flush = () => {
+			pendingCompositionEmit = false;
+			compositionEmitRaf = null;
+			flushCompositionChanged(pendingCompositionModel);
+		};
+
+		if (typeof window !== "undefined" && typeof window.requestAnimationFrame === "function") {
+			compositionEmitRaf = window.requestAnimationFrame(flush);
+
+			return;
+		}
+
+		queueMicrotask(flush);
+	}
+
+	function emitNormalizedSessionChanged(args) {
+		const normalized = args.result?.eventDetail || args.fallbackSession;
+
+		emit("session-changed", {
+			...normalized,
+			itemId: args.itemId,
+			canonicalItemId: args.canonicalItemId || args.itemId,
+			sourceRuntimeId: runtimeId
+		});
+	}
+
+	function isLocalToCurrentRuntime(eventTarget) {
+		if (!(eventTarget instanceof HTMLElement)) return false;
+
+		const sourceRuntime = requestContext(eventTarget, assessmentToolkitHostRuntimeContext);
+
+		return sourceRuntime?.runtimeId === runtimeId;
+	}
+
+	$.user_effect(() => {
+		if (!$.get(host)) return;
+
+		if (isolation() === "force") {
+			$.set(inheritedRuntime, null);
+
+			return;
+		}
+
+		return connectAssessmentToolkitHostRuntimeContext($.get(host), (value) => {
+			if (value.runtimeId === runtimeId) {
+				return;
+			}
+
+			$.set(inheritedRuntime, value, true);
+		});
+	});
+
+	$.user_effect(() => {
+		const parentRuntimeId = isolation() !== "force" && $.get(inheritedRuntime) ? $.get(inheritedRuntime).runtimeId : null;
+		const ownership = parentRuntimeId ? "inherited" : "owned";
+
+		if (ownership !== $.get(lastOwnership)) {
+			$.set(lastOwnership, ownership, true);
+			emit(ownership === "inherited" ? "runtime-inherited" : "runtime-owned", { runtimeId, parentRuntimeId });
+		}
+	});
+
+	$.user_effect(() => {
+		if (!$.get(host) || !$.get(hostRuntimeContextValue)) return;
+
+		hostRuntimeProvider = new ContextProvider($.get(host), {
+			context: assessmentToolkitHostRuntimeContext,
+			initialValue: $.get(hostRuntimeContextValue)
+		});
+
+		hostRuntimeProvider.connect();
+		hostRuntimeRoot = new ContextRoot($.get(host));
+		hostRuntimeRoot.attach();
+
+		return () => {
+			hostRuntimeRoot?.detach();
+			hostRuntimeRoot = null;
+			hostRuntimeProvider?.disconnect();
+			hostRuntimeProvider = null;
+		};
+	});
+
+	$.user_effect(() => {
+		if (!$.get(hostRuntimeContextValue)) return;
+
+		hostRuntimeProvider?.setValue($.get(hostRuntimeContextValue));
+	});
+
+	$.user_effect(() => {
+		if (!$.get(host)) return;
+
+		$.get(host).setAttribute("data-item-player-type", $.get(effectiveItemPlayer).type);
+		$.get(host).setAttribute("data-item-player-tag", $.get(effectiveItemPlayer).tagName);
+		$.get(host).setAttribute("data-env-mode", String($.get(effectiveEnv)?.mode || ""));
+		$.get(host).setAttribute("data-env-role", String($.get(effectiveEnv)?.role || ""));
+	});
+
+	$.user_effect(() => {
+		if (!$.get(host) || !$.get(runtimeContextValue)) return;
+
+		provider = new ContextProvider($.get(host), {
+			context: assessmentToolkitRuntimeContext,
+			initialValue: $.get(runtimeContextValue)
+		});
+
+		provider.connect();
+		contextRoot = new ContextRoot($.get(host));
+		contextRoot.attach();
+
+		return () => {
+			contextRoot?.detach();
+			contextRoot = null;
+			provider?.disconnect();
+			provider = null;
+		};
+	});
+
+	$.user_effect(() => {
+		if ($.get(runtimeContextValue)) {
+			provider?.setValue($.get(runtimeContextValue));
+		}
+	});
+
+	$.user_effect(() => {
+		if (!section() || !$.get(effectiveCoordinator)) return;
+
+		let cancelled = false;
+
+		void sectionEngine.initialize({
+			coordinator: $.get(effectiveCoordinator),
+			section: section(),
+			sectionId: $.get(effectiveSectionId),
+			assessmentId: $.get(effectiveAssessmentId),
+			attemptId: attemptId() || undefined,
+			view: $.get(effectiveSectionView),
+			createDefaultController: createDefaultSectionController,
+			onCompositionChanged: (nextComposition) => {
+				if (cancelled) return;
+
+				emitCompositionChanged(nextComposition);
+			}
+		}).then(() => {
+			if (cancelled) return;
+
+			emit("toolkit-ready", {
+				runtimeId,
+				assessmentId: $.get(effectiveAssessmentId),
+				sectionId: $.get(effectiveSectionId),
+				itemPlayer: $.get(effectiveItemPlayer),
+				coordinator: $.get(effectiveCoordinator)
+			});
+
+			emit("section-ready", { sectionId: $.get(effectiveSectionId) });
+		}).catch((error) => {
+			$.set(runtimeError, error, true);
+			emit("runtime-error", { runtimeId, error });
+		});
+
+		return () => {
+			cancelled = true;
+		};
+	});
+
+	$.user_effect(() => {
+		if (!$.get(host)) return;
+
+		const localHost = $.get(host);
+
+		const onRegister = (event) => {
+			if (!isLocalToCurrentRuntime(event.target)) return;
+
+			const detail = event.detail;
+
+			if (!detail?.element || !detail?.itemId) return;
+
+			const changed = sectionEngine.register(detail);
+
+			if (changed) emitCompositionChanged();
+		};
+
+		const onUnregister = (event) => {
+			if (!isLocalToCurrentRuntime(event.target)) return;
+
+			const detail = event.detail;
+			const changed = detail?.element ? sectionEngine.unregister(detail.element) : false;
+
+			if (changed) emitCompositionChanged();
+		};
+
+		const onItemSessionChanged = (event) => {
+			if (!isLocalToCurrentRuntime(event.target)) return;
+
+			const detail = event.detail;
+
+			if (!detail?.itemId) return;
+			if (!shouldHandleBySourceRuntime(detail.sourceRuntimeId, runtimeId)) return;
+
+			const result = sectionEngine.handleItemSessionChanged(detail.itemId, detail.session);
+
+			emitNormalizedSessionChanged({
+				itemId: detail.itemId,
+				canonicalItemId: detail.canonicalItemId,
+				result,
+				fallbackSession: detail.session
+			});
+		};
+
+		localHost.addEventListener(PIE_REGISTER_EVENT, onRegister);
+		localHost.addEventListener(PIE_UNREGISTER_EVENT, onUnregister);
+		localHost.addEventListener(PIE_ITEM_SESSION_CHANGED_EVENT, onItemSessionChanged);
+
+		return () => {
+			localHost.removeEventListener(PIE_REGISTER_EVENT, onRegister);
+			localHost.removeEventListener(PIE_UNREGISTER_EVENT, onUnregister);
+			localHost.removeEventListener(PIE_ITEM_SESSION_CHANGED_EVENT, onItemSessionChanged);
+		};
+	});
+
+	async function waitUntilReady() {
+		if (!$.get(effectiveCoordinator)) {
+			throw new Error("Coordinator not initialized");
+		}
+
+		await $.get(effectiveCoordinator).waitUntilReady();
+	}
+
+	function getServiceBundle() {
+		if (!$.get(effectiveCoordinator)) {
+			throw new Error("Coordinator not initialized");
+		}
+
+		return $.get(effectiveCoordinator).getServiceBundle();
+	}
+
+	function setHooks(hooks) {
+		if (!$.get(effectiveCoordinator)) {
+			throw new Error("Coordinator not initialized");
+		}
+
+		$.get(effectiveCoordinator).setHooks(hooks);
+	}
+
+	function navigateToItem(index) {
+		return sectionEngine.navigateToItem(index);
+	}
+
+	function getCompositionModel() {
+		return sectionEngine.getCompositionModel();
+	}
+
+	function getItemPlayerConfig() {
+		return $.get(effectiveItemPlayer);
+	}
+
+	async function persist() {
+		await sectionEngine.persist();
+	}
+
+	async function hydrate() {
+		await sectionEngine.hydrate();
+	}
+
+	$.user_effect(() => {
+		return () => {
+			if (compositionEmitRaf !== null && typeof window !== "undefined") {
+				window.cancelAnimationFrame(compositionEmitRaf);
+				compositionEmitRaf = null;
+			}
+
+			pendingCompositionEmit = false;
+
+			void sectionEngine.dispose().catch((error) => {
+				$.set(runtimeError, error, true);
+			});
+		};
+	});
+
+	var $$exports = {
+		waitUntilReady,
+		getServiceBundle,
+		setHooks,
+		navigateToItem,
+		getCompositionModel,
+		getItemPlayerConfig,
+		persist,
+		hydrate,
+		get assessmentId() {
+			return assessmentId();
+		},
+
+		set assessmentId($$value) {
+			assessmentId($$value);
+			$.flush();
+		},
+
+		get section() {
+			return section();
+		},
+
+		set section($$value) {
+			section($$value);
+			$.flush();
+		},
+
+		get sectionId() {
+			return sectionId();
+		},
+
+		set sectionId($$value) {
+			sectionId($$value);
+			$.flush();
+		},
+
+		get attemptId() {
+			return attemptId();
+		},
+
+		set attemptId($$value) {
+			attemptId($$value);
+			$.flush();
+		},
+
+		get view() {
+			return view();
+		},
+
+		set view($$value) {
+			view($$value);
+			$.flush();
+		},
+
+		get env() {
+			return env();
+		},
+
+		set env($$value) {
+			env($$value);
+			$.flush();
+		},
+
+		get lazyInit() {
+			return lazyInit();
+		},
+
+		set lazyInit($$value) {
+			lazyInit($$value);
+			$.flush();
+		},
+
+		get tools() {
+			return tools();
+		},
+
+		set tools($$value) {
+			tools($$value);
+			$.flush();
+		},
+
+		get accessibility() {
+			return accessibility();
+		},
+
+		set accessibility($$value) {
+			accessibility($$value);
+			$.flush();
+		},
+
+		get player() {
+			return player();
+		},
+
+		set player($$value) {
+			player($$value);
+			$.flush();
+		},
+
+		get playerType() {
+			return playerType();
+		},
+
+		set playerType($$value) {
+			playerType($$value);
+			$.flush();
+		},
+
+		get coordinator() {
+			return coordinator();
+		},
+
+		set coordinator($$value) {
+			coordinator($$value);
+			$.flush();
+		},
+
+		get createSectionController() {
+			return createSectionController();
+		},
+
+		set createSectionController($$value) {
+			createSectionController($$value);
+			$.flush();
+		},
+
+		get isolation() {
+			return isolation();
+		},
+
+		set isolation($$value) {
+			isolation($$value);
+			$.flush();
+		}
+	};
+
+	var fragment = root();
+	var div = $.first_child(fragment);
+
+	$.bind_this(div, ($$value) => $.set(anchor, $$value), () => $.get(anchor));
+
+	var node = $.sibling(div, 2);
+
+	$.slot(node, $$props, 'default', {}, null);
+	$.append($$anchor, fragment);
+
+	return $.pop($$exports);
+}
+
+customElements.define('pie-assessment-toolkit', $.create_custom_element(
+	PieAssessmentToolkit,
+	{
+		assessmentId: { attribute: 'assessment-id', type: 'String' },
+		section: { attribute: 'section', type: 'Object' },
+		sectionId: { attribute: 'section-id', type: 'String' },
+		attemptId: { attribute: 'attempt-id', type: 'String' },
+		view: { attribute: 'view', type: 'String' },
+		env: { attribute: 'env', type: 'Object' },
+		lazyInit: { attribute: 'lazy-init', type: 'Boolean' },
+		tools: { attribute: 'tools', type: 'Object' },
+		accessibility: { attribute: 'accessibility', type: 'Object' },
+		player: { attribute: 'player', type: 'Object' },
+		playerType: { attribute: 'player-type', type: 'String' },
+		coordinator: { type: 'Object' },
+		createSectionController: { type: 'Object' },
+		isolation: { attribute: 'isolation', type: 'String' }
+	},
+	['default'],
+	[
+		'waitUntilReady',
+		'getServiceBundle',
+		'setHooks',
+		'navigateToItem',
+		'getCompositionModel',
+		'getItemPlayerConfig',
+		'persist',
+		'hydrate'
+	],
+	{ mode: 'open' }
+));