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

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();
       }
     };