Rapport, a contacts app on shadcn/ui and Base UI: six traps from the shadcn CLI to phone numbers

			<Popover open={renaming} onOpenChange={setRenaming}>
				<PopoverTrigger nativeButton={false} render={<span aria-hidden tabIndex={-1} className="absolute inset-y-0 right-0 w-px" />} />

			<CheckboxPrimitive.Indicator
				data-slot="checkbox-indicator"
				className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
			>
				<CheckIcon className="in-data-indeterminate:hidden" />
				<MinusIcon className="hidden in-data-indeterminate:block" />
			</CheckboxPrimitive.Indicator>

const collator = new Intl.Collator("en", { sensitivity: "base", numeric: true })

export function sortContacts(list: Contact[], sort: Sort) {
	const sign = sort.dir === "asc" ? 1 : -1
	const byName = (a: Contact, b: Contact) => collator.compare(fullName(a), fullName(b))
	const compare: Record<Sort["field"], (a: Contact, b: Contact) => number> = {
		name: (a, b) => sign * byName(a, b),
		// "Ascending" for dates reads as newest first, like every inbox.
		added: (a, b) => sign * (b.addedAt - a.addedAt) || byName(a, b),
		// Contacts without a city go last, whichever way the list runs.
		city: (a, b) => (!a.city !== !b.city ? (a.city ? -1 : 1) : sign * collator.compare(a.city, b.city)) || byName(a, b),

function toValues(c?: Contact, defaults?: Partial<ContactDraft>): Values {
	const src = { ...c, ...defaults }
	const parsed = src.phone ? parsePhoneNumberFromString(src.phone) : undefined
	// +1 is shared by the US and Canada: Canada only when the city says so (753 is a Canadian area code, Boston isn't).
	const country = parsed?.countryCallingCode === "1" ? (parsed.country === "CA" && CANADIAN.test(src.city ?? "") ? "CA" : "US") : ((parsed?.country as string) ?? "US")

/** Fetches and decodes the photos once, so switching folders never flashes initials. Gives up after `timeout`. */
export function usePreloadedPhotos(urls: string[], timeout = 2500) {
	const [done, setDone] = React.useState(false)
	const key = urls.join("|")
	React.useEffect(() => {
		let alive = true
		const list = key ? key.split("|").filter((u) => u && !u.startsWith("data:")) : []
		const loads = list.map(
			(src) =>
				new Promise<void>((resolve) => {
					const img = new Image()
					img.decoding = "async"
					img.src = src
					img.decode().then(resolve, resolve)
				})
		)
		Promise.race([Promise.all(loads), new Promise((r) => setTimeout(r, timeout))]).then(() => alive && setDone(true))
		return () => {
			alive = false
		}
	}, [key, timeout])
	return done
}