@pie-players/pie-assessment-toolkit 0.2.0

package/src/reference-layout/components/ItemPanel.svelte

@@ -0,0 +1,200 @@
+<script lang="ts">
+	import type { ItemConfig, ItemEntity } from '@pie-players/pie-players-shared';
+	import type { ToolCoordinator } from '../../services/ToolCoordinator';
+	import type { ITTSService, IHighlightCoordinator, IElementToolStateStore } from '../../services/interfaces';
+	import '$lib/tags/pie-iife-player/PieIifePlayer.svelte';
+	import PiePlayerStyles from '$lib/components/PiePlayerStyles.svelte';
+	import '../../components/QuestionToolBar.svelte';
+
+	// NOTE: Parent applications using ItemPanel with showHeader=true must import tool web components:
+	//   import '@pie-players/pie-tool-answer-eliminator';
+	//   import '@pie-players/pie-tool-tts-inline';
+	//   import '@pie-players/pie-tool-calculator-inline';
+	//   import '@pie-players/pie-tool-calculator';
+
+	let {
+		currentItem,
+		config,
+		session,
+		bundleHost,
+		env,
+		assessmentId = '',
+		sectionId = '',
+		toolCoordinator,
+		ttsService,
+		highlightCoordinator,
+		catalogResolver,
+		elementToolStateStore,
+		showHeader = false,
+		isLoading = false
+	}: {
+		currentItem: ItemEntity | null;
+		config: ItemConfig | null;
+		session: { id: string; data: any[] };
+		bundleHost?: string;
+		env: { mode: string; role: string };
+		assessmentId?: string;
+		sectionId?: string;
+		toolCoordinator?: ToolCoordinator;
+		ttsService?: ITTSService;
+		highlightCoordinator?: IHighlightCoordinator;
+		catalogResolver?: any;
+		elementToolStateStore?: IElementToolStateStore;
+		showHeader?: boolean;
+		isLoading?: boolean;
+	} = $props();
+
+	let piePlayerElement = $state<HTMLElement | null>(null);
+	let itemContentElement = $state<HTMLElement | null>(null);
+	let questionToolbarElement = $state<HTMLElement | null>(null);
+	let toolbarServicesBound = $state(false);
+	let calculatorElement = $state<HTMLElement | null>(null);
+	let calculatorVisible = $state(false);
+
+	// Bind services, scope, and IDs to question toolbar (must be JS properties)
+	$effect(() => {
+		if (questionToolbarElement && !toolbarServicesBound && showHeader) {
+			if (toolCoordinator) {
+				(questionToolbarElement as any).toolCoordinator = toolCoordinator;
+			}
+			if (ttsService) {
+				(questionToolbarElement as any).ttsService = ttsService;
+			}
+			if (highlightCoordinator) {
+				(questionToolbarElement as any).highlightCoordinator = highlightCoordinator;
+			}
+			if (itemContentElement) {
+				(questionToolbarElement as any).scopeElement = itemContentElement;
+			}
+			if (elementToolStateStore) {
+				(questionToolbarElement as any).elementToolStateStore = elementToolStateStore;
+			}
+			if (assessmentId) {
+				(questionToolbarElement as any).assessmentId = assessmentId;
+			}
+			if (sectionId) {
+				(questionToolbarElement as any).sectionId = sectionId;
+			}
+
+			toolbarServicesBound = true;
+		}
+	});
+
+	// Bind coordinator to calculator tool
+	$effect(() => {
+		if (calculatorElement && toolCoordinator) {
+			(calculatorElement as any).coordinator = toolCoordinator;
+		}
+	});
+
+	// Subscribe to calculator visibility changes
+	$effect(() => {
+		if (!showHeader || !toolCoordinator || !currentItem) return;
+
+		const unsubscribe = toolCoordinator.subscribe(() => {
+			calculatorVisible = toolCoordinator.isToolVisible(`calculator-${currentItem.id}`);
+		});
+
+		// Initial update
+		calculatorVisible = toolCoordinator.isToolVisible(`calculator-${currentItem.id}`);
+
+		return unsubscribe;
+	});
+</script>
+
+<div
+	class="item-panel"
+	data-assessment-id={assessmentId}
+	data-section-id={sectionId}
+	data-item-id={currentItem?.id}
+>
+	{#if isLoading}
+		<div class="loading-container">
+			<span class="loading loading-spinner loading-lg"></span>
+		</div>
+	{:else if config}
+		<!-- Optional Question Header with Toolbar -->
+		{#if showHeader && currentItem}
+			<div class="item-header">
+				<h4 class="item-title">{currentItem.name || 'Question'}</h4>
+				<pie-question-toolbar
+					bind:this={questionToolbarElement}
+					item-id={currentItem.id}
+					catalog-id={currentItem.id}
+					tools="tts,answerEliminator,calculator"
+					size="md"
+					language="en-US"
+				></pie-question-toolbar>
+			</div>
+		{/if}
+
+		<div class="item-content" bind:this={itemContentElement}>
+			<PiePlayerStyles>
+				<pie-iife-player
+					bind:this={piePlayerElement}
+					config={config}
+					env={env}
+					session={session}
+					hosted={false}
+					show-bottom-border={false}
+					bundle-host={bundleHost}
+				></pie-iife-player>
+			</PiePlayerStyles>
+		</div>
+	{:else}
+		<div class="empty-container">
+			<p class="empty-message">Question could not be loaded.</p>
+		</div>
+	{/if}
+
+	<!-- Calculator Tool Instance (rendered outside panel for floating overlay) -->
+	{#if showHeader && currentItem}
+		<pie-tool-calculator
+			bind:this={calculatorElement}
+			visible={calculatorVisible}
+			tool-id="calculator-{currentItem.id}"
+		></pie-tool-calculator>
+	{/if}
+</div>
+
+<style>
+	.item-panel {
+		height: 100%;
+		padding: 1rem;
+		overflow-y: auto;
+		overflow-x: hidden;
+	}
+
+	.item-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0.75rem 0;
+		margin-bottom: 0.5rem;
+	}
+
+	.item-title {
+		margin: 0;
+		font-size: 0.95rem;
+		font-weight: 600;
+		color: var(--pie-primary, #1976d2);
+	}
+
+	.item-content {
+		position: relative;
+	}
+
+	.loading-container,
+	.empty-container {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 100%;
+	}
+
+	.empty-message {
+		color: var(--pie-text-secondary, #666);
+		font-style: italic;
+	}
+</style>
+

package/src/reference-layout/components/NotesPanel.svelte

@@ -0,0 +1,179 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+
+	let {
+		itemId,
+		itemLabel,
+		onClose,
+	}: {
+		itemId: string;
+		itemLabel?: string;
+		onClose?: () => void;
+	} = $props();
+
+	let text = $state("");
+	let status = $state<"idle" | "saved">("idle");
+
+	function storageKey(id: string) {
+		return `schoolcity-notes:${id || "unknown"}`;
+	}
+
+	function load() {
+		if (!itemId) {
+			text = "";
+			return;
+		}
+		try {
+			const v = localStorage.getItem(storageKey(itemId));
+			text = v ?? "";
+		} catch {
+			// ignore
+		}
+	}
+
+	function save() {
+		if (!itemId) return;
+		try {
+			localStorage.setItem(storageKey(itemId), text);
+			status = "saved";
+			window.setTimeout(() => {
+				status = "idle";
+			}, 800);
+		} catch {
+			// ignore
+		}
+	}
+
+	$effect(() => {
+		// reload when item changes
+		load();
+	});
+
+	onMount(() => {
+		load();
+	});
+</script>
+
+<div class="notes-panel">
+	<div class="notes-header">
+		<div class="notes-title">
+			<span class="title">Notes</span>
+			{#if itemLabel}
+				<span class="subtitle">{itemLabel}</span>
+			{/if}
+		</div>
+		<button class="icon-button" onclick={() => onClose?.()} aria-label="Close notes">
+			×
+		</button>
+	</div>
+
+	<div class="notes-body">
+		<textarea
+			class="notes-textarea"
+			bind:value={text}
+			placeholder="Write notes for this question..."
+			onblur={save}
+		></textarea>
+	</div>
+
+	<div class="notes-footer">
+		<button class="save-button" onclick={save}>
+			Save Note
+		</button>
+		{#if status === "saved"}
+			<span class="saved">Saved</span>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.notes-panel {
+		display: grid;
+		grid-template-rows: auto 1fr auto;
+		height: 100%;
+		border-left: 1px solid var(--pie-border, #e0e0e0);
+		background-color: var(--pie-background, #ffffff);
+	}
+
+	.notes-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0.75rem 0.75rem 0.5rem;
+		border-bottom: 1px solid var(--pie-border, #e0e0e0);
+	}
+
+	.notes-title {
+		display: flex;
+		flex-direction: column;
+		gap: 0.125rem;
+	}
+
+	.title {
+		font-weight: 600;
+		font-size: 0.95rem;
+		color: var(--pie-text, #000);
+	}
+
+	.subtitle {
+		font-size: 0.8rem;
+		color: var(--pie-text-secondary, #666);
+	}
+
+	.icon-button {
+		border: 1px solid var(--pie-border, #e0e0e0);
+		background: transparent;
+		border-radius: 4px;
+		padding: 0.25rem 0.5rem;
+		cursor: pointer;
+		font-size: 1rem;
+		line-height: 1;
+	}
+
+	.icon-button:hover {
+		background-color: var(--pie-secondary-background, #f5f5f5);
+	}
+
+	.notes-body {
+		padding: 0.75rem;
+		min-height: 0;
+	}
+
+	.notes-textarea {
+		width: 100%;
+		height: 100%;
+		resize: none;
+		border: 1px solid var(--pie-border, #e0e0e0);
+		border-radius: 6px;
+		padding: 0.5rem;
+		font-size: 0.875rem;
+		font-family: inherit;
+	}
+
+	.notes-footer {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0.5rem 0.75rem 0.75rem;
+		border-top: 1px solid var(--pie-border, #e0e0e0);
+	}
+
+	.save-button {
+		padding: 0.5rem 0.75rem;
+		background-color: var(--pie-background, #ffffff);
+		border: 1px solid var(--pie-border, #e0e0e0);
+		border-radius: 4px;
+		cursor: pointer;
+		font-size: 0.875rem;
+	}
+
+	.save-button:hover {
+		background-color: var(--pie-secondary-background, #f5f5f5);
+	}
+
+	.saved {
+		font-size: 0.8rem;
+		color: var(--pie-text-secondary, #666);
+	}
+</style>
+

package/src/reference-layout/components/PassagePanel.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import type { PassageEntity, RubricBlock } from '@pie-players/pie-players-shared/types';
+	import '$lib/tags/pie-iife-player/PieIifePlayer.svelte';
+	import PiePlayerStyles from '$lib/components/PiePlayerStyles.svelte';
+
+	let {
+		passage,
+		rubricBlocks = [],
+		bundleHost,
+		env
+	}: {
+		passage: PassageEntity | null;
+		rubricBlocks?: RubricBlock[];
+		bundleHost?: string;
+		env: { mode: string; role: string };
+	} = $props();
+
+	const passageConfig = $derived(passage?.config || null);
+	const blocks = $derived((rubricBlocks ?? []).filter((b) => !!b?.content));
+</script>
+
+{#if blocks.length}
+	<div class="passage-panel">
+		{#each blocks as block, idx (idx)}
+			<div class="rubric-block prose max-w-none">
+				{@html block.content}
+			</div>
+			{#if idx < blocks.length - 1}
+				<hr class="separator" />
+			{/if}
+		{/each}
+	</div>
+{:else if passageConfig}
+	<div class="passage-panel">
+		<PiePlayerStyles>
+			<pie-iife-player
+				config={passageConfig}
+				env={env}
+				session={{ id: '', data: [] }}
+				hosted={false}
+				show-bottom-border={false}
+				bundle-host={bundleHost}
+			></pie-iife-player>
+		</PiePlayerStyles>
+	</div>
+{:else}
+	<div class="passage-panel empty">
+		<p class="empty-message">No passage available for this item.</p>
+	</div>
+{/if}
+
+<style>
+	.passage-panel {
+		height: 100%;
+		padding: 1rem;
+		overflow-y: auto;
+	}
+
+	.separator {
+		border: none;
+		border-top: 1px solid var(--pie-border, #e0e0e0);
+		margin: 1rem 0;
+	}
+
+	.passage-panel.empty {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--pie-text-secondary, #666);
+	}
+
+	.empty-message {
+		font-style: italic;
+	}
+</style>
+