{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"domain-connect","type":"registry:component","title":"Domain connect","description":"A custom domain from typed to live: copyable records that tick green as DNS finds them, checks that wait longer each time, and a rail that runs to Live.","author":"Hairline UI","dependencies":["lucide-react"],"registryDependencies":["https://hairlineui.com/r/text-morph.json?as=dependency","https://hairlineui.com/r/number-roll.json?as=dependency","https://hairlineui.com/r/status-button.json?as=dependency"],"files":[{"path":"registry/domain-connect.tsx","type":"registry:component","content":"// Hairline UI · domain-connect · MIT License\n// Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components\n\n\"use client\";\n\nimport * as React from \"react\";\nimport { ArrowUpRight, Clock, Copy, Globe, Trash2 } from \"lucide-react\";\nimport { ConfirmAction } from \"./confirm-action\";\nimport { NumberRoll } from \"./number-roll\";\nimport { StatusButton, type ActionStatus } from \"./status-button\";\nimport { TextMorph } from \"./text-morph\";\n\n/* ─────────────────────────────────────────────────────────\n * DOMAIN CONNECT: a custom domain, from typed to live\n *\n * add type or paste an address (a pasted URL is cut\n * down to its host); Connect, and the address lifts\n * out of the field into the domain's own heading as\n * the records it needs open beneath it\n * records every record has its own copy buttons; each one\n * ticks green the moment your server sees it, and\n * the rail above fills record by record\n * checks the card checks again by itself, waiting longer\n * each time (10s, 20s, 30s, 1 min, 2 min, 5 min):\n * \"Checking again in 0:42\" rolls down; Check now\n * asks at once. It never checks while the tab is\n * hidden\n * live the rail runs to its end, the status morphs to\n * Live with a drawn check, the records fold away\n * behind \"Show records\" and the address becomes a\n * link\n *\n * Your server owns the truth: onAdd registers the domain and\n * check() reports what it sees. Works with Cloudflare for SaaS,\n * Vercel's domains API, or Resend and Postmark sending domains.\n * ───────────────────────────────────────────────────────── */\n\nexport type DnsRecordType = \"CNAME\" | \"TXT\" | \"A\" | \"AAAA\" | \"MX\" | \"CAA\";\nexport type DnsRecordStatus = \"pending\" | \"verified\" | \"failed\";\nexport type DomainStatus = \"pending\" | \"issuing\" | \"active\" | \"failed\";\n\nexport interface DnsRecord {\n type: DnsRecordType;\n /** The host to set it on, e.g. \"app\" or \"_acme-challenge.app\". */\n name: string;\n value: string;\n priority?: number;\n status?: DnsRecordStatus;\n}\n\nexport interface DomainState {\n domain: string;\n /** pending: waiting for DNS; issuing: DNS is right, the certificate is on its way; active: live. */\n status: DomainStatus;\n records: DnsRecord[];\n /** Why it failed, or a hint while it's pending (\"CNAME points at the old host\"). */\n message?: string | null;\n}\n\nexport interface DomainConnectProps extends Omit, \"defaultValue\" | \"onChange\"> {\n value?: DomainState | null;\n defaultValue?: DomainState | null;\n onValueChange?: (state: DomainState | null) => void;\n /** Registers the domain and returns the records it needs. Throw to keep the field and say why. */\n onAdd: (domain: string) => Promise;\n /** Asks your server what it sees now. */\n check: (domain: string, options: { signal: AbortSignal }) => Promise;\n onRemove?: (domain: string) => Promise | unknown;\n /** Seconds to wait before each automatic check; the last repeats. */\n schedule?: number[];\n title?: string;\n description?: string;\n placeholder?: string;\n}\n\nconst EASE = \"cubic-bezier(0.16,1,0.3,1)\";\nconst FOCUS = \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40\";\nconst SCHEDULE = [10, 20, 30, 60, 120, 300];\nconst HOST = /^(?=.{1,253}$)(?:(?!-)[a-z0-9-]{1,63}(? void) => {\n const query = window.matchMedia(reducedQuery);\n query.addEventListener(\"change\", onChange);\n return () => query.removeEventListener(\"change\", onChange);\n};\nconst useReducedMotion = () =>\n React.useSyncExternalStore(subscribeReduced, () => window.matchMedia(reducedQuery).matches, () => false);\n\n/** \"https://App.Fernhill.co/pricing\" → \"app.fernhill.co\". */\nexport const toHost = (input: string) =>\n input\n .trim()\n .toLowerCase()\n .replace(/^[a-z]+:\\/\\//, \"\")\n .replace(/[/?#].*$/, \"\")\n .replace(/:\\d+$/, \"\")\n .replace(/\\.$/, \"\");\n\nconst message = (e: unknown, fallback: string) => (e instanceof Error && e.message ? e.message : fallback);\n\nfunction Fold({ open, reduced, children }: { open: boolean; reduced: boolean; children: React.ReactNode }) {\n const kept = React.useRef(children);\n if (open) kept.current = children;\n return (\n
\n
{open ? children : kept.current}
\n
\n );\n}\n\nfunction Check({ drawn, reduced, className = \"size-3.5\" }: { drawn: boolean; reduced: boolean; className?: string }) {\n return (\n \n \n \n );\n}\n\n/** Layers that swap through a blur: one visible at a time. */\nfunction Swap({ show, reduced, layers, className = \"size-3.5\" }: { show: string; reduced: boolean; layers: Record; className?: string }) {\n return (\n \n {Object.entries(layers).map(([k, node]) => (\n \n {node}\n \n ))}\n \n );\n}\n\nconst Spinner = ({ on }: { on: boolean }) => ;\n\n/** A copy button whose icon turns into a drawn check. */\nfunction CopyValue({ text, label, reduced }: { text: string; label: string; reduced: boolean }) {\n const [done, setDone] = React.useState(false);\n React.useEffect(() => {\n if (!done) return;\n const timer = window.setTimeout(() => setDone(false), 1400);\n return () => window.clearTimeout(timer);\n }, [done]);\n return (\n {\n try {\n await navigator.clipboard.writeText(text);\n setDone(true);\n } catch {\n /* The value is on screen to select by hand. */\n }\n }}\n className={`grid size-6 shrink-0 cursor-pointer place-items-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-foreground ${FOCUS} ${done ? \"text-emerald-600 dark:text-emerald-400\" : \"\"}`}\n >\n , done: }} />\n \n );\n}\n\nfunction RecordRow({ r, index, reduced }: { r: DnsRecord; index: number; reduced: boolean }) {\n const ref = React.useRef(null);\n const status = r.status ?? \"pending\";\n const was = React.useRef(status);\n // A record that just verified lights up for a moment.\n React.useEffect(() => {\n if (was.current === status) return;\n was.current = status;\n if (status === \"verified\" && !reduced)\n ref.current?.animate([{ backgroundColor: \"color-mix(in oklab, var(--color-emerald-500) 9%, transparent)\" }, { backgroundColor: \"transparent\" }], { duration: 1400, easing: EASE });\n }, [status, reduced]);\n React.useLayoutEffect(() => {\n if (!reduced) ref.current?.animate([{ opacity: 0, transform: \"translateY(6px)\", filter: \"blur(3px)\" }, { opacity: 1, transform: \"none\", filter: \"blur(0px)\" }], { duration: 420, delay: 180 + index * 70, easing: EASE, fill: \"backwards\" });\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n const said = status === \"verified\" ? \"Found\" : status === \"failed\" ? \"Wrong value\" : \"Waiting\";\n return (\n
\n \n {r.type}\n {r.priority !== undefined && {r.priority}}\n \n \n {r.name}\n \n \n \n , verified: , failed: }}\n />\n \n {said}\n \n {said}\n \n \n {r.value}\n \n \n
\n );\n}\n\n/** \"Checking again in 0:42\", rolling down; \"Checking\" while it asks. */\nfunction Countdown({ at, checking, reduced }: { at: number | null; checking: boolean; reduced: boolean }) {\n const [now, setNow] = React.useState(() => Date.now());\n const left = at === null ? 0 : Math.max(0, Math.ceil((at - now) / 1000));\n React.useEffect(() => {\n if (at === null || checking) return;\n setNow(Date.now());\n }, [at, checking]);\n React.useEffect(() => {\n if (at === null || checking || left <= 0) return;\n const timer = window.setTimeout(() => setNow(Date.now()), 1000 - (Date.now() % 1000) + 10);\n return () => window.clearTimeout(timer);\n }, [at, checking, left, now]);\n const counting = !checking && at !== null && left > 0;\n return (\n \n , checking: }} />\n {checking ? \"Checking DNS\" : \"Checking again in\"}\n \n \n \n :\n \n \n \n \n \n );\n}\n\nconst STEPS = [\"DNS records\", \"Certificate\", \"Live\"];\n\nfunction Rail({ state, reduced }: { state: DomainState; reduced: boolean }) {\n const total = state.records.length || 1;\n const found = state.records.filter((r) => r.status === \"verified\").length;\n const fill = state.status === \"active\" ? 1 : state.status === \"issuing\" ? 0.5 : (found / total) * 0.5;\n const reached = (i: number) => (i === 0 ? found === total || state.status === \"issuing\" || state.status === \"active\" : state.status === \"active\");\n const current = state.status === \"failed\" ? -1 : state.status === \"active\" ? -1 : state.status === \"issuing\" ? 1 : 0;\n return (\n
\n
\n \n {STEPS.map((_, i) => {\n const done = reached(i);\n return (\n \n {current === i && !done ? : }\n \n );\n })}\n
\n
\n {STEPS.map((s, i) => (\n \n {s}\n \n ))}\n
\n
\n );\n}\n\nexport function DomainConnect({\n value,\n defaultValue = null,\n onValueChange,\n onAdd,\n check,\n onRemove,\n schedule = SCHEDULE,\n title = \"Custom domain\",\n description = \"Serve your workspace from an address you own.\",\n placeholder = \"app.yourcompany.com\",\n className = \"\",\n ...props\n}: DomainConnectProps) {\n const reduced = useReducedMotion();\n const id = React.useId();\n const [inner, setInner] = React.useState(defaultValue);\n const state = value !== undefined ? value : inner;\n const [typed, setTyped] = React.useState(\"\");\n const [adding, setAdding] = React.useState(\"idle\");\n const [addError, setAddError] = React.useState(null);\n const [checking, setChecking] = React.useState(false);\n const [nextAt, setNextAt] = React.useState(null);\n const [showRecords, setShowRecords] = React.useState(false);\n const [announce, setAnnounce] = React.useState(\"\");\n const inputRef = React.useRef(null);\n const fieldRef = React.useRef(null);\n const headRef = React.useRef(null);\n const flight = React.useRef(null);\n const attempt = React.useRef(0);\n const ctrl = React.useRef(null);\n const latest = React.useRef(state);\n latest.current = state;\n\n const commit = (next: DomainState | null) => {\n if (value === undefined) setInner(next);\n onValueChange?.(next);\n };\n\n const waiting = Boolean(state && (state.status === \"pending\" || state.status === \"issuing\"));\n\n const runCheck = React.useCallback(async () => {\n const cur = latest.current;\n if (!cur) return;\n ctrl.current?.abort();\n const c = new AbortController();\n ctrl.current = c;\n setChecking(true);\n setNextAt(null);\n try {\n const next = await check(cur.domain, { signal: c.signal });\n if (c.signal.aborted || latest.current?.domain !== cur.domain) return;\n const before = cur.records.filter((r) => r.status === \"verified\").length;\n const after = next.records.filter((r) => r.status === \"verified\").length;\n if (next.status !== cur.status) setAnnounce(next.status === \"active\" ? `${next.domain} is live.` : next.status === \"issuing\" ? \"DNS records found. Issuing a certificate.\" : next.status === \"failed\" ? next.message ?? \"The domain couldn't be connected.\" : \"\");\n else if (after > before) setAnnounce(`${after} of ${next.records.length} records found.`);\n commit(next);\n attempt.current++;\n } catch {\n if (c.signal.aborted) return;\n attempt.current++;\n } finally {\n if (!c.signal.aborted) setChecking(false);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [check, onValueChange, value]);\n\n // The next automatic check: further off each time, never while the tab is hidden.\n React.useEffect(() => {\n if (!waiting || checking) return;\n const wait = schedule[Math.min(attempt.current, schedule.length - 1)] * 1000;\n const at = Date.now() + wait;\n setNextAt(at);\n let onShow: (() => void) | null = null;\n const timer = window.setTimeout(() => {\n if (!document.hidden) return runCheck();\n // Hidden tab: wait until it's looked at again.\n onShow = () => {\n document.removeEventListener(\"visibilitychange\", onShow!);\n onShow = null;\n runCheck();\n };\n document.addEventListener(\"visibilitychange\", onShow);\n }, wait);\n return () => {\n window.clearTimeout(timer);\n if (onShow) document.removeEventListener(\"visibilitychange\", onShow);\n };\n }, [waiting, checking, schedule, runCheck, state?.domain, state?.status]);\n\n React.useEffect(() => () => ctrl.current?.abort(), []);\n\n // The address lifts out of the field into the heading.\n React.useLayoutEffect(() => {\n const from = flight.current;\n const head = headRef.current;\n if (!from || !head || !state || reduced) return;\n flight.current = null;\n const to = head.getBoundingClientRect();\n head.animate(\n [{ transform: `translate(${from.left - to.left}px, ${from.top + from.height / 2 - (to.top + to.height / 2)}px)` }, { transform: \"none\" }],\n { duration: 620, easing: EASE },\n );\n }, [state, reduced]);\n\n const add = async () => {\n if (adding === \"pending\") return;\n const host = toHost(typed);\n if (!HOST.test(host)) {\n setAddError(host ? `“${host}” isn't a domain. Try something like ${placeholder}.` : \"Enter the domain you want to use.\");\n if (!reduced) fieldRef.current?.animate(SHAKE, { duration: 380, easing: \"ease-out\" });\n inputRef.current?.focus();\n return;\n }\n if (host !== typed) setTyped(host);\n setAdding(\"pending\");\n setAddError(null);\n try {\n const next = await onAdd(host);\n const input = inputRef.current;\n if (input) {\n const r = input.getBoundingClientRect();\n const pad = parseFloat(getComputedStyle(input).paddingLeft) || 0;\n flight.current = new DOMRect(r.left + pad, r.top, r.width, r.height);\n }\n attempt.current = 0;\n setShowRecords(false);\n commit(next);\n setAdding(\"idle\");\n setTyped(\"\");\n setAnnounce(`${next.domain} added. Add the records below at your DNS provider.`);\n } catch (e) {\n setAdding(\"error\");\n setAddError(message(e, \"That domain couldn't be added. Try again.\"));\n }\n };\n\n const remove = async () => {\n if (!state) return;\n await onRemove?.(state.domain);\n ctrl.current?.abort();\n setChecking(false);\n setNextAt(null);\n setAnnounce(`${state.domain} removed.`);\n window.setTimeout(() => {\n commit(null);\n requestAnimationFrame(() => inputRef.current?.focus({ preventScroll: true }));\n }, 500);\n };\n\n const live = state?.status === \"active\";\n const failed = state?.status === \"failed\";\n const found = state ? state.records.filter((r) => r.status === \"verified\").length : 0;\n const pill = !state\n ? \"\"\n : live\n ? \"Live\"\n : failed\n ? \"Not connected\"\n : state.status === \"issuing\"\n ? \"Issuing certificate\"\n : found\n ? `${found} of ${state.records.length} records found`\n : \"Waiting for DNS\";\n\n return (\n
\n
\n

{title}

\n

{description}

\n
\n\n {/* The field: only while there's no domain. */}\n \n {\n e.preventDefault();\n add();\n }}\n >\n \n
\n \n \n {\n setTyped(e.target.value);\n setAddError(null);\n if (adding === \"error\") setAdding(\"idle\");\n }}\n onBlur={() => typed && setTyped(toHost(typed))}\n onPaste={(e) => {\n const text = e.clipboardData.getData(\"text\");\n if (!/[:/]/.test(text)) return;\n e.preventDefault();\n setTyped(toHost(text));\n }}\n readOnly={adding === \"pending\"}\n placeholder={placeholder}\n inputMode=\"url\"\n autoComplete=\"off\"\n autoCapitalize=\"off\"\n spellCheck={false}\n aria-invalid={Boolean(addError) || undefined}\n aria-describedby={addError ? `${id}-error` : undefined}\n className=\"h-full min-w-0 flex-1 bg-transparent text-[16px] text-foreground outline-none placeholder:text-muted-foreground/70 [@media(pointer:fine)]:text-[13.5px]\"\n />\n
\n \n
\n \n

\n {addError}\n

\n \n \n \n\n {/* The domain: heading, rail, records, and the next check. */}\n \n {state && (\n
\n
\n
\n

\n {live ? (\n \n {state.domain}\n \n \n ) : (\n state.domain\n )}\n

\n

\n \n \n {waiting && !reduced && }\n \n {pill}\n

\n
\n {onRemove && (\n } label={`Remove ${state.domain}`} labels={{ idle: \"Remove\", pending: \"Removing\", success: \"Removed\", error: \"Try again\" }} onConfirm={remove} />\n )}\n
\n\n
\n \n
\n\n \n
\n

{live ? \"These records keep it connected.\" : \"Add these at your DNS provider. Changes can take a few minutes to show.\"}

\n
\n {state.records.map((r, i) => (\n \n ))}\n
\n
\n \n\n \n

{state.message}

\n \n\n
\n {live ? (\n setShowRecords((s) => !s)}\n className={`-ml-2 h-7 cursor-pointer rounded-full px-2 font-medium transition-colors hover:bg-accent hover:text-foreground ${FOCUS}`}\n >\n {showRecords ? \"Hide records\" : \"Show records\"}\n \n ) : failed ? (\n Fix the records, then check again.\n ) : (\n \n )}\n {!live && (\n {\n attempt.current = 0;\n runCheck();\n }}\n aria-disabled={checking || undefined}\n className={`h-7 shrink-0 cursor-pointer rounded-full px-3 font-medium text-foreground shadow-[inset_0_0_0_1px_var(--border)] transition-[background-color,opacity] hover:bg-accent aria-disabled:cursor-default aria-disabled:opacity-50 ${FOCUS}`}\n >\n Check now\n \n )}\n
\n
\n )}\n \n\n \n {announce}\n \n \n );\n}\n"},{"path":"registry/confirm-action.tsx","type":"registry:component","content":"// Hairline UI · domain-connect · MIT License\n// Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components\n\n\"use client\";\n\nimport * as React from \"react\";\nimport { StatusButton, type ActionStatus } from \"./status-button\";\n\n/* ─────────────────────────────────────────────────────────\n * CONFIRM ACTION: an icon that asks before it acts\n *\n * ask a click and the icon's own circle stretches into\n * a pill: the confirm button opens out to its left\n * and the icon turns into a cross that takes it back\n * act the confirm button is a status button, so it says\n * Revoking, Revoked or Try again in place\n * leave Escape, the cross, or a click or focus anywhere\n * else folds it back into the icon\n *\n * Nothing opens over the row it belongs to; the question sits\n * where the icon was.\n * ───────────────────────────────────────────────────────── */\n\nexport interface ConfirmActionProps extends Omit, \"onClick\"> {\n icon: React.ReactNode;\n /** The icon button's accessible name, e.g. \"Revoke Production key\". */\n label: string;\n /** The confirm button's words per state, e.g. { idle: \"Revoke\", pending: \"Revoking\", success: \"Revoked\" }. */\n labels?: Partial>;\n /** \"danger\" makes the confirm red. */\n tone?: \"danger\" | \"default\";\n /** Runs once on confirm. Throw (or reject) to show Try again. */\n onConfirm: () => Promise | unknown;\n /** Back to the icon this long after success (ms); 0 keeps \"done\" until the row goes. */\n resetAfter?: number;\n disabled?: boolean;\n}\n\nconst EASE = \"cubic-bezier(0.16,1,0.3,1)\";\nconst FOCUS = \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40\";\n\nconst reducedQuery = \"(prefers-reduced-motion: reduce)\";\nconst subscribeReduced = (onChange: () => void) => {\n const query = window.matchMedia(reducedQuery);\n query.addEventListener(\"change\", onChange);\n return () => query.removeEventListener(\"change\", onChange);\n};\nconst useReducedMotion = () =>\n React.useSyncExternalStore(subscribeReduced, () => window.matchMedia(reducedQuery).matches, () => false);\n\nfunction Cross() {\n return (\n \n \n \n );\n}\n\nexport function ConfirmAction({\n icon,\n label,\n labels,\n tone = \"danger\",\n onConfirm,\n resetAfter = 0,\n disabled = false,\n className = \"\",\n ...props\n}: ConfirmActionProps) {\n const reduced = useReducedMotion();\n const [asking, setAsking] = React.useState(false);\n const [status, setStatus] = React.useState(\"idle\");\n const wrapRef = React.useRef(null);\n const iconRef = React.useRef(null);\n const run = React.useRef(0);\n const busy = status === \"pending\" || status === \"success\";\n\n const cancel = React.useCallback(\n (refocus: boolean) => {\n if (status === \"pending\") return;\n run.current++;\n setAsking(false);\n setStatus(\"idle\");\n if (refocus) iconRef.current?.focus({ preventScroll: true });\n },\n [status],\n );\n\n // The question is open: its button takes focus once it's there to take it.\n React.useEffect(() => {\n if (asking && status === \"idle\") wrapRef.current?.querySelector(\"[data-confirm]\")?.focus({ preventScroll: true });\n }, [asking, status]);\n\n React.useEffect(() => {\n if (!asking) return;\n const onDown = (e: PointerEvent) => {\n if (!wrapRef.current?.contains(e.target as Node)) cancel(false);\n };\n document.addEventListener(\"pointerdown\", onDown);\n return () => document.removeEventListener(\"pointerdown\", onDown);\n }, [asking, cancel]);\n\n const confirm = async () => {\n if (busy) return;\n const mine = ++run.current;\n setStatus(\"pending\");\n try {\n await onConfirm();\n if (run.current === mine) setStatus(\"success\");\n } catch {\n if (run.current === mine) setStatus(\"error\");\n }\n };\n\n const t = `${reduced ? 0 : 420}ms ${EASE}`;\n const red = tone === \"danger\" ? \"text-red-600! hover:bg-red-500/10! dark:text-red-400!\" : \"\";\n\n return (\n {\n if (e.key === \"Escape\" && asking) {\n e.preventDefault();\n e.stopPropagation();\n cancel(true);\n }\n }}\n onBlur={(e) => {\n if (asking && !busy && document.hasFocus() && !wrapRef.current?.contains(e.relatedTarget as Node)) cancel(false);\n }}\n {...props}\n >\n {/* The icon's circle, stretched into the pill round the question. */}\n \n \n \n \n cancel(false) : undefined}\n resetAfter={resetAfter || undefined}\n className={`h-[26px]! ${status === \"error\" ? \"\" : red}`}\n />\n \n \n \n (asking ? cancel(true) : setAsking(true))}\n className={`relative grid size-7 shrink-0 cursor-pointer place-items-center rounded-full text-muted-foreground transition-colors duration-150 hover:bg-accent hover:text-foreground disabled:cursor-default disabled:opacity-40 aria-disabled:cursor-default ${FOCUS}`}\n aria-disabled={busy || undefined}\n >\n {[icon, ].map((glyph, i) => {\n const on = (i === 1) === asking;\n return (\n \n {glyph}\n \n );\n })}\n \n \n );\n}\n"}],"css":{"@keyframes ui-ping":{"from":{"transform":"scale(1)","opacity":"0.55"},"to":{"transform":"scale(2.6)","opacity":"0"}}},"docs":"Docs and live preview: https://hairlineui.com/ui/domain-connect. MIT licensed: https://hairlineui.com/license#components","meta":{"license":"MIT"}}