From 5d2004d9131a25a11e8bea75a2f43009b378e9e1 Mon Sep 17 00:00:00 2001
From: Devon-White <devon.white@signalwire.com>
Date: Sun, 14 Jun 2026 17:54:37 -0400
Subject: [PATCH 1/6] =?UTF-8?q?Voice=20widget:=20compact=20rows=20(Directi?=
 =?UTF-8?q?on=20B)=20=E2=80=94=20preview=20vs=20cards?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add a compact-ROWS preview of the TTS voice browser, a sibling to the
cards (Direction A) that reuses the cards' shared foundation rather than
forking it. New component fern/components/voice-widget-rows renders a
bordered, rounded list of hairline-divided two-line rows (ElevenLabs
voice-picker style): cleaned name + sample-text info tooltip over a muted
plain-middot meta line (language · gender · provider · model), 38px ghost
play button with equalizer when playing, labeled "Copy config".

Reuse mechanism: export the data layer + display-time helpers from
voice-widget/index.tsx (loadBundle/bundleCache, the Row type, cleanName,
friendlyLanguage, normalizeGender, normalizeModel, modelKeyOf, the
no-preview/allowlist/lock baseRows filtering inputs, plus the shared
Select/uniq/pageNumbers/useIsMobile and page-size constants) and import
them into the rows. The rows implement only the row rendering, the row
skeleton, and the thin filter/group/page orchestration glue.

- Model is the neutral inline-<code> (--code-bg + --fg-secondary, never
  --code-fg) so it doesn't read as the accent-colored Copy link.
- Provider always shown in the meta; the provider prop hides the provider
  filter + personalizes the title (reused foundation behavior).
- Skeleton rows in the same list container at matching row height (59px
  per row incl. divider) → verified zero layout shift; fade/rise-in and
  equalizer/shimmer reduced-motion-gated.
- Theming light+dark (accent flips blue↔turquoise, model stays neutral),
  list semantics (<ul role=list> → <li> → <article aria-label>), play/copy
  aria-labels, focusable aria-describedby tooltip, :focus-visible rings,
  AA-contrast muted labels via --fg-secondary, single-column mobile.
- Styles scoped under .vw.vw-rows and self-contained so they neither
  depend on nor collide with the cards' globally-loaded stylesheet.

Register VoiceWidgetRows in the components barrel + add its css to
docs.yml, and swap the TTS index + provider subpages to embed it (same
props) so the deployed preview shows the rows.
---
 fern/components/index.tsx                     |   1 +
 fern/components/voice-widget-rows/index.tsx   | 450 ++++++++++++++++++
 fern/components/voice-widget-rows/styles.css  | 215 +++++++++
 fern/components/voice-widget/index.tsx        |  34 +-
 fern/docs.yml                                 |   1 +
 .../pages/calling/voice/TTS/azure.mdx         |   4 +-
 .../pages/calling/voice/TTS/cartesia.mdx      |   4 +-
 .../pages/calling/voice/TTS/deepgram.mdx      |   4 +-
 .../pages/calling/voice/TTS/elevenlabs.mdx    |   4 +-
 .../pages/calling/voice/TTS/google.mdx        |   4 +-
 .../pages/calling/voice/TTS/index.mdx         |   4 +-
 .../pages/calling/voice/TTS/openai.mdx        |   4 +-
 .../pages/calling/voice/TTS/polly.mdx         |   4 +-
 .../platform/pages/calling/voice/TTS/rime.mdx |   4 +-
 14 files changed, 703 insertions(+), 34 deletions(-)
 create mode 100644 fern/components/voice-widget-rows/index.tsx
 create mode 100644 fern/components/voice-widget-rows/styles.css

diff --git a/fern/components/index.tsx b/fern/components/index.tsx
index 289efdaf69..4ddb224268 100644
--- a/fern/components/index.tsx
+++ b/fern/components/index.tsx
@@ -5,4 +5,5 @@
 // explicit `/index` file paths rather than bare directory paths. `export *` pulls in each
 // component's public surface (components + types) without enumerating them.
 export * from "./voice-widget/index";
+export * from "./voice-widget-rows/index";
 export * from "./skeleton/index";
diff --git a/fern/components/voice-widget-rows/index.tsx b/fern/components/voice-widget-rows/index.tsx
new file mode 100644
index 0000000000..551d093304
--- /dev/null
+++ b/fern/components/voice-widget-rows/index.tsx
@@ -0,0 +1,450 @@
+import { memo, useCallback, useDeferredValue, useEffect, useMemo, useRef, useState } from "react";
+import type { ReactNode } from "react";
+import type { VoiceRow } from "../voice-widget/types";
+import { Skeleton } from "../skeleton/index";
+import {
+  // Data layer + display-time helpers reused VERBATIM from the cards widget so the two previews
+  // stay behaviorally identical (no logic drift): same fetch/cache, name cleaning, friendly
+  // language, gender/model normalization, no-preview filtering, toolbar/pager UI, breakpoint.
+  ALL,
+  DEFAULT_PAGE_SIZE,
+  MOBILE_PAGE_SIZE,
+  PAGE_SIZE_OPTIONS,
+  Select,
+  cleanName,
+  friendlyLanguage,
+  loadBundle,
+  modelKeyOf,
+  normalizeGender,
+  normalizeModel,
+  pageNumbers,
+  uniq,
+  useIsMobile,
+} from "../voice-widget/index";
+import type { Row, VoiceWidgetProps } from "../voice-widget/index";
+
+// Compact-ROWS preview of the TTS voice browser — "Direction B", a sibling to the cards
+// (components/voice-widget). Modeled on the ElevenLabs voice picker: a bordered, rounded list of
+// hairline-divided two-line rows (cleaned name over muted plain-middot meta), play on the left and
+// a labeled "Copy config" on the right. It is a SEPARATE implementation that REUSES the cards
+// module's data/display logic (imported above) and the same `.vw-*` design tokens — it only adds the
+// row rendering + the row skeleton here. Same props surface as VoiceWidget so a page can swap one for
+// the other. Styles live in this folder's styles.css (loaded via docs.yml `css:`).
+
+const ASSET_BASE = "https://mcdn.signalwire.com/voice_widget/dist"; // catalog.json + manifest.json
+const AUDIO_BASE = "https://mcdn.signalwire.com";                   // /audio/<engine>/<voice_id>.mp3
+
+type FilterKey = "search" | "provider" | "language" | "gender" | "group" | "pageSize";
+
+// Same props as the cards (re-exported as an alias so pages can type either component identically).
+export type VoiceWidgetRowsProps = VoiceWidgetProps;
+
+export function VoiceWidgetRows({
+  assetBaseUrl = ASSET_BASE,
+  catalogUrl = `${assetBaseUrl}/catalog.json`,
+  manifestUrl = `${assetBaseUrl}/manifest.json`,
+  audioBaseUrl = AUDIO_BASE,
+  groupBy: initialGroup = "provider",
+  pageSize = DEFAULT_PAGE_SIZE,
+  provider: lockedProvider,
+  voiceIds,
+  filters,
+}: VoiceWidgetRowsProps) {
+  // Normalized single-provider lock (null when the widget shows all providers).
+  const lock = lockedProvider?.trim().toLowerCase() || null;
+  // Normalized voice-id allowlist (null when showing all voices). Sorted+joined into a stable key
+  // so the memoized Set below — and the filter that depends on it — don't churn each render.
+  const voiceIdsKey = voiceIds && voiceIds.length
+    ? voiceIds.map((s) => s.trim().toLowerCase()).filter(Boolean).sort().join("|")
+    : "";
+  const idAllowlist = useMemo(
+    () => (voiceIdsKey ? new Set(voiceIdsKey.split("|")) : null),
+    [voiceIdsKey]
+  );
+  const [allRows, setAllRows] = useState<Row[] | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [q, setQ] = useState("");
+  const [provider, setProvider] = useState(ALL);
+  const [language, setLanguage] = useState(ALL);
+  const [gender, setGender] = useState(ALL);
+  const [group, setGroup] = useState<"provider" | "language" | "none">(initialGroup);
+  const [page, setPage] = useState(0);
+  const [pageSizeChoice, setPageSizeChoice] = useState(pageSize);
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+  const [playingKey, setPlayingKey] = useState<string | null>(null);
+
+  // Defer the search term so typing stays responsive while the (cheap) filter recomputes.
+  const deferredQ = useDeferredValue(q);
+
+  // Rows are full-width single-column at every breakpoint, but the mobile page-size cap still
+  // applies — a 48-row list is an excessive scroll on a phone.
+  const isMobile = useIsMobile();
+  const effectivePageSize = isMobile ? Math.min(pageSizeChoice, MOBILE_PAGE_SIZE) : pageSizeChoice;
+  const pageSizeOpts = [...new Set([...PAGE_SIZE_OPTIONS, pageSize])].sort((a, b) => a - b);
+
+  // Resolve which filter/search controls are visible. `filters` is a boolean (all on/off) or a
+  // per-control object; each control defaults on unless explicitly false. The `search` control
+  // defaults to off (must be opted in) — all others default on. (Same rules as the cards.)
+  const showFilter = (key: FilterKey) =>
+    filters === false ? false
+    : filters && typeof filters === "object"
+      ? key === "search" ? filters[key] === true : filters[key] !== false
+    : key === "search" ? false : true;
+  const showProvider = !lock && showFilter("provider");
+  const showGroup = group !== "none" && showFilter("group") && !lock;
+
+  useEffect(() => {
+    let alive = true;
+    loadBundle(catalogUrl, manifestUrl)
+      .then((loaded) => { if (alive) setAllRows(loaded); })
+      .catch((e) => { if (alive) setError(String(e)); });
+    return () => { alive = false; };
+  }, [catalogUrl, manifestUrl]);
+
+  // Static narrowing: the allowlist (voiceIds) and provider lock can't change at runtime, so apply
+  // them once here. Also drops no-preview voices (missing/errored clip) so every visible row is
+  // auditionable. Identical to the cards' baseRows.
+  const baseRows = useMemo(() => {
+    if (!allRows) return null;
+    return allRows.filter((r) =>
+      r.clip?.status === "ok" &&
+      (!idAllowlist ||
+        idAllowlist.has(r.voice_id.toLowerCase()) ||
+        idAllowlist.has(r.key.toLowerCase()) ||
+        idAllowlist.has(modelKeyOf(r).toLowerCase()) ||
+        idAllowlist.has(r.display_name.toLowerCase())) &&
+      (!lock || r.provider.toLowerCase() === lock || r.engine.toLowerCase() === lock));
+  }, [allRows, idAllowlist, lock]);
+
+  // Dropdown options derive from the narrowed set, so a provider-locked page lists only that
+  // provider's languages.
+  const providers = useMemo(() => uniq(baseRows?.map((r) => r.provider)), [baseRows]);
+  const languages = useMemo(() => uniq(baseRows?.flatMap((r) => r.languages)), [baseRows]);
+
+  const filtered = useMemo(() => {
+    if (!baseRows) return [];
+    const needle = deferredQ.trim().toLowerCase();
+    return baseRows.filter((r) =>
+      (provider === ALL || r.provider === provider) &&
+      (language === ALL || r.languages.includes(language)) &&
+      (gender === ALL || r.gender === gender) &&
+      (!needle || r._search.includes(needle)));
+  }, [baseRows, deferredQ, provider, language, gender]);
+
+  // Flatten into grouped order once, and remember each group's full size for the section headers.
+  // group === "none" keeps the filtered order as-is, with no sections.
+  const { ordered, groupTotals } = useMemo(() => {
+    if (group === "none") return { ordered: filtered, groupTotals: new Map<string, number>() };
+    const m = new Map<string, Row[]>();
+    for (const r of filtered) {
+      const k = group === "provider" ? r.provider : r.primary_language;
+      (m.get(k) ?? m.set(k, []).get(k)!).push(r);
+    }
+    const entries = [...m.entries()].sort((a, b) => a[0].localeCompare(b[0]));
+    const ordered: Row[] = [];
+    const groupTotals = new Map<string, number>();
+    for (const [name, items] of entries) {
+      groupTotals.set(name, items.length);
+      for (const it of items) ordered.push(it);
+    }
+    return { ordered, groupTotals };
+  }, [filtered, group]);
+
+  // Reset to the first page whenever the result set changes — done during render (not in an effect)
+  // so there's no one-frame flash of the old page number.
+  const filterSig = `${voiceIdsKey}|${lock}|${deferredQ}|${provider}|${language}|${gender}|${group}|${pageSizeChoice}`;
+  const [lastSig, setLastSig] = useState(filterSig);
+  if (filterSig !== lastSig) {
+    setLastSig(filterSig);
+    if (page !== 0) setPage(0);
+  }
+
+  // Pagination math. Clamp the page so it stays valid even mid-transition.
+  const pageCount = Math.max(1, Math.ceil(ordered.length / effectivePageSize));
+  const safePage = Math.min(page, pageCount - 1);
+  const start = safePage * effectivePageSize;
+  const end = Math.min(start + effectivePageSize, ordered.length);
+
+  // Split the current page's slice into contiguous group sections. group === "none" → a single
+  // unlabeled section (flat list).
+  const pageSections = useMemo(() => {
+    const slice = ordered.slice(start, end);
+    if (group === "none") return slice.length ? [{ name: "", items: slice }] : [];
+    const secs: { name: string; items: Row[] }[] = [];
+    for (const r of slice) {
+      const k = group === "provider" ? r.provider : r.primary_language;
+      const last = secs[secs.length - 1];
+      if (last && last.name === k) last.items.push(r);
+      else secs.push({ name: k, items: [r] });
+    }
+    return secs;
+  }, [ordered, start, end, group]);
+
+  // Keep the latest playing key in a ref so play() can stay referentially stable (memoized rows).
+  const playingKeyRef = useRef<string | null>(null);
+  useEffect(() => { playingKeyRef.current = playingKey; }, [playingKey]);
+
+  const play = useCallback((r: Row) => {
+    if (!r.clip || r.clip.status !== "ok") return;
+    const a = audioRef.current!;
+    if (playingKeyRef.current === r._uid && !a.paused) {
+      a.pause();
+      playingKeyRef.current = null;
+      setPlayingKey(null);
+      return;
+    }
+    a.src = audioBaseUrl ? `${audioBaseUrl.replace(/\/$/, "")}/${r.clip.audio}` : r.clip.audio;
+    // Mark playing immediately (and synchronously in the ref), not when play() resolves: with
+    // preload="none" the clip downloads first, and during that window a second click must read this
+    // row as already playing so it pauses instead of restarting the download. The eager icon flip
+    // also gives the click immediate feedback while the clip loads.
+    playingKeyRef.current = r._uid;
+    setPlayingKey(r._uid);
+    a.play().catch(() => {
+      // Rejected (autoplay policy) or aborted by a newer click — only unwind if still current.
+      if (playingKeyRef.current !== r._uid) return;
+      playingKeyRef.current = null;
+      setPlayingKey(null);
+    });
+  }, [audioBaseUrl]);
+
+  const copyConfig = useCallback(async (r: VoiceRow) => {
+    const cfg: Record<string, unknown> = { engine: r.engine, voice: r.display_name };
+    if (r.model) cfg.params = { model: r.model };
+    try {
+      await navigator.clipboard.writeText(JSON.stringify(cfg));
+      return true;
+    } catch {
+      return false;
+    }
+  }, []);
+
+  if (error) return <div className="vw vw-error">Failed to load voices: {error}</div>;
+  if (!baseRows) return <VoiceRowsSkeleton pills={[showProvider, showFilter("language"), showFilter("gender")].filter(Boolean).length} />;
+
+  const pager = pageCount > 1 ? (
+    <nav className="vw-pager" aria-label="Voice pages">
+      <button className="vw-page vw-page-nav" onClick={() => setPage(Math.max(0, safePage - 1))} disabled={safePage <= 0}>
+        ‹ Prev
+      </button>
+      {pageNumbers(safePage, pageCount).map((p, i) =>
+        p === null ? (
+          <span key={`gap-${i}`} className="vw-page-gap" aria-hidden="true">…</span>
+        ) : (
+          <button key={p} className={`vw-page${p === safePage ? " vw-page-on" : ""}`}
+                  aria-current={p === safePage ? "page" : undefined}
+                  onClick={() => setPage(p)}>
+            {p + 1}
+          </button>
+        ))}
+      <button className="vw-page vw-page-nav" onClick={() => setPage(Math.min(pageCount - 1, safePage + 1))} disabled={safePage >= pageCount - 1}>
+        Next ›
+      </button>
+      {showFilter("pageSize") && (
+        <label className="vw-perpage">
+          <select aria-label="Voices per page" value={pageSizeChoice} onChange={(e) => setPageSizeChoice(Number(e.target.value))}>
+            {pageSizeOpts.map((n) => <option key={n} value={n}>{n} / page</option>)}
+          </select>
+        </label>
+      )}
+    </nav>
+  ) : null;
+
+  return (
+    <div className="vw vw-rows">
+      <audio ref={audioRef} onEnded={() => setPlayingKey(null)} preload="none" />
+      <header className="vw-head">
+        <div className="vw-title">
+          {lock && baseRows[0] ? `${baseRows[0].provider} voices` : "TTS Voices"}
+          <span className="vw-count">
+            {baseRows.length.toLocaleString()} {baseRows.length === 1 ? "voice" : "voices"}
+            {filtered.length !== baseRows.length && <> · {filtered.length.toLocaleString()} matching</>}
+          </span>
+        </div>
+      </header>
+
+      {(showFilter("search") || showProvider || showFilter("language") || showFilter("gender") || showGroup) && (
+        <div className="vw-filters">
+          {showProvider && <Select label="Provider" value={provider} onChange={setProvider} opts={providers} />}
+          {showFilter("language") && <Select label="Language" value={language} onChange={setLanguage} opts={languages} />}
+          {showFilter("gender") && (
+            <Select label="Gender" value={gender} onChange={setGender}
+                    opts={["male", "female", "neutral", "unknown"]} />
+          )}
+          {showFilter("search") && (
+            <input className="vw-search" placeholder="Search voices…" value={q}
+                   onChange={(e) => setQ(e.target.value)} />
+          )}
+          {showGroup && (
+            <div className="vw-group" role="group" aria-label="Group voices">
+              <button className={group === "provider" ? "on" : ""} aria-pressed={group === "provider"}
+                      onClick={() => setGroup("provider")}>By provider</button>
+              <button className={group === "language" ? "on" : ""} aria-pressed={group === "language"}
+                      onClick={() => setGroup("language")}>By language</button>
+            </div>
+          )}
+        </div>
+      )}
+
+      {pageSections.length === 0 ? (
+        <p className="vw-empty">No voices match your filters.</p>
+      ) : (
+        pageSections.map((sec, i) => (
+          <section key={`${sec.name}-${i}`} className="vw-rsection">
+            {sec.name && <h3 className="vw-section-title">{sec.name} <span>{groupTotals.get(sec.name)}</span></h3>}
+            {/* The bordered, rounded list container. A real <ul> so screen readers announce it as a
+                list of N voices; each row is a <li>/<article aria-label={name}>. Fades/rises in once
+                loaded (reduced-motion-gated in CSS). */}
+            <FadeList>
+              {sec.items.map((r) => (
+                <VoiceRowItem key={r._uid} r={r} playing={playingKey === r._uid} onPlay={play} onCopy={copyConfig} />
+              ))}
+            </FadeList>
+          </section>
+        ))
+      )}
+
+      {pager}
+    </div>
+  );
+}
+
+// The loaded list, fading/rising into the slot the skeleton list held (no hard swap; reduced-motion-
+// gated in CSS). Mirrors the cards' FadeGrid: the `vw-fadein` animation makes the list a stacking
+// context permanently (animation-fill-mode), which would trap a first row's sample-text popover
+// below the sticky toolbar — so drop the class once the animation ends to restore z-index:auto.
+function FadeList({ children }: { children: ReactNode }) {
+  const [animating, setAnimating] = useState(true);
+  return (
+    <ul className={`vw-list${animating ? " vw-fadein" : ""}`} role="list"
+        onAnimationEnd={() => setAnimating(false)}>
+      {children}
+    </ul>
+  );
+}
+
+// Inline SVG icons with the shared `vw-` styling hooks (Fern's <Icon>/<Tooltip> aren't importable in
+// custom TSX — see the cards module header). Same glyphs as the cards' info/copy icons.
+const IconInfo = () => (
+  <svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><circle cx="8" cy="8" r="7" stroke="currentColor" strokeWidth="1.4" /><path d="M8 7v4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" /><circle cx="8" cy="5" r="0.8" fill="currentColor" /></svg>
+);
+const IconCopy = () => (
+  <svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><rect x="5" y="5" width="8" height="9" rx="1.5" stroke="currentColor" strokeWidth="1.4" /><path d="M11 5V3.5A1.5 1.5 0 0 0 9.5 2H4a1.5 1.5 0 0 0-1.5 1.5V11A1.5 1.5 0 0 0 4 12.5" stroke="currentColor" strokeWidth="1.4" /></svg>
+);
+
+// Memoized so playing/pausing a voice (which re-renders the widget) only re-renders the two rows
+// whose `playing` flag actually changed — not the whole page of rows.
+const VoiceRowItem = memo(function VoiceRowItem({ r, playing, onPlay, onCopy }: {
+  r: Row; playing: boolean; onPlay: (r: Row) => void; onCopy: (r: VoiceRow) => Promise<boolean> | void;
+}) {
+  const [copied, setCopied] = useState(false);
+  const copyTimer = useRef<ReturnType<typeof setTimeout>>();
+  useEffect(() => () => clearTimeout(copyTimer.current), []);
+
+  const handleCopy = () => {
+    Promise.resolve(onCopy(r)).then((ok) => {
+      if (ok === false) return; // clipboard unavailable — leave the button unchanged
+      setCopied(true);
+      clearTimeout(copyTimer.current);
+      copyTimer.current = setTimeout(() => setCopied(false), 1500);
+    });
+  };
+
+  // Display-time cleanup (originals stay in the catalog, the copy payload, and the title/tooltip).
+  const name = cleanName(r.display_name);
+  const language = friendlyLanguage(r.primary_language);
+  const gender = normalizeGender(r.gender);
+  const model = r.model ? normalizeModel(r.engine, r.model) : null;
+  const tipId = `vwr-tip-${r._uid}`;
+
+  return (
+    // Each row is a list item with an accessible name so SR users navigate the list as named voices.
+    <li className="vw-row">
+      <article className="vw-row-inner" aria-label={name}>
+        <button className={`vw-play${playing ? " vw-playing" : ""}`} onClick={() => onPlay(r)}
+                aria-label={playing ? `Stop ${name}` : `Play ${name}`}>
+          {playing ? (
+            <>
+              {/* Animated bars normally; a static stop square under prefers-reduced-motion (CSS swap). */}
+              <span className="vw-eq" aria-hidden="true"><i /><i /><i /></span>
+              <span className="vw-stop" aria-hidden="true">■</span>
+            </>
+          ) : "▶"}
+        </button>
+
+        {/* Name + meta block — min-width:0 so the name/meta can ellipsize instead of widening the row. */}
+        <div className="vw-row-mid">
+          <div className="vw-row-nm">
+            {/* Cleaned name; the full original stays in title= (and the tooltip below). */}
+            <span className="vw-name" title={r.display_name}>{name}</span>
+            {r.clip?.sample_text && (
+              // Icon-anchored sample-text popover. Focusable trigger + aria-describedby so the sample
+              // is announced (not just shown on hover); reveal is hover/focus-within (see CSS).
+              <span className="vw-tooltip-wrap" tabIndex={0} aria-describedby={tipId}>
+                <span className="vw-tooltip-icon"><IconInfo /></span>
+                <span className="vw-tooltip" id={tipId} role="tooltip">“{r.clip.sample_text}”</span>
+              </span>
+            )}
+          </div>
+          {/* Meta — muted plain-middot: language · gender · provider · model. No type icons (density).
+              "unknown" gender is hidden. Provider is ALWAYS shown. Model is the neutral inline-code.
+              The whole line truncates with ellipsis; never wraps (keeps row height uniform). */}
+          <div className="vw-row-meta">
+            <span>{language}</span>
+            {gender && <><span className="vw-dot" aria-hidden="true">·</span><span className="vw-gender">{gender}</span></>}
+            <span className="vw-dot" aria-hidden="true">·</span>
+            <span className="vw-prov" title={r.provider}>{r.provider}</span>
+            {model && <>
+              <span className="vw-dot" aria-hidden="true">·</span>
+              <code className="vw-model" title={r.model!}>{model}</code>
+            </>}
+          </div>
+        </div>
+
+        {/* Copy — always labeled (rows have the horizontal room; no icon-only variant). Copied →
+            "✓ Copied" in --status-success. Payload identical to the cards. */}
+        <button className={`vw-copy-t${copied ? " vw-copied" : ""}`} onClick={handleCopy} aria-live="polite">
+          <IconCopy />{copied ? "✓ Copied" : "Copy config"}
+        </button>
+      </article>
+    </li>
+  );
+});
+
+// Loading state: skeleton ROWS in the SAME list container at MATCHING row height (zero layout shift).
+// A skeleton row mirrors the real one — play circle + a name bar + a shorter meta bar + a copy bar.
+// The real row's two text lines (name + meta) carry a 2px gap, so the skeleton stacks its name/meta
+// bars with the same rhythm; the row's vertical padding (CSS) is shared by both so heights match.
+// `pills` is the number of toolbar pill placeholders — pass the count of controls that actually
+// render so a filters-off embed gets no phantom toolbar.
+function VoiceRowsSkeleton({ pills = 3 }: { pills?: number }) {
+  return (
+    <div className="vw vw-rows" aria-busy="true" aria-label="Loading voices">
+      <header className="vw-head">
+        <Skeleton width={120} height={22} />
+        <Skeleton width={90} height={13} />
+      </header>
+      {pills > 0 && (
+        <div className="vw-filters">
+          {Array.from({ length: pills }).map((_, i) => (
+            <Skeleton key={i} width={112} height={33} radius={9} />
+          ))}
+        </div>
+      )}
+      <ul className="vw-list" role="list">
+        {Array.from({ length: 8 }).map((_, i) => (
+          <li key={i} className="vw-row">
+            <div className="vw-row-inner">
+              <Skeleton width={38} height={38} radius="50%" />
+              <div className="vw-row-mid">
+                <Skeleton width="34%" height={14} />
+                <Skeleton width="62%" height={11} style={{ marginTop: 6 }} />
+              </div>
+              <Skeleton width={86} height={13} />
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
diff --git a/fern/components/voice-widget-rows/styles.css b/fern/components/voice-widget-rows/styles.css
new file mode 100644
index 0000000000..4319620bed
--- /dev/null
+++ b/fern/components/voice-widget-rows/styles.css
@@ -0,0 +1,215 @@
+/* Voice widget — COMPACT ROWS (Direction B). A sibling to the cards (components/voice-widget); this
+   file styles only the rows. Ported from the design mockups in
+   docs/superpowers/specs/2026-06-14-voice-widget-rows-assets/ (vw-rows-theme.html / vw-rows.html /
+   vw-rows-skeleton.html), with their hardcoded hex mapped to the docs' theme-aware brand tokens
+   (fern/brand-tokens.css) so the rows follow light/dark automatically — exactly the cards' token
+   approach:
+     mockup --page → --bg-page     --surface/--card → --bg-surface-raised   --ink → --fg-default
+     --meta/--ink2/--codefg → --fg-secondary   --muted → --fg-muted   --line → --border-default
+     --line2 → --grayscale-a4 (lighter hairline)   --hover → --table-row-hover
+     --accent → --accent   --accon → --accent-contrast   --codebg → --code-bg   --good → --status-success
+
+   Self-contained and scoped under .vw.vw-rows so it neither depends on nor collides with the cards'
+   stylesheet (both are loaded globally via docs.yml). The model code is deliberately NEUTRAL
+   (--fg-secondary), NOT --code-fg: the docs inline-<code> --code-fg equals --accent in both themes
+   (blue/turquoise), so a default <code> would render the model the same color as Copy and read as
+   clickable. Shared `.vw-*` rules (head, toolbar pills, group toggle, pager, focus rings, tooltip)
+   are duplicated here scoped to .vw-rows so order/load of the cards CSS never matters. */
+.vw.vw-rows {
+  --vw-bg: var(--bg-page);
+  --vw-card: var(--bg-surface-raised);
+  --vw-line: var(--border-default);
+  /* Lighter than the container border — used only for the row dividers. Grayscale alpha so it stays
+     subtle on both the light (#E8EAF0) and dark (#222436) surfaces. */
+  --vw-line2: var(--grayscale-a4);
+  --vw-fg: var(--fg-default);
+  --vw-fg2: var(--fg-secondary);
+  --vw-muted: var(--fg-muted);
+  --vw-accent: var(--accent);
+  color: var(--vw-fg); font: 14px/1.45 system-ui, sans-serif;
+}
+.vw.vw-rows.vw-error { padding: 2rem; color: var(--error-text); }
+
+/* ── Header (title + live count) ─────────────────────────────────────────────────────────────── */
+.vw-rows .vw-head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: .6rem; }
+.vw-rows .vw-title { font-size: 1.1rem; font-weight: 700; }
+/* --fg-secondary (not --fg-muted): small text, --fg-muted (#737371) is only ~3.95:1 on the light
+   surface — below the AA 4.5:1 floor. */
+.vw-rows .vw-count { color: var(--vw-fg2); font-weight: 400; font-size: .82rem; margin-left: .4rem; }
+
+/* ── Toolbar: pill controls; sticks below the fixed docs header while the list scrolls. ────────── */
+.vw-rows .vw-filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem;
+  position: sticky; top: var(--header-height, 0px); background: var(--vw-bg); padding: .5rem 0; z-index: 2; }
+.vw-rows .vw-select { display: flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--vw-muted);
+  background: var(--vw-card); border: 1px solid var(--vw-line); border-radius: 9px; padding: .4rem .7rem; }
+.vw-rows .vw-select select { border: none; background: transparent; color: var(--vw-fg); font-weight: 600;
+  font-size: .8rem; padding: 0; cursor: pointer; }
+/* Chromium derives the option popup's colors from the select's computed background — transparent
+   would yield a white popup with near-white text in dark mode, so pin both explicitly. */
+.vw-rows .vw-select option { background: var(--vw-card); color: var(--vw-fg); }
+.vw-rows .vw-search { padding: .4rem .7rem; min-width: 200px; background: var(--vw-card);
+  border: 1px solid var(--vw-line); border-radius: 9px; color: inherit; font-size: .8rem; }
+
+/* Group toggle as a segmented control: gray track, raised active segment. */
+.vw-rows .vw-group { display: flex; margin-left: auto; background: var(--grayscale-a3); border-radius: 9px; padding: 2px; }
+.vw-rows .vw-group button { padding: .35rem .7rem; background: transparent; color: var(--vw-muted); border: none;
+  border-radius: 7px; cursor: pointer; font-size: .78rem; }
+.vw-rows .vw-group button.on { background: var(--vw-card); color: var(--vw-fg); font-weight: 600;
+  box-shadow: 0 1px 3px rgba(0,0,0,.12); }
+
+/* Section header between row-groups when grouping by provider/language. */
+.vw-rows .vw-rsection { margin-bottom: 1.25rem; }
+.vw-rows .vw-section-title { font-size: .85rem; font-weight: 650; margin: .5rem 0 .55rem; text-transform: capitalize; }
+.vw-rows .vw-section-title span { color: var(--vw-muted); font-weight: 400; margin-left: .3rem; }
+
+/* ── The list: bordered, rounded container that lifts off the page (like the card). ───────────── */
+.vw-rows .vw-list { list-style: none; margin: 0; padding: 0;
+  border: 1px solid var(--vw-line); border-radius: 14px; overflow: hidden; background: var(--vw-card);
+  box-shadow: var(--card-shadow), var(--card-inset); }
+
+/* Row: hairline-divided, full-width, uniform height; subtle background on hover. The inner <article>
+   carries the flex layout + the per-row accessible name. overflow:visible on the row so the sample-
+   text popover can escape upward. */
+.vw-rows .vw-row { border-bottom: 1px solid var(--vw-line2); transition: background .12s ease; }
+.vw-rows .vw-row:last-child { border-bottom: none; }
+.vw-rows .vw-row:hover { background: var(--table-row-hover); }
+.vw-rows .vw-row:focus-within { background: var(--table-row-hover); }
+.vw-rows .vw-row-inner { display: flex; align-items: center; gap: 13px; padding: 10px 15px;
+  min-height: 58px; position: relative; }
+/* While a row is hovered/focused (the only states its popover opens), lift it above the sticky
+   toolbar (z-index:2) so a first-row popover isn't painted over. Scoped to hover/focus so it never
+   affects layout. */
+.vw-rows .vw-row:hover, .vw-rows .vw-row:focus-within { position: relative; z-index: 3; }
+
+/* Ghost play button: 38px outline circle at rest; fills with the accent + equalizer while playing. */
+.vw-rows .vw-play { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; cursor: pointer;
+  background: transparent; color: var(--vw-fg); border: 1.5px solid var(--vw-line); font-size: 11px;
+  display: inline-flex; align-items: center; justify-content: center;
+  transition: background .15s ease, border-color .15s ease, color .15s ease; }
+.vw-rows .vw-play:hover:not(.vw-playing) { border-color: var(--vw-accent); color: var(--vw-accent); }
+.vw-rows .vw-play.vw-playing { background: var(--vw-accent); border-color: var(--vw-accent); color: var(--accent-contrast); }
+
+/* Equalizer bars while playing; .vw-stop is the reduced-motion fallback (swapped in below). */
+.vw-rows .vw-eq { display: inline-flex; gap: 2.5px; align-items: flex-end; height: 12px; }
+.vw-rows .vw-eq i { width: 2.5px; background: currentColor; border-radius: 1px; transform-origin: 50% 100%;
+  animation: vw-eqb 1s ease-in-out infinite; }
+.vw-rows .vw-eq i:nth-child(1) { height: 60%; }
+.vw-rows .vw-eq i:nth-child(2) { height: 100%; animation-delay: .2s; }
+.vw-rows .vw-eq i:nth-child(3) { height: 45%; animation-delay: .4s; }
+@keyframes vw-eqb { 0%, 100% { transform: scaleY(.5); } 50% { transform: scaleY(1); } }
+.vw-rows .vw-stop { display: none; }
+
+/* Name + meta block — min-width:0 so the name/meta ellipsize instead of widening the row. The two
+   lines carry FIXED line-heights (18px + 16px + the 2px gap = 36px) so the block is shorter than the
+   38px play circle: the play circle is then the tallest cell in every row, which (with the row's
+   min-height:58px and 10px top/bottom padding → 58px) keeps every loaded row EXACTLY the same height
+   as a skeleton row (whose 38px play placeholder is likewise the tallest) → zero layout shift. */
+.vw-rows .vw-row-mid { flex: 1; min-width: 0; }
+.vw-rows .vw-row-nm { display: flex; align-items: center; gap: 6px; min-width: 0; }
+/* Name: cleaned display name, single line, ellipsis if absurdly long (cleaned names fit). The full
+   original lives in title=/the icon tooltip. The display:block + word-break/line-clamp resets
+   override the cards' bare `.vw-name` (which sets -webkit-box + -webkit-line-clamp:2 for the cards'
+   2-line wrap; it also matches here because the rows root carries the `vw` class) so the row name
+   stays strictly single-line with a tail ellipsis. */
+.vw-rows .vw-name { display: block; flex: 0 1 auto; font-weight: 650; font-size: 14.5px; line-height: 18px;
+  letter-spacing: -.01em; color: var(--vw-fg); white-space: nowrap; word-break: normal;
+  -webkit-line-clamp: none; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+
+/* Meta — muted plain-middot: language · gender · provider · model. Single line; truncates with
+   ellipsis (never wraps → uniform row height). */
+.vw-rows .vw-row-meta { display: flex; align-items: center; gap: 6px; margin-top: 2px;
+  font-size: 12px; line-height: 16px; color: var(--vw-fg2);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.vw-rows .vw-row-meta > span { flex: 0 0 auto; }
+.vw-rows .vw-dot { opacity: .5; }
+.vw-rows .vw-gender { text-transform: capitalize; }
+/* Provider in the meta is plain text (NOT the uppercase chip the cards use in their footer) — it
+   reads as one of the middot-separated meta facts. The text-transform/letter-spacing/font-* resets
+   override the cards' bare `.vw-prov` rule (loaded globally; it also matches because the rows root
+   carries the `vw` class). Shrink-safe so a long provider truncates. */
+.vw-rows .vw-prov { min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto;
+  text-transform: none; letter-spacing: normal; font-size: inherit; font-weight: inherit;
+  color: inherit; white-space: nowrap; }
+/* Model: the real (normalized) model as NEUTRAL inline-code — mono + --code-bg + --fg-secondary fg
+   (NOT --code-fg, which equals --accent and would read as clickable). Single-line; ellipsizes at the
+   tail if unusually long; the raw model stays in title=/copy. */
+.vw-rows .vw-model { font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--vw-fg2);
+  background: var(--code-bg); border-radius: 5px; padding: 1px 6px;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
+
+/* Sample-text popover: a fixed-width (220px), icon-anchored disclosure. Revealed on hover/focus-
+   within; the trigger carries aria-describedby → .vw-tooltip. */
+.vw-rows .vw-tooltip-wrap { flex: 0 0 auto; position: relative; display: inline-flex; align-items: center;
+  color: var(--vw-muted); cursor: help; transition: color .15s ease; }
+.vw-rows .vw-tooltip-wrap:hover, .vw-rows .vw-tooltip-wrap:focus-within { color: var(--vw-accent); }
+.vw-rows .vw-tooltip-icon { display: inline-flex; opacity: .75; }
+.vw-rows .vw-tooltip-wrap:hover .vw-tooltip-icon,
+.vw-rows .vw-tooltip-wrap:focus-within .vw-tooltip-icon { opacity: 1; }
+.vw-rows .vw-tooltip-icon svg { width: 14px; height: 14px; }
+.vw-rows .vw-tooltip { display: none; position: absolute; bottom: calc(100% + 9px); left: -8px; width: 220px;
+  background: var(--vw-card); color: var(--vw-fg2);
+  border: 1px solid var(--vw-line); border-radius: 9px; padding: 8px 11px;
+  font-size: 11.5px; font-style: italic; line-height: 1.45;
+  box-shadow: var(--card-hover-shadow); z-index: 30; pointer-events: none; white-space: normal; }
+.vw-rows .vw-tooltip::after { content: ""; position: absolute; top: 100%; left: 14px;
+  border: 6px solid transparent; border-top-color: var(--vw-card); }
+.vw-rows .vw-tooltip-wrap:hover .vw-tooltip,
+.vw-rows .vw-tooltip-wrap:focus-within .vw-tooltip { display: block; }
+
+/* Copy — always labeled (rows have the room; no icon-only variant). Copied → --status-success. */
+.vw-rows .vw-copy-t { flex: 0 0 auto; font-size: 12.5px; color: var(--vw-accent); background: none; border: none;
+  font-weight: 600; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 0;
+  white-space: nowrap; }
+.vw-rows .vw-copy-t svg { width: 13px; height: 13px; }
+.vw-rows .vw-copy-t.vw-copied { color: var(--status-success); }
+
+/* Smooth resolve: the loaded list fades/rises into the slot the skeleton list held. Reduced-motion-
+   gated below. */
+.vw-rows .vw-list.vw-fadein { animation: vw-in .45s cubic-bezier(.2,.7,.2,1) both; }
+@keyframes vw-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
+
+/* Numbered pager: ghost number buttons, inverted current page, bordered Prev/Next. */
+.vw-rows .vw-pager { display: flex; align-items: center; justify-content: center; gap: .3rem;
+  margin: 1.1rem 0 .25rem; flex-wrap: wrap; }
+.vw-rows .vw-page { min-width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
+  padding: 0 .35rem; border-radius: 8px; font-size: .8rem; color: var(--vw-fg); background: transparent;
+  border: 1px solid transparent; cursor: pointer; }
+.vw-rows .vw-page:hover:not(:disabled):not(.vw-page-on) { border-color: var(--vw-line); }
+.vw-rows .vw-page-on { background: var(--vw-fg); color: var(--vw-bg); font-weight: 600; }
+.vw-rows .vw-page-nav { border-color: var(--vw-line); background: var(--vw-card); padding: 0 .65rem; }
+.vw-rows .vw-page-nav:hover:not(:disabled) { border-color: var(--vw-accent); color: var(--vw-accent); }
+.vw-rows .vw-page-nav:disabled { opacity: .45; cursor: not-allowed; }
+.vw-rows .vw-page-gap { color: var(--vw-muted); padding: 0 .2rem; }
+.vw-rows .vw-perpage { margin-left: .6rem; }
+.vw-rows .vw-perpage select { font-size: .75rem; color: var(--vw-muted); background: transparent;
+  border: none; cursor: pointer; }
+.vw-rows .vw-perpage option { background: var(--vw-card); color: var(--vw-fg); }
+.vw-rows .vw-empty { padding: 2rem 0; color: var(--vw-fg2); font-size: .9rem; }
+
+/* Reduced motion: static stop glyph instead of animated bars, no transitions, no fade-in. (The
+   shimmer primitive disables its own animation in components/skeleton/styles.css.) */
+@media (prefers-reduced-motion: reduce) {
+  .vw-rows .vw-eq { display: none; }
+  .vw-rows .vw-stop { display: inline; }
+  .vw-rows .vw-row, .vw-rows .vw-play, .vw-rows .vw-tooltip-wrap { transition: none; }
+  .vw-rows .vw-list.vw-fadein { animation: none; }
+}
+
+/* Visible focus rings on every interactive control, both themes (2px accent outline + offset). */
+.vw-rows .vw-play:focus-visible, .vw-rows .vw-copy-t:focus-visible,
+.vw-rows .vw-tooltip-wrap:focus-visible, .vw-rows .vw-page:focus-visible,
+.vw-rows .vw-select select:focus-visible, .vw-rows .vw-search:focus-visible,
+.vw-rows .vw-group button:focus-visible, .vw-rows .vw-perpage select:focus-visible {
+  outline: 2px solid var(--vw-accent); outline-offset: 2px; border-radius: 8px;
+}
+.vw-rows .vw-play:focus-visible { border-radius: 50%; }
+
+/* Mobile: rows stay single-column full-width; the name+meta block shrinks (meta truncates). Copy
+   stays labeled (it fits). */
+@media (max-width: 640px) {
+  .vw-rows .vw-filters { gap: .4rem; }
+  .vw-rows .vw-search { min-width: 0; flex: 1; }
+  .vw-rows .vw-group { margin-left: 0; }
+  .vw-rows .vw-perpage { margin-left: 0; }
+  .vw-rows .vw-row-inner { gap: 11px; padding: 10px 13px; }
+}
diff --git a/fern/components/voice-widget/index.tsx b/fern/components/voice-widget/index.tsx
index eb46767aa6..d29b4acae5 100644
--- a/fern/components/voice-widget/index.tsx
+++ b/fern/components/voice-widget/index.tsx
@@ -21,12 +21,15 @@ import { Skeleton } from "../skeleton/index";
 const ASSET_BASE = "https://mcdn.signalwire.com/voice_widget/dist"; // catalog.json + manifest.json
 const AUDIO_BASE = "https://mcdn.signalwire.com";                   // /audio/<engine>/<voice_id>.mp3
 
-const ALL = "__all__";
-const DEFAULT_PAGE_SIZE = 48;
-const MOBILE_PAGE_SIZE = 12;
+// Exported (with the helpers/sub-components/types below) so the sibling rows preview
+// (components/voice-widget-rows) reuses this module's data layer and display logic verbatim instead
+// of forking it — keeping the two previews' behavior identical. See that file's header.
+export const ALL = "__all__";
+export const DEFAULT_PAGE_SIZE = 48;
+export const MOBILE_PAGE_SIZE = 12;
 const MOBILE_QUERY = "(max-width: 640px)";
 // Multiples of the max column count (4) so every page fills complete rows; 4 = a single row.
-const PAGE_SIZE_OPTIONS = [4, 8, 12, 24, 48, 96];
+export const PAGE_SIZE_OPTIONS = [4, 8, 12, 24, 48, 96];
 
 // ── Display-time data cleanup ────────────────────────────────────────────────────────────────
 // These three helpers normalize the raw catalog values for display only — the underlying data,
@@ -41,7 +44,7 @@ const PAGE_SIZE_OPTIONS = [4, 8, 12, 24, 48, 96];
 // Cartesia (535), 0 false positives — Google/Polly/Azure names use spaceless hyphens
 // ("ar-XA-Chirp3-HD-Achernar", "Joanna-Neural") and are never touched. The full original stays in
 // title=/the icon tooltip. Pipeline home: providers/{elevenlabs,cartesia}.py make_voice().
-function cleanName(displayName: string): string {
+export function cleanName(displayName: string): string {
   const m = displayName.match(/\s[-–—]\s/);
   if (!m || m.index === undefined) return displayName;
   const lead = displayName.slice(0, m.index).trim();
@@ -51,7 +54,7 @@ function cleanName(displayName: string): string {
 
 // Friendly language: turn a BCP-47 code ("af-ZA", "el") into an English name via Intl.DisplayNames
 // (resolves ~99% of real codes); fall back to the raw code on any miss/throw.
-function friendlyLanguage(code: string): string {
+export function friendlyLanguage(code: string): string {
   if (!code) return code;
   try {
     return new Intl.DisplayNames(["en"], { type: "language" }).of(code) || code;
@@ -62,7 +65,7 @@ function friendlyLanguage(code: string): string {
 
 // Normalize gender: the catalog mixes "feminine"/"masculine" with "male"/"female"; map to the
 // display forms and HIDE "unknown" (599 voices) rather than render "Unknown". Returns "" to hide.
-function normalizeGender(gender: string): string {
+export function normalizeGender(gender: string): string {
   switch (gender) {
     case "feminine": case "female": return "Female";
     case "masculine": case "male": return "Male";
@@ -73,22 +76,21 @@ function normalizeGender(gender: string): string {
   }
 }
 
-
 type FilterKey = "search" | "provider" | "language" | "gender" | "group" | "pageSize";
 
 // Client-side row: a catalog voice joined with its clip, plus two precomputed fields — `_search`,
 // a lowercased blob so the per-keystroke filter runs one substring test per row instead of
 // re-lowercasing 4–5 fields, and `_uid`, a collision-free identity for React keys and play state
 // (assigned in loadBundle; the catalog's key+model is not unique on its own).
-type Row = VoiceRow & { _search: string; _uid: string };
+export type Row = VoiceRow & { _search: string; _uid: string };
 
 // The asset bundle (catalog.json + manifest.json) is one large artifact (~5 MB, ~4.9k voices)
 // shared by every TTS page that embeds the widget. Cache the parsed+joined rows per URL pair so
 // navigating across the index and the provider pages fetches and parses it once per session, not
 // once per mount. Each embed then narrows this shared set down to the voices it shows (see baseRows).
-const bundleCache = new Map<string, Promise<Row[]>>();
+export const bundleCache = new Map<string, Promise<Row[]>>();
 
-function loadBundle(catalogUrl: string, manifestUrl: string): Promise<Row[]> {
+export function loadBundle(catalogUrl: string, manifestUrl: string): Promise<Row[]> {
   const cacheKey = `${catalogUrl}\n${manifestUrl}`;
   let cached = bundleCache.get(cacheKey);
   if (!cached) {
@@ -128,7 +130,7 @@ function loadBundle(catalogUrl: string, manifestUrl: string): Promise<Row[]> {
 }
 
 // Tracks whether the viewport is in the mobile breakpoint (matches the CSS media query below).
-function useIsMobile() {
+export function useIsMobile() {
   const [mobile, setMobile] = useState(false);
   useEffect(() => {
     if (typeof window === "undefined" || !window.matchMedia) return;
@@ -645,7 +647,7 @@ function VoiceWidgetSkeleton({ gridStyle, pills = 3 }: { gridStyle?: CSSProperti
   );
 }
 
-function Select({ label, value, onChange, opts }:
+export function Select({ label, value, onChange, opts }:
   { label: string; value: string; onChange: (v: string) => void; opts: string[] }) {
   return (
     <label className="vw-select">
@@ -658,7 +660,7 @@ function Select({ label, value, onChange, opts }:
   );
 }
 
-function uniq(xs?: string[]): string[] {
+export function uniq(xs?: string[]): string[] {
   return [...new Set((xs ?? []).filter(Boolean))].sort();
 }
 
@@ -666,7 +668,7 @@ function uniq(xs?: string[]): string[] {
 // marking each collapsed gap (rendered as an ellipsis). A gap of exactly one page emits that page
 // number instead — an ellipsis standing in for a single page reads worse than just showing it.
 // Pages are 0-based here, 1-based in the UI.
-function pageNumbers(current: number, count: number): (number | null)[] {
+export function pageNumbers(current: number, count: number): (number | null)[] {
   const wanted = [...new Set([0, count - 1, current - 1, current, current + 1])]
     .filter((p) => p >= 0 && p < count)
     .sort((a, b) => a - b);
@@ -685,6 +687,6 @@ function pageNumbers(current: number, count: number): (number | null)[] {
 // the voiceIds allowlist. NOT unique in the wild: a few rime voices repeat key+model (once per
 // language, plus literal duplicate rows), so row identity uses Row._uid — this plus a collision
 // counter, assigned in loadBundle.
-function modelKeyOf(v: { key: string; model: string | null }): string {
+export function modelKeyOf(v: { key: string; model: string | null }): string {
   return v.model ? `${v.key}:${v.model}` : v.key;
 }
diff --git a/fern/docs.yml b/fern/docs.yml
index b84a7e6a2e..e96409e486 100644
--- a/fern/docs.yml
+++ b/fern/docs.yml
@@ -177,6 +177,7 @@ css:
   - styles.css
   - components/skeleton/styles.css
   - components/voice-widget/styles.css
+  - components/voice-widget-rows/styles.css
 
 redirects:
   - source: /docs/agents-sdk
diff --git a/fern/products/platform/pages/calling/voice/TTS/azure.mdx b/fern/products/platform/pages/calling/voice/TTS/azure.mdx
index 107039ac2c..5c4c17b392 100644
--- a/fern/products/platform/pages/calling/voice/TTS/azure.mdx
+++ b/fern/products/platform/pages/calling/voice/TTS/azure.mdx
@@ -5,7 +5,7 @@ description: Learn how to use Azure TTS voices on the SignalWire platform.
 slug: /voice/tts/azure
 ---
 
-import { VoiceWidget } from "@/components/index";
+import { VoiceWidgetRows } from "@/components/index";
 
 Microsoft's Azure platform offers an impressive array of high-quality, multilingual voices in its Neural model.
 
@@ -13,7 +13,7 @@ Microsoft's Azure platform offers an impressive array of high-quality, multiling
 
 Press play to audition any Azure voice, then **copy config** to grab the value for SWML or your SDK.
 
-<VoiceWidget provider="azure" />
+<VoiceWidgetRows provider="azure" />
 
 <CardGroup cols={2}>
   <Card title="Voices" href="https://learn.microsoft.com/en-us/azure/ai-services/speech-service/language-support?tabs=tts">
diff --git a/fern/products/platform/pages/calling/voice/TTS/cartesia.mdx b/fern/products/platform/pages/calling/voice/TTS/cartesia.mdx
index b204a000ce..0fd3df72f4 100644
--- a/fern/products/platform/pages/calling/voice/TTS/cartesia.mdx
+++ b/fern/products/platform/pages/calling/voice/TTS/cartesia.mdx
@@ -5,7 +5,7 @@ description: Learn how to use Cartesia TTS voices on the SignalWire platform.
 slug: /voice/tts/cartesia
 ---
 
-import { VoiceWidget } from "@/components/index";
+import { VoiceWidgetRows } from "@/components/index";
 
 
 Cartesia offers a wide selection of fully multilingual voices with very low latency.
@@ -38,7 +38,7 @@ All Cartesia voices can be used with any model.
 
 Press play to audition any Cartesia voice, then **copy config** to grab the value for SWML or your SDK.
 
-<VoiceWidget provider="cartesia" />
+<VoiceWidgetRows provider="cartesia" />
 
 Copy the voice ID from the table below:
 
diff --git a/fern/products/platform/pages/calling/voice/TTS/deepgram.mdx b/fern/products/platform/pages/calling/voice/TTS/deepgram.mdx
index 597f25497d..c01ecf7de8 100644
--- a/fern/products/platform/pages/calling/voice/TTS/deepgram.mdx
+++ b/fern/products/platform/pages/calling/voice/TTS/deepgram.mdx
@@ -5,7 +5,7 @@ description: Learn how to use Deepgram TTS voices on the SignalWire platform.
 slug: /voice/tts/deepgram
 ---
 
-import { VoiceWidget } from "@/components/index";
+import { VoiceWidgetRows } from "@/components/index";
 
 Deepgram's Aura model offers a wide range of voices for its text-to-speech API, 
 each designed to produce natural-sounding speech output in an array of different accents and speaking styles.
@@ -29,7 +29,7 @@ Deepgram's Aura model provides ultra-low latency text-to-speech optimized for co
 
 Press play to audition any Deepgram voice, then **copy config** to grab the value for SWML or your SDK.
 
-<VoiceWidget provider="deepgram" />
+<VoiceWidgetRows provider="deepgram" />
 
 Deepgram Aura voices are designed for natural-sounding English speech. Each voice follows the pattern `aura-<name>-en`.
 
diff --git a/fern/products/platform/pages/calling/voice/TTS/elevenlabs.mdx b/fern/products/platform/pages/calling/voice/TTS/elevenlabs.mdx
index 29a936f608..e32fefd964 100644
--- a/fern/products/platform/pages/calling/voice/TTS/elevenlabs.mdx
+++ b/fern/products/platform/pages/calling/voice/TTS/elevenlabs.mdx
@@ -5,7 +5,7 @@ description: Learn how to use ElevenLabs TTS voices on the SignalWire platform.
 slug: /voice/tts/elevenlabs
 ---
 
-import { VoiceWidget } from "@/components/index";
+import { VoiceWidgetRows } from "@/components/index";
 
 ElevenLabs voices offer expressive, human-like pronunciation and an extensive list of supported languages.
 Every ElevenLabs [voice](#voices) can be used with all of the ElevenLabs [models](#models).
@@ -24,7 +24,7 @@ Consult ElevenLabs' documentation for an up-to-date list of available models and
 
 Press play to audition any ElevenLabs voice, then **copy config** to grab the value for SWML or your SDK.
 
-<VoiceWidget provider="elevenlabs" />
+<VoiceWidgetRows provider="elevenlabs" />
 
 You can use the **Name** and **ID** values for each voice in the below table interchangeably.
 
diff --git a/fern/products/platform/pages/calling/voice/TTS/google.mdx b/fern/products/platform/pages/calling/voice/TTS/google.mdx
index dcc080a888..4df799059d 100644
--- a/fern/products/platform/pages/calling/voice/TTS/google.mdx
+++ b/fern/products/platform/pages/calling/voice/TTS/google.mdx
@@ -5,7 +5,7 @@ description: Learn how to use Google Cloud TTS voices on the SignalWire platform
 slug: /voice/tts/gcloud
 ---
 
-import { VoiceWidget } from "@/components/index";
+import { VoiceWidgetRows } from "@/components/index";
 
 Google Cloud offers a number of robust text-to-speech
 [voice models](https://cloud.google.com/text-to-speech/docs/voice-types).
@@ -42,7 +42,7 @@ the `polyglot-1` voice has variants for English (Australia), English (US), Frenc
 
 Press play to audition any Google Cloud voice, then **copy config** to grab the value for SWML or your SDK.
 
-<VoiceWidget provider="gcloud" />
+<VoiceWidgetRows provider="gcloud" />
 
 ## Billing
 
diff --git a/fern/products/platform/pages/calling/voice/TTS/index.mdx b/fern/products/platform/pages/calling/voice/TTS/index.mdx
index 096d236109..ee1accaa54 100644
--- a/fern/products/platform/pages/calling/voice/TTS/index.mdx
+++ b/fern/products/platform/pages/calling/voice/TTS/index.mdx
@@ -11,7 +11,7 @@ x-custom:
 description: Detailed list of all the TTS providers and voices SignalWire supports.
 ---
 
-import { VoiceWidget } from "@/components/index";
+import { VoiceWidgetRows } from "@/components/index";
 
 
 [polly]: /docs/platform/voice/tts/amazon-polly
@@ -37,7 +37,7 @@ Choose a provider to browse and audition its full voice catalog. Press play to a
 grab the engine and voice values for your SWML or SDK code. Each provider's complete voice list
 lives on its reference page, linked in the table below.
 
-<VoiceWidget groupBy="none" />
+<VoiceWidgetRows groupBy="none" />
 
 ## Compare providers and models
 
diff --git a/fern/products/platform/pages/calling/voice/TTS/openai.mdx b/fern/products/platform/pages/calling/voice/TTS/openai.mdx
index c8b0b65bd6..ab53b773b8 100644
--- a/fern/products/platform/pages/calling/voice/TTS/openai.mdx
+++ b/fern/products/platform/pages/calling/voice/TTS/openai.mdx
@@ -5,7 +5,7 @@ description: Learn how to use OpenAI TTS voices on the SignalWire platform.
 slug: /voice/tts/openai
 ---
 
-import { VoiceWidget } from "@/components/index";
+import { VoiceWidgetRows } from "@/components/index";
 
 OpenAI offers versatile multilingual voices balancing low latency and good quality.
 While voices are optimized for English, they perform well across all 
@@ -28,7 +28,7 @@ OpenAI offers two TTS models with different quality and latency characteristics:
 
 Press play to audition any OpenAI voice, then **copy config** to grab the value for SWML or your SDK.
 
-<VoiceWidget provider="openai" />
+<VoiceWidgetRows provider="openai" />
 
 OpenAI provides 6 fully multilingual voices optimized for natural-sounding speech:
 
diff --git a/fern/products/platform/pages/calling/voice/TTS/polly.mdx b/fern/products/platform/pages/calling/voice/TTS/polly.mdx
index 87901575a6..8b77cfffe8 100644
--- a/fern/products/platform/pages/calling/voice/TTS/polly.mdx
+++ b/fern/products/platform/pages/calling/voice/TTS/polly.mdx
@@ -5,7 +5,7 @@ description: Learn how to use Polly TTS voices on the SignalWire platform.
 slug: /voice/tts/amazon-polly
 ---
 
-import { VoiceWidget } from "@/components/index";
+import { VoiceWidgetRows } from "@/components/index";
 
 Amazon Web Services' Polly TTS engine includes several models to accommodate different use cases.
 
@@ -39,7 +39,7 @@ SignalWire supports the following three Amazon models.
 
 Press play to audition any Amazon Polly voice, then **copy config** to grab the value for SWML or your SDK.
 
-<VoiceWidget provider="polly" />
+<VoiceWidgetRows provider="polly" />
 
 ## Languages
 
diff --git a/fern/products/platform/pages/calling/voice/TTS/rime.mdx b/fern/products/platform/pages/calling/voice/TTS/rime.mdx
index 3d8cdfc46d..39e408290f 100644
--- a/fern/products/platform/pages/calling/voice/TTS/rime.mdx
+++ b/fern/products/platform/pages/calling/voice/TTS/rime.mdx
@@ -6,7 +6,7 @@ slug: /voice/tts/rime
 description: Learn how to use Rime's Arcana and Mist v2 TTS models with SignalWire AI Voice applications.
 ---
 
-import { VoiceWidget } from "@/components/index";
+import { VoiceWidgetRows } from "@/components/index";
 
 
 Rime offers uniquely realistic voices with a focus on natural expressiveness.
@@ -37,7 +37,7 @@ Rime offers uniquely realistic voices with a focus on natural expressiveness.
 
 Press play to audition any Rime voice, then **copy config** to grab the value for SWML or your SDK.
 
-<VoiceWidget provider="rime" />
+<VoiceWidgetRows provider="rime" />
 
 Mist v2 is the default Rime model on the SignalWire platform.
 To use this model, simply set the voice ID.

From df2b5fdabd50842a46d30eba921dec21eed074a3 Mon Sep 17 00:00:00 2001
From: Devon-White <devon.white@signalwire.com>
Date: Mon, 15 Jun 2026 05:14:00 -0400
Subject: [PATCH 2/6] Voice widget rows: fix sample-text tooltip (placement +
 clipping)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Move the info trigger out of the name block to the right, just left of Copy (room there).
- The list's overflow:hidden was clipping the popover (esp. row 1, where it opens above the
  list). Switch the list to overflow:visible and round the first/last rows so the on-hover
  corners still follow the container — mirrors the cards (card overflow:visible, grid never clips).
- Right-anchor the popover (+ caret) so, from its new right-side position, it extends leftward
  into the row and never spills off the right edge.

(Fern's <Tooltip>/<Icon> are not importable in custom components — confirmed no @fern-* package —
so this is our own popover, same as the cards; the bug was the list clip, not the component.)
---
 fern/components/voice-widget-rows/index.tsx  | 20 +++++++++++---------
 fern/components/voice-widget-rows/styles.css | 19 ++++++++++++++-----
 2 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/fern/components/voice-widget-rows/index.tsx b/fern/components/voice-widget-rows/index.tsx
index 551d093304..db30b49337 100644
--- a/fern/components/voice-widget-rows/index.tsx
+++ b/fern/components/voice-widget-rows/index.tsx
@@ -375,16 +375,8 @@ const VoiceRowItem = memo(function VoiceRowItem({ r, playing, onPlay, onCopy }:
         {/* Name + meta block — min-width:0 so the name/meta can ellipsize instead of widening the row. */}
         <div className="vw-row-mid">
           <div className="vw-row-nm">
-            {/* Cleaned name; the full original stays in title= (and the tooltip below). */}
+            {/* Cleaned name; the full original stays in title= (and the sample-text popover by Copy). */}
             <span className="vw-name" title={r.display_name}>{name}</span>
-            {r.clip?.sample_text && (
-              // Icon-anchored sample-text popover. Focusable trigger + aria-describedby so the sample
-              // is announced (not just shown on hover); reveal is hover/focus-within (see CSS).
-              <span className="vw-tooltip-wrap" tabIndex={0} aria-describedby={tipId}>
-                <span className="vw-tooltip-icon"><IconInfo /></span>
-                <span className="vw-tooltip" id={tipId} role="tooltip">“{r.clip.sample_text}”</span>
-              </span>
-            )}
           </div>
           {/* Meta — muted plain-middot: language · gender · provider · model. No type icons (density).
               "unknown" gender is hidden. Provider is ALWAYS shown. Model is the neutral inline-code.
@@ -401,6 +393,16 @@ const VoiceRowItem = memo(function VoiceRowItem({ r, playing, onPlay, onCopy }:
           </div>
         </div>
 
+        {/* Sample-text popover — its trigger sits on the right, just left of Copy, where there's
+            room (rather than crowding the name). Focusable + aria-describedby so the sample is
+            announced (not just shown on hover); reveal is hover/focus-within. The popover opens
+            upward and is right-anchored (see CSS) so it stays within the row width. */}
+        {r.clip?.sample_text && (
+          <span className="vw-tooltip-wrap" tabIndex={0} aria-describedby={tipId}>
+            <span className="vw-tooltip-icon"><IconInfo /></span>
+            <span className="vw-tooltip" id={tipId} role="tooltip">“{r.clip.sample_text}”</span>
+          </span>
+        )}
         {/* Copy — always labeled (rows have the horizontal room; no icon-only variant). Copied →
             "✓ Copied" in --status-success. Payload identical to the cards. */}
         <button className={`vw-copy-t${copied ? " vw-copied" : ""}`} onClick={handleCopy} aria-live="polite">
diff --git a/fern/components/voice-widget-rows/styles.css b/fern/components/voice-widget-rows/styles.css
index 4319620bed..1485c804dd 100644
--- a/fern/components/voice-widget-rows/styles.css
+++ b/fern/components/voice-widget-rows/styles.css
@@ -63,8 +63,11 @@
 .vw-rows .vw-section-title span { color: var(--vw-muted); font-weight: 400; margin-left: .3rem; }
 
 /* ── The list: bordered, rounded container that lifts off the page (like the card). ───────────── */
+/* overflow:VISIBLE (not hidden): a row's sample-text popover must be able to escape the list — the
+   cards' grid likewise never clips. The rounded corners are instead carried by rounding the first/
+   last rows below, so on-hover row backgrounds still follow the container's rounded shape. */
 .vw-rows .vw-list { list-style: none; margin: 0; padding: 0;
-  border: 1px solid var(--vw-line); border-radius: 14px; overflow: hidden; background: var(--vw-card);
+  border: 1px solid var(--vw-line); border-radius: 14px; overflow: visible; background: var(--vw-card);
   box-shadow: var(--card-shadow), var(--card-inset); }
 
 /* Row: hairline-divided, full-width, uniform height; subtle background on hover. The inner <article>
@@ -72,6 +75,11 @@
    text popover can escape upward. */
 .vw-rows .vw-row { border-bottom: 1px solid var(--vw-line2); transition: background .12s ease; }
 .vw-rows .vw-row:last-child { border-bottom: none; }
+/* Round the end rows to ~the list's inner radius (14px border-radius − 1px border) so a hovered
+   first/last row's background doesn't square off the container's rounded corners now that the list
+   no longer clips. */
+.vw-rows .vw-row:first-child { border-top-left-radius: 13px; border-top-right-radius: 13px; }
+.vw-rows .vw-row:last-child { border-bottom-left-radius: 13px; border-bottom-right-radius: 13px; }
 .vw-rows .vw-row:hover { background: var(--table-row-hover); }
 .vw-rows .vw-row:focus-within { background: var(--table-row-hover); }
 .vw-rows .vw-row-inner { display: flex; align-items: center; gap: 13px; padding: 10px 15px;
@@ -137,8 +145,9 @@
   background: var(--code-bg); border-radius: 5px; padding: 1px 6px;
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
 
-/* Sample-text popover: a fixed-width (220px), icon-anchored disclosure. Revealed on hover/focus-
-   within; the trigger carries aria-describedby → .vw-tooltip. */
+/* Sample-text popover: a fixed-width (220px), icon-anchored disclosure on the right of the row (left
+   of Copy). Opens upward and is RIGHT-anchored so it extends leftward into the row and never spills
+   off the right edge. Revealed on hover/focus-within; the trigger carries aria-describedby → .vw-tooltip. */
 .vw-rows .vw-tooltip-wrap { flex: 0 0 auto; position: relative; display: inline-flex; align-items: center;
   color: var(--vw-muted); cursor: help; transition: color .15s ease; }
 .vw-rows .vw-tooltip-wrap:hover, .vw-rows .vw-tooltip-wrap:focus-within { color: var(--vw-accent); }
@@ -146,12 +155,12 @@
 .vw-rows .vw-tooltip-wrap:hover .vw-tooltip-icon,
 .vw-rows .vw-tooltip-wrap:focus-within .vw-tooltip-icon { opacity: 1; }
 .vw-rows .vw-tooltip-icon svg { width: 14px; height: 14px; }
-.vw-rows .vw-tooltip { display: none; position: absolute; bottom: calc(100% + 9px); left: -8px; width: 220px;
+.vw-rows .vw-tooltip { display: none; position: absolute; bottom: calc(100% + 9px); right: -8px; width: 220px;
   background: var(--vw-card); color: var(--vw-fg2);
   border: 1px solid var(--vw-line); border-radius: 9px; padding: 8px 11px;
   font-size: 11.5px; font-style: italic; line-height: 1.45;
   box-shadow: var(--card-hover-shadow); z-index: 30; pointer-events: none; white-space: normal; }
-.vw-rows .vw-tooltip::after { content: ""; position: absolute; top: 100%; left: 14px;
+.vw-rows .vw-tooltip::after { content: ""; position: absolute; top: 100%; right: 14px;
   border: 6px solid transparent; border-top-color: var(--vw-card); }
 .vw-rows .vw-tooltip-wrap:hover .vw-tooltip,
 .vw-rows .vw-tooltip-wrap:focus-within .vw-tooltip { display: block; }

From 35ee4c8a09a97966367a7e4d21df3251e2bb0220 Mon Sep 17 00:00:00 2001
From: Devon-White <devon.white@signalwire.com>
Date: Mon, 15 Jun 2026 06:17:32 -0400
Subject: [PATCH 3/6] Voice widget rows: fix sticky-header hover overlap +
 Firefox non-Latin fonts (match cards)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Drop the row's hover/focus z-index. It made the row a stacking context above the sticky toolbar
  (z-index:2), so a row scrolled partly under it painted OVER it on hover. The row stays below the
  toolbar; the sample-text popover (z-index:30) still escapes above it on its own (verified in a
  faithful repro — the rows root has no container-type, and the popover still beats the toolbar).
- Inherit the docs body font (Lexend + fallbacks) instead of system-ui, which tofu'd non-Latin
  voice names (Arabic, Amharic/Ethiopic) on Firefox.
---
 fern/components/voice-widget-rows/styles.css | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/fern/components/voice-widget-rows/styles.css b/fern/components/voice-widget-rows/styles.css
index 1485c804dd..c896ca4799 100644
--- a/fern/components/voice-widget-rows/styles.css
+++ b/fern/components/voice-widget-rows/styles.css
@@ -26,7 +26,10 @@
   --vw-fg2: var(--fg-secondary);
   --vw-muted: var(--fg-muted);
   --vw-accent: var(--accent);
-  color: var(--vw-fg); font: 14px/1.45 system-ui, sans-serif;
+  /* Size/line-height only — DON'T override font-family: inherit the docs body font (Lexend + its
+     fallback chain). `system-ui` tofu'd non-Latin voice names (e.g. Azure's Amharic/Ethiopic names)
+     on Firefox, whose system-ui fallback doesn't cover those scripts. */
+  color: var(--vw-fg); font-size: 14px; line-height: 1.45;
 }
 .vw.vw-rows.vw-error { padding: 2rem; color: var(--error-text); }
 
@@ -84,10 +87,11 @@
 .vw-rows .vw-row:focus-within { background: var(--table-row-hover); }
 .vw-rows .vw-row-inner { display: flex; align-items: center; gap: 13px; padding: 10px 15px;
   min-height: 58px; position: relative; }
-/* While a row is hovered/focused (the only states its popover opens), lift it above the sticky
-   toolbar (z-index:2) so a first-row popover isn't painted over. Scoped to hover/focus so it never
-   affects layout. */
-.vw-rows .vw-row:hover, .vw-rows .vw-row:focus-within { position: relative; z-index: 3; }
+/* The row deliberately does NOT take a z-index on hover. Lifting it made the whole row a stacking
+   context above the sticky toolbar (z-index:2), so a row scrolled partly under the toolbar painted
+   OVER it on hover. The row stays at z-index:auto (below the toolbar); only the sample-text popover
+   (z-index:30) needs to escape, and it beats the toolbar's z-index on its own — so the popover
+   paints above the toolbar while the row body never does. */
 
 /* Ghost play button: 38px outline circle at rest; fills with the accent + equalizer while playing. */
 .vw-rows .vw-play { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; cursor: pointer;

From 0058ffdc4dc8308ef15af7a40dfadedc1875a040 Mon Sep 17 00:00:00 2001
From: Devon-White <devon.white@signalwire.com>
Date: Mon, 15 Jun 2026 08:50:29 -0400
Subject: [PATCH 4/6] Voice widget rows: serve Noto via Google Fonts
 unicode-range for non-Latin names
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The docs body font (Lexend, Latin-only) can't render the catalog's ~190 non-Latin
names across ~24 scripts; Firefox then falls back to the system font list and tofu's
on any script the OS lacks. Load Noto through the Google Fonts CSS API (one @font-face
per script, each with its own unicode-range) so only the slices whose glyphs appear
download — no build-time knowledge of the runtime CDN catalog needed. Wired into
--vw-i18n-font (body font first so Latin stays Lexend) and scoped to .vw-name/.vw-tooltip.
Adds lang attributes for screen-reader pronunciation + language-appropriate glyphs.
Mirrors the cards fix.
---
 fern/components/voice-widget-rows/index.tsx  |  7 ++--
 fern/components/voice-widget-rows/styles.css | 35 +++++++++++++++++---
 2 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/fern/components/voice-widget-rows/index.tsx b/fern/components/voice-widget-rows/index.tsx
index db30b49337..4debf88bea 100644
--- a/fern/components/voice-widget-rows/index.tsx
+++ b/fern/components/voice-widget-rows/index.tsx
@@ -375,8 +375,9 @@ const VoiceRowItem = memo(function VoiceRowItem({ r, playing, onPlay, onCopy }:
         {/* Name + meta block — min-width:0 so the name/meta can ellipsize instead of widening the row. */}
         <div className="vw-row-mid">
           <div className="vw-row-nm">
-            {/* Cleaned name; the full original stays in title= (and the sample-text popover by Copy). */}
-            <span className="vw-name" title={r.display_name}>{name}</span>
+            {/* Cleaned name; the full original stays in title= (and the sample-text popover by Copy).
+                lang tags the native script for screen-reader pronunciation + language-appropriate glyphs. */}
+            <span className="vw-name" lang={r.primary_language || undefined} title={r.display_name}>{name}</span>
           </div>
           {/* Meta — muted plain-middot: language · gender · provider · model. No type icons (density).
               "unknown" gender is hidden. Provider is ALWAYS shown. Model is the neutral inline-code.
@@ -400,7 +401,7 @@ const VoiceRowItem = memo(function VoiceRowItem({ r, playing, onPlay, onCopy }:
         {r.clip?.sample_text && (
           <span className="vw-tooltip-wrap" tabIndex={0} aria-describedby={tipId}>
             <span className="vw-tooltip-icon"><IconInfo /></span>
-            <span className="vw-tooltip" id={tipId} role="tooltip">“{r.clip.sample_text}”</span>
+            <span className="vw-tooltip" id={tipId} role="tooltip" lang={r.primary_language || undefined}>“{r.clip.sample_text}”</span>
           </span>
         )}
         {/* Copy — always labeled (rows have the horizontal room; no icon-only variant). Copied →
diff --git a/fern/components/voice-widget-rows/styles.css b/fern/components/voice-widget-rows/styles.css
index c896ca4799..a354b3a843 100644
--- a/fern/components/voice-widget-rows/styles.css
+++ b/fern/components/voice-widget-rows/styles.css
@@ -1,3 +1,14 @@
+/* Non-Latin voice-name fallback (mirrors the cards). The catalog carries ~190 names across ~24
+   scripts (Arabic, CJK, Devanagari, Ethiopic, Hangul, …) and the docs body font (Lexend, Latin-only
+   subset) can't render them — Firefox then walks the SYSTEM font list and tofu's on any script the OS
+   lacks. Fix: serve Noto via the Google Fonts CSS API, which returns one @font-face per script EACH
+   WITH ITS OWN unicode-range, so the browser downloads only the slices whose glyphs actually appear
+   (CJK is the only heavy one and is itself range-sliced). Needs no build-time knowledge of the glyph
+   set — right for a runtime CDN catalog. Wired into --vw-i18n-font below, used per-character after the
+   body font (Latin stays Lexend). If a CSP ever blocks fonts.googleapis.com/gstatic.com, self-host
+   range-subsetted Noto instead. */
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&family=Noto+Sans+Arabic:wght@400;700&family=Noto+Sans+Hebrew:wght@400;700&family=Noto+Sans+Devanagari:wght@400;700&family=Noto+Sans+Bengali:wght@400;700&family=Noto+Sans+Tamil:wght@400;700&family=Noto+Sans+Telugu:wght@400;700&family=Noto+Sans+Kannada:wght@400;700&family=Noto+Sans+Malayalam:wght@400;700&family=Noto+Sans+Gujarati:wght@400;700&family=Noto+Sans+Gurmukhi:wght@400;700&family=Noto+Sans+Oriya:wght@400;700&family=Noto+Sans+Sinhala:wght@400;700&family=Noto+Sans+Thai:wght@400;700&family=Noto+Sans+Lao:wght@400;700&family=Noto+Sans+Khmer:wght@400;700&family=Noto+Sans+Myanmar:wght@400;700&family=Noto+Sans+Ethiopic:wght@400;700&family=Noto+Sans+Armenian:wght@400;700&family=Noto+Sans+Georgian:wght@400;700&family=Noto+Sans+Canadian+Aboriginal:wght@400;700&family=Noto+Sans+SC:wght@400;700&family=Noto+Sans+JP:wght@400;700&family=Noto+Sans+KR:wght@400;700&display=swap');
+
 /* Voice widget — COMPACT ROWS (Direction B). A sibling to the cards (components/voice-widget); this
    file styles only the rows. Ported from the design mockups in
    docs/superpowers/specs/2026-06-14-voice-widget-rows-assets/ (vw-rows-theme.html / vw-rows.html /
@@ -26,9 +37,22 @@
   --vw-fg2: var(--fg-secondary);
   --vw-muted: var(--fg-muted);
   --vw-accent: var(--accent);
-  /* Size/line-height only — DON'T override font-family: inherit the docs body font (Lexend + its
-     fallback chain). `system-ui` tofu'd non-Latin voice names (e.g. Azure's Amharic/Ethiopic names)
-     on Firefox, whose system-ui fallback doesn't cover those scripts. */
+  /* i18n name stack: the docs body font FIRST (Latin names stay Lexend), then the Noto script
+     families (loaded by the @import above) for per-character fallback on non-Latin glyphs. Applied
+     only to the text that comes from the catalog (.vw-name, .vw-tooltip) — meta/provider/model are
+     always Latin. CJK order is SC→JP→KR: the catalog's Han names are mostly Chinese (zh/wuu/yue), so
+     SC first gives the majority correct glyph shapes; Japanese kanji render with SC Han forms
+     (legible, a hair off — Han unification), Korean Hangul resolves to KR regardless. */
+  --vw-i18n-font: var(--typography-body-font-family), "Noto Sans", "Noto Sans Arabic",
+    "Noto Sans Hebrew", "Noto Sans Devanagari", "Noto Sans Bengali", "Noto Sans Tamil",
+    "Noto Sans Telugu", "Noto Sans Kannada", "Noto Sans Malayalam", "Noto Sans Gujarati",
+    "Noto Sans Gurmukhi", "Noto Sans Oriya", "Noto Sans Sinhala", "Noto Sans Thai", "Noto Sans Lao",
+    "Noto Sans Khmer", "Noto Sans Myanmar", "Noto Sans Ethiopic", "Noto Sans Armenian",
+    "Noto Sans Georgian", "Noto Sans Canadian Aboriginal", "Noto Sans SC", "Noto Sans JP",
+    "Noto Sans KR", sans-serif;
+  /* Size/line-height only — DON'T override font-family here: inherit the docs body font (Lexend) for
+     the chrome; the non-Latin fallback is scoped to .vw-name/.vw-tooltip via --vw-i18n-font. The
+     earlier `system-ui` override tofu'd non-Latin names on Firefox (system fallback misses scripts). */
   color: var(--vw-fg); font-size: 14px; line-height: 1.45;
 }
 .vw.vw-rows.vw-error { padding: 2rem; color: var(--error-text); }
@@ -123,7 +147,8 @@
    override the cards' bare `.vw-name` (which sets -webkit-box + -webkit-line-clamp:2 for the cards'
    2-line wrap; it also matches here because the rows root carries the `vw` class) so the row name
    stays strictly single-line with a tail ellipsis. */
-.vw-rows .vw-name { display: block; flex: 0 1 auto; font-weight: 650; font-size: 14.5px; line-height: 18px;
+.vw-rows .vw-name { display: block; flex: 0 1 auto; font-family: var(--vw-i18n-font); font-weight: 650;
+  font-size: 14.5px; line-height: 18px;
   letter-spacing: -.01em; color: var(--vw-fg); white-space: nowrap; word-break: normal;
   -webkit-line-clamp: none; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
 
@@ -162,7 +187,7 @@
 .vw-rows .vw-tooltip { display: none; position: absolute; bottom: calc(100% + 9px); right: -8px; width: 220px;
   background: var(--vw-card); color: var(--vw-fg2);
   border: 1px solid var(--vw-line); border-radius: 9px; padding: 8px 11px;
-  font-size: 11.5px; font-style: italic; line-height: 1.45;
+  font-family: var(--vw-i18n-font); font-size: 11.5px; font-style: italic; line-height: 1.45;
   box-shadow: var(--card-hover-shadow); z-index: 30; pointer-events: none; white-space: normal; }
 .vw-rows .vw-tooltip::after { content: ""; position: absolute; top: 100%; right: 14px;
   border: 6px solid transparent; border-top-color: var(--vw-card); }

From e0532bc7afe0aadc6644322da5ab4350fc0e5c25 Mon Sep 17 00:00:00 2001
From: Devon-White <devon.white@signalwire.com>
Date: Mon, 15 Jun 2026 09:00:37 -0400
Subject: [PATCH 5/6] Voice widget rows: show the model name verbatim (match
 cards)

Drop the normalizeModel import + call now that the cards module no longer remaps model
names; render r.model as-is.
---
 fern/components/voice-widget-rows/index.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/fern/components/voice-widget-rows/index.tsx b/fern/components/voice-widget-rows/index.tsx
index 4debf88bea..60b79e81aa 100644
--- a/fern/components/voice-widget-rows/index.tsx
+++ b/fern/components/voice-widget-rows/index.tsx
@@ -5,7 +5,8 @@ import { Skeleton } from "../skeleton/index";
 import {
   // Data layer + display-time helpers reused VERBATIM from the cards widget so the two previews
   // stay behaviorally identical (no logic drift): same fetch/cache, name cleaning, friendly
-  // language, gender/model normalization, no-preview filtering, toolbar/pager UI, breakpoint.
+  // language, gender normalization, no-preview filtering, toolbar/pager UI, breakpoint. The model
+  // string is shown verbatim (no remapping), matching the cards.
   ALL,
   DEFAULT_PAGE_SIZE,
   MOBILE_PAGE_SIZE,
@@ -16,7 +17,6 @@ import {
   loadBundle,
   modelKeyOf,
   normalizeGender,
-  normalizeModel,
   pageNumbers,
   uniq,
   useIsMobile,
@@ -354,7 +354,7 @@ const VoiceRowItem = memo(function VoiceRowItem({ r, playing, onPlay, onCopy }:
   const name = cleanName(r.display_name);
   const language = friendlyLanguage(r.primary_language);
   const gender = normalizeGender(r.gender);
-  const model = r.model ? normalizeModel(r.engine, r.model) : null;
+  const model = r.model || null;
   const tipId = `vwr-tip-${r._uid}`;
 
   return (
@@ -389,7 +389,7 @@ const VoiceRowItem = memo(function VoiceRowItem({ r, playing, onPlay, onCopy }:
             <span className="vw-prov" title={r.provider}>{r.provider}</span>
             {model && <>
               <span className="vw-dot" aria-hidden="true">·</span>
-              <code className="vw-model" title={r.model!}>{model}</code>
+              <code className="vw-model">{model}</code>
             </>}
           </div>
         </div>

From ac31d79fecb1ab16bc80bf0955ba217b74babfbd Mon Sep 17 00:00:00 2001
From: Devon-White <devon.white@signalwire.com>
Date: Mon, 15 Jun 2026 09:41:23 -0400
Subject: [PATCH 6/6] =?UTF-8?q?Voice=20widget=20rows:=20SVG=20play/stop=20?=
 =?UTF-8?q?icons=20instead=20of=20=E2=96=B6/=E2=96=A0=20chars=20(match=20c?=
 =?UTF-8?q?ards)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Same fix as the cards: the ▶/■ characters are emoji-capable and render as an OS color emoji
on some platforms. Use inline SVG IconPlay/IconStop (currentColor-filled); equalizer animation
unchanged.
---
 fern/components/voice-widget-rows/index.tsx  | 13 +++++++++++--
 fern/components/voice-widget-rows/styles.css |  2 ++
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/fern/components/voice-widget-rows/index.tsx b/fern/components/voice-widget-rows/index.tsx
index 60b79e81aa..77fb8bb4de 100644
--- a/fern/components/voice-widget-rows/index.tsx
+++ b/fern/components/voice-widget-rows/index.tsx
@@ -331,6 +331,15 @@ const IconInfo = () => (
 const IconCopy = () => (
   <svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><rect x="5" y="5" width="8" height="9" rx="1.5" stroke="currentColor" strokeWidth="1.4" /><path d="M11 5V3.5A1.5 1.5 0 0 0 9.5 2H4a1.5 1.5 0 0 0-1.5 1.5V11A1.5 1.5 0 0 0 4 12.5" stroke="currentColor" strokeWidth="1.4" /></svg>
 );
+// Play/stop as inline SVG (not the "▶"/"■" chars, which are emoji-capable and render as an OS color
+// emoji on some platforms). Same glyphs as the cards. Filled with currentColor so they follow the
+// button's rest/hover/playing color; the triangle is nudged right of center to read optically centered.
+const IconPlay = () => (
+  <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M5 3.5v9l7-4.5z" fill="currentColor" /></svg>
+);
+const IconStop = () => (
+  <svg viewBox="0 0 16 16" aria-hidden="true"><rect x="4.5" y="4.5" width="7" height="7" rx="1" fill="currentColor" /></svg>
+);
 
 // Memoized so playing/pausing a voice (which re-renders the widget) only re-renders the two rows
 // whose `playing` flag actually changed — not the whole page of rows.
@@ -367,9 +376,9 @@ const VoiceRowItem = memo(function VoiceRowItem({ r, playing, onPlay, onCopy }:
             <>
               {/* Animated bars normally; a static stop square under prefers-reduced-motion (CSS swap). */}
               <span className="vw-eq" aria-hidden="true"><i /><i /><i /></span>
-              <span className="vw-stop" aria-hidden="true">■</span>
+              <span className="vw-stop" aria-hidden="true"><IconStop /></span>
             </>
-          ) : "▶"}
+          ) : <IconPlay />}
         </button>
 
         {/* Name + meta block — min-width:0 so the name/meta can ellipsize instead of widening the row. */}
diff --git a/fern/components/voice-widget-rows/styles.css b/fern/components/voice-widget-rows/styles.css
index a354b3a843..7f120b15f4 100644
--- a/fern/components/voice-widget-rows/styles.css
+++ b/fern/components/voice-widget-rows/styles.css
@@ -124,6 +124,8 @@
   transition: background .15s ease, border-color .15s ease, color .15s ease; }
 .vw-rows .vw-play:hover:not(.vw-playing) { border-color: var(--vw-accent); color: var(--vw-accent); }
 .vw-rows .vw-play.vw-playing { background: var(--vw-accent); border-color: var(--vw-accent); color: var(--accent-contrast); }
+/* Play (rest) + stop (reduced-motion) SVG glyphs, sized to the old "▶"/"■" footprint. */
+.vw-rows .vw-play svg { width: 13px; height: 13px; display: block; }
 
 /* Equalizer bars while playing; .vw-stop is the reduced-motion fallback (swapped in below). */
 .vw-rows .vw-eq { display: inline-flex; gap: 2.5px; align-items: flex-end; height: 12px; }