"use client"; import { useState, useRef, useEffect } from "react"; type BlockState = "default" | "loading" | "empty" | "error"; const control = "min-h-11 border border-ledger-rule bg-ledger-paper px-3 py-2 text-sm text-ledger-ink disabled:opacity-40"; const action = "min-h-11 border border-ledger-ink bg-ledger-ink px-4 py-2 text-sm font-semibold text-ledger-paper disabled:opacity-40"; function Frame({ state, children, }: { state: BlockState; children: React.ReactNode; }) { const [recovered, setRecovered] = useState(false); const phase = recovered ? "default" : state; return (

app / Interactive demo

Custom domain setup

A custom-domain workflow with DNS records and simulated verification.

{phase === "default" ? (

{children}

) : (

{phase === "loading" ? "Loading custom domain setup…" : phase === "empty" ? "No custom domain setup yet" : "Unable to load custom domain setup"}

{phase === "error" ? "Your work is safe. Try the sample again." : phase === "empty" ? "Start with sample data to explore this workflow." : "Preparing your workspace. You can load the sample now."}

{phase === "loading" && (

); } export function Domain01({ state = "default" }: { state?: BlockState }) { const [input, setInput] = useState(""); const [domain, setDomain] = useState("app.example.com"); const [stage, setStage] = useState<"pending" | "checking" | "verified">( "pending", ); const [notice, setNotice] = useState(""); const [recordsReady, setRecordsReady] = useState(false); const timer = useRef | null>(null); useEffect( () => () => { if (timer.current) clearTimeout(timer.current); }, [], ); function check() { setStage("checking"); setNotice(""); timer.current = setTimeout(() => { setStage(recordsReady ? "verified" : "pending"); setNotice( recordsReady ? "Sample DNS records verified. This did not perform a live DNS lookup." : "Sample verification failed: mark the records as configured, then retry.", ); }, 800); } return (

{domain}

{stage}

Example DNS configuration. Replace the target and verification value with records from your hosting provider.

{[ ["CNAME", domain, "edge.example.net"], ["TXT", `_verify.${domain}`, "ledger-demo-verification"], ].map(([type, host, value]) => (

{type}

Host: {host}

{value}

))} { setRecordsReady(e.target.checked); setStage("pending"); }} /> Simulate correctly configured DNS

{notice}

); }