@pie-players/pie-assessment-player 0.1.4 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pie-players/pie-assessment-player",
-	"version": "0.1.4",
+	"version": "0.1.6",
 	"type": "module",
 	"description": "Assessment player web component that orchestrates PIE item players and assessment-toolkit services",
 	"license": "MIT",
@@ -30,7 +30,8 @@
 		}
 	},
 	"files": [
-		"dist"
+		"dist",
+		"src/components"
 	],
 	"scripts": {
 		"build": "vite build",
@@ -40,19 +41,19 @@
 		"lint": "biome check ."
 	},
 	"peerDependencies": {
-		"svelte": "^5.0.0"
+		"svelte": "^5.51.0"
 	},
 	"dependencies": {
-		"@pie-players/pie-assessment-toolkit": "workspace:*",
-		"@pie-players/pie-iife-player": "workspace:*",
-		"@pie-players/pie-players-shared": "workspace:*",
-		"@pie-players/pie-tool-toolbar": "workspace:*"
+		"@pie-players/pie-assessment-toolkit": "0.2.4",
+		"@pie-players/pie-iife-player": "0.2.2",
+		"@pie-players/pie-players-shared": "0.2.2",
+		"@pie-players/pie-tool-toolbar": "0.1.6"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "^2.3.10",
 		"@sveltejs/vite-plugin-svelte": "^6.1.4",
 		"@types/node": "^22.12.7",
-		"svelte": "^5.16.1",
+		"svelte": "^5.51.0",
 		"svelte-check": "^4.1.1",
 		"typescript": "^5.7.0",
 		"vite": "^7.0.8",

package/src/components/AssessmentItemList.svelte

@@ -0,0 +1,138 @@
+<script lang="ts">
+	import type { QuestionEntity } from '@pie-players/pie-players-shared';
+
+	let {
+		questions = [] as QuestionEntity[],
+		currentIndex = 0,
+		onItemSelected,
+		onItemRemove,
+		onItemAdd,
+		onItemMove,
+		readOnly = false
+	}: {
+		questions?: QuestionEntity[];
+		currentIndex?: number;
+		onItemSelected?: (index: number) => void;
+		onItemRemove?: (itemId: string, index: number) => void;
+		onItemAdd?: () => void;
+		onItemMove?: (fromIndex: number, toIndex: number) => void;
+		readOnly?: boolean;
+	} = $props();
+
+	let draggedIndex = $state<number | null>(null);
+
+	function handleItemClick(index: number) {
+		onItemSelected?.(index);
+	}
+
+	function handleRemove(event: Event, itemId: string, index: number) {
+		event.stopPropagation();
+		onItemRemove?.(itemId, index);
+	}
+
+	function handleDragStart(event: DragEvent, index: number) {
+		if (readOnly) return;
+		draggedIndex = index;
+		if (event.dataTransfer) {
+			event.dataTransfer.effectAllowed = 'move';
+			event.dataTransfer.setData('text/plain', index.toString());
+		}
+	}
+
+	function handleDragOver(event: DragEvent) {
+		if (readOnly || draggedIndex === null) return;
+		event.preventDefault();
+		if (event.dataTransfer) {
+			event.dataTransfer.dropEffect = 'move';
+		}
+	}
+
+	function handleDrop(event: DragEvent, targetIndex: number) {
+		if (readOnly || draggedIndex === null) return;
+		event.preventDefault();
+
+		if (draggedIndex !== targetIndex) {
+			onItemMove?.(draggedIndex, targetIndex);
+		}
+		draggedIndex = null;
+	}
+
+	function handleDragEnd() {
+		draggedIndex = null;
+	}
+</script>
+
+<div class="assessment-item-list flex flex-col h-full bg-base-100">
+	<div class="p-4 border-b border-base-300">
+		<h3 class="font-bold text-lg">Assessment Items</h3>
+	</div>
+
+	<div class="flex-1 overflow-y-auto p-2">
+		{#each questions as question, i}
+			<div
+				role="button"
+				tabindex="0"
+				class="item-card cursor-pointer rounded-lg p-3 mb-2 border transition-all"
+				class:border-primary={i === currentIndex}
+				class:bg-primary={i === currentIndex}
+				class:bg-opacity-10={i === currentIndex}
+				class:border-base-300={i !== currentIndex}
+				class:hover:bg-base-200={i !== currentIndex}
+				draggable={!readOnly}
+				ondragstart={(e) => handleDragStart(e, i)}
+				ondragover={handleDragOver}
+				ondrop={(e) => handleDrop(e, i)}
+				ondragend={handleDragEnd}
+				onclick={() => handleItemClick(i)}
+				onkeydown={(e) => {
+					if (e.key === 'Enter' || e.key === ' ') {
+						e.preventDefault();
+						handleItemClick(i);
+					}
+				}}
+			>
+				<div class="flex items-start justify-between gap-2">
+					<div class="flex-1 min-w-0">
+						<div class="flex items-center gap-2">
+							{#if !readOnly}
+								<span class="text-xs opacity-50">⋮⋮</span>
+							{/if}
+							<span class="font-semibold text-sm">Item {i + 1}</span>
+						</div>
+						{#if question.title}
+							<div class="text-xs opacity-70 truncate mt-1">{question.title}</div>
+						{/if}
+						{#if question.itemVId}
+							<div class="text-xs opacity-50 font-mono truncate mt-1">{question.itemVId}</div>
+						{/if}
+					</div>
+					{#if !readOnly && onItemRemove}
+						<button
+							class="btn btn-ghost btn-xs"
+							onclick={(e) => handleRemove(e, question.id || '', i)}
+							title="Remove item"
+						>
+							✕
+						</button>
+					{/if}
+				</div>
+			</div>
+		{/each}
+	</div>
+
+	{#if !readOnly && onItemAdd}
+		<div class="p-4 border-t border-base-300">
+			<button class="btn btn-primary btn-sm w-full" onclick={onItemAdd}>+ Add Item</button>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.item-card {
+		user-select: none;
+	}
+
+	.item-card:active {
+		cursor: grabbing;
+	}
+</style>

package/src/components/AssessmentSectionList.svelte

@@ -0,0 +1,306 @@
+<script lang="ts">
+	import type { AssessmentSection, QuestionEntity } from '@pie-players/pie-players-shared';
+
+	let {
+		sections = [] as AssessmentSection[],
+		questions = [] as QuestionEntity[],
+		currentSectionId = null,
+		currentQuestionId = null,
+
+		// Section operations
+		onSectionAdd,
+		onSectionRemove,
+		onSectionUpdate,
+		onSectionMove,
+
+		// Question operations
+		onQuestionMoveToSection,
+		onQuestionRemoveFromSection,
+
+		// Selection
+		onSectionSelected,
+		onQuestionSelected,
+
+		readOnly = false
+	}: {
+		sections?: AssessmentSection[];
+		questions?: QuestionEntity[];
+		currentSectionId?: string | null;
+		currentQuestionId?: string | null;
+
+		onSectionAdd?: () => void;
+		onSectionRemove?: (sectionId: string) => void;
+		onSectionUpdate?: (sectionId: string, updates: Partial<AssessmentSection>) => void;
+		onSectionMove?: (fromIndex: number, toIndex: number) => void;
+
+		onQuestionMoveToSection?: (questionId: string, sectionId: string, index: number) => void;
+		onQuestionRemoveFromSection?: (questionId: string, sectionId: string) => void;
+
+		onSectionSelected?: (sectionId: string) => void;
+		onQuestionSelected?: (questionId: string) => void;
+
+		readOnly?: boolean;
+	} = $props();
+
+	// Drag state
+	let draggedSectionIndex = $state<number | null>(null);
+	let draggedQuestionId = $state<string | null>(null);
+	let expandedSections = $state<Set<string>>(new Set());
+
+	// Derived: Resolve questions for each section
+	const questionsMap = $derived(new Map(questions.map((q) => [q.id, q])));
+
+	function getSectionQuestions(section: AssessmentSection): QuestionEntity[] {
+		return section.questions
+			.map((ref) => questionsMap.get(ref.questionId))
+			.filter((q): q is QuestionEntity => q !== undefined);
+	}
+
+	function getUnassignedQuestions(): QuestionEntity[] {
+		const assignedIds = new Set(sections.flatMap((s) => s.questions.map((ref) => ref.questionId)));
+		return questions.filter((q) => !assignedIds.has(q.id!));
+	}
+
+	function toggleSection(sectionId: string) {
+		const newExpanded = new Set(expandedSections);
+		if (newExpanded.has(sectionId)) {
+			newExpanded.delete(sectionId);
+		} else {
+			newExpanded.add(sectionId);
+		}
+		expandedSections = newExpanded;
+	}
+
+	function handleSectionTitleChange(sectionId: string, title: string) {
+		onSectionUpdate?.(sectionId, { title });
+	}
+
+	// Section drag handlers
+	function handleSectionDragStart(event: DragEvent, index: number) {
+		if (readOnly) return;
+		draggedSectionIndex = index;
+		if (event.dataTransfer) {
+			event.dataTransfer.effectAllowed = 'move';
+			event.dataTransfer.setData('text/plain', `section-${index}`);
+		}
+	}
+
+	function handleSectionDrop(event: DragEvent, targetIndex: number) {
+		if (readOnly || draggedSectionIndex === null) return;
+		event.preventDefault();
+
+		if (draggedSectionIndex !== targetIndex) {
+			onSectionMove?.(draggedSectionIndex, targetIndex);
+		}
+		draggedSectionIndex = null;
+	}
+
+	// Question drag handlers
+	function handleQuestionDragStart(event: DragEvent, questionId: string, _fromSectionId: string | null) {
+		if (readOnly) return;
+		draggedQuestionId = questionId;
+		if (event.dataTransfer) {
+			event.dataTransfer.effectAllowed = 'move';
+			event.dataTransfer.setData('text/plain', questionId);
+		}
+	}
+
+	function handleQuestionDrop(event: DragEvent, toSectionId: string, targetIndex: number) {
+		if (readOnly || draggedQuestionId === null) return;
+		event.preventDefault();
+
+		onQuestionMoveToSection?.(draggedQuestionId, toSectionId, targetIndex);
+		draggedQuestionId = null;
+	}
+
+	function handleDragOver(event: DragEvent) {
+		if (readOnly) return;
+		event.preventDefault();
+		if (event.dataTransfer) {
+			event.dataTransfer.dropEffect = 'move';
+		}
+	}
+
+	function handleDragEnd() {
+		draggedSectionIndex = null;
+		draggedQuestionId = null;
+	}
+</script>
+
+<div class="assessment-section-list flex flex-col h-full bg-base-100">
+	<!-- Header with Add Section button -->
+	<div class="p-4 border-b border-base-300 flex items-center justify-between">
+		<h3 class="font-bold text-lg">Assessment Structure</h3>
+		{#if !readOnly && onSectionAdd}
+			<button class="btn btn-primary btn-sm" onclick={onSectionAdd}>+ Add Section</button>
+		{/if}
+	</div>
+
+	<!-- Scrollable section list -->
+	<div class="flex-1 overflow-y-auto p-2">
+		{#each sections as section, sectionIndex (section.id)}
+			<div
+				role="region"
+				aria-label="Section: {section.title || 'Untitled Section'}"
+				class="section-container mb-3 rounded-lg border transition-all"
+				class:border-primary={section.id === currentSectionId}
+				class:border-base-300={section.id !== currentSectionId}
+				draggable={!readOnly}
+				ondragstart={(e) => handleSectionDragStart(e, sectionIndex)}
+				ondragover={handleDragOver}
+				ondrop={(e) => handleSectionDrop(e, sectionIndex)}
+				ondragend={handleDragEnd}
+			>
+				<!-- Section Header -->
+				<div class="section-header p-3 bg-base-200 rounded-t-lg flex items-center justify-between">
+					<div class="flex items-center gap-2 flex-1">
+						{#if !readOnly}
+							<span class="cursor-grab text-sm opacity-50">⋮⋮</span>
+						{/if}
+
+						<button class="btn btn-ghost btn-xs" onclick={() => toggleSection(section.id!)}>
+							{expandedSections.has(section.id!) ? '▼' : '▶'}
+						</button>
+
+						<input
+							type="text"
+							class="input input-ghost input-sm flex-1 font-semibold"
+							value={section.title || 'Untitled Section'}
+							onchange={(e) => handleSectionTitleChange(section.id!, e.currentTarget.value)}
+							readonly={readOnly}
+							onclick={(e) => {
+								e.stopPropagation();
+								onSectionSelected?.(section.id!);
+							}}
+						/>
+
+						<span class="badge badge-sm">{section.questions.length} items</span>
+					</div>
+
+					{#if !readOnly && onSectionRemove}
+						<button
+							class="btn btn-ghost btn-xs"
+							onclick={(e) => {
+								e.stopPropagation();
+								onSectionRemove(section.id!);
+							}}
+							title="Remove section"
+						>
+							✕
+						</button>
+					{/if}
+				</div>
+
+				<!-- Section Questions (Collapsible) -->
+				{#if expandedSections.has(section.id!)}
+					<div class="section-questions p-2 bg-base-100">
+						{#each getSectionQuestions(section) as question, qIndex (question.id)}
+							<div
+								role="button"
+								tabindex="0"
+								class="question-card cursor-pointer rounded p-2 mb-2 border transition-all group"
+								class:border-primary={question.id === currentQuestionId}
+								class:bg-primary={question.id === currentQuestionId}
+								class:bg-opacity-5={question.id === currentQuestionId}
+								class:border-base-300={question.id !== currentQuestionId}
+								class:hover:bg-base-200={question.id !== currentQuestionId}
+								draggable={!readOnly}
+								ondragstart={(e) => handleQuestionDragStart(e, question.id!, section.id!)}
+								ondragover={handleDragOver}
+								ondrop={(e) => handleQuestionDrop(e, section.id!, qIndex)}
+								ondragend={handleDragEnd}
+								onclick={() => onQuestionSelected?.(question.id!)}
+								onkeydown={(e) => {
+									if (e.key === 'Enter' || e.key === ' ') {
+										e.preventDefault();
+										onQuestionSelected?.(question.id!);
+									}
+								}}
+							>
+								<div class="flex items-center gap-2">
+									{#if !readOnly}
+										<span class="text-xs opacity-30">⋮⋮</span>
+									{/if}
+									<div class="flex-1 min-w-0">
+										<div class="font-medium text-sm truncate">{question.title || 'Untitled'}</div>
+										<div class="text-xs opacity-60 font-mono truncate">{question.itemVId}</div>
+									</div>
+									{#if !readOnly && onQuestionRemoveFromSection}
+										<button
+											class="btn btn-ghost btn-xs opacity-0 group-hover:opacity-100"
+											onclick={(e) => {
+												e.stopPropagation();
+												onQuestionRemoveFromSection(question.id!, section.id!);
+											}}
+											title="Remove from section"
+										>
+											✕
+										</button>
+									{/if}
+								</div>
+							</div>
+						{/each}
+
+						<!-- Drop zone for adding items -->
+						{#if !readOnly}
+							<div
+								role="region"
+								aria-label="Drop zone for adding items to section"
+								class="drop-zone p-3 border-2 border-dashed border-base-300 rounded text-center text-xs opacity-50 hover:opacity-100 transition-opacity"
+								ondragover={handleDragOver}
+								ondrop={(e) => handleQuestionDrop(e, section.id!, getSectionQuestions(section).length)}
+							>
+								Drop items here
+							</div>
+						{/if}
+					</div>
+				{/if}
+			</div>
+		{/each}
+
+		<!-- Unassigned Questions Section -->
+		{#if getUnassignedQuestions().length > 0}
+			<div class="unassigned-section mb-3 rounded-lg border border-dashed border-base-300">
+				<div class="p-3 bg-base-200 rounded-t-lg">
+					<h4 class="font-semibold text-sm opacity-70">Unassigned Items</h4>
+					<p class="text-xs opacity-50">Drag these items into sections</p>
+				</div>
+				<div class="p-2">
+					{#each getUnassignedQuestions() as question (question.id)}
+						<div
+							role="button"
+							tabindex="0"
+							aria-label="Unassigned question: {question.title || 'Untitled'}"
+							class="question-card cursor-move rounded p-2 mb-2 border border-base-300 hover:bg-base-200"
+							draggable={!readOnly}
+							ondragstart={(e) => handleQuestionDragStart(e, question.id!, null)}
+							ondragend={handleDragEnd}
+						>
+							<div class="flex items-center gap-2">
+								<span class="text-xs opacity-30">⋮⋮</span>
+								<div class="flex-1 min-w-0">
+									<div class="font-medium text-sm truncate">{question.title || 'Untitled'}</div>
+									<div class="text-xs opacity-60 font-mono truncate">{question.itemVId}</div>
+								</div>
+							</div>
+						</div>
+					{/each}
+				</div>
+			</div>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.question-card {
+		user-select: none;
+	}
+
+	.question-card:active {
+		cursor: grabbing;
+	}
+
+	.section-container:active {
+		cursor: grabbing;
+	}
+</style>