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

package/dist/components/ItemToolBar.custom-element.js

@@ -0,0 +1,628 @@
+// @ts-nocheck
+import 'svelte/internal/disclose-version';
+import * as $ from 'svelte/internal/client';
+
+import {
+	connectAssessmentToolkitRuntimeContext,
+	connectAssessmentToolkitShellContext
+} from '../context/runtime-context-consumer.js';
+
+import { createDefaultToolRegistry } from '../services/createDefaultToolRegistry.js';
+import { DEFAULT_TOOL_MODULE_LOADERS } from '../tools/default-tool-module-loaders.js';
+import { normalizeToolsConfig, parseToolList, resolveToolsForLevel } from '../services/tools-config-normalizer.js';
+import { createScopedToolId, parseScopedToolId } from '../services/tool-instance-id.js';
+
+var root_3 = $.from_html(`<span class="item-toolbar__element-host svelte-rnx3ie"></span>`);
+var root_6 = $.from_html(`<img class="item-toolbar__icon-image svelte-rnx3ie" alt=""/>`);
+var root_7 = $.from_html(`<i aria-hidden="true"></i>`);
+var root_4 = $.from_html(`<button type="button"><!></button>`);
+var root_8 = $.from_html(`<span class="item-toolbar__element-host svelte-rnx3ie"></span>`);
+var root_2 = $.from_html(`<!> <!> <!>`, 1);
+var root_1 = $.from_html(`<div></div>`);
+
+const $$css = {
+	hash: 'svelte-rnx3ie',
+	code: '.item-toolbar.svelte-rnx3ie {display:flex;align-items:center;gap:0.5rem;}.item-toolbar__button.svelte-rnx3ie {display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0.25rem;border:1px solid var(--pie-border, #ccc);border-radius:0.25rem;background-color:var(--pie-background, white);color:var(--pie-text, #333);cursor:pointer;transition:all 0.15s ease;}.item-toolbar__element-host.svelte-rnx3ie {display:contents;}.item-toolbar--sm.svelte-rnx3ie .item-toolbar__button:where(.svelte-rnx3ie) {width:2.75rem;height:2.75rem;}.item-toolbar--lg.svelte-rnx3ie .item-toolbar__button:where(.svelte-rnx3ie) {width:2.5rem;height:2.5rem;}.item-toolbar__button.svelte-rnx3ie:hover:not(:disabled) {background-color:var(--pie-secondary-background, #f5f5f5);transform:translateY(-1px);box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);}.item-toolbar__button.svelte-rnx3ie:active:not(:disabled) {transform:translateY(0);box-shadow:none;}.item-toolbar__button--active.svelte-rnx3ie {background-color:var(--pie-primary, #1976d2);color:white;border-color:var(--pie-primary, #1976d2);}.item-toolbar__button--active.svelte-rnx3ie:hover:not(:disabled) {background-color:var(--pie-primary-dark, #1565c0);}.item-toolbar__button.svelte-rnx3ie:focus-visible {outline:2px solid var(--pie-primary, #1976d2);outline-offset:2px;}.item-toolbar__button.svelte-rnx3ie:disabled {opacity:0.5;cursor:not-allowed;}.item-toolbar__button.svelte-rnx3ie svg {width:100%;height:100%;}.item-toolbar__icon-image.svelte-rnx3ie {width:100%;height:100%;object-fit:contain;}'
+};
+
+export default function ItemToolBar($$anchor, $$props) {
+	$.push($$props, true);
+	$.append_styles($$anchor, $$css);
+
+	const isBrowser = typeof window !== 'undefined';
+	const fallbackToolRegistry = createDefaultToolRegistry({ toolModuleLoaders: DEFAULT_TOOL_MODULE_LOADERS });
+	let activeToolState = $.state($.proxy({}));
+
+	// Props
+	let itemId = $.prop($$props, 'itemId', 7, ''),
+		catalogId = $.prop($$props, 'catalogId', 7, ''),
+		tools = $.prop($$props, 'tools', 7, 'calculator,textToSpeech,answerEliminator'),
+		contentKind = $.prop($$props, 'contentKind', 7, 'assessment-item'),
+		scopeElement = $.prop($$props, 'scopeElement', 7, null),
+		toolRegistry = $.prop($$props, 'toolRegistry', 7, null),
+		pnpResolver = $.prop($$props, 'pnpResolver', 7, null),
+		assessment = $.prop($$props, 'assessment', 7, null),
+		itemRef = $.prop($$props, 'itemRef', 7, null),
+		item = $.prop($$props, 'item', 7, null),
+		className = $.prop($$props, 'class', 7, ''),
+		size = $.prop($$props, 'size', 7, 'md'),
+		language = $.prop($$props, 'language', 7, 'en-US');
+
+	let toolbarRootElement = $.state(null);
+	let runtimeContext = $.state(null);
+	let shellContext = $.state(null);
+	let moduleLoadVersion = $.state(0);
+
+	$.user_effect(() => {
+		if (!$.get(toolbarRootElement)) return;
+
+		return connectAssessmentToolkitRuntimeContext($.get(toolbarRootElement), (value) => {
+			$.set(runtimeContext, value, true);
+		});
+	});
+
+	$.user_effect(() => {
+		if (!$.get(toolbarRootElement)) return;
+
+		return connectAssessmentToolkitShellContext($.get(toolbarRootElement), (value) => {
+			$.set(shellContext, value, true);
+		});
+	});
+
+	const effectiveToolCoordinator = $.derived(() => $.get(runtimeContext)?.toolCoordinator);
+	const effectiveTTSService = $.derived(() => $.get(runtimeContext)?.ttsService);
+	const effectiveElementToolStateStore = $.derived(() => $.get(runtimeContext)?.elementToolStateStore);
+	const effectiveAssessmentId = $.derived(() => $.get(runtimeContext)?.assessmentId ?? '');
+	const effectiveSectionId = $.derived(() => $.get(runtimeContext)?.sectionId ?? '');
+	const effectiveItemId = $.derived(() => itemId() || $.get(shellContext)?.itemId || '');
+	const effectiveCanonicalItemId = $.derived(() => $.get(shellContext)?.canonicalItemId || $.get(effectiveItemId));
+	const effectiveCatalogId = $.derived(() => catalogId() || $.get(effectiveItemId));
+	const effectiveContentKind = $.derived(() => contentKind() || $.get(shellContext)?.contentKind || 'assessment-item');
+	const effectiveItem = $.derived(() => item() || $.get(shellContext)?.item || null);
+
+	// Effective registry for visibility and metadata ownership.
+	const effectiveToolRegistry = $.derived(() => toolRegistry() || fallbackToolRegistry);
+
+	const explicitTools = $.derived(() => parseToolList(tools()));
+	const normalizedExplicitTools = $.derived(() => $.get(effectiveToolRegistry).normalizeToolIds($.get(explicitTools)).filter(Boolean));
+
+	const effectiveToolsConfig = $.derived(() => {
+		const coordinatorConfig = $.get(runtimeContext)?.toolkitCoordinator?.config?.tools;
+
+		return normalizeToolsConfig(coordinatorConfig || {});
+	});
+
+	const placementLevel = $.derived(() => $.get(effectiveContentKind) === 'rubric-block-stimulus' ? 'passage' : 'item');
+
+	const placementAllowedToolIds = $.derived(() => {
+		const resolved = resolveToolsForLevel($.get(effectiveToolsConfig), $.get(placementLevel));
+
+		return $.get(effectiveToolRegistry).normalizeToolIds(resolved).filter(Boolean);
+	});
+
+	// Pass 1: determine allowed tools
+	const allowedToolIds = $.derived(() => {
+		const configuredTools = $.get(normalizedExplicitTools).length > 0
+			? $.get(normalizedExplicitTools)
+			: $.get(placementAllowedToolIds);
+
+		if (pnpResolver() && assessment() && itemRef()) {
+			const allowedByPnp = pnpResolver().getAllowedToolIds(assessment(), itemRef());
+
+			if (configuredTools.length === 0) return allowedByPnp;
+
+			return allowedByPnp.filter((toolId) => configuredTools.includes(toolId));
+		}
+
+		return configuredTools;
+	});
+
+	const contentReady = $.derived(() => {
+		const config = $.get(effectiveItem)?.config;
+
+		return !!($.get(effectiveItem) && config && typeof config === 'object');
+	});
+
+	const toolContext = $.derived(() => {
+		if (!$.get(contentReady) || !$.get(effectiveItem)) {
+			return null;
+		}
+
+		return {
+			level: 'item',
+			assessment: assessment() || {},
+			itemRef: itemRef() || { id: $.get(effectiveCanonicalItemId) },
+			item: $.get(effectiveItem)
+		};
+	});
+
+	const renderContext = $.derived(() => {
+		if ($.get(toolContext)) return $.get(toolContext);
+
+		return {
+			level: 'item',
+			assessment: assessment() || {},
+			itemRef: itemRef() || { id: $.get(effectiveCanonicalItemId) },
+			item: $.get(effectiveItem) || { id: $.get(effectiveCanonicalItemId), config: {} }
+		};
+	});
+
+	const elementContexts = $.derived(() => {
+		if (!$.get(contentReady) || !$.get(effectiveItem)) return [];
+
+		const modelsRaw = $.get(effectiveItem)?.config?.models;
+
+		const models = Array.isArray(modelsRaw)
+			? modelsRaw
+			: modelsRaw && typeof modelsRaw === 'object' ? Object.values(modelsRaw) : [];
+
+		return models.filter((model) => model && typeof model === 'object' && typeof model.id === 'string').map((model) => ({
+			level: 'element',
+			assessment: assessment() || {},
+			itemRef: itemRef() || { id: $.get(effectiveCanonicalItemId) },
+			item: $.get(effectiveItem),
+			elementId: model.id
+		}));
+	});
+
+	// Pass 2: tool-owned context filtering (item + element aggregation)
+	const visibleToolIds = $.derived(() => {
+		if (!$.get(contentReady)) {
+			// Stage 1: orchestrator-level allow-list only.
+			return $.get(allowedToolIds);
+		}
+
+		if (!$.get(toolContext) && $.get(elementContexts).length === 0) {
+			return $.get(allowedToolIds);
+		}
+
+		const visible = new Set();
+
+		if ($.get(toolContext)) {
+			$.get(effectiveToolRegistry).filterVisibleInContext($.get(allowedToolIds), $.get(toolContext)).forEach((tool) => visible.add(tool.toolId));
+		}
+
+		for (const context of $.get(elementContexts)) {
+			$.get(effectiveToolRegistry).filterVisibleInContext($.get(allowedToolIds), context).forEach((tool) => visible.add(tool.toolId));
+		}
+
+		return Array.from(visible);
+	});
+
+	// Dynamically load whatever tools are currently visible.
+	// The registry owns module loader configuration by toolId.
+	$.user_effect(() => {
+		if (!isBrowser) return;
+
+		let cancelled = false;
+
+		void $.get(effectiveToolRegistry).ensureToolModulesLoaded($.get(visibleToolIds)).then(() => {
+			if (!cancelled) $.set(moduleLoadVersion, $.get(moduleLoadVersion) + 1);
+		}).catch((error) => {
+			console.error('[ItemToolBar] Failed to load one or more tool modules:', error);
+		});
+
+		return () => {
+			cancelled = true;
+		};
+	});
+
+	function resolveScopeElement() {
+		if (scopeElement()) return scopeElement();
+
+		return $.get(shellContext)?.scopeElement || null;
+	}
+
+	function resolveGlobalElementId() {
+		if (!$.get(effectiveElementToolStateStore) || !$.get(effectiveAssessmentId) || !$.get(effectiveSectionId) || !$.get(effectiveCanonicalItemId)) return null;
+
+		return $.get(effectiveElementToolStateStore).getGlobalElementId($.get(effectiveAssessmentId), $.get(effectiveSectionId), $.get(effectiveCanonicalItemId), $.get(effectiveCanonicalItemId));
+	}
+
+	const toolbarContext = $.derived(() => {
+		const toolkitCoordinator = $.get(runtimeContext)?.toolkitCoordinator || null;
+
+		const toInstanceToolId = (toolId) => {
+			// Accept either base tool IDs (e.g. "calculator") or already-scoped IDs.
+			// This keeps toolbar contracts stable across mixed registration implementations.
+			return parseScopedToolId(toolId)
+				? toolId
+				: createScopedToolId(toolId, 'item', $.get(effectiveCanonicalItemId));
+		};
+
+		return {
+			itemId: $.get(effectiveCanonicalItemId),
+			catalogId: $.get(effectiveCatalogId),
+			language: language(),
+			ui: { size: size() },
+			getScopeElement: resolveScopeElement,
+			getGlobalElementId: resolveGlobalElementId,
+			toolCoordinator: $.get(effectiveToolCoordinator) || null,
+			toolkitCoordinator,
+			ttsService: $.get(effectiveTTSService) || null,
+			elementToolStateStore: $.get(effectiveElementToolStateStore) || null,
+			toggleTool: (toolId) => {
+				if (!$.get(effectiveToolCoordinator)) return;
+
+				$.get(effectiveToolCoordinator).toggleTool(toInstanceToolId(toolId));
+			},
+
+			isToolVisible: (toolId) => {
+				if (!$.get(effectiveToolCoordinator)) return false;
+
+				return $.get(effectiveToolCoordinator).isToolVisible(toInstanceToolId(toolId));
+			},
+
+			subscribeVisibility: $.get(effectiveToolCoordinator)
+				? (listener) => $.get(effectiveToolCoordinator).subscribe(listener)
+				: null,
+			ensureTTSReady: toolkitCoordinator ? () => toolkitCoordinator.ensureTTSReady() : null
+		};
+	});
+
+	let renderedTools = $.derived(() => {
+		if (!isBrowser) return [];
+
+		$.get(moduleLoadVersion);
+
+		const rendered = [];
+
+		for (const toolId of $.get(visibleToolIds)) {
+			const result = $.get(effectiveToolRegistry).renderForToolbar(toolId, $.get(renderContext), $.get(toolbarContext));
+
+			if (result) {
+				rendered.push(result);
+			}
+		}
+
+		return rendered;
+	});
+
+	function syncRenderedToolsState() {
+		const nextActiveState = {};
+
+		for (const renderedTool of $.get(renderedTools)) {
+			renderedTool.sync?.();
+
+			if (renderedTool.button) {
+				nextActiveState[renderedTool.toolId] = renderedTool.button.active ?? false;
+			}
+		}
+
+		$.set(activeToolState, nextActiveState, true);
+	}
+
+	$.user_effect(() => {
+		const unsubs = [];
+
+		syncRenderedToolsState();
+
+		for (const renderedTool of $.get(renderedTools)) {
+			if (renderedTool.subscribeActive) {
+				const unsubscribe = renderedTool.subscribeActive((active) => {
+					$.set(activeToolState, { ...$.get(activeToolState), [renderedTool.toolId]: active }, true);
+					renderedTool.sync?.();
+				});
+
+				unsubs.push(unsubscribe);
+			}
+		}
+
+		return () => {
+			unsubs.forEach((unsub) => unsub());
+		};
+	});
+
+	$.user_effect(() => {
+		if (!$.get(toolbarContext).subscribeVisibility) return;
+
+		return $.get(toolbarContext).subscribeVisibility(() => {
+			syncRenderedToolsState();
+		});
+	});
+
+	function mountElement(node, element) {
+		let mountedElement = null;
+
+		const updateMountedElement = (nextElement) => {
+			if (mountedElement === nextElement) return;
+
+			if (mountedElement && mountedElement.parentNode === node) {
+				node.removeChild(mountedElement);
+			}
+
+			mountedElement = nextElement;
+
+			if (mountedElement) {
+				if (mountedElement.parentNode && mountedElement.parentNode !== node) {
+					mountedElement.parentNode.removeChild(mountedElement);
+				}
+
+				node.appendChild(mountedElement);
+			}
+		};
+
+		updateMountedElement(element);
+
+		return {
+			update(nextElement) {
+				updateMountedElement(nextElement);
+			},
+
+			destroy() {
+				updateMountedElement(null);
+			}
+		};
+	}
+
+	var $$exports = {
+		get itemId() {
+			return itemId();
+		},
+
+		set itemId($$value) {
+			itemId($$value);
+			$.flush();
+		},
+
+		get catalogId() {
+			return catalogId();
+		},
+
+		set catalogId($$value) {
+			catalogId($$value);
+			$.flush();
+		},
+
+		get tools() {
+			return tools();
+		},
+
+		set tools($$value) {
+			tools($$value);
+			$.flush();
+		},
+
+		get contentKind() {
+			return contentKind();
+		},
+
+		set contentKind($$value) {
+			contentKind($$value);
+			$.flush();
+		},
+
+		get scopeElement() {
+			return scopeElement();
+		},
+
+		set scopeElement($$value) {
+			scopeElement($$value);
+			$.flush();
+		},
+
+		get toolRegistry() {
+			return toolRegistry();
+		},
+
+		set toolRegistry($$value) {
+			toolRegistry($$value);
+			$.flush();
+		},
+
+		get pnpResolver() {
+			return pnpResolver();
+		},
+
+		set pnpResolver($$value) {
+			pnpResolver($$value);
+			$.flush();
+		},
+
+		get assessment() {
+			return assessment();
+		},
+
+		set assessment($$value) {
+			assessment($$value);
+			$.flush();
+		},
+
+		get itemRef() {
+			return itemRef();
+		},
+
+		set itemRef($$value) {
+			itemRef($$value);
+			$.flush();
+		},
+
+		get item() {
+			return item();
+		},
+
+		set item($$value) {
+			item($$value);
+			$.flush();
+		},
+
+		get class() {
+			return className();
+		},
+
+		set class($$value) {
+			className($$value);
+			$.flush();
+		},
+
+		get size() {
+			return size();
+		},
+
+		set size($$value) {
+			size($$value);
+			$.flush();
+		},
+
+		get language() {
+			return language();
+		},
+
+		set language($$value) {
+			language($$value);
+			$.flush();
+		}
+	};
+
+	var fragment = $.comment();
+	var node_1 = $.first_child(fragment);
+
+	{
+		var consequent_5 = ($$anchor) => {
+			var div = root_1();
+
+			$.each(div, 21, () => $.get(renderedTools), (renderedTool) => renderedTool.toolId, ($$anchor, renderedTool) => {
+				var fragment_1 = root_2();
+				var node_2 = $.first_child(fragment_1);
+
+				{
+					var consequent = ($$anchor) => {
+						var span = root_3();
+
+						$.action(span, ($$node, $$action_arg) => mountElement?.($$node, $$action_arg), () => $.get(renderedTool).inlineElement);
+						$.append($$anchor, span);
+					};
+
+					$.if(node_2, ($$render) => {
+						if ($.get(renderedTool).inlineElement) $$render(consequent);
+					});
+				}
+
+				var node_3 = $.sibling(node_2, 2);
+
+				{
+					var consequent_3 = ($$anchor) => {
+						var button = root_4();
+						let classes;
+						var node_4 = $.child(button);
+
+						{
+							var consequent_1 = ($$anchor) => {
+								var fragment_2 = $.comment();
+								var node_5 = $.first_child(fragment_2);
+
+								$.html(node_5, () => $.get(renderedTool).button.icon);
+								$.append($$anchor, fragment_2);
+							};
+
+							var d = $.derived(() => $.get(renderedTool).button.icon.startsWith('<svg'));
+
+							var consequent_2 = ($$anchor) => {
+								var img = root_6();
+
+								$.template_effect(() => $.set_attribute(img, 'src', $.get(renderedTool).button.icon));
+								$.append($$anchor, img);
+							};
+
+							var d_1 = $.derived(() => $.get(renderedTool).button.icon.startsWith('http'));
+
+							var alternate = ($$anchor) => {
+								var i = root_7();
+
+								$.template_effect(() => $.set_class(i, 1, `icon icon-${$.get(renderedTool).button.icon}`, 'svelte-rnx3ie'));
+								$.append($$anchor, i);
+							};
+
+							$.if(node_4, ($$render) => {
+								if ($.get(d)) $$render(consequent_1); else if ($.get(d_1)) $$render(consequent_2, 1); else $$render(alternate, false);
+							});
+						}
+
+						$.reset(button);
+
+						$.template_effect(() => {
+							classes = $.set_class(button, 1, `item-toolbar__button ${($.get(renderedTool).button.className || '') ?? ''}`, 'svelte-rnx3ie', classes, {
+								'item-toolbar__button--active': $.get(activeToolState)[$.get(renderedTool).toolId] ?? $.get(renderedTool).button.active ?? false
+							});
+
+							$.set_attribute(button, 'aria-label', $.get(renderedTool).button.ariaLabel || $.get(renderedTool).button.label);
+							$.set_attribute(button, 'aria-pressed', $.get(activeToolState)[$.get(renderedTool).toolId] ?? $.get(renderedTool).button.active ?? false);
+							$.set_attribute(button, 'title', $.get(renderedTool).button.tooltip || $.get(renderedTool).button.label);
+							button.disabled = $.get(renderedTool).button.disabled;
+						});
+
+						$.delegated('click', button, () => {
+							$.get(renderedTool).button?.onClick();
+							syncRenderedToolsState();
+						});
+
+						$.append($$anchor, button);
+					};
+
+					$.if(node_3, ($$render) => {
+						if ($.get(renderedTool).button) $$render(consequent_3);
+					});
+				}
+
+				var node_6 = $.sibling(node_3, 2);
+
+				{
+					var consequent_4 = ($$anchor) => {
+						var span_1 = root_8();
+
+						$.action(span_1, ($$node, $$action_arg) => mountElement?.($$node, $$action_arg), () => $.get(renderedTool).overlayElement);
+						$.append($$anchor, span_1);
+					};
+
+					$.if(node_6, ($$render) => {
+						if ($.get(renderedTool).overlayElement) $$render(consequent_4);
+					});
+				}
+
+				$.append($$anchor, fragment_1);
+			});
+
+			$.reset(div);
+			$.bind_this(div, ($$value) => $.set(toolbarRootElement, $$value), () => $.get(toolbarRootElement));
+
+			$.template_effect(() => {
+				$.set_class(div, 1, `item-toolbar ${className() ?? ''} item-toolbar--${size() ?? ''}`, 'svelte-rnx3ie');
+				$.set_attribute(div, 'data-content-kind', $.get(effectiveContentKind));
+			});
+
+			$.append($$anchor, div);
+		};
+
+		$.if(node_1, ($$render) => {
+			if (isBrowser) $$render(consequent_5);
+		});
+	}
+
+	$.append($$anchor, fragment);
+
+	return $.pop($$exports);
+}
+
+$.delegate(['click']);
+
+customElements.define('pie-item-toolbar', $.create_custom_element(
+	ItemToolBar,
+	{
+		itemId: { attribute: 'item-id', type: 'String' },
+		catalogId: { attribute: 'catalog-id', type: 'String' },
+		tools: { attribute: 'tools', type: 'String' },
+		contentKind: { attribute: 'content-kind', type: 'String' },
+		size: { attribute: 'size', type: 'String' },
+		language: { attribute: 'language', type: 'String' },
+		scopeElement: { type: 'Object' },
+		toolRegistry: { type: 'Object' },
+		pnpResolver: { type: 'Object' },
+		assessment: { type: 'Object' },
+		itemRef: { type: 'Object' },
+		item: { type: 'Object' },
+		class: {}
+	},
+	[],
+	[],
+	{ mode: 'open' }
+));