@mieweb/ui 0.11.0-dev.36 → 0.11.0-dev.38

package/agent/README.md

@@ -22,7 +22,7 @@ governing spec: later tickets cite it instead of re-deciding.
 | ------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | [mieweb-ui.instructions.md](mieweb-ui.instructions.md) | The rules template. Copied verbatim to the consumer's `.github/instructions/` (VS Code Copilot auto-applies it via the `applyTo` frontmatter) and embedded, minus frontmatter, in a marked block in the consumer's `AGENTS.md` (the cross-tool convention).                                                       |
 | [init-agent.mjs](init-agent.mjs)                       | The `mieweb-ui` bin. Idempotent — rerun after upgrading `@mieweb/ui` to refresh all targets. `--experimental-agents` additionally installs the agent team below.                                                                                                                                                  |
-| [agents/](agents/)                                     | Agent templates: `mieweb-ui-design` (orchestrator) + `mieweb-ui-styling` + `mieweb-ui-install` + `mieweb-ui-a11y` + `mieweb-ui-i18n`. Installed to the consumer's `.github/agents/` behind `--experimental-agents`.                                                                                               |
+| [agents/](agents/)                                     | Agent templates: `mieweb-ui-design` (orchestrator) + `mieweb-ui-styling` + `mieweb-ui-install` + `mieweb-ui-a11y` + `mieweb-ui-i18n` + `mieweb-ui-migration`. Installed to the consumer's `.github/agents/` behind `--experimental-agents`.                                                                       |
 | [skills/](skills/)                                     | Skill templates: `mieweb-ui-catalog`, `mieweb-ui-tokens`, `mieweb-ui-icons` (generated — `pnpm agent:skills`, never hand-edit) + `mieweb-ui-brands`, `mieweb-ui-tailwind4`, `mieweb-ui-a11y-checklist`, `mieweb-ui-i18n-checklist` (hand-written). Installed to `.github/skills/` behind `--experimental-agents`. |
 | `evals/` _(Phase 2+)_                                  | Golden-question eval sets per specialist; the regression harness for agent knowledge.                                                                                                                                                                                                                             |
 

package/agent/agents/mieweb-ui-design.agent.md

@@ -19,6 +19,10 @@ handoffs:
     agent: MIE UI i18n Agent
     prompt: Audit the code discussed above for internationalization and RTL compliance (string externalization, locale-bundle completeness, Intl formatting, logical properties) and report findings.
     send: false
+  - label: Migration/compliance audit
+    agent: MIE UI Migration Agent
+    prompt: Audit the code discussed above for @mieweb/ui compliance (raw HTML elements, custom modal/card/badge patterns, hand-rolled icons, CSS foundation) and report findings with a prioritized replacement plan.
+    send: false
 ---
 
 # MIE UI Design Agent (orchestrator)
@@ -48,14 +52,15 @@ comparison tables) and `mieweb-ui-icons` (icon aliases and conventions):
 
 ## Route to specialists
 
-| Question is about…                                  | Delegate to          |
-| --------------------------------------------------- | -------------------- |
-| install / peer deps / preset / safelist / `@source` | MIE UI Install Agent |
-| tokens, CSS vars, Tailwind classes, brands, dark    | MIE UI Styling Agent |
-| ARIA, keyboard nav, screen readers, contrast        | MIE UI A11y Agent    |
-| translations, locale bundles, Intl formats, RTL     | MIE UI i18n Agent    |
+| Question is about…                                  | Delegate to            |
+| --------------------------------------------------- | ---------------------- |
+| install / peer deps / preset / safelist / `@source` | MIE UI Install Agent   |
+| tokens, CSS vars, Tailwind classes, brands, dark    | MIE UI Styling Agent   |
+| ARIA, keyboard nav, screen readers, contrast        | MIE UI A11y Agent      |
+| translations, locale bundles, Intl formats, RTL     | MIE UI i18n Agent      |
+| migrating code to @mieweb/ui, raw-HTML compliance   | MIE UI Migration Agent |
 
-More specialists (Migration, Grids, DataVis, Views,
+More specialists (Grids, DataVis, Views,
 SuperChat, Rich Text) land in later phases; until one ships, answer its domain
 from the skills and the component docs, or defer (below).
 

package/agent/agents/mieweb-ui-migration.agent.md

@@ -0,0 +1,144 @@
+---
+name: MIE UI Migration Agent
+description: Migration and compliance auditor for bringing codebases onto @mieweb/ui — raw-HTML-to-component pattern enforcement (badge spans, card divs, raw buttons, tables to DataVis NITRO), hand-rolled SVG to lucide-react, CSS foundation checks, and legacy-framework migration planning (Meteor/Blaze to React). Invoke to audit a file, page, or project for @mieweb/ui compliance or to plan a migration.
+tools: ['search', 'codebase', 'fetch']
+handoffs:
+  - label: Apply Fixes
+    agent: agent
+    prompt: Apply the @mieweb/ui compliance fixes identified in the audit above — replace the flagged raw elements and patterns with the prescribed @mieweb/ui components, preserving existing functionality and event handlers.
+    send: false
+---
+
+# MIE UI Migration Agent
+
+You are the migration and compliance auditor for the **@mieweb/ui** design
+system. You bring legacy code into compliance: every UI element must use a
+`@mieweb/ui` component when one exists — no raw `<button>`, `<input>`,
+`<select>`, `<table>`, `<textarea>`, or custom modal/card/badge markup. You
+are **read-only**: you audit, plan, and prescribe — the **Apply Fixes**
+handoff performs the edits.
+
+## Your sources of truth (never inline-duplicate them)
+
+- **`mieweb-ui-catalog` skill** — the component inventory and selection
+  guidance; every replacement you prescribe must exist there. It is the
+  raw-element → component mapping (`<button>` → `Button`, card divs →
+  `Card`/`CardContent`, badge spans → `Badge`, modal divs → `Modal`, …).
+- **`mieweb-ui-tailwind4` skill** — the CSS foundation a migrated project
+  needs (`@source` directive, `@custom-variant dark`, `@theme` fallbacks,
+  `@tailwindcss/postcss`).
+- **`mieweb-ui-icons` skill** — the lucide-react aliases that replace
+  hand-rolled `<svg>` and icon fonts.
+- The installed `mieweb-ui.instructions.md` — the policy you enforce
+  (NITRO-first for tables, tokens not hardcoded colors, lucide-react icons).
+
+## The prime directive: patterns, not just imports
+
+Compliance is not "does the file import @mieweb/ui". Raw HTML that serves
+the same purpose as a component is a violation even when the file already
+imports the library:
+
+- `<span className="rounded-full bg-blue-100 px-2 …">` is a `Badge`.
+- `<div className="rounded-lg border p-4 shadow">` is a `Card`.
+- `<div className="fixed inset-0 bg-black/50">…` is a `Modal`.
+- A hand-rolled `<svg>` or icon-font glyph is a `lucide-react` icon.
+- Any `<table>` the user will sort, filter, page, or export is
+  **DataVis NITRO** (`Table` only for a few static rows; `AGGrid` is
+  deprecated — never migrate _to_ it).
+
+## Audit workflow
+
+1. **Scope the audit.** A file, a page, or a whole project — confirm which,
+   then read the files before reporting. Exclude test files from violation
+   counts.
+2. **Grep for raw elements** — `<button`, `<input`, `<select`, `<textarea`,
+   `<table`/`<thead`/`<tbody`/`<tr`/`<td`/`<th`, `<form` controls. Also grep
+   the **dynamic forms**: literal `type="date"` misses
+   `type={cond ? 'date' : 'text'}` — search `type={` and other
+   prop-expression variants too.
+3. **Grep for patterns** — badge/pill/tag spans, card-like divs
+   (`rounded…border…shadow`), modal/overlay divs (`fixed inset-0`), inline
+   `<svg>` and icon-font classes, hand-rolled spinners/progress bars,
+   custom tab/breadcrumb/pagination markup.
+4. **Check the CSS foundation** (project-level audits): identify the
+   consumer's CSS mode first, then audit against that mode's checklist in
+   the `mieweb-ui-tailwind4` skill — Tailwind 4 (`@source` for
+   `@mieweb/ui/dist`, `@custom-variant dark`, `@theme` fallbacks,
+   `@tailwindcss/postcss`), Tailwind 3 (preset + safelist + `content`
+   coverage), or precompiled CSS (`styles.css`/`init.css` import — never
+   prescribe Tailwind tooling to it). Validate the dark-mode toggle
+   against the `@custom-variant` actually in effect (a single-hook toggle
+   against `init.css` is valid); setting both `.dark` and `data-theme` is
+   the recommendation for new code, not a violation when one hook matches.
+5. **Build the resolution plan**, prioritized: layout shell (`AppHeader`,
+   `Sidebar`, `SiteFooter`) → buttons → form elements → cards & modals →
+   tables (NITRO) → feedback (`Badge`, `Toast`, `Spinner`) → navigation
+   (`Tabs`, `Breadcrumb`, `Pagination`). Replacements preserve existing
+   functionality and event handlers.
+6. **Detect gaps.** A pattern with no `@mieweb/ui` equivalent is not a
+   violation — report it with the tier recommendation: compose from existing
+   primitives; build locally in library style (CVA variants, `forwardRef`,
+   theme CSS variables, dark mode, ARIA); headless-module contract if it
+   renders a caller-owned collection; contribute upstream once stable.
+7. **Report, then hand off.** Findings in the format below; offer
+   **Apply Fixes** for the edits.
+
+## Audit output format
+
+### 🧭 @mieweb/ui compliance audit for `<scope>`
+
+| #   | Category | File | Line | Violation | Replacement |
+| --- | -------- | ---- | ---- | --------- | ----------- |
+
+Order findings: raw elements, then patterns, then CSS foundation, then gaps.
+After the table, the compliance summary:
+
+| Category                | Count | Status |
+| ----------------------- | ----- | ------ |
+| Raw `<button>`          | X     | ❌     |
+| Raw form elements       | X     | ❌     |
+| Raw `<table>`           | X     | ❌     |
+| Custom modal/card/badge | X     | ❌     |
+| Hand-rolled icons       | X     | ❌     |
+| CSS foundation          | —     | ✅/❌  |
+| Gaps (no equivalent)    | N     | 📝     |
+
+Close with what passes, any judgment calls, and the **Apply Fixes** handoff.
+
+## Migration planning (beyond single-file audits)
+
+For whole-app migrations (e.g. Meteor 2 + Blaze → Meteor 3 + React +
+@mieweb/ui), plan in this order: scaffold → install deps → the three
+critical CSS/PostCSS/Tailwind config files → verify Tailwind renders →
+shared hooks (`useTheme`, `useBrand`) → layout shell → features one at a
+time, auth first → verify dark mode, brand switching, and `tsc --noEmit`.
+Meteor 3 specifics: all methods async, collection ops use `*Async()`
+variants. Verify each migrated feature before starting the next.
+
+## Redirects
+
+- "Which component should I use?" for new (non-migration) work → **MIE UI
+  Design Agent** (your mapping covers replacements; open-ended selection is
+  theirs).
+- Broken styling after install, unstyled components, Tailwind wiring →
+  **MIE UI Install Agent** (you flag the missing foundation; they debug it).
+- Token/brand/dark-mode policy questions → **MIE UI Styling Agent**.
+- ARIA, keyboard navigation, focus, contrast → **MIE UI A11y Agent** (your
+  replacements inherit library a11y; auditing what remains is theirs).
+- String externalization, locale bundles, RTL → **MIE UI i18n Agent**.
+
+## Rules
+
+1. Evidence over checklists: cite file and line for every finding; read the
+   code before flagging it.
+2. **Patterns, not just imports** — a compliant import list proves nothing;
+   grep for the raw markup the components replace.
+3. Grep dynamic forms: prop expressions (`type={…}`, spread props,
+   conditional classes) hide violations that literal-string greps miss.
+4. Never prescribe a component or prop you cannot verify in the catalog
+   skill, the published component docs (https://ui.mieweb.org), or the
+   package's public types — the catalog is a selection inventory, not an
+   API reference; a gap honestly reported beats an invented replacement.
+5. Replacements must preserve behavior — event handlers, controlled state,
+   form semantics. Flag any replacement that would change behavior as a
+   judgment call instead of silently prescribing it.

package/agent/skills/mieweb-ui-catalog/SKILL.md

@@ -7,7 +7,7 @@ description: Component inventory and selection guidance for the @mieweb/ui desig
 
 # @mieweb/ui component catalog
 
-271 cataloged components. Full docs: https://ui.mieweb.org/ (Storybook; sidebar is Tier / Family / Component, every family has an Overview page).
+274 cataloged components. Full docs: https://ui.mieweb.org/ (Storybook; sidebar is Tier / Family / Component, every family has an Overview page).
 
 For per-component "Which one?" comparison tables, read [selection-guidance.md](./selection-guidance.md) in this skill and jump to the family's section.
 
@@ -43,7 +43,7 @@ For per-component "Which one?" comparison tables, read [selection-guidance.md](.
 
 ## Inventory
 
-Components by tier and family. Annotations: maturity when not stable, and the import entry when it is not the root (e.g. _(`/datavis`)_).
+Components by tier and family. Annotations: maturity when not stable, the import entry when it is not the root (e.g. _(`/datavis`)_), and _(not exported yet)_ for components documented in Storybook but not yet importable — do not recommend those for use.
 
 ### Foundations
 
@@ -73,14 +73,14 @@ Components by tier and family. Annotations: maturity when not stable, and the im
 
 - **Chat:** AIChat, AIChat (Voice), AIMessage, ChatComposer _(beta)_, Composer Action Ribbon (POC) _(experimental)_, ComposerModelSelector, MCPToolCall, Messaging, OzwellChat, ReconciliationPanel
 - **Dashboards:** CustomizableDashboard, Dashboard (Demo) _(experimental)_, Dashboard Widgets (Demo) _(experimental)_, DashboardCustomizePanel, DashboardWidget, QuickLinksCard, ReportDashboard
-- **Editors:** EmailEditor _(experimental)_, MacroLibrary _(experimental)_, Markdown, Q _(`/q`)_, RichEditor _(`/kerebron`)_, RichTextEditor, TextAreaRich _(experimental)_
+- **Editors:** EmailEditor _(experimental)_, MacroLibrary _(experimental)_, Markdown, Q _(`/q`)_, RichEditor _(`/kerebron`)_, RichTextEditor, RichTextEsheet _(experimental, `/esheet`)_, TextAreaRich (Kerebron) _(experimental, `/kerebron`)_
 - **Files:** DocumentScanner, DropzoneOverlay, FileManager
 - **Media:** AudioPlayer, AudioRecorder, DictationButton _(experimental)_, MediaEditor, MediaEditor Live Demo, MediaFeed _(experimental, `/components/MediaFeed`)_, MediaPlayer, RecordButton, TranscriptView, VideoCard _(experimental)_
 - **Presentations:** Deck _(experimental, `/deck`)_, PointMap _(experimental, `/maps`)_
 - **Records:** ActionPlan _(experimental)_, ActivityFeed _(experimental)_, AssociationList _(experimental)_, FieldHistory _(experimental)_, OrgChart _(experimental, `/org-chart`)_, RecordLayout _(experimental)_
 - **SuperChat:** Conversations (List) _(`/components/SuperChat`)_, Inbox _(`/components/SuperChat`)_, SuperChat (Panel) _(`/components/SuperChat`)_
 - **Views:** BoardView _(alpha)_, CalendarView _(alpha)_, GanttView _(alpha)_, ListView _(alpha)_, ViewSet _(alpha)_, ViewSwitcher _(alpha)_
-- **Voice:** Hands-Free Chat, Hey Ozwell Demo, Hey Ozwell Selector _(experimental)_, Speaker Verify _(experimental)_, Transcript Player _(experimental)_, Visit Scribe, Voice Manager, Voice Setup, Wake Word
+- **Voice:** Hands-Free Chat, Hey Ozwell Demo, Hey Ozwell Selector _(experimental)_, Speaker Scribe _(experimental, not exported yet)_, Speaker Verify _(experimental)_, Transcript Player _(experimental)_, Visit Scribe, Voice Manager, Voice Setup, Wake Word
 
 ### Templates
 
@@ -107,7 +107,7 @@ Components by tier and family. Annotations: maturity when not stable, and the im
 
 ### Deprecated
 
-- AGGrid _(deprecated, `/ag-grid`)_, AGGrid Enhanced _(deprecated, `/ag-grid`)_
+- AGGrid _(deprecated, `/ag-grid`)_, AGGrid Enhanced _(deprecated, `/ag-grid`)_, TextAreaRich (Legacy) _(deprecated)_
 
 ## Family policies
 
@@ -198,7 +198,9 @@ The one-line rule that governs each family. When a task touches a family, read i
 
 > **What is the stored format, and who edits it?** Markdown that people write (and maybe
 > co-write) → `RichEditor`. HTML for templated letters with merge fields and dictation →
-> `RichTextEditor`. HTML in a surface that should look like a plain textarea until asked →
+> `RichTextEditor`. A **multi-section guided document** — referral letters, support tickets —
+> where an eSheet definition supplies the sections and memory aids → `RichTextEsheet`.
+> HTML in a surface that should look like a plain textarea until asked →
 > `TextAreaRich`. An **email** laid out from blocks and compiled to MJML → `EmailEditor`.
 > Markdown that is only **read** → `MarkdownRenderer`. A structured agent
 > configuration with a YAML/JSON pane → `Q`. Plain text storage with rich composing →

package/agent/skills/mieweb-ui-catalog/selection-guidance.md

@@ -259,7 +259,9 @@ lists of options in [Choice inputs](https://ui.mieweb.org/?path=/docs/inputs-cho
 
 > **What is the stored format, and who edits it?** Markdown that people write (and maybe
 > co-write) → `RichEditor`. HTML for templated letters with merge fields and dictation →
-> `RichTextEditor`. HTML in a surface that should look like a plain textarea until asked →
+> `RichTextEditor`. A **multi-section guided document** — referral letters, support tickets —
+> where an eSheet definition supplies the sections and memory aids → `RichTextEsheet`.
+> HTML in a surface that should look like a plain textarea until asked →
 > `TextAreaRich`. An **email** laid out from blocks and compiled to MJML → `EmailEditor`.
 > Markdown that is only **read** → `MarkdownRenderer`. A structured agent
 > configuration with a YAML/JSON pane → `Q`. Plain text storage with rich composing →
@@ -272,10 +274,12 @@ lists of options in [Choice inputs](https://ui.mieweb.org/?path=/docs/inputs-cho
 | --- | --- | --- |
 | [RichEditor](https://ui.mieweb.org/?path=/docs/editors-richeditor--docs) | The document is **Markdown**: headings, lists, tables, code; `getContent()` on submit; `collab.room` for Yjs co-editing; `CodeEditor` for source | The stored format is HTML or you need merge variables/dictation — `RichTextEditor`; the host cannot add the Kerebron peers and WASM assets |
 | [RichTextEditor](https://ui.mieweb.org/?path=/docs/editors-richtexteditor--docs) | The document is **HTML**: bold/italic/underline, lists, alignment, opt-in markdown block shortcuts (H1–H3, lists, quote), `variableGroups` inserting `{{tokens}}`, Web Speech dictation; no peers | You need Markdown, real undo history, links/tables/code or collaboration — `RichEditor`; plain text — `Textarea`; a textarea-like surface with the toolbar hidden — `TextAreaRich` |
-| [TextAreaRich](https://ui.mieweb.org/?path=/docs/editors-textarearich--docs) | A **textarea-like** HTML surface: starts one Input row tall and auto-grows, toolbar hidden until asked, markdown block shortcuts, a Notion-style `+` gutter menu, `.shortcut` macros | The value must be **plain text** (form posts, bindings) — `Textarea` (this surface with a plain-text contract); a full document with an always-on toolbar, variables or dictation — `RichTextEditor` |
+| [TextAreaRich](https://ui.mieweb.org/?path=/docs/editors-textarearich-kerebron--docs) | A **textarea-like** HTML surface on the Kerebron engine (`@mieweb/ui/kerebron`): starts one Input row tall and auto-grows, toolbar hidden until asked, markdown block shortcuts, a Notion-style `+` gutter menu, `.shortcut` macros | The value must be **plain text** (form posts, bindings) — `Textarea` (this surface with a plain-text contract); a full document with an always-on toolbar, variables or dictation — `RichTextEditor` |
+| [RichTextEsheet](https://ui.mieweb.org/?path=/docs/editors-richtextesheet--docs) | A **multi-section guided document** — referral letters, support tickets, incident write-ups — where an eSheet definition drives section prompts, memory-aid phrases and party macros; exports portable MDY | One free-form HTML letter with merge fields and dictation — `RichTextEditor`; a single rich input — `TextAreaRich`; arbitrary native `FormDefinition` forms — EsheetRenderer (Composite forms); coded clinical visits — EncounterVisit (Encounter & orders) |
 | [EmailEditor](https://ui.mieweb.org/?path=/docs/editors-emaileditor--docs) | The document is an **email**: hero, columns, buttons, images, social, footer blocks on a drag-to-reorder canvas; `renderEmailMjml` serialises it | A single formatted body — `RichTextEditor`; sending, recipients and templates are the host's |
 | [Markdown](https://ui.mieweb.org/?path=/docs/editors-markdown--docs) | **Displaying** Markdown: sanitised HTML, code highlighting, `mermaid` / `csv` / `survey` / `html` fences, `streaming` for token-by-token AI output | The user edits the text — `RichEditor` / `RichTextEditor`; the source is HTML |
 | [Q](https://ui.mieweb.org/?path=/docs/editors-q--docs) | Admins configure an **agent** (prompt, tools, telephony) through a schema-generated form and see the YAML/JSON; `onSubmit(yaml)`, `onConfigChange` | Free-form prose — `RichEditor`; general clinical/business forms — ESheet (Composite forms) |
+| [TextAreaRich (Legacy)](https://ui.mieweb.org/?path=/docs/deprecated-textarearich--docs) _(deprecated)_ | Never for new work — the `document.execCommand` engine; use [TextAreaRich (Kerebron)](https://ui.mieweb.org/?path=/docs/editors-textarearich-kerebron--docs) | — |
 
 ---
 
@@ -432,8 +436,8 @@ Related, in other families: `Button isLoading` (inline spinner), `ReadingProgres
 | Component | Use it when | Not when |
 | --- | --- | --- |
 | [AudioPlayer](https://ui.mieweb.org/?path=/docs/media-audioplayer--docs) | A small, themed player for one audio clip: `inline` / `compact` / `waveform` variants, `AudioPlayerRef` in **seconds**, `preload={false}` for lists | The source may be video or you want native controls and captions — `MediaPlayer`; you are capturing — `AudioRecorder` / `RecordButton` |
-| [MediaPlayer](https://ui.mieweb.org/?path=/docs/media-mediaplayer--docs) | Native `<audio>`/`<video>` with `controls`, `kind` inferred from the extension, `MediaPlayerRef` in **milliseconds** to sync a transcript | You want a compact styled audio control or a waveform — `AudioPlayer`; the words are edited — `MediaEditor` |
-| [MediaFeed](https://ui.mieweb.org/?path=/docs/media-mediafeed--docs) | A host-owned collection of clips and images with vertical browsing, one active player and an immersive viewer; also the media view of [SuperChatInbox](https://ui.mieweb.org/?path=/docs/superchat-inbox--docs) | A single clip — `MediaPlayer`; a linked video thumbnail — `VideoCard`; text discussion — the normal SuperChat thread |
+| [MediaPlayer](https://ui.mieweb.org/?path=/docs/media-mediaplayer--docs) | `<audio>`/`<video>` with the browser's controls or, for video, touch-first overlay controls (`controlsStyle`); `kind` inferred from the extension; `MediaPlayerRef` in **milliseconds** | You want a compact styled audio control or a waveform — `AudioPlayer`; the words are edited — `MediaEditor` |
+| [MediaFeed](https://ui.mieweb.org/?path=/docs/media-mediafeed--docs) | A host-owned collection of clips and images with vertical browsing, one active player and an immersive viewer, as cards or edge to edge (`layout`); also the media view of [SuperChatInbox](https://ui.mieweb.org/?path=/docs/superchat-inbox--docs) | A single clip — `MediaPlayer`; a linked video thumbnail — `VideoCard`; text discussion — the normal SuperChat thread |
 | [TranscriptView](https://ui.mieweb.org/?path=/docs/media-transcriptview--docs) | Read-only word- or segment-level transcript that highlights `currentTimeMs` and reports `onSeek(ms)`; speaker rows via `speakerLabels` / `mergeSameSpeaker` | The user changes words or the cut — `MediaEditor`; you have no media position to follow |
 | [MediaEditor](https://ui.mieweb.org/?path=/docs/media-mediaeditor--docs) | Word-timestamped `Transcript` the user tightens: delete/cut/paste words, split silences, filler removal, speed markers; state persisted via `onEditorStateChange` | Read-only playback — `TranscriptView` + `MediaPlayer`; segment-only timestamps (no per-word times) |
 | [MediaEditor Live Demo](https://ui.mieweb.org/?path=/docs/media-mediaeditor-live-demo--docs) | Trying `MediaEditor` on your own file: on-device Whisper transcription, then the editor with the Script panel | Anything you ship — use `MediaEditor` with your own transcription source |
@@ -649,7 +653,7 @@ executive summary (numbers as lettermark icons) and outlook, and `LeadFormSectio
 | Component | Use it when | Not when |
 | --- | --- | --- |
 | [Input](https://ui.mieweb.org/?path=/docs/text-inputs-input--docs) | One line of free text or a native type (`email`, `password`, `number`) | Phone / URL / date / fixed options — see the specialists |
-| [Textarea](https://ui.mieweb.org/?path=/docs/text-inputs-textarea--docs) | A sentence or more stored as **plain text** — rich formatting while composing ([TextAreaRich](https://ui.mieweb.org/?path=/docs/editors-textarearich--docs) underneath), plain string through `onChange` | The host **persists** HTML — [TextAreaRich](https://ui.mieweb.org/?path=/docs/editors-textarearich--docs); native `<textarea>` behaviours (hard `maxLength`, validation, drag-resize, floating label) — `TextAreaPlain` (documented on the Textarea page); full documents — `RichEditor` / `RichTextEditor` |
+| [Textarea](https://ui.mieweb.org/?path=/docs/text-inputs-textarea--docs) | A sentence or more stored as **plain text** — rich formatting while composing ([TextAreaRich](https://ui.mieweb.org/?path=/docs/editors-textarearich-kerebron--docs) underneath), plain string through `onChange` | The host **persists** HTML — [TextAreaRich (Kerebron)](https://ui.mieweb.org/?path=/docs/editors-textarearich-kerebron--docs); native `<textarea>` behaviours (hard `maxLength`, validation, drag-resize, floating label) — `TextAreaPlain` (documented on the Textarea page); full documents — `RichEditor` / `RichTextEditor` |
 | [Label](https://ui.mieweb.org/?path=/docs/text-inputs-label--docs) | Labelling a control with no `label` prop (raw `<select>`, custom) | The control already takes `label` |
 | [PhoneInput](https://ui.mieweb.org/?path=/docs/text-inputs-phoneinput--docs) | Exactly one US/Canada number stored as 10 digits | Several typed numbers — `PhoneInputGroup`; international |
 | [PhoneInputGroup](https://ui.mieweb.org/?path=/docs/text-inputs-phoneinputgroup--docs) | A record holds several numbers and the type (cell, work, fax) matters | One number; rows need extra fields |

package/dist/{chunk-TUYWCUKH.js → chunk-4LKAZW2W.js}

@@ -72,6 +72,7 @@ function useMediaTransport(options = {}) {
     };
     const onDurationChange = () => setDurationMs(toMs(element.duration));
     const onTimeUpdateEvt = () => emitTime();
+    const onRateChange = () => setPlaybackRateState(element.playbackRate);
     const onPlay = () => setState("playing");
     const onPlaying = () => setState("playing");
     const onPause = () => setState("paused");
@@ -94,6 +95,7 @@ function useMediaTransport(options = {}) {
     element.addEventListener("loadedmetadata", onLoadedMetadata);
     element.addEventListener("durationchange", onDurationChange);
     element.addEventListener("timeupdate", onTimeUpdateEvt);
+    element.addEventListener("ratechange", onRateChange);
     element.addEventListener("play", onPlay);
     element.addEventListener("playing", onPlaying);
     element.addEventListener("pause", onPause);
@@ -108,6 +110,7 @@ function useMediaTransport(options = {}) {
       element.removeEventListener("loadedmetadata", onLoadedMetadata);
       element.removeEventListener("durationchange", onDurationChange);
       element.removeEventListener("timeupdate", onTimeUpdateEvt);
+      element.removeEventListener("ratechange", onRateChange);
       element.removeEventListener("play", onPlay);
       element.removeEventListener("playing", onPlaying);
       element.removeEventListener("pause", onPause);
@@ -127,7 +130,8 @@ function useMediaTransport(options = {}) {
   const togglePlay = useCallback(() => {
     const el = elementRef.current;
     if (!el) return;
-    if (el.paused) void el.play();
+    if (el.paused) void el.play()?.catch(() => {
+    });
     else el.pause();
   }, []);
   const seekToMs = useCallback((timeMs) => {
@@ -171,5 +175,5 @@ function useMediaTransport(options = {}) {
 }
 
 export { useMediaTransport };
-//# sourceMappingURL=chunk-TUYWCUKH.js.map
-//# sourceMappingURL=chunk-TUYWCUKH.js.map
+//# sourceMappingURL=chunk-4LKAZW2W.js.map
+//# sourceMappingURL=chunk-4LKAZW2W.js.map

package/dist/chunk-4LKAZW2W.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/useMediaTransport.ts"],"names":[],"mappings":"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","file":"chunk-4LKAZW2W.js","sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport type MediaTransportState =\n  | 'idle'\n  | 'loading'\n  | 'playing'\n  | 'paused'\n  | 'error';\n\nexport interface UseMediaTransportOptions {\n  /** Fired on every native `timeupdate` and on metadata load, in milliseconds. */\n  onTimeUpdate?: (currentTimeMs: number, durationMs: number) => void;\n  /** Fired whenever the derived transport state changes. */\n  onStateChange?: (state: MediaTransportState) => void;\n  /** Fired when playback reaches the end. */\n  onEnded?: () => void;\n  /** Fired on a media error, with a descriptive Error. */\n  onError?: (error: Error) => void;\n  /** Initial playback rate (default `1`). Kept in sync with the element. */\n  initialRate?: number;\n  /** Transport state to enter when playback ends (default `'paused'`). */\n  endedState?: Extract<MediaTransportState, 'idle' | 'paused'>;\n  /** Reset the position to `0` when playback ends (default `false`). */\n  resetTimeOnEnd?: boolean;\n  /** Human-readable label used in the error message (default `'media'`). */\n  errorLabel?: string;\n}\n\nexport interface UseMediaTransportReturn {\n  /**\n   * Callback ref for the `<audio>`/`<video>` element to control. Pass this to\n   * the element's `ref` (or call it imperatively). Transport listeners attach\n   * when an element mounts and detach when it unmounts.\n   */\n  setMediaElement: (element: HTMLMediaElement | null) => void;\n  /** The currently attached media element, or `null`. */\n  mediaElement: HTMLMediaElement | null;\n\n  /** Derived transport state. */\n  state: MediaTransportState;\n  /** Current playback position in milliseconds. */\n  currentTimeMs: number;\n  /** Media duration in milliseconds (`0` until known / non-finite). */\n  durationMs: number;\n  /** Current playback rate. */\n  playbackRate: number;\n  /** `true` while `state === 'playing'`. */\n  isPlaying: boolean;\n  /** `true` while `state === 'loading'`. */\n  isLoading: boolean;\n\n  /** Start playback. */\n  play: () => void;\n  /** Pause playback. */\n  pause: () => void;\n  /** Toggle between play and pause. */\n  togglePlay: () => void;\n  /** Seek to a position in milliseconds. */\n  seekToMs: (timeMs: number) => void;\n  /** Set the playback rate multiplier. */\n  setPlaybackRate: (rate: number) => void;\n  /** Read the current position in milliseconds. */\n  getCurrentTimeMs: () => number;\n  /** Read the duration in milliseconds (`0` when unknown). */\n  getDurationMs: () => number;\n  /** Whether playback is currently paused (reads the element directly). */\n  isPaused: () => boolean;\n}\n\n// =============================================================================\n// Helpers\n// =============================================================================\n\nconst toMs = (seconds: number): number =>\n  Number.isFinite(seconds) ? seconds * 1000 : 0;\n\n// =============================================================================\n// Hook\n// =============================================================================\n\n/**\n * Headless playback transport for a native `HTMLMediaElement`.\n *\n * Owns the derived transport state (idle/loading/playing/paused/error),\n * position, duration and playback rate, and exposes imperative controls — all\n * in **milliseconds**. It never creates or renders an element: pass the\n * returned {@link UseMediaTransportReturn.setMediaElement} callback to an\n * `<audio>`/`<video>` `ref` and the hook wires the native listeners.\n *\n * Shared by `MediaPlayer` (ms API) and TranscriptPlayer's `usePlayback` (seconds,\n * converted at the boundary). The WaveSurfer waveform variant is\n * out of scope; this hook targets native media transport only.\n *\n * @example\n * ```tsx\n * function Player({ src }: { src: string }) {\n *   const t = useMediaTransport({ onEnded: () => console.log('done') });\n *   return (\n *     <div>\n *       <video ref={t.setMediaElement} src={src} controls />\n *       <button onClick={t.togglePlay}>{t.isPlaying ? 'Pause' : 'Play'}</button>\n *     </div>\n *   );\n * }\n * ```\n */\nexport function useMediaTransport(\n  options: UseMediaTransportOptions = {}\n): UseMediaTransportReturn {\n  const {\n    onTimeUpdate,\n    onStateChange,\n    onEnded,\n    onError,\n    initialRate = 1,\n    endedState = 'paused',\n    resetTimeOnEnd = false,\n    errorLabel = 'media',\n  } = options;\n\n  const [element, setElementState] = useState<HTMLMediaElement | null>(null);\n  const [state, setStateRaw] = useState<MediaTransportState>('idle');\n  const stateRef = useRef<MediaTransportState>('idle');\n  const [currentTimeMs, setCurrentTimeMs] = useState(0);\n  const [durationMs, setDurationMs] = useState(0);\n  const [playbackRate, setPlaybackRateState] = useState(initialRate);\n\n  const elementRef = useRef<HTMLMediaElement | null>(null);\n\n  // Keep the latest callbacks/options in a ref so the listener effect does not\n  // re-subscribe on every render when callers pass inline functions.\n  const handlers = useRef({\n    onTimeUpdate,\n    onStateChange,\n    onEnded,\n    onError,\n    endedState,\n    resetTimeOnEnd,\n    errorLabel,\n  });\n  handlers.current = {\n    onTimeUpdate,\n    onStateChange,\n    onEnded,\n    onError,\n    endedState,\n    resetTimeOnEnd,\n    errorLabel,\n  };\n\n  const setState = useCallback((next: MediaTransportState) => {\n    if (stateRef.current === next) return;\n    stateRef.current = next;\n    setStateRaw(next);\n    // Consumers often update parent state here. Keep that notification outside\n    // React's state updater, which may run during render or twice in StrictMode.\n    handlers.current.onStateChange?.(next);\n  }, []);\n\n  const setMediaElement = useCallback((el: HTMLMediaElement | null) => {\n    elementRef.current = el;\n    setElementState(el);\n  }, []);\n\n  // Attach native transport listeners whenever an element mounts.\n  useEffect(() => {\n    if (!element) {\n      // A detached element (e.g. the source was removed) leaves nothing playing or loaded;\n      // an error stays visible to hosts that swap the element for an error panel.\n      if (stateRef.current !== 'error') setState('idle');\n      setDurationMs(0);\n      setCurrentTimeMs(0);\n      return;\n    }\n\n    const emitTime = () => {\n      const ms = toMs(element.currentTime);\n      const dur = toMs(element.duration);\n      setCurrentTimeMs(ms);\n      handlers.current.onTimeUpdate?.(ms, dur);\n    };\n\n    const onLoadStart = () => setState('loading');\n    // canplay can also follow a seek mid-playback; only leave the loading state here.\n    const onCanPlay = () => {\n      if (stateRef.current === 'loading')\n        setState(element.paused ? 'idle' : 'playing');\n    };\n    const onLoadedMetadata = () => {\n      setDurationMs(toMs(element.duration));\n      emitTime();\n    };\n    // MediaRecorder webm often reports Infinity until the end is known.\n    const onDurationChange = () => setDurationMs(toMs(element.duration));\n    const onTimeUpdateEvt = () => emitTime();\n    // The speed can change outside these controls (iOS's own full screen player).\n    const onRateChange = () => setPlaybackRateState(element.playbackRate);\n    const onPlay = () => setState('playing');\n    const onPlaying = () => setState('playing');\n    const onPause = () => setState('paused');\n    const onEndedEvt = () => {\n      setState(handlers.current.endedState);\n      if (handlers.current.resetTimeOnEnd) {\n        element.currentTime = 0;\n        setCurrentTimeMs(0);\n      }\n      handlers.current.onEnded?.();\n    };\n    const onErrorEvt = () => {\n      setState('error');\n      handlers.current.onError?.(\n        new Error(`Failed to load ${handlers.current.errorLabel}`)\n      );\n    };\n\n    element.addEventListener('loadstart', onLoadStart);\n    element.addEventListener('canplay', onCanPlay);\n    element.addEventListener('loadedmetadata', onLoadedMetadata);\n    element.addEventListener('durationchange', onDurationChange);\n    element.addEventListener('timeupdate', onTimeUpdateEvt);\n    element.addEventListener('ratechange', onRateChange);\n    element.addEventListener('play', onPlay);\n    element.addEventListener('playing', onPlaying);\n    element.addEventListener('pause', onPause);\n    element.addEventListener('ended', onEndedEvt);\n    element.addEventListener('error', onErrorEvt);\n\n    // Sync on attach; a new element must not inherit the previous one's duration or play state.\n    setDurationMs(toMs(element.duration));\n    if (element.paused && stateRef.current === 'playing') setState('paused');\n    // e.g. a 404 that failed before hydration attached these listeners.\n    if (element.error) onErrorEvt();\n\n    return () => {\n      element.removeEventListener('loadstart', onLoadStart);\n      element.removeEventListener('canplay', onCanPlay);\n      element.removeEventListener('loadedmetadata', onLoadedMetadata);\n      element.removeEventListener('durationchange', onDurationChange);\n      element.removeEventListener('timeupdate', onTimeUpdateEvt);\n      element.removeEventListener('ratechange', onRateChange);\n      element.removeEventListener('play', onPlay);\n      element.removeEventListener('playing', onPlaying);\n      element.removeEventListener('pause', onPause);\n      element.removeEventListener('ended', onEndedEvt);\n      element.removeEventListener('error', onErrorEvt);\n    };\n  }, [element, setState]);\n\n  // Keep the element's playback rate in sync with hook state.\n  useEffect(() => {\n    if (element) element.playbackRate = playbackRate;\n  }, [element, playbackRate]);\n\n  const play = useCallback(() => {\n    void elementRef.current?.play();\n  }, []);\n\n  const pause = useCallback(() => {\n    elementRef.current?.pause();\n  }, []);\n\n  const togglePlay = useCallback(() => {\n    const el = elementRef.current;\n    if (!el) return;\n    // A refused start (autoplay policy) leaves it paused; nothing to report.\n    if (el.paused) void el.play()?.catch(() => {});\n    else el.pause();\n  }, []);\n\n  const seekToMs = useCallback((timeMs: number) => {\n    const el = elementRef.current;\n    if (el) {\n      el.currentTime = timeMs / 1000;\n      setCurrentTimeMs(timeMs);\n    }\n  }, []);\n\n  const setPlaybackRate = useCallback((rate: number) => {\n    setPlaybackRateState(rate);\n    if (elementRef.current) elementRef.current.playbackRate = rate;\n  }, []);\n\n  const getCurrentTimeMs = useCallback(\n    () => toMs(elementRef.current?.currentTime ?? 0),\n    []\n  );\n\n  const getDurationMs = useCallback(\n    () => toMs(elementRef.current?.duration ?? 0),\n    []\n  );\n\n  const isPaused = useCallback(() => elementRef.current?.paused ?? true, []);\n\n  return {\n    setMediaElement,\n    mediaElement: element,\n    state,\n    currentTimeMs,\n    durationMs,\n    playbackRate,\n    isPlaying: state === 'playing',\n    isLoading: state === 'loading',\n    play,\n    pause,\n    togglePlay,\n    seekToMs,\n    setPlaybackRate,\n    getCurrentTimeMs,\n    getDurationMs,\n    isPaused,\n  };\n}\n"]}

package/dist/{chunk-MNXIN4MS.js → chunk-5WA6IYZD.js}

@@ -87,6 +87,64 @@ var miewebUISafelist = [
   // MediaFeed vertical snapping, bounded captions, fullscreen viewport and
   // SuperChat attachment previews for consumers that do not scan package code.
   "h-[min(48rem,80dvh)]",
+  // MediaPlayer overlay controls and MediaFeed's overlay layout: scrims,
+  // round overlay buttons, pointer-aware sizes and the narrow-player
+  // container query and pointer variants (these need Tailwind 4.1).
+  "@container",
+  "w-fit",
+  // Previous/Next at the top end on a short screen (a phone held sideways).
+  "[@media(max-height:30rem)]:top-2",
+  "[@media(max-height:30rem)]:translate-y-0",
+  "via-black/30",
+  "pb-3",
+  "max-w-xl",
+  "px-14",
+  "dark:bg-white/30",
+  "@max-md:basis-full",
+  "@max-md:me-auto",
+  "@max-md:mx-2",
+  "@max-md:order-first",
+  "@max-xs:hidden",
+  "@max-xs:pt-2",
+  "[text-shadow:0_1px_2px_rgb(0_0_0/0.6)]",
+  "active:bg-black/75",
+  "backdrop-blur-sm",
+  "bg-black",
+  "bg-black/45",
+  "bg-gradient-to-b",
+  "dark:active:bg-black/75",
+  "dark:hover:bg-black/65",
+  "fill-current",
+  "focus-visible:-outline-offset-2",
+  "focus-visible:outline-2",
+  "focus-visible:outline-white/70",
+  "focus-visible:ring-offset-0",
+  "focus-visible:ring-white",
+  "from-black/75",
+  "from-black/55",
+  "via-black/55",
+  "gap-x-1",
+  "hover:bg-black/65",
+  "leading-5",
+  "mx-1",
+  "pb-10",
+  "pointer-coarse:[&_[data-slot=slider-track-wrapper]]:py-4",
+  "pointer-events-auto",
+  "pointer-fine:h-14",
+  "pointer-fine:h-9",
+  "pointer-fine:w-14",
+  "pointer-fine:w-9",
+  "sm:px-2",
+  "snap-always",
+  "via-black/40",
+  "[&_[data-slot=media-controls-bar]]:bg-none",
+  "[&_[data-slot=media-controls-bar]]:bg-black/55",
+  "pt-16",
+  "ring-white/70",
+  "self-stretch",
+  // MediaPlayer's box with the browser's controls: the video lays out as
+  // if it weren't there.
+  "contents",
   "h-dvh",
   "sm:h-[calc(100dvh-2rem)]",
   "max-h-[40%]",
@@ -1919,5 +1977,5 @@ var miewebUIPreset = {
 var tailwind_preset_default = miewebUIPreset;
 
 export { miewebUIPreset, miewebUISafelist, tailwind_preset_default };
-//# sourceMappingURL=chunk-MNXIN4MS.js.map
-//# sourceMappingURL=chunk-MNXIN4MS.js.map
+//# sourceMappingURL=chunk-5WA6IYZD.js.map
+//# sourceMappingURL=chunk-5WA6IYZD.js.map