Skip to content

Voice Widget (rows design)#414

Open
Devon-White wants to merge 4 commits into
mainfrom
devon/voice-widget
Open

Voice Widget (rows design)#414
Devon-White wants to merge 4 commits into
mainfrom
devon/voice-widget

Conversation

@Devon-White

Copy link
Copy Markdown
Collaborator

Summary

Ships the Voice Widget — a TTS voice browser embedded in the docs — in its rows design, as a single clean PR off main.

The widget was prototyped across a stack of three PRs in two competing layouts (cards vs. rows). The team picked rows, so this PR brings only the rows widget plus its self-contained stylesheet; all card-design code/CSS was dropped.

What's here

  • fern/components/voice-widget/ — the widget (index.tsx) rendering a bordered list of hairline-divided two-line rows (play-to-audition + copy-config), over a shared data/helper engine (engine.tsx) and types.ts. Styles in styles.css, scoped under .vw.vw-rows and following the docs' light/dark brand tokens. The loading state is a row-shaped skeleton built on the generic skeleton/ primitive.
  • Registered via docs.yml (experimental.mdx-components + css:).
  • Embedded on all 11 TTS pages — provider-locked on each provider page (<VoiceWidget provider="…" />), groupBy="none" on the TTS index. Includes the newer Inworld and MiniMax pages.

Supersedes

Replaces the earlier stacked PRs, which should be closed:

Verification

  • tsc --noEmit -p fern/components/tsconfig.json → clean
  • fern docs md check → all 2801 MDX files valid

A TTS voice browser embedded in the docs: a bordered list of two-line rows
(name over muted meta) with play-to-audition and copy-config, scoped under
.vw.vw-rows and following the docs' light/dark brand tokens.

- fern/components/voice-widget: the widget (index.tsx) over a shared data/helper
  engine (engine.tsx) + types; styles in styles.css. Loading state is a
  row-shaped skeleton built on the generic skeleton primitive.
- Registered via docs.yml experimental.mdx-components + css.
- Embedded on all 11 TTS pages (provider-locked on each provider page,
  groupBy="none" on the index).

Supersedes the earlier stacked PRs #392 (parent), #407 (card refinements), and
#409 (rows). The competing card design was dropped per the design decision to
ship the rows layout; only the rows widget and its self-contained stylesheet
remain.
@github-actions

github-actions Bot commented Jun 16, 2026

Copy link
Copy Markdown
Contributor

Bump react + @types/react to ^19. React 19's useRef types require an
explicit initial argument, so the copy-timer ref now passes undefined.
@Devon-White Devon-White mentioned this pull request Jun 16, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants