@pie-players/pie-assessment-toolkit 0.2.2 → 0.2.4

package/src/components/ToolButton.svelte

@@ -0,0 +1,146 @@
+<script lang="ts">
+	/**
+	 * ToolButton
+	 *
+	 * Generic button component for rendering tool buttons in toolbars.
+	 * Uses ToolButtonDefinition from ToolRegistry for consistent tool button rendering.
+	 */
+
+	import type { ToolButtonDefinition } from "../services/ToolRegistry";
+
+	// Props
+	let {
+		button,
+		class: className = "",
+	}: {
+		button: ToolButtonDefinition;
+		class?: string;
+	} = $props();
+
+	// Handle button click
+	function handleClick() {
+		if (!button.disabled && button.onClick) {
+			button.onClick();
+		}
+	}
+
+	// Derive button classes
+	const buttonClasses = $derived(
+		[
+			"tool-button",
+			button.className,
+			className,
+			button.disabled ? "tool-button--disabled" : "",
+		]
+			.filter(Boolean)
+			.join(" "),
+	);
+</script>
+
+<button
+	type="button"
+	class={buttonClasses}
+	disabled={button.disabled}
+	aria-label={button.ariaLabel}
+	title={button.tooltip || button.label}
+	onclick={handleClick}
+	data-tool-id={button.toolId}
+>
+	{#if button.icon}
+		<span class="tool-button__icon" aria-hidden="true">
+			{#if button.icon.startsWith("<svg")}
+				<!-- Inline SVG -->
+				{@html button.icon}
+			{:else if button.icon.startsWith("http")}
+				<!-- External image URL -->
+				<img src={button.icon} alt="" />
+			{:else}
+				<!-- Icon name/class -->
+				<i class={`icon icon-${button.icon}`}></i>
+			{/if}
+		</span>
+	{/if}
+	<span class="tool-button__label">{button.label}</span>
+</button>
+
+<style>
+	.tool-button {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.5rem 1rem;
+		background: var(--tool-button-bg, #ffffff);
+		border: 1px solid var(--tool-button-border, #d1d5db);
+		border-radius: 0.375rem;
+		color: var(--tool-button-color, #374151);
+		font-size: 0.875rem;
+		font-weight: 500;
+		cursor: pointer;
+		transition: all 0.15s ease-in-out;
+		white-space: nowrap;
+	}
+
+	.tool-button:hover:not(:disabled) {
+		background: var(--tool-button-hover-bg, #f9fafb);
+		border-color: var(--tool-button-hover-border, #9ca3af);
+		color: var(--tool-button-hover-color, #111827);
+	}
+
+	.tool-button:active:not(:disabled) {
+		background: var(--tool-button-active-bg, #f3f4f6);
+		transform: translateY(1px);
+	}
+
+	.tool-button:focus-visible {
+		outline: 2px solid var(--tool-button-focus-outline, #3b82f6);
+		outline-offset: 2px;
+	}
+
+	.tool-button:disabled,
+	.tool-button--disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.tool-button__icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 1.25rem;
+		height: 1.25rem;
+		flex-shrink: 0;
+	}
+
+	.tool-button__icon :global(svg) {
+		width: 100%;
+		height: 100%;
+		fill: currentColor;
+	}
+
+	.tool-button__icon img {
+		width: 100%;
+		height: 100%;
+		object-fit: contain;
+	}
+
+	.tool-button__label {
+		line-height: 1.25;
+	}
+
+	/* Compact variant - icon only */
+	.tool-button--compact .tool-button__label {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border-width: 0;
+	}
+
+	.tool-button--compact {
+		padding: 0.5rem;
+	}
+</style>

package/src/components/ToolButtonGroup.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+	/**
+	 * ToolButtonGroup
+	 *
+	 * Generic toolbar component that renders a group of tool buttons.
+	 * Implements the two-pass visibility model:
+	 * - Pass 1: Receives allowedToolIds from orchestrator (PNP/policies)
+	 * - Pass 2: Filters by tool relevance using ToolRegistry
+	 */
+
+	import type { ToolRegistry } from "../services/ToolRegistry";
+	import type { ToolContext } from "../services/tool-context";
+	import ToolButton from "./ToolButton.svelte";
+
+	// Props
+	let {
+		toolRegistry,
+		allowedToolIds,
+		context,
+		onToolClick,
+		orientation = "horizontal",
+		compact = false,
+		class: className = "",
+	}: {
+		/** Tool registry for filtering and button creation */
+		toolRegistry: ToolRegistry;
+		/** Tool IDs allowed by orchestrator (Pass 1) */
+		allowedToolIds: string[];
+		/** Context for visibility evaluation (Pass 2) */
+		context: ToolContext;
+		/** Callback when tool button is clicked */
+		onToolClick?: (toolId: string) => void;
+		/** Layout orientation */
+		orientation?: "horizontal" | "vertical";
+		/** Compact mode (icon only) */
+		compact?: boolean;
+		/** Additional CSS classes */
+		class?: string;
+	} = $props();
+
+	// Two-pass visibility model
+	// Pass 2: Filter by tool relevance
+	const visibleTools = $derived(
+		toolRegistry.filterVisibleInContext(allowedToolIds, context),
+	);
+
+	// Create button definitions for visible tools
+	const buttons = $derived(
+		visibleTools.map((tool) =>
+			tool.createButton(context, {
+				onClick: () => {
+					onToolClick?.(tool.toolId);
+				},
+				className: compact ? "tool-button--compact" : "",
+			}),
+		),
+	);
+
+	// Derive container classes
+	const containerClasses = $derived(
+		[
+			"tool-button-group",
+			`tool-button-group--${orientation}`,
+			compact ? "tool-button-group--compact" : "",
+			className,
+		]
+			.filter(Boolean)
+			.join(" "),
+	);
+</script>
+
+{#if buttons.length > 0}
+	<div class={containerClasses} role="toolbar" aria-label="Assessment tools">
+		{#each buttons as button (button.toolId)}
+			<ToolButton {button} />
+		{/each}
+	</div>
+{/if}
+
+<style>
+	.tool-button-group {
+		display: flex;
+		gap: 0.5rem;
+		padding: 0.5rem;
+		background: var(--tool-button-group-bg, transparent);
+		border-radius: 0.5rem;
+	}
+
+	.tool-button-group--horizontal {
+		flex-direction: row;
+		flex-wrap: wrap;
+		align-items: center;
+	}
+
+	.tool-button-group--vertical {
+		flex-direction: column;
+		align-items: stretch;
+	}
+
+	.tool-button-group--compact {
+		gap: 0.25rem;
+		padding: 0.25rem;
+	}
+
+	/* Empty state - hide when no buttons */
+	.tool-button-group:empty {
+		display: none;
+	}
+</style>

package/src/reference-layout/ReferenceLayout.svelte

@@ -39,24 +39,23 @@
 	let passage = $state<PassageEntity | null>(null);
 	let rubricBlocks = $state<RubricBlock[]>([]);
 
-	// Picture Dictionary Modal state
-	let showPictureDictionaryModal = $state(false);
-	let pictureDictionaryWord = $state('');
-
 	// Annotation toolbar event handlers
 	function handleDictionaryLookup(detail: { text: string }) {
 		// TODO: Open dictionary modal
 		console.log('Dictionary lookup:', detail.text);
+		alert(`Dictionary lookup: ${detail.text}`);
 	}
 
 	function handleTranslationRequest(detail: { text: string }) {
 		// TODO: Open translation modal
 		console.log('Translation request:', detail.text);
+		alert(`Translation request: ${detail.text}`);
 	}
 
 	function handlePictureDictionaryLookup(detail: { text: string }) {
-		pictureDictionaryWord = detail.text;
-		showPictureDictionaryModal = true;
+		// TODO: Open picture dictionary modal
+		console.log('Picture dictionary lookup:', detail.text);
+		alert(`Picture dictionary: ${detail.text}`);
 	}
 
 	// Load passage when item changes
@@ -183,13 +182,6 @@
 	onpicturedictionarylookup={handlePictureDictionaryLookup}
 />
 
-<!-- Picture Dictionary Modal -->
-<PictureDictionaryModal
-	bind:visible={showPictureDictionaryModal}
-	word={pictureDictionaryWord}
-	organizationId={organizationId || undefined}
-/>
-
 <style>
 	.reference-layout {
 		display: grid;

package/dist/services/PNPMapper.d.ts

@@ -1,71 +0,0 @@
-/**
- * PNP Mapper - Maps QTI 3.0 PNP support IDs to PIE tool identifiers
- *
- * Provides bidirectional mapping between QTI 3.0 Personal Needs Profile (PNP)
- * support identifiers and PIE tool IDs. Supports custom extensions via registration.
- *
- * Part of PIE Assessment Toolkit.
- */
-/**
- * Standard QTI 3.0 PNP support → PIE tool ID mapping
- *
- * Maps industry-standard PNP support identifiers to corresponding PIE tools.
- * Based on IMS Global QTI 3.0 specification.
- */
-export declare const PNP_TO_PIE_TOOL_MAP: Record<string, string>;
-/**
- * Reverse mapping for debugging/export (PIE tool ID → PNP support ID)
- */
-export declare const PIE_TOOL_TO_PNP_MAP: Record<string, string>;
-/**
- * Map PNP support ID to PIE tool ID
- *
- * @param supportId QTI 3.0 PNP support identifier
- * @returns PIE tool ID or null if no mapping exists
- *
- * @example
- * mapPNPSupportToToolId('textToSpeech') // Returns: 'pie-tool-text-to-speech'
- * mapPNPSupportToToolId('calculator')   // Returns: 'pie-tool-calculator'
- * mapPNPSupportToToolId('unknown')      // Returns: null
- */
-export declare function mapPNPSupportToToolId(supportId: string): string | null;
-/**
- * Map PIE tool ID back to PNP support ID
- *
- * Useful for exporting or debugging tool configurations.
- *
- * @param toolId PIE tool identifier
- * @returns QTI 3.0 PNP support ID or null if no mapping exists
- *
- * @example
- * mapToolIdToPNPSupport('pie-tool-text-to-speech') // Returns: 'textToSpeech'
- */
-export declare function mapToolIdToPNPSupport(toolId: string): string | null;
-/**
- * Register custom PNP support mapping
- *
- * Allows products to extend the standard PNP vocabulary with custom tools.
- * Custom supports should use 'x-' prefix per IMS convention.
- *
- * @param supportId PNP support identifier (e.g., 'x-pie-periodic-table')
- * @param toolId PIE tool identifier (e.g., 'pie-tool-periodic-table')
- *
- * @example
- * registerCustomPNPMapping('x-pie-periodic-table', 'pie-tool-periodic-table');
- * registerCustomPNPMapping('x-pie-graph', 'pie-tool-graphing');
- */
-export declare function registerCustomPNPMapping(supportId: string, toolId: string): void;
-/**
- * Get all registered PNP support IDs
- *
- * @returns Array of all PNP support identifiers (standard + custom)
- */
-export declare function getAllPNPSupports(): string[];
-/**
- * Check if a PNP support is registered
- *
- * @param supportId PNP support identifier to check
- * @returns true if mapping exists
- */
-export declare function isPNPSupportRegistered(supportId: string): boolean;
-//# sourceMappingURL=PNPMapper.d.ts.map

package/dist/services/PNPMapper.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PNPMapper.d.ts","sourceRoot":"","sources":["../../src/services/PNPMapper.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAiBtD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAEtD,CAAC;AAEF;;;;;;;;;;GAUG;AACH,wBAAgB,qBAAqB,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAEtE;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAEnE;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,wBAAwB,CACvC,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,MAAM,GACZ,IAAI,CAGN;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,IAAI,MAAM,EAAE,CAE5C;AAED;;;;;GAKG;AACH,wBAAgB,sBAAsB,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,CAEjE"}

package/dist/services/PNPMapper.js

@@ -1,98 +0,0 @@
-/**
- * PNP Mapper - Maps QTI 3.0 PNP support IDs to PIE tool identifiers
- *
- * Provides bidirectional mapping between QTI 3.0 Personal Needs Profile (PNP)
- * support identifiers and PIE tool IDs. Supports custom extensions via registration.
- *
- * Part of PIE Assessment Toolkit.
- */
-/**
- * Standard QTI 3.0 PNP support → PIE tool ID mapping
- *
- * Maps industry-standard PNP support identifiers to corresponding PIE tools.
- * Based on IMS Global QTI 3.0 specification.
- */
-export const PNP_TO_PIE_TOOL_MAP = {
-    // Standard QTI 3.0 PNP supports
-    textToSpeech: "pie-tool-text-to-speech",
-    calculator: "pie-tool-calculator",
-    ruler: "pie-tool-ruler",
-    protractor: "pie-tool-protractor",
-    highlighter: "pie-tool-annotation-toolbar",
-    lineReader: "pie-tool-line-reader",
-    magnifier: "pie-tool-magnifier",
-    colorContrast: "pie-theme-contrast",
-    answerMasking: "pie-tool-answer-eliminator",
-    dictionaryLookup: "pie-tool-dictionary",
-    // Common extensions (not in QTI standard but widely used)
-    graphingCalculator: "pie-tool-calculator",
-    scientificCalculator: "pie-tool-calculator",
-    basicCalculator: "pie-tool-calculator",
-};
-/**
- * Reverse mapping for debugging/export (PIE tool ID → PNP support ID)
- */
-export const PIE_TOOL_TO_PNP_MAP = Object.fromEntries(Object.entries(PNP_TO_PIE_TOOL_MAP).map(([pnp, tool]) => [tool, pnp]));
-/**
- * Map PNP support ID to PIE tool ID
- *
- * @param supportId QTI 3.0 PNP support identifier
- * @returns PIE tool ID or null if no mapping exists
- *
- * @example
- * mapPNPSupportToToolId('textToSpeech') // Returns: 'pie-tool-text-to-speech'
- * mapPNPSupportToToolId('calculator')   // Returns: 'pie-tool-calculator'
- * mapPNPSupportToToolId('unknown')      // Returns: null
- */
-export function mapPNPSupportToToolId(supportId) {
-    return PNP_TO_PIE_TOOL_MAP[supportId] || null;
-}
-/**
- * Map PIE tool ID back to PNP support ID
- *
- * Useful for exporting or debugging tool configurations.
- *
- * @param toolId PIE tool identifier
- * @returns QTI 3.0 PNP support ID or null if no mapping exists
- *
- * @example
- * mapToolIdToPNPSupport('pie-tool-text-to-speech') // Returns: 'textToSpeech'
- */
-export function mapToolIdToPNPSupport(toolId) {
-    return PIE_TOOL_TO_PNP_MAP[toolId] || null;
-}
-/**
- * Register custom PNP support mapping
- *
- * Allows products to extend the standard PNP vocabulary with custom tools.
- * Custom supports should use 'x-' prefix per IMS convention.
- *
- * @param supportId PNP support identifier (e.g., 'x-pie-periodic-table')
- * @param toolId PIE tool identifier (e.g., 'pie-tool-periodic-table')
- *
- * @example
- * registerCustomPNPMapping('x-pie-periodic-table', 'pie-tool-periodic-table');
- * registerCustomPNPMapping('x-pie-graph', 'pie-tool-graphing');
- */
-export function registerCustomPNPMapping(supportId, toolId) {
-    PNP_TO_PIE_TOOL_MAP[supportId] = toolId;
-    PIE_TOOL_TO_PNP_MAP[toolId] = supportId;
-}
-/**
- * Get all registered PNP support IDs
- *
- * @returns Array of all PNP support identifiers (standard + custom)
- */
-export function getAllPNPSupports() {
-    return Object.keys(PNP_TO_PIE_TOOL_MAP);
-}
-/**
- * Check if a PNP support is registered
- *
- * @param supportId PNP support identifier to check
- * @returns true if mapping exists
- */
-export function isPNPSupportRegistered(supportId) {
-    return supportId in PNP_TO_PIE_TOOL_MAP;
-}
-//# sourceMappingURL=PNPMapper.js.map

package/dist/services/PNPMapper.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PNPMapper.js","sourceRoot":"","sources":["../../src/services/PNPMapper.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH;;;;;GAKG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAA2B;IAC1D,gCAAgC;IAChC,YAAY,EAAE,yBAAyB;IACvC,UAAU,EAAE,qBAAqB;IACjC,KAAK,EAAE,gBAAgB;IACvB,UAAU,EAAE,qBAAqB;IACjC,WAAW,EAAE,6BAA6B;IAC1C,UAAU,EAAE,sBAAsB;IAClC,SAAS,EAAE,oBAAoB;IAC/B,aAAa,EAAE,oBAAoB;IACnC,aAAa,EAAE,4BAA4B;IAC3C,gBAAgB,EAAE,qBAAqB;IAEvC,0DAA0D;IAC1D,kBAAkB,EAAE,qBAAqB;IACzC,oBAAoB,EAAE,qBAAqB;IAC3C,eAAe,EAAE,qBAAqB;CACtC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAA2B,MAAM,CAAC,WAAW,CAC5E,MAAM,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,CACrE,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,UAAU,qBAAqB,CAAC,SAAiB;IACtD,OAAO,mBAAmB,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC;AAC/C,CAAC;AAED;;;;;;;;;;GAUG;AACH,MAAM,UAAU,qBAAqB,CAAC,MAAc;IACnD,OAAO,mBAAmB,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC;AAC5C,CAAC;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,wBAAwB,CACvC,SAAiB,EACjB,MAAc;IAEd,mBAAmB,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC;IACxC,mBAAmB,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;AACzC,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,iBAAiB;IAChC,OAAO,MAAM,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;AACzC,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,sBAAsB,CAAC,SAAiB;IACvD,OAAO,SAAS,IAAI,mBAAmB,CAAC;AACzC,CAAC"}