@pie-players/pie-section-player 0.2.12 → 0.2.14

package/dist/utils/player-preload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"player-preload.d.ts","sourceRoot":"","sources":["../../src/utils/player-preload.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,qBAAqB,EACrB,aAAa,EACb,uBAAuB,EACvB,+BAA+B,EAC/B,qBAAqB,EACrB,KAAK,kBAAkB,GACvB,MAAM,wCAAwC,CAAC"}

package/dist/utils/player-preload.js

@@ -0,0 +1,8 @@
+import { b as r, a as l, g as t, o, p as s } from "../player-preload-CQVG0Bih.js";
+export {
+  r as buildPreloadSignature,
+  l as getLoaderView,
+  t as getRenderablesSignature,
+  o as orchestratePlayerElementPreload,
+  s as preloadPlayerElements
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pie-players/pie-section-player",
-	"version": "0.2.12",
+	"version": "0.2.14",
 	"type": "module",
 	"description": "Web component for rendering QTI 3.0 assessment sections with passages and items",
 	"license": "MIT",
@@ -15,35 +15,23 @@
 	"unpkg": "./dist/pie-section-player.js",
 	"jsdelivr": "./dist/pie-section-player.js",
 	"main": "./dist/pie-section-player.js",
-	"types": "./dist/index.d.ts",
+	"types": "./dist/pie-section-player.d.ts",
 	"exports": {
 		".": {
-			"types": "./dist/index.d.ts",
-			"import": "./dist/pie-section-player.js"
-		},
-		"./components/ItemShellElement.svelte": {
-			"types": "./dist/pie-section-player.d.ts",
-			"import": "./dist/pie-section-player.js"
-		},
-		"./components/PassageShellElement.svelte": {
-			"types": "./dist/pie-section-player.d.ts",
-			"import": "./dist/pie-section-player.js"
-		},
-		"./components/section-player-base-element": {
 			"types": "./dist/pie-section-player.d.ts",
 			"import": "./dist/pie-section-player.js"
 		},
-		"./components/item-shell-element": {
+		"./components/section-player-splitpane-element": {
 			"types": "./dist/pie-section-player.d.ts",
 			"import": "./dist/pie-section-player.js"
 		},
-		"./components/passage-shell-element": {
+		"./components/section-player-vertical-element": {
 			"types": "./dist/pie-section-player.d.ts",
 			"import": "./dist/pie-section-player.js"
 		},
-		"./components/section-player-splitpane-element": {
-			"types": "./dist/pie-section-player.d.ts",
-			"import": "./dist/pie-section-player.js"
+		"./utils/player-preload": {
+			"types": "./dist/utils/player-preload.d.ts",
+			"import": "./dist/utils/player-preload.js"
 		}
 	},
 	"files": [
@@ -61,22 +49,26 @@
 		"svelte": "^5.51.0"
 	},
 	"dependencies": {
-		"@pie-players/pie-assessment-toolkit": "0.2.9",
-		"@pie-players/pie-esm-player": "0.2.6",
-		"@pie-players/pie-fixed-player": "0.2.5",
-		"@pie-players/pie-iife-player": "0.2.6",
-		"@pie-players/pie-inline-player": "0.2.5",
-		"@pie-players/pie-context": "0.1.1",
-		"@pie-players/pie-players-shared": "0.2.5",
-		"@pie-players/pie-section-tools-toolbar": "0.2.10",
-		"@pie-players/pie-tool-answer-eliminator": "0.2.9",
-		"@pie-players/pie-tool-calculator": "0.1.9",
-		"@pie-players/pie-tool-calculator-inline": "0.1.6",
-		"@pie-players/pie-tool-tts-inline": "0.1.6",
-		"@pie-players/tts-client-server": "0.2.4",
+		"@pie-players/pie-assessment-toolkit": "0.2.11",
+		"@pie-players/pie-item-player": "0.1.2",
+		"@pie-players/pie-context": "0.1.3",
+		"@pie-players/pie-players-shared": "0.2.7",
+		"@pie-players/pie-toolbars": "0.1.2",
+		"@pie-players/pie-tool-answer-eliminator": "0.2.11",
+		"@pie-players/pie-tool-annotation-toolbar": "0.1.11",
+		"@pie-players/pie-tool-calculator": "0.1.11",
+		"@pie-players/pie-tool-theme": "0.1.11",
+		"@pie-players/pie-tool-graph": "0.1.11",
+		"@pie-players/pie-tool-line-reader": "0.1.11",
+		"@pie-players/pie-tool-periodic-table": "0.1.11",
+		"@pie-players/pie-tool-protractor": "0.1.11",
+		"@pie-players/pie-tool-ruler": "0.1.11",
+		"@pie-players/pie-tool-text-to-speech": "0.1.11",
+		"@pie-players/tts-client-server": "0.2.6",
 		"daisyui": "^5.5.18"
 	},
 	"devDependencies": {
+		"@axe-core/playwright": "^4.11.1",
 		"@biomejs/biome": "^2.3.13",
 		"@playwright/test": "^1.58.2",
 		"@sveltejs/vite-plugin-svelte": "^6.2.4",

package/src/components/ItemShellElement.svelte

@@ -13,8 +13,16 @@
 	}}
 />
 
+<script module lang="ts">
+	const crossShellSessionDedupe = new Map<
+		string,
+		{ fingerprint: string; timestamp: number }
+	>();
+</script>
+
 <script lang="ts">
 	import {
+		PIE_INTERNAL_ITEM_SESSION_CHANGED_EVENT,
 		PIE_ITEM_SESSION_CHANGED_EVENT,
 		PIE_REGISTER_EVENT,
 		PIE_UNREGISTER_EVENT,
@@ -23,11 +31,28 @@
 		dispatchCrossBoundaryEvent,
 		type AssessmentToolkitRegionScopeContext,
 		type AssessmentToolkitShellContext,
+		type InternalItemSessionChangedDetail,
 		type ItemSessionChangedDetail,
 		type RuntimeRegistrationDetail,
 	} from "@pie-players/pie-assessment-toolkit";
+	import { normalizeItemSessionChange } from "@pie-players/pie-players-shared";
 	import { ContextProvider, ContextRoot } from "@pie-players/pie-context";
 
+	const PIE_INTERNAL_CONTENT_LOADED_EVENT = "pie-content-loaded";
+	const PIE_INTERNAL_ITEM_PLAYER_ERROR_EVENT = "pie-item-player-error";
+	type InternalContentLoadedDetail = {
+		itemId: string;
+		canonicalItemId?: string;
+		contentKind?: string;
+		detail?: unknown;
+	};
+	type InternalItemPlayerErrorDetail = {
+		itemId: string;
+		canonicalItemId?: string;
+		contentKind?: string;
+		error: unknown;
+	};
+
 	let {
 		itemId = "",
 		canonicalItemId = "",
@@ -100,24 +125,115 @@
 	function normalizeAndDispatchSession(event: Event): void {
 		if (!host || !itemId) return;
 		const detail = (event as CustomEvent).detail;
+		const internalPayload: InternalItemSessionChangedDetail = {
+			itemId,
+			session: detail,
+		};
+		// Internal runtime session wiring must always continue to keep item UI/state synchronized.
+		dispatchCrossBoundaryEvent(host, PIE_INTERNAL_ITEM_SESSION_CHANGED_EVENT, internalPayload);
+		// Keep public item stream response-focused; metadata-only belongs on canonical session-changed.
+		const normalized = normalizeItemSessionChange({
+			itemId,
+			sessionDetail: detail,
+		});
+		if (normalized.intent === "metadata-only" || !normalized.session) {
+			return;
+		}
 		const payload: ItemSessionChangedDetail = {
 			itemId,
 			canonicalItemId: canonicalItemId || itemId,
-			session: detail,
+			session: normalized.session,
 		};
 		dispatchCrossBoundaryEvent(host, PIE_ITEM_SESSION_CHANGED_EVENT, payload);
-		dispatchCrossBoundaryEvent(host, "item-session-changed", payload);
+	}
+
+	function dispatchLoaded(detail: unknown): void {
+		if (!host || !itemId) return;
+		const payload: InternalContentLoadedDetail = {
+			itemId,
+			canonicalItemId: canonicalItemId || itemId,
+			contentKind,
+			detail,
+		};
+		dispatchCrossBoundaryEvent(host, PIE_INTERNAL_CONTENT_LOADED_EVENT, payload);
+	}
+
+	function dispatchPlayerError(error: unknown): void {
+		if (!host || !itemId) return;
+		const payload: InternalItemPlayerErrorDetail = {
+			itemId,
+			canonicalItemId: canonicalItemId || itemId,
+			contentKind,
+			error,
+		};
+		dispatchCrossBoundaryEvent(host, PIE_INTERNAL_ITEM_PLAYER_ERROR_EVENT, payload);
+	}
+
+	function createSessionEventFingerprint(detail: unknown): string {
+		const semanticDetail =
+			detail && typeof detail === "object"
+				? { ...(detail as Record<string, unknown>) }
+				: detail;
+		if (semanticDetail && typeof semanticDetail === "object") {
+			delete (semanticDetail as Record<string, unknown>).timestamp;
+			delete (semanticDetail as Record<string, unknown>).sourceRuntimeId;
+		}
+		try {
+			return JSON.stringify(semanticDetail);
+		} catch {
+			return String(semanticDetail);
+		}
 	}
 
 	$effect(() => {
 		if (!host) return;
 		dispatchRegistration(PIE_REGISTER_EVENT);
 
-		const onSessionChanged = (event: Event) => normalizeAndDispatchSession(event);
+		const seenSessionEvents = new WeakSet<Event>();
+		let lastForwardedFingerprint = "";
+		const CROSS_SHELL_DEDUPE_WINDOW_MS = 500;
+		const onSessionChanged = (event: Event) => {
+			// Keep framework surface minimal: normalize these descendant events and do not
+			// leak raw item-player session events to external listeners.
+			event.stopPropagation();
+			// Some players emit `session-changed`, others emit `sessionchanged`.
+			// Guard against duplicate forwarding when both fire for the same payload.
+			if (seenSessionEvents.has(event)) return;
+			seenSessionEvents.add(event);
+			const fingerprint = createSessionEventFingerprint((event as CustomEvent).detail);
+			if (fingerprint === lastForwardedFingerprint) return;
+			const dedupeKey = itemId || canonicalItemId || "__unknown-item__";
+			const now = Date.now();
+			const lastCrossShell = crossShellSessionDedupe.get(dedupeKey);
+			if (
+				lastCrossShell &&
+				lastCrossShell.fingerprint === fingerprint &&
+				now - lastCrossShell.timestamp < CROSS_SHELL_DEDUPE_WINDOW_MS
+			) {
+				return;
+			}
+			crossShellSessionDedupe.set(dedupeKey, { fingerprint, timestamp: now });
+			lastForwardedFingerprint = fingerprint;
+			normalizeAndDispatchSession(event);
+		};
 		host.addEventListener("sessionchanged", onSessionChanged);
+		host.addEventListener("session-changed", onSessionChanged);
+		const onLoadComplete = (event: Event) => {
+			event.stopPropagation();
+			dispatchLoaded((event as CustomEvent).detail);
+		};
+		const onPlayerError = (event: Event) => {
+			event.stopPropagation();
+			dispatchPlayerError((event as CustomEvent).detail);
+		};
+		host.addEventListener("load-complete", onLoadComplete);
+		host.addEventListener("player-error", onPlayerError);
 
 		return () => {
 			host?.removeEventListener("sessionchanged", onSessionChanged);
+			host?.removeEventListener("session-changed", onSessionChanged);
+			host?.removeEventListener("load-complete", onLoadComplete);
+			host?.removeEventListener("player-error", onPlayerError);
 			dispatchRegistration(PIE_UNREGISTER_EVENT);
 		};
 	});

package/src/components/PassageShellElement.svelte

@@ -26,6 +26,21 @@
 	} from "@pie-players/pie-assessment-toolkit";
 	import { ContextProvider, ContextRoot } from "@pie-players/pie-context";
 
+	const PIE_INTERNAL_CONTENT_LOADED_EVENT = "pie-content-loaded";
+	const PIE_INTERNAL_ITEM_PLAYER_ERROR_EVENT = "pie-item-player-error";
+	type InternalContentLoadedDetail = {
+		itemId: string;
+		canonicalItemId?: string;
+		contentKind?: string;
+		detail?: unknown;
+	};
+	type InternalItemPlayerErrorDetail = {
+		itemId: string;
+		canonicalItemId?: string;
+		contentKind?: string;
+		error: unknown;
+	};
+
 	let {
 		itemId = "",
 		canonicalItemId = "",
@@ -95,11 +110,45 @@
 		dispatchCrossBoundaryEvent(host, eventName, detail);
 	}
 
+	function dispatchLoaded(detail: unknown): void {
+		if (!host || !itemId) return;
+		const payload: InternalContentLoadedDetail = {
+			itemId,
+			canonicalItemId: canonicalItemId || itemId,
+			contentKind,
+			detail,
+		};
+		dispatchCrossBoundaryEvent(host, PIE_INTERNAL_CONTENT_LOADED_EVENT, payload);
+	}
+
+	function dispatchPlayerError(error: unknown): void {
+		if (!host || !itemId) return;
+		const payload: InternalItemPlayerErrorDetail = {
+			itemId,
+			canonicalItemId: canonicalItemId || itemId,
+			contentKind,
+			error,
+		};
+		dispatchCrossBoundaryEvent(host, PIE_INTERNAL_ITEM_PLAYER_ERROR_EVENT, payload);
+	}
+
 	$effect(() => {
 		if (!host) return;
 		dispatchRegistration(PIE_REGISTER_EVENT);
+		const onLoadComplete = (event: Event) => {
+			event.stopPropagation();
+			dispatchLoaded((event as CustomEvent).detail);
+		};
+		const onPlayerError = (event: Event) => {
+			event.stopPropagation();
+			dispatchPlayerError((event as CustomEvent).detail);
+		};
+		host.addEventListener("load-complete", onLoadComplete);
+		host.addEventListener("player-error", onPlayerError);
 
 		return () => {
+			host?.removeEventListener("load-complete", onLoadComplete);
+			host?.removeEventListener("player-error", onPlayerError);
 			dispatchRegistration(PIE_UNREGISTER_EVENT);
 		};
 	});

package/src/components/PieSectionPlayerBaseElement.svelte

@@ -8,7 +8,6 @@
 			section: { type: "Object", reflect: false },
 			sectionId: { attribute: "section-id", type: "String" },
 			attemptId: { attribute: "attempt-id", type: "String" },
-			view: { type: "String" },
 			playerType: { attribute: "player-type", type: "String" },
 			player: { type: "Object", reflect: false },
 			lazyInit: { attribute: "lazy-init", type: "Boolean" },
@@ -24,52 +23,33 @@
 
 <script lang="ts">
 	import "@pie-players/pie-assessment-toolkit/components/pie-assessment-toolkit-element";
+	import "@pie-players/pie-tool-annotation-toolbar";
 	import {
 		createDefaultPersonalNeedsProfile,
 	} from "@pie-players/pie-assessment-toolkit";
+	import {
+		normalizeToolsConfig,
+		resolveToolsForLevel,
+	} from "@pie-players/pie-assessment-toolkit";
 	import { createEventDispatcher } from "svelte";
 	import { SectionController } from "../controllers/SectionController.js";
 	import type { SectionCompositionModel } from "../controllers/types.js";
 	import type { AssessmentSection } from "@pie-players/pie-players-shared/types";
-
-	const EMPTY_COMPOSITION: SectionCompositionModel = {
-		section: null,
-		assessmentItemRefs: [],
-		passages: [],
-		items: [],
-		rubricBlocks: [],
-		instructions: [],
-		currentItemIndex: 0,
-		currentItem: null,
-		isPageMode: false,
-		itemSessionsByItemId: {},
-		testAttemptSession: null,
-	};
-	const DEFAULT_ASSESSMENT_ID = "section-demo-direct";
-	const DEFAULT_PLAYER_TYPE = "iife";
-	const DEFAULT_LAZY_INIT = true;
-	const DEFAULT_ISOLATION = "inherit";
-	const LEGACY_RUNTIME_WARNING_KEY = "pie-section-player-base:legacy-runtime-props";
-	const warnedKeys = new Set<string>();
-	type RuntimeConfig = {
-		assessmentId?: string;
-		playerType?: string;
-		player?: Record<string, unknown> | null;
-		lazyInit?: boolean;
-		tools?: Record<string, unknown> | null;
-		accessibility?: Record<string, unknown> | null;
-		coordinator?: unknown;
-		createSectionController?: unknown;
-		isolation?: string;
-		env?: Record<string, unknown>;
-	};
+	import { EMPTY_COMPOSITION } from "./shared/composition.js";
+	import {
+		DEFAULT_ASSESSMENT_ID,
+		DEFAULT_ENV,
+		DEFAULT_ISOLATION,
+		DEFAULT_LAZY_INIT,
+		DEFAULT_PLAYER_TYPE,
+		type RuntimeConfig,
+	} from "./shared/section-player-runtime.js";
 	let {
 		assessmentId = DEFAULT_ASSESSMENT_ID,
 		runtime = null as RuntimeConfig | null,
 		section = null as AssessmentSection | null,
 		sectionId = "",
 		attemptId = "",
-		view = "candidate",
 		playerType = DEFAULT_PLAYER_TYPE,
 		player = null as Record<string, unknown> | null,
 		lazyInit = DEFAULT_LAZY_INIT,
@@ -82,7 +62,8 @@
 	} = $props();
 
 	let toolkitElement = $state<any>(null);
-	let lastCompositionSignature = $state("");
+	let activeToolkitCoordinator = $state<any>(null);
+	let lastCompositionVersion = $state(-1);
 	type BaseSectionPlayerEvents = {
 		"composition-changed": { composition: SectionCompositionModel };
 		"toolkit-ready": Record<string, unknown>;
@@ -106,7 +87,7 @@
 		() => runtime?.createSectionController ?? createSectionController,
 	);
 	const effectiveIsolation = $derived.by(() => runtime?.isolation ?? isolation);
-	const effectiveEnv = $derived.by(() => runtime?.env ?? env ?? {});
+	const effectiveEnv = $derived.by(() => runtime?.env ?? env ?? DEFAULT_ENV);
 	let resolvedSection = $derived.by(() => {
 		if (!section) return null;
 		const sectionAny = section as any;
@@ -127,27 +108,18 @@
 		dispatch(name, detail);
 	}
 
-	function getCompositionSignature(
-		model: SectionCompositionModel | null | undefined,
-	): string {
-		if (!model) return "";
-		return JSON.stringify({
-			sectionId: model.section?.identifier || "",
-			currentItemIndex: model.currentItemIndex ?? -1,
-			itemIds: (model.items || []).map((item) => item?.id || ""),
-			passageIds: (model.passages || []).map((passage) => passage?.id || ""),
-			sessionByItem: Object.entries(model.itemSessionsByItemId || {})
-				.sort(([left], [right]) => left.localeCompare(right))
-				.map(([itemId, session]) => [itemId, JSON.stringify(session ?? null)]),
-		});
-	}
-
 	function handleCompositionChanged(event: Event): void {
-		const detail = (event as CustomEvent<{ composition?: SectionCompositionModel }>).detail;
+		const detail = (event as CustomEvent<{
+			composition?: SectionCompositionModel;
+			version?: number;
+		}>).detail;
 		const nextComposition = detail?.composition || EMPTY_COMPOSITION;
-		const nextSignature = getCompositionSignature(nextComposition);
-		if (nextSignature === lastCompositionSignature) return;
-		lastCompositionSignature = nextSignature;
+		const nextVersion =
+			typeof detail?.version === "number"
+				? detail.version
+				: lastCompositionVersion + 1;
+		if (nextVersion === lastCompositionVersion) return;
+		lastCompositionVersion = nextVersion;
 		emit("composition-changed", {
 			composition: nextComposition,
 		});
@@ -158,37 +130,46 @@
 		eventName: Exclude<keyof BaseSectionPlayerEvents, "composition-changed">,
 	): void {
 		const detail = (event as CustomEvent).detail as Record<string, unknown>;
+		if (eventName === "toolkit-ready" && detail?.coordinator) {
+			activeToolkitCoordinator = detail.coordinator;
+		}
 		emit(eventName, detail || ({} as Record<string, unknown>));
 	}
 
+	const normalizedToolsConfig = $derived.by(() =>
+		normalizeToolsConfig((effectiveTools || {}) as any),
+	);
+	const annotationToolbarPlacementEnabled = $derived.by(() => {
+		const levels: Array<"section" | "item" | "passage"> = [
+			"section",
+			"item",
+			"passage",
+		];
+		return levels.some((level) =>
+			resolveToolsForLevel(normalizedToolsConfig as any, level).includes(
+				"annotationToolbar",
+			),
+		);
+	});
+	const annotationToolbarProviderEnabled = $derived.by(() =>
+		activeToolkitCoordinator?.isToolEnabled?.("annotationToolbar") ??
+		((normalizedToolsConfig as any)?.providers?.annotationToolbar?.enabled !==
+			false),
+	);
+	const shouldRenderAnnotationToolbar = $derived(
+		Boolean(
+			activeToolkitCoordinator &&
+				annotationToolbarPlacementEnabled &&
+				annotationToolbarProviderEnabled,
+		),
+	);
+
 	$effect(() => {
 		if (!toolkitElement) return;
 		toolkitElement.createSectionController =
 			effectiveCreateSectionController || (() => new SectionController());
 	});
 
-	$effect(() => {
-		if (typeof window === "undefined" || runtime) return;
-		const usedLegacyProps: string[] = [];
-		if (assessmentId !== DEFAULT_ASSESSMENT_ID) usedLegacyProps.push("assessmentId");
-		if (playerType !== DEFAULT_PLAYER_TYPE) usedLegacyProps.push("playerType");
-		if (player !== null) usedLegacyProps.push("player");
-		if (lazyInit !== DEFAULT_LAZY_INIT) usedLegacyProps.push("lazyInit");
-		if (tools !== null) usedLegacyProps.push("tools");
-		if (accessibility !== null) usedLegacyProps.push("accessibility");
-		if (coordinator !== null) usedLegacyProps.push("coordinator");
-		if (createSectionController !== null) usedLegacyProps.push("createSectionController");
-		if (isolation !== DEFAULT_ISOLATION) usedLegacyProps.push("isolation");
-		if (env !== null) usedLegacyProps.push("env");
-		if (usedLegacyProps.length === 0) return;
-		const key = `${LEGACY_RUNTIME_WARNING_KEY}:${usedLegacyProps.sort().join(",")}`;
-		if (warnedKeys.has(key)) return;
-		warnedKeys.add(key);
-		console.warn(
-			`[pie-section-player-base] Runtime props (${usedLegacyProps.join(", ")}) are deprecated. Prefer the \`runtime\` object prop.`,
-		);
-	});
-
 </script>
 
 <pie-assessment-toolkit
@@ -199,7 +180,6 @@
 	attempt-id={attemptId}
 	player-type={effectivePlayerType}
 	player={effectivePlayer}
-	{view}
 	env={effectiveEnv}
 	lazy-init={effectiveLazyInit}
 	tools={effectiveTools}
@@ -214,6 +194,13 @@
 	onruntime-owned={(event: Event) => handleToolkitEvent(event, "runtime-owned")}
 	onruntime-inherited={(event: Event) => handleToolkitEvent(event, "runtime-inherited")}
 >
+	{#if shouldRenderAnnotationToolbar}
+		<pie-tool-annotation-toolbar
+			enabled={true}
+			ttsService={activeToolkitCoordinator.ttsService}
+			highlightCoordinator={activeToolkitCoordinator.highlightCoordinator}
+		></pie-tool-annotation-toolbar>
+	{/if}
 	<slot></slot>
 </pie-assessment-toolkit>