Merge pull request #15 from pie-framework/develop

chillenious · web-flow · commit 6e774ceb95cc · 2026-01-12T09:47:14.000-08:00
assset loading fixes
diff --git a/packages/qti2-assessment-player/src/components/AssessmentShell.svelte b/packages/qti2-assessment-player/src/components/AssessmentShell.svelte
@@ -396,6 +396,7 @@
 							onResponseChange={handleResponseChange}
 							{typeset}
 							{i18n}
+							security={config.security}
 						/>
 					{/if}
 				</SplitPaneResizer>
@@ -414,6 +415,7 @@
 						onResponseChange={handleResponseChange}
 						{typeset}
 						{i18n}
+						security={config.security}
 					/>
 				{/if}
 			{/if}
diff --git a/packages/qti2-assessment-player/src/components/ItemRenderer.svelte b/packages/qti2-assessment-player/src/components/ItemRenderer.svelte
@@ -3,7 +3,7 @@
 	import { registerDefaultComponents } from '@pie-qti/qti2-default-components';
 	// @ts-expect-error - Svelte-check can't resolve workspace subpath exports, but runtime works correctly
 	import { ItemBody } from '@pie-qti/qti2-item-player/components';
-	import { Player, type QTIRole } from '@pie-qti/qti2-item-player';
+	import { Player, type PlayerSecurityConfig, type QTIRole } from '@pie-qti/qti2-item-player';
 	import type { I18nProvider } from '@pie-qti/qti2-i18n';
 	import { onMount } from 'svelte';
 	import type { QuestionRef } from '../types/index.js';
@@ -40,6 +40,8 @@
 		typeset?: (root: HTMLElement) => void | Promise<void>;
 		/** I18n provider for translations */
 		i18n?: I18nProvider;
+		/** Security configuration for URL policy and content restrictions */
+		security?: PlayerSecurityConfig;
 	}
 
 	const {
@@ -50,6 +52,7 @@
 		onResponseChange,
 		typeset,
 		i18n,
+		security,
 	}: Props = $props();
 
 	// Derive player from questionRef
@@ -62,6 +65,7 @@
 			const newPlayer = new Player({
 				itemXml: questionRef.itemXml,
 				role,
+				security,
 			});
 
 			// Ensure the item player can actually render interactions by registering the
diff --git a/packages/qti2-assessment-player/src/core/AssessmentPlayer.ts b/packages/qti2-assessment-player/src/core/AssessmentPlayer.ts
@@ -46,6 +46,11 @@ export interface BackendAssessmentPlayerConfig {
 	 * If provided, this will be shared across all item players in the assessment.
 	 */
 	i18nProvider?: any; // Will be I18nProvider from @pie-qti/qti2-i18n
+	/**
+	 * Security configuration for URL policy and content restrictions.
+	 * If provided, this will be passed to all item players in the assessment.
+	 */
+	security?: any; // Will be PlayerSecurityConfig from @pie-qti/qti2-item-player
 	// UI options
 	showSections?: boolean;
 	allowSectionNavigation?: boolean;
diff --git a/packages/qti2-example/src/lib/player-config.ts b/packages/qti2-example/src/lib/player-config.ts
@@ -0,0 +1,40 @@
+/**
+ * Player Configuration Utilities
+ *
+ * Provides common configuration objects for the QTI Player that handle
+ * deployment-specific concerns like asset URL resolution.
+ */
+
+import { base } from '$app/paths';
+import type { PlayerConfig } from '@pie-qti/qti2-item-player';
+
+/**
+ * Get the asset base URL for the current deployment.
+ * This handles the SvelteKit base path in production (e.g., /pie-qti/examples)
+ * while working correctly in development (empty base).
+ *
+ * @returns The full base URL for resolving relative asset paths in QTI XML
+ */
+export function getAssetBaseUrl(): string {
+	if (typeof window === 'undefined') return '';
+	return `${window.location.origin}${base}/`;
+}
+
+/**
+ * Get security configuration for the current deployment.
+ *
+ * Returns a PlayerSecurityConfig object that configures asset URL resolution
+ * for the current deployment path (e.g., GitHub Pages subpath routing).
+ *
+ * Note: Despite the name, this primarily configures URL resolution via
+ * `urlPolicy.assetBaseUrl` rather than security filtering.
+ *
+ * @returns PlayerSecurityConfig with urlPolicy.assetBaseUrl configured
+ */
+export function getSecurityConfig(): NonNullable<PlayerConfig['security']> {
+	return {
+		urlPolicy: {
+			assetBaseUrl: getAssetBaseUrl(),
+		},
+	};
+}
diff --git a/packages/qti2-example/src/routes/assessment-demo/+page.svelte b/packages/qti2-example/src/routes/assessment-demo/+page.svelte
@@ -5,6 +5,7 @@
 	import { typesetAction } from '@pie-qti/qti2-default-components/shared';
 	import { typesetMathInElement } from '@pie-qti/qti2-typeset-katex';
 	import { SAMPLE_ASSESSMENTS, type SampleAssessment, toSecureAssessment } from '$lib/sample-assessments';
+	import { getSecurityConfig } from '$lib/player-config';
 	import AssessmentEndScreen from './components/AssessmentEndScreen.svelte';
 	import FileUploader from './components/FileUploader.svelte';
 	import SampleSelector from './components/SampleSelector.svelte';
@@ -158,6 +159,7 @@
 							showSections: true,
 							allowSectionNavigation: true,
 							showProgress: true,
+							security: getSecurityConfig(),
 						}}
 						onSubmit={(r) => (results = r)}
 						typeset={(el) => typesetMathInElement(el)}
diff --git a/packages/qti2-example/src/routes/fixtures/assessment-player/+page.svelte b/packages/qti2-example/src/routes/fixtures/assessment-player/+page.svelte
@@ -6,6 +6,7 @@ import AssessmentShell from '@pie-qti/qti2-assessment-player/components/Assessme
 	import { typesetAction } from '@pie-qti/qti2-default-components/shared';
 	import { typesetMathInElement } from '@pie-qti/qti2-typeset-katex';
 	import { SAMPLE_ASSESSMENTS, type SampleAssessment, toSecureAssessment } from '$lib/sample-assessments';
+	import { getSecurityConfig } from '$lib/player-config';
 
 	let selectedSampleId = $state('reading-comp-1');
 	let selectedAssessment = $state<SampleAssessment | null>(null);
@@ -55,6 +56,7 @@ import AssessmentShell from '@pie-qti/qti2-assessment-player/components/Assessme
 						showSections: true,
 						allowSectionNavigation: true,
 						showProgress: true,
+						security: getSecurityConfig(),
 						onComplete: () => {
 							// No-op for test fixtures
 						},
diff --git a/packages/qti2-example/src/routes/fixtures/item-player/+page.svelte b/packages/qti2-example/src/routes/fixtures/item-player/+page.svelte
@@ -10,6 +10,7 @@
 	import { typesetMathInElement } from '@pie-qti/qti2-typeset-katex';
 	import { untrack } from 'svelte';
 	import { SAMPLE_ITEMS } from '$lib/sample-items';
+	import { getSecurityConfig } from '$lib/player-config';
 
 	let selectedSampleId = $state('simple-choice');
 	let xmlContent = $state('');
@@ -31,6 +32,7 @@
 		const newPlayer = new Player({
 			itemXml: xml,
 			role: selectedRole,
+			security: getSecurityConfig(),
 		});
 
 		player = newPlayer;
diff --git a/packages/qti2-example/src/routes/iframe-demo/+page.svelte b/packages/qti2-example/src/routes/iframe-demo/+page.svelte
@@ -3,6 +3,7 @@
 	import { onDestroy, onMount, getContext } from 'svelte';
 	import { base } from '$app/paths';
 	import { SAMPLE_ITEMS } from '$lib/sample-items';
+	import { getSecurityConfig } from '$lib/player-config';
 	import type { SvelteI18nProvider } from '@pie-qti/qti2-i18n';
 
 	const i18nContext = getContext<{ value: SvelteI18nProvider | null }>('i18n');
@@ -54,6 +55,7 @@
 		await host.init({
 			itemXml: item.xml,
 			role: 'candidate',
+			security: getSecurityConfig(),
 		});
 	}
 
diff --git a/packages/qti2-example/src/routes/item-demo/[sample]/+page.svelte b/packages/qti2-example/src/routes/item-demo/[sample]/+page.svelte
@@ -12,6 +12,7 @@
 	import type { SvelteI18nProvider } from '@pie-qti/qti2-i18n';
 	import { SAMPLE_ITEMS } from '$lib/sample-items';
 	import { getItemXmlForLocale, hasMultilingualVariants } from '$lib/locale-aware-items';
+	import { getSecurityConfig } from '$lib/player-config';
 	import ConfigurationPanel from './components/ConfigurationPanel.svelte';
 	import QuestionPanel from './components/QuestionPanel.svelte';
 	import ResizableDivider from './components/ResizableDivider.svelte';
@@ -73,6 +74,7 @@
 			const newPlayer = new Player({
 				itemXml: xml,
 				role: selectedRole,
+				security: getSecurityConfig(),
 			});
 
 			// Register default components with the player's registry
diff --git a/packages/qti2-example/src/routes/likert-demo/+page.svelte b/packages/qti2-example/src/routes/likert-demo/+page.svelte
@@ -8,6 +8,7 @@
 	import { typesetMathInElement } from '@pie-qti/qti2-typeset-katex';
 	import { browser } from '$app/environment';
 	import { ALL_LIKERT_ITEMS } from '$lib/sample-likert-items';
+	import { getSecurityConfig } from '$lib/player-config';
 
 	let selectedItemIndex = $state(0);
 	let currentItem = $derived(ALL_LIKERT_ITEMS[selectedItemIndex]);
@@ -18,6 +19,7 @@
 		const p = new Player({
 			itemXml: currentItem.xml,
 			plugins: [likertScalePlugin],
+			security: getSecurityConfig(),
 		});
 
 		// Register default components with the player's registry so ItemBody can render interactions.
diff --git a/packages/qti2-example/src/routes/wc-assessment/+page.svelte b/packages/qti2-example/src/routes/wc-assessment/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { READING_COMPREHENSION_ASSESSMENT } from '$lib/sample-assessments';
+	import { getSecurityConfig } from '$lib/player-config';
 
 	let status = $state<'booting' | 'registering' | 'registered' | 'rendered' | 'error'>('booting');
 	let message = $state<string>('Starting…');
@@ -63,6 +64,7 @@
 			el.assessmentTestXml = assessmentTestXml;
 			el.items = items;
 			el.config = { role: 'candidate', navigationMode: 'nonlinear', showSections: true };
+			el.security = getSecurityConfig();
 
 			const ok = await waitForRender(10000);
 			if (!ok) throw new Error('Timeout waiting for assessment to render');
diff --git a/packages/qti2-example/src/routes/wc-item/+page.svelte b/packages/qti2-example/src/routes/wc-item/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { SAMPLE_ITEMS } from '$lib/sample-items';
+	import { getSecurityConfig } from '$lib/player-config';
 
 	let status = $state<'booting' | 'registering' | 'registered' | 'rendered' | 'error'>('booting');
 	let message = $state<string>('Starting…');
@@ -43,6 +44,7 @@
 			el.identifier = sample?.id ?? 'item';
 			el.title = sample?.title ?? 'Item';
 			el.role = 'candidate';
+			el.security = getSecurityConfig();
 
 			const ok = await waitForRender(8000);
 			if (!ok) throw new Error('Timeout waiting for item to render');
diff --git a/packages/qti2-player-elements/src/elements/Qti22AssessmentPlayerElement.ts b/packages/qti2-player-elements/src/elements/Qti22AssessmentPlayerElement.ts
@@ -1,6 +1,7 @@
 import type { AssessmentResults, BackendAdapter, BackendAssessmentPlayerConfig, InitSessionRequest, SecureAssessment } from '@pie-qti/qti2-assessment-player';
 import { ReferenceBackendAdapter } from '@pie-qti/qti2-assessment-player';
 import AssessmentShell from '@pie-qti/qti2-assessment-player/components/AssessmentShell.svelte';
+import type { PlayerSecurityConfig } from '@pie-qti/qti2-item-player';
 import { QTI22_ASSESSMENT_PLAYER_TAG } from '../constants.js';
 import { parseAssessmentTestXml } from '../qti/parseAssessmentTest.js';
 import { type QtiItemMap, resolveItemsForAssessment } from '../qti/resolveItems.js';
@@ -37,6 +38,7 @@ export class Qti22AssessmentPlayerElement extends BaseSvelteMountElement<Record<
 			'items-json',
 			// Common
 			'config-json',
+			'security-json',
 		];
 	}
 
@@ -48,6 +50,7 @@ export class Qti22AssessmentPlayerElement extends BaseSvelteMountElement<Record<
 	#itemBaseUrl: string | undefined;
 	#items: QtiItemMap | undefined;
 	#config: Partial<BackendAssessmentPlayerConfig> = {};
+	#security: PlayerSecurityConfig | undefined;
 
 	#backend: BackendAdapter = {
 		async initSession(_request) {
@@ -104,6 +107,11 @@ export class Qti22AssessmentPlayerElement extends BaseSvelteMountElement<Record<
 			if (parsed) this.#config = parsed;
 		}
 
+		if (name === 'security-json') {
+			const parsed = safeJsonParse<PlayerSecurityConfig>(newValue);
+			if (parsed) this.#security = parsed;
+		}
+
 		void this.#syncFromQti();
 		// Don't call _mountOrUpdate here - let #syncFromQti handle it when done
 	}
@@ -116,6 +124,14 @@ export class Qti22AssessmentPlayerElement extends BaseSvelteMountElement<Record<
 		this._mountOrUpdate();
 	}
 
+	get security() {
+		return this.#security;
+	}
+	set security(value: PlayerSecurityConfig | undefined) {
+		this.#security = value;
+		this._mountOrUpdate();
+	}
+
 	/**
 	 * Pure-QTI API (preferred): supply an assessmentTest XML string and let the element
 	 * resolve itemRefs via either an item map (A) or base URL fetching (B).
@@ -283,6 +299,7 @@ export class Qti22AssessmentPlayerElement extends BaseSvelteMountElement<Record<
 		// Consumers should listen to DOM events instead.
 		const baseConfig: Partial<BackendAssessmentPlayerConfig> = {
 			...this.#config,
+			security: this.#security,
 			onItemChange: (itemIndex: number, totalItems: number) => {
 				const detail: Qti22AssessmentItemChangeDetail = { itemIndex, totalItems };
 				this.dispatchEvent(
diff --git a/packages/qti2-player-elements/src/elements/Qti22ItemPlayerElement.ts b/packages/qti2-player-elements/src/elements/Qti22ItemPlayerElement.ts
@@ -1,5 +1,5 @@
 import ItemRenderer from '@pie-qti/qti2-assessment-player/components/ItemRenderer.svelte';
-import type { QTIRole } from '@pie-qti/qti2-item-player';
+import type { PlayerSecurityConfig, QTIRole } from '@pie-qti/qti2-item-player';
 import { QTI22_ITEM_PLAYER_TAG } from '../constants.js';
 import { safeJsonParse } from '../utils/json.js';
 import { BaseSvelteMountElement } from './BaseSvelteMountElement.js';
@@ -19,6 +19,7 @@ export class Qti22ItemPlayerElement extends BaseSvelteMountElement<Record<string
 			'role',
 			'extended-text-editor',
 			'responses-json',
+			'security-json',
 		];
 	}
 
@@ -30,6 +31,7 @@ export class Qti22ItemPlayerElement extends BaseSvelteMountElement<Record<string
 	#role: QTIRole = 'candidate';
 	#extendedTextEditor: 'tiptap' | 'textarea' = 'tiptap';
 	#responses: Record<string, unknown> = {};
+	#security: PlayerSecurityConfig | undefined;
 
 	#updateSeq = 0;
 
@@ -64,6 +66,11 @@ export class Qti22ItemPlayerElement extends BaseSvelteMountElement<Record<string
 				if (parsed) this.#responses = parsed;
 				break;
 			}
+			case 'security-json': {
+				const parsed = safeJsonParse<PlayerSecurityConfig>(newValue);
+				if (parsed) this.#security = parsed;
+				break;
+			}
 		}
 
 		void this.#syncState();
@@ -120,6 +127,14 @@ export class Qti22ItemPlayerElement extends BaseSvelteMountElement<Record<string
 		void this.#syncState();
 	}
 
+	get security() {
+		return this.#security;
+	}
+	set security(value: PlayerSecurityConfig | undefined) {
+		this.#security = value;
+		void this.#syncState();
+	}
+
 	/**
 	 * Convenience: programmatically set a response.
 	 */
@@ -153,6 +168,7 @@ export class Qti22ItemPlayerElement extends BaseSvelteMountElement<Record<string
 			role: this.#role,
 			extendedTextEditor: this.#extendedTextEditor,
 			responses: this.#responses,
+			security: this.#security,
 			onResponseChange: (responseId: string, value: unknown) => {
 				this.#responses = { ...this.#responses, [responseId]: value };
 				const detail: Qti22ItemPlayerResponseChangeDetail = {
