@pie-players/pie-assessment-toolkit 0.3.2 → 0.3.4

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

@@ -13,14 +13,16 @@ import { DEFAULT_TOOL_MODULE_LOADERS } from '../tools/default-tool-module-loader
 import { normalizeToolsConfig, parseToolList, resolveToolsForLevel } from '../services/tools-config-normalizer.js';
 import { createScopedToolId, parseScopedToolId } from '../services/tool-instance-id.js';
 
-var root_2 = $.from_html(`<span class="item-toolbar__element-host svelte-rnx3ie"></span>`);
-var root_7 = $.from_html(`<img class="item-toolbar__icon-image svelte-rnx3ie" alt=""/>`);
-var root_10 = $.from_html(`<i aria-hidden="true"></i>`);
-var root_4 = $.from_html(`<a><!></a>`);
-var root_14 = $.from_html(`<img class="item-toolbar__icon-image svelte-rnx3ie" alt=""/>`);
-var root_17 = $.from_html(`<i aria-hidden="true"></i>`);
-var root_11 = $.from_html(`<button type="button"><!></button>`);
-var root_18 = $.from_html(`<span class="item-toolbar__element-host svelte-rnx3ie"></span>`);
+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_22 = $.from_html(`<span class="item-toolbar__element-host svelte-rnx3ie"></span>`);
 var root_1 = $.from_html(`<div><!> <!> <!></div>`);
 
 const $$css = {
@@ -130,7 +132,22 @@ export default function ItemToolBar($$anchor, $$props) {
 	});
 
 	const providerConfig = $.derived(() => $.get(effectiveToolsConfig)?.providers || {});
-	const isProviderEnabled = (toolId) => $.get(providerConfig)[toolId]?.enabled !== false;
+
+	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;
+		}
+
+		return normalized;
+	});
+
+	const isProviderEnabled = (toolId) => $.get(normalizedProviderConfig)[toolId]?.enabled !== false;
 
 	// Pass 1: determine allowed tools
 	const allowedToolIds = $.derived(() => {
@@ -139,16 +156,17 @@ export default function ItemToolBar($$anchor, $$props) {
 			: $.get(placementAllowedToolIds);
 
 		const providerEnabledConfiguredTools = configuredTools.filter((toolId) => isProviderEnabled(toolId));
+		const dedupe = (toolIds) => Array.from(new Set(toolIds));
 
 		if (pnpResolver() && assessment() && itemRef()) {
-			const allowedByPnp = pnpResolver().getAllowedToolIds(assessment(), itemRef());
+			const allowedByPnp = dedupe($.get(effectiveToolRegistry).normalizeToolIds(pnpResolver().getAllowedToolIds(assessment(), itemRef()))).filter(Boolean);
 
 			if (providerEnabledConfiguredTools.length === 0) return allowedByPnp;
 
-			return allowedByPnp.filter((toolId) => providerEnabledConfiguredTools.includes(toolId));
+			return dedupe(allowedByPnp.filter((toolId) => providerEnabledConfiguredTools.includes(toolId)));
 		}
 
-		return providerEnabledConfiguredTools;
+		return dedupe(providerEnabledConfiguredTools);
 	});
 
 	const contentReady = $.derived(() => {
@@ -396,8 +414,27 @@ export default function ItemToolBar($$anchor, $$props) {
 		...$.get(normalizedHostButtons)
 	]);
 
-	const mountedElementsBeforeButtons = $.derived(() => $.get(renderedTools).flatMap((renderedTool) => (renderedTool.elements || []).filter((entry) => entry.mount === 'before-buttons').map((entry) => entry.element).filter((entry) => Boolean(entry))));
-	const mountedElementsAfterButtons = $.derived(() => $.get(renderedTools).flatMap((renderedTool) => (renderedTool.elements || []).filter((entry) => entry.mount === 'after-buttons').map((entry) => entry.element).filter((entry) => Boolean(entry))));
+	const renderedToolActiveById = $.derived(() => {
+		const result = {};
+
+		for (const renderedTool of $.get(renderedTools)) {
+			result[renderedTool.toolId] = $.get(activeToolState)[renderedTool.toolId] ?? renderedTool.button?.active ?? false;
+		}
+
+		return result;
+	});
+
+	const mountedElementsBeforeButtons = $.derived(() => $.get(renderedTools).flatMap((renderedTool) => (renderedTool.elements || []).filter((entry) => entry.mount === 'before-buttons').filter((entry) => Boolean(entry.element)).map((entry, index) => ({
+		key: `before-${renderedTool.toolId}-${index}`,
+		toolId: renderedTool.toolId,
+		entry
+	}))));
+
+	const mountedElementsAfterButtons = $.derived(() => $.get(renderedTools).flatMap((renderedTool) => (renderedTool.elements || []).filter((entry) => entry.mount === 'after-buttons').filter((entry) => Boolean(entry.element)).map((entry, index) => ({
+		key: `after-${renderedTool.toolId}-${index}`,
+		toolId: renderedTool.toolId,
+		entry
+	}))));
 
 	function isToolbarItemActive(item) {
 		if (item.id in $.get(activeToolState)) {
@@ -499,6 +536,366 @@ export default function ItemToolBar($$anchor, $$props) {
 		};
 	}
 
+	function mountElementWithShell(node, args) {
+		let currentArgs = args;
+		let shellEl = null;
+		let headerEl = null;
+		let contentEl = null;
+		let titleEl = null;
+		let closeButtonEl = null;
+		let resizeHandleEl = null;
+		let mountedContentElement = null;
+		let dragPointerId = null;
+		let resizePointerId = null;
+		let dragOffsetX = 0;
+		let dragOffsetY = 0;
+		let resizeStartWidth = 0;
+		let resizeStartHeight = 0;
+		let resizeStartX = 0;
+		let resizeStartY = 0;
+		let x = 0;
+		let y = 0;
+		let width = currentArgs.mounted.entry.shell?.initialWidth ?? 720;
+		let height = currentArgs.mounted.entry.shell?.initialHeight ?? 560;
+
+		const getHostedContext = () => {
+			const shellConfig = currentArgs.mounted.entry.shell;
+
+			if (!shellConfig) return null;
+
+			return {
+				toolId: currentArgs.mounted.toolId,
+				toolbarContext: $.get(toolbarContext),
+				shellConfig
+			};
+		};
+
+		const notifyHostedMount = (element) => {
+			const registration = $.get(effectiveToolRegistry).get(currentArgs.mounted.toolId);
+			const context = getHostedContext();
+
+			if (!registration?.onHostedMount || !context) return;
+
+			void registration.onHostedMount(element, context);
+		};
+
+		const notifyHostedResize = () => {
+			const registration = $.get(effectiveToolRegistry).get(currentArgs.mounted.toolId);
+			const context = getHostedContext();
+
+			if (!registration?.onHostedResize || !context) return;
+
+			void registration.onHostedResize({ width, height }, currentArgs.mounted.entry.element, context);
+		};
+
+		const notifyHostedUnmount = () => {
+			const registration = $.get(effectiveToolRegistry).get(currentArgs.mounted.toolId);
+			const context = getHostedContext();
+
+			if (!registration?.onHostedUnmount || !context) return;
+
+			void registration.onHostedUnmount(currentArgs.mounted.entry.element, context);
+		};
+
+		const clamp = (value, min, max) => Math.max(min, Math.min(value, max));
+
+		const applyShellStyle = () => {
+			if (!shellEl) return;
+
+			shellEl.style.left = `${x}px`;
+			shellEl.style.top = `${y}px`;
+			shellEl.style.width = `${width}px`;
+			shellEl.style.height = `${height}px`;
+			shellEl.style.display = currentArgs.active ? 'flex' : 'none';
+		};
+
+		const mountContent = () => {
+			if (!contentEl) return;
+
+			const element = currentArgs.mounted.entry.element;
+
+			element.style.display = 'block';
+			element.style.width = '100%';
+			element.style.height = '100%';
+			element.style.flex = '1 1 auto';
+			element.style.minHeight = '0';
+
+			if (mountedContentElement && mountedContentElement !== element) {
+				if (mountedContentElement.parentNode === contentEl) {
+					contentEl.removeChild(mountedContentElement);
+				}
+
+				mountedContentElement = null;
+			}
+
+			if (element.parentNode && element.parentNode !== contentEl) {
+				element.parentNode.removeChild(element);
+			}
+
+			if (element.parentNode !== contentEl) {
+				contentEl.appendChild(element);
+			}
+
+			mountedContentElement = element;
+			notifyHostedMount(element);
+		};
+
+		const bringToFront = () => {
+			if ($.get(effectiveToolCoordinator) && shellEl) {
+				$.get(effectiveToolCoordinator).bringToFront(shellEl);
+			}
+		};
+
+		const centerShell = () => {
+			const viewportW = window.innerWidth;
+			const viewportH = window.innerHeight;
+
+			x = Math.max(0, Math.round((viewportW - width) / 2));
+			y = Math.max(0, Math.round((viewportH - height) / 2));
+		};
+
+		const closeShell = () => {
+			$.get(toolbarContext).toggleTool(currentArgs.mounted.toolId);
+			syncRenderedToolsState();
+		};
+
+		const onHeaderPointerDown = (event) => {
+			if (!currentArgs.mounted.entry.shell?.draggable) return;
+
+			const target = event.target;
+
+			if (target.closest('button')) return;
+			if (!shellEl) return;
+
+			dragPointerId = event.pointerId;
+			dragOffsetX = event.clientX - x;
+			dragOffsetY = event.clientY - y;
+			shellEl.setPointerCapture(event.pointerId);
+			bringToFront();
+		};
+
+		const onResizePointerDown = (event) => {
+			if (!shellEl || !currentArgs.mounted.entry.shell?.resizable) return;
+
+			event.stopPropagation();
+			resizePointerId = event.pointerId;
+			resizeStartWidth = width;
+			resizeStartHeight = height;
+			resizeStartX = event.clientX;
+			resizeStartY = event.clientY;
+			shellEl.setPointerCapture(event.pointerId);
+			bringToFront();
+		};
+
+		const onShellPointerMove = (event) => {
+			if (!shellEl) return;
+
+			if (dragPointerId === event.pointerId) {
+				const maxX = Math.max(0, window.innerWidth - width);
+				const maxY = Math.max(0, window.innerHeight - height);
+
+				x = clamp(event.clientX - dragOffsetX, 0, maxX);
+				y = clamp(event.clientY - dragOffsetY, 0, maxY);
+				applyShellStyle();
+
+				return;
+			}
+
+			if (resizePointerId === event.pointerId) {
+				const shellConfig = currentArgs.mounted.entry.shell;
+				const minWidth = shellConfig?.minWidth ?? 320;
+				const minHeight = shellConfig?.minHeight ?? 240;
+				const maxWidth = shellConfig?.maxWidth ?? window.innerWidth;
+				const maxHeight = shellConfig?.maxHeight ?? window.innerHeight;
+
+				width = clamp(resizeStartWidth + (event.clientX - resizeStartX), minWidth, Math.max(minWidth, Math.min(maxWidth, window.innerWidth - x)));
+				height = clamp(resizeStartHeight + (event.clientY - resizeStartY), minHeight, Math.max(minHeight, Math.min(maxHeight, window.innerHeight - y)));
+				applyShellStyle();
+				notifyHostedResize();
+			}
+		};
+
+		const onShellPointerUp = (event) => {
+			if (!shellEl) return;
+
+			if (dragPointerId === event.pointerId) {
+				dragPointerId = null;
+				shellEl.releasePointerCapture(event.pointerId);
+			}
+
+			if (resizePointerId === event.pointerId) {
+				resizePointerId = null;
+				shellEl.releasePointerCapture(event.pointerId);
+			}
+		};
+
+		const onWindowResize = () => {
+			const maxX = Math.max(0, window.innerWidth - width);
+			const maxY = Math.max(0, window.innerHeight - height);
+
+			x = clamp(x, 0, maxX);
+			y = clamp(y, 0, maxY);
+			applyShellStyle();
+		};
+
+		if (isBrowser && currentArgs.mounted.entry.shell) {
+			shellEl = document.createElement('div');
+			shellEl.className = 'pie-tool-shell';
+			shellEl.setAttribute('data-pie-tool-shell', currentArgs.mounted.toolId);
+			shellEl.style.position = 'fixed';
+			shellEl.style.zIndex = '2000';
+			shellEl.style.background = 'var(--pie-background, #fff)';
+			shellEl.style.border = '1px solid var(--pie-border-light, #d1d5db)';
+			shellEl.style.borderRadius = '12px';
+			shellEl.style.boxShadow = '0 10px 40px rgb(0 0 0 / 0.25)';
+			shellEl.style.overflow = 'hidden';
+			shellEl.style.display = currentArgs.active ? 'flex' : 'none';
+			shellEl.style.flexDirection = 'column';
+			headerEl = document.createElement('div');
+			headerEl.className = 'pie-tool-shell__header';
+			headerEl.style.display = 'flex';
+			headerEl.style.alignItems = 'center';
+			headerEl.style.justifyContent = 'space-between';
+			headerEl.style.padding = '10px 12px';
+			headerEl.style.background = 'var(--pie-primary-dark, #2c3e50)';
+			headerEl.style.color = 'var(--pie-white, #fff)';
+			headerEl.style.cursor = currentArgs.mounted.entry.shell.draggable === false ? 'default' : 'move';
+			headerEl.style.flex = '0 0 auto';
+			titleEl = document.createElement('span');
+			titleEl.className = 'pie-tool-shell__title';
+			titleEl.textContent = currentArgs.mounted.entry.shell.title || currentArgs.mounted.toolId;
+			headerEl.appendChild(titleEl);
+			closeButtonEl = document.createElement('button');
+			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');
+
+			if (closeIconEl) {
+				closeIconEl.style.width = '16px';
+				closeIconEl.style.height = '16px';
+				closeIconEl.style.display = 'block';
+				closeIconEl.style.flexShrink = '0';
+				closeIconEl.style.pointerEvents = 'none';
+			}
+
+			closeButtonEl.style.border = '1px solid transparent';
+			closeButtonEl.style.background = 'color-mix(in srgb, var(--pie-white, #fff) 8%, transparent)';
+			closeButtonEl.style.color = 'inherit';
+			closeButtonEl.style.cursor = 'pointer';
+			closeButtonEl.style.display = 'inline-flex';
+			closeButtonEl.style.alignItems = 'center';
+			closeButtonEl.style.justifyContent = 'center';
+			closeButtonEl.style.width = '28px';
+			closeButtonEl.style.height = '28px';
+			closeButtonEl.style.padding = '0';
+			closeButtonEl.style.borderRadius = '8px';
+			closeButtonEl.style.lineHeight = '0';
+			closeButtonEl.style.transition = 'background-color 0.15s ease, border-color 0.15s ease';
+			closeButtonEl.style.display = currentArgs.mounted.entry.shell.closeable === false ? 'none' : 'inline-flex';
+
+			closeButtonEl.onmouseenter = () => {
+				closeButtonEl && (closeButtonEl.style.background = 'color-mix(in srgb, var(--pie-white, #fff) 18%, transparent)');
+			};
+
+			closeButtonEl.onmouseleave = () => {
+				closeButtonEl && (closeButtonEl.style.background = 'color-mix(in srgb, var(--pie-white, #fff) 8%, transparent)');
+			};
+
+			closeButtonEl.onfocus = () => {
+				closeButtonEl && (closeButtonEl.style.outline = '2px solid var(--pie-button-focus-outline, var(--pie-primary, #4A90E2))');
+				closeButtonEl && (closeButtonEl.style.outlineOffset = '2px');
+			};
+
+			closeButtonEl.onblur = () => {
+				closeButtonEl && (closeButtonEl.style.outline = 'none');
+				closeButtonEl && (closeButtonEl.style.outlineOffset = '0');
+			};
+
+			closeButtonEl.onclick = closeShell;
+			headerEl.appendChild(closeButtonEl);
+			contentEl = document.createElement('div');
+			contentEl.className = 'pie-tool-shell__content';
+			contentEl.style.position = 'relative';
+			contentEl.style.width = '100%';
+			contentEl.style.flex = '1 1 auto';
+			contentEl.style.minHeight = '0';
+			shellEl.appendChild(headerEl);
+			shellEl.appendChild(contentEl);
+
+			if (currentArgs.mounted.entry.shell.resizable !== false) {
+				resizeHandleEl = document.createElement('div');
+				resizeHandleEl.className = 'pie-tool-shell__resize';
+				resizeHandleEl.style.position = 'absolute';
+				resizeHandleEl.style.right = '0';
+				resizeHandleEl.style.bottom = '0';
+				resizeHandleEl.style.width = '16px';
+				resizeHandleEl.style.height = '16px';
+				resizeHandleEl.style.cursor = 'nwse-resize';
+				resizeHandleEl.style.background = 'linear-gradient(135deg, transparent 0%, transparent 40%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.35) 60%, transparent 60%, transparent 100%)';
+				shellEl.appendChild(resizeHandleEl);
+				resizeHandleEl.addEventListener('pointerdown', onResizePointerDown);
+			}
+
+			headerEl.addEventListener('pointerdown', onHeaderPointerDown);
+			shellEl.addEventListener('pointermove', onShellPointerMove);
+			shellEl.addEventListener('pointerup', onShellPointerUp);
+			shellEl.addEventListener('pointerdown', bringToFront);
+			window.addEventListener('resize', onWindowResize);
+			document.body.appendChild(shellEl);
+			centerShell();
+			applyShellStyle();
+			mountContent();
+			notifyHostedResize();
+		}
+
+		return {
+			update(nextArgs) {
+				currentArgs = nextArgs;
+
+				if (!shellEl || !contentEl || !titleEl || !closeButtonEl) return;
+
+				titleEl.textContent = currentArgs.mounted.entry.shell?.title || currentArgs.mounted.toolId;
+				closeButtonEl.style.display = currentArgs.mounted.entry.shell?.closeable === false ? 'none' : 'inline-flex';
+				mountContent();
+				applyShellStyle();
+				notifyHostedResize();
+			},
+
+			destroy() {
+				notifyHostedUnmount();
+
+				if (resizeHandleEl) {
+					resizeHandleEl.removeEventListener('pointerdown', onResizePointerDown);
+				}
+
+				if (headerEl) {
+					headerEl.removeEventListener('pointerdown', onHeaderPointerDown);
+				}
+
+				if (shellEl) {
+					shellEl.removeEventListener('pointermove', onShellPointerMove);
+					shellEl.removeEventListener('pointerup', onShellPointerUp);
+					shellEl.removeEventListener('pointerdown', bringToFront);
+				}
+
+				window.removeEventListener('resize', onWindowResize);
+
+				if (mountedContentElement && contentEl && mountedContentElement.parentNode === contentEl) {
+					contentEl.removeChild(mountedContentElement);
+				}
+
+				mountedContentElement = null;
+
+				if (shellEl && shellEl.parentElement) {
+					shellEl.remove();
+				}
+			}
+		};
+	}
+
 	var $$exports = {
 		get level() {
 			return level();
@@ -667,48 +1064,72 @@ export default function ItemToolBar($$anchor, $$props) {
 	var node_1 = $.first_child(fragment);
 
 	{
-		var consequent_9 = ($$anchor) => {
+		var consequent_11 = ($$anchor) => {
 			var div = root_1();
 			let classes;
 			var node_2 = $.child(div);
 
-			$.each(node_2, 17, () => $.get(mountedElementsBeforeButtons), (mountedElement) => `before-${mountedElement.tagName}-${mountedElement.getAttribute('tool-id') || ''}`, ($$anchor, mountedElement) => {
-				var span = root_2();
+			$.each(node_2, 17, () => $.get(mountedElementsBeforeButtons), (mounted) => mounted.key, ($$anchor, mounted) => {
+				var fragment_1 = $.comment();
+				var node_3 = $.first_child(fragment_1);
+
+				{
+					var consequent = ($$anchor) => {
+						var span = root_3();
+
+						$.action(span, ($$node, $$action_arg) => mountElementWithShell?.($$node, $$action_arg), () => ({
+							mounted: $.get(mounted),
+							active: $.get(renderedToolActiveById)[$.get(mounted).toolId] ?? false
+						}));
+
+						$.append($$anchor, span);
+					};
+
+					var alternate = ($$anchor) => {
+						var span_1 = root_4();
+
+						$.action(span_1, ($$node, $$action_arg) => mountElement?.($$node, $$action_arg), () => $.get(mounted).entry.element);
+						$.append($$anchor, span_1);
+					};
+
+					$.if(node_3, ($$render) => {
+						if ($.get(mounted).entry.shell) $$render(consequent); else $$render(alternate, -1);
+					});
+				}
 
-				$.action(span, ($$node, $$action_arg) => mountElement?.($$node, $$action_arg), () => $.get(mountedElement));
-				$.append($$anchor, span);
+				$.append($$anchor, fragment_1);
 			});
 
-			var node_3 = $.sibling(node_2, 2);
+			var node_4 = $.sibling(node_2, 2);
 
-			$.each(node_3, 17, () => $.get(toolbarItems), (item) => item.id, ($$anchor, item, $$index_1, $$array) => {
-				var fragment_1 = $.comment();
-				var node_4 = $.first_child(fragment_1);
+			$.each(node_4, 17, () => $.get(toolbarItems), (item) => item.id, ($$anchor, item, $$index_1, $$array) => {
+				var fragment_2 = $.comment();
+				var node_5 = $.first_child(fragment_2);
 
 				{
-					var consequent_4 = ($$anchor) => {
-						var a = root_4();
+					var consequent_5 = ($$anchor) => {
+						var a = root_6();
 						let classes_1;
-						var node_5 = $.child(a);
+						var node_6 = $.child(a);
 
 						{
-							var consequent_3 = ($$anchor) => {
-								var fragment_2 = $.comment();
-								var node_6 = $.first_child(fragment_2);
+							var consequent_4 = ($$anchor) => {
+								var fragment_3 = $.comment();
+								var node_7 = $.first_child(fragment_3);
 
 								{
-									var consequent = ($$anchor) => {
-										var fragment_3 = $.comment();
-										var node_7 = $.first_child(fragment_3);
+									var consequent_1 = ($$anchor) => {
+										var fragment_4 = $.comment();
+										var node_8 = $.first_child(fragment_4);
 
-										$.html(node_7, () => $.get(item).icon);
-										$.append($$anchor, fragment_3);
+										$.html(node_8, () => $.get(item).icon);
+										$.append($$anchor, fragment_4);
 									};
 
 									var d = $.derived(() => isInlineSvgIcon($.get(item).icon));
 
-									var consequent_1 = ($$anchor) => {
-										var img = root_7();
+									var consequent_2 = ($$anchor) => {
+										var img = root_9();
 
 										$.template_effect(() => $.set_attribute(img, 'src', $.get(item).icon));
 										$.append($$anchor, img);
@@ -716,45 +1137,45 @@ export default function ItemToolBar($$anchor, $$props) {
 
 									var d_1 = $.derived(() => isExternalIconUrl($.get(item).icon));
 
-									var alternate_1 = ($$anchor) => {
+									var alternate_2 = ($$anchor) => {
 										const fallbackIcon = $.derived(() => getFallbackIconSvg($.get(item).icon));
-										var fragment_4 = $.comment();
-										var node_8 = $.first_child(fragment_4);
+										var fragment_5 = $.comment();
+										var node_9 = $.first_child(fragment_5);
 
 										{
-											var consequent_2 = ($$anchor) => {
-												var fragment_5 = $.comment();
-												var node_9 = $.first_child(fragment_5);
+											var consequent_3 = ($$anchor) => {
+												var fragment_6 = $.comment();
+												var node_10 = $.first_child(fragment_6);
 
-												$.html(node_9, () => $.get(fallbackIcon));
-												$.append($$anchor, fragment_5);
+												$.html(node_10, () => $.get(fallbackIcon));
+												$.append($$anchor, fragment_6);
 											};
 
-											var alternate = ($$anchor) => {
-												var i = root_10();
+											var alternate_1 = ($$anchor) => {
+												var i = root_12();
 
 												$.template_effect(() => $.set_class(i, 1, `icon icon-${$.get(item).icon}`, 'svelte-rnx3ie'));
 												$.append($$anchor, i);
 											};
 
-											$.if(node_8, ($$render) => {
-												if ($.get(fallbackIcon)) $$render(consequent_2); else $$render(alternate, false);
+											$.if(node_9, ($$render) => {
+												if ($.get(fallbackIcon)) $$render(consequent_3); else $$render(alternate_1, -1);
 											});
 										}
 
-										$.append($$anchor, fragment_4);
+										$.append($$anchor, fragment_5);
 									};
 
-									$.if(node_6, ($$render) => {
-										if ($.get(d)) $$render(consequent); else if ($.get(d_1)) $$render(consequent_1, 1); else $$render(alternate_1, false);
+									$.if(node_7, ($$render) => {
+										if ($.get(d)) $$render(consequent_1); else if ($.get(d_1)) $$render(consequent_2, 1); else $$render(alternate_2, -1);
 									});
 								}
 
-								$.append($$anchor, fragment_2);
+								$.append($$anchor, fragment_3);
 							};
 
-							$.if(node_5, ($$render) => {
-								if ($.get(item).icon) $$render(consequent_3);
+							$.if(node_6, ($$render) => {
+								if ($.get(item).icon) $$render(consequent_4);
 							});
 						}
 
@@ -788,29 +1209,29 @@ export default function ItemToolBar($$anchor, $$props) {
 
 					var d_2 = $.derived(() => isToolbarLinkItem($.get(item)));
 
-					var alternate_4 = ($$anchor) => {
-						var button_1 = root_11();
+					var alternate_5 = ($$anchor) => {
+						var button_1 = root_13();
 						let classes_2;
-						var node_10 = $.child(button_1);
+						var node_11 = $.child(button_1);
 
 						{
-							var consequent_8 = ($$anchor) => {
-								var fragment_6 = $.comment();
-								var node_11 = $.first_child(fragment_6);
+							var consequent_9 = ($$anchor) => {
+								var fragment_7 = $.comment();
+								var node_12 = $.first_child(fragment_7);
 
 								{
-									var consequent_5 = ($$anchor) => {
-										var fragment_7 = $.comment();
-										var node_12 = $.first_child(fragment_7);
+									var consequent_6 = ($$anchor) => {
+										var fragment_8 = $.comment();
+										var node_13 = $.first_child(fragment_8);
 
-										$.html(node_12, () => $.get(item).icon);
-										$.append($$anchor, fragment_7);
+										$.html(node_13, () => $.get(item).icon);
+										$.append($$anchor, fragment_8);
 									};
 
 									var d_3 = $.derived(() => isInlineSvgIcon($.get(item).icon));
 
-									var consequent_6 = ($$anchor) => {
-										var img_1 = root_14();
+									var consequent_7 = ($$anchor) => {
+										var img_1 = root_16();
 
 										$.template_effect(() => $.set_attribute(img_1, 'src', $.get(item).icon));
 										$.append($$anchor, img_1);
@@ -818,45 +1239,45 @@ export default function ItemToolBar($$anchor, $$props) {
 
 									var d_4 = $.derived(() => isExternalIconUrl($.get(item).icon));
 
-									var alternate_3 = ($$anchor) => {
+									var alternate_4 = ($$anchor) => {
 										const fallbackIcon = $.derived(() => getFallbackIconSvg($.get(item).icon));
-										var fragment_8 = $.comment();
-										var node_13 = $.first_child(fragment_8);
+										var fragment_9 = $.comment();
+										var node_14 = $.first_child(fragment_9);
 
 										{
-											var consequent_7 = ($$anchor) => {
-												var fragment_9 = $.comment();
-												var node_14 = $.first_child(fragment_9);
+											var consequent_8 = ($$anchor) => {
+												var fragment_10 = $.comment();
+												var node_15 = $.first_child(fragment_10);
 
-												$.html(node_14, () => $.get(fallbackIcon));
-												$.append($$anchor, fragment_9);
+												$.html(node_15, () => $.get(fallbackIcon));
+												$.append($$anchor, fragment_10);
 											};
 
-											var alternate_2 = ($$anchor) => {
-												var i_1 = root_17();
+											var alternate_3 = ($$anchor) => {
+												var i_1 = root_19();
 
 												$.template_effect(() => $.set_class(i_1, 1, `icon icon-${$.get(item).icon}`, 'svelte-rnx3ie'));
 												$.append($$anchor, i_1);
 											};
 
-											$.if(node_13, ($$render) => {
-												if ($.get(fallbackIcon)) $$render(consequent_7); else $$render(alternate_2, false);
+											$.if(node_14, ($$render) => {
+												if ($.get(fallbackIcon)) $$render(consequent_8); else $$render(alternate_3, -1);
 											});
 										}
 
-										$.append($$anchor, fragment_8);
+										$.append($$anchor, fragment_9);
 									};
 
-									$.if(node_11, ($$render) => {
-										if ($.get(d_3)) $$render(consequent_5); else if ($.get(d_4)) $$render(consequent_6, 1); else $$render(alternate_3, false);
+									$.if(node_12, ($$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_6);
+								$.append($$anchor, fragment_7);
 							};
 
-							$.if(node_10, ($$render) => {
-								if ($.get(item).icon) $$render(consequent_8);
+							$.if(node_11, ($$render) => {
+								if ($.get(item).icon) $$render(consequent_9);
 							});
 						}
 
@@ -885,21 +1306,45 @@ export default function ItemToolBar($$anchor, $$props) {
 						$.append($$anchor, button_1);
 					};
 
-					$.if(node_4, ($$render) => {
-						if ($.get(d_2)) $$render(consequent_4); else $$render(alternate_4, false);
+					$.if(node_5, ($$render) => {
+						if ($.get(d_2)) $$render(consequent_5); else $$render(alternate_5, -1);
 					});
 				}
 
-				$.append($$anchor, fragment_1);
+				$.append($$anchor, fragment_2);
 			});
 
-			var node_15 = $.sibling(node_3, 2);
+			var node_16 = $.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_15, 17, () => $.get(mountedElementsAfterButtons), (mountedElement) => `after-${mountedElement.tagName}-${mountedElement.getAttribute('tool-id') || ''}`, ($$anchor, mountedElement) => {
-				var span_1 = root_18();
+				{
+					var consequent_10 = ($$anchor) => {
+						var span_2 = root_21();
+
+						$.action(span_2, ($$node, $$action_arg) => mountElementWithShell?.($$node, $$action_arg), () => ({
+							mounted: $.get(mounted),
+							active: $.get(renderedToolActiveById)[$.get(mounted).toolId] ?? false
+						}));
+
+						$.append($$anchor, span_2);
+					};
+
+					var alternate_6 = ($$anchor) => {
+						var span_3 = root_22();
+
+						$.action(span_3, ($$node, $$action_arg) => mountElement?.($$node, $$action_arg), () => $.get(mounted).entry.element);
+						$.append($$anchor, span_3);
+					};
+
+					$.if(node_17, ($$render) => {
+						if ($.get(mounted).entry.shell) $$render(consequent_10); else $$render(alternate_6, -1);
+					});
+				}
 
-				$.action(span_1, ($$node, $$action_arg) => mountElement?.($$node, $$action_arg), () => $.get(mountedElement));
-				$.append($$anchor, span_1);
+				$.append($$anchor, fragment_11);
 			});
 
 			$.reset(div);
@@ -921,7 +1366,7 @@ export default function ItemToolBar($$anchor, $$props) {
 		};
 
 		$.if(node_1, ($$render) => {
-			if (isBrowser) $$render(consequent_9);
+			if (isBrowser) $$render(consequent_11);
 		});
 	}