@pie-players/pie-assessment-toolkit 0.2.7 → 0.2.9

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

@@ -1,200 +0,0 @@
-<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

@@ -1,179 +0,0 @@
-<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

@@ -1,76 +0,0 @@
-<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>
-