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

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

@@ -7,22 +7,25 @@ import {
 	connectAssessmentToolkitShellContext
 } from '../context/runtime-context-consumer.js';
 
+import { isExternalIconUrl, isInlineSvgIcon, isToolbarLinkItem } from '../services/toolbar-items.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>`);
+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_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;}'
+	code: '.item-toolbar.svelte-rnx3ie {display:flex;align-items:center;gap:0.5rem;}.item-toolbar--top.svelte-rnx3ie,\n	.item-toolbar--bottom.svelte-rnx3ie {flex-direction:row;flex-wrap:wrap;}.item-toolbar--left.svelte-rnx3ie,\n	.item-toolbar--right.svelte-rnx3ie {flex-direction:column;align-items:stretch;}.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;text-decoration:none;}.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) {
@@ -34,16 +37,21 @@ export default function ItemToolBar($$anchor, $$props) {
 	let activeToolState = $.state($.proxy({}));
 
 	// Props
-	let itemId = $.prop($$props, 'itemId', 7, ''),
+	let level = $.prop($$props, 'level', 7, 'item'),
+		scopeId = $.prop($$props, 'scopeId', 7, ''),
+		itemId = $.prop($$props, 'itemId', 7, ''),
+		sectionId = $.prop($$props, 'sectionId', 7, ''),
 		catalogId = $.prop($$props, 'catalogId', 7, ''),
 		tools = $.prop($$props, 'tools', 7, 'calculator,textToSpeech,answerEliminator'),
 		contentKind = $.prop($$props, 'contentKind', 7, 'assessment-item'),
+		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, ''),
 		size = $.prop($$props, 'size', 7, 'md'),
 		language = $.prop($$props, 'language', 7, 'en-US');
@@ -73,11 +81,27 @@ export default function ItemToolBar($$anchor, $$props) {
 	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 effectiveSectionId = $.derived(() => sectionId() || $.get(runtimeContext)?.sectionId || '');
+	const effectiveContentKind = $.derived(() => contentKind() || $.get(shellContext)?.contentKind || (level() === 'section' ? 'section' : 'assessment-item'));
+
+	const effectiveLevel = $.derived(() => {
+		if (level() && level() !== 'item') return level();
+		if ($.get(effectiveContentKind) === 'rubric-block-stimulus') return 'passage';
+
+		return 'item';
+	});
+
+	const effectiveScopeId = $.derived(() => {
+		if (scopeId()) return scopeId();
+		if ($.get(effectiveLevel) === 'section') return $.get(effectiveSectionId) || $.get(runtimeContext)?.sectionId || 'default-section';
+		if ($.get(effectiveLevel) === 'assessment') return $.get(runtimeContext)?.assessmentId || 'default-assessment';
+
+		return $.get(effectiveCanonicalItemId) || $.get(effectiveItemId) || 'default-item';
+	});
+
+	const effectiveCatalogId = $.derived(() => catalogId() || $.get(effectiveScopeId));
 	const effectiveItem = $.derived(() => item() || $.get(shellContext)?.item || null);
 
 	// Effective registry for visibility and metadata ownership.
@@ -92,7 +116,12 @@ export default function ItemToolBar($$anchor, $$props) {
 		return normalizeToolsConfig(coordinatorConfig || {});
 	});
 
-	const placementLevel = $.derived(() => $.get(effectiveContentKind) === 'rubric-block-stimulus' ? 'passage' : 'item');
+	const placementLevel = $.derived(() => {
+		if ($.get(effectiveLevel) === 'section') return 'section';
+		if ($.get(effectiveLevel) === 'passage' || $.get(effectiveContentKind) === 'rubric-block-stimulus') return 'passage';
+
+		return 'item';
+	});
 
 	const placementAllowedToolIds = $.derived(() => {
 		const resolved = resolveToolsForLevel($.get(effectiveToolsConfig), $.get(placementLevel));
@@ -100,34 +129,62 @@ export default function ItemToolBar($$anchor, $$props) {
 		return $.get(effectiveToolRegistry).normalizeToolIds(resolved).filter(Boolean);
 	});
 
+	const providerConfig = $.derived(() => $.get(effectiveToolsConfig)?.providers || {});
+	const isProviderEnabled = (toolId) => $.get(providerConfig)[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));
+
 		if (pnpResolver() && assessment() && itemRef()) {
 			const allowedByPnp = pnpResolver().getAllowedToolIds(assessment(), itemRef());
 
-			if (configuredTools.length === 0) return allowedByPnp;
+			if (providerEnabledConfiguredTools.length === 0) return allowedByPnp;
 
-			return allowedByPnp.filter((toolId) => configuredTools.includes(toolId));
+			return allowedByPnp.filter((toolId) => providerEnabledConfiguredTools.includes(toolId));
 		}
 
-		return configuredTools;
+		return providerEnabledConfiguredTools;
 	});
 
 	const contentReady = $.derived(() => {
+		if ($.get(effectiveLevel) === 'section' || $.get(effectiveLevel) === 'assessment') return true;
+
 		const config = $.get(effectiveItem)?.config;
 
 		return !!($.get(effectiveItem) && config && typeof config === 'object');
 	});
 
 	const toolContext = $.derived(() => {
+		if ($.get(effectiveLevel) === 'section') {
+			return {
+				level: 'section',
+				assessment: assessment() || {},
+				section: {}
+			};
+		}
+
+		if ($.get(effectiveLevel) === 'assessment') {
+			return { level: 'assessment', assessment: assessment() || {} };
+		}
+
 		if (!$.get(contentReady) || !$.get(effectiveItem)) {
 			return null;
 		}
 
+		if ($.get(effectiveLevel) === 'passage') {
+			return {
+				level: 'passage',
+				assessment: assessment() || {},
+				itemRef: itemRef() || { id: $.get(effectiveCanonicalItemId) },
+				passage: $.get(effectiveItem)
+			};
+		}
+
 		return {
 			level: 'item',
 			assessment: assessment() || {},
@@ -148,6 +205,7 @@ export default function ItemToolBar($$anchor, $$props) {
 	});
 
 	const elementContexts = $.derived(() => {
+		if ($.get(effectiveLevel) !== 'item' && $.get(effectiveLevel) !== 'passage') return [];
 		if (!$.get(contentReady) || !$.get(effectiveItem)) return [];
 
 		const modelsRaw = $.get(effectiveItem)?.config?.models;
@@ -167,28 +225,44 @@ export default function ItemToolBar($$anchor, $$props) {
 
 	// Pass 2: tool-owned context filtering (item + element aggregation)
 	const visibleToolIds = $.derived(() => {
+		const levelCompatibleToolIds = $.get(allowedToolIds).filter((toolId) => {
+			const registration = $.get(effectiveToolRegistry).get(toolId);
+
+			return registration
+				? registration.supportedLevels.includes($.get(effectiveLevel))
+				: false;
+		});
+
+		if ($.get(effectiveLevel) === 'section') {
+			// Section toolbars are orchestrator-driven. Tool-level relevance is often
+			// item-content dependent. Keep pass-1 as the source of truth here.
+			return $.get(allowedToolIds);
+		}
+
 		if (!$.get(contentReady)) {
 			// Stage 1: orchestrator-level allow-list only.
-			return $.get(allowedToolIds);
+			return levelCompatibleToolIds;
 		}
 
 		if (!$.get(toolContext) && $.get(elementContexts).length === 0) {
-			return $.get(allowedToolIds);
+			return levelCompatibleToolIds;
 		}
 
 		const visible = new Set();
 
 		if ($.get(toolContext)) {
-			$.get(effectiveToolRegistry).filterVisibleInContext($.get(allowedToolIds), $.get(toolContext)).forEach((tool) => visible.add(tool.toolId));
+			$.get(effectiveToolRegistry).filterVisibleInContext(levelCompatibleToolIds, $.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));
+			$.get(effectiveToolRegistry).filterVisibleInContext(levelCompatibleToolIds, context).forEach((tool) => visible.add(tool.toolId));
 		}
 
 		return Array.from(visible);
 	});
 
+	const toolbarVisibleToolIds = $.derived(() => $.get(effectiveToolRegistry).filterToolIdsByActivation($.get(visibleToolIds), 'toolbar-toggle'));
+
 	// Dynamically load whatever tools are currently visible.
 	// The registry owns module loader configuration by toolId.
 	$.user_effect(() => {
@@ -196,7 +270,7 @@ export default function ItemToolBar($$anchor, $$props) {
 
 		let cancelled = false;
 
-		void $.get(effectiveToolRegistry).ensureToolModulesLoaded($.get(visibleToolIds)).then(() => {
+		void $.get(effectiveToolRegistry).ensureToolModulesLoaded($.get(toolbarVisibleToolIds)).then(() => {
 			if (!cancelled) $.set(moduleLoadVersion, $.get(moduleLoadVersion) + 1);
 		}).catch((error) => {
 			console.error('[ItemToolBar] Failed to load one or more tool modules:', error);
@@ -227,11 +301,20 @@ export default function ItemToolBar($$anchor, $$props) {
 			// This keeps toolbar contracts stable across mixed registration implementations.
 			return parseScopedToolId(toolId)
 				? toolId
-				: createScopedToolId(toolId, 'item', $.get(effectiveCanonicalItemId));
+				: createScopedToolId(toolId, $.get(effectiveLevel), $.get(effectiveScopeId));
 		};
 
 		return {
-			itemId: $.get(effectiveCanonicalItemId),
+			scope: {
+				level: $.get(effectiveLevel),
+				scopeId: $.get(effectiveScopeId),
+				assessmentId: $.get(runtimeContext)?.assessmentId,
+				sectionId: $.get(effectiveSectionId),
+				itemId: $.get(effectiveItemId),
+				canonicalItemId: $.get(effectiveCanonicalItemId),
+				contentKind: $.get(effectiveContentKind)
+			},
+			itemId: $.get(effectiveScopeId),
 			catalogId: $.get(effectiveCatalogId),
 			language: language(),
 			ui: { size: size() },
@@ -244,7 +327,15 @@ export default function ItemToolBar($$anchor, $$props) {
 			toggleTool: (toolId) => {
 				if (!$.get(effectiveToolCoordinator)) return;
 
-				$.get(effectiveToolCoordinator).toggleTool(toInstanceToolId(toolId));
+				const instanceToolId = toInstanceToolId(toolId);
+
+				// Some tools only self-register after first visibility sync.
+				// Seed a placeholder registration so first toggle always works.
+				if (!$.get(effectiveToolCoordinator).getToolState(instanceToolId)) {
+					$.get(effectiveToolCoordinator).registerTool(instanceToolId, toolId);
+				}
+
+				$.get(effectiveToolCoordinator).toggleTool(instanceToolId);
 			},
 
 			isToolVisible: (toolId) => {
@@ -267,7 +358,7 @@ export default function ItemToolBar($$anchor, $$props) {
 
 		const rendered = [];
 
-		for (const toolId of $.get(visibleToolIds)) {
+		for (const toolId of $.get(toolbarVisibleToolIds)) {
 			const result = $.get(effectiveToolRegistry).renderForToolbar(toolId, $.get(renderContext), $.get(toolbarContext));
 
 			if (result) {
@@ -278,6 +369,59 @@ export default function ItemToolBar($$anchor, $$props) {
 		return rendered;
 	});
 
+	const normalizedHostButtons = $.derived(() => Array.isArray(hostButtons())
+		? hostButtons().filter((item) => !!item && typeof item.id === 'string')
+		: []);
+
+	const nativeToolbarItems = $.derived(() => $.get(renderedTools).filter((renderedTool) => !!renderedTool.button).map((renderedTool) => {
+		const button = renderedTool.button;
+
+		return {
+			id: renderedTool.toolId,
+			label: button.label,
+			ariaLabel: button.ariaLabel || button.label,
+			icon: button.icon,
+			tooltip: button.tooltip || button.label,
+			disabled: button.disabled,
+			active: $.get(activeToolState)[renderedTool.toolId] ?? button.active ?? false,
+			onClick: () => {
+				button.onClick();
+				syncRenderedToolsState();
+			}
+		};
+	}));
+
+	const toolbarItems = $.derived(() => [
+		...$.get(nativeToolbarItems),
+		...$.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))));
+
+	function isToolbarItemActive(item) {
+		if (item.id in $.get(activeToolState)) {
+			return $.get(activeToolState)[item.id] === true;
+		}
+
+		return item.active === true;
+	}
+
+	function getFallbackIconSvg(iconName) {
+		const iconMap = {
+			calculator: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 2h10a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Zm0 2v4h10V4H7Zm0 6v2h2v-2H7Zm4 0v2h2v-2h-2Zm4 0v2h2v-2h-2Zm-8 4v2h2v-2H7Zm4 0v2h2v-2h-2Zm4 0v2h2v-2h-2Zm-8 4v2h2v-2H7Zm4 0v2h2v-2h-2Zm4 0v2h2v-2h-2Z" fill="currentColor"/></svg>',
+			'volume-up': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 3.23v2.06A7.002 7.002 0 0 1 19 12a7 7 0 0 1-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77Zm-2 17.75V3L7 8H3v8h4l5 5Zm4.5-9a4.5 4.5 0 0 0-2.5-4.03v8.05A4.5 4.5 0 0 0 16.5 12Z" fill="currentColor"/></svg>',
+			swatch: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 3a9 9 0 1 0 9 9c0-.55-.45-1-1-1h-2.5a1.5 1.5 0 0 1 0-3H20a1 1 0 0 0 1-1 8.99 8.99 0 0 0-9-4Zm-5.5 9A1.5 1.5 0 1 1 8 13.5 1.5 1.5 0 0 1 6.5 12Zm3-4A1.5 1.5 0 1 1 11 9.5 1.5 1.5 0 0 1 9.5 8Zm5 0A1.5 1.5 0 1 1 16 9.5 1.5 1.5 0 0 1 14.5 8Z" fill="currentColor"/></svg>',
+			'chart-bar': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4.75 5a.76.76 0 0 1 .75.75v11c0 .438.313.75.75.75h13a.76.76 0 0 1 .696 1.039.74.74 0 0 1-.696.461h-13C5 19 4 18 4 16.75v-11A.74.74 0 0 1 4.75 5ZM8 8.25a.74.74 0 0 1 .75-.75h6.5a.76.76 0 0 1 .696 1.039.74.74 0 0 1-.696.461h-6.5A.722.722 0 0 1 8 8.25Zm.75 2.25h4.5a.76.76 0 0 1 .696 1.039.74.74 0 0 1-.696.461h-4.5a.723.723 0 0 1-.75-.75.74.74 0 0 1 .75-.75Zm0 3h8.5a.76.76 0 0 1 .696 1.039.74.74 0 0 1-.696.461h-8.5a.723.723 0 0 1-.75-.75.74.74 0 0 1 .75-.75Z" fill="currentColor"/></svg>',
+			beaker: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 21c-.85 0-1.454-.38-1.813-1.137-.358-.759-.27-1.463.263-2.113L9 11V5H8a.968.968 0 0 1-.713-.287A.968.968 0 0 1 7 4c0-.283.096-.52.287-.712A.968.968 0 0 1 8 3h8c.283 0 .52.096.712.288.192.191.288.429.288.712s-.096.52-.288.713A.968.968 0 0 1 16 5h-1v6l5.55 6.75c.533.65.62 1.354.262 2.113C20.454 20.62 19.85 21 19 21H5Zm2-3h10l-3.4-4h-3.2L7 18Zm-2 1h14l-6-7.3V5h-2v6.7L5 19Z" fill="currentColor"/></svg>',
+			protractor: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m6.75 21-.25-2.2 2.85-7.85a3.95 3.95 0 0 0 1.75.95l-2.75 7.55L6.75 21Zm10.5 0-1.6-1.55-2.75-7.55a3.948 3.948 0 0 0 1.75-.95l2.85 7.85-.25 2.2ZM12 11a2.893 2.893 0 0 1-2.125-.875A2.893 2.893 0 0 1 9 8c0-.65.188-1.23.563-1.737A2.935 2.935 0 0 1 11 5.2V3h2v2.2c.583.2 1.063.554 1.438 1.063C14.812 6.77 15 7.35 15 8c0 .833-.292 1.542-.875 2.125A2.893 2.893 0 0 1 12 11Zm0-2c.283 0 .52-.096.713-.287A.967.967 0 0 0 13 8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8c0 .283.096.52.287.713.192.191.43.287.713.287Z" fill="currentColor"/></svg>',
+			'bars-3': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.85 15c.517 0 .98-.15 1.388-.45.408-.3.695-.692.862-1.175l.375-1.15c.267-.8.2-1.537-.2-2.213C8.875 9.337 8.3 9 7.55 9H4.025l.475 3.925c.083.583.346 1.075.787 1.475.442.4.963.6 1.563.6Zm10.3 0c.6 0 1.12-.2 1.563-.6.441-.4.704-.892.787-1.475L19.975 9h-3.5c-.75 0-1.325.342-1.725 1.025-.4.683-.467 1.425-.2 2.225l.35 1.125c.167.483.454.875.862 1.175.409.3.871.45 1.388.45Zm-10.3 2c-1.1 0-2.063-.363-2.887-1.088a4.198 4.198 0 0 1-1.438-2.737L2 9H1V7h6.55c.733 0 1.404.18 2.013.537A3.906 3.906 0 0 1 11 9h2.025c.35-.617.83-1.104 1.438-1.463A3.892 3.892 0 0 1 16.474 7H23v2h-1l-.525 4.175a4.198 4.198 0 0 1-1.438 2.737A4.238 4.238 0 0 1 17.15 17c-.95 0-1.804-.27-2.562-.813A4.234 4.234 0 0 1 13 14.026l-.375-1.125a21.35 21.35 0 0 1-.1-.363 4.926 4.926 0 0 1-.1-.537h-.85c-.033.2-.067.363-.1.488a21.35 21.35 0 0 1-.1.362L11 14a4.3 4.3 0 0 1-1.588 2.175A4.258 4.258 0 0 1 6.85 17Z" fill="currentColor"/></svg>',
+			ruler: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m8.8 10.95 2.15-2.175-1.4-1.425-1.1 1.1-1.4-1.4 1.075-1.1L7 4.825 4.825 7 8.8 10.95Zm8.2 8.225L19.175 17l-1.125-1.125-1.1 1.075-1.4-1.4 1.075-1.1-1.425-1.4-2.15 2.15L17 19.175ZM7.25 21H3v-4.25l4.375-4.375L2 7l5-5 5.4 5.4 3.775-3.8c.2-.2.425-.35.675-.45a2.068 2.068 0 0 1 1.55 0c.25.1.475.25.675.45L20.4 4.95c.2.2.35.425.45.675.1.25.15.508.15.775a1.975 1.975 0 0 1-.6 1.425l-3.775 3.8L22 17l-5 5-5.375-5.375L7.25 21ZM5 19h1.4l9.8-9.775L14.775 7.8 5 17.6V19Z" fill="currentColor"/></svg>'
+		};
+
+		return iconMap[iconName] || null;
+	}
+
 	function syncRenderedToolsState() {
 		const nextActiveState = {};
 
@@ -356,6 +500,24 @@ export default function ItemToolBar($$anchor, $$props) {
 	}
 
 	var $$exports = {
+		get level() {
+			return level();
+		},
+
+		set level($$value) {
+			level($$value);
+			$.flush();
+		},
+
+		get scopeId() {
+			return scopeId();
+		},
+
+		set scopeId($$value) {
+			scopeId($$value);
+			$.flush();
+		},
+
 		get itemId() {
 			return itemId();
 		},
@@ -365,6 +527,15 @@ export default function ItemToolBar($$anchor, $$props) {
 			$.flush();
 		},
 
+		get sectionId() {
+			return sectionId();
+		},
+
+		set sectionId($$value) {
+			sectionId($$value);
+			$.flush();
+		},
+
 		get catalogId() {
 			return catalogId();
 		},
@@ -392,6 +563,15 @@ export default function ItemToolBar($$anchor, $$props) {
 			$.flush();
 		},
 
+		get position() {
+			return position();
+		},
+
+		set position($$value) {
+			position($$value);
+			$.flush();
+		},
+
 		get scopeElement() {
 			return scopeElement();
 		},
@@ -446,6 +626,15 @@ export default function ItemToolBar($$anchor, $$props) {
 			$.flush();
 		},
 
+		get hostButtons() {
+			return hostButtons();
+		},
+
+		set hostButtons($$value) {
+			hostButtons($$value);
+			$.flush();
+		},
+
 		get class() {
 			return className();
 		},
@@ -478,123 +667,261 @@ export default function ItemToolBar($$anchor, $$props) {
 	var node_1 = $.first_child(fragment);
 
 	{
-		var consequent_5 = ($$anchor) => {
+		var consequent_9 = ($$anchor) => {
 			var div = root_1();
+			let classes;
+			var node_2 = $.child(div);
 
-			$.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();
+			$.each(node_2, 17, () => $.get(mountedElementsBeforeButtons), (mountedElement) => `before-${mountedElement.tagName}-${mountedElement.getAttribute('tool-id') || ''}`, ($$anchor, mountedElement) => {
+				var span = root_2();
 
-						$.action(span, ($$node, $$action_arg) => mountElement?.($$node, $$action_arg), () => $.get(renderedTool).inlineElement);
-						$.append($$anchor, span);
-					};
+				$.action(span, ($$node, $$action_arg) => mountElement?.($$node, $$action_arg), () => $.get(mountedElement));
+				$.append($$anchor, span);
+			});
 
-					$.if(node_2, ($$render) => {
-						if ($.get(renderedTool).inlineElement) $$render(consequent);
-					});
-				}
+			var node_3 = $.sibling(node_2, 2);
 
-				var node_3 = $.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);
 
 				{
-					var consequent_3 = ($$anchor) => {
-						var button = root_4();
-						let classes;
-						var node_4 = $.child(button);
+					var consequent_4 = ($$anchor) => {
+						var a = root_4();
+						let classes_1;
+						var node_5 = $.child(a);
 
 						{
-							var consequent_1 = ($$anchor) => {
+							var consequent_3 = ($$anchor) => {
 								var fragment_2 = $.comment();
-								var node_5 = $.first_child(fragment_2);
+								var node_6 = $.first_child(fragment_2);
 
-								$.html(node_5, () => $.get(renderedTool).button.icon);
-								$.append($$anchor, fragment_2);
-							};
+								{
+									var consequent = ($$anchor) => {
+										var fragment_3 = $.comment();
+										var node_7 = $.first_child(fragment_3);
 
-							var d = $.derived(() => $.get(renderedTool).button.icon.startsWith('<svg'));
+										$.html(node_7, () => $.get(item).icon);
+										$.append($$anchor, fragment_3);
+									};
 
-							var consequent_2 = ($$anchor) => {
-								var img = root_6();
+									var d = $.derived(() => isInlineSvgIcon($.get(item).icon));
 
-								$.template_effect(() => $.set_attribute(img, 'src', $.get(renderedTool).button.icon));
-								$.append($$anchor, img);
-							};
+									var consequent_1 = ($$anchor) => {
+										var img = root_7();
+
+										$.template_effect(() => $.set_attribute(img, 'src', $.get(item).icon));
+										$.append($$anchor, img);
+									};
+
+									var d_1 = $.derived(() => isExternalIconUrl($.get(item).icon));
+
+									var alternate_1 = ($$anchor) => {
+										const fallbackIcon = $.derived(() => getFallbackIconSvg($.get(item).icon));
+										var fragment_4 = $.comment();
+										var node_8 = $.first_child(fragment_4);
+
+										{
+											var consequent_2 = ($$anchor) => {
+												var fragment_5 = $.comment();
+												var node_9 = $.first_child(fragment_5);
+
+												$.html(node_9, () => $.get(fallbackIcon));
+												$.append($$anchor, fragment_5);
+											};
 
-							var d_1 = $.derived(() => $.get(renderedTool).button.icon.startsWith('http'));
+											var alternate = ($$anchor) => {
+												var i = root_10();
 
-							var alternate = ($$anchor) => {
-								var i = root_7();
+												$.template_effect(() => $.set_class(i, 1, `icon icon-${$.get(item).icon}`, 'svelte-rnx3ie'));
+												$.append($$anchor, i);
+											};
 
-								$.template_effect(() => $.set_class(i, 1, `icon icon-${$.get(renderedTool).button.icon}`, 'svelte-rnx3ie'));
-								$.append($$anchor, i);
+											$.if(node_8, ($$render) => {
+												if ($.get(fallbackIcon)) $$render(consequent_2); else $$render(alternate, false);
+											});
+										}
+
+										$.append($$anchor, fragment_4);
+									};
+
+									$.if(node_6, ($$render) => {
+										if ($.get(d)) $$render(consequent); else if ($.get(d_1)) $$render(consequent_1, 1); else $$render(alternate_1, false);
+									});
+								}
+
+								$.append($$anchor, fragment_2);
 							};
 
-							$.if(node_4, ($$render) => {
-								if ($.get(d)) $$render(consequent_1); else if ($.get(d_1)) $$render(consequent_2, 1); else $$render(alternate, false);
+							$.if(node_5, ($$render) => {
+								if ($.get(item).icon) $$render(consequent_3);
 							});
 						}
 
-						$.reset(button);
+						$.reset(a);
+
+						$.template_effect(
+							($0) => {
+								classes_1 = $.set_class(a, 1, 'item-toolbar__button svelte-rnx3ie', null, classes_1, $0);
+								$.set_attribute(a, 'href', $.get(item).disabled ? undefined : $.get(item).href);
+								$.set_attribute(a, 'target', $.get(item).target);
+								$.set_attribute(a, 'rel', $.get(item).rel);
+								$.set_attribute(a, 'aria-label', $.get(item).ariaLabel || $.get(item).label);
+								$.set_attribute(a, 'title', $.get(item).tooltip || $.get(item).label);
+								$.set_attribute(a, 'aria-disabled', $.get(item).disabled ? 'true' : undefined);
+							},
+							[
+								() => ({
+									'item-toolbar__button--active': isToolbarItemActive($.get(item))
+								})
+							]
+						);
+
+						$.delegated('click', a, (event) => {
+							if ($.get(item).disabled) {
+								event.preventDefault();
+							}
+						});
 
-						$.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
-							});
+						$.append($$anchor, a);
+					};
 
-							$.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;
-						});
+					var d_2 = $.derived(() => isToolbarLinkItem($.get(item)));
 
-						$.delegated('click', button, () => {
-							$.get(renderedTool).button?.onClick();
-							syncRenderedToolsState();
-						});
+					var alternate_4 = ($$anchor) => {
+						var button_1 = root_11();
+						let classes_2;
+						var node_10 = $.child(button_1);
 
-						$.append($$anchor, button);
-					};
+						{
+							var consequent_8 = ($$anchor) => {
+								var fragment_6 = $.comment();
+								var node_11 = $.first_child(fragment_6);
 
-					$.if(node_3, ($$render) => {
-						if ($.get(renderedTool).button) $$render(consequent_3);
-					});
-				}
+								{
+									var consequent_5 = ($$anchor) => {
+										var fragment_7 = $.comment();
+										var node_12 = $.first_child(fragment_7);
 
-				var node_6 = $.sibling(node_3, 2);
+										$.html(node_12, () => $.get(item).icon);
+										$.append($$anchor, fragment_7);
+									};
 
-				{
-					var consequent_4 = ($$anchor) => {
-						var span_1 = root_8();
+									var d_3 = $.derived(() => isInlineSvgIcon($.get(item).icon));
+
+									var consequent_6 = ($$anchor) => {
+										var img_1 = root_14();
+
+										$.template_effect(() => $.set_attribute(img_1, 'src', $.get(item).icon));
+										$.append($$anchor, img_1);
+									};
+
+									var d_4 = $.derived(() => isExternalIconUrl($.get(item).icon));
+
+									var alternate_3 = ($$anchor) => {
+										const fallbackIcon = $.derived(() => getFallbackIconSvg($.get(item).icon));
+										var fragment_8 = $.comment();
+										var node_13 = $.first_child(fragment_8);
+
+										{
+											var consequent_7 = ($$anchor) => {
+												var fragment_9 = $.comment();
+												var node_14 = $.first_child(fragment_9);
+
+												$.html(node_14, () => $.get(fallbackIcon));
+												$.append($$anchor, fragment_9);
+											};
+
+											var alternate_2 = ($$anchor) => {
+												var i_1 = root_17();
+
+												$.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);
+											});
+										}
 
-						$.action(span_1, ($$node, $$action_arg) => mountElement?.($$node, $$action_arg), () => $.get(renderedTool).overlayElement);
-						$.append($$anchor, span_1);
+										$.append($$anchor, fragment_8);
+									};
+
+									$.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);
+									});
+								}
+
+								$.append($$anchor, fragment_6);
+							};
+
+							$.if(node_10, ($$render) => {
+								if ($.get(item).icon) $$render(consequent_8);
+							});
+						}
+
+						$.reset(button_1);
+
+						$.template_effect(
+							($0, $1) => {
+								classes_2 = $.set_class(button_1, 1, 'item-toolbar__button svelte-rnx3ie', null, classes_2, $0);
+								$.set_attribute(button_1, 'aria-label', $.get(item).ariaLabel || $.get(item).label);
+								$.set_attribute(button_1, 'aria-pressed', $1);
+								$.set_attribute(button_1, 'title', $.get(item).tooltip || $.get(item).label);
+								button_1.disabled = $.get(item).disabled;
+							},
+							[
+								() => ({
+									'item-toolbar__button--active': isToolbarItemActive($.get(item))
+								}),
+								() => isToolbarItemActive($.get(item))
+							]
+						);
+
+						$.delegated('click', button_1, function (...$$args) {
+							$.get(item).onClick?.apply(this, $$args);
+						});
+
+						$.append($$anchor, button_1);
 					};
 
-					$.if(node_6, ($$render) => {
-						if ($.get(renderedTool).overlayElement) $$render(consequent_4);
+					$.if(node_4, ($$render) => {
+						if ($.get(d_2)) $$render(consequent_4); else $$render(alternate_4, false);
 					});
 				}
 
 				$.append($$anchor, fragment_1);
 			});
 
+			var node_15 = $.sibling(node_3, 2);
+
+			$.each(node_15, 17, () => $.get(mountedElementsAfterButtons), (mountedElement) => `after-${mountedElement.tagName}-${mountedElement.getAttribute('tool-id') || ''}`, ($$anchor, mountedElement) => {
+				var span_1 = root_18();
+
+				$.action(span_1, ($$node, $$action_arg) => mountElement?.($$node, $$action_arg), () => $.get(mountedElement));
+				$.append($$anchor, span_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');
+				classes = $.set_class(div, 1, `item-toolbar ${className() ?? ''} item-toolbar--${size() ?? ''}`, 'svelte-rnx3ie', classes, {
+					'item-toolbar--top': position() === 'top',
+					'item-toolbar--right': position() === 'right',
+					'item-toolbar--bottom': position() === 'bottom',
+					'item-toolbar--left': position() === 'left'
+				});
+
 				$.set_attribute(div, 'data-content-kind', $.get(effectiveContentKind));
+				$.set_attribute(div, 'data-level', $.get(effectiveLevel));
 			});
 
 			$.append($$anchor, div);
 		};
 
 		$.if(node_1, ($$render) => {
-			if (isBrowser) $$render(consequent_5);
+			if (isBrowser) $$render(consequent_9);
 		});
 	}
 
@@ -608,10 +935,14 @@ $.delegate(['click']);
 customElements.define('pie-item-toolbar', $.create_custom_element(
 	ItemToolBar,
 	{
+		level: { attribute: 'level', type: 'String' },
+		scopeId: { attribute: 'scope-id', type: 'String' },
 		itemId: { attribute: 'item-id', type: 'String' },
+		sectionId: { attribute: 'section-id', type: 'String' },
 		catalogId: { attribute: 'catalog-id', type: 'String' },
 		tools: { attribute: 'tools', type: 'String' },
 		contentKind: { attribute: 'content-kind', type: 'String' },
+		position: { attribute: 'position', type: 'String' },
 		size: { attribute: 'size', type: 'String' },
 		language: { attribute: 'language', type: 'String' },
 		scopeElement: { type: 'Object' },
@@ -620,6 +951,7 @@ customElements.define('pie-item-toolbar', $.create_custom_element(
 		assessment: { type: 'Object' },
 		itemRef: { type: 'Object' },
 		item: { type: 'Object' },
+		hostButtons: { type: 'Object' },
 		class: {}
 	},
 	[],