@adatechnology/conversations-ui 0.8.0 → 0.10.0

package/src/participant/test-fixtures/thread-loading.golden.html

@@ -1 +1 @@
-<div class="cv-p cv-p-thread" aria-busy="true"><header class="cv-p-thread__header"><button type="button" class="cv-p-thread__back" aria-label="Back"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-left" aria-hidden="true" focusable="false"><path d="m12 19-7-7 7-7"></path><path d="M19 12H5"></path></svg></button><div class="cv-p-thread__heading"><h2 class="cv-p-thread__title"><span class="cv-p-thread__title-text">Invoice 4521</span></h2><div class="cv-p-thread__meta"><span class="cv-p-protocol cv-p-protocol--header"><span class="cv-p-protocol__code"><span class="cv-p-sr-only">Protocol </span>P-1</span><button type="button" class="cv-p-protocol__copy" aria-label="Copy protocol P-1"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></button></span><div class="cv-p-sr-only" role="status" aria-live="polite"></div><span class="cv-p-channels"><span class="cv-p-sr-only">Channels in this conversation: </span><span class="cv-p-channel cv-p-channel--app"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-smartphone" aria-hidden="true"><rect width="14" height="20" x="5" y="2" rx="2" ry="2"></rect><path d="M12 18h.01"></path></svg><span class="cv-p-sr-only">App, </span></span><span class="cv-p-channel cv-p-channel--whatsapp"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-circle" aria-hidden="true"><path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"></path></svg><span class="cv-p-sr-only">WhatsApp</span></span></span></div></div></header><div class="cv-p-thread__scroll" tabindex="-1"><div class="cv-p-loading"><span class="cv-p-skeleton" aria-hidden="true"></span><span class="cv-p-skeleton" aria-hidden="true"></span><span class="cv-p-sr-only">Loading…</span></div><button type="button" class="cv-p-thread__older">Load older messages</button><div class="cv-p-thread__messages"></div></div><div class="cv-p-thread__live" role="status" aria-live="polite">New messages</div><form class="cv-p-composer"><div class="cv-p-quick" role="group" aria-label="Quick replies"><button type="button" class="cv-p-chip">T</button></div><div class="cv-p-composer__row"><input class="cv-p-composer__file-input" type="file" multiple="" hidden=""/><button type="button" class="cv-p-composer__attach" aria-label="Attach"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-paperclip" aria-hidden="true" focusable="false"><path d="m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551"></path></svg></button><textarea class="cv-p-composer__input" aria-label="Message" placeholder="Write a message…" rows="1">abc</textarea><button type="submit" class="cv-p-button cv-p-button--primary cv-p-composer__send" aria-label="Send"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-send" aria-hidden="true" focusable="false"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"></path><path d="m21.854 2.147-10.94 10.939"></path></svg></button></div></form></div>
+<div class="cv-p cv-p-thread" aria-busy="true"><header class="cv-p-thread__header"><button type="button" class="cv-p-thread__back" aria-label="Back" data-cv-tooltip="Back"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-left" aria-hidden="true" focusable="false"><path d="m12 19-7-7 7-7"></path><path d="M19 12H5"></path></svg></button><div class="cv-p-thread__heading"><h2 class="cv-p-thread__title"><span class="cv-p-thread__title-text">Invoice 4521</span></h2><div class="cv-p-thread__meta"><span class="cv-p-protocol cv-p-protocol--header"><span class="cv-p-protocol__code"><span class="cv-p-sr-only">Protocol </span>P-1</span><button type="button" class="cv-p-protocol__copy" aria-label="Copy protocol P-1" data-cv-tooltip="Copy protocol"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></button></span><div class="cv-p-sr-only" role="status" aria-live="polite"></div><span class="cv-p-channels"><span class="cv-p-sr-only">Channels in this conversation: </span><span class="cv-p-channel cv-p-channel--app" data-cv-tooltip="App"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-smartphone" aria-hidden="true"><rect width="14" height="20" x="5" y="2" rx="2" ry="2"></rect><path d="M12 18h.01"></path></svg><span class="cv-p-sr-only">App, </span></span><span class="cv-p-channel cv-p-channel--whatsapp" data-cv-tooltip="WhatsApp"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-circle" aria-hidden="true"><path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"></path></svg><span class="cv-p-sr-only">WhatsApp</span></span></span></div></div></header><div class="cv-p-thread__scroll" tabindex="-1"><div class="cv-p-loading"><span class="cv-p-skeleton" aria-hidden="true"></span><span class="cv-p-skeleton" aria-hidden="true"></span><span class="cv-p-sr-only">Loading…</span></div><button type="button" class="cv-p-thread__older">Load older messages</button><div class="cv-p-thread__messages"></div></div><div class="cv-p-thread__live" role="status" aria-live="polite">New messages</div><form class="cv-p-composer"><div class="cv-p-quick" role="group" aria-label="Quick replies"><button type="button" class="cv-p-chip">T</button></div><div class="cv-p-composer__row"><input class="cv-p-composer__file-input" type="file" multiple="" hidden=""/><button type="button" class="cv-p-composer__attach" aria-label="Attach" data-cv-tooltip="Attach"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-paperclip" aria-hidden="true" focusable="false"><path d="m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551"></path></svg></button><textarea class="cv-p-composer__input" aria-label="Message" placeholder="Write a message…" rows="1">abc</textarea><button type="submit" class="cv-p-button cv-p-button--primary cv-p-composer__send" aria-label="Send" data-cv-tooltip="Send"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-send" aria-hidden="true" focusable="false"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"></path><path d="m21.854 2.147-10.94 10.939"></path></svg></button></div></form></div>

package/src/participant/test-fixtures/thread-plain.golden.html

@@ -1 +1 @@
-<div class="cv-p cv-p-thread" aria-busy="false"><header class="cv-p-thread__header"><button type="button" class="cv-p-thread__back" aria-label="Back"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-left" aria-hidden="true" focusable="false"><path d="m12 19-7-7 7-7"></path><path d="M19 12H5"></path></svg></button><div class="cv-p-thread__heading"><h2 class="cv-p-thread__title"><span class="cv-p-thread__title-text">Invoice 4521</span></h2><div class="cv-p-thread__meta"><span class="cv-p-protocol cv-p-protocol--header"><span class="cv-p-protocol__code"><span class="cv-p-sr-only">Protocol </span>P-1</span><button type="button" class="cv-p-protocol__copy" aria-label="Copy protocol P-1"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></button></span><div class="cv-p-sr-only" role="status" aria-live="polite"></div><span class="cv-p-channels"><span class="cv-p-sr-only">Channels in this conversation: </span><span class="cv-p-channel cv-p-channel--app"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-smartphone" aria-hidden="true"><rect width="14" height="20" x="5" y="2" rx="2" ry="2"></rect><path d="M12 18h.01"></path></svg><span class="cv-p-sr-only">App, </span></span><span class="cv-p-channel cv-p-channel--whatsapp"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-circle" aria-hidden="true"><path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"></path></svg><span class="cv-p-sr-only">WhatsApp</span></span></span></div></div></header><div class="cv-p-thread__scroll" tabindex="-1"><div class="cv-p-thread__messages"><div class="cv-p-day" role="separator" aria-label="Thu, 10/01"><time class="cv-p-day__label" dateTime="2026-10-01">Thu, 10/01</time></div><div class="cv-p-bubble cv-p-bubble--mine"><span class="cv-p-sr-only">Me</span><div class="cv-p-text">*<strong>oi</strong>* <button type="button" class="cv-p-copyable cv-p-copyable--phone" aria-label="Copy 11 98888-7777">11 98888-7777</button> <button type="button" class="cv-p-copyable cv-p-copyable--email" aria-label="Copy a@b.com">a@b.com</button> <span class="cv-p-text__link-group"><a class="cv-p-text__link" href="https://x.com" rel="noopener noreferrer nofollow ugc" target="_blank">https://x.com<span class="cv-p-sr-only"> (opens in a new tab)</span></a><button type="button" class="cv-p-text__link-copy" aria-label="Copy https://x.com"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></button></span></div><span class="cv-p-bubble__meta"><time class="cv-p-bubble__time" dateTime="2026-10-01T12:00:00.000Z">12:00</time><span class="cv-p-bubble__status"><span class="cv-status-ticks cv-status-ticks--sent"><svg viewBox="0 0 20 12" width="15" height="9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 6.5L5 10.5L14.5 1" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path></svg></span><span class="cv-p-sr-only">Sent</span></span></span></div><div class="cv-p-bubble"><span class="cv-p-bubble__author">Op</span><div class="cv-p-text">Hello</div><span class="cv-p-bubble__meta"><time class="cv-p-bubble__time" dateTime="2026-10-01T12:05:00.000Z">12:05</time></span></div></div></div><div class="cv-p-thread__live" role="status" aria-live="polite"></div><form class="cv-p-composer"><div class="cv-p-composer__row"><input class="cv-p-composer__file-input" type="file" multiple="" hidden=""/><button type="button" class="cv-p-composer__attach" aria-label="Attach"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-paperclip" aria-hidden="true" focusable="false"><path d="m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551"></path></svg></button><textarea class="cv-p-composer__input" aria-label="Message" placeholder="Write a message…" rows="1">abc</textarea><button type="submit" class="cv-p-button cv-p-button--primary cv-p-composer__send" aria-label="Send"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-send" aria-hidden="true" focusable="false"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"></path><path d="m21.854 2.147-10.94 10.939"></path></svg></button></div></form></div>
+<div class="cv-p cv-p-thread" aria-busy="false"><header class="cv-p-thread__header"><button type="button" class="cv-p-thread__back" aria-label="Back" data-cv-tooltip="Back"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-left" aria-hidden="true" focusable="false"><path d="m12 19-7-7 7-7"></path><path d="M19 12H5"></path></svg></button><div class="cv-p-thread__heading"><h2 class="cv-p-thread__title"><span class="cv-p-thread__title-text">Invoice 4521</span></h2><div class="cv-p-thread__meta"><span class="cv-p-protocol cv-p-protocol--header"><span class="cv-p-protocol__code"><span class="cv-p-sr-only">Protocol </span>P-1</span><button type="button" class="cv-p-protocol__copy" aria-label="Copy protocol P-1" data-cv-tooltip="Copy protocol"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></button></span><div class="cv-p-sr-only" role="status" aria-live="polite"></div><span class="cv-p-channels"><span class="cv-p-sr-only">Channels in this conversation: </span><span class="cv-p-channel cv-p-channel--app" data-cv-tooltip="App"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-smartphone" aria-hidden="true"><rect width="14" height="20" x="5" y="2" rx="2" ry="2"></rect><path d="M12 18h.01"></path></svg><span class="cv-p-sr-only">App, </span></span><span class="cv-p-channel cv-p-channel--whatsapp" data-cv-tooltip="WhatsApp"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-circle" aria-hidden="true"><path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"></path></svg><span class="cv-p-sr-only">WhatsApp</span></span></span></div></div></header><div class="cv-p-thread__scroll" tabindex="-1"><div class="cv-p-thread__messages"><div class="cv-p-day" role="separator" aria-label="Thu, 10/01"><time class="cv-p-day__label" dateTime="2026-10-01">Thu, 10/01</time></div><div class="cv-p-bubble cv-p-bubble--mine"><span class="cv-p-sr-only">Me</span><div class="cv-p-text">*<strong>oi</strong>* <button type="button" class="cv-p-copyable cv-p-copyable--phone" aria-label="Copy 11 98888-7777">11 98888-7777</button> <button type="button" class="cv-p-copyable cv-p-copyable--email" aria-label="Copy a@b.com">a@b.com</button> <span class="cv-p-text__link-group"><a class="cv-p-text__link" href="https://x.com" rel="noopener noreferrer nofollow ugc" target="_blank">https://x.com<span class="cv-p-sr-only"> (opens in a new tab)</span></a><button type="button" class="cv-p-text__link-copy" aria-label="Copy https://x.com" data-cv-tooltip="Copy"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></button></span></div><span class="cv-p-bubble__meta"><time class="cv-p-bubble__time" dateTime="2026-10-01T12:00:00.000Z">12:00</time><span class="cv-p-bubble__status"><span class="cv-status-ticks cv-status-ticks--sent" data-cv-tooltip="Sent"><svg viewBox="0 0 20 12" width="15" height="9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 6.5L5 10.5L14.5 1" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path></svg></span><span class="cv-p-sr-only">Sent</span></span></span></div><div class="cv-p-bubble"><span class="cv-p-bubble__author">Op</span><div class="cv-p-text">Hello</div><span class="cv-p-bubble__meta"><time class="cv-p-bubble__time" dateTime="2026-10-01T12:05:00.000Z">12:05</time></span></div></div></div><div class="cv-p-thread__live" role="status" aria-live="polite"></div><form class="cv-p-composer"><div class="cv-p-composer__row"><input class="cv-p-composer__file-input" type="file" multiple="" hidden=""/><button type="button" class="cv-p-composer__attach" aria-label="Attach" data-cv-tooltip="Attach"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-paperclip" aria-hidden="true" focusable="false"><path d="m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551"></path></svg></button><textarea class="cv-p-composer__input" aria-label="Message" placeholder="Write a message…" rows="1">abc</textarea><button type="submit" class="cv-p-button cv-p-button--primary cv-p-composer__send" aria-label="Send" data-cv-tooltip="Send"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-send" aria-hidden="true" focusable="false"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"></path><path d="m21.854 2.147-10.94 10.939"></path></svg></button></div></form></div>

package/src/participant/test-fixtures/thread-tail-off.golden.html

@@ -1 +1 @@
-<div class="cv-p cv-p-thread" aria-busy="false"><header class="cv-p-thread__header"><button type="button" class="cv-p-thread__back" aria-label="Back"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-left" aria-hidden="true" focusable="false"><path d="m12 19-7-7 7-7"></path><path d="M19 12H5"></path></svg></button><div class="cv-p-thread__heading"><h2 class="cv-p-thread__title"><span class="cv-p-thread__title-text">Invoice 4521</span></h2><div class="cv-p-thread__meta"><span class="cv-p-protocol cv-p-protocol--header"><span class="cv-p-protocol__code"><span class="cv-p-sr-only">Protocol </span>P-1</span><button type="button" class="cv-p-protocol__copy" aria-label="Copy protocol P-1"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></button></span><div class="cv-p-sr-only" role="status" aria-live="polite"></div><span class="cv-p-channels"><span class="cv-p-sr-only">Channels in this conversation: </span><span class="cv-p-channel cv-p-channel--app"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-smartphone" aria-hidden="true"><rect width="14" height="20" x="5" y="2" rx="2" ry="2"></rect><path d="M12 18h.01"></path></svg><span class="cv-p-sr-only">App, </span></span><span class="cv-p-channel cv-p-channel--whatsapp"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-circle" aria-hidden="true"><path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"></path></svg><span class="cv-p-sr-only">WhatsApp</span></span></span></div></div></header><div class="cv-p-thread__scroll" tabindex="-1"><button type="button" class="cv-p-thread__older">Load older messages</button><div class="cv-p-thread__messages"><div class="cv-p-day" role="separator" aria-label="Thu, 10/01"><time class="cv-p-day__label" dateTime="2026-10-01">Thu, 10/01</time></div><div class="cv-p-bubble cv-p-bubble--mine cv-p-bubble--no-tail"><span class="cv-p-sr-only">Me</span><div class="cv-p-text">*<strong>oi</strong>* <button type="button" class="cv-p-copyable cv-p-copyable--phone" aria-label="Copy 11 98888-7777">11 98888-7777</button> <button type="button" class="cv-p-copyable cv-p-copyable--email" aria-label="Copy a@b.com">a@b.com</button> <span class="cv-p-text__link-group"><a class="cv-p-text__link" href="https://x.com" rel="noopener noreferrer nofollow ugc" target="_blank">https://x.com<span class="cv-p-sr-only"> (opens in a new tab)</span></a><button type="button" class="cv-p-text__link-copy" aria-label="Copy https://x.com"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></button></span></div><span class="cv-p-bubble__meta"><time class="cv-p-bubble__time" dateTime="2026-10-01T12:00:00.000Z">12:00</time><span class="cv-p-bubble__status"><span class="cv-status-ticks cv-status-ticks--sent"><svg viewBox="0 0 20 12" width="15" height="9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 6.5L5 10.5L14.5 1" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path></svg></span><span class="cv-p-sr-only">Sent</span></span></span></div><div class="cv-p-bubble cv-p-bubble--no-tail"><span class="cv-p-bubble__author">Op</span><div class="cv-p-text">Hello</div><span class="cv-p-bubble__meta"><time class="cv-p-bubble__time" dateTime="2026-10-01T12:05:00.000Z">12:05</time></span></div><div class="cv-p-day" role="separator" aria-label="Fri, 10/02"><time class="cv-p-day__label" dateTime="2026-10-02">Fri, 10/02</time></div><div class="cv-p-bubble cv-p-bubble--mine cv-p-bubble--no-tail"><span class="cv-p-sr-only">Me</span><div class="cv-p-text">Hello</div><span class="cv-p-bubble__meta"><time class="cv-p-bubble__time" dateTime="2026-10-02T12:05:00.000Z">12:05</time><span class="cv-p-bubble__status"><span class="cv-status-ticks cv-status-ticks--delivered"><svg viewBox="0 0 20 12" width="15" height="9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 6.5L4.5 10L11 2" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path><path d="M6 6.5L9.5 10L19 1" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path></svg></span><span class="cv-p-sr-only">Delivered</span></span></span></div><div class="cv-p-bubble cv-p-bubble--mine cv-p-bubble--no-tail"><span class="cv-p-sr-only">Me</span><div class="cv-p-text">W</div><span class="cv-p-bubble__meta"><time class="cv-p-bubble__time" dateTime="2026-10-02T12:06:00.000Z">12:06</time><button type="button" class="cv-p-bubble__retry"><span class="cv-status-ticks cv-status-ticks--failed"><svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-alert lucide-alert-triangle" aria-hidden="true"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path><path d="M12 9v4"></path><path d="M12 17h.01"></path></svg></span><span>Failed — tap to retry</span></button></span><span class="cv-p-bubble__actions"><button type="button" class="cv-p-bubble__action">Edit</button><button type="button" class="cv-p-bubble__action">Discard</button></span></div></div><div class="cv-p-thread__latest"><button type="button" class="cv-p-thread__latest-button" aria-label="Scroll to latest message"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down" aria-hidden="true" focusable="false"><path d="m6 9 6 6 6-6"></path></svg><span class="cv-p-thread__latest-badge" aria-hidden="true">2</span></button></div></div><div class="cv-p-thread__live" role="status" aria-live="polite">New messages</div><form class="cv-p-composer"><div class="cv-p-quick" role="group" aria-label="Quick replies"><button type="button" class="cv-p-chip">T</button></div><div class="cv-p-composer__row"><input class="cv-p-composer__file-input" type="file" multiple="" hidden=""/><button type="button" class="cv-p-composer__attach" aria-label="Attach"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-paperclip" aria-hidden="true" focusable="false"><path d="m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551"></path></svg></button><textarea class="cv-p-composer__input" aria-label="Message" placeholder="Write a message…" rows="1">abc</textarea><button type="submit" class="cv-p-button cv-p-button--primary cv-p-composer__send" aria-label="Send"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-send" aria-hidden="true" focusable="false"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"></path><path d="m21.854 2.147-10.94 10.939"></path></svg></button></div></form></div>
+<div class="cv-p cv-p-thread" aria-busy="false"><header class="cv-p-thread__header"><button type="button" class="cv-p-thread__back" aria-label="Back" data-cv-tooltip="Back"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-left" aria-hidden="true" focusable="false"><path d="m12 19-7-7 7-7"></path><path d="M19 12H5"></path></svg></button><div class="cv-p-thread__heading"><h2 class="cv-p-thread__title"><span class="cv-p-thread__title-text">Invoice 4521</span></h2><div class="cv-p-thread__meta"><span class="cv-p-protocol cv-p-protocol--header"><span class="cv-p-protocol__code"><span class="cv-p-sr-only">Protocol </span>P-1</span><button type="button" class="cv-p-protocol__copy" aria-label="Copy protocol P-1" data-cv-tooltip="Copy protocol"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></button></span><div class="cv-p-sr-only" role="status" aria-live="polite"></div><span class="cv-p-channels"><span class="cv-p-sr-only">Channels in this conversation: </span><span class="cv-p-channel cv-p-channel--app" data-cv-tooltip="App"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-smartphone" aria-hidden="true"><rect width="14" height="20" x="5" y="2" rx="2" ry="2"></rect><path d="M12 18h.01"></path></svg><span class="cv-p-sr-only">App, </span></span><span class="cv-p-channel cv-p-channel--whatsapp" data-cv-tooltip="WhatsApp"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-circle" aria-hidden="true"><path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"></path></svg><span class="cv-p-sr-only">WhatsApp</span></span></span></div></div></header><div class="cv-p-thread__scroll" tabindex="-1"><button type="button" class="cv-p-thread__older">Load older messages</button><div class="cv-p-thread__messages"><div class="cv-p-day" role="separator" aria-label="Thu, 10/01"><time class="cv-p-day__label" dateTime="2026-10-01">Thu, 10/01</time></div><div class="cv-p-bubble cv-p-bubble--mine cv-p-bubble--no-tail"><span class="cv-p-sr-only">Me</span><div class="cv-p-text">*<strong>oi</strong>* <button type="button" class="cv-p-copyable cv-p-copyable--phone" aria-label="Copy 11 98888-7777">11 98888-7777</button> <button type="button" class="cv-p-copyable cv-p-copyable--email" aria-label="Copy a@b.com">a@b.com</button> <span class="cv-p-text__link-group"><a class="cv-p-text__link" href="https://x.com" rel="noopener noreferrer nofollow ugc" target="_blank">https://x.com<span class="cv-p-sr-only"> (opens in a new tab)</span></a><button type="button" class="cv-p-text__link-copy" aria-label="Copy https://x.com" data-cv-tooltip="Copy"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></button></span></div><span class="cv-p-bubble__meta"><time class="cv-p-bubble__time" dateTime="2026-10-01T12:00:00.000Z">12:00</time><span class="cv-p-bubble__status"><span class="cv-status-ticks cv-status-ticks--sent" data-cv-tooltip="Sent"><svg viewBox="0 0 20 12" width="15" height="9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 6.5L5 10.5L14.5 1" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path></svg></span><span class="cv-p-sr-only">Sent</span></span></span></div><div class="cv-p-bubble cv-p-bubble--no-tail"><span class="cv-p-bubble__author">Op</span><div class="cv-p-text">Hello</div><span class="cv-p-bubble__meta"><time class="cv-p-bubble__time" dateTime="2026-10-01T12:05:00.000Z">12:05</time></span></div><div class="cv-p-day" role="separator" aria-label="Fri, 10/02"><time class="cv-p-day__label" dateTime="2026-10-02">Fri, 10/02</time></div><div class="cv-p-bubble cv-p-bubble--mine cv-p-bubble--no-tail"><span class="cv-p-sr-only">Me</span><div class="cv-p-text">Hello</div><span class="cv-p-bubble__meta"><time class="cv-p-bubble__time" dateTime="2026-10-02T12:05:00.000Z">12:05</time><span class="cv-p-bubble__status"><span class="cv-status-ticks cv-status-ticks--delivered" data-cv-tooltip="Delivered"><svg viewBox="0 0 20 12" width="15" height="9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 6.5L4.5 10L11 2" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path><path d="M6 6.5L9.5 10L19 1" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path></svg></span><span class="cv-p-sr-only">Delivered</span></span></span></div><div class="cv-p-bubble cv-p-bubble--mine cv-p-bubble--failed cv-p-bubble--no-tail"><button type="button" class="cv-p-failed-retry" aria-label="Failed — tap to retry" aria-describedby="_R_1kd_" data-cv-tooltip="Failed — tap to retry"><span class="cv-p-failed-retry__icon"><svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true" focusable="false"><path d="M13 8a5 5 0 1 1-1.6-3.7M13 2.5v3h-3" fill="none" stroke="currentColor" stroke-width="1.5"></path></svg></span></button><span class="cv-p-sr-only">Me</span><div class="cv-p-text" id="_R_1kd_">W</div><span class="cv-p-bubble__meta"><time class="cv-p-bubble__time" dateTime="2026-10-02T12:06:00.000Z">12:06</time><span class="cv-p-bubble__status"><span class="cv-status-ticks cv-status-ticks--failed" data-cv-tooltip="Failed"><svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-alert lucide-alert-triangle" aria-hidden="true"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path><path d="M12 9v4"></path><path d="M12 17h.01"></path></svg></span><span class="cv-p-sr-only">Failed</span></span><span class="cv-p-failed-menu"><button type="button" id="_R_erkd_" class="cv-p-failed-menu__trigger" aria-haspopup="menu" aria-expanded="false" aria-label="Message options" data-cv-tooltip="Message options"><span aria-hidden="true">⋯</span></button></span></span></div></div><div class="cv-p-thread__latest"><button type="button" class="cv-p-thread__latest-button" aria-label="Scroll to latest message" data-cv-tooltip="Scroll to latest message"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down" aria-hidden="true" focusable="false"><path d="m6 9 6 6 6-6"></path></svg><span class="cv-p-thread__latest-badge" aria-hidden="true">2</span></button></div></div><div class="cv-p-thread__live" role="status" aria-live="polite">New messages</div><form class="cv-p-composer"><div class="cv-p-quick" role="group" aria-label="Quick replies"><button type="button" class="cv-p-chip">T</button></div><div class="cv-p-composer__row"><input class="cv-p-composer__file-input" type="file" multiple="" hidden=""/><button type="button" class="cv-p-composer__attach" aria-label="Attach" data-cv-tooltip="Attach"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-paperclip" aria-hidden="true" focusable="false"><path d="m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551"></path></svg></button><textarea class="cv-p-composer__input" aria-label="Message" placeholder="Write a message…" rows="1">abc</textarea><button type="submit" class="cv-p-button cv-p-button--primary cv-p-composer__send" aria-label="Send" data-cv-tooltip="Send"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-send" aria-hidden="true" focusable="false"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"></path><path d="m21.854 2.147-10.94 10.939"></path></svg></button></div></form></div>

package/src/participant/useFailedMenuEffects.ts

@@ -0,0 +1,59 @@
+import { useEffect, useLayoutEffect, useState, type Dispatch, type RefObject } from 'react'
+
+import {
+  resolveFailedMenuPlacement,
+  type FailedMenuAction,
+  type FailedMenuPlacement,
+  type FailedMenuState,
+} from './participantFailedMenuState'
+
+const SCROLLER_SELECTOR = '.cv-p-thread__scroll'
+
+export function useFailedMenuInitialFocus(state: FailedMenuState, menuRef: RefObject<HTMLDivElement | null>): void {
+  useEffect(() => {
+    if (!state.isOpen) return
+    const items = Array.from(menuRef.current?.querySelectorAll<HTMLElement>('[role="menuitem"]') ?? [])
+    const target = state.initialFocus === 'last' ? items[items.length - 1] : items[0]
+    target?.focus()
+  }, [state, menuRef])
+}
+
+export function useFailedMenuOutsideClose(
+  isOpen: boolean,
+  containerRef: RefObject<HTMLElement | null>,
+  dispatch: Dispatch<FailedMenuAction>,
+): void {
+  useEffect(() => {
+    if (!isOpen) return
+    function handlePointerDown(event: PointerEvent): void {
+      if (event.target instanceof Node && containerRef.current?.contains(event.target)) return
+      dispatch({ type: 'close' })
+    }
+    document.addEventListener('pointerdown', handlePointerDown)
+    return () => document.removeEventListener('pointerdown', handlePointerDown)
+  }, [isOpen, containerRef, dispatch])
+}
+
+type PlacementRefs = {
+  readonly triggerRef: RefObject<HTMLElement | null>
+  readonly menuRef: RefObject<HTMLElement | null>
+}
+
+export function useFailedMenuPlacement(isOpen: boolean, { triggerRef, menuRef }: PlacementRefs): FailedMenuPlacement {
+  const [placement, setPlacement] = useState<FailedMenuPlacement>('above')
+  useLayoutEffect(() => {
+    const trigger = triggerRef.current
+    const menu = menuRef.current
+    if (!isOpen || !trigger || !menu) return
+    const anchor = trigger.closest('.cv-p-bubble') ?? trigger
+    const scroller = trigger.closest(SCROLLER_SELECTOR)
+    setPlacement(
+      resolveFailedMenuPlacement({
+        anchorTop: anchor.getBoundingClientRect().top,
+        scrollerTop: scroller?.getBoundingClientRect().top ?? 0,
+        menuHeight: menu.getBoundingClientRect().height,
+      }),
+    )
+  }, [isOpen, triggerRef, menuRef])
+  return placement
+}

package/src/participant/useParticipantAudioMediaEvents.ts

@@ -0,0 +1,46 @@
+import type { SyntheticEvent } from 'react'
+
+import { claimAudioPlayback, releaseAudioPlayback } from './participantAudioCoordinator'
+import { resolveMediaDurationSeconds } from './participantAudioFormat'
+import type { PlayerContext } from './participantAudioPlayerState'
+import { useParticipantAudioSourceRetry } from './useParticipantAudioSourceRetry'
+
+export type UseParticipantAudioMediaEventsParams = {
+  readonly context: PlayerContext
+  readonly url: string | undefined
+  readonly onSourceError: (() => Promise<string | undefined>) | undefined
+}
+
+/** Media element events of the player. */
+export function useParticipantAudioMediaEvents({ context, url, onSourceError }: UseParticipantAudioMediaEventsParams) {
+  const { handleRef, state, update } = context
+  const { handleError, allowRetry } = useParticipantAudioSourceRetry({ context, url, onSourceError })
+
+  function handleStop(): void {
+    releaseAudioPlayback(handleRef.current)
+    update({ isPlaying: false })
+  }
+
+  function handleDuration(event: SyntheticEvent<HTMLAudioElement>): void {
+    update({ mediaDuration: resolveMediaDurationSeconds(event.currentTarget.duration) })
+  }
+
+  return {
+    onPlay: () => {
+      claimAudioPlayback(handleRef.current)
+      update({ isPlaying: true })
+    },
+    onPause: handleStop,
+    onEnded: handleStop,
+    onTimeUpdate: (event: SyntheticEvent<HTMLAudioElement>) => {
+      const position = event.currentTarget.currentTime
+      update({ position, maxSeen: Math.max(state.maxSeen, position) })
+    },
+    onLoadedMetadata: (event: SyntheticEvent<HTMLAudioElement>) => {
+      allowRetry()
+      handleDuration(event)
+    },
+    onDurationChange: handleDuration,
+    onError: handleError,
+  }
+}

package/src/participant/useParticipantAudioPlayer.ts

@@ -0,0 +1,52 @@
+import { useCallback, useEffect, useRef, useState, type Ref } from 'react'
+
+import { releaseAudioPlayback, type AudioPlaybackHandle } from './participantAudioCoordinator'
+import { PLAYBACK_RATES, resolveServerDurationSeconds } from './participantAudioFormat'
+import { INITIAL_PLAYER_STATE, type PlayerState } from './participantAudioPlayerState'
+import { useParticipantAudioMediaEvents } from './useParticipantAudioMediaEvents'
+import { useParticipantAudioPlayerActions } from './useParticipantAudioPlayerActions'
+
+export type UseParticipantAudioPlayerParams = {
+  readonly url: string | undefined
+  readonly durationMs: number | undefined
+  /** Fetches a fresh URL after a media error; without it the first error is final. */
+  readonly onSourceError?: () => Promise<string | undefined>
+  readonly mediaRef?: Ref<HTMLAudioElement>
+}
+
+function assignRef(target: Ref<HTMLAudioElement> | undefined, element: HTMLAudioElement | null): void {
+  if (typeof target === 'function') target(element)
+  else if (target) (target as { current: HTMLAudioElement | null }).current = element
+}
+
+export function useParticipantAudioPlayer({ url, durationMs, onSourceError, mediaRef }: UseParticipantAudioPlayerParams) {
+  const audioRef = useRef<HTMLAudioElement | null>(null)
+  const handleRef = useRef<AudioPlaybackHandle>({ pause: () => audioRef.current?.pause() })
+  const [state, setState] = useState<PlayerState>(INITIAL_PLAYER_STATE)
+  const update = useCallback((patch: Partial<PlayerState>) => setState((previous) => ({ ...previous, ...patch })), [])
+  const mediaEvents = useParticipantAudioMediaEvents({ context: { audioRef, handleRef, state, update }, url, onSourceError })
+  const duration = resolveServerDurationSeconds(durationMs) ?? state.mediaDuration
+
+  const setMedia = useCallback(
+    (element: HTMLAudioElement | null) => {
+      audioRef.current = element
+      assignRef(mediaRef, element)
+    },
+    [mediaRef],
+  )
+
+  useEffect(() => {
+    const handle = handleRef.current
+    return () => releaseAudioPlayback(handle)
+  }, [])
+
+  const actions = useParticipantAudioPlayerActions({ context: { audioRef, handleRef, state, update }, url, duration })
+
+  return {
+    state,
+    duration,
+    rate: PLAYBACK_RATES[state.rateIndex] ?? 1,
+    mediaProps: { ...mediaEvents, ref: setMedia },
+    ...actions,
+  }
+}

package/src/participant/useParticipantAudioPlayerActions.ts

@@ -0,0 +1,47 @@
+import type { KeyboardEvent } from 'react'
+
+import { claimAudioPlayback } from './participantAudioCoordinator'
+import { nextRateIndex, resolveSeekKeyTarget } from './participantAudioFormat'
+import { applyPlaybackRate, type PlayerContext } from './participantAudioPlayerState'
+
+export type UseParticipantAudioPlayerActionsParams = {
+  readonly context: PlayerContext
+  readonly url: string | undefined
+  readonly duration: number | undefined
+}
+
+export function useParticipantAudioPlayerActions({ context, url, duration }: UseParticipantAudioPlayerActionsParams) {
+  const { audioRef, handleRef, state, update } = context
+
+  function handleToggle(): void {
+    const audio = audioRef.current
+    if (!audio || !url) return
+    if (!audio.paused) return audio.pause()
+    claimAudioPlayback(handleRef.current)
+    applyPlaybackRate(audio, state.rateIndex)
+    Promise.resolve(audio.play()).catch(() => update({ isPlaying: false }))
+  }
+
+  function seekTo(seconds: number): void {
+    const audio = audioRef.current
+    if (!audio || !url) return
+    audio.currentTime = seconds
+    update({ position: seconds, maxSeen: Math.max(state.maxSeen, seconds) })
+  }
+
+  function handleKeyDown(event: KeyboardEvent<HTMLInputElement>): void {
+    const position = audioRef.current?.currentTime ?? state.position
+    const target = resolveSeekKeyTarget({ key: event.key, position, duration })
+    if (target === undefined) return
+    event.preventDefault()
+    seekTo(target)
+  }
+
+  function handleRateClick(): void {
+    const rateIndex = nextRateIndex(state.rateIndex)
+    if (audioRef.current) applyPlaybackRate(audioRef.current, rateIndex)
+    update({ rateIndex })
+  }
+
+  return { handleToggle, seekTo, handleKeyDown, handleRateClick }
+}

package/src/participant/useParticipantAudioRecorder.ts

@@ -0,0 +1,153 @@
+import { useCallback, useMemo, type RefObject } from 'react'
+
+import { resolveRecordingFormat, type RecordingFormat } from '../audioRecorderFormat'
+import type { ParticipantAudioRecordingOptions } from './participantAudio.types'
+import { buildRecordedFile, openCaptureSession, stopStream } from './participantAudioCapture'
+import {
+  canStartRecording,
+  classifyCapture,
+  classifyMicrophoneError,
+  resolveInterruptionAction,
+  resolveRecordingLimits,
+  type RecorderStatus,
+  type RecordingLimits,
+} from './participantAudioRecorderState'
+import { useRecorderCore, type RecorderCore, type RecordedAudio } from './useParticipantAudioRecorderCore'
+import { useRecorderInterruptionListeners, useRecorderLifecycle, useRecordingClock } from './useParticipantAudioRecorderEffects'
+
+export type { RecordedAudio }
+
+export type UseParticipantAudioRecorderParams = {
+  readonly options?: ParticipantAudioRecordingOptions
+  readonly channelMaxBytes?: number
+}
+
+export type ParticipantAudioRecorder = {
+  readonly status: RecorderStatus
+  readonly elapsedMs: number
+  readonly limits: RecordingLimits
+  readonly recorded: RecordedAudio | undefined
+  readonly audioRef: RefObject<HTMLAudioElement | null>
+  readonly start: () => Promise<void>
+  readonly stop: () => void
+  readonly discard: () => void
+  readonly confirm: () => File | undefined
+}
+
+function useRecorderFinalize(core: RecorderCore): (blob: Blob, durationMs: number) => void {
+  const { statusRef, sessionRef, recordedRef, limitsRef, setRecorded, moveTo, releaseSession } = core
+  return useCallback(
+    (blob: Blob, durationMs: number): void => {
+      const format = sessionRef.current?.format
+      if (statusRef.current !== 'recording' || !format) return
+      releaseSession()
+      const event = classifyCapture({ sizeBytes: blob.size, durationMs }, limitsRef.current)
+      if (event === 'capturedReview') {
+        const file = buildRecordedFile(blob, format)
+        recordedRef.current = { file, objectUrl: URL.createObjectURL(file), durationMs }
+        setRecorded(recordedRef.current)
+      }
+      moveTo(event)
+    },
+    [statusRef, sessionRef, recordedRef, limitsRef, setRecorded, moveTo, releaseSession],
+  )
+}
+
+function useRecorderInterruption(core: RecorderCore): () => void {
+  const { statusRef, sessionRef, tokenRef, audioRef, moveTo } = core
+  return useCallback((): void => {
+    const action = resolveInterruptionAction(statusRef.current)
+    if (action === 'stop') sessionRef.current?.requestStop()
+    if (action === 'pause') audioRef.current?.pause()
+    if (action === 'cancel') {
+      tokenRef.current += 1
+      moveTo('cancel')
+    }
+  }, [statusRef, sessionRef, tokenRef, audioRef, moveTo])
+}
+
+type RecorderStartParams = {
+  readonly onInterrupt: () => void
+  readonly onStopped: (blob: Blob, durationMs: number) => void
+}
+
+function useRecorderStart(core: RecorderCore, { onInterrupt, onStopped }: RecorderStartParams): () => Promise<void> {
+  const { statusRef, tokenRef, sessionRef, setElapsedMs, moveTo } = core
+  const beginRecording = useCallback(
+    (stream: MediaStream, format: RecordingFormat): void => {
+      try {
+        sessionRef.current = openCaptureSession({ stream, format, onInterrupt, onStopped })
+      } catch {
+        stopStream(stream)
+        moveTo('microphoneUnavailable')
+        return
+      }
+      setElapsedMs(0)
+      moveTo('granted')
+    },
+    [sessionRef, setElapsedMs, onInterrupt, onStopped, moveTo],
+  )
+
+  return useCallback(async (): Promise<void> => {
+    if (!canStartRecording(statusRef.current)) return
+    const token = (tokenRef.current += 1)
+    moveTo('request')
+    const format = resolveRecordingFormat()
+    if (!format || !navigator.mediaDevices?.getUserMedia) return moveTo('microphoneUnavailable')
+    let stream: MediaStream
+    try {
+      stream = await navigator.mediaDevices.getUserMedia({ audio: true })
+    } catch (error) {
+      if (token === tokenRef.current) moveTo(classifyMicrophoneError(error))
+      return
+    }
+    if (token !== tokenRef.current) return stopStream(stream)
+    beginRecording(stream, format)
+  }, [statusRef, tokenRef, moveTo, beginRecording])
+}
+
+type RecorderActions = Pick<ParticipantAudioRecorder, 'stop' | 'discard' | 'confirm'> & { readonly teardown: () => void }
+
+function useRecorderActions(core: RecorderCore): RecorderActions {
+  const { statusRef, tokenRef, sessionRef, recordedRef, moveTo, releaseSession, releaseRecorded } = core
+  const stop = useCallback((): void => sessionRef.current?.requestStop(), [sessionRef])
+  const discard = useCallback((): void => {
+    tokenRef.current += 1
+    releaseSession()
+    releaseRecorded()
+    moveTo('cancel')
+  }, [tokenRef, moveTo, releaseRecorded, releaseSession])
+  const confirm = useCallback((): File | undefined => {
+    if (statusRef.current !== 'review') return undefined
+    const file = recordedRef.current?.file
+    releaseRecorded()
+    moveTo('cancel')
+    return file
+  }, [statusRef, recordedRef, moveTo, releaseRecorded])
+  const teardown = useCallback((): void => {
+    tokenRef.current += 1
+    releaseSession()
+    if (recordedRef.current) URL.revokeObjectURL(recordedRef.current.objectUrl)
+    recordedRef.current = undefined
+  }, [tokenRef, recordedRef, releaseSession])
+  return { stop, discard, confirm, teardown }
+}
+
+export function useParticipantAudioRecorder({ options, channelMaxBytes }: UseParticipantAudioRecorderParams = {}): ParticipantAudioRecorder {
+  const limits = useMemo(
+    () => resolveRecordingLimits({ options, channelMaxBytes }),
+    [options?.maxDurationMs, options?.maxSizeBytes, channelMaxBytes],
+  )
+  const core = useRecorderCore(limits)
+  const onInterrupt = useRecorderInterruption(core)
+  const onStopped = useRecorderFinalize(core)
+  const start = useRecorderStart(core, { onInterrupt, onStopped })
+  const { stop, discard, confirm, teardown } = useRecorderActions(core)
+
+  useRecorderInterruptionListeners(onInterrupt)
+  useRecordingClock({ status: core.status, maxDurationMs: limits.maxDurationMs, sessionRef: core.sessionRef, setElapsedMs: core.setElapsedMs, stop })
+  useRecorderLifecycle({ status: core.status, onCaptureChange: options?.onCaptureChange, teardown })
+
+  const { status, elapsedMs, recorded, audioRef } = core
+  return { status, elapsedMs, limits, recorded, audioRef, start, stop, discard, confirm }
+}

package/src/participant/useParticipantAudioRecorderCore.ts

@@ -0,0 +1,55 @@
+import { useCallback, useRef, useState, type Dispatch, type RefObject, type SetStateAction } from 'react'
+
+import type { CaptureSession } from './participantAudioCapture'
+import { reduceRecorderStatus, type RecorderEvent, type RecorderStatus, type RecordingLimits } from './participantAudioRecorderState'
+
+export type RecordedAudio = { readonly file: File; readonly objectUrl: string; readonly durationMs: number }
+
+export type RecorderCore = {
+  readonly status: RecorderStatus
+  readonly elapsedMs: number
+  readonly setElapsedMs: Dispatch<SetStateAction<number>>
+  readonly recorded: RecordedAudio | undefined
+  readonly setRecorded: (recorded: RecordedAudio | undefined) => void
+  readonly limitsRef: RefObject<RecordingLimits>
+  readonly statusRef: RefObject<RecorderStatus>
+  readonly tokenRef: RefObject<number>
+  readonly sessionRef: RefObject<CaptureSession | undefined>
+  readonly recordedRef: RefObject<RecordedAudio | undefined>
+  readonly audioRef: RefObject<HTMLAudioElement | null>
+  readonly moveTo: (event: RecorderEvent) => void
+  readonly releaseSession: () => void
+  readonly releaseRecorded: () => void
+}
+
+export function useRecorderCore(limits: RecordingLimits): RecorderCore {
+  const [status, setStatus] = useState<RecorderStatus>('idle')
+  const [elapsedMs, setElapsedMs] = useState(0)
+  const [recorded, setRecorded] = useState<RecordedAudio | undefined>()
+  const statusRef = useRef<RecorderStatus>('idle')
+  const limitsRef = useRef(limits)
+  const tokenRef = useRef(0)
+  const sessionRef = useRef<CaptureSession | undefined>(undefined)
+  const recordedRef = useRef<RecordedAudio | undefined>(undefined)
+  const audioRef = useRef<HTMLAudioElement | null>(null)
+  limitsRef.current = limits
+
+  const moveTo = useCallback((event: RecorderEvent): void => {
+    statusRef.current = reduceRecorderStatus(statusRef.current, event)
+    setStatus(statusRef.current)
+  }, [])
+  const releaseSession = useCallback((): void => {
+    sessionRef.current?.release()
+    sessionRef.current = undefined
+  }, [])
+  const releaseRecorded = useCallback((): void => {
+    if (recordedRef.current) URL.revokeObjectURL(recordedRef.current.objectUrl)
+    recordedRef.current = undefined
+    setRecorded(undefined)
+  }, [])
+
+  return {
+    status, elapsedMs, setElapsedMs, recorded, setRecorded, limitsRef, statusRef, tokenRef,
+    sessionRef, recordedRef, audioRef, moveTo, releaseSession, releaseRecorded,
+  }
+}

package/src/participant/useParticipantAudioRecorderEffects.ts

@@ -0,0 +1,70 @@
+import { useEffect, useRef, type Dispatch, type MutableRefObject, type SetStateAction } from 'react'
+
+import type { CaptureSession } from './participantAudioCapture'
+import type { RecorderStatus } from './participantAudioRecorderState'
+
+const ELAPSED_TICK_MS = 250
+
+export function useRecorderInterruptionListeners(onInterruption: () => void): void {
+  useEffect(() => {
+    const handleVisibilityChange = (): void => {
+      if (document.visibilityState === 'hidden') onInterruption()
+    }
+    document.addEventListener('visibilitychange', handleVisibilityChange)
+    window.addEventListener('pagehide', onInterruption)
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange)
+      window.removeEventListener('pagehide', onInterruption)
+    }
+  }, [onInterruption])
+}
+
+type RecordingClockParams = {
+  readonly status: RecorderStatus
+  readonly maxDurationMs: number
+  readonly sessionRef: MutableRefObject<CaptureSession | undefined>
+  readonly setElapsedMs: Dispatch<SetStateAction<number>>
+  readonly stop: () => void
+}
+
+export function useRecordingClock({ status, maxDurationMs, sessionRef, setElapsedMs, stop }: RecordingClockParams): void {
+  useEffect(() => {
+    if (status !== 'recording') return undefined
+    const startedAt = sessionRef.current?.startedAt ?? Date.now()
+    const tick = setInterval(() => setElapsedMs(Date.now() - startedAt), ELAPSED_TICK_MS)
+    const ceiling = setTimeout(stop, maxDurationMs)
+    return () => {
+      clearInterval(tick)
+      clearTimeout(ceiling)
+    }
+  }, [status, maxDurationMs, sessionRef, setElapsedMs, stop])
+}
+
+type RecorderLifecycleParams = {
+  readonly status: RecorderStatus
+  readonly onCaptureChange: ((isCapturing: boolean) => void) | undefined
+  readonly teardown: () => void
+}
+
+export function useRecorderLifecycle({ status, onCaptureChange, teardown }: RecorderLifecycleParams): void {
+  const isCapturing = status === 'requesting' || status === 'recording' || status === 'review'
+  const reportedRef = useRef(false)
+  const onCaptureChangeRef = useRef(onCaptureChange)
+  onCaptureChangeRef.current = onCaptureChange
+
+  useEffect(() => {
+    if (reportedRef.current === isCapturing) return
+    reportedRef.current = isCapturing
+    onCaptureChangeRef.current?.(isCapturing)
+  }, [isCapturing])
+
+  useEffect(
+    () => () => {
+      teardown()
+      if (!reportedRef.current) return
+      reportedRef.current = false
+      onCaptureChangeRef.current?.(false)
+    },
+    [teardown],
+  )
+}