@pie-players/pie-tool-answer-eliminator 0.2.6 → 0.2.9

package/dist/vite.config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vite.config.d.ts","sourceRoot":"","sources":["../vite.config.ts"],"names":[],"mappings":";AAKA,wBAmCG"}
+{"version":3,"file":"vite.config.d.ts","sourceRoot":"","sources":["../vite.config.ts"],"names":[],"mappings":";AAKA,wBAkCG"}

package/index.ts

@@ -6,6 +6,6 @@
  */
 
 // Re-export AdapterRegistry for auto-hide detection
-export { AdapterRegistry } from "./adapters/adapter-registry";
+export { AdapterRegistry } from "./adapters/adapter-registry.js";
 
 // Re-export any TypeScript types defined in the package

package/package.json

@@ -1,11 +1,12 @@
 {
 	"name": "@pie-players/pie-tool-answer-eliminator",
-	"version": "0.2.6",
+	"version": "0.2.9",
 	"type": "module",
 	"description": "Answer eliminator tool for PIE assessment player - supports process-of-elimination test-taking strategy",
 	"repository": {
 		"type": "git",
-		"url": "git+https://github.com/pie-framework/pie-players.git"
+		"url": "git+https://github.com/pie-framework/pie-players.git",
+		"directory": "packages/tool-answer-eliminator"
 	},
 	"publishConfig": {
 		"access": "public"
@@ -48,9 +49,9 @@
 	"unpkg": "./dist/tool-answer-eliminator.js",
 	"jsdelivr": "./dist/tool-answer-eliminator.js",
 	"dependencies": {
-		"@pie-players/pie-assessment-toolkit": "0.2.5",
-		"@pie-players/pie-players-shared": "0.2.2",
-		"@sveltejs/kit": "^2.52.0",
+		"@pie-players/pie-assessment-toolkit": "0.2.9",
+		"@pie-players/pie-context": "0.1.1",
+		"@pie-players/pie-players-shared": "0.2.5",
 		"daisyui": "^5.5.18"
 	},
 	"types": "./dist/index.d.ts",
@@ -67,5 +68,13 @@
 		"typescript": "^5.7.0",
 		"vite": "^7.0.8",
 		"vite-plugin-dts": "^4.5.3"
-	}
+	},
+	"homepage": "https://github.com/pie-framework/pie-players/tree/master/packages/tool-answer-eliminator#readme",
+	"bugs": {
+		"url": "https://github.com/pie-framework/pie-players/issues"
+	},
+	"engines": {
+		"node": ">=18.0.0"
+	},
+	"sideEffects": true
 }

package/strategies/mask-strategy.ts

@@ -1,4 +1,4 @@
-import type { EliminationStrategy } from "./elimination-strategy";
+import type { EliminationStrategy } from "./elimination-strategy.js";
 
 /**
  * Mask strategy using CSS Custom Highlight API
@@ -9,6 +9,7 @@ export class MaskStrategy implements EliminationStrategy {
 
 	private highlights = new Map<string, Highlight>();
 	private ranges = new Map<string, Range>();
+	private fallbackContainers = new Map<string, HTMLElement>();
 
 	initialize(): void {
 		this.injectCSS();
@@ -55,6 +56,7 @@ export class MaskStrategy implements EliminationStrategy {
 
 		this.highlights.delete(choiceId);
 		this.ranges.delete(choiceId);
+		this.fallbackContainers.delete(choiceId);
 	}
 
 	isEliminated(choiceId: string): boolean {
@@ -65,6 +67,7 @@ export class MaskStrategy implements EliminationStrategy {
 		for (const choiceId of this.highlights.keys()) {
 			this.remove(choiceId);
 		}
+		this.fallbackContainers.clear();
 	}
 
 	getEliminatedIds(): string[] {
@@ -160,13 +163,12 @@ export class MaskStrategy implements EliminationStrategy {
 		container.classList.add("answer-masked-fallback");
 		container.setAttribute("data-eliminated", "true");
 		container.setAttribute("data-eliminated-id", choiceId);
+		this.fallbackContainers.set(choiceId, container);
 		this.addAriaAttributes(range);
 	}
 
 	private removeFallback(choiceId: string): void {
-		const container = document.querySelector(
-			`[data-eliminated-id="${choiceId}"]`,
-		);
+		const container = this.fallbackContainers.get(choiceId);
 		if (!container) return;
 
 		container.classList.remove("answer-masked-fallback");
@@ -176,5 +178,6 @@ export class MaskStrategy implements EliminationStrategy {
 		const range = document.createRange();
 		range.selectNodeContents(container);
 		this.removeAriaAttributes(range);
+		this.fallbackContainers.delete(choiceId);
 	}
 }

package/strategies/strikethrough-strategy.ts

@@ -1,4 +1,4 @@
-import type { EliminationStrategy } from "./elimination-strategy";
+import type { EliminationStrategy } from "./elimination-strategy.js";
 
 /**
  * Strikethrough strategy using CSS Custom Highlight API
@@ -12,6 +12,7 @@ export class StrikethroughStrategy implements EliminationStrategy {
 
 	private highlights = new Map<string, Highlight>();
 	private ranges = new Map<string, Range>();
+	private fallbackContainers = new Map<string, HTMLElement>();
 
 	initialize(): void {
 		// Check browser support
@@ -72,6 +73,7 @@ export class StrikethroughStrategy implements EliminationStrategy {
 
 		this.highlights.delete(choiceId);
 		this.ranges.delete(choiceId);
+		this.fallbackContainers.delete(choiceId);
 	}
 
 	isEliminated(choiceId: string): boolean {
@@ -83,6 +85,7 @@ export class StrikethroughStrategy implements EliminationStrategy {
 		for (const choiceId of this.highlights.keys()) {
 			this.remove(choiceId);
 		}
+		this.fallbackContainers.clear();
 	}
 
 	getEliminatedIds(): string[] {
@@ -218,13 +221,12 @@ export class StrikethroughStrategy implements EliminationStrategy {
 		container.classList.add("answer-eliminated-fallback");
 		container.setAttribute("data-eliminated", "true");
 		container.setAttribute("data-eliminated-id", choiceId);
+		this.fallbackContainers.set(choiceId, container);
 		this.addAriaAttributes(range);
 	}
 
 	private removeFallback(choiceId: string): void {
-		const container = document.querySelector(
-			`[data-eliminated-id="${choiceId}"]`,
-		);
+		const container = this.fallbackContainers.get(choiceId);
 		if (!container) return;
 
 		container.classList.remove("answer-eliminated-fallback");
@@ -235,5 +237,6 @@ export class StrikethroughStrategy implements EliminationStrategy {
 		const range = document.createRange();
 		range.selectNodeContents(container);
 		this.removeAriaAttributes(range);
+		this.fallbackContainers.delete(choiceId);
 	}
 }

package/tool-answer-eliminator.svelte

@@ -1,14 +1,13 @@
 <svelte:options
 	customElement={{
 		tag: 'pie-tool-answer-eliminator',
-		shadow: 'none',
+		shadow: 'open',
 		props: {
 			visible: { type: 'Boolean', attribute: 'visible' },
 			toolId: { type: 'String', attribute: 'tool-id' },
 			strategy: { type: 'String', attribute: 'strategy' },
 			alwaysOn: { type: 'Boolean', attribute: 'always-on' },
 			buttonAlignment: { type: 'String', attribute: 'button-alignment' },
-			coordinator: { type: 'Object' },
 			scopeElement: { type: 'Object', reflect: false },
 
 			// Store integration (JS properties only)
@@ -46,10 +45,18 @@
 
 <script lang="ts">
 	
-	import type { IToolCoordinator } from '@pie-players/pie-assessment-toolkit';
-	import { ZIndexLayer } from '@pie-players/pie-assessment-toolkit';
-import { onDestroy, onMount } from 'svelte';
-	import { AnswerEliminatorCore } from './answer-eliminator-core';
+	import {
+		connectToolRuntimeContext,
+		connectToolShellContext,
+		ZIndexLayer,
+	} from '@pie-players/pie-assessment-toolkit';
+	import type {
+		AssessmentToolkitShellContext,
+		AssessmentToolkitRuntimeContext,
+		IToolCoordinator,
+	} from '@pie-players/pie-assessment-toolkit';
+	import { onMount } from 'svelte';
+	import { AnswerEliminatorCore } from './answer-eliminator-core.js';
 
 	// Props
 	let {
@@ -58,7 +65,6 @@ import { onDestroy, onMount } from 'svelte';
 		strategy = 'strikethrough' as 'strikethrough' | 'mask' | 'gray',
 		alwaysOn = false, // Set true for profile-based accommodation
 		buttonAlignment = 'right' as 'left' | 'right' | 'inline', // Button placement: left, right, or inline with checkbox
-		coordinator,
 		scopeElement = null, // Container element to limit DOM queries (for multi-item pages)
 
 		// Store integration
@@ -70,111 +76,82 @@ import { onDestroy, onMount } from 'svelte';
 		strategy?: 'strikethrough' | 'mask' | 'gray';
 		alwaysOn?: boolean;
 		buttonAlignment?: 'left' | 'right' | 'inline';
-		coordinator?: IToolCoordinator;
 		scopeElement?: HTMLElement | null;
 		elementToolStateStore?: any;
 		globalElementId?: string;
 	} = $props();
 
 	// State
+	let contextHostElement = $state<HTMLElement | null>(null);
+	let runtimeContext = $state<AssessmentToolkitRuntimeContext | null>(null);
+	let shellContext = $state<AssessmentToolkitShellContext | null>(null);
+	const coordinator = $derived(
+		runtimeContext?.toolCoordinator as IToolCoordinator | undefined,
+	);
 	let core = $state<AnswerEliminatorCore | null>(null);
-	let eliminatedCount = $state(0);
-	let mutationObserver = $state<MutationObserver | null>(null);
+	let lastShellContextVersion = $state<number | null>(null);
 
 	// Track registration state
-	let registered = $state(false);
+	let registeredToolId = $state<string | null>(null);
+	let registeredCoordinator = $state<IToolCoordinator | null>(null);
 
 	// Determine if tool should be active (either toggled on OR always-on mode)
 	let isActive = $derived(alwaysOn || visible);
 
-	function initializeForCurrentQuestion() {
-		if (!isActive || !core) return;
+	$effect(() => {
+		if (!contextHostElement) return;
+		return connectToolRuntimeContext(contextHostElement, (value: AssessmentToolkitRuntimeContext) => {
+			runtimeContext = value;
+		});
+	});
 
-		// Use scopeElement if provided (for multi-item pages), otherwise search globally
-		const searchRoot = scopeElement || document.body;
+	$effect(() => {
+		if (!contextHostElement) return;
+		return connectToolShellContext(contextHostElement, (value: AssessmentToolkitShellContext) => {
+			shellContext = value;
+		});
+	});
 
-		// Find the current question/item within the search scope
-		const questionRoot =
-			searchRoot.querySelector('pie-player') ||
-			searchRoot.querySelector('multiple-choice') ||
-			searchRoot.querySelector('ebsr') ||
-			searchRoot.querySelector('[data-pie-element]') ||
-			searchRoot;
+	function resolveQuestionRoot(): HTMLElement | null {
+		return scopeElement || shellContext?.scopeElement || null;
+	}
+
+	function initializeForCurrentQuestion() {
+		if (!isActive || !core) return;
+		const questionRoot = resolveQuestionRoot();
 
 		if (!questionRoot) {
-			console.warn('[AnswerEliminator] Could not find question root within scope');
+			console.warn('[AnswerEliminator] Missing shell scope context for question root');
 			return;
 		}
 
-		core.initializeForQuestion(questionRoot as HTMLElement);
-		updateEliminatedCount();
-	}
-
-	function waitForPIEElements(callback: () => void, timeout: number = 5000) {
-		// Use scopeElement if provided, otherwise search globally
-		const searchRoot = scopeElement || document.body;
-
-		// Check if PIE elements already exist
-		const checkElements = () => {
-			const questionRoot =
-				searchRoot.querySelector('pie-player') ||
-				searchRoot.querySelector('multiple-choice') ||
-				searchRoot.querySelector('ebsr') ||
-				searchRoot.querySelector('[data-pie-element]');
-
-			if (questionRoot) {
-				// Elements found, clean up observer and execute callback
-				if (mutationObserver) {
-					mutationObserver.disconnect();
-					mutationObserver = null;
-				}
-				callback();
-				return true;
-			}
-			return false;
-		};
-
-		// Try immediately first
-		if (checkElements()) return;
-
-		// Set up MutationObserver to watch for elements within scope
-		mutationObserver = new MutationObserver(() => {
-			checkElements();
-		});
-
-		// Observe the search root for added nodes
-		mutationObserver.observe(searchRoot, {
-			childList: true,
-			subtree: true
-		});
-
-		// Fallback timeout to prevent infinite observation
-		setTimeout(() => {
-			if (mutationObserver) {
-				mutationObserver.disconnect();
-				mutationObserver = null;
-				// Try one last time
-				checkElements();
-			}
-		}, timeout);
+		core.initializeForQuestion(questionRoot);
 	}
 
 	function handleItemChange() {
-		// Question changed, wait for PIE elements to be rendered using MutationObserver
-		waitForPIEElements(() => {
-			initializeForCurrentQuestion();
+		requestAnimationFrame(() => {
+			requestAnimationFrame(() => {
+				initializeForCurrentQuestion();
+			});
 		});
 	}
 
-	function updateEliminatedCount() {
-		eliminatedCount = core?.getEliminatedCount() || 0;
-	}
-
 	// Register with coordinator when it becomes available
 	$effect(() => {
-		if (coordinator && toolId && !registered) {
+		if (!coordinator || !toolId) return;
+		if (
+			registeredCoordinator &&
+			registeredToolId &&
+			(registeredCoordinator !== coordinator || registeredToolId !== toolId)
+		) {
+			registeredCoordinator.unregisterTool(registeredToolId);
+			registeredCoordinator = null;
+			registeredToolId = null;
+		}
+		if (!registeredToolId) {
 			coordinator.registerTool(toolId, 'Answer Eliminator', undefined, ZIndexLayer.MODAL);
-			registered = true;
+			registeredCoordinator = coordinator;
+			registeredToolId = toolId;
 		}
 	});
 
@@ -194,42 +171,37 @@ import { onDestroy, onMount } from 'svelte';
 			core.setStoreIntegration(elementToolStateStore, globalElementId);
 		}
 
-		// Listen for question changes (PIE player emits this)
-		document.addEventListener('pie-item-changed', handleItemChange);
-
-		// Listen for custom events from answer-eliminator-core when state changes
-		document.addEventListener('answer-eliminator-state-change', () => {
-			updateEliminatedCount();
-		});
-
 		// Initialize for current question if active, otherwise ensure clean state
 		if (isActive) {
-			// Wait for PIE elements to be mounted using MutationObserver
-			waitForPIEElements(() => {
-				initializeForCurrentQuestion();
-			});
+			initializeForCurrentQuestion();
 		} else {
 			// If not active on mount, clear any leftover visual eliminations
 			core.cleanup();
 		}
 
 		return () => {
-			// Clean up MutationObserver if still active
-			if (mutationObserver) {
-				mutationObserver.disconnect();
-				mutationObserver = null;
-			}
-
 			core?.destroy();
 			core = null;
-			if (coordinator && toolId) {
-				coordinator.unregisterTool(toolId);
+			if (registeredCoordinator && registeredToolId) {
+				registeredCoordinator.unregisterTool(registeredToolId);
+				registeredCoordinator = null;
+				registeredToolId = null;
 			}
-			document.removeEventListener('pie-item-changed', handleItemChange);
-			document.removeEventListener('answer-eliminator-state-change', updateEliminatedCount);
 		};
 	});
 
+	$effect(() => {
+		const shellVersion = shellContext?.contextVersion ?? null;
+		if (shellVersion === null) return;
+		if (lastShellContextVersion === null) {
+			lastShellContextVersion = shellVersion;
+			return;
+		}
+		if (shellVersion === lastShellContextVersion) return;
+		lastShellContextVersion = shellVersion;
+		handleItemChange();
+	});
+
 	// Watch for visibility changes to show/hide elimination buttons
 	$effect(() => {
 		if (core) {
@@ -248,3 +220,4 @@ import { onDestroy, onMount } from 'svelte';
 
 <!-- No visible UI - tool operates entirely through injected buttons next to choices -->
 <!-- The toolbar button visibility is managed by tool-toolbar.svelte -->
+<div bind:this={contextHostElement} style="display: none;" aria-hidden="true"></div>