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

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

@@ -0,0 +1,953 @@
+// @ts-nocheck
+import 'svelte/internal/disclose-version';
+import * as $ from 'svelte/internal/client';
+
+import {
+	connectAssessmentToolkitRuntimeContext,
+	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_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--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) {
+	$.push($$props, true);
+	$.append_styles($$anchor, $$css);
+
+	const isBrowser = typeof window !== 'undefined';
+	const fallbackToolRegistry = createDefaultToolRegistry({ toolModuleLoaders: DEFAULT_TOOL_MODULE_LOADERS });
+	let activeToolState = $.state($.proxy({}));
+
+	// Props
+	let 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');
+
+	let toolbarRootElement = $.state(null);
+	let runtimeContext = $.state(null);
+	let shellContext = $.state(null);
+	let moduleLoadVersion = $.state(0);
+
+	$.user_effect(() => {
+		if (!$.get(toolbarRootElement)) return;
+
+		return connectAssessmentToolkitRuntimeContext($.get(toolbarRootElement), (value) => {
+			$.set(runtimeContext, value, true);
+		});
+	});
+
+	$.user_effect(() => {
+		if (!$.get(toolbarRootElement)) return;
+
+		return connectAssessmentToolkitShellContext($.get(toolbarRootElement), (value) => {
+			$.set(shellContext, value, true);
+		});
+	});
+
+	const effectiveToolCoordinator = $.derived(() => $.get(runtimeContext)?.toolCoordinator);
+	const effectiveTTSService = $.derived(() => $.get(runtimeContext)?.ttsService);
+	const effectiveElementToolStateStore = $.derived(() => $.get(runtimeContext)?.elementToolStateStore);
+	const effectiveAssessmentId = $.derived(() => $.get(runtimeContext)?.assessmentId ?? '');
+	const effectiveItemId = $.derived(() => itemId() || $.get(shellContext)?.itemId || '');
+	const effectiveCanonicalItemId = $.derived(() => $.get(shellContext)?.canonicalItemId || $.get(effectiveItemId));
+	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.
+	const effectiveToolRegistry = $.derived(() => toolRegistry() || fallbackToolRegistry);
+
+	const explicitTools = $.derived(() => parseToolList(tools()));
+	const normalizedExplicitTools = $.derived(() => $.get(effectiveToolRegistry).normalizeToolIds($.get(explicitTools)).filter(Boolean));
+
+	const effectiveToolsConfig = $.derived(() => {
+		const coordinatorConfig = $.get(runtimeContext)?.toolkitCoordinator?.config?.tools;
+
+		return normalizeToolsConfig(coordinatorConfig || {});
+	});
+
+	const placementLevel = $.derived(() => {
+		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));
+
+		return $.get(effectiveToolRegistry).normalizeToolIds(resolved).filter(Boolean);
+	});
+
+	// Pass 1: determine allowed tools
+	const allowedToolIds = $.derived(() => {
+		const configuredTools = $.get(normalizedExplicitTools).length > 0
+			? $.get(normalizedExplicitTools)
+			: $.get(placementAllowedToolIds);
+
+		if (pnpResolver() && assessment() && itemRef()) {
+			const allowedByPnp = pnpResolver().getAllowedToolIds(assessment(), itemRef());
+
+			if (configuredTools.length === 0) return allowedByPnp;
+
+			return allowedByPnp.filter((toolId) => configuredTools.includes(toolId));
+		}
+
+		return configuredTools;
+	});
+
+	const contentReady = $.derived(() => {
+		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() || {},
+			itemRef: itemRef() || { id: $.get(effectiveCanonicalItemId) },
+			item: $.get(effectiveItem)
+		};
+	});
+
+	const renderContext = $.derived(() => {
+		if ($.get(toolContext)) return $.get(toolContext);
+
+		return {
+			level: 'item',
+			assessment: assessment() || {},
+			itemRef: itemRef() || { id: $.get(effectiveCanonicalItemId) },
+			item: $.get(effectiveItem) || { id: $.get(effectiveCanonicalItemId), config: {} }
+		};
+	});
+
+	const elementContexts = $.derived(() => {
+		if ($.get(effectiveLevel) !== 'item' && $.get(effectiveLevel) !== 'passage') return [];
+		if (!$.get(contentReady) || !$.get(effectiveItem)) return [];
+
+		const modelsRaw = $.get(effectiveItem)?.config?.models;
+
+		const models = Array.isArray(modelsRaw)
+			? modelsRaw
+			: modelsRaw && typeof modelsRaw === 'object' ? Object.values(modelsRaw) : [];
+
+		return models.filter((model) => model && typeof model === 'object' && typeof model.id === 'string').map((model) => ({
+			level: 'element',
+			assessment: assessment() || {},
+			itemRef: itemRef() || { id: $.get(effectiveCanonicalItemId) },
+			item: $.get(effectiveItem),
+			elementId: model.id
+		}));
+	});
+
+	// Pass 2: tool-owned context filtering (item + element aggregation)
+	const visibleToolIds = $.derived(() => {
+		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 levelCompatibleToolIds;
+		}
+
+		if (!$.get(toolContext) && $.get(elementContexts).length === 0) {
+			return levelCompatibleToolIds;
+		}
+
+		const visible = new Set();
+
+		if ($.get(toolContext)) {
+			$.get(effectiveToolRegistry).filterVisibleInContext(levelCompatibleToolIds, $.get(toolContext)).forEach((tool) => visible.add(tool.toolId));
+		}
+
+		for (const context of $.get(elementContexts)) {
+			$.get(effectiveToolRegistry).filterVisibleInContext(levelCompatibleToolIds, context).forEach((tool) => visible.add(tool.toolId));
+		}
+
+		return Array.from(visible);
+	});
+
+	// Dynamically load whatever tools are currently visible.
+	// The registry owns module loader configuration by toolId.
+	$.user_effect(() => {
+		if (!isBrowser) return;
+
+		let cancelled = false;
+
+		void $.get(effectiveToolRegistry).ensureToolModulesLoaded($.get(visibleToolIds)).then(() => {
+			if (!cancelled) $.set(moduleLoadVersion, $.get(moduleLoadVersion) + 1);
+		}).catch((error) => {
+			console.error('[ItemToolBar] Failed to load one or more tool modules:', error);
+		});
+
+		return () => {
+			cancelled = true;
+		};
+	});
+
+	function resolveScopeElement() {
+		if (scopeElement()) return scopeElement();
+
+		return $.get(shellContext)?.scopeElement || null;
+	}
+
+	function resolveGlobalElementId() {
+		if (!$.get(effectiveElementToolStateStore) || !$.get(effectiveAssessmentId) || !$.get(effectiveSectionId) || !$.get(effectiveCanonicalItemId)) return null;
+
+		return $.get(effectiveElementToolStateStore).getGlobalElementId($.get(effectiveAssessmentId), $.get(effectiveSectionId), $.get(effectiveCanonicalItemId), $.get(effectiveCanonicalItemId));
+	}
+
+	const toolbarContext = $.derived(() => {
+		const toolkitCoordinator = $.get(runtimeContext)?.toolkitCoordinator || null;
+
+		const toInstanceToolId = (toolId) => {
+			// Accept either base tool IDs (e.g. "calculator") or already-scoped IDs.
+			// This keeps toolbar contracts stable across mixed registration implementations.
+			return parseScopedToolId(toolId)
+				? toolId
+				: createScopedToolId(toolId, $.get(effectiveLevel), $.get(effectiveScopeId));
+		};
+
+		return {
+			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() },
+			getScopeElement: resolveScopeElement,
+			getGlobalElementId: resolveGlobalElementId,
+			toolCoordinator: $.get(effectiveToolCoordinator) || null,
+			toolkitCoordinator,
+			ttsService: $.get(effectiveTTSService) || null,
+			elementToolStateStore: $.get(effectiveElementToolStateStore) || null,
+			toggleTool: (toolId) => {
+				if (!$.get(effectiveToolCoordinator)) return;
+
+				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) => {
+				if (!$.get(effectiveToolCoordinator)) return false;
+
+				return $.get(effectiveToolCoordinator).isToolVisible(toInstanceToolId(toolId));
+			},
+
+			subscribeVisibility: $.get(effectiveToolCoordinator)
+				? (listener) => $.get(effectiveToolCoordinator).subscribe(listener)
+				: null,
+			ensureTTSReady: toolkitCoordinator ? () => toolkitCoordinator.ensureTTSReady() : null
+		};
+	});
+
+	let renderedTools = $.derived(() => {
+		if (!isBrowser) return [];
+
+		$.get(moduleLoadVersion);
+
+		const rendered = [];
+
+		for (const toolId of $.get(visibleToolIds)) {
+			const result = $.get(effectiveToolRegistry).renderForToolbar(toolId, $.get(renderContext), $.get(toolbarContext));
+
+			if (result) {
+				rendered.push(result);
+			}
+		}
+
+		return rendered;
+	});
+
+	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 = {};
+
+		for (const renderedTool of $.get(renderedTools)) {
+			renderedTool.sync?.();
+
+			if (renderedTool.button) {
+				nextActiveState[renderedTool.toolId] = renderedTool.button.active ?? false;
+			}
+		}
+
+		$.set(activeToolState, nextActiveState, true);
+	}
+
+	$.user_effect(() => {
+		const unsubs = [];
+
+		syncRenderedToolsState();
+
+		for (const renderedTool of $.get(renderedTools)) {
+			if (renderedTool.subscribeActive) {
+				const unsubscribe = renderedTool.subscribeActive((active) => {
+					$.set(activeToolState, { ...$.get(activeToolState), [renderedTool.toolId]: active }, true);
+					renderedTool.sync?.();
+				});
+
+				unsubs.push(unsubscribe);
+			}
+		}
+
+		return () => {
+			unsubs.forEach((unsub) => unsub());
+		};
+	});
+
+	$.user_effect(() => {
+		if (!$.get(toolbarContext).subscribeVisibility) return;
+
+		return $.get(toolbarContext).subscribeVisibility(() => {
+			syncRenderedToolsState();
+		});
+	});
+
+	function mountElement(node, element) {
+		let mountedElement = null;
+
+		const updateMountedElement = (nextElement) => {
+			if (mountedElement === nextElement) return;
+
+			if (mountedElement && mountedElement.parentNode === node) {
+				node.removeChild(mountedElement);
+			}
+
+			mountedElement = nextElement;
+
+			if (mountedElement) {
+				if (mountedElement.parentNode && mountedElement.parentNode !== node) {
+					mountedElement.parentNode.removeChild(mountedElement);
+				}
+
+				node.appendChild(mountedElement);
+			}
+		};
+
+		updateMountedElement(element);
+
+		return {
+			update(nextElement) {
+				updateMountedElement(nextElement);
+			},
+
+			destroy() {
+				updateMountedElement(null);
+			}
+		};
+	}
+
+	var $$exports = {
+		get level() {
+			return level();
+		},
+
+		set level($$value) {
+			level($$value);
+			$.flush();
+		},
+
+		get scopeId() {
+			return scopeId();
+		},
+
+		set scopeId($$value) {
+			scopeId($$value);
+			$.flush();
+		},
+
+		get itemId() {
+			return itemId();
+		},
+
+		set itemId($$value) {
+			itemId($$value);
+			$.flush();
+		},
+
+		get sectionId() {
+			return sectionId();
+		},
+
+		set sectionId($$value) {
+			sectionId($$value);
+			$.flush();
+		},
+
+		get catalogId() {
+			return catalogId();
+		},
+
+		set catalogId($$value) {
+			catalogId($$value);
+			$.flush();
+		},
+
+		get tools() {
+			return tools();
+		},
+
+		set tools($$value) {
+			tools($$value);
+			$.flush();
+		},
+
+		get contentKind() {
+			return contentKind();
+		},
+
+		set contentKind($$value) {
+			contentKind($$value);
+			$.flush();
+		},
+
+		get position() {
+			return position();
+		},
+
+		set position($$value) {
+			position($$value);
+			$.flush();
+		},
+
+		get scopeElement() {
+			return scopeElement();
+		},
+
+		set scopeElement($$value) {
+			scopeElement($$value);
+			$.flush();
+		},
+
+		get toolRegistry() {
+			return toolRegistry();
+		},
+
+		set toolRegistry($$value) {
+			toolRegistry($$value);
+			$.flush();
+		},
+
+		get pnpResolver() {
+			return pnpResolver();
+		},
+
+		set pnpResolver($$value) {
+			pnpResolver($$value);
+			$.flush();
+		},
+
+		get assessment() {
+			return assessment();
+		},
+
+		set assessment($$value) {
+			assessment($$value);
+			$.flush();
+		},
+
+		get itemRef() {
+			return itemRef();
+		},
+
+		set itemRef($$value) {
+			itemRef($$value);
+			$.flush();
+		},
+
+		get item() {
+			return item();
+		},
+
+		set item($$value) {
+			item($$value);
+			$.flush();
+		},
+
+		get hostButtons() {
+			return hostButtons();
+		},
+
+		set hostButtons($$value) {
+			hostButtons($$value);
+			$.flush();
+		},
+
+		get class() {
+			return className();
+		},
+
+		set class($$value) {
+			className($$value);
+			$.flush();
+		},
+
+		get size() {
+			return size();
+		},
+
+		set size($$value) {
+			size($$value);
+			$.flush();
+		},
+
+		get language() {
+			return language();
+		},
+
+		set language($$value) {
+			language($$value);
+			$.flush();
+		}
+	};
+
+	var fragment = $.comment();
+	var node_1 = $.first_child(fragment);
+
+	{
+		var consequent_9 = ($$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();
+
+				$.action(span, ($$node, $$action_arg) => mountElement?.($$node, $$action_arg), () => $.get(mountedElement));
+				$.append($$anchor, span);
+			});
+
+			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_4 = ($$anchor) => {
+						var a = root_4();
+						let classes_1;
+						var node_5 = $.child(a);
+
+						{
+							var consequent_3 = ($$anchor) => {
+								var fragment_2 = $.comment();
+								var node_6 = $.first_child(fragment_2);
+
+								{
+									var consequent = ($$anchor) => {
+										var fragment_3 = $.comment();
+										var node_7 = $.first_child(fragment_3);
+
+										$.html(node_7, () => $.get(item).icon);
+										$.append($$anchor, fragment_3);
+									};
+
+									var d = $.derived(() => isInlineSvgIcon($.get(item).icon));
+
+									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 alternate = ($$anchor) => {
+												var i = root_10();
+
+												$.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);
+											});
+										}
+
+										$.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_5, ($$render) => {
+								if ($.get(item).icon) $$render(consequent_3);
+							});
+						}
+
+						$.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();
+							}
+						});
+
+						$.append($$anchor, a);
+					};
+
+					var d_2 = $.derived(() => isToolbarLinkItem($.get(item)));
+
+					var alternate_4 = ($$anchor) => {
+						var button_1 = root_11();
+						let classes_2;
+						var node_10 = $.child(button_1);
+
+						{
+							var consequent_8 = ($$anchor) => {
+								var fragment_6 = $.comment();
+								var node_11 = $.first_child(fragment_6);
+
+								{
+									var consequent_5 = ($$anchor) => {
+										var fragment_7 = $.comment();
+										var node_12 = $.first_child(fragment_7);
+
+										$.html(node_12, () => $.get(item).icon);
+										$.append($$anchor, fragment_7);
+									};
+
+									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);
+											});
+										}
+
+										$.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_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(() => {
+				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_9);
+		});
+	}
+
+	$.append($$anchor, fragment);
+
+	return $.pop($$exports);
+}
+
+$.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' },
+		toolRegistry: { type: 'Object' },
+		pnpResolver: { type: 'Object' },
+		assessment: { type: 'Object' },
+		itemRef: { type: 'Object' },
+		item: { type: 'Object' },
+		hostButtons: { type: 'Object' },
+		class: {}
+	},
+	[],
+	[],
+	{ mode: 'open' }
+));