DX-1128: docs local cn + heights utils (drop @ably/ui/core/utils)

[jamiehenson]

Part of DX-1128. Drops @ably/ui/core/utils by vendoring the two utilities docs uses.

What

• src/utilities/cn.ts — twMerge(clsx(...)), local replacement for @ably/ui/core/utils/cn.
• src/utilities/heights.ts — layout height helpers, replacing @ably/ui/core/utils/heights.
• clsx + tailwind-merge promoted to direct deps (were transitive via @ably/ui).
• Codemodded ~34 import sites across components/pages.

Behaviour

Pure import-source swap — same functions, same output. No visual change.

Stack (DX-1128)

	PR	Role
	#3409	Design foundation — vendor @ably/ui tokens + reset/core CSS (merged)
▶	#3410	Local cn + heights utils
	#3411	Docs-native Icon component (Ably glyphs only; Heroicons imported directly)
	#3412	Presentational components (Badge, Button, LinkButton, FeaturedLink, Status)
	#3413	Interactive components (SegmentedControl, TabMenu)
	#3414	ProductTile + product data (leaf)
	#3415	syntax-highlighter util + registry
	#3416	Code + CodeSnippet — completes the lift; prunes dead CSS + drops @ably/ui Tailwind scan

#3410–#3416 are a linear stack, each building on the previous; #3409 has merged to main. ▶ = this PR.

Testing

• Load the review app.
• Check a sufficient sample of pages load with no visual regressions.

🤖 Generated with Claude Code

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 450f5704-6ffe-4e1a-bee3-65270aa378e4

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch dx-1128/docs-local-cn-heights

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[jamiehenson]

Reviewed this — can't formally approve my own PR, so notes here. tl;dr: clean, low-risk — pure import-source swap, good to go once CI's green on the 18.3.1 base.

Verified:

• Codemod's complete — all 33 cn + 4 heights imports swapped to src/utilities/*, none missed.
• cn.ts is the canonical twMerge(clsx(inputs)) shadcn impl.
• heights.ts matches upstream 18.3.1 exactly (HEADER_HEIGHT 64 / HEADER_BOTTOM_MARGIN 24; componentMaxHeight same output).
• clsx/tailwind-merge pinned to the versions @ably/ui already used, so no resolution drift.

Two nits, neither blocking:

• componentMaxHeight uses a template literal where upstream uses + "px" concat — identical output, only worth matching for byte-parity against source.
• No unit tests for the two utils — fine given how trivial they are, though a 2-liner on componentMaxHeight would be cheap.

Not yet confirmed: full Gatsby-5.16 build/tsc on the freshly-rebased base — worth eyeballing CI before un-drafting.

~ 𝒞𝓁𝒶𝓊𝒹𝑒

[kennethkalmer]

Neat, love the stacked table in the PR as well