{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"error-template","type":"registry:ui","title":"Error template","description":"The pages people land on when something goes wrong, each with the way out that fits: search, ask for access, retry with a reference, wait out maintenance, reconnect or get a new link.","dependencies":["@radix-ui/react-slot","clsx","lucide-react","tailwind-merge"],"registryDependencies":["https://caliperui.site/r/styles.json"],"files":[{"path":"ui/block-concept.tsx","type":"registry:ui","target":"components/ui/block-concept.tsx","content":"import { ArrowRight } from \"lucide-react\";\nimport type { ComponentProps, ElementType, ReactNode } from \"react\";\nimport { cn } from \"./lib/cn\";\nimport { StageScope } from \"./stage-scope\";\nimport \"./block-concept.css\";\n\n/**\n * Marketing blocks share one voice: monochrome from the system tokens, Geist\n * display with two-tone titles, ink actions, ruled sections and ember only for\n * focus. Blocks follow the page theme, and the Caliper UI controls inside them too.\n */\n\nexport type BlockAction = { label: string; href?: string; onClick?: () => void };\n\n/**\n * A full-bleed band. The section is the container, so everything inside lays\n * out by the block's own width; `block-inner` holds the measure and rhythm.\n * `backdrop` paints behind the content edge to edge (grid lines, a tone).\n */\nexport function BlockRoot({\n as: Tag = \"section\",\n width = \"default\",\n backdrop,\n tone,\n className,\n innerClassName,\n children,\n ...props\n}: Omit, \"ref\"> & {\n /** The band's element; a site footer is a footer. */\n as?: \"section\" | \"footer\" | \"div\";\n /** default 1240px · narrow 960px · wide 1440px. */\n width?: \"default\" | \"narrow\" | \"wide\";\n backdrop?: ReactNode;\n /** A band tone: the page colour or the sunken colour. */\n tone?: \"page\" | \"sunken\" | \"ink\";\n innerClassName?: string;\n}) {\n return (\n \n {backdrop}\n
\n {children}\n
\n \n );\n}\n\nexport function BlockEyebrow({ className, ...props }: ComponentProps<\"p\">) {\n return

;\n}\n\n/** A display heading in the block face. size 1 is the hero headline. */\nexport function BlockTitle({\n as: Tag = \"h2\",\n size = 2,\n className,\n ...props\n}: ComponentProps<\"h2\"> & { as?: \"h1\" | \"h2\" | \"h3\"; size?: 1 | 2 | 3 }) {\n return ;\n}\n\n/** The second tone of a title: these words land in grey. */\nexport function BlockEm({ className, ...props }: ComponentProps<\"em\">) {\n return ;\n}\n\nexport function BlockLead({ className, ...props }: ComponentProps<\"p\">) {\n return

;\n}\n\n/**\n * The section opening every block shares: eyebrow, title and lead. `split`\n * sets the lead beside the title on wide blocks; `center` stacks it centred.\n */\nexport function BlockHeader({\n eyebrow,\n title,\n lead,\n align = \"start\",\n aside,\n headingLevel = 2,\n className,\n}: {\n eyebrow?: ReactNode;\n title: ReactNode;\n lead?: ReactNode;\n align?: \"start\" | \"center\" | \"split\";\n /** 1 when the block opens the page, e.g. a pricing page. */\n headingLevel?: 1 | 2;\n /** Sits at the end of the header row, e.g. a period toggle. */\n aside?: ReactNode;\n className?: string;\n}) {\n return (\n

\n
\n {eyebrow && {eyebrow}}\n {title}\n
\n {(lead || aside) && (\n
\n {lead && {lead}}\n {aside}\n
\n )}\n
\n );\n}\n\nexport function BlockActions({\n primary,\n secondary,\n className,\n block = false,\n}: {\n primary?: BlockAction;\n secondary?: BlockAction;\n className?: string;\n /** Full-width actions, e.g. on phones. */\n block?: boolean;\n}) {\n if (!primary && !secondary) return null;\n return (\n
\n {primary && }\n {secondary && }\n
\n );\n}\n\nexport function BlockButton({ action, kind = \"primary\", arrow = false, link: Link = \"a\" }: { action: BlockAction; kind?: \"primary\" | \"secondary\"; arrow?: boolean; /** The element for a link action, e.g. your router's Link. */ link?: ElementType }) {\n const shared = { \"data-slot\": \"block-button\", \"data-kind\": kind } as const;\n const content = (\n <>\n {action.label}\n {arrow && }\n \n );\n return action.href ? (\n \n {content}\n \n ) : (\n \n );\n}\n\nexport function BlockCard({ className, ...props }: ComponentProps<\"div\">) {\n return
;\n}\n\nexport function BlockChip({ className, ...props }: ComponentProps<\"span\">) {\n return ;\n}\n\n/**\n * A product artefact on a stage: a dotted tonal panel holding a framed window, with an optional floating note that overlaps the\n * window's corner on wide blocks and sits beneath it on narrow ones.\n */\nexport function BlockStage({\n title,\n floating,\n bare = false,\n className,\n children,\n}: {\n /** Shown in the window bar, e.g. \"halden.app/close\". */\n title?: string;\n floating?: ReactNode;\n /** No window frame: the children bring their own surfaces. */\n bare?: boolean;\n className?: string;\n children: ReactNode;\n}) {\n return (\n
\n {bare ? (\n {children}\n ) : (\n
\n
\n \n {title && {title}}\n
\n
{children}
\n
\n )}\n {floating &&
{floating}
}\n
\n );\n}\n\n/** Company names set as type in a quiet row; swap in SVG marks in production. */\nexport function BlockLogos({ label, logos, className }: { label?: string; logos: readonly string[]; className?: string }) {\n return (\n
\n {label &&

{label}

}\n
    \n {logos.map((logo) => (\n
  • {logo}
    • \n ))}\n
\n
\n );\n}\n\n/** Initials from a name, in the block's highlight tones. */\nexport function BlockInitials({ name, size = 36, tone, className }: { name: string; size?: number; tone?: number; className?: string }) {\n const words = name.trim().split(/\\s+/u);\n const initials = ((words[0]?.[0] ?? \"\") + (words.length > 1 ? (words[words.length - 1]?.[0] ?? \"\") : \"\")).toUpperCase();\n return (\n \n {initials}\n \n );\n}\n\nexport type BlockStat = { value: ReactNode; label: string };\n"},{"path":"ui/block-nav.tsx","type":"registry:ui","target":"components/ui/block-nav.tsx","content":"\"use client\";\n\nimport { Menu, X } from \"lucide-react\";\nimport { useEffect, useId, useRef, useState, type ElementType, type ReactNode } from \"react\";\nimport { BlockButton, type BlockAction } from \"./block-concept\";\nimport { cn } from \"./lib/cn\";\nimport \"./shared/site-header.css\";\nimport \"./block-nav.css\";\n\nexport type BlockNavLink = { label: string; href: string; current?: boolean };\n\n// Whole class names, so Tailwind sees them.\nconst folds = {\n 860: { nav: \"@[860px]:block\", row: \"@[860px]:flex\", menu: \"@[860px]:hidden\" },\n 1180: { nav: \"@[1180px]:block\", row: \"@[1180px]:flex\", menu: \"@[1180px]:hidden\" },\n};\n\n/**\n * The site header page templates share. It sits on the page colour, gains a\n * hairline and frost once the page scrolls, keeps the primary action in\n * reach, and on narrow pages folds the links into a menu disclosure that\n * closes with Escape and returns focus to its button.\n */\nexport function BlockNav({\n brand,\n brandHref = \"/\",\n brandLabel,\n logo,\n nav = [],\n signIn,\n primary,\n aside,\n link: Link = \"a\",\n foldAt = 860,\n className,\n}: {\n brand: string;\n brandHref?: string;\n /** The home link's accessible name when the visible brand is short, e.g. \"Halden home\". */\n brandLabel?: string;\n /** A mark set before the brand name; the name stays the accessible label. */\n logo?: ReactNode;\n nav?: readonly BlockNavLink[];\n signIn?: BlockAction;\n primary?: BlockAction;\n /** Extra controls before the actions, e.g. a theme switch or search. */\n aside?: ReactNode;\n /** The element for the brand and nav links, e.g. your router's Link, so moving between pages stays in the app. */\n link?: ElementType;\n /** The header width (px) the links and actions need to sit in one row; narrower, they fold into the menu. 1180 suits six or more links beside extra controls. */\n foldAt?: keyof typeof folds;\n className?: string;\n}) {\n const id = useId();\n const sentinel = useRef(null);\n const menuButton = useRef(null);\n const [scrolled, setScrolled] = useState(false);\n const [menu, setMenu] = useState(false);\n const fold = folds[foldAt];\n\n useEffect(() => {\n const top = sentinel.current;\n if (!top) return;\n const observer = new IntersectionObserver(([entry]) => setScrolled(!entry!.isIntersecting));\n observer.observe(top);\n return () => observer.disconnect();\n }, []);\n\n return (\n <>\n
\n
\n
\n {logo}{brand}\n {nav.length > 0 && (\n \n )}\n \n {(nav.length > 0 || signIn) && (\n setMenu((open) => !open)}\n // Focus stays on the button after it opens the menu, so Escape has to work here too.\n onKeyDown={(event) => event.key === \"Escape\" && setMenu(false)}\n data-slot=\"block-button\"\n data-kind=\"secondary\"\n className={cn(\"ml-auto !min-h-11 !px-4\", fold.menu)}\n >\n {menu ? : }\n Menu\n \n )}\n
\n
\n \n \n );\n}\n"},{"path":"ui/button.tsx","type":"registry:ui","target":"components/ui/button.tsx","content":"\"use client\";\n\nimport { Slot, Slottable } from \"@radix-ui/react-slot\";\nimport { LoaderCircle } from \"lucide-react\";\nimport {\n useLayoutEffect,\n useRef,\n useState,\n type ComponentProps,\n type ReactNode,\n} from \"react\";\nimport { cn } from \"./lib/cn\";\nimport \"./shared/loading-indicator.css\";\nimport \"./button.css\";\n\n/* Colour, material and press live in button.css keyed on data-variant, so a\n consumer's utility classes still override them. Raised to press: the\n button sinks 1px into an inner shade instead of scaling. */\nconst variants = {\n default: \"\",\n secondary: \"\",\n ghost: \"\",\n destructive: \"\",\n};\n\nconst sizes = {\n sm: \"h-8 gap-1.5 rounded-full px-3 text-[13px] max-md:min-h-11 [@media(pointer:coarse)]:min-h-11\",\n md: \"h-[var(--control-height)] gap-2 rounded-full px-3.5 text-sm\",\n lg: \"h-11 gap-2 rounded-full px-[18px] text-[15px]\",\n icon: \"size-[var(--control-height)] rounded-full p-0\",\n};\n\nexport type ButtonProps = ComponentProps<\"button\"> & {\n variant?: keyof typeof variants;\n size?: keyof typeof sizes;\n asChild?: boolean;\n /** Shows a spinner over the label and swallows clicks while keeping focus and width. */\n loading?: boolean;\n /** Animate a meaningful label/icon change, such as saving → saved. */\n feedbackKey?: string;\n};\n\nexport function Button({\n className,\n variant = \"default\",\n size = \"md\",\n asChild = false,\n loading = false,\n feedbackKey,\n disabled,\n \"aria-disabled\": ariaDisabled,\n children,\n onClick,\n onClickCapture,\n tabIndex,\n type = \"button\",\n ...props\n}: ButtonProps) {\n const Component = asChild ? Slot : \"button\";\n const nativeDisabled = Boolean(disabled);\n const blocked =\n nativeDisabled ||\n loading ||\n ariaDisabled === true ||\n ariaDisabled === \"true\";\n\n return (\n {\n if (blocked && (event.key === \"Enter\" || event.key === \" \")) {\n event.preventDefault();\n }\n props.onKeyDown?.(event);\n }}\n onClickCapture={(event) => {\n if (blocked) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n onClickCapture?.(event);\n }}\n onClick={onClick}\n >\n {loading && asChild && (\n \n )}\n {loading && !asChild && feedbackKey === undefined && (\n \n \n \n )}\n \n {loading && !asChild && feedbackKey === undefined ? (\n \n {children}\n \n ) : feedbackKey !== undefined && !asChild ? (\n \n {loading && (\n \n )}\n {children}\n \n ) : (\n children\n )}\n \n \n );\n}\n\nfunction ButtonFeedback({\n stateKey,\n children,\n}: {\n stateKey: string;\n children: ReactNode;\n}) {\n const content = useRef(null);\n const [initialKey] = useState(stateKey);\n const [width, setWidth] = useState();\n useLayoutEffect(() => {\n const element = content.current;\n if (!element) return;\n const measure = () => setWidth(element.offsetWidth);\n measure();\n const observer = new ResizeObserver(measure);\n observer.observe(element);\n return () => observer.disconnect();\n }, [stateKey]);\n return (\n \n \n {children}\n \n \n );\n}\n"},{"path":"ui/copy-button.tsx","type":"registry:ui","target":"components/ui/copy-button.tsx","content":"\"use client\";\n\nimport { Check, Copy } from \"lucide-react\";\nimport { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport { Button, type ButtonProps } from \"./button\";\nimport { cn } from \"./lib/cn\";\nimport \"./shared/action-label.css\";\nimport \"./copy-button.css\";\n\n/** \"rv_live_8Kq2mZt7XcP1vW9yL3nB4f2a\" → \"rv_live_8K…4f2a\". */\nexport function shortenValue(value: string, head = 10, tail = 4) {\n return value.length <= head + tail + 1 ? value : `${value.slice(0, head)}…${value.slice(-tail)}`;\n}\n\nasync function writeClipboard(value: string) {\n try {\n await navigator.clipboard.writeText(value);\n return true;\n } catch {\n // Older or locked-down browsers: fall back to a selected textarea.\n const area = document.createElement(\"textarea\");\n area.value = value;\n area.setAttribute(\"readonly\", \"\");\n area.style.position = \"fixed\";\n area.style.opacity = \"0\";\n document.body.appendChild(area);\n area.select();\n let ok = false;\n try {\n ok = document.execCommand(\"copy\");\n } catch {\n ok = false;\n }\n area.remove();\n return ok;\n }\n}\n\n/**\n * Copies a value and confirms what was copied, shortened in mono, on a small\n * ticket above the button. If the browser blocks the clipboard, the ticket\n * offers the value selected so it can be copied by hand.\n */\nexport function CopyButton({\n value,\n label,\n display,\n iconOnly = false,\n variant = \"secondary\",\n size = \"sm\",\n resetAfterMs = 1800,\n onCopy,\n className,\n children,\n}: {\n /** The text written to the clipboard. */\n value: string;\n /** Accessible name, e.g. \"Copy live secret key\". */\n label: string;\n /** What the ticket shows; defaults to the value shortened in the middle. */\n display?: string;\n iconOnly?: boolean;\n variant?: ButtonProps[\"variant\"];\n size?: Exclude;\n resetAfterMs?: number;\n onCopy?: (ok: boolean) => void;\n className?: string;\n /** Visible label; defaults to “Copy”. */\n children?: ReactNode;\n}) {\n const [state, setState] = useState<\"idle\" | \"copied\" | \"failed\">(\"idle\");\n const fallback = useRef(null);\n\n useEffect(() => {\n if (state !== \"copied\") return;\n const timer = setTimeout(() => setState(\"idle\"), resetAfterMs);\n return () => clearTimeout(timer);\n }, [state, resetAfterMs]);\n\n useEffect(() => {\n if (state === \"failed\") fallback.current?.select();\n }, [state]);\n\n async function copy() {\n const ok = await writeClipboard(value);\n setState(ok ? \"copied\" : \"failed\");\n onCopy?.(ok);\n }\n\n const copied = state === \"copied\";\n const iconClass = { sm: \"size-8 rounded-control max-md:size-11\", md: undefined, lg: \"size-11 rounded-touch\" }[size];\n\n return (\n {\n if (event.key === \"Escape\" && state !== \"idle\") setState(\"idle\");\n }}\n >\n \n {copied && (\n \n \n Copied {display ?? shortenValue(value)}\n \n )}\n {state === \"failed\" && (\n \n Couldn’t copy. The browser blocked the clipboard; press ⌘C or Ctrl+C.\n setState(\"idle\")}\n className=\"w-full rounded-[6px] bg-background px-2 py-1 font-mono text-xs text-foreground outline-none\"\n />\n \n )}\n \n \n \n \n \n \n {!iconOnly && (\n \n {children ?? \"Copy\"}\n Copied\n \n )}\n \n \n );\n}\n"},{"path":"ui/error-template.tsx","type":"registry:ui","target":"components/ui/error-template.tsx","content":"\"use client\";\n\nimport { Hourglass, RotateCw, Search as SearchIcon, WifiOff } from \"lucide-react\";\nimport { useEffect, useId, useRef, useState, useSyncExternalStore, type ReactNode } from \"react\";\nimport { BlockActions, BlockEyebrow, BlockLead, BlockRoot, BlockTitle, type BlockAction } from \"./block-concept\";\nimport type { BlockNavLink } from \"./block-nav\";\nimport { Button } from \"./button\";\nimport { CopyButton } from \"./copy-button\";\nimport { Field } from \"./field\";\nimport { Input } from \"./input\";\nimport { TemplatePage, type TemplateFooter } from \"./template-page\";\nimport { Textarea } from \"./textarea\";\nimport \"./error-template.css\";\n\nexport type ErrorKind = \"404\" | \"403\" | \"500\" | \"503\" | \"offline\" | \"expired\";\n\nconst copy: Record = {\n \"404\": { eyebrow: \"Page not found\", title: \"That page isn't here\", lead: \"The link may be old, or the page may have moved. Search, or start from one of these.\" },\n \"403\": { eyebrow: \"No access\", title: \"You don't have access to this yet\", lead: \"This page belongs to a workspace you're not a member of. Ask its owner, or switch to the account that has access.\" },\n \"500\": { eyebrow: \"Something broke\", title: \"This page didn't load\", lead: \"It's our fault, not yours. Nothing you did was lost. Try again, and if it keeps happening, send us the reference below.\" },\n \"503\": { eyebrow: \"Planned maintenance\", title: \"We're upgrading the database\", lead: \"Everything you saved is safe. The site is read-only until the work finishes.\" },\n offline: { eyebrow: \"No connection\", title: \"You're offline\", lead: \"Check your Wi-Fi or mobile data. This page will notice when you're back.\" },\n expired: { eyebrow: \"Link expired\", title: \"That link has expired\", lead: \"For your security, links in our emails work for 30 minutes. Send yourself a new one.\" },\n};\n\nconst online = {\n subscribe(notify: () => void) {\n window.addEventListener(\"online\", notify);\n window.addEventListener(\"offline\", notify);\n return () => {\n window.removeEventListener(\"online\", notify);\n window.removeEventListener(\"offline\", notify);\n };\n },\n get: () => navigator.onLine,\n server: () => true,\n};\n\nfunction useMinutesLeft(until?: string) {\n const [now, setNow] = useState(() => Date.now());\n useEffect(() => {\n if (!until) return;\n const timer = window.setInterval(() => setNow(Date.now()), 30_000);\n return () => window.clearInterval(timer);\n }, [until]);\n return until ? Math.max(0, Math.ceil((Date.parse(until) - now) / 60_000)) : null;\n}\n\nconst clock = (iso: string) => new Intl.DateTimeFormat(\"en-GB\", { hour: \"2-digit\", minute: \"2-digit\", timeZoneName: \"short\" }).format(new Date(iso));\n\n/**\n * The pages people land on when something goes wrong, each with the way\n * out that fits: search for a missing page, ask for access, retry with a\n * reference to quote, wait out maintenance with a time, notice when the\n * connection returns, or send a fresh link. Built only from the Free blocks.\n */\nexport function ErrorTemplate({\n kind,\n brand,\n nav,\n signIn,\n primary,\n title,\n lead,\n actions,\n suggestions = [],\n onSearch,\n signedInAs,\n onRequestAccess,\n reference,\n onRetry,\n statusHref,\n until,\n onResend,\n isOnline,\n footer,\n className,\n}: {\n kind: ErrorKind;\n brand: string;\n nav?: readonly BlockNavLink[];\n signIn?: BlockAction;\n primary?: BlockAction;\n title?: string;\n lead?: string;\n /** Usually \"Go home\" and a quiet \"Go back\". */\n actions?: { primary?: BlockAction; secondary?: BlockAction };\n /** Places people usually wanted, for 404. */\n suggestions?: readonly { label: string; href: string; description?: string }[];\n /** 404: adds a search; called with the query. */\n onSearch?: (query: string) => void;\n /** 403: the account that was refused, e.g. \"dana@forma.studio\". */\n signedInAs?: string;\n /** 403: asks the owner. May return a promise; a thrown error is shown. */\n onRequestAccess?: (note: string) => void | Promise;\n /** 500: an ID support can look up. */\n reference?: string;\n /** 500, 503 and offline: try the page again. */\n onRetry?: () => void | Promise;\n /** 500 and 503: the public status page. */\n statusHref?: string;\n /** 503: when maintenance is expected to end, as an ISO date-time. */\n until?: string;\n /** expired: sends a new link. */\n onResend?: () => void | Promise;\n /** offline: override the browser's online state, e.g. in a preview. */\n isOnline?: boolean;\n footer?: TemplateFooter;\n className?: string;\n}) {\n const text = copy[kind];\n const browserOnline = useSyncExternalStore(online.subscribe, online.get, online.server);\n const connected = isOnline ?? browserOnline;\n const minutes = useMinutesLeft(kind === \"503\" ? until : undefined);\n const figure: ReactNode =\n kind === \"offline\" ? : kind === \"expired\" ? : kind;\n\n return (\n \n \n
\n

{figure}

\n
\n {text.eyebrow}\n \n {kind === \"offline\" && connected ? \"You're back online\" : (title ?? text.title)}\n \n \n {kind === \"offline\" && connected ? \"The connection is back. Reload to pick up where you left off.\" : (lead ?? text.lead)}\n {kind === \"offline\" || kind === \"expired\" ? \"\" : ` Error ${kind}.`}\n \n
\n\n {kind === \"404\" && onSearch && }\n {kind === \"403\" && }\n {kind === \"500\" && }\n {kind === \"503\" && (\n
\n {until ? (\n

\n {minutes && minutes > 0 ? (\n <>\n Back in about {minutes} {minutes === 1 ? \"minute\" : \"minutes\"}, at {clock(until)}.\n \n ) : (\n \"The work should be finished. Try again.\"\n )}\n

\n ) : (\n

We’ll be back shortly.

\n )}\n
\n {onRetry && }\n {statusHref && Follow on the status page}\n
\n
\n )}\n {kind === \"offline\" && (\n
\n

\n \n {connected ? \"Connected\" : \"Waiting for a connection…\"}\n

\n {onRetry && }\n
\n )}\n {kind === \"expired\" && }\n\n {(actions?.primary || actions?.secondary) && }\n\n {suggestions.length > 0 && (\n \n )}\n
\n \n \n );\n}\n\nfunction SearchForm({ onSearch }: { onSearch: (query: string) => void }) {\n const [query, setQuery] = useState(\"\");\n return (\n {\n event.preventDefault();\n if (query.trim()) onSearch(query.trim());\n }}\n >\n setQuery(event.target.value)} leading={} className=\"w-auto min-w-0 flex-1 basis-56\" />\n \n \n );\n}\n\nfunction RetryButton({ onRetry, label = \"Try again\" }: { onRetry: () => void | Promise; label?: string }) {\n const [busy, setBusy] = useState(false);\n return (\n {\n setBusy(true);\n try {\n await onRetry();\n } finally {\n setBusy(false);\n }\n }}\n >\n \n {label}\n \n );\n}\n\nfunction Retry({ onRetry, reference, statusHref }: { onRetry?: () => void | Promise; reference?: string; statusHref?: string }) {\n const [tries, setTries] = useState(0);\n const [busy, setBusy] = useState(false);\n return (\n
\n {reference && (\n
\n Reference\n {reference}\n \n
\n )}\n
\n {onRetry && (\n {\n setBusy(true);\n try {\n await onRetry();\n } catch {\n setTries((count) => count + 1);\n } finally {\n setBusy(false);\n }\n }}\n >\n \n Try again\n \n )}\n {statusHref && Check system status}\n
\n

\n {tries > 0 && `Still not working after ${tries} ${tries === 1 ? \"try\" : \"tries\"}. ${tries > 1 && reference ? \"Send the reference to support and we'll look.\" : \"Give it a minute.\"}`}\n

\n
\n );\n}\n\nfunction AccessRequest({ signedInAs, onRequestAccess }: { signedInAs?: string; onRequestAccess?: (note: string) => void | Promise }) {\n const [note, setNote] = useState(\"\");\n const [state, setState] = useState<\"idle\" | \"sending\" | \"sent\">(\"idle\");\n const [error, setError] = useState();\n const done = useRef(null);\n const id = useId();\n useEffect(() => {\n if (state === \"sent\") done.current?.focus();\n }, [state]);\n if (!onRequestAccess) return signedInAs ?

Signed in as {signedInAs}.

: null;\n if (state === \"sent\")\n return (\n
\n

\n Request sent. The owner will get an email, and you’ll hear back at {signedInAs ?? \"your address\"}.\n

\n
\n );\n return (\n {\n event.preventDefault();\n setState(\"sending\");\n setError(undefined);\n try {\n await onRequestAccess(note.trim());\n setState(\"sent\");\n } catch (reason) {\n setError(reason instanceof Error ? reason.message : \"The request did not send. Try again.\");\n setState(\"idle\");\n }\n }}\n >\n

\n Signed in as {signedInAs}\n

\n \n {(props) =>