@pie-players/pie-tool-tts-inline 0.3.74 → 0.3.75

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -31,10 +31,11 @@ bun add @pie-players/pie-tool-tts-inline
31
31
 
32
32
  ## Usage
33
33
 
34
- The element renders inside `<pie-item-shell>` or `<pie-passage-shell>` under
35
- `<pie-assessment-toolkit>`. The toolkit runtime context supplies the TTS
36
- service, the highlight coordinator and the toolkit coordinator, and the shell
37
- supplies the content to read; section players provide both. The packaged
34
+ The element renders inside `<pie-item-scope>` or `<pie-passage-shell>` under
35
+ `<pie-assessment-toolkit>`. The toolkit runtime context supplies the TTS service,
36
+ the highlight coordinator and the toolkit coordinator, and the shell supplies the
37
+ content to read. Section players provide both; around a plain item player, the
38
+ host writes the toolkit and the scope. The packaged
38
39
  `textToSpeech` capability in `@pie-players/pie-default-tool-loaders` creates
39
40
  this element in item and passage toolbars, takes `catalog-id`, `language` and
40
41
  `size` from the toolbar, and takes `layout-mode`, `speedOptions` and
@@ -73,9 +74,11 @@ passageHeader.append(ttsButton);
73
74
  ### HTML Attributes
74
75
 
75
76
  - `catalog-id` - QTI 3.0 accessibility catalog ID for SSML lookup (default: `''`)
76
- - `language` - Language code for TTS (default: `'en-US'`)
77
+ - `language` - The content language when the markup names none (default: `''`,
78
+ which falls back to the toolkit's `content-language`). A `lang` attribute
79
+ between the reading target and its shell wins over it.
77
80
  - `size` - Icon size: `'sm'` (1.5rem), `'md'` (2rem), or `'lg'` (2.5rem) (default: `'md'`)
78
- - `layout-mode` - Panel placement (default: `'expanding-row'`). `'reserved-row'`
81
+ - `layout-mode` - Panel placement (default: `'left-aligned'`). `'reserved-row'`
79
82
  and `'expanding-row'` drop the panel below the trigger; in the packaged toolbar
80
83
  the first keeps the controls row reserved and the second expands it while the
81
84
  panel is open. `'floating-overlay'` and `'left-aligned'` open the panel as an
@@ -133,8 +136,8 @@ Semantics:
133
136
  ## Behavior
134
137
 
135
138
  1. **Services**: Reads `ttsService`, `highlightCoordinator` and `toolkitCoordinator` from the toolkit runtime context; the controls stay disabled until a `ttsService` arrives, and starting playback awaits `toolkitCoordinator.ensureTTSReady()`
136
- 2. **Text Extraction**: Reads the `textContent` of the scope element (the region scope, else the shell scope) when it is `[data-region='content']`, else of its first `[data-region='content']` descendant, else of the scope element itself
137
- 3. **TTS Trigger**: Calls `ttsService.speak(text, { catalogId, catalogContext, language, contentElement })`, where `contentElement` is that reading target and `catalogContext` names the owning item or passage
139
+ 2. **Text Extraction**: Reads the text of the scope element's content region (the region scope, else the shell scope, when it is `[data-region='content']`, else its first `[data-region='content']` descendant, else the scope element itself), including text rendered into open shadow roots
140
+ 3. **TTS Trigger**: Calls `ttsService.speak(readingTarget, { catalogId, catalogContext, language })`, where `catalogContext` names the owning item or passage and `language` is the `language` attribute, else the toolkit's `content-language`. `speak` resolves the read's language from it as [TTS language](../../docs/architecture/internationalization.md#tts-language) sets out
138
141
  4. **Catalog Resolution**: TTSService checks for SSML in accessibility catalogs (priority order):
139
142
  - **Extracted catalogs** (from embedded SSML) - generated before render by hosts that run `SSMLExtractor`
140
143
  - **Item-level catalogs** (manually authored)
@@ -180,7 +183,7 @@ when a host/import pipeline runs `SSMLExtractor` before render:
180
183
  **Tool uses extracted catalog:**
181
184
 
182
185
  - User clicks TTS button in header
183
- - Tool calls `ttsService.speak(text, { catalogId: 'auto-prompt-q1-0' })`
186
+ - Tool calls `ttsService.speak(readingTarget, { catalogId: 'auto-prompt-q1-0' })`
184
187
  - TTSService finds SSML in extracted catalogs
185
188
  - Speaks with proper math pronunciation and pacing
186
189
 
@@ -208,7 +211,7 @@ component-scoped variables instead of overriding broad semantic tokens such as
208
211
  If unset, the trigger looks the same open as closed: each hook falls back to the
209
212
  value the control already resolves to — background through
210
213
  `--pie-button-background-color` / `--pie-button-bg` / `--pie-background`, border
211
- through `--pie-button-border-color` / `--pie-button-border` / `--pie-border`, and
214
+ through `--pie-button-border` / `--pie-border`, and
212
215
  foreground through `--pie-button-color` / `--pie-text`. Setting a hook is how a
213
216
  host opts into a distinct active/open appearance.
214
217
 
@@ -257,12 +260,10 @@ Selection reads from the chip fill and the bolder weight instead of from hue. A
257
260
  host that wants a branded accent sets `--pie-tts-button-color` and owns the
258
261
  contrast, as with the active-trigger hooks above.
259
262
 
260
- Ordinary trigger and control button styling also preserves these legacy aliases:
261
- `--pie-button-background-color`, `--pie-button-border-color`, and
262
- `--pie-button-hover-background-color`. They remain supported for host
263
- compatibility, but fall back through the canonical `--pie-button-bg`,
264
- `--pie-button-border`, and `--pie-button-hover-bg` tokens before broad surface
265
- tokens.
263
+ Trigger and control backgrounds read `--pie-button-background-color` ahead of
264
+ the canonical `--pie-button-bg`; borders and hover backgrounds read
265
+ `--pie-button-border` and `--pie-button-hover-bg`. Each falls back to the broad
266
+ surface tokens.
266
267
 
267
268
  ## Architecture
268
269