@pie-players/pie-assessment-toolkit 0.3.25 → 0.3.27

package/README.md

@@ -33,7 +33,7 @@ const toolkitCoordinator = new ToolkitCoordinator({
   assessmentId: 'my-assessment',
   tools: {
     providers: {
-      tts: { enabled: true, backend: 'browser' },
+      textToSpeech: { enabled: true, backend: 'browser' },
       calculator: { enabled: true }
     },
     placement: {
@@ -126,7 +126,7 @@ const coordinator = new ToolkitCoordinator({
   assessmentId: 'demo-assessment',
   tools: {
     providers: {
-      tts: { enabled: true, backend: 'browser', defaultVoice: 'en-US' },
+      textToSpeech: { enabled: true, backend: 'browser', defaultVoice: 'en-US' },
       calculator: { enabled: true }
     },
     placement: {
@@ -219,7 +219,7 @@ The toolkit uses one canonical `tools` model with three concerns:
 
 - `policy`: allow/block constraints (global gates)
 - `placement`: where tools appear (`assessment`, `section`, `item`, `passage`, `rubric`, plus custom registered levels)
-- `providers`: provider/runtime options (calculator, tts, etc.)
+- `providers`: provider/runtime options (calculator, textToSpeech, etc.)
 
 Example:
 
@@ -238,7 +238,7 @@ tools: {
   },
   providers: {
     calculator: { authFetcher: async () => ({ apiKey: '...' }) },
-    tts: { enabled: true, backend: 'browser', defaultVoice: 'en-US' }
+    textToSpeech: { enabled: true, backend: 'browser', defaultVoice: 'en-US' }
   }
 }
 ```
@@ -361,7 +361,7 @@ const coordinator = new ToolkitCoordinator({
           return response.json();
         }
       },
-      tts: { enabled: true, backend: 'browser' }
+      textToSpeech: { enabled: true, backend: 'browser' }
     }
   },
   accessibility: {
@@ -386,7 +386,7 @@ const coordinator = new ToolkitCoordinator({
     },
     providers: {
       calculator: { enabled: true },
-      tts: { enabled: true, backend: 'browser' }
+      textToSpeech: { enabled: true, backend: 'browser' }
     }
   }
 });
@@ -402,7 +402,7 @@ Common options are defaulted so you can start with:
 ```typescript
 tools: {
   providers: {
-    tts: {
+    textToSpeech: {
       enabled: true,
       backend: 'polly'
     }
@@ -425,7 +425,7 @@ Inline TTS speed buttons are configurable via `speedOptions` in provider setting
 ```typescript
 tools: {
   providers: {
-    tts: {
+    textToSpeech: {
       enabled: true,
       backend: "browser",
       settings: {
@@ -438,7 +438,7 @@ tools: {
 
 `speedOptions` semantics:
 
-- Omitted or non-array: default speed buttons are shown (`1.5x`, `2x`).
+- Omitted or non-array: default speed buttons are shown (`0.8x`, `1.25x`).
 - Explicit empty array (`[]`): hide all speed buttons.
 - Invalid-only arrays (for example `["fast", -1, 1]`): fall back to defaults.
 - Valid numeric values are deduplicated and keep first-seen order.
@@ -468,7 +468,7 @@ requires runtime auth material for TTS requests:
 ```typescript
 tools: {
   providers: {
-    tts: {
+    textToSpeech: {
       enabled: true,
       backend: 'polly',
       apiEndpoint: '/api/tts',
@@ -493,7 +493,7 @@ prefer a host-owned proxy endpoint so secrets never ship to the browser.
 ```typescript
 tools: {
   providers: {
-    tts: {
+    textToSpeech: {
       enabled: true,
       backend: "server",
       serverProvider: "custom",
@@ -615,7 +615,7 @@ export interface ToolkitCoordinatorConfig {
       rubric?: string[];
     };
     providers?: {
-      tts?: {
+      textToSpeech?: {
         enabled?: boolean;
         backend?: 'browser' | 'polly' | 'google' | 'server';
         defaultVoice?: string;
@@ -627,6 +627,7 @@ export interface ToolkitCoordinatorConfig {
       };
     };
   };
+  toolRegistry?: ToolRegistry | null;
   accessibility?: {
     catalogs?: any[];
     language?: string;
@@ -642,9 +643,9 @@ const services = coordinator.getServiceBundle();
 // Returns: { ttsService, toolCoordinator, highlightCoordinator, elementToolStateStore, catalogResolver }
 
 // Tool configuration
-coordinator.isToolEnabled('tts');  // Check if tool is enabled
-coordinator.getToolConfig('tts');  // Get tool-specific config
-coordinator.updateToolConfig('tts', { rate: 1.5 });  // Update tool config
+coordinator.isToolEnabled('textToSpeech');  // Check if tool is enabled
+coordinator.getToolConfig('textToSpeech');  // Get tool-specific config
+coordinator.updateToolConfig('textToSpeech', { rate: 1.5 });  // Update tool config
 ```
 
 ### Direct Service Access
@@ -865,7 +866,7 @@ The section player provides automatic ToolkitCoordinator integration:
   const coordinator = new ToolkitCoordinator({
     assessmentId: 'my-assessment',
     tools: {
-      providers: { tts: { enabled: true, backend: 'browser' } },
+      providers: { textToSpeech: { enabled: true, backend: 'browser' } },
       placement: {
         section: ['calculator', 'graph', 'periodicTable', 'protractor', 'lineReader', 'ruler'],
         item: ['calculator', 'textToSpeech', 'answerEliminator'],
@@ -929,7 +930,7 @@ player.section = mySection;
 // new ToolkitCoordinator({
 //   assessmentId: 'anon_...',  // auto-generated
 //   tools: {
-//     providers: { tts: { enabled: true, backend: 'browser' }, calculator: { enabled: true } },
+//     providers: { textToSpeech: { enabled: true, backend: 'browser' }, calculator: { enabled: true } },
 //     placement: {
 //       section: ['calculator', 'graph', 'periodicTable', 'protractor', 'lineReader', 'ruler'],
 //       item: ['calculator', 'textToSpeech', 'answerEliminator'],
@@ -939,6 +940,56 @@ player.section = mySection;
 // })
 ```
 
+### Safe Custom Tool Configuration
+
+Default behavior is now framework-owned: invalid tools/runtime initialization is handled in `pie-assessment-toolkit` without host try/catch.
+
+- Framework logs a deterministic console error prefix: `[pie-framework:<kind>:<source>]`
+- Framework emits a canonical `framework-error` event (and still emits `runtime-error` for compatibility)
+- Framework renders a fallback error panel instead of a blank player
+- Startup tool-config validation can surface as `kind: "coordinator-init"` when the owned coordinator construction path throws.
+
+Use `createToolsConfig()` when you want to pre-validate and inspect diagnostics before mounting:
+
+```typescript
+import {
+  createPackagedToolRegistry,
+  createToolsConfig,
+  ToolkitCoordinator
+} from "@pie-players/pie-assessment-toolkit";
+
+const toolRegistry = createPackagedToolRegistry();
+const { config, diagnostics } = createToolsConfig({
+  source: "host.bootstrap",
+  strictness: "error",
+  toolRegistry,
+  tools: {
+    providers: {
+      textToSpeech: { enabled: true, backend: "browser" },
+      calculator: { enabled: true }
+    },
+    placement: {
+      item: ["calculator", "textToSpeech"]
+    }
+  }
+});
+
+// Fail-fast default: invalid config throws at the boundary.
+const coordinator = new ToolkitCoordinator({
+  assessmentId: "demo-assessment",
+  toolRegistry,
+  tools: config,
+  toolConfigStrictness: "error"
+});
+```
+
+Notes:
+- `providers.textToSpeech` is the canonical TTS provider key.
+- `providers.tts` is rejected by the validation contract.
+- Custom tools can provide provider-level `sanitizeConfig` and `validateConfig` hooks.
+- Hosts can react to framework errors via `onframework-error` listeners or `onFrameworkError` callback prop.
+- See `docs/tools-and-accomodations/framework-owned-error-handling.md` for event payload and error-kind mapping details.
+
 ## State Separation: Tool State vs Session Data
 
 The toolkit enforces a clear separation between ephemeral tool state and persistent session data:
@@ -1013,6 +1064,8 @@ import type {
 - **[PNP Configuration Guide](docs/PNP_CONFIGURATION.md)** - ⭐ NEW - How to configure student profiles, district policies, and governance rules
 - [ToolkitCoordinator Architecture](../../docs/architecture/TOOLKIT_COORDINATOR.md) - Design decisions and patterns
 - [Section Player README](../section-player/README.md) - Section player integration
+- [Framework-Owned Error Handling](../../docs/tools-and-accomodations/framework-owned-error-handling.md) - Canonical framework error model/events and fallback behavior
+- [Safe Custom Tool Configuration](../../docs/tools-and-accomodations/safe-custom-tool-config.md) - Host-side config patterns and validation guidance
 - [Architecture Overview](../../docs/architecture/architecture.md) - Complete system architecture
 
 ## License

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

@@ -22,7 +22,13 @@ import {
 	connectAssessmentToolkitShellContext
 } from '../context/runtime-context-consumer.js';
 
-import { isExternalIconUrl, isInlineSvgIcon, isToolbarLinkItem } from '../services/toolbar-items.js';
+import {
+	isExternalIconUrl,
+	isInlineSvgIcon,
+	isToolbarLinkItem,
+	isValidToolbarItemShape
+} from '../services/toolbar-items.js';
+
 import { createPackagedToolRegistry } from '../services/createDefaultToolRegistry.js';
 import { DEFAULT_TOOL_MODULE_LOADERS } from '../tools/default-tool-module-loaders.js';
 import { normalizeToolsConfig, parseToolList, resolveToolsForLevel } from '../services/tools-config-normalizer.js';
@@ -38,11 +44,14 @@ 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 class="item-toolbar__tools-row svelte-rnx3ie"><!> <!> <!></div> <div class="item-toolbar__controls-row svelte-rnx3ie" aria-hidden="true"></div></div>`);
+var root_25 = $.from_html(`<span class="item-toolbar__controls-host svelte-rnx3ie"></span>`);
+var root_26 = $.from_html(`<span class="item-toolbar__controls-host svelte-rnx3ie"></span>`);
+var root_23 = $.from_html(`<div></div>`);
+var root_1 = $.from_html(`<div><div class="item-toolbar__tools-row svelte-rnx3ie"><!> <!> <!></div> <!></div>`);
 
 const $$css = {
 	hash: 'svelte-rnx3ie',
-	code: '.item-toolbar.svelte-rnx3ie {display:flex;flex-direction:column;align-items:flex-end;gap:0;--pie-toolbar-tools-row-height: 2rem;--pie-tts-controls-row-height: 2.875rem;}.item-toolbar__tools-row.svelte-rnx3ie {display:flex;align-items:center;justify-content:flex-end;flex-wrap:nowrap;gap:0.5rem;min-height:var(--pie-toolbar-tools-row-height);}.item-toolbar__controls-row.svelte-rnx3ie {display:flex;align-items:center;justify-content:flex-end;width:100%;min-height:var(--pie-tts-controls-row-height);height:var(--pie-tts-controls-row-height);}.item-toolbar__controls-host.svelte-rnx3ie {display:inline-flex;align-items:center;justify-content:flex-end;width:100%;}.item-toolbar--top.svelte-rnx3ie,\n	.item-toolbar--bottom.svelte-rnx3ie {align-items:flex-end;}.item-toolbar--left.svelte-rnx3ie,\n	.item-toolbar--right.svelte-rnx3ie {align-items:stretch;}.item-toolbar--left.svelte-rnx3ie .item-toolbar__tools-row:where(.svelte-rnx3ie),\n	.item-toolbar--right.svelte-rnx3ie .item-toolbar__tools-row:where(.svelte-rnx3ie) {flex-direction:column;align-items:center;justify-content:flex-start;flex-wrap:nowrap;}.item-toolbar--left.svelte-rnx3ie .item-toolbar__controls-row:where(.svelte-rnx3ie),\n	.item-toolbar--right.svelte-rnx3ie .item-toolbar__controls-row:where(.svelte-rnx3ie) {justify-content:flex-start;width:auto;min-height:0;height:auto;}.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-button-border, var(--pie-border, #ccc));border-radius:0.25rem;background-color:var(--pie-button-bg, var(--pie-background, white));color:var(--pie-button-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--sm.svelte-rnx3ie {--pie-toolbar-tools-row-height: 2.75rem;--pie-tts-controls-row-height: 3.625rem;}.item-toolbar--lg.svelte-rnx3ie .item-toolbar__button:where(.svelte-rnx3ie) {width:2.5rem;height:2.5rem;}.item-toolbar--lg.svelte-rnx3ie {--pie-toolbar-tools-row-height: 2.5rem;--pie-tts-controls-row-height: 3.375rem;}.item-toolbar__button.svelte-rnx3ie:hover:not(:disabled) {background-color:var(--pie-button-hover-bg, var(--pie-secondary-background, #f5f5f5));border-color:var(--pie-button-hover-border, var(--pie-button-border, var(--pie-border, #ccc)));color:var(--pie-button-hover-color, var(--pie-button-color, var(--pie-text, #333)));transform:translateY(-1px);box-shadow:0 2px 4px color-mix(in srgb, var(--pie-black, #000) 10%, transparent);}.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:var(--pie-white, #fff);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-button-focus-outline, 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;flex-direction:column;align-items:flex-end;gap:0;--pie-toolbar-tools-row-height: 2rem;--pie-tts-controls-row-height: 2.875rem;}.item-toolbar__tools-row.svelte-rnx3ie {display:flex;align-items:center;justify-content:flex-end;flex-wrap:nowrap;gap:0.5rem;min-height:var(--pie-toolbar-tools-row-height);}.item-toolbar__controls-row.svelte-rnx3ie {display:flex;align-items:center;justify-content:flex-end;width:100%;min-height:0;height:auto;}.item-toolbar__controls-row--reserve.svelte-rnx3ie {min-height:var(--pie-tts-controls-row-height);height:var(--pie-tts-controls-row-height);}.item-toolbar__controls-row--active.svelte-rnx3ie {min-height:var(--pie-tts-controls-row-height);height:var(--pie-tts-controls-row-height);}.item-toolbar__controls-row--align-start.svelte-rnx3ie {justify-content:flex-start;}.item-toolbar__controls-host.svelte-rnx3ie {display:inline-flex;align-items:center;justify-content:flex-end;width:100%;}.item-toolbar--top.svelte-rnx3ie,\n	.item-toolbar--bottom.svelte-rnx3ie {align-items:flex-end;}.item-toolbar--left.svelte-rnx3ie,\n	.item-toolbar--right.svelte-rnx3ie {align-items:stretch;}.item-toolbar--left.svelte-rnx3ie .item-toolbar__tools-row:where(.svelte-rnx3ie),\n	.item-toolbar--right.svelte-rnx3ie .item-toolbar__tools-row:where(.svelte-rnx3ie) {flex-direction:column;align-items:center;justify-content:flex-start;flex-wrap:nowrap;}.item-toolbar--left.svelte-rnx3ie .item-toolbar__controls-row:where(.svelte-rnx3ie),\n	.item-toolbar--right.svelte-rnx3ie .item-toolbar__controls-row:where(.svelte-rnx3ie) {justify-content:flex-start;width:auto;min-height:0;height:auto;}.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-button-border, var(--pie-border, #ccc));border-radius:0.25rem;background-color:var(--pie-button-bg, var(--pie-background, white));color:var(--pie-button-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--sm.svelte-rnx3ie {--pie-toolbar-tools-row-height: 2.75rem;--pie-tts-controls-row-height: 3.625rem;}.item-toolbar--lg.svelte-rnx3ie .item-toolbar__button:where(.svelte-rnx3ie) {width:2.5rem;height:2.5rem;}.item-toolbar--lg.svelte-rnx3ie {--pie-toolbar-tools-row-height: 2.5rem;--pie-tts-controls-row-height: 3.375rem;}.item-toolbar__button.svelte-rnx3ie:hover:not(:disabled) {background-color:var(--pie-button-hover-bg, var(--pie-secondary-background, #f5f5f5));border-color:var(--pie-button-hover-border, var(--pie-button-border, var(--pie-border, #ccc)));color:var(--pie-button-hover-color, var(--pie-button-color, var(--pie-text, #333)));transform:translateY(-1px);box-shadow:0 2px 4px color-mix(in srgb, var(--pie-black, #000) 10%, transparent);}.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:var(--pie-white, #fff);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-button-focus-outline, 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) {
@@ -401,9 +410,23 @@ export default function ItemToolBar($$anchor, $$props) {
 		return rendered;
 	});
 
-	const normalizedHostButtons = $.derived(() => Array.isArray(hostButtons())
-		? hostButtons().filter((item) => !!item && typeof item.id === 'string')
-		: []);
+	const normalizedHostButtons = $.derived(() => {
+		if (!Array.isArray(hostButtons())) return [];
+
+		const valid = [];
+
+		hostButtons().forEach((item, index) => {
+			if (isValidToolbarItemShape(item)) {
+				valid.push(item);
+
+				return;
+			}
+
+			console.warn(`[ItemToolBar] Ignoring invalid host button at index ${index}. Expected { id, label, href | onClick } with valid types.`);
+		});
+
+		return valid;
+	});
 
 	const nativeToolbarItems = $.derived(() => $.get(renderedTools).filter((renderedTool) => !!renderedTool.button).map((renderedTool) => {
 		const button = renderedTool.button;
@@ -450,6 +473,22 @@ export default function ItemToolBar($$anchor, $$props) {
 		entry
 	}))));
 
+	const mountedElementsControlsRow = $.derived(() => $.get(renderedTools).flatMap((renderedTool) => (renderedTool.elements || []).filter((entry) => entry.mount === 'controls-row').filter((entry) => Boolean(entry.element)).map((entry, index) => ({
+		key: `controls-row-${renderedTool.toolId}-${index}`,
+		toolId: renderedTool.toolId,
+		entry
+	}))));
+
+	const controlsRowHints = $.derived(() => $.get(renderedTools).flatMap((renderedTool) => (renderedTool.elements || []).map((entry) => ({
+		toolId: renderedTool.toolId,
+		hint: entry.layoutHints?.controlsRow
+	})).filter((entry) => Boolean(entry.hint))));
+
+	const controlsRowShouldReserveSpace = $.derived(() => $.get(controlsRowHints).some((entry) => entry.hint?.reserveSpace === true));
+	const controlsRowShouldExpandForActiveTool = $.derived(() => $.get(controlsRowHints).some((entry) => entry.hint?.showWhenToolActive === true && ($.get(renderedToolActiveById)[entry.toolId] ?? false)));
+	const controlsRowAlignStart = $.derived(() => position() === 'left' || position() === 'right');
+	const shouldRenderControlsRow = $.derived(() => $.get(mountedElementsControlsRow).length > 0 || $.get(controlsRowShouldReserveSpace) || $.get(controlsRowShouldExpandForActiveTool));
+
 	function isToolbarItemActive(item) {
 		if (item.id in $.get(activeToolState)) {
 			return $.get(activeToolState)[item.id] === true;
@@ -516,6 +555,20 @@ export default function ItemToolBar($$anchor, $$props) {
 		});
 	});
 
+	$.user_effect(() => {
+		const toolkitCoordinator = $.get(toolbarContext).toolkitCoordinator;
+
+		if (typeof toolkitCoordinator?.subscribeTelemetry !== 'function') return;
+
+		return toolkitCoordinator.subscribeTelemetry(({ eventName, payload }) => {
+			if (eventName !== 'tool-config-updated') return;
+			if (payload?.toolId && !$.get(toolbarVisibleToolIds).includes(payload.toolId)) return;
+
+			$.set(moduleLoadVersion, $.get(moduleLoadVersion) + 1);
+			syncRenderedToolsState();
+		});
+	});
+
 	function mountElement(node, element) {
 		let mountedElement = null;
 
@@ -1245,7 +1298,7 @@ export default function ItemToolBar($$anchor, $$props) {
 	var node_1 = $.first_child(fragment);
 
 	{
-		var consequent_11 = ($$anchor) => {
+		var consequent_13 = ($$anchor) => {
 			var div = root_1();
 			let classes;
 			var div_1 = $.child(div);
@@ -1530,7 +1583,61 @@ export default function ItemToolBar($$anchor, $$props) {
 			});
 
 			$.reset(div_1);
-			$.next(2);
+
+			var node_18 = $.sibling(div_1, 2);
+
+			{
+				var consequent_12 = ($$anchor) => {
+					var div_2 = root_23();
+					let classes_3;
+
+					$.each(div_2, 21, () => $.get(mountedElementsControlsRow), (mounted) => mounted.key, ($$anchor, mounted) => {
+						var fragment_12 = $.comment();
+						var node_19 = $.first_child(fragment_12);
+
+						{
+							var consequent_11 = ($$anchor) => {
+								var span_4 = root_25();
+
+								$.action(span_4, ($$node, $$action_arg) => mountElementWithShell?.($$node, $$action_arg), () => ({
+									mounted: $.get(mounted),
+									active: $.get(renderedToolActiveById)[$.get(mounted).toolId] ?? false
+								}));
+
+								$.append($$anchor, span_4);
+							};
+
+							var alternate_7 = ($$anchor) => {
+								var span_5 = root_26();
+
+								$.action(span_5, ($$node, $$action_arg) => mountElement?.($$node, $$action_arg), () => $.get(mounted).entry.element);
+								$.append($$anchor, span_5);
+							};
+
+							$.if(node_19, ($$render) => {
+								if ($.get(mounted).entry.shell) $$render(consequent_11); else $$render(alternate_7, -1);
+							});
+						}
+
+						$.append($$anchor, fragment_12);
+					});
+
+					$.reset(div_2);
+
+					$.template_effect(() => classes_3 = $.set_class(div_2, 1, 'item-toolbar__controls-row svelte-rnx3ie', null, classes_3, {
+						'item-toolbar__controls-row--reserve': $.get(controlsRowShouldReserveSpace),
+						'item-toolbar__controls-row--active': $.get(controlsRowShouldExpandForActiveTool),
+						'item-toolbar__controls-row--align-start': $.get(controlsRowAlignStart)
+					}));
+
+					$.append($$anchor, div_2);
+				};
+
+				$.if(node_18, ($$render) => {
+					if ($.get(shouldRenderControlsRow)) $$render(consequent_12);
+				});
+			}
+
 			$.reset(div);
 			$.bind_this(div, ($$value) => $.set(toolbarRootElement, $$value), () => $.get(toolbarRootElement));
 
@@ -1550,7 +1657,7 @@ export default function ItemToolBar($$anchor, $$props) {
 		};
 
 		$.if(node_1, ($$render) => {
-			if (isBrowser) $$render(consequent_11);
+			if (isBrowser) $$render(consequent_13);
 		});
 	}