@pie-players/pie-assessment-toolkit 0.3.29 → 0.3.31

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

@@ -29,25 +29,31 @@ import {
 	isValidToolbarItemShape
 } from '../services/toolbar-items.js';
 
+import { sanitizeSvgIcon } from '@pie-players/pie-players-shared/security';
+import { createFocusTrap } from '@pie-players/pie-players-shared';
 import { createPackagedToolRegistry } 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 { parseToolList } 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_4 = $.from_html(`<span class="item-toolbar__element-host svelte-rnx3ie"></span>`);
-var root_9 = $.from_html(`<img class="item-toolbar__icon-image svelte-rnx3ie" alt=""/>`);
-var root_12 = $.from_html(`<i aria-hidden="true"></i>`);
-var root_6 = $.from_html(`<a><!></a>`);
-var root_16 = $.from_html(`<img class="item-toolbar__icon-image svelte-rnx3ie" alt=""/>`);
-var root_19 = $.from_html(`<i aria-hidden="true"></i>`);
-var root_13 = $.from_html(`<button type="button"><!></button>`);
-var root_21 = $.from_html(`<span class="item-toolbar__element-host svelte-rnx3ie"></span>`);
+var root_5 = $.from_html(`<span class="item-toolbar__element-host svelte-rnx3ie"></span>`);
+var root_9 = $.from_html(`<span aria-hidden="true"></span>`);
+var root_10 = $.from_html(`<img class="item-toolbar__icon-image svelte-rnx3ie" alt=""/>`);
+var root_12 = $.from_html(`<span aria-hidden="true"></span>`);
+var root_13 = $.from_html(`<i aria-hidden="true"></i>`);
+var root_7 = $.from_html(`<a><!></a>`);
+var root_16 = $.from_html(`<span aria-hidden="true"></span>`);
+var root_17 = $.from_html(`<img class="item-toolbar__icon-image svelte-rnx3ie" alt=""/>`);
+var root_19 = $.from_html(`<span aria-hidden="true"></span>`);
+var root_20 = $.from_html(`<i aria-hidden="true"></i>`);
+var root_14 = $.from_html(`<button type="button"><!></button>`);
 var root_22 = $.from_html(`<span class="item-toolbar__element-host svelte-rnx3ie"></span>`);
-var root_25 = $.from_html(`<span class="item-toolbar__controls-host svelte-rnx3ie"></span>`);
+var root_23 = $.from_html(`<span class="item-toolbar__element-host svelte-rnx3ie"></span>`);
 var root_26 = $.from_html(`<span class="item-toolbar__controls-host svelte-rnx3ie"></span>`);
-var root_23 = $.from_html(`<div></div>`);
-var root_1 = $.from_html(`<div><div class="item-toolbar__tools-row svelte-rnx3ie"><!> <!> <!></div> <!></div>`);
+var root_27 = $.from_html(`<span class="item-toolbar__controls-host svelte-rnx3ie"></span>`);
+var root_24 = $.from_html(`<div></div>`);
+var root_2 = $.from_html(`<div><div class="item-toolbar__tools-row svelte-rnx3ie"><!> <!> <!></div> <!></div>`);
 
 const $$css = {
 	hash: 'svelte-rnx3ie',
@@ -73,9 +79,6 @@ export default function ItemToolBar($$anchor, $$props) {
 		position = $.prop($$props, 'position', 7, 'bottom'),
 		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),
 		hostButtons = $.prop($$props, 'hostButtons', 23, () => []),
 		className = $.prop($$props, 'class', 7, ''),
@@ -87,6 +90,14 @@ export default function ItemToolBar($$anchor, $$props) {
 	let shellContext = $.state(null);
 	let moduleLoadVersion = $.state(0);
 
+	// Bumped from `coordinator.onPolicyChange(...)` so the engine-driven
+	// `policyDecision` / `policyInputs` derivations rerun on input
+	// changes (`updateAssessment`, `setQtiEnforcement`, custom source
+	// register / remove). The decision itself is computed by the
+	// coordinator's policy engine — this counter is just the reactive
+	// fanout that lets Svelte know the engine answer may have changed.
+	let policyChangeVersion = $.state(0);
+
 	$.user_effect(() => {
 		if (!$.get(toolbarRootElement)) return;
 
@@ -103,6 +114,25 @@ export default function ItemToolBar($$anchor, $$props) {
 		});
 	});
 
+	$.user_effect(() => {
+		const coord = $.get(runtimeContext)?.toolkitCoordinator;
+
+		if (!coord || typeof coord.onPolicyChange !== 'function') return;
+
+		const unsubscribe = coord.onPolicyChange(() => {
+			$.set(policyChangeVersion, $.get(policyChangeVersion) + 1);
+		});
+
+		return () => {
+			try {
+				unsubscribe?.();
+			} catch {
+				// detach errors are non-fatal: the coordinator may already
+				// be torn down, in which case the listener set is GC-eligible.
+			}
+		};
+	});
+
 	const effectiveToolCoordinator = $.derived(() => $.get(runtimeContext)?.toolCoordinator);
 	const effectiveTTSService = $.derived(() => $.get(runtimeContext)?.ttsService);
 	const effectiveElementToolStateStore = $.derived(() => $.get(runtimeContext)?.elementToolStateStore);
@@ -136,12 +166,6 @@ export default function ItemToolBar($$anchor, $$props) {
 	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(() => {
 		if ($.get(effectiveLevel) === 'section') return 'section';
 		if ($.get(effectiveLevel) === 'passage' || $.get(effectiveContentKind) === 'rubric-block-stimulus') return 'passage';
@@ -149,48 +173,58 @@ export default function ItemToolBar($$anchor, $$props) {
 		return 'item';
 	});
 
-	const placementAllowedToolIds = $.derived(() => {
-		const resolved = resolveToolsForLevel($.get(effectiveToolsConfig), $.get(placementLevel));
-
-		return $.get(effectiveToolRegistry).normalizeToolIds(resolved).filter(Boolean);
-	});
-
-	const providerConfig = $.derived(() => $.get(effectiveToolsConfig)?.providers || {});
-
-	const normalizedProviderConfig = $.derived(() => {
-		const normalized = {};
-
-		for (const [toolId, config] of Object.entries($.get(providerConfig))) {
-			const canonicalToolId = $.get(effectiveToolRegistry).normalizeToolId(toolId);
-
-			if (!canonicalToolId) continue;
-
-			normalized[canonicalToolId] = config;
+	// Pass 1 — single source of truth via the ToolPolicyEngine
+	// (M8 PR 3). When the toolbar is mounted under
+	// `<pie-assessment-toolkit>` the coordinator owns the engine and
+	// applies `placement → policy.allowed → policy.blocked →
+	// providers → QTI` plus any custom `PolicySource`s the host has
+	// registered. The toolbar trusts that decision verbatim — the
+	// `tools=` prop is *not* applied as a downstream filter.
+	//
+	// The `tools=` attribute is only consulted in the standalone
+	// fallback path (no coordinator in scope, e.g. fixtures that
+	// mount `<pie-item-toolbar>` directly). Hosts that want to
+	// restrict the engine's visible set should configure
+	// `tools.policy` / `tools.providers` on the assessment-toolkit
+	// inputs, or register a custom `PolicySource`, rather than
+	// passing `tools=` here.
+	const policyDecision = $.derived(() => {
+		// Read `policyChangeVersion` so we re-derive whenever the
+		// coordinator emits a policy change (assessment binding,
+		// QTI enforcement override, custom source registration).
+		void $.get(policyChangeVersion);
+
+		const coord = $.get(runtimeContext)?.toolkitCoordinator;
+
+		if (!coord || typeof coord.decideToolPolicy !== 'function') {
+			return null;
 		}
 
-		return normalized;
+		return coord.decideToolPolicy({
+			level: $.get(placementLevel),
+			scope: {
+				level: $.get(effectiveLevel),
+				scopeId: $.get(effectiveScopeId),
+				assessmentId: $.get(runtimeContext)?.assessmentId,
+				sectionId: $.get(effectiveSectionId) || undefined,
+				itemId: $.get(effectiveItemId) || undefined,
+				canonicalItemId: $.get(effectiveCanonicalItemId) || undefined,
+				contentKind: $.get(effectiveContentKind)
+			}
+		});
 	});
 
-	const isProviderEnabled = (toolId) => $.get(normalizedProviderConfig)[toolId]?.enabled !== false;
-
-	// Pass 1: determine allowed tools
 	const allowedToolIds = $.derived(() => {
-		const configuredTools = $.get(normalizedExplicitTools).length > 0
-			? $.get(normalizedExplicitTools)
-			: $.get(placementAllowedToolIds);
-
-		const providerEnabledConfiguredTools = configuredTools.filter((toolId) => isProviderEnabled(toolId));
 		const dedupe = (toolIds) => Array.from(new Set(toolIds));
 
-		if (pnpResolver() && assessment() && itemRef()) {
-			const allowedByPnp = dedupe($.get(effectiveToolRegistry).normalizeToolIds(pnpResolver().getAllowedToolIds(assessment(), itemRef()))).filter(Boolean);
-
-			if (providerEnabledConfiguredTools.length === 0) return allowedByPnp;
-
-			return dedupe(allowedByPnp.filter((toolId) => providerEnabledConfiguredTools.includes(toolId)));
+		if ($.get(policyDecision)) {
+			return dedupe($.get(effectiveToolRegistry).normalizeToolIds($.get(policyDecision).visibleTools.map((entry) => entry.toolId)).filter(Boolean));
 		}
 
-		return dedupe(providerEnabledConfiguredTools);
+		// Standalone fallback: no coordinator in scope. Honour the
+		// explicit `tools=` prop verbatim so demo fixtures keep
+		// working without a `<pie-assessment-toolkit>` ancestor.
+		return dedupe($.get(normalizedExplicitTools));
 	});
 
 	const contentReady = $.derived(() => {
@@ -201,17 +235,41 @@ export default function ItemToolBar($$anchor, $$props) {
 		return !!($.get(effectiveItem) && config && typeof config === 'object');
 	});
 
+	// QTI inputs (`assessment`, `currentItemRef`) live on the
+	// coordinator after M8 PR 2; the toolbar reads them through
+	// `getPolicyInputs()` so it can build the correct Pass-2 context
+	// without re-binding props. Standalone (no-coordinator) usage
+	// falls back to the empty / canonical-id-derived contexts that
+	// satisfy the `ToolContext` shape for `isVisibleInContext` calls.
+	const policyInputs = $.derived(() => {
+		void $.get(policyChangeVersion);
+
+		const coord = $.get(runtimeContext)?.toolkitCoordinator;
+
+		if (!coord || typeof coord.getPolicyInputs !== 'function') {
+			return null;
+		}
+
+		return coord.getPolicyInputs();
+	});
+
+	const effectiveAssessment = $.derived(() => $.get(policyInputs)?.assessment ?? null);
+	const effectiveItemRef = $.derived(() => $.get(policyInputs)?.currentItemRef ?? null);
+
 	const toolContext = $.derived(() => {
 		if ($.get(effectiveLevel) === 'section') {
 			return {
 				level: 'section',
-				assessment: assessment() || {},
+				assessment: $.get(effectiveAssessment) || {},
 				section: {}
 			};
 		}
 
 		if ($.get(effectiveLevel) === 'assessment') {
-			return { level: 'assessment', assessment: assessment() || {} };
+			return {
+				level: 'assessment',
+				assessment: $.get(effectiveAssessment) || {}
+			};
 		}
 
 		if (!$.get(contentReady) || !$.get(effectiveItem)) {
@@ -221,16 +279,16 @@ export default function ItemToolBar($$anchor, $$props) {
 		if ($.get(effectiveLevel) === 'passage') {
 			return {
 				level: 'passage',
-				assessment: assessment() || {},
-				itemRef: itemRef() || { id: $.get(effectiveCanonicalItemId) },
+				assessment: $.get(effectiveAssessment) || {},
+				itemRef: $.get(effectiveItemRef) || { id: $.get(effectiveCanonicalItemId) },
 				passage: $.get(effectiveItem)
 			};
 		}
 
 		return {
 			level: 'item',
-			assessment: assessment() || {},
-			itemRef: itemRef() || { id: $.get(effectiveCanonicalItemId) },
+			assessment: $.get(effectiveAssessment) || {},
+			itemRef: $.get(effectiveItemRef) || { id: $.get(effectiveCanonicalItemId) },
 			item: $.get(effectiveItem)
 		};
 	});
@@ -240,8 +298,8 @@ export default function ItemToolBar($$anchor, $$props) {
 
 		return {
 			level: 'item',
-			assessment: assessment() || {},
-			itemRef: itemRef() || { id: $.get(effectiveCanonicalItemId) },
+			assessment: $.get(effectiveAssessment) || {},
+			itemRef: $.get(effectiveItemRef) || { id: $.get(effectiveCanonicalItemId) },
 			item: $.get(effectiveItem) || { id: $.get(effectiveCanonicalItemId), config: {} }
 		};
 	});
@@ -258,8 +316,8 @@ export default function ItemToolBar($$anchor, $$props) {
 
 		return models.filter((model) => model && typeof model === 'object' && typeof model.id === 'string').map((model) => ({
 			level: 'element',
-			assessment: assessment() || {},
-			itemRef: itemRef() || { id: $.get(effectiveCanonicalItemId) },
+			assessment: $.get(effectiveAssessment) || {},
+			itemRef: $.get(effectiveItemRef) || { id: $.get(effectiveCanonicalItemId) },
 			item: $.get(effectiveItem),
 			elementId: model.id
 		}));
@@ -533,12 +591,32 @@ export default function ItemToolBar($$anchor, $$props) {
 
 		for (const renderedTool of $.get(renderedTools)) {
 			if (renderedTool.subscribeActive) {
+				let disposed = false;
+
 				const unsubscribe = renderedTool.subscribeActive((active) => {
-					$.set(activeToolState, { ...$.get(activeToolState), [renderedTool.toolId]: active }, true);
-					renderedTool.sync?.();
+					// Tools may dispatch their active-change signal from inside
+					// a tracked Svelte $effect (e.g. tool-tts-inline does this
+					// on mount). When the toolbar synchronously creates / re-
+					// connects the tool element during its own template/
+					// derivation pass — for example when the section player
+					// collapses on resize — that dispatch lands back here while
+					// our parent derivation is still running, and Svelte
+					// rejects the `activeToolState` write with
+					// `state_unsafe_mutation`. Queue the update on a
+					// microtask so the mutation happens after the current
+					// reactive flush settles.
+					queueMicrotask(() => {
+						if (disposed) return;
+
+						$.set(activeToolState, { ...$.get(activeToolState), [renderedTool.toolId]: active }, true);
+						renderedTool.sync?.();
+					});
 				});
 
-				unsubs.push(unsubscribe);
+				unsubs.push(() => {
+					disposed = true;
+					unsubscribe();
+				});
 			}
 		}
 
@@ -550,9 +628,25 @@ export default function ItemToolBar($$anchor, $$props) {
 	$.user_effect(() => {
 		if (!$.get(toolbarContext).subscribeVisibility) return;
 
-		return $.get(toolbarContext).subscribeVisibility(() => {
-			syncRenderedToolsState();
+		let disposed = false;
+
+		const unsubscribe = $.get(toolbarContext).subscribeVisibility(() => {
+			// Defense-in-depth: defer the state write so a synchronous
+			// visibility broadcast from the coordinator never lands inside
+			// an active parent derivation/template flush. See the
+			// `subscribeActive` handler above for the failure mode this
+			// pattern prevents.
+			queueMicrotask(() => {
+				if (disposed) return;
+
+				syncRenderedToolsState();
+			});
 		});
+
+		return () => {
+			disposed = true;
+			unsubscribe?.();
+		};
 	});
 
 	$.user_effect(() => {
@@ -560,13 +654,28 @@ export default function ItemToolBar($$anchor, $$props) {
 
 		if (typeof toolkitCoordinator?.subscribeTelemetry !== 'function') return;
 
-		return toolkitCoordinator.subscribeTelemetry(({ eventName, payload }) => {
-			if (eventName !== 'tool-config-updated') return;
+		let disposed = false;
+
+		const unsubscribe = toolkitCoordinator.subscribeTelemetry(({ eventName, payload }) => {
+			if (eventName !== 'pie-toolkit-tool-config-updated') return;
 			if (payload?.toolId && !$.get(toolbarVisibleToolIds).includes(payload.toolId)) return;
 
-			$.set(moduleLoadVersion, $.get(moduleLoadVersion) + 1);
-			syncRenderedToolsState();
+			// Defense-in-depth: telemetry can be emitted from anywhere in
+			// the toolkit lifecycle, including paths that flush
+			// synchronously while this component's deriveds are running.
+			// Defer the writes so the parent flush always settles first.
+			queueMicrotask(() => {
+				if (disposed) return;
+
+				$.set(moduleLoadVersion, $.get(moduleLoadVersion) + 1);
+				syncRenderedToolsState();
+			});
 		});
+
+		return () => {
+			disposed = true;
+			unsubscribe?.();
+		};
 	});
 
 	function mountElement(node, element) {
@@ -639,6 +748,9 @@ export default function ItemToolBar($$anchor, $$props) {
 		let y = 0;
 		let width = currentArgs.mounted.entry.shell?.initialWidth ?? 720;
 		let height = currentArgs.mounted.entry.shell?.initialHeight ?? 560;
+		let focusTrapCleanup = null;
+		let openerEl = null;
+		let previousActive = false;
 
 		const invokeElementUnmount = (value) => {
 			if (!value) return;
@@ -823,6 +935,75 @@ export default function ItemToolBar($$anchor, $$props) {
 			applyPositionAndSize();
 		};
 
+		const restoreOpenerFocus = () => {
+			const target = openerEl;
+
+			if (!target) return;
+
+			queueMicrotask(() => {
+				if (!target.isConnected) return;
+
+				try {
+					target.focus();
+				} catch {
+					// ignore
+				}
+			});
+		};
+
+		const getDeepActiveElement = () => {
+			if (typeof document === 'undefined') return null;
+
+			let active = document.activeElement;
+
+			while (active) {
+				const root = active.shadowRoot;
+
+				if (root && root.activeElement && root.activeElement !== active) {
+					active = root.activeElement;
+				} else {
+					break;
+				}
+			}
+
+			return active ?? null;
+		};
+
+		const installFocusTrap = () => {
+			if (!shellEl || focusTrapCleanup) return;
+
+			const active = getDeepActiveElement();
+
+			// Only update opener if we don't already have one (survives re-open within a
+			// single mount lifecycle) and the active element isn't inside the shell itself.
+			if (!openerEl && active && !shellEl.contains(active)) {
+				openerEl = active;
+			}
+
+			focusTrapCleanup = createFocusTrap(shellEl, {
+				initialFocus: closeButtonEl,
+				onEscape: () => {
+					closeShell();
+				}
+			});
+		};
+
+		const removeFocusTrap = () => {
+			if (!focusTrapCleanup) return;
+
+			const cleanup = focusTrapCleanup;
+
+			focusTrapCleanup = null;
+
+			try {
+				cleanup();
+			} catch {
+				// ignore
+			}
+
+			restoreOpenerFocus();
+		};
+
 		const closeShell = () => {
 			$.get(toolbarContext).toggleTool(currentArgs.mounted.toolId);
 			syncRenderedToolsState();
@@ -953,17 +1134,31 @@ export default function ItemToolBar($$anchor, $$props) {
 			closeButtonEl.type = 'button';
 			closeButtonEl.className = 'pie-tool-shell__close';
 			closeButtonEl.setAttribute('aria-label', 'Close tool');
-			closeButtonEl.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true"><path d="M3.5 3.5L12.5 12.5M12.5 3.5L3.5 12.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>';
 
-			const closeIconEl = closeButtonEl.querySelector('svg');
+			const svgNs = 'http://www.w3.org/2000/svg';
+			const closeIconEl = document.createElementNS(svgNs, 'svg');
 
-			if (closeIconEl) {
-				closeIconEl.style.width = '16px';
-				closeIconEl.style.height = '16px';
-				closeIconEl.style.display = 'block';
-				closeIconEl.style.flexShrink = '0';
-				closeIconEl.style.pointerEvents = 'none';
-			}
+			closeIconEl.setAttribute('xmlns', svgNs);
+			closeIconEl.setAttribute('viewBox', '0 0 16 16');
+			closeIconEl.setAttribute('aria-hidden', 'true');
+
+			const closeIconPath = document.createElementNS(svgNs, 'path');
+
+			closeIconPath.setAttribute('d', 'M3.5 3.5L12.5 12.5M12.5 3.5L3.5 12.5');
+			closeIconPath.setAttribute('stroke', 'currentColor');
+			closeIconPath.setAttribute('stroke-width', '1.8');
+			closeIconPath.setAttribute('stroke-linecap', 'round');
+			closeIconEl.appendChild(closeIconPath);
+			closeButtonEl.appendChild(closeIconEl);
+
+			// SVGElement.style exists but is readonly in DOM types; cast once.
+			const closeIconStyle = closeIconEl.style;
+
+			closeIconStyle.width = '16px';
+			closeIconStyle.height = '16px';
+			closeIconStyle.display = 'block';
+			closeIconStyle.flexShrink = '0';
+			closeIconStyle.pointerEvents = 'none';
 
 			const closeButtonBaseBackground = 'color-mix(in srgb, var(--pie-white, #fff) 8%, transparent)';
 			const closeButtonHoverBackground = 'color-mix(in srgb, var(--pie-white, #fff) 18%, transparent)';
@@ -1081,6 +1276,12 @@ export default function ItemToolBar($$anchor, $$props) {
 			applyShellStyle();
 			mountContent();
 			notifyHostedResize();
+
+			if (currentArgs.active) {
+				installFocusTrap();
+			}
+
+			previousActive = currentArgs.active;
 		}
 
 		return {
@@ -1094,11 +1295,26 @@ export default function ItemToolBar($$anchor, $$props) {
 				mountContent();
 				applyShellStyle();
 				notifyHostedResize();
+
+				if (!previousActive && currentArgs.active) {
+					installFocusTrap();
+				} else if (previousActive && !currentArgs.active) {
+					removeFocusTrap();
+					openerEl = null;
+				}
+
+				previousActive = currentArgs.active;
 			},
 
 			destroy() {
 				notifyHostedUnmount();
 
+				if (focusTrapCleanup) {
+					removeFocusTrap();
+				}
+
+				openerEl = null;
+
 				if (resizeHandleEl) {
 					resizeHandleEl.removeEventListener('pointerdown', onResizePointerDown);
 				}
@@ -1221,33 +1437,6 @@ export default function ItemToolBar($$anchor, $$props) {
 			$.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();
 		},
@@ -1299,7 +1488,7 @@ export default function ItemToolBar($$anchor, $$props) {
 
 	{
 		var consequent_13 = ($$anchor) => {
-			var div = root_1();
+			var div = root_2();
 			let classes;
 			var div_1 = $.child(div);
 			var node_2 = $.child(div_1);
@@ -1310,7 +1499,7 @@ export default function ItemToolBar($$anchor, $$props) {
 
 				{
 					var consequent = ($$anchor) => {
-						var span = root_3();
+						var span = root_4();
 
 						$.action(span, ($$node, $$action_arg) => mountElementWithShell?.($$node, $$action_arg), () => ({
 							mounted: $.get(mounted),
@@ -1321,7 +1510,7 @@ export default function ItemToolBar($$anchor, $$props) {
 					};
 
 					var alternate = ($$anchor) => {
-						var span_1 = root_4();
+						var span_1 = root_5();
 
 						$.action(span_1, ($$node, $$action_arg) => mountElement?.($$node, $$action_arg), () => $.get(mounted).entry.element);
 						$.append($$anchor, span_1);
@@ -1343,7 +1532,7 @@ export default function ItemToolBar($$anchor, $$props) {
 
 				{
 					var consequent_5 = ($$anchor) => {
-						var a = root_6();
+						var a = root_7();
 						let classes_1;
 						var node_6 = $.child(a);
 
@@ -1354,17 +1543,17 @@ export default function ItemToolBar($$anchor, $$props) {
 
 								{
 									var consequent_1 = ($$anchor) => {
-										var fragment_4 = $.comment();
-										var node_8 = $.first_child(fragment_4);
+										var span_2 = root_9();
 
-										$.html(node_8, () => $.get(item).icon);
-										$.append($$anchor, fragment_4);
+										$.html(span_2, () => sanitizeSvgIcon($.get(item).icon), true);
+										$.reset(span_2);
+										$.append($$anchor, span_2);
 									};
 
 									var d = $.derived(() => isInlineSvgIcon($.get(item).icon));
 
 									var consequent_2 = ($$anchor) => {
-										var img = root_9();
+										var img = root_10();
 
 										$.template_effect(() => $.set_attribute(img, 'src', $.get(item).icon));
 										$.append($$anchor, img);
@@ -1374,31 +1563,31 @@ export default function ItemToolBar($$anchor, $$props) {
 
 									var alternate_2 = ($$anchor) => {
 										const fallbackIcon = $.derived(() => getFallbackIconSvg($.get(item).icon));
-										var fragment_5 = $.comment();
-										var node_9 = $.first_child(fragment_5);
+										var fragment_4 = $.comment();
+										var node_8 = $.first_child(fragment_4);
 
 										{
 											var consequent_3 = ($$anchor) => {
-												var fragment_6 = $.comment();
-												var node_10 = $.first_child(fragment_6);
+												var span_3 = root_12();
 
-												$.html(node_10, () => $.get(fallbackIcon));
-												$.append($$anchor, fragment_6);
+												$.html(span_3, () => sanitizeSvgIcon($.get(fallbackIcon)), true);
+												$.reset(span_3);
+												$.append($$anchor, span_3);
 											};
 
 											var alternate_1 = ($$anchor) => {
-												var i = root_12();
+												var i = root_13();
 
 												$.template_effect(() => $.set_class(i, 1, `icon icon-${$.get(item).icon}`, 'svelte-rnx3ie'));
 												$.append($$anchor, i);
 											};
 
-											$.if(node_9, ($$render) => {
+											$.if(node_8, ($$render) => {
 												if ($.get(fallbackIcon)) $$render(consequent_3); else $$render(alternate_1, -1);
 											});
 										}
 
-										$.append($$anchor, fragment_5);
+										$.append($$anchor, fragment_4);
 									};
 
 									$.if(node_7, ($$render) => {
@@ -1445,28 +1634,28 @@ export default function ItemToolBar($$anchor, $$props) {
 					var d_2 = $.derived(() => isToolbarLinkItem($.get(item)));
 
 					var alternate_5 = ($$anchor) => {
-						var button_1 = root_13();
+						var button_1 = root_14();
 						let classes_2;
-						var node_11 = $.child(button_1);
+						var node_9 = $.child(button_1);
 
 						{
 							var consequent_9 = ($$anchor) => {
-								var fragment_7 = $.comment();
-								var node_12 = $.first_child(fragment_7);
+								var fragment_5 = $.comment();
+								var node_10 = $.first_child(fragment_5);
 
 								{
 									var consequent_6 = ($$anchor) => {
-										var fragment_8 = $.comment();
-										var node_13 = $.first_child(fragment_8);
+										var span_4 = root_16();
 
-										$.html(node_13, () => $.get(item).icon);
-										$.append($$anchor, fragment_8);
+										$.html(span_4, () => sanitizeSvgIcon($.get(item).icon), true);
+										$.reset(span_4);
+										$.append($$anchor, span_4);
 									};
 
 									var d_3 = $.derived(() => isInlineSvgIcon($.get(item).icon));
 
 									var consequent_7 = ($$anchor) => {
-										var img_1 = root_16();
+										var img_1 = root_17();
 
 										$.template_effect(() => $.set_attribute(img_1, 'src', $.get(item).icon));
 										$.append($$anchor, img_1);
@@ -1476,42 +1665,42 @@ export default function ItemToolBar($$anchor, $$props) {
 
 									var alternate_4 = ($$anchor) => {
 										const fallbackIcon = $.derived(() => getFallbackIconSvg($.get(item).icon));
-										var fragment_9 = $.comment();
-										var node_14 = $.first_child(fragment_9);
+										var fragment_6 = $.comment();
+										var node_11 = $.first_child(fragment_6);
 
 										{
 											var consequent_8 = ($$anchor) => {
-												var fragment_10 = $.comment();
-												var node_15 = $.first_child(fragment_10);
+												var span_5 = root_19();
 
-												$.html(node_15, () => $.get(fallbackIcon));
-												$.append($$anchor, fragment_10);
+												$.html(span_5, () => sanitizeSvgIcon($.get(fallbackIcon)), true);
+												$.reset(span_5);
+												$.append($$anchor, span_5);
 											};
 
 											var alternate_3 = ($$anchor) => {
-												var i_1 = root_19();
+												var i_1 = root_20();
 
 												$.template_effect(() => $.set_class(i_1, 1, `icon icon-${$.get(item).icon}`, 'svelte-rnx3ie'));
 												$.append($$anchor, i_1);
 											};
 
-											$.if(node_14, ($$render) => {
+											$.if(node_11, ($$render) => {
 												if ($.get(fallbackIcon)) $$render(consequent_8); else $$render(alternate_3, -1);
 											});
 										}
 
-										$.append($$anchor, fragment_9);
+										$.append($$anchor, fragment_6);
 									};
 
-									$.if(node_12, ($$render) => {
+									$.if(node_10, ($$render) => {
 										if ($.get(d_3)) $$render(consequent_6); else if ($.get(d_4)) $$render(consequent_7, 1); else $$render(alternate_4, -1);
 									});
 								}
 
-								$.append($$anchor, fragment_7);
+								$.append($$anchor, fragment_5);
 							};
 
-							$.if(node_11, ($$render) => {
+							$.if(node_9, ($$render) => {
 								if ($.get(item).icon) $$render(consequent_9);
 							});
 						}
@@ -1549,77 +1738,77 @@ export default function ItemToolBar($$anchor, $$props) {
 				$.append($$anchor, fragment_2);
 			});
 
-			var node_16 = $.sibling(node_4, 2);
+			var node_12 = $.sibling(node_4, 2);
 
-			$.each(node_16, 17, () => $.get(mountedElementsAfterButtons), (mounted) => mounted.key, ($$anchor, mounted) => {
-				var fragment_11 = $.comment();
-				var node_17 = $.first_child(fragment_11);
+			$.each(node_12, 17, () => $.get(mountedElementsAfterButtons), (mounted) => mounted.key, ($$anchor, mounted) => {
+				var fragment_7 = $.comment();
+				var node_13 = $.first_child(fragment_7);
 
 				{
 					var consequent_10 = ($$anchor) => {
-						var span_2 = root_21();
+						var span_6 = root_22();
 
-						$.action(span_2, ($$node, $$action_arg) => mountElementWithShell?.($$node, $$action_arg), () => ({
+						$.action(span_6, ($$node, $$action_arg) => mountElementWithShell?.($$node, $$action_arg), () => ({
 							mounted: $.get(mounted),
 							active: $.get(renderedToolActiveById)[$.get(mounted).toolId] ?? false
 						}));
 
-						$.append($$anchor, span_2);
+						$.append($$anchor, span_6);
 					};
 
 					var alternate_6 = ($$anchor) => {
-						var span_3 = root_22();
+						var span_7 = root_23();
 
-						$.action(span_3, ($$node, $$action_arg) => mountElement?.($$node, $$action_arg), () => $.get(mounted).entry.element);
-						$.append($$anchor, span_3);
+						$.action(span_7, ($$node, $$action_arg) => mountElement?.($$node, $$action_arg), () => $.get(mounted).entry.element);
+						$.append($$anchor, span_7);
 					};
 
-					$.if(node_17, ($$render) => {
+					$.if(node_13, ($$render) => {
 						if ($.get(mounted).entry.shell) $$render(consequent_10); else $$render(alternate_6, -1);
 					});
 				}
 
-				$.append($$anchor, fragment_11);
+				$.append($$anchor, fragment_7);
 			});
 
 			$.reset(div_1);
 
-			var node_18 = $.sibling(div_1, 2);
+			var node_14 = $.sibling(div_1, 2);
 
 			{
 				var consequent_12 = ($$anchor) => {
-					var div_2 = root_23();
+					var div_2 = root_24();
 					let classes_3;
 
 					$.each(div_2, 21, () => $.get(mountedElementsControlsRow), (mounted) => mounted.key, ($$anchor, mounted) => {
-						var fragment_12 = $.comment();
-						var node_19 = $.first_child(fragment_12);
+						var fragment_8 = $.comment();
+						var node_15 = $.first_child(fragment_8);
 
 						{
 							var consequent_11 = ($$anchor) => {
-								var span_4 = root_25();
+								var span_8 = root_26();
 
-								$.action(span_4, ($$node, $$action_arg) => mountElementWithShell?.($$node, $$action_arg), () => ({
+								$.action(span_8, ($$node, $$action_arg) => mountElementWithShell?.($$node, $$action_arg), () => ({
 									mounted: $.get(mounted),
 									active: $.get(renderedToolActiveById)[$.get(mounted).toolId] ?? false
 								}));
 
-								$.append($$anchor, span_4);
+								$.append($$anchor, span_8);
 							};
 
 							var alternate_7 = ($$anchor) => {
-								var span_5 = root_26();
+								var span_9 = root_27();
 
-								$.action(span_5, ($$node, $$action_arg) => mountElement?.($$node, $$action_arg), () => $.get(mounted).entry.element);
-								$.append($$anchor, span_5);
+								$.action(span_9, ($$node, $$action_arg) => mountElement?.($$node, $$action_arg), () => $.get(mounted).entry.element);
+								$.append($$anchor, span_9);
 							};
 
-							$.if(node_19, ($$render) => {
+							$.if(node_15, ($$render) => {
 								if ($.get(mounted).entry.shell) $$render(consequent_11); else $$render(alternate_7, -1);
 							});
 						}
 
-						$.append($$anchor, fragment_12);
+						$.append($$anchor, fragment_8);
 					});
 
 					$.reset(div_2);
@@ -1633,7 +1822,7 @@ export default function ItemToolBar($$anchor, $$props) {
 					$.append($$anchor, div_2);
 				};
 
-				$.if(node_18, ($$render) => {
+				$.if(node_14, ($$render) => {
 					if ($.get(shouldRenderControlsRow)) $$render(consequent_12);
 				});
 			}
@@ -1683,9 +1872,6 @@ __pieDefineSafely('pie-item-toolbar', $.create_custom_element(
 		language: { attribute: 'language', type: 'String' },
 		scopeElement: { type: 'Object' },
 		toolRegistry: { type: 'Object' },
-		pnpResolver: { type: 'Object' },
-		assessment: { type: 'Object' },
-		itemRef: { type: 'Object' },
 		item: { type: 'Object' },
 		hostButtons: { type: 'Object' },
 		class: {}