fix(ui): keep truncateWithEndVisible code-point-safe in short-width fallback

[alexcarpenter]

truncateWithEndVisible keeps the start and end of a string and puts an ellipsis in the middle. The main path builds the result from Array.from(str), so it slices on code points and never breaks a character. The short-width fallback (taken when maxLength <= endChars + 3) instead returned ELLIPSIS + str.slice(-endChars), which slices on UTF-16 code units.

For characters outside the BMP (CJK Extension B kanji, emoji) each character is a surrogate pair of two code units, so str.slice(-endChars) can cut one in half and leave a lone surrogate:

truncateWithEndVisible('𠮷𠮷𠮷𠮷𠮷', 8, 5)
// before: '...\uDFB7𠮷𠮷'  (broken leading character)
// after:  '...𠮷𠮷𠮷𠮷𠮷'

The fallback now slices by code point, the same way the main path already does. ASCII inputs are unaffected and the existing tests still pass. Added a test covering the fallback with astral characters.

---

Re-creates #9029 from a branch in this repo so CI runs with the necessary secrets. Authored by @greymoth-jp; original commit authorship is preserved in git history.

Summary by CodeRabbit

• Bug Fixes
  • Improved text truncation so very short widths no longer split emoji or other non-BMP characters into broken symbols.
  • Made character counting and fallback truncation behave consistently with Unicode code points, preserving readable output.
  • Added coverage for Unicode edge cases to prevent regressions.

[changeset-bot]

🦋 Changeset detected

Latest commit: 931e3cf

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@clerk/ui	Patch
@clerk/chrome-extension	Patch
@clerk/swingset	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	Jun 30, 2026 5:52pm
swingset	Ready	Preview, Comment	Jun 30, 2026 5:52pm

[pkg-pr-new]

Open in StackBlitz

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@9047

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@9047

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@9047

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@9047

@clerk/electron

npm i https://pkg.pr.new/@clerk/electron@9047

@clerk/electron-passkeys

npm i https://pkg.pr.new/@clerk/electron-passkeys@9047

@clerk/eslint-plugin

npm i https://pkg.pr.new/@clerk/eslint-plugin@9047

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@9047

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@9047

@clerk/express

npm i https://pkg.pr.new/@clerk/express@9047

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@9047

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@9047

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@9047

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@9047

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@9047

@clerk/react

npm i https://pkg.pr.new/@clerk/react@9047

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@9047

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@9047

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@9047

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@9047

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@9047

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@9047

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@9047

commit: 931e3cf

[github-actions]

API Changes Report

Generated by Break Check on 2026-06-30T17:54:25.979Z

Summary

Metric	Count
Packages analyzed	19
Packages with changes	0
🔴 Breaking changes	0
🟡 Non-breaking changes	0
🟢 Additions	0

No API Changes Detected

All packages have stable APIs with no detected changes.

---

Report generated by Break Check

_{Last ran on 931e3cf.}

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Repository UI (inherited)

Review profile: CHILL

Plan: Pro Plus

Run ID: f1944d7e-e579-4eff-a3c5-86fe95ea5b82

📥 Commits

Reviewing files that changed from the base of the PR and between 4306146 and 931e3cf.

📒 Files selected for processing (3)

• .changeset/truncate-surrogate-safe.md
• packages/ui/src/utils/__tests__/truncateTextWithEndVisible.test.ts
• packages/ui/src/utils/truncateTextWithEndVisible.ts

---

📝 Walkthrough

Walkthrough

truncateWithEndVisible is updated to use Array.from(str) for code-point-aware length checks and slicing, fixing broken surrogate pairs when truncating strings containing out-of-BMP characters. Two new test cases and a patch changeset entry are added.

Changes

Surrogate-safe truncation fix

Layer / File(s)	Summary
Fix and test for surrogate-safe fallback packages/ui/src/utils/truncateTextWithEndVisible.ts, packages/ui/src/utils/__tests__/truncateTextWithEndVisible.test.ts, .changeset/truncate-surrogate-safe.md	Splits the falsy-string guard from the length check, converts the string to a chars array via Array.from, uses that array for both the "no truncation needed" check and the short-maxLength branch. Adds tests for CJK Extension B and emoji inputs, and a patch changeset entry.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Poem

🐇 A rabbit once sliced through a CJK glyph,
And broke it in two — quite a Unicode cliff!
Now Array.from guards every code point,
No surrogate halves left out of joint.
Hop hop, the fix lands without a mishap! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main fix: making the short-width fallback of truncateWithEndVisible code-point-safe.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

---

_{Comment @coderabbitai help to get the list of available commands.}

[wobsoriano]

👍🏼