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

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;