@pie-players/pie-assessment-toolkit 0.3.50 → 0.3.51

package/README.md

@@ -616,12 +616,37 @@ tools: {
 }
 ```
 
+Hosts that need semantic UI copy can use object-form options. The `rate` still
+drives playback and provider mapping; `label` / `ariaLabel` only change visible
+and accessible button text.
+
+```typescript
+tools: {
+  providers: {
+    textToSpeech: {
+      enabled: true,
+      backend: "server",
+      serverProvider: "custom",
+      settings: {
+        speedOptions: [
+          { rate: 0.8, label: "Slow", ariaLabel: "Slow speed" },
+          { rate: 1.5, label: "Fast", ariaLabel: "Fast speed" }
+        ]
+      }
+    }
+  }
+}
+```
+
 `speedOptions` semantics:
 
 - 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.
+- Object-form entries use the same numeric validation/deduping by `rate`.
+- Missing labels fall back to numeric text like `1.5x`; missing `ariaLabel`
+  falls back to a matching accessible name like `Fast speed`.
 - `1` is excluded (normal speed is already available by toggling active speed off).
 
 ### Runtime Fallback: Server TTS -> Browser TTS

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

@@ -6871,22 +6871,81 @@ var isServerBackend = (backend) => backend === "polly" || backend === "google" |
 var withDefault = (value, fallback2) => value === undefined ? fallback2 : value;
 var normalizeTTSLayoutMode = (value, fallback2 = "left-aligned") => typeof value === "string" && VALID_TTS_LAYOUT_MODES.has(value) ? value : fallback2;
 var DEFAULT_TTS_SPEED_OPTIONS = Object.freeze([0.8, 1.25]);
-var normalizeTTSSpeedOptions = (value) => {
+var normalizeSpeedRate = (entry) => {
+  if (typeof entry !== "number" || !Number.isFinite(entry) || entry <= 0) {
+    return;
+  }
+  const rounded = Math.round(entry * 100) / 100;
+  return rounded === 1 ? undefined : rounded;
+};
+var trimOptionalText = (value) => {
+  if (typeof value !== "string")
+    return;
+  const trimmed = value.trim();
+  return trimmed.length ? trimmed : undefined;
+};
+var formatSpeedLabel = (rate) => `${rate}x`;
+var formatSpeedAriaLabel = (label, usedDefaultLabel) => usedDefaultLabel ? `Speed ${label}` : `${label} speed`;
+var normalizeSpeedAriaLabel = (label, ariaLabel, usedDefaultLabel) => {
+  if (!ariaLabel)
+    return formatSpeedAriaLabel(label, usedDefaultLabel);
+  if (ariaLabel.toLowerCase().includes(label.toLowerCase()))
+    return ariaLabel;
+  return `${label} ${ariaLabel}`;
+};
+var normalizeTTSSpeedOptionConfig = (entry) => {
+  if (typeof entry === "number")
+    return normalizeSpeedRate(entry);
+  if (!entry || typeof entry !== "object" || Array.isArray(entry))
+    return;
+  const record = entry;
+  const rate = normalizeSpeedRate(record.rate);
+  if (rate === undefined)
+    return;
+  const label = trimOptionalText(record.label);
+  const ariaLabel = trimOptionalText(record.ariaLabel);
+  return {
+    rate,
+    ...label ? { label } : {},
+    ...ariaLabel ? { ariaLabel } : {}
+  };
+};
+var normalizeTTSSpeedOptionConfigs = (value) => {
   if (!Array.isArray(value))
     return [...DEFAULT_TTS_SPEED_OPTIONS];
   if (value.length === 0)
     return [];
-  const deduped = new Set;
+  const dedupedRates = new Set;
+  const normalized = [];
   for (const entry of value) {
-    if (typeof entry !== "number" || !Number.isFinite(entry) || entry <= 0)
+    const option = normalizeTTSSpeedOptionConfig(entry);
+    if (option === undefined)
       continue;
-    const rounded = Math.round(entry * 100) / 100;
-    if (rounded === 1)
+    const rate = typeof option === "number" ? option : option.rate;
+    if (dedupedRates.has(rate))
       continue;
-    deduped.add(rounded);
+    dedupedRates.add(rate);
+    normalized.push(option);
   }
-  return deduped.size ? Array.from(deduped) : [...DEFAULT_TTS_SPEED_OPTIONS];
+  return normalized.length ? normalized : [...DEFAULT_TTS_SPEED_OPTIONS];
 };
+var normalizeTTSSpeedControlOptions = (value) => normalizeTTSSpeedOptionConfigs(value).map((option) => {
+  if (typeof option === "number") {
+    const label2 = formatSpeedLabel(option);
+    return {
+      rate: option,
+      label: label2,
+      ariaLabel: formatSpeedAriaLabel(label2, true)
+    };
+  }
+  const defaultLabel = formatSpeedLabel(option.rate);
+  const label = option.label || defaultLabel;
+  return {
+    rate: option.rate,
+    label,
+    ariaLabel: normalizeSpeedAriaLabel(label, option.ariaLabel, label === defaultLabel)
+  };
+});
 var applyRuntimeDefaults = (config) => {
   const withLayoutDefaults = {
     ...config,
@@ -7043,7 +7102,7 @@ var ttsToolRegistration = {
         settings.layoutMode = normalizeTTSLayoutMode(settings.layoutMode);
       }
       if (settings && "speedOptions" in settings) {
-        settings.speedOptions = normalizeTTSSpeedOptions(settings.speedOptions);
+        settings.speedOptions = normalizeTTSSpeedOptionConfigs(settings.speedOptions);
       }
       const normalizedConfig = {
         ...config
@@ -7052,7 +7111,7 @@ var ttsToolRegistration = {
         normalizedConfig.layoutMode = normalizeTTSLayoutMode(normalizedConfig.layoutMode);
       }
       if ("speedOptions" in normalizedConfig) {
-        normalizedConfig.speedOptions = normalizeTTSSpeedOptions(normalizedConfig.speedOptions);
+        normalizedConfig.speedOptions = normalizeTTSSpeedOptionConfigs(normalizedConfig.speedOptions);
       }
       if (settings) {
         normalizedConfig.settings = settings;
@@ -7075,7 +7134,7 @@ var ttsToolRegistration = {
     const resolveRuntimeSettings = () => resolveTTSRuntimeSettings(toolbarContext.toolkitCoordinator?.getToolConfig(this.toolId) || undefined);
     const resolveElementSpeedOptions = () => {
       const runtimeSettings = resolveRuntimeSettings();
-      return normalizeTTSSpeedOptions(runtimeSettings.speedOptions);
+      return normalizeTTSSpeedControlOptions(runtimeSettings.speedOptions);
     };
     const resolveLayoutMode = () => resolveTTSLayoutMode(resolveRuntimeSettings());
     const resolveHostLayout = () => resolveTTSHostToolbarLayout(resolveRuntimeSettings());
@@ -9334,13 +9393,34 @@ function ItemToolBar($$anchor, $$props) {
       const maxHeight = shellConfig?.maxHeight ?? window.innerHeight;
       return { minWidth, minHeight, maxWidth, maxHeight };
     };
+    const applyContentMinWidth = () => {
+      const configuredMinWidth = currentArgs.mounted.entry.shell?.minWidth;
+      const shouldScroll = typeof configuredMinWidth === "number" && configuredMinWidth > 0 && width < configuredMinWidth;
+      const minWidthValue = shouldScroll ? `${configuredMinWidth}px` : "";
+      if (mountedContentElement) {
+        mountedContentElement.style.minWidth = minWidthValue;
+      }
+      if (headerEl) {
+        headerEl.style.minWidth = minWidthValue;
+      }
+      if (contentEl) {
+        contentEl.style.minWidth = minWidthValue;
+      }
+      if (shellEl) {
+        shellEl.style.overflowX = shouldScroll ? "auto" : "visible";
+        shellEl.style.overflowY = "visible";
+      }
+    };
     const applyPositionAndSize = () => {
       const { minWidth, minHeight, maxWidth, maxHeight } = getShellBounds();
-      width = clamp(width, minWidth, Math.max(minWidth, Math.min(maxWidth, window.innerWidth)));
-      height = clamp(height, minHeight, Math.max(minHeight, Math.min(maxHeight, window.innerHeight)));
+      const effectiveMinWidth = Math.min(minWidth, window.innerWidth);
+      const effectiveMinHeight = Math.min(minHeight, window.innerHeight);
+      width = clamp(width, effectiveMinWidth, Math.max(effectiveMinWidth, Math.min(maxWidth, window.innerWidth)));
+      height = clamp(height, effectiveMinHeight, Math.max(effectiveMinHeight, Math.min(maxHeight, window.innerHeight)));
       x2 = clamp(x2, 0, Math.max(0, window.innerWidth - width));
       y2 = clamp(y2, 0, Math.max(0, window.innerHeight - height));
       applyShellStyle();
+      applyContentMinWidth();
       notifyHostedResize();
     };
     const moveBy = (dx, dy) => {
@@ -9441,6 +9521,7 @@ function ItemToolBar($$anchor, $$props) {
       element2.style.height = "100%";
       element2.style.flex = "1 1 auto";
       element2.style.minHeight = "0";
+      applyContentMinWidth();
       if (mountedContentElement && mountedContentElement !== element2) {
         if (mountedContentElement.parentNode === contentEl) {
           invokeElementUnmount(mountedContentElement);
@@ -9689,8 +9770,10 @@ function ItemToolBar($$anchor, $$props) {
       if (resizePointerId === event2.pointerId) {
         event2.preventDefault();
         const shellConfig = currentArgs.mounted.entry.shell;
-        const minWidth = shellConfig?.minWidth ?? 320;
-        const minHeight = shellConfig?.minHeight ?? 240;
+        const configuredMinWidth = shellConfig?.minWidth ?? 320;
+        const configuredMinHeight = shellConfig?.minHeight ?? 240;
+        const minWidth = Math.min(configuredMinWidth, window.innerWidth);
+        const minHeight = Math.min(configuredMinHeight, window.innerHeight);
         const maxWidth = shellConfig?.maxWidth ?? window.innerWidth;
         const maxHeight = shellConfig?.maxHeight ?? window.innerHeight;
         const dx = event2.clientX - resizeStartX;
@@ -9721,6 +9804,7 @@ function ItemToolBar($$anchor, $$props) {
           height = newHeight;
         }
         applyShellStyle();
+        applyContentMinWidth();
         notifyHostedResize();
       }
     };

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

@@ -18971,22 +18971,81 @@ var isServerBackend = (backend) => backend === "polly" || backend === "google" |
 var withDefault = (value, fallback2) => value === undefined ? fallback2 : value;
 var normalizeTTSLayoutMode = (value, fallback2 = "left-aligned") => typeof value === "string" && VALID_TTS_LAYOUT_MODES.has(value) ? value : fallback2;
 var DEFAULT_TTS_SPEED_OPTIONS = Object.freeze([0.8, 1.25]);
-var normalizeTTSSpeedOptions = (value) => {
+var normalizeSpeedRate = (entry) => {
+  if (typeof entry !== "number" || !Number.isFinite(entry) || entry <= 0) {
+    return;
+  }
+  const rounded = Math.round(entry * 100) / 100;
+  return rounded === 1 ? undefined : rounded;
+};
+var trimOptionalText = (value) => {
+  if (typeof value !== "string")
+    return;
+  const trimmed = value.trim();
+  return trimmed.length ? trimmed : undefined;
+};
+var formatSpeedLabel = (rate) => `${rate}x`;
+var formatSpeedAriaLabel = (label, usedDefaultLabel) => usedDefaultLabel ? `Speed ${label}` : `${label} speed`;
+var normalizeSpeedAriaLabel = (label, ariaLabel, usedDefaultLabel) => {
+  if (!ariaLabel)
+    return formatSpeedAriaLabel(label, usedDefaultLabel);
+  if (ariaLabel.toLowerCase().includes(label.toLowerCase()))
+    return ariaLabel;
+  return `${label} ${ariaLabel}`;
+};
+var normalizeTTSSpeedOptionConfig = (entry) => {
+  if (typeof entry === "number")
+    return normalizeSpeedRate(entry);
+  if (!entry || typeof entry !== "object" || Array.isArray(entry))
+    return;
+  const record = entry;
+  const rate = normalizeSpeedRate(record.rate);
+  if (rate === undefined)
+    return;
+  const label = trimOptionalText(record.label);
+  const ariaLabel = trimOptionalText(record.ariaLabel);
+  return {
+    rate,
+    ...label ? { label } : {},
+    ...ariaLabel ? { ariaLabel } : {}
+  };
+};
+var normalizeTTSSpeedOptionConfigs = (value) => {
   if (!Array.isArray(value))
     return [...DEFAULT_TTS_SPEED_OPTIONS];
   if (value.length === 0)
     return [];
-  const deduped = new Set;
+  const dedupedRates = new Set;
+  const normalized = [];
   for (const entry of value) {
-    if (typeof entry !== "number" || !Number.isFinite(entry) || entry <= 0)
+    const option = normalizeTTSSpeedOptionConfig(entry);
+    if (option === undefined)
       continue;
-    const rounded = Math.round(entry * 100) / 100;
-    if (rounded === 1)
+    const rate = typeof option === "number" ? option : option.rate;
+    if (dedupedRates.has(rate))
       continue;
-    deduped.add(rounded);
+    dedupedRates.add(rate);
+    normalized.push(option);
   }
-  return deduped.size ? Array.from(deduped) : [...DEFAULT_TTS_SPEED_OPTIONS];
+  return normalized.length ? normalized : [...DEFAULT_TTS_SPEED_OPTIONS];
 };
+var normalizeTTSSpeedControlOptions = (value) => normalizeTTSSpeedOptionConfigs(value).map((option) => {
+  if (typeof option === "number") {
+    const label2 = formatSpeedLabel(option);
+    return {
+      rate: option,
+      label: label2,
+      ariaLabel: formatSpeedAriaLabel(label2, true)
+    };
+  }
+  const defaultLabel = formatSpeedLabel(option.rate);
+  const label = option.label || defaultLabel;
+  return {
+    rate: option.rate,
+    label,
+    ariaLabel: normalizeSpeedAriaLabel(label, option.ariaLabel, label === defaultLabel)
+  };
+});
 var applyRuntimeDefaults = (config) => {
   const withLayoutDefaults = {
     ...config,
@@ -19143,7 +19202,7 @@ var ttsToolRegistration = {
         settings.layoutMode = normalizeTTSLayoutMode(settings.layoutMode);
       }
       if (settings && "speedOptions" in settings) {
-        settings.speedOptions = normalizeTTSSpeedOptions(settings.speedOptions);
+        settings.speedOptions = normalizeTTSSpeedOptionConfigs(settings.speedOptions);
       }
       const normalizedConfig = {
         ...config
@@ -19152,7 +19211,7 @@ var ttsToolRegistration = {
         normalizedConfig.layoutMode = normalizeTTSLayoutMode(normalizedConfig.layoutMode);
       }
       if ("speedOptions" in normalizedConfig) {
-        normalizedConfig.speedOptions = normalizeTTSSpeedOptions(normalizedConfig.speedOptions);
+        normalizedConfig.speedOptions = normalizeTTSSpeedOptionConfigs(normalizedConfig.speedOptions);
       }
       if (settings) {
         normalizedConfig.settings = settings;
@@ -19175,7 +19234,7 @@ var ttsToolRegistration = {
     const resolveRuntimeSettings = () => resolveTTSRuntimeSettings(toolbarContext.toolkitCoordinator?.getToolConfig(this.toolId) || undefined);
     const resolveElementSpeedOptions = () => {
       const runtimeSettings = resolveRuntimeSettings();
-      return normalizeTTSSpeedOptions(runtimeSettings.speedOptions);
+      return normalizeTTSSpeedControlOptions(runtimeSettings.speedOptions);
     };
     const resolveLayoutMode = () => resolveTTSLayoutMode(resolveRuntimeSettings());
     const resolveHostLayout = () => resolveTTSHostToolbarLayout(resolveRuntimeSettings());
@@ -23839,6 +23898,7 @@ class TTSService {
   lastError = null;
   speakRunId = 0;
   currentBoundaryOffset = 0;
+  activeWordBoundaryOffset = 0;
   seekSegments = [];
   sentenceHighlightSegments = [];
   currentSeekSegmentIndex = 0;
@@ -24232,11 +24292,11 @@ class TTSService {
       this.currentBoundaryOffset = 0;
       const originalOnWordBoundary = this.provider.onWordBoundary;
       this.provider.onWordBoundary = (word, position, length) => {
+        originalOnWordBoundary?.(word, position, length);
         if (Number.isFinite(position)) {
           this.currentBoundaryOffset = position;
           this.currentSeekSegmentIndex = this.getCurrentSeekSegmentIndex();
         }
-        originalOnWordBoundary?.(word, position, length);
       };
       try {
         await providerWithPlan.speakSegments(segments);
@@ -24247,6 +24307,10 @@ class TTSService {
       }
       return;
     }
+    this.configureWordBoundaryHighlighting({
+      highlightMode: options?.highlightMode || "word",
+      wordBoundaryOffset: this.activeWordBoundaryOffset
+    });
     for (const segment of segments) {
       if (runId !== this.speakRunId)
         return;
@@ -24366,6 +24430,7 @@ class TTSService {
       this.initializeSpeakTracking(highlightText, options);
       const highlightMode = options?.highlightModeOverride || (speechMatchesVisibleText ? this.resolveHighlightMode() : "sentence");
       this.activeHighlightMode = highlightMode;
+      this.activeWordBoundaryOffset = options?.wordBoundaryOffset || 0;
       const hasExplicitBreaks = this.hasExplicitBreakSemantics(contentToSpeak);
       const shouldUsePlan = !!this.currentContentElement && !usedCatalogSpoken && !hasExplicitBreaks && speechMatchesVisibleText;
       this.seekSegments = hasExplicitBreaks || !speechMatchesVisibleText ? [] : shouldUsePlan && this.currentContentElement ? this.createSpeechPlan(this.currentContentElement, normalizedText) : this.createSeekSegmentsFromText(highlightText);
@@ -24951,6 +25016,7 @@ class TTSService {
     this.currentContentElement = null;
     this.normalizedToDOM.clear();
     this.currentBoundaryOffset = 0;
+    this.activeWordBoundaryOffset = 0;
     this.seekSegments = [];
     this.sentenceHighlightSegments = [];
     this.currentSeekSegmentIndex = 0;
@@ -25005,31 +25071,27 @@ class TTSService {
       this.setState(PlaybackState.PLAYING);
     }
   }
-  async seekBy(units) {
-    if (!this.provider || !this.currentText)
-      return;
-    if (this.state !== PlaybackState.PLAYING && this.state !== PlaybackState.PAUSED) {
-      return;
-    }
-    if (this.hasExplicitBreakSemantics(this.currentText))
-      return;
-    if (this.seekSegments.length === 0)
-      return;
-    const delta = Number.isFinite(units) ? Math.trunc(units) : 0;
-    if (delta === 0)
-      return;
-    const currentIndex = this.getCurrentSeekSegmentIndex();
-    const targetIndex = Math.max(0, Math.min(this.seekSegments.length - 1, currentIndex + delta));
-    if (targetIndex === currentIndex)
+  normalizePlaybackRate(rate) {
+    if (!Number.isFinite(rate))
+      return 1;
+    return Math.max(0.25, Math.min(4, rate));
+  }
+  async restartFromSeekIndex(targetIndex) {
+    if (!this.provider || this.seekSegments.length === 0)
       return;
+    const safeTargetIndex = Math.max(0, Math.min(this.seekSegments.length - 1, targetIndex));
     this.speakRunId += 1;
     this.provider.onWordBoundary = undefined;
     this.provider.stop();
-    this.currentSeekSegmentIndex = targetIndex;
+    this.currentSeekSegmentIndex = safeTargetIndex;
     const runId = ++this.speakRunId;
-    const restartSegments = this.seekSegments.slice(targetIndex);
+    const restartSegments = this.seekSegments.slice(safeTargetIndex);
     this.setState(PlaybackState.PLAYING);
     try {
+      this.configureWordBoundaryHighlighting({
+        highlightMode: this.activeHighlightMode,
+        wordBoundaryOffset: this.activeWordBoundaryOffset
+      });
       await this.speakWithPlan(restartSegments, runId, {
         highlightMode: this.activeHighlightMode
       });
@@ -25046,6 +25108,33 @@ class TTSService {
       throw error;
     }
   }
+  async setPlaybackRate(rate) {
+    const nextRate = this.normalizePlaybackRate(rate);
+    await this.updateSettings({ rate: nextRate });
+    if (this.state !== PlaybackState.PLAYING || !this.currentText || this.seekSegments.length === 0 || this.hasExplicitBreakSemantics(this.currentText)) {
+      return;
+    }
+    await this.restartFromSeekIndex(this.getCurrentSeekSegmentIndex());
+  }
+  async seekBy(units) {
+    if (!this.provider || !this.currentText)
+      return;
+    if (this.state !== PlaybackState.PLAYING && this.state !== PlaybackState.PAUSED) {
+      return;
+    }
+    if (this.hasExplicitBreakSemantics(this.currentText))
+      return;
+    if (this.seekSegments.length === 0)
+      return;
+    const delta = Number.isFinite(units) ? Math.trunc(units) : 0;
+    if (delta === 0)
+      return;
+    const currentIndex = this.getCurrentSeekSegmentIndex();
+    const targetIndex = Math.max(0, Math.min(this.seekSegments.length - 1, currentIndex + delta));
+    if (targetIndex === currentIndex)
+      return;
+    await this.restartFromSeekIndex(targetIndex);
+  }
   async seekForward(units = 1) {
     const step = Number.isFinite(units) ? Math.max(1, Math.trunc(units)) : 1;
     await this.seekBy(step);
@@ -25069,6 +25158,7 @@ class TTSService {
     this.currentContentElement = null;
     this.normalizedToDOM.clear();
     this.currentBoundaryOffset = 0;
+    this.activeWordBoundaryOffset = 0;
     this.seekSegments = [];
     this.sentenceHighlightSegments = [];
     this.currentSeekSegmentIndex = 0;

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

@@ -11054,22 +11054,81 @@ var isServerBackend = (backend) => backend === "polly" || backend === "google" |
 var withDefault = (value, fallback2) => value === undefined ? fallback2 : value;
 var normalizeTTSLayoutMode = (value, fallback2 = "left-aligned") => typeof value === "string" && VALID_TTS_LAYOUT_MODES.has(value) ? value : fallback2;
 var DEFAULT_TTS_SPEED_OPTIONS = Object.freeze([0.8, 1.25]);
-var normalizeTTSSpeedOptions = (value) => {
+var normalizeSpeedRate = (entry) => {
+  if (typeof entry !== "number" || !Number.isFinite(entry) || entry <= 0) {
+    return;
+  }
+  const rounded = Math.round(entry * 100) / 100;
+  return rounded === 1 ? undefined : rounded;
+};
+var trimOptionalText = (value) => {
+  if (typeof value !== "string")
+    return;
+  const trimmed = value.trim();
+  return trimmed.length ? trimmed : undefined;
+};
+var formatSpeedLabel = (rate) => `${rate}x`;
+var formatSpeedAriaLabel = (label, usedDefaultLabel) => usedDefaultLabel ? `Speed ${label}` : `${label} speed`;
+var normalizeSpeedAriaLabel = (label, ariaLabel, usedDefaultLabel) => {
+  if (!ariaLabel)
+    return formatSpeedAriaLabel(label, usedDefaultLabel);
+  if (ariaLabel.toLowerCase().includes(label.toLowerCase()))
+    return ariaLabel;
+  return `${label} ${ariaLabel}`;
+};
+var normalizeTTSSpeedOptionConfig = (entry) => {
+  if (typeof entry === "number")
+    return normalizeSpeedRate(entry);
+  if (!entry || typeof entry !== "object" || Array.isArray(entry))
+    return;
+  const record = entry;
+  const rate = normalizeSpeedRate(record.rate);
+  if (rate === undefined)
+    return;
+  const label = trimOptionalText(record.label);
+  const ariaLabel = trimOptionalText(record.ariaLabel);
+  return {
+    rate,
+    ...label ? { label } : {},
+    ...ariaLabel ? { ariaLabel } : {}
+  };
+};
+var normalizeTTSSpeedOptionConfigs = (value) => {
   if (!Array.isArray(value))
     return [...DEFAULT_TTS_SPEED_OPTIONS];
   if (value.length === 0)
     return [];
-  const deduped = new Set;
+  const dedupedRates = new Set;
+  const normalized = [];
   for (const entry of value) {
-    if (typeof entry !== "number" || !Number.isFinite(entry) || entry <= 0)
+    const option = normalizeTTSSpeedOptionConfig(entry);
+    if (option === undefined)
       continue;
-    const rounded = Math.round(entry * 100) / 100;
-    if (rounded === 1)
+    const rate = typeof option === "number" ? option : option.rate;
+    if (dedupedRates.has(rate))
       continue;
-    deduped.add(rounded);
+    dedupedRates.add(rate);
+    normalized.push(option);
   }
-  return deduped.size ? Array.from(deduped) : [...DEFAULT_TTS_SPEED_OPTIONS];
+  return normalized.length ? normalized : [...DEFAULT_TTS_SPEED_OPTIONS];
 };
+var normalizeTTSSpeedControlOptions = (value) => normalizeTTSSpeedOptionConfigs(value).map((option) => {
+  if (typeof option === "number") {
+    const label2 = formatSpeedLabel(option);
+    return {
+      rate: option,
+      label: label2,
+      ariaLabel: formatSpeedAriaLabel(label2, true)
+    };
+  }
+  const defaultLabel = formatSpeedLabel(option.rate);
+  const label = option.label || defaultLabel;
+  return {
+    rate: option.rate,
+    label,
+    ariaLabel: normalizeSpeedAriaLabel(label, option.ariaLabel, label === defaultLabel)
+  };
+});
 var applyRuntimeDefaults = (config) => {
   const withLayoutDefaults = {
     ...config,
@@ -11224,7 +11283,7 @@ var ttsToolRegistration = {
         settings.layoutMode = normalizeTTSLayoutMode(settings.layoutMode);
       }
       if (settings && "speedOptions" in settings) {
-        settings.speedOptions = normalizeTTSSpeedOptions(settings.speedOptions);
+        settings.speedOptions = normalizeTTSSpeedOptionConfigs(settings.speedOptions);
       }
       const normalizedConfig = {
         ...config
@@ -11233,7 +11292,7 @@ var ttsToolRegistration = {
         normalizedConfig.layoutMode = normalizeTTSLayoutMode(normalizedConfig.layoutMode);
       }
       if ("speedOptions" in normalizedConfig) {
-        normalizedConfig.speedOptions = normalizeTTSSpeedOptions(normalizedConfig.speedOptions);
+        normalizedConfig.speedOptions = normalizeTTSSpeedOptionConfigs(normalizedConfig.speedOptions);
       }
       if (settings) {
         normalizedConfig.settings = settings;
@@ -11256,7 +11315,7 @@ var ttsToolRegistration = {
     const resolveRuntimeSettings = () => resolveTTSRuntimeSettings(toolbarContext.toolkitCoordinator?.getToolConfig(this.toolId) || undefined);
     const resolveElementSpeedOptions = () => {
       const runtimeSettings = resolveRuntimeSettings();
-      return normalizeTTSSpeedOptions(runtimeSettings.speedOptions);
+      return normalizeTTSSpeedControlOptions(runtimeSettings.speedOptions);
     };
     const resolveLayoutMode = () => resolveTTSLayoutMode(resolveRuntimeSettings());
     const resolveHostLayout = () => resolveTTSHostToolbarLayout(resolveRuntimeSettings());
@@ -13499,13 +13558,34 @@ function ItemToolBar($$anchor, $$props) {
       const maxHeight = shellConfig?.maxHeight ?? window.innerHeight;
       return { minWidth, minHeight, maxWidth, maxHeight };
     };
+    const applyContentMinWidth = () => {
+      const configuredMinWidth = currentArgs.mounted.entry.shell?.minWidth;
+      const shouldScroll = typeof configuredMinWidth === "number" && configuredMinWidth > 0 && width < configuredMinWidth;
+      const minWidthValue = shouldScroll ? `${configuredMinWidth}px` : "";
+      if (mountedContentElement) {
+        mountedContentElement.style.minWidth = minWidthValue;
+      }
+      if (headerEl) {
+        headerEl.style.minWidth = minWidthValue;
+      }
+      if (contentEl) {
+        contentEl.style.minWidth = minWidthValue;
+      }
+      if (shellEl) {
+        shellEl.style.overflowX = shouldScroll ? "auto" : "visible";
+        shellEl.style.overflowY = "visible";
+      }
+    };
     const applyPositionAndSize = () => {
       const { minWidth, minHeight, maxWidth, maxHeight } = getShellBounds();
-      width = clamp(width, minWidth, Math.max(minWidth, Math.min(maxWidth, window.innerWidth)));
-      height = clamp(height, minHeight, Math.max(minHeight, Math.min(maxHeight, window.innerHeight)));
+      const effectiveMinWidth = Math.min(minWidth, window.innerWidth);
+      const effectiveMinHeight = Math.min(minHeight, window.innerHeight);
+      width = clamp(width, effectiveMinWidth, Math.max(effectiveMinWidth, Math.min(maxWidth, window.innerWidth)));
+      height = clamp(height, effectiveMinHeight, Math.max(effectiveMinHeight, Math.min(maxHeight, window.innerHeight)));
       x2 = clamp(x2, 0, Math.max(0, window.innerWidth - width));
       y2 = clamp(y2, 0, Math.max(0, window.innerHeight - height));
       applyShellStyle();
+      applyContentMinWidth();
       notifyHostedResize();
     };
     const moveBy = (dx, dy) => {
@@ -13606,6 +13686,7 @@ function ItemToolBar($$anchor, $$props) {
       element2.style.height = "100%";
       element2.style.flex = "1 1 auto";
       element2.style.minHeight = "0";
+      applyContentMinWidth();
       if (mountedContentElement && mountedContentElement !== element2) {
         if (mountedContentElement.parentNode === contentEl) {
           invokeElementUnmount(mountedContentElement);
@@ -13854,8 +13935,10 @@ function ItemToolBar($$anchor, $$props) {
       if (resizePointerId === event2.pointerId) {
         event2.preventDefault();
         const shellConfig = currentArgs.mounted.entry.shell;
-        const minWidth = shellConfig?.minWidth ?? 320;
-        const minHeight = shellConfig?.minHeight ?? 240;
+        const configuredMinWidth = shellConfig?.minWidth ?? 320;
+        const configuredMinHeight = shellConfig?.minHeight ?? 240;
+        const minWidth = Math.min(configuredMinWidth, window.innerWidth);
+        const minHeight = Math.min(configuredMinHeight, window.innerHeight);
         const maxWidth = shellConfig?.maxWidth ?? window.innerWidth;
         const maxHeight = shellConfig?.maxHeight ?? window.innerHeight;
         const dx = event2.clientX - resizeStartX;
@@ -13886,6 +13969,7 @@ function ItemToolBar($$anchor, $$props) {
           height = newHeight;
         }
         applyShellStyle();
+        applyContentMinWidth();
         notifyHostedResize();
       }
     };

package/dist/index.d.ts

@@ -56,8 +56,8 @@ export { PlaybackState, TTSService } from "./services/TTSService.js";
 export { PIE_TTS_CONTROL_HANDOFF_EVENT, type TTSControlHandoffDetail, } from "./services/tts-control-events.js";
 export { BrowserTTSProvider } from "./services/tts/browser-provider.js";
 export type { SREMathSpeechOptions } from "./services/tts/math-speech.js";
-export type { TTSHostToolbarLayout, TTSLayoutMode, TTSRuntimeSettings, } from "./services/tts-runtime-config.js";
-export { DEFAULT_TTS_SPEED_OPTIONS, formatTTSSpeedOptionsAsText, normalizeTTSLayoutMode, normalizeTTSSpeedOptions, parseTTSSpeedOptionsFromText, resolveTTSHostToolbarLayout, resolveTTSLayoutMode, resolveTTSRuntimeSettings, } from "./services/tts-runtime-config.js";
+export type { NormalizedTTSSpeedOption, TTSHostToolbarLayout, TTSLayoutMode, TTSRuntimeSettings, TTSSpeedOption, TTSSpeedOptionConfig, } from "./services/tts-runtime-config.js";
+export { DEFAULT_TTS_SPEED_OPTIONS, formatTTSSpeedOptionsAsText, normalizeTTSLayoutMode, normalizeTTSSpeedControlOptions, normalizeTTSSpeedOptionConfigs, normalizeTTSSpeedOptions, parseTTSSpeedOptionsFromText, resolveTTSHostToolbarLayout, resolveTTSLayoutMode, resolveTTSRuntimeSettings, } from "./services/tts-runtime-config.js";
 export type { ITTSProvider, ITTSProviderImplementation, TTSSpeechSegment, TTSFeature, TTSProviderCapabilities, } from "@pie-players/pie-tts";
 export type { CreateLoadItemOptions, LoadItem, LoadItemOptions, } from "./item-loader.js";
 export { createFetchItemLoader, createLoadItem, ItemLoadError, } from "./item-loader.js";

package/dist/index.js

@@ -39,7 +39,7 @@ export { createScopedToolId, parseScopedToolId, toOverlayToolId, } from "./servi
 export { PlaybackState, TTSService } from "./services/TTSService.js";
 export { PIE_TTS_CONTROL_HANDOFF_EVENT, } from "./services/tts-control-events.js";
 export { BrowserTTSProvider } from "./services/tts/browser-provider.js";
-export { DEFAULT_TTS_SPEED_OPTIONS, formatTTSSpeedOptionsAsText, normalizeTTSLayoutMode, normalizeTTSSpeedOptions, parseTTSSpeedOptionsFromText, resolveTTSHostToolbarLayout, resolveTTSLayoutMode, resolveTTSRuntimeSettings, } from "./services/tts-runtime-config.js";
+export { DEFAULT_TTS_SPEED_OPTIONS, formatTTSSpeedOptionsAsText, normalizeTTSLayoutMode, normalizeTTSSpeedControlOptions, normalizeTTSSpeedOptionConfigs, normalizeTTSSpeedOptions, parseTTSSpeedOptionsFromText, resolveTTSHostToolbarLayout, resolveTTSLayoutMode, resolveTTSRuntimeSettings, } from "./services/tts-runtime-config.js";
 export { createFetchItemLoader, createLoadItem, ItemLoadError, } from "./item-loader.js";
 export { createMemoryStorage, createTestAttemptSessionIdentifier, createNewTestAttemptSession, getBrowserLocalStorage, getOrCreateAnonymousDeviceId, getTestAttemptSessionStorageKey, loadTestAttemptSession, saveTestAttemptSession, setCurrentPosition, upsertItemSessionFromPieSessionChange, upsertVisitedItem, } from "./attempt/TestSession.js";
 export { createNewAssessmentSession, getAssessmentSessionStorageKey, loadAssessmentSession, saveAssessmentSession, setCurrentSectionPosition, upsertSectionSession, } from "./attempt/AssessmentSession.js";