52: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 53: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T2bb9,"use client"; import * as React from "react"; import { HoverCard, HoverCardContent, HoverCardTrigger, } from "@/components/ui/hover-card"; import { Skeleton } from "@/components/ui/skeleton"; import { cn } from "@/lib/utils"; export type NotionMentionLinkMetadata = { url: string; title: string; description?: string; siteName: string; domain: string; image?: string; favicon?: string; }; export type NotionMentionLinkProps = Omit< React.ComponentPropsWithRef<"a">, "children" | "href" > & { url: string; endpoint?: string; metadata?: NotionMentionLinkMetadata; prefetch?: "mount" | "hover"; openDelay?: number; closeDelay?: number; previewWidth?: number; previewHeight?: number; align?: "start" | "end"; showPreview?: boolean; invalidLabel?: string; previewClassName?: string; }; const metadataCache = new Map(); function normalizeUrl(value: string) { const trimmed = value.trim(); if (!trimmed) return ""; return /^https?:\/\//i.test(trimmed) ? trimmed : `https://${trimmed}`; } function isValidWebsiteUrl(value: string) { if (!value || /\s/.test(value)) return false; try { const parsed = new URL(value); const labels = parsed.hostname.split("."); return ( ["http:", "https:"].includes(parsed.protocol) && labels.length >= 2 && labels.every((label) => /^[a-z\d](?:[a-z\d-]{0,61}[a-z\d])?$/i.test(label), ) ); } catch { return false; } } function getDomain(url: string) { try { return new URL(url).hostname.replace(/^www\./, ""); } catch { return url; } } function getFallbackMetadata(url: string): NotionMentionLinkMetadata { const domain = getDomain(url); return { url, title: domain, siteName: domain.split(".")[0] || domain, domain, }; } function getAssetUrl(endpoint: string, url?: string) { if (!url) return undefined; const params = new URLSearchParams({ asset: "1", url }); return `${endpoint}${endpoint.includes("?") ? "&" : "?"}${params.toString()}`; } function SiteIcon({ src, label, large = false, }: { src?: string; label: string; large?: boolean; }) { const [failed, setFailed] = React.useState(false); React.useEffect(() => setFailed(false), [src]); if (!src || failed) { return ( ); } return ( // The same-origin endpoint validates and proxies this remote asset. // eslint-disable-next-line @next/next/no-img-element

setFailed(true)} aria-hidden="true" /> ); } function PreviewSkeleton({ height }: { height: number }) { return (

); } function PreviewImage({ src, height }: { src: string; height: number }) { const [failed, setFailed] = React.useState(false); React.useEffect(() => setFailed(false), [src]); if (failed) return null; return ( // The same-origin endpoint validates and proxies this remote asset. // eslint-disable-next-line @next/next/no-img-element

setFailed(true)} aria-hidden="true" /> ); } function NotionMentionLink({ url, endpoint = "/api/notion-mention-link", metadata: suppliedMetadata, prefetch = "mount", openDelay = 180, closeDelay = 120, previewWidth = 310, previewHeight = 140, align = "start", showPreview = true, invalidLabel = "Enter a valid website URL.", previewClassName, className, target = "_blank", rel = "noopener noreferrer", onMouseEnter, onMouseLeave, onFocus, onBlur, ref, ...props }: NotionMentionLinkProps) { const normalizedUrl = React.useMemo(() => normalizeUrl(url), [url]); const isValidUrl = React.useMemo( () => isValidWebsiteUrl(normalizedUrl), [normalizedUrl], ); const fallback = React.useMemo( () => getFallbackMetadata(normalizedUrl), [normalizedUrl], ); const [loadedMetadata, setLoadedMetadata] = React.useState< NotionMentionLinkMetadata | undefined >(() => suppliedMetadata ?? metadataCache.get(normalizedUrl)); const [status, setStatus] = React.useState< "idle" | "loading" | "ready" | "error" | "invalid" >( !isValidUrl ? "invalid" : suppliedMetadata || metadataCache.has(normalizedUrl) ? "ready" : "idle", ); const requestRef = React.useRef(null); const previewId = React.useId(); const currentMetadata = suppliedMetadata ?? loadedMetadata ?? fallback; const loadMetadata = React.useCallback(async () => { if (!isValidUrl) { setStatus("invalid"); return; } if (suppliedMetadata || metadataCache.has(normalizedUrl)) { const cached = metadataCache.get(normalizedUrl); if (cached) { setLoadedMetadata(cached); setStatus("ready"); } return; } requestRef.current?.abort(); const controller = new AbortController(); requestRef.current = controller; setStatus("loading"); try { const separator = endpoint.includes("?") ? "&" : "?"; const response = await fetch( `${endpoint}${separator}${new URLSearchParams({ url: normalizedUrl }).toString()}`, { signal: controller.signal }, ); if (!response.ok) throw new Error("Preview request failed"); const data = (await response.json()) as NotionMentionLinkMetadata; metadataCache.set(normalizedUrl, data); setLoadedMetadata(data); setStatus("ready"); } catch (error) { if (error instanceof DOMException && error.name === "AbortError") return; setStatus("error"); } }, [endpoint, isValidUrl, normalizedUrl, suppliedMetadata]); React.useEffect(() => { requestRef.current?.abort(); setLoadedMetadata(suppliedMetadata ?? metadataCache.get(normalizedUrl)); setStatus( !isValidUrl ? "invalid" : suppliedMetadata || metadataCache.has(normalizedUrl) ? "ready" : "idle", ); }, [isValidUrl, normalizedUrl, suppliedMetadata]); React.useEffect(() => { if (prefetch === "mount") void loadMetadata(); return () => { requestRef.current?.abort(); }; }, [loadMetadata, prefetch]); const faviconUrl = getAssetUrl(endpoint, currentMetadata.favicon); const imageUrl = getAssetUrl(endpoint, currentMetadata.image); if (!isValidUrl || status === "invalid") { return ( {invalidLabel} ); } const mention = ( { if (prefetch === "hover" || status === "idle") void loadMetadata(); onMouseEnter?.(event); }} onMouseLeave={(event) => { onMouseLeave?.(event); }} onFocus={(event) => { if (prefetch === "hover" || status === "idle") void loadMetadata(); onFocus?.(event); }} onBlur={(event) => { onBlur?.(event); }} {...props} > {currentMetadata.siteName} {currentMetadata.title} ); if (!showPreview) return mention; return ( { if (nextOpen && (prefetch === "hover" || status === "idle")) { void loadMetadata(); } }} > {mention} {status === "loading" || status === "idle" ? ( ) : ( {imageUrl ? ( ) : null} {currentMetadata.title} {status === "error" ? ( Preview unavailable. The link is still safe to open directly. ) : currentMetadata.description ? ( {currentMetadata.description} ) : null} {currentMetadata.domain} )} ); } export { NotionMentionLink }; 55:T22d1,import { lookup } from "node:dns/promises"; import http from "node:http"; import https from "node:https"; import { isIP } from "node:net"; export type SafeLinkPreview = { url: string; title: string; description?: string; siteName: string; domain: string; image?: string; favicon?: string; }; type SafeResponse = { body: Buffer; contentType: string; finalUrl: URL; }; const MAX_HTML_BYTES = 512_000; const MAX_ASSET_BYTES = 5_000_000; const MAX_REDIRECTS = 3; const REQUEST_TIMEOUT_MS = 5_000; function isPrivateIpv4(address: string) { const octets = address.split(".").map(Number); const [a, b] = octets; return ( a === 0 || a === 10 || a === 127 || (a === 169 && b === 254) || (a === 172 && b !== undefined && b >= 16 && b <= 31) || (a === 192 && b === 168) || (a === 100 && b !== undefined && b >= 64 && b <= 127) || (a === 192 && b === 0) || (a === 198 && (b === 18 || b === 19)) || (a === 198 && b === 51 && octets[2] === 100) || (a === 203 && b === 0 && octets[2] === 113) || (a !== undefined && a >= 224) ); } function isPrivateIpv6(address: string) { const normalized = address.toLowerCase().split("%")[0] ?? address; return ( normalized === "::" || normalized === "::1" || normalized.startsWith("fc") || normalized.startsWith("fd") || /^fe[89ab]/.test(normalized) || normalized.startsWith("ff") || normalized.startsWith("2001:db8:") || (normalized.startsWith("::ffff:") && isPrivateIpv4(normalized.slice("::ffff:".length))) ); } function isPublicAddress(address: string) { const version = isIP(address); if (version === 4) return !isPrivateIpv4(address); if (version === 6) return !isPrivateIpv6(address); return false; } async function validateUrl(input: string) { const url = new URL(input); if (!["http:", "https:"].includes(url.protocol)) { throw new Error("Only HTTP and HTTPS URLs are supported"); } if (url.username || url.password) throw new Error("URL credentials are not allowed"); if (url.port && !["80", "443"].includes(url.port)) { throw new Error("Non-standard ports are not allowed"); } const hostname = url.hostname.toLowerCase().replace(/\.$/, ""); if ( hostname === "localhost" || hostname.endsWith(".localhost") || hostname.endsWith(".local") || hostname.endsWith(".internal") ) { throw new Error("Local network hosts are not allowed"); } const literalVersion = isIP(hostname); const addresses = literalVersion ? [{ address: hostname, family: literalVersion }] : await lookup(hostname, { all: true, verbatim: true }); if ( addresses.length === 0 || addresses.some(({ address }) => !isPublicAddress(address)) ) { throw new Error("Private or unresolved hosts are not allowed"); } return { url, addresses }; } async function requestUrl( input: string, options: { maxBytes: number; accept: string }, redirects = 0, ): Promise { const { url, addresses } = await validateUrl(input); const selected = addresses[0]; if (!selected) throw new Error("Host did not resolve"); const transport = url.protocol === "https:" ? https : http; return new Promise((resolve, reject) => { const request = transport.request( url, { method: "GET", headers: { accept: options.accept, "accept-encoding": "identity", "user-agent": "UnlumenLinkPreview/1.0 (+https://ui.unlumen.com)", }, lookup: (_hostname, lookupOptions, callback) => { if (typeof lookupOptions === "object" && lookupOptions.all) { callback(null, [selected]); return; } callback(null, selected.address, selected.family as 4 | 6); }, }, (response) => { const status = response.statusCode ?? 500; const location = response.headers.location; if (status >= 300 && status < 400 && location) { response.resume(); if (redirects >= MAX_REDIRECTS) { reject(new Error("Too many redirects")); return; } const redirectUrl = new URL(location, url).toString(); void requestUrl(redirectUrl, options, redirects + 1).then( resolve, reject, ); return; } if (status < 200 || status >= 300) { response.resume(); reject(new Error(`Remote server returned ${status}`)); return; } const declaredLength = Number(response.headers["content-length"] ?? 0); if (declaredLength > options.maxBytes) { response.destroy(new Error("Remote response is too large")); return; } const chunks: Buffer[] = []; let received = 0; response.on("data", (chunk: Buffer) => { received += chunk.length; if (received > options.maxBytes) { response.destroy(new Error("Remote response is too large")); return; } chunks.push(chunk); }); response.on("end", () => { resolve({ body: Buffer.concat(chunks), contentType: String(response.headers["content-type"] ?? ""), finalUrl: url, }); }); response.on("error", reject); }, ); request.setTimeout(REQUEST_TIMEOUT_MS, () => { request.destroy(new Error("Remote request timed out")); }); request.on("error", reject); request.end(); }); } function decodeEntities(value: string) { const entities: Record = { amp: "&", apos: "'", gt: ">", lt: "<", quot: '"', }; return value .replace(/&#(\d+);/g, (_, code: string) => String.fromCodePoint(Number(code)), ) .replace(/&#x([\da-f]+);/gi, (_, code: string) => String.fromCodePoint(Number.parseInt(code, 16)), ) .replace( /&([a-z]+);/gi, (entity, name: string) => entities[name.toLowerCase()] ?? entity, ) .replace(/\s+/g, " ") .trim(); } function getAttribute(tag: string, name: string) { const match = tag.match(new RegExp(`\\b${name}\\s*=\\s*(["'])(.*?)\\1`, "i")); return match?.[2] ? decodeEntities(match[2]) : undefined; } function getMeta(html: string, keys: string[]) { for (const tag of html.match(/]*>/gi) ?? []) { const key = getAttribute(tag, "property") ?? getAttribute(tag, "name"); if (key && keys.includes(key.toLowerCase())) { const content = getAttribute(tag, "content"); if (content) return content; } } return undefined; } function getFavicon(html: string) { for (const tag of html.match(/]*>/gi) ?? []) { const rel = getAttribute(tag, "rel")?.toLowerCase(); if (rel?.split(/\s+/).includes("icon")) return getAttribute(tag, "href"); } return undefined; } function resolveRemoteUrl(value: string | undefined, base: URL) { if (!value) return undefined; try { const url = new URL(value, base); return ["http:", "https:"].includes(url.protocol) ? url.toString() : undefined; } catch { return undefined; } } export async function getSafeLinkPreview( input: string, ): Promise { const response = await requestUrl(input, { maxBytes: MAX_HTML_BYTES, accept: "text/html,application/xhtml+xml", }); if (!response.contentType.toLowerCase().includes("text/html")) { throw new Error("The URL did not return HTML"); } const html = response.body.toString("utf8"); const titleTag = html.match(/]*>([\s\S]*?)<\/title>/i)?.[1]; const domain = response.finalUrl.hostname.replace(/^www\./, ""); const title = getMeta(html, ["og:title", "twitter:title"]) ?? (titleTag ? decodeEntities(titleTag.replace(/<[^>]+>/g, "")) : undefined) ?? domain; const siteName = getMeta(html, ["og:site_name"]) ?? domain.split(".")[0] ?? domain; return { url: response.finalUrl.toString(), title: title.slice(0, 200), description: getMeta(html, [ "og:description", "twitter:description", "description", ])?.slice(0, 500), siteName: siteName.slice(0, 80), domain, image: resolveRemoteUrl( getMeta(html, ["og:image:secure_url", "og:image", "twitter:image"]), response.finalUrl, ), favicon: resolveRemoteUrl( getFavicon(html) ?? "/favicon.ico", response.finalUrl, ), }; } export async function getSafeRemoteAsset(input: string) { const response = await requestUrl(input, { maxBytes: MAX_ASSET_BYTES, accept: "image/avif,image/webp,image/png,image/jpeg,image/gif,image/svg+xml", }); if (!response.contentType.toLowerCase().startsWith("image/")) { throw new Error("The URL did not return an image"); } return { body: response.body, contentType: response.contentType }; } 56:T929,import { NextResponse, type NextRequest } from "next/server"; import { getSafeLinkPreview, getSafeRemoteAsset, } from "@/lib/notion-link-preview.server"; export const runtime = "nodejs"; const RATE_LIMIT_WINDOW_MS = 60_000; const RATE_LIMIT_MAX_REQUESTS = 60; const rateLimitBuckets = new Map(); function isRateLimited(request: NextRequest) { const forwardedFor = request.headers.get("x-forwarded-for")?.split(",")[0]; const client = forwardedFor?.trim() || request.headers.get("x-real-ip") || "anonymous"; const now = Date.now(); const recent = (rateLimitBuckets.get(client) ?? []).filter( (timestamp) => now - timestamp < RATE_LIMIT_WINDOW_MS, ); if (recent.length >= RATE_LIMIT_MAX_REQUESTS) return true; rateLimitBuckets.set(client, [...recent, now]); if (rateLimitBuckets.size > 1_000) { for (const [key, timestamps] of rateLimitBuckets) { if ( timestamps.every((timestamp) => now - timestamp >= RATE_LIMIT_WINDOW_MS) ) { rateLimitBuckets.delete(key); } } } return false; } export async function GET(request: NextRequest) { if (isRateLimited(request)) { return NextResponse.json( { error: "Too many preview requests." }, { status: 429, headers: { "Retry-After": "60" } }, ); } const url = request.nextUrl.searchParams.get("url"); if (!url || url.length > 2_048) { return NextResponse.json( { error: "A valid URL is required." }, { status: 400 }, ); } try { if (request.nextUrl.searchParams.get("asset") === "1") { const asset = await getSafeRemoteAsset(url); return new NextResponse(new Uint8Array(asset.body), { headers: { "Cache-Control": "public, max-age=3600, stale-while-revalidate=86400", "Content-Type": asset.contentType, "X-Content-Type-Options": "nosniff", }, }); } const preview = await getSafeLinkPreview(url); return NextResponse.json(preview, { headers: { "Cache-Control": "public, s-maxage=3600, stale-while-revalidate=86400", "X-Content-Type-Options": "nosniff", }, }); } catch (error) { console.warn("Notion mention preview rejected", error); return NextResponse.json( { error: "Preview unavailable." }, { status: 422 }, ); } } 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","next",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/next","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"next"}]]}]}]]}],["$","$L52",null,{"namespace":"@unlumen-ui","registryDependencies":["hover-card","skeleton"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/components/unlumen/notion-mention-link/index.tsx","content":"$54","type":"registry:ui","target":"components/unlumen-ui/notion-mention-link.tsx"},{"path":"registry/components/unlumen/notion-mention-link/link-preview.server.ts","content":"$55","type":"registry:lib","target":"lib/notion-link-preview.server.ts"},{"path":"registry/components/unlumen/notion-mention-link/route.ts","content":"$56","type":"registry:page","target":"app/api/notion-mention-link/route.ts"}],"className":"h-[70svh] min-h-80"}]]}]