@pie-players/pie-tool-line-reader 0.1.8 → 0.1.10

package/package.json

@@ -1,11 +1,12 @@
 {
 	"name": "@pie-players/pie-tool-line-reader",
-	"version": "0.1.8",
+	"version": "0.1.10",
 	"type": "module",
 	"description": "Reading guide overlay tool for PIE assessment player",
 	"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-line-reader"
 	},
 	"publishConfig": {
 		"access": "public"
@@ -40,9 +41,9 @@
 	"unpkg": "./dist/tool-line-reader.js",
 	"jsdelivr": "./dist/tool-line-reader.js",
 	"dependencies": {
-		"@pie-players/pie-assessment-toolkit": "0.2.7",
-		"@pie-players/pie-players-shared": "0.2.4",
-		"@sveltejs/kit": "^2.52.0",
+		"@pie-players/pie-assessment-toolkit": "0.2.10",
+		"@pie-players/pie-context": "0.1.2",
+		"@pie-players/pie-players-shared": "0.2.6",
 		"daisyui": "^5.5.18"
 	},
 	"types": "./dist/index.d.ts",
@@ -59,5 +60,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-line-reader#readme",
+	"bugs": {
+		"url": "https://github.com/pie-framework/pie-players/issues"
+	},
+	"engines": {
+		"node": ">=18.0.0"
+	},
+	"sideEffects": true
 }

package/tool-line-reader.svelte

@@ -1,32 +1,38 @@
 <svelte:options
 	customElement={{
 		tag: 'pie-tool-line-reader',
-		shadow: 'none',
+		shadow: 'open',
 		props: {
 			visible: { type: 'Boolean', attribute: 'visible' },
-			toolId: { type: 'String', attribute: 'tool-id' },
-			coordinator: { type: 'Object' }
+			toolId: { type: 'String', attribute: 'tool-id' }
 		}
 	}}
 />
 
 <script lang="ts">
 	
-	import type { IToolCoordinator } from '@pie-players/pie-assessment-toolkit';
-	import { ZIndexLayer } from '@pie-players/pie-assessment-toolkit';
-	import ToolSettingsButton from '@pie-players/pie-players-shared/components/ToolSettingsButton.svelte';
-	import ToolSettingsPanel from '@pie-players/pie-players-shared/components/ToolSettingsPanel.svelte';
+	import {
+		connectToolRuntimeContext,
+		ZIndexLayer,
+	} from '@pie-players/pie-assessment-toolkit';
+	import type {
+		AssessmentToolkitRuntimeContext,
+		IToolCoordinator,
+	} from '@pie-players/pie-assessment-toolkit';
 import { onMount } from 'svelte';
 
 	// Props
-	let { visible = false, toolId = 'lineReader', coordinator }: { visible?: boolean; toolId?: string; coordinator?: IToolCoordinator } = $props();
+	let { visible = false, toolId = 'lineReader' }: { visible?: boolean; toolId?: string } = $props();
 
 	// Check if running in browser
 	const isBrowser = typeof window !== 'undefined';
 
 	// State
 	let containerEl = $state<HTMLDivElement | undefined>();
-	let settingsButtonEl = $state<HTMLButtonElement | undefined>();
+	let runtimeContext = $state<AssessmentToolkitRuntimeContext | null>(null);
+	const coordinator = $derived(
+		runtimeContext?.toolCoordinator as IToolCoordinator | undefined,
+	);
 	let isDragging = $state(false);
 	let isResizing = $state(false);
 	let position = $state({
@@ -40,7 +46,6 @@ import { onMount } from 'svelte';
 	let currentColor = $state('#ffff00'); // Yellow
 	let currentOpacity = $state(0.3);
 	let maskingMode = $state<'highlight' | 'obscure'>('highlight');
-	let settingsOpen = $state(false);
 
 	// Track registration state
 	let registered = $state(false);
@@ -58,6 +63,13 @@ import { onMount } from 'svelte';
 	const MOVE_STEP = 10; // pixels
 	const RESIZE_STEP = 10; // pixels
 
+	$effect(() => {
+		if (!containerEl) return;
+		return connectToolRuntimeContext(containerEl, (value: AssessmentToolkitRuntimeContext) => {
+			runtimeContext = value;
+		});
+	});
+
 	function announce(message: string) {
 		announceText = message;
 		setTimeout(() => announceText = '', 1000);
@@ -80,20 +92,6 @@ import { onMount } from 'svelte';
 		announce(`Mode changed to ${maskingMode === 'highlight' ? 'highlight' : 'masking'}`);
 	}
 
-	function toggleSettings() {
-		settingsOpen = !settingsOpen;
-	}
-
-	function closeSettings() {
-		settingsOpen = false;
-	}
-
-	function setColor(color: string) {
-		currentColor = color;
-		const colorName = colors.find(c => c.value === color)?.name || 'Unknown';
-		announce(`Color changed to ${colorName}`);
-	}
-
 	// Pointer event handlers (better for web components)
 	function handlePointerDown(e: PointerEvent) {
 		const target = e.target as HTMLElement;
@@ -101,9 +99,6 @@ import { onMount } from 'svelte';
 		// Check if clicking the resize handle
 		if (target.closest('.resize-handle')) {
 			startResizing(e);
-		} else if (target.closest('.tool-settings-button') || target.closest('.tool-settings-panel')) {
-			// Don't start dragging when clicking settings
-			return;
 		} else {
 			startDragging(e);
 		}
@@ -276,7 +271,7 @@ import { onMount } from 'svelte';
 
 {#if visible}
 	<!-- Screen reader announcements -->
-	<div class="sr-only" role="status" aria-live="polite" aria-atomic="true">
+	<div class="pie-sr-only" role="status" aria-live="polite" aria-atomic="true">
 		{announceText}
 	</div>
 
@@ -284,25 +279,25 @@ import { onMount } from 'svelte';
 	{#if maskingMode === 'obscure'}
 		<!-- Top mask - from top of viewport to top of line reader -->
 		<div
-			class="line-reader-mask line-reader-mask-top"
+			class="pie-tool-line-reader__mask pie-tool-line-reader__mask--top"
 			style="height: {Math.max(0, position.y - size.height / 2)}px;"
 			aria-hidden="true"
 		></div>
 		<!-- Bottom mask - from bottom of line reader to bottom of viewport -->
 		<div
-			class="line-reader-mask line-reader-mask-bottom"
+			class="pie-tool-line-reader__mask pie-tool-line-reader__mask--bottom"
 			style="top: {position.y + size.height / 2}px;"
 			aria-hidden="true"
 		></div>
 		<!-- Left mask - left side of line reader window -->
 		<div
-			class="line-reader-mask line-reader-mask-left"
+			class="pie-tool-line-reader__mask pie-tool-line-reader__mask--left"
 			style="top: {position.y - size.height / 2}px; height: {size.height}px; width: {Math.max(0, position.x - size.width / 2)}px;"
 			aria-hidden="true"
 		></div>
 		<!-- Right mask - right side of line reader window -->
 		<div
-			class="line-reader-mask line-reader-mask-right"
+			class="pie-tool-line-reader__mask pie-tool-line-reader__mask--right"
 			style="top: {position.y - size.height / 2}px; height: {size.height}px; left: {position.x + size.width / 2}px;"
 			aria-hidden="true"
 		></div>
@@ -312,8 +307,8 @@ import { onMount } from 'svelte';
 	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 	<div
 		bind:this={containerEl}
-		class="line-reader-frame"
-		class:masking-mode={maskingMode === 'obscure'}
+		class="pie-tool-line-reader"
+		class:pie-tool-line-reader--masking-mode={maskingMode === 'obscure'}
 		style="left: {position.x}px; top: {position.y}px; width: {size.width}px; height: {size.height}px;"
 		onpointerdown={handlePointerDown}
 		onkeydown={handleKeyDown}
@@ -322,110 +317,27 @@ import { onMount } from 'svelte';
 		aria-label="Line Reader tool. Mode: {maskingMode === 'highlight' ? 'Highlight' : 'Masking'}. Use arrow keys to move, +/- to resize height, C to change color, [ and ] to adjust opacity, M to toggle mode. Current color: {colors.find(c => c.value === currentColor)?.name}, Opacity: {Math.round(currentOpacity * 100)}%"
 		aria-roledescription="Draggable and resizable reading guide overlay"
 	>
-		<div class="line-reader-container" style="background-color: {backgroundColor};">
-			<!-- Settings Button -->
-			<ToolSettingsButton
-				bind:buttonEl={settingsButtonEl}
-				onClick={toggleSettings}
-				ariaLabel="Line reader settings"
-				active={settingsOpen}
-			/>
+		<div class="pie-tool-line-reader__container" style="background-color: {backgroundColor};">
 		</div>
 
 		<!-- Resize handle -->
 		<div
-			class="resize-handle resize-handle-bottom"
+			class="pie-tool-line-reader__resize-handle pie-tool-line-reader__resize-handle--bottom"
 			title="Drag to resize height"
 			role="button"
 			tabindex="-1"
 			aria-label="Resize handle - drag to adjust height"
 		>
 			<svg width="20" height="8" viewBox="0 0 20 8" aria-hidden="true">
-				<rect x="8" y="3" width="4" height="2" fill="#4CAF50" rx="1"/>
+				<rect x="8" y="3" width="4" height="2" fill="var(--pie-primary, #4CAF50)" rx="1"/>
 			</svg>
 		</div>
 	</div>
 
-	<!-- Settings Panel - Rendered outside line-reader-frame to avoid height constraints -->
-	<ToolSettingsPanel
-		open={settingsOpen}
-		title="Line Reader Settings"
-		onClose={closeSettings}
-		anchorEl={settingsButtonEl}
-	>
-		<!-- Mode Selection - First, as it determines what other settings are relevant -->
-		<fieldset class="setting-group">
-			<legend>Mode</legend>
-			<label>
-				<input
-					type="radio"
-					name="mode"
-					value="highlight"
-					checked={maskingMode === 'highlight'}
-					onchange={() => { maskingMode = 'highlight'; announce('Mode changed to highlight'); }}
-				/>
-				<span>Highlight</span>
-			</label>
-			<label>
-				<input
-					type="radio"
-					name="mode"
-					value="obscure"
-					checked={maskingMode === 'obscure'}
-					onchange={() => { maskingMode = 'obscure'; announce('Mode changed to masking'); }}
-				/>
-				<span>Masking</span>
-			</label>
-		</fieldset>
-
-		<!-- Color Selection - Only shown in Highlight mode -->
-		{#if maskingMode === 'highlight'}
-			<fieldset class="setting-group">
-				<legend>Color</legend>
-				{#each colors as color}
-					<label>
-						<input
-							type="radio"
-							name="color"
-							value={color.value}
-							checked={currentColor === color.value}
-							onchange={() => setColor(color.value)}
-						/>
-						<div class="color-swatch" style="background-color: {color.value};"></div>
-						<span>{color.name}</span>
-					</label>
-				{/each}
-			</fieldset>
-
-			<!-- Opacity Slider - Only shown in Highlight mode -->
-			<div class="setting-group">
-				<div class="setting-label">
-					<span>Opacity</span>
-					<span class="setting-value" aria-live="polite">{Math.round(currentOpacity * 100)}%</span>
-				</div>
-				<input
-					type="range"
-					min="10"
-					max="90"
-					step="5"
-					value={currentOpacity * 100}
-					oninput={(e) => {
-						currentOpacity = Number(e.currentTarget.value) / 100;
-						announce(`Opacity ${Math.round(currentOpacity * 100)}%`);
-					}}
-					aria-label="Opacity"
-					aria-valuemin="10"
-					aria-valuemax="90"
-					aria-valuenow={Math.round(currentOpacity * 100)}
-					aria-valuetext="{Math.round(currentOpacity * 100)} percent"
-				/>
-			</div>
-		{/if}
-	</ToolSettingsPanel>
 {/if}
 
 <style>
-	.sr-only {
+	.pie-sr-only {
 		position: absolute;
 		width: 1px;
 		height: 1px;
@@ -437,8 +349,8 @@ import { onMount } from 'svelte';
 		border-width: 0;
 	}
 
-	.line-reader-frame {
-		border: 2px solid rgba(76, 175, 80, 0.8);
+	.pie-tool-line-reader {
+		border: 2px solid color-mix(in srgb, var(--pie-primary, #4caf50) 80%, transparent);
 		cursor: move;
 		overflow: visible;
 		position: absolute;
@@ -448,17 +360,17 @@ import { onMount } from 'svelte';
 		touch-action: none;
 	}
 
-	.line-reader-frame:focus {
-		outline: 3px solid #4A90E2;
+	.pie-tool-line-reader:focus {
+		outline: 3px solid var(--pie-button-focus-outline, var(--pie-primary, #4A90E2));
 		outline-offset: 2px;
 	}
 
-	.line-reader-frame:focus-visible {
-		outline: 3px solid #4A90E2;
+	.pie-tool-line-reader:focus-visible {
+		outline: 3px solid var(--pie-button-focus-outline, var(--pie-primary, #4A90E2));
 		outline-offset: 2px;
 	}
 
-	.line-reader-container {
+	.pie-tool-line-reader__container {
 		width: 100%;
 		height: 100%;
 		position: relative;
@@ -466,7 +378,7 @@ import { onMount } from 'svelte';
 	}
 
 
-	.resize-handle {
+	.pie-tool-line-reader__resize-handle {
 		position: absolute;
 		cursor: ns-resize;
 		z-index: 10;
@@ -475,69 +387,71 @@ import { onMount } from 'svelte';
 		justify-content: center;
 	}
 
-	.resize-handle-bottom {
+	.pie-tool-line-reader__resize-handle--bottom {
 		bottom: -10px;
 		left: 50%;
 		transform: translateX(-50%);
 		width: 40px;
 		height: 16px;
-		background-color: rgba(255, 255, 255, 0.9);
+		background-color: color-mix(in srgb, var(--pie-background, #fff) 90%, transparent);
 		border-radius: 8px;
-		border: 2px solid #4CAF50;
+		border: 2px solid var(--pie-primary, #4caf50);
 	}
 
-	.resize-handle:hover {
-		background-color: rgba(76, 175, 80, 0.2);
+	.pie-tool-line-reader__resize-handle:hover {
+		background-color: color-mix(in srgb, var(--pie-primary, #4caf50) 20%, transparent);
 	}
 
-	.resize-handle:active {
+	.pie-tool-line-reader__resize-handle:active {
 		cursor: ns-resize;
 	}
 
-	.line-reader-frame:active {
+	.pie-tool-line-reader:active {
 		cursor: grabbing;
 	}
 
 	/* Masking overlays for obscure mode - 4 rectangles covering all areas except line reader window */
-	.line-reader-mask {
+	.pie-tool-line-reader__mask {
 		position: fixed;
-		background: rgba(0, 0, 0, 0.85);
+		background: color-mix(in srgb, var(--pie-text, #000) 85%, transparent);
 		z-index: 999;
 		pointer-events: none;
 	}
 
-	.line-reader-mask-top {
+	.pie-tool-line-reader__mask--top {
 		top: 0;
 		left: 0;
 		right: 0;
 		/* Height set via inline style */
 	}
 
-	.line-reader-mask-bottom {
+	.pie-tool-line-reader__mask--bottom {
 		/* Top set via inline style */
 		left: 0;
 		right: 0;
 		bottom: 0;
 	}
 
-	.line-reader-mask-left {
+	.pie-tool-line-reader__mask--left {
 		/* Top, height, and width set via inline style */
 		left: 0;
 	}
 
-	.line-reader-mask-right {
+	.pie-tool-line-reader__mask--right {
 		/* Top, height, and left set via inline style */
 		right: 0;
 	}
 
 	/* In masking mode, change the window appearance */
-	.line-reader-frame.masking-mode {
-		border-color: rgba(76, 175, 80, 1);
-		box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.8), 0 0 20px rgba(76, 175, 80, 0.4);
+	.pie-tool-line-reader.pie-tool-line-reader--masking-mode {
+		border-color: var(--pie-primary, #4caf50);
+		box-shadow:
+			0 0 0 3px color-mix(in srgb, var(--pie-primary, #4caf50) 80%, transparent),
+			0 0 20px color-mix(in srgb, var(--pie-primary, #4caf50) 40%, transparent);
 	}
 
 	/* In masking mode, the window should be transparent to show content underneath */
-	.line-reader-frame.masking-mode .line-reader-container {
+	.pie-tool-line-reader.pie-tool-line-reader--masking-mode .pie-tool-line-reader__container {
 		background-color: transparent !important;
 	}