4c:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:T17fa,"use client" import * as React from "react" import { ExternalLink, RotateCw } from "lucide-react" import { cn } from "@/lib/utils" export type PreviewSize = { id: string label: string width: number } export type WebPreviewProps = Omit< React.HTMLAttributes, "children" | "title" > & { src: string /** * Names the frame for assistive technology. Required, because a frame with * no name is announced as "frame" and nothing else. */ title: string sizes?: readonly PreviewSize[] defaultSize?: string /** Let someone type a different address. */ editable?: boolean onNavigate?: (src: string) => void /** Replaces the default sandbox. Read the note before widening it. */ sandbox?: string height?: number } const SIZES: PreviewSize[] = [ { id: "phone", label: "Phone", width: 390 }, { id: "tablet", label: "Tablet", width: 768 }, { id: "full", label: "Full", width: 0 }, ] /** * Scripts and forms, but never allow-same-origin alongside allow-scripts: a * frame given both can reach into its own sandbox attribute and take the rest. */ const SANDBOX = "allow-scripts allow-forms allow-popups allow-modals" export function WebPreview({ src, title, sizes = SIZES, defaultSize, editable = false, onNavigate, sandbox = SANDBOX, height = 420, className, ...rootProps }: WebPreviewProps) { // Everything hangs off src, so a new src resets the bar without an effect // reaching in to reset it. const [nav, setNav] = React.useState<{ from: string address: string typed: string } | null>(null) const here = nav?.from === src ? nav : null const address = here?.address ?? src const typed = here?.typed ?? src const [size, setSize] = React.useState(defaultSize ?? sizes.at(-1)?.id ?? "") const [generation, setGeneration] = React.useState(0) const [box, setBox] = React.useState(0) const frameRef = React.useRef(null) const addressId = React.useId() React.useEffect(() => { const element = frameRef.current if (!element) return const observer = new ResizeObserver(([entry]) => { setBox(entry?.contentRect.width ?? 0) }) observer.observe(element) return () => observer.disconnect() }, []) const chosen = sizes.find((option) => option.id === size) const width = chosen?.width ?? 0 // A narrow viewport shown inside a narrower panel is scaled down rather than // clipped, so a phone width stays a phone width to the page inside it. const scale = width > 0 && box > 0 ? Math.min(1, box / width) : 1 const go = (next: string) => { setNav({ from: src, address: next, typed: next }) setGeneration((count) => count + 1) onNavigate?.(next) } return (

Address setNav({ from: src, address, typed: event.target.value }) } onKeyDown={(event) => { if (event.key === "Enter" && editable) go(typed) }} className="bg-muted/50 text-muted-foreground focus-visible:ring-ring min-w-0 flex-1 truncate rounded-md px-2 py-1.5 font-mono text-xs read-only:cursor-default focus-visible:ring-2 focus-visible:outline-none" /> {sizes.length > 1 ? (

{sizes.map((option) => ( ))}

) : null}