create-ncblock 0.0.1

package/templates/debug/src/index.tsx

@@ -0,0 +1,1963 @@
+import {
+	type NotionCreatePagePosition,
+	NotionCustomBlock,
+	type NotionCustomBlockContext,
+	type NotionDataSource,
+	type NotionDataSourceId,
+	type NotionPage,
+	type NotionPageId,
+	pages,
+	useCustomBlockContext,
+	useDataSourceDefinitions,
+	useTheme,
+} from "ncblock"
+import React, {
+	Component,
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from "react"
+import ReactDOM from "react-dom/client"
+
+import "./index.css"
+
+type LogEntry = {
+	id: number
+	time: string
+	direction: "sent" | "received"
+	type: string
+	data: unknown
+}
+
+type ThemeOverride = "host" | "light" | "dark"
+type TrackedPage = {
+	page: NotionPage
+	draftTitle: string
+	draftIcon: string
+}
+
+const cardClass =
+	"mb-3 rounded-lg border border-(--border) bg-(--card-bg) px-4 py-3"
+const labelClass =
+	"text-[10px] font-semibold uppercase tracking-[0.06em] text-(--muted)"
+const metaTextClass =
+	"font-mono text-[11px] font-normal normal-case tracking-normal text-(--muted)"
+
+function App() {
+	const ctx = useCustomBlockContext()
+	const hostThemeValue = useTheme()
+	const dataSources = useDataSourceDefinitions()
+	const [isPaused, setIsPaused] = useState(false)
+	const { log, initData, send, clearLog } = useMessageLog(isPaused)
+	const [themeOverride, setThemeOverride] = useState<ThemeOverride>("host")
+	const inIframe = window.parent !== window
+	const hostTheme = hostThemeValue === "dark" ? "dark" : "light"
+	const theme = themeOverride === "host" ? hostTheme : themeOverride
+	const { toast, copy } = useCopyToast()
+	const viewport = useViewportInfo()
+	const readyAt = useReadyTimestamp(true)
+	const elapsedSeconds = useElapsedSeconds(readyAt)
+
+	const status = !inIframe
+		? { label: "Standalone", color: "var(--status-standalone)" }
+		: {
+				label: `Connected${
+					elapsedSeconds !== null ? ` · ${formatElapsed(elapsedSeconds)}` : ""
+				}`,
+				color: "var(--status-connected)",
+			}
+
+	const themeVars = {
+		"--status-color": status.color,
+	} as React.CSSProperties
+
+	const contextValue = {
+		theme: hostThemeValue,
+		customBlockId: ctx?.customBlockId,
+		parent: ctx?.parent,
+		page: ctx?.page,
+		dataSources,
+	}
+
+	const metadataRows: Array<[string, string]> = [
+		["origin", window.location.origin],
+		["url", window.location.href],
+		["sandbox", inIframe ? "iframe" : "standalone"],
+		[
+			"theme",
+			`${hostThemeValue ?? "unknown"}${themeOverride !== "host" ? ` (override: ${themeOverride})` : ""}`,
+		],
+		["bridgeProtocolVersion", getBridgeProtocolVersion(initData) ?? "\u2014"],
+		["viewport", `${viewport.innerWidth} \u00d7 ${viewport.innerHeight}`],
+		["contentHeight", `${viewport.scrollHeight}px`],
+		["devicePixelRatio", String(viewport.devicePixelRatio)],
+	]
+
+	return (
+		<div
+			data-theme={theme}
+			className="bg-(--app-bg) p-8 text-(--foreground)"
+			style={themeVars}
+		>
+			<div className="mb-6 flex flex-wrap items-center justify-between gap-3">
+				<h1 className="text-[32px] font-bold leading-tight tracking-[-0.03em]">
+					Debug
+				</h1>
+				<div className="flex items-center gap-3">
+					<div className="flex items-center gap-1.5 leading-none">
+						<span
+							className="inline-block h-2 w-2 rounded-full bg-(--status-color)"
+							aria-hidden="true"
+						/>
+						<span className="text-[13px] font-medium leading-none text-(--status-color)">
+							{status.label}
+						</span>
+					</div>
+					<ThemeToggle value={themeOverride} onChange={setThemeOverride} />
+				</div>
+			</div>
+
+			{/* Connection metadata */}
+			<CollapsibleCard
+				label="Metadata"
+				headerExtra={
+					<span className={metaTextClass}>{metadataRows.length} fields</span>
+				}
+				headerActions={
+					<IconButton
+						label="Copy metadata JSON"
+						onClick={() =>
+							copy(serializeForCopy(Object.fromEntries(metadataRows)))
+						}
+					>
+						<CopyIcon />
+					</IconButton>
+				}
+			>
+				<div className="rounded-lg border border-(--border) bg-(--app-bg) p-1">
+					{metadataRows.map(([key, val]) => (
+						<MetadataRow key={key} label={key} value={val} onCopy={copy} />
+					))}
+				</div>
+			</CollapsibleCard>
+
+			{/* Context state */}
+			<CollapsibleCard
+				label="Init payload"
+				headerExtra={
+					<span className={metaTextClass}>
+						{Object.keys(contextValue).length} keys
+					</span>
+				}
+				headerActions={
+					<IconButton
+						label="Copy context JSON"
+						onClick={() => copy(serializeForCopy(contextValue))}
+					>
+						<CopyIcon />
+					</IconButton>
+				}
+			>
+				<JsonPanel
+					value={contextValue}
+					onCopy={copy}
+					defaultExpandedDepth={2}
+				/>
+			</CollapsibleCard>
+
+			{/* Create page */}
+			<CreatePageCard context={ctx} dataSources={dataSources} />
+
+			{/* Send message */}
+			<SendMessageCard onSend={send} />
+
+			{/* Events log */}
+			<EventsLog
+				log={log}
+				onCopy={copy}
+				onClear={clearLog}
+				isPaused={isPaused}
+				onPauseChange={setIsPaused}
+			/>
+
+			{/* Copy toast */}
+			{toast !== null && (
+				<div className="fixed bottom-5 left-1/2 z-1000 max-w-[80%] -translate-x-1/2 overflow-hidden text-ellipsis whitespace-nowrap rounded-lg border border-(--border) bg-(--toast-bg) px-3.5 py-1.5 font-mono text-xs text-(--toast-fg) shadow-(--toast-shadow)">
+					Copied: {toast}
+				</div>
+			)}
+		</div>
+	)
+}
+
+// --- Hooks ---
+
+function useMessageLog(isPaused: boolean) {
+	const [log, setLog] = useState<LogEntry[]>([])
+	const [initData, setInitData] = useState<unknown>(null)
+	const idRef = useRef(0)
+	const pausedRef = useRef(isPaused)
+	pausedRef.current = isPaused
+	const initSeenRef = useRef(false)
+
+	useEffect(() => {
+		const inIframe = window.parent !== window
+		const handler = (event: MessageEvent) => {
+			if (!inIframe || event.source !== window.parent) {
+				return
+			}
+			const d = event.data
+			if (
+				!d ||
+				typeof d !== "object" ||
+				typeof (d as { type?: unknown }).type !== "string"
+			) {
+				return
+			}
+			const type = (d as { type: string }).type
+			if (type === "init" && !initSeenRef.current) {
+				initSeenRef.current = true
+				setInitData(d)
+			}
+			if (pausedRef.current) {
+				return
+			}
+			setLog(prev => [
+				...prev,
+				{
+					id: idRef.current++,
+					time: formatTime(new Date()),
+					direction: "received",
+					type,
+					data: d,
+				},
+			])
+		}
+		window.addEventListener("message", handler)
+		return () => {
+			window.removeEventListener("message", handler)
+		}
+	}, [])
+
+	const send = useCallback((message: Record<string, unknown>) => {
+		window.parent.postMessage(message, "*")
+		const type = typeof message.type === "string" ? message.type : "unknown"
+		setLog(prev => [
+			...prev,
+			{
+				id: idRef.current++,
+				time: formatTime(new Date()),
+				direction: "sent",
+				type,
+				data: message,
+			},
+		])
+	}, [])
+
+	const clearLog = useCallback(() => setLog([]), [])
+
+	return { log, initData, send, clearLog }
+}
+
+function useReadyTimestamp(isReady: boolean): number | null {
+	const [readyAt, setReadyAt] = useState<number | null>(null)
+	useEffect(() => {
+		if (isReady && readyAt === null) {
+			setReadyAt(Date.now())
+		}
+	}, [isReady, readyAt])
+	return readyAt
+}
+
+function useCopyToast() {
+	const [toast, setToast] = useState<string | null>(null)
+
+	useEffect(() => {
+		if (toast === null) {
+			return
+		}
+		const t = setTimeout(() => setToast(null), 1200)
+		return () => clearTimeout(t)
+	}, [toast])
+
+	const copy = (text: string) => {
+		// navigator.clipboard.writeText is blocked inside sandboxed iframes,
+		// so fall back to execCommand("copy") with a temporary textarea.
+		try {
+			const textarea = document.createElement("textarea")
+			textarea.value = text
+			textarea.style.position = "fixed"
+			textarea.style.opacity = "0"
+			document.body.appendChild(textarea)
+			textarea.select()
+			document.execCommand("copy")
+			document.body.removeChild(textarea)
+		} catch {
+			// Silently fail if even execCommand is blocked
+		}
+		setToast(text.length > 40 ? text.slice(0, 40) + "\u2026" : text)
+	}
+
+	return { toast, copy }
+}
+
+function useElapsedSeconds(from: number | null) {
+	const [now, setNow] = useState(() => Date.now())
+	useEffect(() => {
+		if (from === null) {
+			return
+		}
+		setNow(Date.now())
+		const id = setInterval(() => setNow(Date.now()), 1000)
+		return () => clearInterval(id)
+	}, [from])
+	if (from === null) {
+		return null
+	}
+	return Math.max(0, Math.floor((now - from) / 1000))
+}
+
+function useViewportInfo() {
+	const [info, setInfo] = useState(() => captureViewportInfo())
+	useEffect(() => {
+		const onChange = () => setInfo(captureViewportInfo())
+		window.addEventListener("resize", onChange)
+		const root = document.getElementById("root")
+		let ro: ResizeObserver | null = null
+		if (root && typeof ResizeObserver !== "undefined") {
+			ro = new ResizeObserver(onChange)
+			ro.observe(root)
+		}
+		return () => {
+			window.removeEventListener("resize", onChange)
+			ro?.disconnect()
+		}
+	}, [])
+	return info
+}
+
+function captureViewportInfo() {
+	const root = document.getElementById("root")
+	return {
+		innerWidth: window.innerWidth,
+		innerHeight: window.innerHeight,
+		scrollHeight: root?.scrollHeight ?? document.documentElement.scrollHeight,
+		devicePixelRatio: window.devicePixelRatio,
+	}
+}
+
+function useOutsideClick(
+	ref: React.RefObject<HTMLElement | null>,
+	open: boolean,
+	onClose: () => void,
+) {
+	useEffect(() => {
+		if (!open) {
+			return
+		}
+		const onDoc = (event: MouseEvent) => {
+			if (ref.current && !ref.current.contains(event.target as Node)) {
+				onClose()
+			}
+		}
+		document.addEventListener("mousedown", onDoc)
+		return () => document.removeEventListener("mousedown", onDoc)
+	}, [open, onClose, ref])
+}
+
+// --- Components ---
+
+function CollapsibleCard({
+	label,
+	headerActions,
+	headerExtra,
+	defaultOpen = true,
+	children,
+}: {
+	label: string
+	headerActions?: React.ReactNode
+	headerExtra?: React.ReactNode
+	defaultOpen?: boolean
+	children: React.ReactNode
+}) {
+	const [open, setOpen] = useState(defaultOpen)
+	return (
+		<div className={cardClass}>
+			<div className={`-mx-1 flex items-center gap-2 ${open ? "mb-2.5" : ""}`}>
+				<button
+					type="button"
+					aria-expanded={open}
+					onClick={() => setOpen(o => !o)}
+					className="group/trigger flex min-w-0 flex-1 items-center gap-2 rounded-md px-1.5 py-1 text-left outline-none transition-colors duration-150 hover:bg-(--hover-bg) focus-visible:ring-1 focus-visible:ring-(--button-bg)"
+				>
+					<ChevronIcon isOpen={open} />
+					<span
+						className={`${labelClass} transition-opacity duration-150 group-hover/trigger:text-(--foreground)`}
+					>
+						{label}
+					</span>
+					{headerExtra && (
+						<span className="flex min-w-0 items-center gap-1.5 truncate">
+							{headerExtra}
+						</span>
+					)}
+				</button>
+				{headerActions && (
+					<div
+						className="flex shrink-0 items-center gap-0.5"
+						onClick={e => e.stopPropagation()}
+					>
+						{headerActions}
+					</div>
+				)}
+			</div>
+			{open && children}
+		</div>
+	)
+}
+
+function MetadataRow({
+	label,
+	value,
+	onCopy,
+}: {
+	label: string
+	value: string
+	onCopy: (text: string) => void
+}) {
+	return (
+		<div className="group flex items-center gap-2 rounded-md px-1.5 py-1 hover:bg-(--hover-bg)">
+			<span className="w-3.5 shrink-0" />
+			<span className="shrink-0 font-mono text-[12px] text-(--muted)">
+				{label}
+			</span>
+			<span className="shrink-0 font-mono text-[12px] opacity-60">:</span>
+			<span className="min-w-0 flex-1 break-all font-mono text-[12px] leading-5 text-(--foreground)">
+				{value}
+			</span>
+			<div className="shrink-0 opacity-0 transition-opacity duration-150 group-hover:opacity-100 focus-within:opacity-100">
+				<CopyValueButton
+					label={`Copy ${label}`}
+					onClick={() => onCopy(value)}
+				/>
+			</div>
+		</div>
+	)
+}
+
+function ThemeToggle({
+	value,
+	onChange,
+}: {
+	value: ThemeOverride
+	onChange: (value: ThemeOverride) => void
+}) {
+	const options: { id: ThemeOverride; label: string }[] = [
+		{ id: "host", label: "Host" },
+		{ id: "light", label: "Light" },
+		{ id: "dark", label: "Dark" },
+	]
+	return (
+		<div
+			role="group"
+			aria-label="Theme override"
+			className="inline-flex rounded-md border border-(--border) p-0.5 text-[11px]"
+		>
+			{options.map(option => {
+				const active = option.id === value
+				return (
+					<button
+						key={option.id}
+						type="button"
+						onClick={() => onChange(option.id)}
+						className={`rounded-[4px] px-2 py-0.5 font-medium outline-none transition-colors ${
+							active
+								? "bg-(--button-bg) text-(--button-fg)"
+								: "text-(--muted) hover:bg-(--hover-bg) hover:text-(--foreground)"
+						}`}
+					>
+						{option.label}
+					</button>
+				)
+			})}
+		</div>
+	)
+}
+
+function JsonPanel({
+	value,
+	onCopy,
+	defaultExpandedDepth = 2,
+	embedded = false,
+}: {
+	value: unknown
+	onCopy: (text: string) => void
+	defaultExpandedDepth?: number
+	embedded?: boolean
+}) {
+	const expandable = isExpandableJsonValue(value)
+	const entries = expandable
+		? Array.isArray(value)
+			? value.map((item, index) => [String(index), item] as const)
+			: Object.entries(value)
+		: []
+
+	const containerClass = embedded
+		? ""
+		: "max-h-[360px] overflow-auto rounded-lg border border-(--border) bg-(--app-bg) p-1"
+
+	return (
+		<div className={containerClass}>
+			{expandable ? (
+				entries.length === 0 ? (
+					<div className="px-2 py-1.5 font-mono text-[11px] italic text-(--muted)">
+						Empty {Array.isArray(value) ? "array" : "object"}
+					</div>
+				) : (
+					<div>
+						{entries.map(([childKey, childValue]) => (
+							<JsonNode
+								key={childKey}
+								name={childKey}
+								value={childValue}
+								path={childKey}
+								depth={0}
+								onCopy={onCopy}
+								defaultExpandedDepth={defaultExpandedDepth}
+							/>
+						))}
+					</div>
+				)
+			) : (
+				<JsonNode
+					name="value"
+					value={value}
+					path="value"
+					depth={0}
+					onCopy={onCopy}
+					defaultExpandedDepth={defaultExpandedDepth}
+				/>
+			)}
+		</div>
+	)
+}
+
+function JsonNode({
+	name,
+	value,
+	path,
+	depth,
+	onCopy,
+	defaultExpandedDepth,
+}: {
+	name: string
+	value: unknown
+	path: string
+	depth: number
+	onCopy: (text: string) => void
+	defaultExpandedDepth: number
+}) {
+	const expandable = isExpandableJsonValue(value)
+	const [isOpen, setIsOpen] = useState(depth < defaultExpandedDepth)
+
+	if (!expandable) {
+		return (
+			<div className="group flex items-center gap-2 rounded-md px-1.5 py-1 hover:bg-(--hover-bg)">
+				<span className="w-3.5 shrink-0" />
+				<span className="shrink-0 font-mono text-[12px] text-(--muted)">
+					{name}
+				</span>
+				<span className="shrink-0 font-mono text-[12px] opacity-60">:</span>
+				<span className="min-w-0 flex-1 break-all font-mono text-[12px] leading-5 text-(--foreground)">
+					{formatPrimitiveValue(value)}
+				</span>
+				<div className="shrink-0 opacity-0 transition-opacity duration-150 group-hover:opacity-100 focus-within:opacity-100">
+					<CopyValueButton
+						label={`Copy ${name}`}
+						onClick={() => onCopy(serializeForCopy(value))}
+					/>
+				</div>
+			</div>
+		)
+	}
+
+	const entries = Array.isArray(value)
+		? value.map((item, index) => [String(index), item] as const)
+		: Object.entries(value)
+	const showCopyButton = depth > 0
+
+	return (
+		<div>
+			<div className="group flex items-stretch gap-1 rounded-md hover:bg-(--hover-bg)">
+				<button
+					type="button"
+					aria-expanded={isOpen}
+					onClick={() => setIsOpen(open => !open)}
+					className="flex min-h-7 min-w-0 flex-1 items-center gap-2 rounded-md px-1.5 py-1 text-left outline-none focus-visible:ring-1 focus-visible:ring-(--button-bg)"
+				>
+					<ChevronIcon isOpen={isOpen} />
+					<span className="shrink-0 font-mono text-[12px] text-(--muted)">
+						{name}
+					</span>
+					<span className="shrink-0 rounded-full bg-(--chip-bg) px-1.5 py-0.5 font-mono text-[9px] uppercase tracking-[0.04em] text-(--muted)">
+						{getJsonTypeLabel(value)}
+					</span>
+					<span className="min-w-0 truncate font-mono text-[11px] text-(--muted) opacity-70">
+						{formatInlinePreview(value)}
+					</span>
+				</button>
+				{showCopyButton && (
+					<div className="flex shrink-0 items-center pr-1 opacity-0 transition-opacity duration-150 group-hover:opacity-100 focus-within:opacity-100">
+						<CopyValueButton
+							label={`Copy ${name}`}
+							onClick={() => onCopy(serializeForCopy(value))}
+						/>
+					</div>
+				)}
+			</div>
+			{isOpen && (
+				<div className="ml-[9px] border-l border-(--border-subtle) pl-1">
+					{entries.length === 0 ? (
+						<div className="px-2.5 py-1 font-mono text-[11px] italic text-(--muted)">
+							Empty {Array.isArray(value) ? "array" : "object"}
+						</div>
+					) : (
+						<div>
+							{entries.map(([childKey, childValue]) => (
+								<JsonNode
+									key={`${path}.${childKey}`}
+									name={childKey}
+									value={childValue}
+									path={`${path}.${childKey}`}
+									depth={depth + 1}
+									onCopy={onCopy}
+									defaultExpandedDepth={defaultExpandedDepth}
+								/>
+							))}
+						</div>
+					)}
+				</div>
+			)}
+		</div>
+	)
+}
+
+function EventsLog({
+	log,
+	onCopy,
+	onClear,
+	isPaused,
+	onPauseChange,
+}: {
+	log: LogEntry[]
+	onCopy: (text: string) => void
+	onClear: () => void
+	isPaused: boolean
+	onPauseChange: (paused: boolean) => void
+}) {
+	const [excludedDirections, setExcludedDirections] = useState<
+		Set<"sent" | "received">
+	>(() => new Set())
+	const [excludedTypes, setExcludedTypes] = useState<Set<string>>(
+		() => new Set(),
+	)
+	const [expanded, setExpanded] = useState<Set<number>>(() => new Set())
+	const [filterOpen, setFilterOpen] = useState(false)
+
+	const availableTypes = useMemo(() => {
+		const set = new Set<string>()
+		for (const entry of log) {
+			set.add(entry.type)
+		}
+		return [...set].sort()
+	}, [log])
+
+	const filtered = useMemo(
+		() =>
+			log.filter(
+				entry =>
+					!excludedDirections.has(entry.direction) &&
+					!excludedTypes.has(entry.type),
+			),
+		[log, excludedDirections, excludedTypes],
+	)
+
+	const sentCount = useMemo(
+		() => log.filter(entry => entry.direction === "sent").length,
+		[log],
+	)
+	const receivedCount = log.length - sentCount
+	const hasFilter = excludedDirections.size > 0 || excludedTypes.size > 0
+
+	const toggleExpanded = useCallback((id: number) => {
+		setExpanded(prev => {
+			const next = new Set(prev)
+			if (next.has(id)) {
+				next.delete(id)
+			} else {
+				next.add(id)
+			}
+			return next
+		})
+	}, [])
+
+	const clearFilters = useCallback(() => {
+		setExcludedDirections(new Set())
+		setExcludedTypes(new Set())
+	}, [])
+
+	return (
+		<CollapsibleCard
+			label="Events"
+			headerExtra={
+				<>
+					<span className={metaTextClass}>
+						<span className="text-(--sent-color)">
+							{"\u2191"} {sentCount}
+						</span>
+						<span className="mx-1 opacity-40">·</span>
+						<span className="text-(--received-color)">
+							{"\u2193"} {receivedCount}
+						</span>
+						{hasFilter && log.length !== filtered.length && (
+							<span className="ml-2 opacity-60">({filtered.length} shown)</span>
+						)}
+					</span>
+					{isPaused && (
+						<span className="rounded-full bg-(--chip-bg) px-1.5 py-0.5 font-mono text-[9px] font-semibold uppercase tracking-[0.04em] text-(--status-waiting)">
+							Paused
+						</span>
+					)}
+				</>
+			}
+			headerActions={
+				<>
+					<FilterMenu
+						open={filterOpen}
+						onOpenChange={setFilterOpen}
+						availableTypes={availableTypes}
+						excludedDirections={excludedDirections}
+						excludedTypes={excludedTypes}
+						onExcludedDirectionsChange={setExcludedDirections}
+						onExcludedTypesChange={setExcludedTypes}
+						onClearFilters={clearFilters}
+						active={hasFilter}
+					/>
+					<IconButton
+						label={isPaused ? "Resume logging" : "Pause logging"}
+						onClick={() => onPauseChange(!isPaused)}
+					>
+						{isPaused ? <PlayIcon /> : <PauseIcon />}
+					</IconButton>
+					<IconButton label="Clear events" onClick={onClear}>
+						<TrashIcon />
+					</IconButton>
+				</>
+			}
+		>
+			<div className="max-h-[400px] overflow-auto rounded-lg border border-(--border) bg-(--app-bg) p-1 font-mono">
+				{filtered.length === 0 && (
+					<div className="px-2 py-1.5 text-[11px] italic text-(--muted)">
+						{log.length === 0
+							? "No events yet"
+							: "No events match the current filters"}
+					</div>
+				)}
+				{[...filtered].reverse().map(entry => {
+					const isOpen = expanded.has(entry.id)
+					return (
+						<div key={entry.id} className="group">
+							<div
+								onClick={() => toggleExpanded(entry.id)}
+								className="flex items-center gap-2 rounded-md px-1.5 py-1 hover:bg-(--hover-bg)"
+							>
+								<ChevronIcon isOpen={isOpen} />
+								<span
+									className={`shrink-0 text-[13px] font-bold leading-4 ${
+										entry.direction === "sent"
+											? "text-(--sent-color)"
+											: "text-(--received-color)"
+									}`}
+								>
+									{entry.direction === "sent" ? "\u2191" : "\u2193"}
+								</span>
+								<span className="shrink-0 text-[11px] opacity-35">
+									{entry.time}
+								</span>
+								<span className="shrink-0 rounded-full bg-(--chip-bg) px-1.5 py-0.5 text-[10px] text-(--muted)">
+									{entry.type}
+								</span>
+								<span className="min-w-0 flex-1 truncate text-[11px] text-(--muted) opacity-80">
+									{formatInlinePreview(entry.data)}
+								</span>
+								<div
+									className="shrink-0 opacity-0 transition-opacity duration-150 group-hover:opacity-100 focus-within:opacity-100"
+									onClick={e => e.stopPropagation()}
+								>
+									<CopyValueButton
+										label={`Copy ${entry.type} event`}
+										onClick={() => onCopy(serializeForCopy(entry.data))}
+									/>
+								</div>
+							</div>
+							{isOpen && (
+								<div className="mb-1 ml-[9px] border-l border-(--border-subtle) pl-1">
+									<JsonPanel
+										value={entry.data}
+										onCopy={onCopy}
+										defaultExpandedDepth={3}
+										embedded
+									/>
+								</div>
+							)}
+						</div>
+					)
+				})}
+			</div>
+		</CollapsibleCard>
+	)
+}
+
+function FilterMenu({
+	open,
+	onOpenChange,
+	availableTypes,
+	excludedDirections,
+	excludedTypes,
+	onExcludedDirectionsChange,
+	onExcludedTypesChange,
+	onClearFilters,
+	active,
+}: {
+	open: boolean
+	onOpenChange: (open: boolean) => void
+	availableTypes: string[]
+	excludedDirections: Set<"sent" | "received">
+	excludedTypes: Set<string>
+	onExcludedDirectionsChange: (value: Set<"sent" | "received">) => void
+	onExcludedTypesChange: (value: Set<string>) => void
+	onClearFilters: () => void
+	active: boolean
+}) {
+	const ref = useRef<HTMLDivElement>(null)
+	useOutsideClick(ref, open, () => onOpenChange(false))
+
+	const directions: { id: "sent" | "received"; label: string }[] = [
+		{ id: "sent", label: "Sent" },
+		{ id: "received", label: "Received" },
+	]
+
+	return (
+		<div ref={ref} className="relative">
+			<IconButton label="Filter events" onClick={() => onOpenChange(!open)}>
+				<FilterIcon active={active} />
+			</IconButton>
+			{open && (
+				<div className="absolute right-0 top-full z-10 mt-1 w-56 rounded-lg border border-(--border) bg-(--card-bg) p-2 shadow-(--toast-shadow)">
+					<div className="mb-1 px-1 text-[10px] font-semibold uppercase tracking-[0.05em] opacity-40">
+						Direction
+					</div>
+					{directions.map(direction => (
+						<FilterCheckbox
+							key={direction.id}
+							label={direction.label}
+							checked={!excludedDirections.has(direction.id)}
+							onChange={checked => {
+								const next = new Set(excludedDirections)
+								if (checked) {
+									next.delete(direction.id)
+								} else {
+									next.add(direction.id)
+								}
+								onExcludedDirectionsChange(next)
+							}}
+						/>
+					))}
+					<div className="mt-2 mb-1 px-1 text-[10px] font-semibold uppercase tracking-[0.05em] opacity-40">
+						Types
+					</div>
+					{availableTypes.length === 0 ? (
+						<div className="px-1 py-1 font-mono text-[11px] italic text-(--muted)">
+							No types yet
+						</div>
+					) : (
+						availableTypes.map(type => (
+							<FilterCheckbox
+								key={type}
+								label={type}
+								checked={!excludedTypes.has(type)}
+								onChange={checked => {
+									const next = new Set(excludedTypes)
+									if (checked) {
+										next.delete(type)
+									} else {
+										next.add(type)
+									}
+									onExcludedTypesChange(next)
+								}}
+							/>
+						))
+					)}
+					{active && (
+						<button
+							type="button"
+							onClick={onClearFilters}
+							className="mt-1 w-full rounded-md px-2 py-1 text-left font-mono text-[11px] text-(--muted) transition-colors hover:bg-(--hover-bg) hover:text-(--foreground)"
+						>
+							Clear filters
+						</button>
+					)}
+				</div>
+			)}
+		</div>
+	)
+}
+
+function FilterCheckbox({
+	label,
+	checked,
+	onChange,
+}: {
+	label: string
+	checked: boolean
+	onChange: (checked: boolean) => void
+}) {
+	return (
+		<label className="flex cursor-pointer items-center gap-2 rounded-md px-1 py-1 font-mono text-[12px] hover:bg-(--hover-bg)">
+			<input
+				type="checkbox"
+				checked={checked}
+				onChange={event => onChange(event.target.checked)}
+				className="h-3.5 w-3.5 cursor-pointer"
+				style={{ accentColor: "var(--button-bg)" }}
+			/>
+			<span className="min-w-0 flex-1 truncate">{label}</span>
+		</label>
+	)
+}
+
+function IconButton({
+	label,
+	onClick,
+	children,
+}: {
+	label: string
+	onClick: () => void
+	children: React.ReactNode
+}) {
+	return (
+		<button
+			type="button"
+			aria-label={label}
+			title={label}
+			onClick={onClick}
+			className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-(--foreground) opacity-55 outline-none transition-[opacity,background-color] duration-150 ease-out hover:bg-(--hover-bg) hover:opacity-100 focus-visible:opacity-100 focus-visible:ring-1 focus-visible:ring-(--button-bg)"
+		>
+			{children}
+		</button>
+	)
+}
+
+function CopyValueButton({
+	label,
+	onClick,
+}: {
+	label: string
+	onClick: () => void
+}) {
+	return (
+		<IconButton label={label} onClick={onClick}>
+			<CopyIcon />
+		</IconButton>
+	)
+}
+
+function ChevronIcon({ isOpen }: { isOpen: boolean }) {
+	return (
+		<svg
+			aria-hidden="true"
+			viewBox="0 0 16 16"
+			className={`h-3.5 w-3.5 shrink-0 text-(--muted) transition-transform duration-150 ease-out ${
+				isOpen ? "rotate-90" : ""
+			}`}
+			fill="none"
+			stroke="currentColor"
+			strokeWidth="1.75"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		>
+			<path d="M6 4l4 4-4 4" />
+		</svg>
+	)
+}
+
+function CopyIcon() {
+	return (
+		<svg
+			aria-hidden="true"
+			viewBox="0 0 16 16"
+			className="h-3.5 w-3.5"
+			fill="none"
+			stroke="currentColor"
+			strokeWidth="1.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		>
+			<rect x="6" y="6" width="8" height="8" rx="1.5" />
+			<path d="M3 11V3.5C3 3.22 3.22 3 3.5 3H10" />
+		</svg>
+	)
+}
+
+function PauseIcon() {
+	return (
+		<svg
+			aria-hidden="true"
+			viewBox="0 0 16 16"
+			className="h-3.5 w-3.5"
+			fill="currentColor"
+		>
+			<rect x="4.5" y="3.5" width="2.5" height="9" rx="0.75" />
+			<rect x="9" y="3.5" width="2.5" height="9" rx="0.75" />
+		</svg>
+	)
+}
+
+function PlayIcon() {
+	return (
+		<svg
+			aria-hidden="true"
+			viewBox="0 0 16 16"
+			className="h-3.5 w-3.5"
+			fill="currentColor"
+		>
+			<path d="M5 3.5v9l7-4.5-7-4.5z" />
+		</svg>
+	)
+}
+
+function TrashIcon() {
+	return (
+		<svg
+			aria-hidden="true"
+			viewBox="0 0 16 16"
+			className="h-3.5 w-3.5"
+			fill="none"
+			stroke="currentColor"
+			strokeWidth="1.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		>
+			<path d="M3 4.5h10" />
+			<path d="M6.5 4.5V3.25a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 .75.75V4.5" />
+			<path d="M5 4.5v8a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1v-8" />
+			<path d="M7 7v4M9 7v4" />
+		</svg>
+	)
+}
+
+function FilterIcon({ active }: { active: boolean }) {
+	return (
+		<svg
+			aria-hidden="true"
+			viewBox="0 0 16 16"
+			className="h-3.5 w-3.5"
+			fill="none"
+			stroke="currentColor"
+			strokeWidth="1.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		>
+			<path d="M2.5 3.5h11l-4 5.5v3.5l-3 1V9L2.5 3.5z" />
+			{active && (
+				<circle
+					cx="13"
+					cy="3"
+					r="2"
+					fill="var(--status-waiting)"
+					stroke="var(--card-bg)"
+					strokeWidth="1"
+				/>
+			)}
+		</svg>
+	)
+}
+
+function HistoryIcon() {
+	return (
+		<svg
+			aria-hidden="true"
+			viewBox="0 0 16 16"
+			className="h-3.5 w-3.5"
+			fill="none"
+			stroke="currentColor"
+			strokeWidth="1.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		>
+			<path d="M2.5 8a5.5 5.5 0 1 0 1.7-3.97" />
+			<path d="M2.5 3v3h3" />
+			<path d="M8 5v3.5l2 1.25" />
+		</svg>
+	)
+}
+
+/** Single-line JSON with spaces after colons and commas, but strings preserved intact. */
+function prettyJson(value: unknown): string {
+	try {
+		return JSON.stringify(value, null, 2).replace(/\n\s*/g, " ")
+	} catch {
+		return String(value)
+	}
+}
+
+function serializeForCopy(value: unknown) {
+	try {
+		return JSON.stringify(value, null, 2) ?? String(value)
+	} catch {
+		return String(value)
+	}
+}
+
+function isExpandableJsonValue(
+	value: unknown,
+): value is Record<string, unknown> | unknown[] {
+	return value !== null && typeof value === "object"
+}
+
+function getJsonTypeLabel(value: unknown) {
+	if (Array.isArray(value)) {
+		return `array ${value.length}`
+	}
+	if (value === null) {
+		return "null"
+	}
+	if (typeof value === "object") {
+		return `object ${Object.keys(value).length}`
+	}
+	return typeof value
+}
+
+function formatPrimitiveValue(value: unknown) {
+	if (typeof value === "string") {
+		return JSON.stringify(value)
+	}
+	if (value === undefined) {
+		return "undefined"
+	}
+	return String(value)
+}
+
+function formatInlinePreview(value: unknown) {
+	if (Array.isArray(value)) {
+		if (value.length === 0) {
+			return "[]"
+		}
+		const preview = value
+			.slice(0, 3)
+			.map(item => summarizePreviewToken(item))
+			.join(", ")
+		return value.length > 3 ? `${preview}, +${value.length - 3} more` : preview
+	}
+
+	if (value !== null && typeof value === "object") {
+		const keys = Object.keys(value)
+		if (keys.length === 0) {
+			return "{}"
+		}
+		const preview = keys.slice(0, 4).join(", ")
+		return keys.length > 4 ? `${preview}, +${keys.length - 4} more` : preview
+	}
+
+	return formatPrimitiveValue(value)
+}
+
+function summarizePreviewToken(value: unknown) {
+	if (Array.isArray(value)) {
+		return `[${value.length}]`
+	}
+	if (value !== null && typeof value === "object") {
+		return `{${Object.keys(value).length}}`
+	}
+	if (typeof value === "string") {
+		return value.length > 18 ? `${value.slice(0, 18)}\u2026` : value
+	}
+	return String(value)
+}
+
+function formatElapsed(seconds: number) {
+	if (seconds < 60) {
+		return `${seconds}s ago`
+	}
+	if (seconds < 3600) {
+		const minutes = Math.floor(seconds / 60)
+		return `${minutes}m ago`
+	}
+	const hours = Math.floor(seconds / 3600)
+	return `${hours}h ago`
+}
+
+function getBridgeProtocolVersion(initData: unknown): string | null {
+	if (!initData || typeof initData !== "object") {
+		return null
+	}
+	const v = (initData as { bridgeProtocolVersion?: unknown })
+		.bridgeProtocolVersion
+	if (typeof v === "number") {
+		return String(v)
+	}
+	if (typeof v === "string") {
+		return v
+	}
+	return null
+}
+
+function formatTime(date: Date) {
+	return date.toISOString().slice(11, 23)
+}
+
+function getContentHeight() {
+	const root = document.getElementById("root")
+	return Math.ceil(root?.scrollHeight ?? document.body.scrollHeight)
+}
+
+const PRESETS: {
+	label: string
+	createMessage: () => Record<string, unknown>
+}[] = [
+	{
+		label: "ready",
+		createMessage: () => ({
+			type: "ready",
+			bridgeProtocolVersion: 1,
+			manifest: null,
+		}),
+	},
+	{
+		label: "resize 900",
+		createMessage: () => ({ type: "resize", height: 900 }),
+	},
+	{
+		label: "resize: contentHeight",
+		createMessage: () => ({ type: "resize", height: getContentHeight() }),
+	},
+	{ label: "ping", createMessage: () => ({ type: "ping" }) },
+	{
+		label: "queryDataSource",
+		createMessage: () => ({
+			type: "queryDataSource",
+			requestId: "debug-query",
+			key: "default",
+			limit: 20,
+		}),
+	},
+]
+
+type SendMessageCardProps = {
+	onSend: (message: Record<string, unknown>) => void
+}
+
+function SendMessageCard({ onSend }: SendMessageCardProps) {
+	const [input, setInput] = useState('{ "type": "ready" }')
+	const [history, setHistory] = useState<string[]>([])
+	const [historyOpen, setHistoryOpen] = useState(false)
+	const textareaRef = useRef<HTMLTextAreaElement>(null)
+	const historyRef = useRef<HTMLDivElement>(null)
+
+	const parsed = useMemo<
+		| { ok: true; value: Record<string, unknown> }
+		| { ok: false; error: string | null }
+	>(() => {
+		const trimmed = input.trim()
+		if (!trimmed) {
+			return { ok: false, error: null }
+		}
+		try {
+			const value = JSON.parse(trimmed)
+			if (typeof value !== "object" || value === null || Array.isArray(value)) {
+				return { ok: false, error: "Must be a JSON object" }
+			}
+			return { ok: true, value: value as Record<string, unknown> }
+		} catch {
+			return { ok: false, error: "Invalid JSON" }
+		}
+	}, [input])
+
+	useEffect(() => {
+		const textarea = textareaRef.current
+		if (!textarea) {
+			return
+		}
+		textarea.style.height = "auto"
+		textarea.style.height = `${Math.min(Math.max(textarea.scrollHeight, 32), 200)}px`
+	}, [input])
+
+	useOutsideClick(historyRef, historyOpen, () => setHistoryOpen(false))
+
+	const handleSend = () => {
+		if (!parsed.ok) {
+			return
+		}
+		onSend(parsed.value)
+		setHistory(prev => {
+			if (prev[0] === input) {
+				return prev
+			}
+			return [input, ...prev.filter(entry => entry !== input)].slice(0, 10)
+		})
+	}
+
+	return (
+		<CollapsibleCard label="Send message">
+			<div className="mb-2 flex flex-wrap gap-1.5">
+				{PRESETS.map(preset => (
+					<button
+						key={preset.label}
+						type="button"
+						className="rounded-md border border-(--border) bg-transparent px-2 py-1 font-mono text-[11px] text-(--muted) transition-colors hover:border-(--foreground)/20 hover:bg-(--hover-bg) hover:text-(--foreground)"
+						onClick={() => {
+							const message = preset.createMessage()
+							setInput(prettyJson(message))
+							onSend(message)
+						}}
+					>
+						{preset.label}
+					</button>
+				))}
+			</div>
+			<textarea
+				ref={textareaRef}
+				value={input}
+				onChange={event => setInput(event.target.value)}
+				onKeyDown={event => {
+					if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+						event.preventDefault()
+						handleSend()
+					}
+				}}
+				rows={1}
+				spellCheck={false}
+				style={{ scrollbarWidth: "none" }}
+				className={`block w-full resize-none rounded-md border bg-(--app-bg) px-2.5 py-1.5 font-mono text-[11px] leading-5 outline-none transition-colors [&::-webkit-scrollbar]:hidden focus:border-(--foreground) ${
+					parsed.ok || parsed.error === null
+						? "border-(--border)"
+						: "border-(--error-color)"
+				}`}
+				placeholder='{ "type": "..." }'
+			/>
+			<div className="mt-2 flex items-center justify-between gap-2">
+				<div className="flex min-w-0 items-center gap-2 font-mono text-[10px]">
+					<span className="shrink-0 text-(--muted) opacity-70">
+						{"\u2318\u23ce to send"}
+					</span>
+					{parsed.ok === false && parsed.error !== null && (
+						<span className="min-w-0 truncate text-(--error-color)">
+							{parsed.error}
+						</span>
+					)}
+				</div>
+				<div className="flex shrink-0 items-center gap-1">
+					<div ref={historyRef} className="relative">
+						<IconButton
+							label="Recent sent messages"
+							onClick={() => setHistoryOpen(open => !open)}
+						>
+							<HistoryIcon />
+						</IconButton>
+						{historyOpen && (
+							<div className="absolute right-0 top-full z-10 mt-1 w-72 rounded-lg border border-(--border) bg-(--card-bg) p-1 shadow-(--toast-shadow)">
+								{history.length === 0 ? (
+									<div className="px-2 py-1.5 font-mono text-[11px] italic text-(--muted)">
+										No sent messages yet
+									</div>
+								) : (
+									history.map((item, index) => (
+										<button
+											key={`${index}-${item}`}
+											type="button"
+											onClick={() => {
+												setInput(item)
+												setHistoryOpen(false)
+												textareaRef.current?.focus()
+											}}
+											className="block w-full truncate rounded-md px-2 py-1 text-left font-mono text-[11px] text-(--foreground) hover:bg-(--hover-bg)"
+										>
+											{item}
+										</button>
+									))
+								)}
+							</div>
+						)}
+					</div>
+					<button
+						type="button"
+						disabled={!parsed.ok}
+						onClick={handleSend}
+						className="rounded-md border-0 bg-(--button-bg) px-3 py-1.5 font-mono text-[11px] font-semibold text-(--button-fg) outline-none transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-40"
+					>
+						Send
+					</button>
+				</div>
+			</div>
+		</CollapsibleCard>
+	)
+}
+
+type ErrorBoundaryProps = {
+	children: React.ReactNode
+}
+
+type ErrorBoundaryState = {
+	error: Error | null
+}
+
+class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+	state: ErrorBoundaryState = { error: null }
+
+	static getDerivedStateFromError(error: Error) {
+		return { error }
+	}
+
+	render() {
+		if (this.state.error) {
+			return (
+				<div className="px-10 py-8 text-(--error-color)">
+					<div className="mb-3 text-[28px] font-bold tracking-[-0.02em]">
+						Error
+					</div>
+					<div className="break-all whitespace-pre-wrap rounded-lg border border-(--error-border) bg-(--error-surface) px-5 py-3 font-mono text-xs">
+						{this.state.error.message}
+						{this.state.error.stack && (
+							<div className="mt-2 opacity-60">{this.state.error.stack}</div>
+						)}
+					</div>
+				</div>
+			)
+		}
+		return this.props.children
+	}
+}
+
+type CreatePageCardProps = {
+	context: NotionCustomBlockContext | undefined
+	dataSources: NotionDataSource[]
+}
+
+type CreatePagePreset = {
+	label: string
+	description: string
+	position?: NotionCreatePagePosition
+}
+
+function presetPositions(
+	customBlockId: string | undefined,
+): CreatePagePreset[] {
+	const presets: CreatePagePreset[] = [
+		{
+			label: "Top of page",
+			description: "Append to the top of the page",
+			position: { type: "start" },
+		},
+		{
+			label: "Bottom of page",
+			description: "Append to the bottom of the page",
+			position: { type: "end" },
+		},
+	]
+	if (customBlockId !== undefined) {
+		presets.push(
+			{
+				label: "Above this block",
+				description: "Directly above the custom block",
+				position: { type: "before", blockId: customBlockId },
+			},
+			{
+				label: "Below this block",
+				description: "Directly below the custom block",
+				position: { type: "after", blockId: customBlockId },
+			},
+		)
+	}
+	return presets
+}
+
+function getPageTitle(page: NotionPage): string {
+	const titleValue = page.properties.title
+	if (titleValue === undefined || !("title" in titleValue)) {
+		return ""
+	}
+	const richText = titleValue.title
+	if (!Array.isArray(richText)) {
+		return ""
+	}
+	return richText
+		.map(part => {
+			if (typeof part.plain_text === "string") {
+				return part.plain_text
+			}
+			if (
+				part.type !== "text" ||
+				part.text === null ||
+				typeof part.text !== "object" ||
+				!("content" in part.text)
+			) {
+				return ""
+			}
+			return typeof part.text.content === "string" ? part.text.content : ""
+		})
+		.join("")
+}
+
+function getPageIconValue(page: NotionPage): string {
+	const icon = page.icon
+	if (!icon) {
+		return ""
+	}
+	switch (icon.type) {
+		case "emoji":
+			return icon.emoji
+		case "external":
+			return icon.external.url
+		case "file":
+			return icon.file.url
+		case "custom_emoji":
+			return icon.custom_emoji.url ?? icon.custom_emoji.id
+	}
+}
+
+function trackPage(prev: TrackedPage[], page: NotionPage): TrackedPage[] {
+	const nextEntry: TrackedPage = {
+		page,
+		draftTitle: getPageTitle(page),
+		draftIcon: getPageIconValue(page),
+	}
+	return [nextEntry, ...prev.filter(entry => entry.page.id !== page.id)]
+}
+
+function pageIconFromInput(raw: string): NotionPage["icon"] | undefined {
+	const value = raw.trim()
+	if (value === "") {
+		return undefined
+	}
+	if (
+		value.startsWith("http://") ||
+		value.startsWith("https://") ||
+		value.startsWith("/") ||
+		value.includes("://")
+	) {
+		return {
+			type: "external",
+			external: { url: value },
+		}
+	}
+	return {
+		type: "emoji",
+		emoji: value,
+	}
+}
+
+/**
+ * Buttons that exercise `sdk.pages.create` at each of the supported positions. Every preset creates
+ * a page whose `parent.page_id` is the nearest page ancestor. `position` demonstrates append,
+ * prepend, and inserting directly above or below the custom block via `context.customBlockId`.
+ *
+ * Two extra affordances exercise the data-source-backed parents:
+ * - A free-form input accepts a data source ID and uses `parent: { type: "data_source_id", ... }`
+ *   directly.
+ * - A button per known data-source key uses `parent: { type: "data_source_key", key }`, letting the
+ *   SDK resolve the key to the configured data source ID locally before sending the request to the
+ *   Notion host.
+ */
+function CreatePageCard({ context, dataSources }: CreatePageCardProps) {
+	const [status, setStatus] = useState<string | null>(null)
+	const [busy, setBusy] = useState(false)
+	const [dataSourceId, setDataSourceId] = useState("")
+	const [pageId, setPageId] = useState("")
+	const [trackedPages, setTrackedPages] = useState<TrackedPage[]>([])
+	const presets = presetPositions(context?.customBlockId)
+	const disabled = context === undefined || busy
+	const trimmedDataSourceId = dataSourceId.trim()
+	const dataSourceDisabled = disabled || trimmedDataSourceId === ""
+	const trimmedPageId = pageId.trim()
+	const fetchDisabled = busy || trimmedPageId === ""
+
+	useEffect(() => {
+		if (context?.page.id && pageId === "") {
+			setPageId(context.page.id)
+		}
+	}, [context?.page.id, pageId])
+
+	const handleCreate = async (preset: CreatePagePreset) => {
+		if (context === undefined || busy) {
+			return
+		}
+		setBusy(true)
+		setStatus(`Creating (${preset.label})\u2026`)
+		const title = `New page (${preset.label.toLowerCase()}) ${new Date().toLocaleTimeString()}`
+		const result = await pages.create({
+			parent: { type: "page_id", page_id: context.page.id },
+			properties: {
+				title: {
+					id: "title",
+					type: "title",
+					title: [{ type: "text", text: { content: title } }],
+				},
+			},
+			...(preset.position !== undefined ? { position: preset.position } : {}),
+		})
+		if (result.status === "success") {
+			setTrackedPages(prev => trackPage(prev, result.page))
+			setStatus(`\u2713 ${preset.label}: ${result.page.id}`)
+		} else {
+			setStatus(`\u2717 ${preset.label}: ${result.error}`)
+		}
+		setBusy(false)
+	}
+
+	const handleCreateInDataSource = async () => {
+		if (context === undefined || busy || trimmedDataSourceId === "") {
+			return
+		}
+		setBusy(true)
+		setStatus("Creating (data source)\u2026")
+		const title = `New row ${new Date().toLocaleTimeString()}`
+		const result = await pages.create({
+			parent: {
+				type: "data_source_id",
+				data_source_id: trimmedDataSourceId as NotionDataSourceId,
+			},
+			properties: {
+				title: {
+					id: "title",
+					type: "title",
+					title: [{ type: "text", text: { content: title } }],
+				},
+			},
+		})
+		if (result.status === "success") {
+			setTrackedPages(prev => trackPage(prev, result.page))
+			setStatus(`\u2713 Data source: ${result.page.id}`)
+		} else {
+			setStatus(`\u2717 Data source: ${result.error}`)
+		}
+		setBusy(false)
+	}
+
+	const handleCreateForKey = async (key: string) => {
+		if (context === undefined || busy) {
+			return
+		}
+		setBusy(true)
+		setStatus(`Creating (key: ${key})\u2026`)
+		const title = `New row (${key}) ${new Date().toLocaleTimeString()}`
+		const result = await pages.create({
+			parent: { type: "data_source_key", key },
+			properties: {
+				title: {
+					id: "title",
+					type: "title",
+					title: [{ type: "text", text: { content: title } }],
+				},
+			},
+		})
+		if (result.status === "success") {
+			setTrackedPages(prev => trackPage(prev, result.page))
+			setStatus(`\u2713 Key "${key}": ${result.page.id}`)
+		} else {
+			setStatus(`\u2717 Key "${key}": ${result.error}`)
+		}
+		setBusy(false)
+	}
+
+	const handleFetchPage = async () => {
+		if (busy || trimmedPageId === "") {
+			return
+		}
+		setBusy(true)
+		setStatus(`Fetching ${trimmedPageId}\u2026`)
+		const result = await pages.get(trimmedPageId as NotionPageId)
+		if (result.status === "success") {
+			setTrackedPages(prev => trackPage(prev, result.page))
+			setStatus(`\u2713 Loaded ${result.page.id}`)
+		} else {
+			setStatus(`\u2717 Fetch failed: ${result.error}`)
+		}
+		setBusy(false)
+	}
+
+	const handleRefreshPage = async (trackedPageId: string) => {
+		if (busy) {
+			return
+		}
+		setBusy(true)
+		setStatus(`Refreshing ${trackedPageId}\u2026`)
+		const result = await pages.get(trackedPageId as NotionPageId)
+		if (result.status === "success") {
+			setTrackedPages(prev => trackPage(prev, result.page))
+			setStatus(`\u2713 Refreshed ${result.page.id}`)
+		} else {
+			setStatus(`\u2717 Refresh failed: ${result.error}`)
+		}
+		setBusy(false)
+	}
+
+	const handleSavePage = async (trackedPage: TrackedPage) => {
+		if (busy) {
+			return
+		}
+
+		const nextTitle = trackedPage.draftTitle
+		const nextIcon = trackedPage.draftIcon.trim()
+		const currentTitle = getPageTitle(trackedPage.page)
+		const currentIcon = getPageIconValue(trackedPage.page)
+		const titleChanged = nextTitle !== currentTitle
+		const iconChanged = nextIcon !== currentIcon
+		const iconPatch =
+			iconChanged && nextIcon !== "" ? pageIconFromInput(nextIcon) : undefined
+
+		if (!titleChanged && !iconChanged) {
+			setStatus(`No changes for ${trackedPage.page.id}`)
+			return
+		}
+		if (iconChanged && nextIcon === "" && !titleChanged) {
+			setStatus("Clearing icons is not supported yet")
+			return
+		}
+
+		setBusy(true)
+		setStatus(`Saving ${trackedPage.page.id}\u2026`)
+		const result = await pages.update({
+			pageId: trackedPage.page.id,
+			...(titleChanged
+				? {
+						properties: {
+							title: {
+								id: "title",
+								type: "title",
+								title: [{ type: "text", text: { content: nextTitle } }],
+							},
+						},
+					}
+				: {}),
+			...(iconPatch !== undefined ? { icon: iconPatch } : {}),
+		})
+		if (result.status === "success") {
+			setTrackedPages(prev => trackPage(prev, result.page))
+			setStatus(`\u2713 Saved ${result.page.id}`)
+		} else {
+			setStatus(`\u2717 Save failed: ${result.error}`)
+		}
+		setBusy(false)
+	}
+
+	const handleDeletePage = async (trackedPageId: string) => {
+		if (busy) {
+			return
+		}
+		setBusy(true)
+		setStatus(`Deleting ${trackedPageId}\u2026`)
+		const result = await pages.delete(trackedPageId as NotionPageId)
+		if (result.status === "success") {
+			setTrackedPages(prev => trackPage(prev, result.page))
+			setStatus(`\u2713 Deleted ${result.page.id}`)
+		} else {
+			setStatus(`\u2717 Delete failed: ${result.error}`)
+		}
+		setBusy(false)
+	}
+
+	return (
+		<CollapsibleCard label="Page API debugger">
+			<div className="mb-2 flex flex-wrap gap-1.5">
+				{presets.map(preset => (
+					<button
+						key={preset.label}
+						type="button"
+						disabled={disabled}
+						title={preset.description}
+						className="rounded-md border border-(--border) bg-transparent px-2 py-1 font-mono text-[11px] text-(--muted) transition-colors hover:border-(--foreground)/20 hover:bg-(--hover-bg) hover:text-(--foreground) disabled:cursor-not-allowed disabled:opacity-50"
+						onClick={() => {
+							void handleCreate(preset)
+						}}
+					>
+						{preset.label}
+					</button>
+				))}
+			</div>
+			<div className="mb-2 flex flex-wrap items-center gap-1.5">
+				<input
+					type="text"
+					value={dataSourceId}
+					onChange={event => setDataSourceId(event.target.value)}
+					placeholder="data_source_id"
+					spellCheck={false}
+					className="min-w-0 flex-1 rounded-md border border-(--border) bg-(--app-bg) px-2 py-1 font-mono text-[11px] outline-none transition-colors focus:border-(--foreground)"
+				/>
+				<button
+					type="button"
+					disabled={dataSourceDisabled}
+					title="Create a page as a row of the data source with the given ID"
+					className="rounded-md border border-(--border) bg-transparent px-2 py-1 font-mono text-[11px] text-(--muted) transition-colors hover:border-(--foreground)/20 hover:bg-(--hover-bg) hover:text-(--foreground) disabled:cursor-not-allowed disabled:opacity-50"
+					onClick={() => {
+						void handleCreateInDataSource()
+					}}
+				>
+					Create in data source
+				</button>
+			</div>
+			{dataSources.length > 0 && (
+				<div className="mb-2 flex flex-wrap items-center gap-1.5">
+					<span className="font-mono text-[11px] text-(--muted)">
+						by data source key:
+					</span>
+					{dataSources.map(source => (
+						<button
+							key={source.key}
+							type="button"
+							disabled={disabled}
+							title={
+								source.collectionPointer !== undefined
+									? `Create a page in data source ${source.collectionPointer.id} via key "${source.key}"`
+									: `Key "${source.key}" has no collection pointer yet; request will resolve with an error`
+							}
+							className="rounded-md border border-(--border) bg-transparent px-2 py-1 font-mono text-[11px] text-(--muted) transition-colors hover:border-(--foreground)/20 hover:bg-(--hover-bg) hover:text-(--foreground) disabled:cursor-not-allowed disabled:opacity-50"
+							onClick={() => {
+								void handleCreateForKey(source.key)
+							}}
+						>
+							{source.key}
+						</button>
+					))}
+				</div>
+			)}
+			<div className="mb-3 flex flex-wrap items-center gap-1.5 border-t border-(--border) pt-3">
+				<input
+					type="text"
+					value={pageId}
+					onChange={event => setPageId(event.target.value)}
+					placeholder={context?.page.id ?? "page_id"}
+					spellCheck={false}
+					className="min-w-0 flex-1 rounded-md border border-(--border) bg-(--app-bg) px-2 py-1 font-mono text-[11px] outline-none transition-colors focus:border-(--foreground)"
+				/>
+				<button
+					type="button"
+					disabled={fetchDisabled}
+					className="rounded-md border border-(--border) bg-transparent px-2 py-1 font-mono text-[11px] text-(--muted) transition-colors hover:border-(--foreground)/20 hover:bg-(--hover-bg) hover:text-(--foreground) disabled:cursor-not-allowed disabled:opacity-50"
+					onClick={() => {
+						void handleFetchPage()
+					}}
+				>
+					Get page
+				</button>
+			</div>
+			{trackedPages.length > 0 && (
+				<div className="mb-2 space-y-2">
+					{trackedPages.map(trackedPage => {
+						const archived = trackedPage.page.in_trash === true
+						return (
+							<div
+								key={trackedPage.page.id}
+								className={`rounded-lg border border-(--border) px-3 py-2 ${
+									archived ? "bg-(--hover-bg)" : "bg-(--app-bg)"
+								}`}
+							>
+								<div className="mb-2 flex items-center justify-between gap-2">
+									<div className="min-w-0">
+										<div className="truncate font-mono text-[11px] text-(--foreground)">
+											{trackedPage.page.id}
+										</div>
+										<div className="font-mono text-[10px] text-(--muted)">
+											{trackedPage.page.parent.type}
+											{archived ? " · archived" : ""}
+										</div>
+									</div>
+									<div className="flex items-center gap-1.5">
+										<button
+											type="button"
+											disabled={busy}
+											className="rounded-md border border-(--border) bg-transparent px-2 py-1 font-mono text-[11px] text-(--muted) transition-colors hover:border-(--foreground)/20 hover:bg-(--hover-bg) hover:text-(--foreground) disabled:cursor-not-allowed disabled:opacity-50"
+											onClick={() => {
+												void handleRefreshPage(trackedPage.page.id)
+											}}
+										>
+											Refresh
+										</button>
+										<button
+											type="button"
+											disabled={busy}
+											className="rounded-md border border-(--border) bg-transparent px-2 py-1 font-mono text-[11px] text-(--muted) transition-colors hover:border-(--foreground)/20 hover:bg-(--hover-bg) hover:text-(--foreground) disabled:cursor-not-allowed disabled:opacity-50"
+											onClick={() => {
+												void handleSavePage(trackedPage)
+											}}
+										>
+											Save
+										</button>
+										<button
+											type="button"
+											disabled={busy || archived}
+											className="rounded-md border border-(--border) bg-transparent px-2 py-1 font-mono text-[11px] text-(--muted) transition-colors hover:border-(--foreground)/20 hover:bg-(--hover-bg) hover:text-(--foreground) disabled:cursor-not-allowed disabled:opacity-50"
+											onClick={() => {
+												void handleDeletePage(trackedPage.page.id)
+											}}
+										>
+											Delete
+										</button>
+									</div>
+								</div>
+								<div className="grid gap-2 md:grid-cols-2">
+									<input
+										type="text"
+										value={trackedPage.draftTitle}
+										onChange={event => {
+											const nextTitle = event.target.value
+											setTrackedPages(prev =>
+												prev.map(entry =>
+													entry.page.id === trackedPage.page.id
+														? { ...entry, draftTitle: nextTitle }
+														: entry,
+												),
+											)
+										}}
+										placeholder="Page title"
+										className="rounded-md border border-(--border) bg-(--app-bg) px-2 py-1 font-mono text-[11px] outline-none transition-colors focus:border-(--foreground)"
+									/>
+									<input
+										type="text"
+										value={trackedPage.draftIcon}
+										onChange={event => {
+											const nextIcon = event.target.value
+											setTrackedPages(prev =>
+												prev.map(entry =>
+													entry.page.id === trackedPage.page.id
+														? { ...entry, draftIcon: nextIcon }
+														: entry,
+												),
+											)
+										}}
+										placeholder="Emoji or URL icon"
+										className="rounded-md border border-(--border) bg-(--app-bg) px-2 py-1 font-mono text-[11px] outline-none transition-colors focus:border-(--foreground)"
+									/>
+								</div>
+							</div>
+						)
+					})}
+				</div>
+			)}
+			{status !== null && (
+				<div className="font-mono text-[11px] text-(--muted)">{status}</div>
+			)}
+		</CollapsibleCard>
+	)
+}
+
+// --- Mount ---
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+	<ErrorBoundary>
+		<NotionCustomBlock>
+			<App />
+		</NotionCustomBlock>
+	</ErrorBoundary>,
+)