@pie-players/pie-assessment-toolkit 0.2.5 → 0.2.9

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

@@ -0,0 +1,670 @@
+// @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_ITEM_PLAYER_BY_TYPE = {
+		iife: "pie-iife-player",
+		esm: "pie-esm-player",
+		fixed: "pie-fixed-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 lastCompositionSignature = $.state("");
+
+	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 isKnownPlayerType(value) {
+		return value === "iife" || value === "esm" || value === "fixed" || 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
+		};
+	}
+
+	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 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);
+				const normalized = result?.eventDetail || detail;
+
+				emit("session-changed", { ...normalized, sourceRuntimeId: runtimeId });
+			}
+		};
+	});
+
+	const hostRuntimeContextValue = $.derived(() => {
+		if (!$.get(effectiveCoordinator)) return null;
+
+		return { runtimeId, coordinator: $.get(effectiveCoordinator) };
+	});
+
+	function getCompositionSignature(model) {
+		const typed = model;
+		const itemIds = Array.isArray(typed?.items) ? typed.items.map((item) => item?.id || "") : [];
+		const passageIds = Array.isArray(typed?.passages) ? typed.passages.map((item) => item?.id || "") : [];
+
+		const sessionByItem = typed?.itemSessionsByItemId
+			? Object.entries(typed.itemSessionsByItemId).sort(([left], [right]) => left.localeCompare(right)).map(([itemId, session]) => [itemId, JSON.stringify(session ?? null)])
+			: [];
+
+		return JSON.stringify({
+			sectionId: typed?.section?.identifier || typed?.sectionId || "",
+			currentItemIndex: typed?.currentItemIndex ?? -1,
+			itemIds,
+			passageIds,
+			sessionByItem
+		});
+	}
+
+	function emitCompositionChanged() {
+		const nextModel = sectionEngine.getCompositionModel();
+		const signature = getCompositionSignature(nextModel);
+
+		if (signature === $.get(lastCompositionSignature)) {
+			return;
+		}
+
+		$.set(lastCompositionSignature, signature, true);
+		$.set(compositionVersion, $.get(compositionVersion) + 1);
+		$.set(compositionModel, nextModel, true);
+
+		emit("composition-changed", {
+			composition: $.get(compositionModel),
+			version: $.get(compositionVersion)
+		});
+	}
+
+	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(env()?.mode || ""));
+		$.get(host).setAttribute("data-env-role", String(env()?.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: view(),
+			createDefaultController: createDefaultSectionController,
+			onCompositionChanged: (nextComposition) => {
+				if (cancelled) return;
+
+				$.set(compositionModel, nextComposition, true);
+				emitCompositionChanged();
+			}
+		}).then(() => {
+			if (cancelled) return;
+
+			emit("toolkit-ready", {
+				runtimeId,
+				assessmentId: $.get(effectiveAssessmentId),
+				sectionId: $.get(effectiveSectionId),
+				itemPlayer: $.get(effectiveItemPlayer)
+			});
+
+			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);
+			const normalized = result?.eventDetail || detail.session;
+
+			emit("session-changed", {
+				...normalized,
+				itemId: detail.itemId,
+				canonicalItemId: detail.canonicalItemId || detail.itemId,
+				sourceRuntimeId: runtimeId
+			});
+		};
+
+		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 () => {
+			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' }
+));

package/dist/components/item-toolbar-element.d.ts

@@ -0,0 +1,3 @@
+import "./ItemToolBar.custom-element.js";
+export {};
+//# sourceMappingURL=item-toolbar-element.d.ts.map

package/dist/components/item-toolbar-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"item-toolbar-element.d.ts","sourceRoot":"","sources":["../../src/components/item-toolbar-element.ts"],"names":[],"mappings":"AAAA,OAAO,iCAAiC,CAAC;AAEzC,OAAO,EAAE,CAAC"}

package/dist/components/item-toolbar-element.js

@@ -0,0 +1,2 @@
+import "./ItemToolBar.custom-element.js";
+//# sourceMappingURL=item-toolbar-element.js.map

package/dist/components/item-toolbar-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"item-toolbar-element.js","sourceRoot":"","sources":["../../src/components/item-toolbar-element.ts"],"names":[],"mappings":"AAAA,OAAO,iCAAiC,CAAC"}

package/dist/components/pie-assessment-toolkit-element.d.ts

@@ -0,0 +1,3 @@
+import "./PieAssessmentToolkit.custom-element.js";
+export {};
+//# sourceMappingURL=pie-assessment-toolkit-element.d.ts.map

package/dist/components/pie-assessment-toolkit-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pie-assessment-toolkit-element.d.ts","sourceRoot":"","sources":["../../src/components/pie-assessment-toolkit-element.ts"],"names":[],"mappings":"AAAA,OAAO,0CAA0C,CAAC;AAElD,OAAO,EAAE,CAAC"}

package/dist/components/pie-assessment-toolkit-element.js

@@ -0,0 +1,2 @@
+import "./PieAssessmentToolkit.custom-element.js";
+//# sourceMappingURL=pie-assessment-toolkit-element.js.map

package/dist/components/pie-assessment-toolkit-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pie-assessment-toolkit-element.js","sourceRoot":"","sources":["../../src/components/pie-assessment-toolkit-element.ts"],"names":[],"mappings":"AAAA,OAAO,0CAA0C,CAAC"}