@pie-players/pie-section-player 0.2.12 → 0.2.13

package/src/components/ItemModeLayout.svelte

@@ -1,172 +0,0 @@
-<!--
-  ItemModeLayout - Internal Component
-
-  Renders item mode (keepTogether: false) - one item at a time with navigation.
-  Not exposed as a web component - used internally in PieSectionPlayer.
--->
-<script lang="ts">
-	import type { SectionCompositionModel } from '../controllers/types.js';
-	import ItemNavigation from './ItemNavigation.svelte';
-	import ItemRenderer from './ItemRenderer.svelte';
-
-	let {
-		composition,
-		env = { mode: 'gather', role: 'student' },
-		toolbarPosition = 'right',
-		showToolbar = true,
-		onprevious,
-		onnext
-	}: {
-		composition: SectionCompositionModel;
-		env?: { mode: 'gather' | 'view' | 'evaluate' | 'author'; role: 'student' | 'instructor' };
-		toolbarPosition?: 'top' | 'right' | 'bottom' | 'left' | 'none';
-		showToolbar?: boolean;
-		onprevious?: () => void;
-		onnext?: () => void;
-	} = $props();
-
-	let passages = $derived(composition?.passages || []);
-	let items = $derived(composition?.items || []);
-	let currentIndex = $derived(composition?.currentItemIndex || 0);
-	let totalItems = $derived(items.length);
-	let currentItem = $derived(composition?.currentItem || items[currentIndex] || null);
-	let itemSessionsByItemId = $derived(composition?.itemSessionsByItemId || {});
-	let itemSession = $derived(currentItem?.id ? itemSessionsByItemId[currentItem.id] : undefined);
-	let canPrevious = $derived(currentIndex > 0);
-	let canNext = $derived(currentIndex < totalItems - 1);
-	let shouldRenderToolbar = $derived(showToolbar && toolbarPosition !== 'none');
-	let isToolbarBeforeContent = $derived(
-		toolbarPosition === 'top' || toolbarPosition === 'left'
-	);
-</script>
-
-<div class={`pie-section-player__layout-shell pie-section-player__layout-shell--${toolbarPosition}`}>
-	{#if shouldRenderToolbar && isToolbarBeforeContent}
-		<pie-section-tools-toolbar
-			position={toolbarPosition}
-			enabled-tools=""
-		></pie-section-tools-toolbar>
-	{/if}
-	<div class="pie-section-player__item-mode-layout">
-		<!-- Passages (visible for all items) -->
-		{#if passages.length > 0}
-			<div class="pie-section-player__passages-section">
-				{#each passages as passage (passage.id)}
-					<div class="pie-section-player__passage-wrapper">
-						<ItemRenderer
-							item={passage}
-							contentKind="rubric-block-stimulus"
-							env={{ mode: 'view', role: env.role }}
-							customClassName="pie-section-player__passage-item"
-						/>
-					</div>
-				{/each}
-			</div>
-		{/if}
-
-		<!-- Current Item -->
-		{#if currentItem}
-			<div class="pie-section-player__current-item-section">
-				<ItemRenderer
-					item={currentItem}
-					contentKind="assessment-item"
-					{env}
-					session={itemSession}
-					customClassName="pie-section-player__item-content"
-				/>
-			</div>
-		{:else}
-			<div class="pie-section-player__no-item">
-				<p>No item to display</p>
-			</div>
-		{/if}
-
-		<!-- Navigation -->
-		<ItemNavigation
-			{currentIndex}
-			{totalItems}
-			{canNext}
-			{canPrevious}
-			{onprevious}
-			{onnext}
-		/>
-	</div>
-	{#if shouldRenderToolbar && !isToolbarBeforeContent}
-		<pie-section-tools-toolbar
-			position={toolbarPosition}
-			enabled-tools=""
-		></pie-section-tools-toolbar>
-	{/if}
-</div>
-
-<style>
-	.pie-section-player__layout-shell {
-		display: flex;
-		width: 100%;
-		height: 100%;
-		min-height: 0;
-		overflow: hidden;
-	}
-
-	.pie-section-player__layout-shell--top,
-	.pie-section-player__layout-shell--bottom,
-	.pie-section-player__layout-shell--none {
-		flex-direction: column;
-	}
-
-	.pie-section-player__layout-shell--left,
-	.pie-section-player__layout-shell--right {
-		flex-direction: row;
-	}
-
-	.pie-section-player__item-mode-layout {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		gap: 1.5rem;
-		padding: 1rem;
-		overflow-y: auto;
-	}
-
-	.pie-section-player__passages-section {
-		display: flex;
-		flex-direction: column;
-		gap: 1rem;
-	}
-
-	.pie-section-player__passages-section :global(.pie-section-player__passage-item) {
-		padding: 0;
-		background: transparent;
-		border: 0;
-		border-radius: 0;
-	}
-
-	.pie-section-player__passage-wrapper {
-		flex-shrink: 0;
-		padding: 0.25rem;
-		background: var(--pie-white, white);
-		border: 1px solid var(--pie-border-light, #e5e7eb);
-		border-radius: 6px;
-	}
-
-	.pie-section-player__current-item-section {
-		padding: 0.25rem;
-		background: var(--pie-white, white);
-		border: 1px solid var(--pie-border-light, #e5e7eb);
-		border-radius: 6px;
-		min-height: 300px;
-	}
-
-	.pie-section-player__no-item {
-		padding: 2rem;
-		text-align: center;
-		color: var(--pie-disabled-secondary, #999);
-	}
-
-	/* Responsive */
-	@media (max-width: 768px) {
-		.pie-section-player__item-mode-layout {
-			gap: 1rem;
-		}
-	}
-</style>

package/src/components/ItemNavigation.svelte

@@ -1,96 +0,0 @@
-<!--
-  ItemNavigation - Internal Component
-
-  Navigation controls for item mode (keepTogether: false).
-  Not exposed as a web component - used internally in PieSectionPlayer.
--->
-<script lang="ts">
-	let {
-		currentIndex,
-		totalItems,
-		canNext,
-		canPrevious,
-		onprevious,
-		onnext
-	}: {
-		currentIndex: number;
-		totalItems: number;
-		canNext: boolean;
-		canPrevious: boolean;
-		onprevious?: () => void;
-		onnext?: () => void;
-	} = $props();
-</script>
-
-<div class="pie-section-player__item-navigation">
-	<button
-		type="button"
-		class="pie-section-player__nav-button pie-section-player__nav-button--previous"
-		disabled={!canPrevious}
-		onclick={onprevious}
-	>
-		Previous
-	</button>
-	<span class="pie-section-player__item-counter">
-		{currentIndex + 1} / {totalItems}
-	</span>
-	<button
-		type="button"
-		class="pie-section-player__nav-button pie-section-player__nav-button--next"
-		disabled={!canNext}
-		onclick={onnext}
-	>
-		Next
-	</button>
-</div>
-
-<style>
-	.pie-section-player__item-navigation {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		padding: 1rem;
-		background: var(--pie-secondary-background, #f9f9f9);
-		border-top: 1px solid var(--pie-border-light, #e0e0e0);
-		gap: 1rem;
-	}
-
-	.pie-section-player__nav-button {
-		padding: 0.5rem 1rem;
-		background: var(--pie-primary, #007bff);
-		color: var(--pie-white, white);
-		border: none;
-		border-radius: 4px;
-		cursor: pointer;
-		font-size: 0.9rem;
-		transition: background 0.2s;
-		min-width: 100px;
-	}
-
-	.pie-section-player__nav-button:hover:not(:disabled) {
-		background: var(--pie-primary-dark, #0056b3);
-	}
-
-	.pie-section-player__nav-button:disabled {
-		background: var(--pie-disabled-secondary, #ccc);
-		cursor: not-allowed;
-		opacity: 0.6;
-	}
-
-	.pie-section-player__item-counter {
-		font-size: 0.9rem;
-		color: var(--pie-disabled, #666);
-		font-weight: 500;
-	}
-
-	/* Responsive */
-	@media (max-width: 768px) {
-		.pie-section-player__item-navigation {
-			flex-direction: column;
-		}
-
-		.pie-section-player__nav-button {
-			width: 100%;
-		}
-	}
-</style>

package/src/components/ItemPlayerBridge.svelte

@@ -1,110 +0,0 @@
-<script lang="ts">
-	import type { ComponentDefinition } from "../component-definitions.js";
-	import type { ItemEntity, PassageEntity } from "@pie-players/pie-players-shared";
-	import { onMount, untrack } from "svelte";
-
-	let {
-		item,
-		env,
-		session,
-		hasElements,
-		resolvedPlayerTag,
-		resolvedPlayerDefinition,
-		skipElementLoading = true,
-		onsessionchanged,
-	}: {
-		item: ItemEntity | PassageEntity;
-		env: {
-			mode: "gather" | "view" | "evaluate" | "author";
-			role: "student" | "instructor";
-		};
-		session: any;
-		hasElements: boolean;
-		resolvedPlayerTag: string;
-		resolvedPlayerDefinition?: ComponentDefinition;
-		skipElementLoading?: boolean;
-		onsessionchanged?: (event: CustomEvent) => void;
-	} = $props();
-
-	let playerElement: any = $state(null);
-	let lastConfig: any = null;
-	let lastEnv: any = null;
-
-	onMount(() => {
-		(async () => {
-			if (hasElements) {
-				await resolvedPlayerDefinition?.ensureDefined?.();
-			}
-		})();
-	});
-
-	$effect(() => {
-		const currentConfig = item.config;
-		const currentEnv = env;
-		const currentSession = session;
-
-		if (!playerElement || !currentConfig || !hasElements) return;
-
-		const envChanged =
-			!lastEnv ||
-			lastEnv.mode !== currentEnv.mode ||
-			lastEnv.role !== currentEnv.role;
-		if (currentConfig === lastConfig && !envChanged) return;
-
-		untrack(() => {
-			playerElement.config = currentConfig;
-			playerElement.session = currentSession;
-			playerElement.env = currentEnv;
-			if (resolvedPlayerDefinition?.attributes) {
-				for (const [name, value] of Object.entries(
-					resolvedPlayerDefinition.attributes,
-				)) {
-					playerElement.setAttribute(name, value);
-				}
-			}
-			if (resolvedPlayerDefinition?.props) {
-				for (const [name, value] of Object.entries(resolvedPlayerDefinition.props)) {
-					(playerElement as any)[name] = value;
-				}
-			}
-			if (skipElementLoading) {
-				playerElement.setAttribute("skip-element-loading", "true");
-				(playerElement as any).skipElementLoading = true;
-			}
-		});
-
-		lastConfig = currentConfig;
-		lastEnv = currentEnv;
-	});
-
-	$effect(() => {
-		if (!playerElement || !onsessionchanged) return;
-
-		const handler = (event: Event) => {
-			const customEvent = event as CustomEvent;
-			console.debug('[ItemPlayerBridge][SessionTrace] session-changed received', {
-				itemId: item?.id || null,
-				envMode: env?.mode,
-				envRole: env?.role,
-				detailKeys:
-					customEvent?.detail && typeof customEvent.detail === 'object'
-						? Object.keys(customEvent.detail)
-						: []
-			});
-			onsessionchanged(event as CustomEvent);
-		};
-
-		playerElement.addEventListener("session-changed", handler);
-		return () => {
-			playerElement.removeEventListener("session-changed", handler);
-		};
-	});
-</script>
-
-{#if hasElements}
-	{#key resolvedPlayerTag}
-		<svelte:element this={resolvedPlayerTag} bind:this={playerElement}></svelte:element>
-	{/key}
-{:else}
-	{@html item.config.markup}
-{/if}

package/src/components/ItemRenderer.svelte

@@ -1,248 +0,0 @@
-<!--
-  ItemRenderer - Internal Component
-
-  Renders a single item using the IIFE player.
-  Handles SSML extraction, TTS service binding, and player lifecycle.
--->
-<script lang="ts">
-  import {
-    SSMLExtractor,
-    assessmentToolkitRuntimeContext,
-    createScopedToolId,
-    type AssessmentToolkitRuntimeContext,
-  } from "@pie-players/pie-assessment-toolkit";
-  import { ContextConsumer } from "@pie-players/pie-context";
-  import "@pie-players/pie-assessment-toolkit/components/item-toolbar-element";
-	import {
-		DEFAULT_PLAYER_DEFINITIONS,
-	} from "../component-definitions.js";
-  import ItemPlayerBridge from "./ItemPlayerBridge.svelte";
-  import ItemShell, { type QtiContentKind } from "./ItemShell.svelte";
-  import type { ItemEntity, PassageEntity } from "@pie-players/pie-players-shared";
-  import { onMount, untrack } from "svelte";
-
-  type SectionPlayerRuntimeContext = AssessmentToolkitRuntimeContext & {
-    reportSessionChanged?: (itemId: string, detail: unknown) => void;
-  };
-
-  let {
-    item,
-    env = { mode: "gather", role: "student" },
-    session = { id: "", data: [] },
-    contentKind = "assessment-item" as QtiContentKind,
-    skipElementLoading = true,
-    customClassName = "",
-    onsessionchanged,
-  }: {
-    item: ItemEntity | PassageEntity;
-    env?: {
-      mode: "gather" | "view" | "evaluate" | "author";
-      role: "student" | "instructor";
-    };
-    session?: any;
-    contentKind?: QtiContentKind;
-    skipElementLoading?: boolean;
-    playerVersion?: string;
-    customClassName?: string;
-    onsessionchanged?: (event: CustomEvent) => void;
-  } = $props();
-
-  function handlePlayerSessionChanged(event: CustomEvent) {
-    console.debug("[ItemRenderer][SessionTrace] handlePlayerSessionChanged", {
-      itemId: item?.id || null,
-      contentKind,
-      hasRuntimeReporter: !!runtimeContext?.reportSessionChanged,
-      hasOnSessionChangedProp: !!onsessionchanged,
-      detailKeys:
-        event?.detail && typeof event.detail === "object"
-          ? Object.keys(event.detail)
-          : [],
-    });
-    // Section item sessions are reported through runtime context to avoid
-    // callback prop-drilling across internal layout components.
-    if (contentKind === "assessment-item") {
-      const itemId = item.id || "";
-      if (itemId && runtimeContext?.reportSessionChanged) {
-        console.debug("[ItemRenderer][SessionTrace] forwarding via runtimeContext", {
-          itemId,
-        });
-        event.stopPropagation();
-        runtimeContext.reportSessionChanged(itemId, event.detail);
-        return;
-      }
-    }
-    if (onsessionchanged) {
-      console.debug("[ItemRenderer][SessionTrace] forwarding via onsessionchanged prop", {
-        itemId: item?.id || null,
-      });
-      event.stopPropagation();
-      onsessionchanged(event);
-    }
-  }
-
-  // Get the DOM element reference for service binding
-  let contextHostElement: HTMLElement | null = $state(null);
-  let itemContentElement: HTMLElement | null = $state(null);
-  let itemToolbarElement: HTMLElement | null = $state(null);
-  let runtimeContext = $state<SectionPlayerRuntimeContext | null>(null);
-  let runtimeContextConsumer: ContextConsumer<
-    typeof assessmentToolkitRuntimeContext
-  > | null = null;
-
-  // Runtime dependencies come from assessment toolkit context.
-  const effectiveToolkitCoordinator = $derived(runtimeContext?.toolkitCoordinator);
-  const toolCoordinator = $derived(
-    effectiveToolkitCoordinator?.toolCoordinator,
-  );
-  const catalogResolver = $derived(
-    effectiveToolkitCoordinator?.catalogResolver,
-  );
-
-  // Consume runtime context from the section-player provider tree.
-  $effect(() => {
-    if (!contextHostElement) return;
-    runtimeContextConsumer = new ContextConsumer(contextHostElement, {
-      context: assessmentToolkitRuntimeContext,
-      subscribe: true,
-      onValue: (value: AssessmentToolkitRuntimeContext) => {
-        runtimeContext = value as SectionPlayerRuntimeContext;
-      },
-    });
-    runtimeContextConsumer.connect();
-    return () => {
-      runtimeContextConsumer?.disconnect();
-      runtimeContextConsumer = null;
-    };
-  });
-
-  let calculatorVisible = $state(false);
-
-  let hasElements = $derived(
-    !!(item?.config?.elements && Object.keys(item.config.elements).length > 0),
-  );
-
-  let resolvedPlayerDefinition = $derived.by(
-    () => DEFAULT_PLAYER_DEFINITIONS["iife"],
-  );
-  let resolvedPlayerTag = $derived(resolvedPlayerDefinition?.tagName || "pie-iife-player");
-
-  onMount(() => {
-    // Cleanup: clear this item's catalogs on unmount.
-    return () => {
-      if (catalogResolver) {
-        catalogResolver.clearItemCatalogs();
-      }
-    };
-  });
-
-  // Extract SSML from item config when item changes
-  $effect(() => {
-    if (item?.config && catalogResolver) {
-      // Skip if already extracted
-      if (item.config.extractedCatalogs) {
-        catalogResolver.clearItemCatalogs();
-        catalogResolver.addItemCatalogs(item.config.extractedCatalogs);
-        return;
-      }
-
-      const extractor = new SSMLExtractor();
-      const result = extractor.extractFromItemConfig(item.config);
-
-      // Update config with cleaned content (SSML removed, catalog IDs added)
-      untrack(() => {
-        item.config = result.cleanedConfig;
-        item.config.extractedCatalogs = result.catalogs;
-      });
-
-      // Register catalogs with resolver for TTS lookup
-      if (result.catalogs.length > 0) {
-        catalogResolver.clearItemCatalogs(); // Clear previous item's catalogs
-        catalogResolver.addItemCatalogs(result.catalogs);
-        console.debug(
-          `[ItemRenderer] Extracted ${result.catalogs.length} SSML catalogs for item ${item.id}`,
-        );
-      }
-    }
-  });
-
-  // Bind direct item contracts to item toolbar.
-  $effect(() => {
-    if (!itemToolbarElement) return;
-    if (itemContentElement) {
-      (itemToolbarElement as any).scopeElement = itemContentElement;
-    }
-    if (item) {
-      (itemToolbarElement as any).item = item;
-    }
-  });
-
-
-  // Subscribe to calculator visibility changes
-  $effect(() => {
-    if (!toolCoordinator || !item) return;
-    const scopedCalculatorId = createScopedToolId(
-      "calculator",
-      "item",
-      item.id || "unknown-item",
-    );
-
-    const unsubscribe = toolCoordinator.subscribe(() => {
-      calculatorVisible = toolCoordinator.isToolVisible(scopedCalculatorId);
-    });
-
-    // Initial update
-    calculatorVisible = toolCoordinator.isToolVisible(scopedCalculatorId);
-
-    return unsubscribe;
-  });
-</script>
-
-<div bind:this={contextHostElement} data-item-id={item.id || ""}>
-  {#if item.config}
-    <ItemShell
-      {item}
-      {contentKind}
-      {customClassName}
-    >
-      <pie-item-toolbar
-        slot="toolbar"
-        bind:this={itemToolbarElement}
-        item-id={item.id}
-        catalog-id={item.id}
-        tools="calculator,tts,answerEliminator"
-        content-kind={contentKind}
-        size="md"
-        language="en-US"
-      ></pie-item-toolbar>
-
-      <div class="pie-section-player__item-content" bind:this={itemContentElement}>
-        <ItemPlayerBridge
-          {item}
-          {env}
-          {session}
-          {hasElements}
-          resolvedPlayerTag={resolvedPlayerTag}
-          resolvedPlayerDefinition={resolvedPlayerDefinition}
-          {skipElementLoading}
-          onsessionchanged={handlePlayerSessionChanged}
-        />
-      </div>
-    </ItemShell>
-
-    <!-- Calculator Tool Instance (rendered outside panel for floating overlay) -->
-    {#if item}
-      <pie-tool-calculator
-        visible={calculatorVisible}
-        tool-id={createScopedToolId("calculator", "item", item.id || "unknown-item")}
-      ></pie-tool-calculator>
-    {/if}
-  {/if}
-</div>
-
-<style>
-  .pie-section-player__item-content {
-    padding: 1rem;
-    border: 1px solid var(--pie-border-light, #e5e7eb);
-    border-radius: 4px;
-  }
-</style>

package/src/components/ItemShell.svelte

@@ -1,86 +0,0 @@
-<script lang="ts">
-	import {
-		assessmentToolkitRuntimeContext,
-		type AssessmentToolkitRuntimeContext,
-	} from "@pie-players/pie-assessment-toolkit";
-	import { ContextConsumer } from "@pie-players/pie-context";
-	import type { ItemEntity, PassageEntity } from "@pie-players/pie-players-shared";
-
-	export type QtiContentKind =
-		| "assessment-item"
-		| "rubric-block-stimulus"
-		| "rubric-block-instructions"
-		| "rubric-block-rubric";
-
-	let {
-		item,
-		contentKind = "assessment-item" as QtiContentKind,
-		customClassName = "",
-	}: {
-		item: ItemEntity | PassageEntity;
-		contentKind?: QtiContentKind;
-		customClassName?: string;
-	} = $props();
-
-	let contextHostElement = $state<HTMLElement | null>(null);
-	let runtimeContext = $state<AssessmentToolkitRuntimeContext | null>(null);
-	let runtimeContextConsumer: ContextConsumer<
-		typeof assessmentToolkitRuntimeContext
-	> | null = null;
-
-	const effectiveAssessmentId = $derived(runtimeContext?.assessmentId ?? "");
-	const effectiveSectionId = $derived(runtimeContext?.sectionId ?? "");
-
-	$effect(() => {
-		if (!contextHostElement) return;
-		runtimeContextConsumer = new ContextConsumer(contextHostElement, {
-			context: assessmentToolkitRuntimeContext,
-			subscribe: true,
-			onValue: (value: AssessmentToolkitRuntimeContext) => {
-				runtimeContext = value;
-			},
-		});
-		runtimeContextConsumer.connect();
-		return () => {
-			runtimeContextConsumer?.disconnect();
-			runtimeContextConsumer = null;
-		};
-	});
-</script>
-
-<div
-	bind:this={contextHostElement}
-	class="pie-section-player__item-renderer {customClassName}"
-	data-assessment-id={effectiveAssessmentId}
-	data-section-id={effectiveSectionId}
-	data-item-id={item.id}
-	data-content-kind={contentKind}
->
-	<div class="pie-section-player__item-header">
-		<h4 class="pie-section-player__item-title">{item.name || "Question"}</h4>
-		<slot name="toolbar"></slot>
-	</div>
-	<slot></slot>
-</div>
-
-<style>
-	.pie-section-player__item-renderer {
-		display: block;
-		margin-bottom: 0;
-	}
-
-	.pie-section-player__item-header {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 0.75rem 0;
-		margin-bottom: 0.5rem;
-	}
-
-	.pie-section-player__item-title {
-		margin: 0;
-		font-size: 0.95rem;
-		font-weight: 600;
-		color: var(--pie-primary, #1976d2);
-	}
-</style>