ncblock 0.0.5 → 0.0.7

package/dist/react.js

@@ -1,6 +1,6 @@
 import { jsxs as _jsxs, Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useEffect, useState, useSyncExternalStore, } from "react";
-import { getCustomBlockHostState, getDataSourceQueryView, postCustomBlockResize, queryCustomBlockDataSource, setMockCustomBlockState, subscribeToCustomBlockHost, } from "./bridge/sandboxClient";
+import { getCustomBlockHostState, getDataSourceQueryView, getMessageLog, postCustomBlockResize, queryCustomBlockDataSource, setMockCustomBlockState, subscribeToCustomBlockHost, subscribeToMessageLog, } from "./bridge/sandboxClient";
 import { initCustomBlock, NotInIframeError, } from "./init";
 const DEFAULT_DATA_SOURCE_QUERY_LIMIT = 20;
 function useCustomBlockHost() {
@@ -80,6 +80,16 @@ export function NotionCustomBlock({ children, timeoutMs, fallback = null, errorF
     useCustomBlockAutoResize({ enabled: autoResize });
     const isStandalone = init.error instanceof NotInIframeError;
     const host = useCustomBlockHost();
+    const [debugOpen, setDebugOpen] = useState(false);
+    useEffect(() => {
+        const onKeyDown = (e) => {
+            if (e.key === "\\") {
+                setDebugOpen(prev => !prev);
+            }
+        };
+        window.addEventListener("keydown", onKeyDown);
+        return () => window.removeEventListener("keydown", onKeyDown);
+    }, []);
     useEffect(() => {
         if (!isStandalone) {
             return;
@@ -110,13 +120,32 @@ export function NotionCustomBlock({ children, timeoutMs, fallback = null, errorF
         if (host.status !== "initialized") {
             return _jsx(_Fragment, { children: fallback });
         }
-        return (_jsxs(_Fragment, { children: [_jsx("div", { role: "status", style: STANDALONE_BANNER_STYLE, children: "Notion host not detected \u2014 running in standalone preview. SDK hooks return placeholder values until embedded in Notion." }), children] }));
+        return (_jsxs(_Fragment, { children: [_jsx("div", { role: "status", style: STANDALONE_BANNER_STYLE, children: "Notion host not detected \u2014 running in standalone preview. SDK hooks return placeholder values until embedded in Notion." }), debugOpen ? _jsx(DebugMessageLog, {}) : children] }));
     }
     if (!init.isLoaded) {
         return _jsx(_Fragment, { children: fallback });
     }
-    return _jsx(_Fragment, { children: children });
+    return _jsx(_Fragment, { children: debugOpen ? _jsx(DebugMessageLog, {}) : children });
 }
+function DebugMessageLog() {
+    const log = useSyncExternalStore(subscribeToMessageLog, getMessageLog);
+    const text = log
+        .map(entry => `[${entry.timestamp}] ${entry.direction}: ${JSON.stringify(entry.data)}`)
+        .join("\n");
+    return (_jsx("pre", { "data-testid": "debug-message-log", style: DEBUG_PRE_STYLE, children: text || "(no messages yet)" }));
+}
+const DEBUG_PRE_STYLE = {
+    margin: 0,
+    padding: "8px 12px",
+    fontSize: 12,
+    fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+    lineHeight: 1.5,
+    whiteSpace: "pre-wrap",
+    wordBreak: "break-all",
+    userSelect: "text",
+    background: "#1e1e1e",
+    color: "#d4d4d4",
+};
 const STANDALONE_BANNER_STYLE = {
     padding: "8px 12px",
     background: "#fff8e1",

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

package/dist/users.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"users.d.ts","sourceRoot":"","sources":["../users.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACX,aAAa,EACb,cAAc,EACd,eAAe,EACf,YAAY,EACZ,MAAM,SAAS,CAAA;AAEhB;;GAEG;AACH,eAAO,MAAM,KAAK;IACjB;;OAEG;iBACU,cAAc,GAAG,OAAO,CAAC,eAAe,CAAC;IAItD;;OAEG;gBACS,YAAY,GAAG,OAAO,CAAC,aAAa,CAAC;CAGjD,CAAA"}
+{"version":3,"file":"users.d.ts","sourceRoot":"","sources":["../src/users.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACX,aAAa,EACb,cAAc,EACd,eAAe,EACf,YAAY,EACZ,MAAM,SAAS,CAAA;AAEhB;;GAEG;AACH,eAAO,MAAM,KAAK;IACjB;;OAEG;iBACU,cAAc,GAAG,OAAO,CAAC,eAAe,CAAC;IAItD;;OAEG;gBACS,YAAY,GAAG,OAAO,CAAC,aAAa,CAAC;CAGjD,CAAA"}

package/dist/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../utils.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,CAI/C"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,CAI/C"}

package/docs/lifecycle.md

@@ -90,3 +90,35 @@ function App() {
   return <div>…</div>;
 }
 ```
+
+## Debug console
+
+Press `\` while focused in a custom block to toggle a debug overlay that replaces the block's children with a `<pre>` log of every `postMessage` sent and received over the bridge. Each line is formatted as:
+
+```
+[ISO timestamp] sent/received: {"type":"ready", …}
+```
+
+The log is intentionally plain — no filtering or decoration — so it can be copied and pasted directly to a local coding agent for debugging.
+
+### `getMessageLog()`
+
+```ts
+function getMessageLog(): readonly MessageLogEntry[];
+
+type MessageLogEntry = {
+  timestamp: string;
+  direction: "sent" | "received";
+  data: unknown;
+};
+```
+
+Returns the full in-memory log. Entries accumulate for the lifetime of the page.
+
+### `subscribeToMessageLog(listener)`
+
+```ts
+function subscribeToMessageLog(listener: () => void): () => void;
+```
+
+Subscribe to new log entries. Compatible with `useSyncExternalStore` for custom debug UIs.

package/package.json

@@ -1,18 +1,18 @@
 {
 	"name": "ncblock",
-	"version": "0.0.5",
+	"version": "0.0.7",
 	"license": "MIT",
 	"type": "module",
 	"main": "./dist/index.js",
 	"types": "./dist/index.d.ts",
 	"exports": {
 		".": {
-			"import": "./dist/./index.js",
-			"types": "./dist/./index.d.ts"
+			"import": "././dist/index.js",
+			"types": "././dist/index.d.ts"
 		},
 		"./host": {
-			"import": "./dist/./host.js",
-			"types": "./dist/./host.d.ts"
+			"import": "././dist/host.js",
+			"types": "././dist/host.d.ts"
 		},
 		"./vite": {
 			"import": "./vite-plugin/index.js",
@@ -23,17 +23,10 @@
 		"test": "vitest run --environment jsdom"
 	},
 	"files": [
-		"index.ts",
-		"host.ts",
+		"src",
 		"HOST.md",
 		"docs",
-		"react.tsx",
-		"init.ts",
-		"users.ts",
-		"types.ts",
-		"utils.ts",
 		"vite-plugin",
-		"bridge",
 		"dist"
 	],
 	"peerDependencies": {

package/{bridge → src/bridge}/SandboxBridge.ts

@@ -50,12 +50,24 @@ import type { NotionUser } from "./users/user"
  */
 export const CUSTOM_BLOCK_BRIDGE_PROTOCOL_VERSION = 1
 
+/**
+ * A single entry in the bridge message log. Kept intentionally plain so the log
+ * is copy-pasteable to a local coding agent without needing extra context.
+ */
+export type MessageLogEntry = {
+	timestamp: string
+	direction: "sent" | "received"
+	data: unknown
+}
+
 export class SandboxBridge {
 	private hostState: CustomBlockHostState = {
 		status: "uninitialized",
 		theme: "light",
 	}
 	private listeners = new Set<() => void>()
+	private messageLog: MessageLogEntry[] = []
+	private messageLogListeners = new Set<() => void>()
 	private nextRequestId = 1
 	private readonly pendingCreatePage = new PendingRequests<CreatePageResult>(
 		"custom-block-create-page",
@@ -87,6 +99,31 @@ export class SandboxBridge {
 		}
 	}
 
+	private static MAX_LOG_ENTRIES = 100
+
+	private logMessage(direction: "sent" | "received", data: unknown) {
+		if (this.messageLog.length >= SandboxBridge.MAX_LOG_ENTRIES) {
+			this.messageLog.shift()
+		}
+		this.messageLog.push({
+			timestamp: new Date().toISOString(),
+			direction,
+			data,
+		})
+		for (const listener of this.messageLogListeners) {
+			listener()
+		}
+	}
+
+	getMessageLog(): readonly MessageLogEntry[] {
+		return this.messageLog
+	}
+
+	subscribeToMessageLog(listener: () => void) {
+		this.messageLogListeners.add(listener)
+		return () => this.messageLogListeners.delete(listener)
+	}
+
 	awaitInit(signal?: AbortSignal): Promise<InitMessage> {
 		if (!signal) {
 			return this.initMessage
@@ -121,8 +158,13 @@ export class SandboxBridge {
 			bridgeProtocolVersion: CUSTOM_BLOCK_BRIDGE_PROTOCOL_VERSION,
 			manifest,
 		}
-		console.debug("[notion-custom-sdk] outbound postMessage", readyMessage)
-		window.parent.postMessage(readyMessage, "*")
+		this.postToHost(readyMessage)
+	}
+
+	private postToHost(message: unknown) {
+		console.debug("[notion-custom-sdk] outbound postMessage", message)
+		this.logMessage("sent", message)
+		window.parent.postMessage(message, "*")
 	}
 
 	private notify = () => {
@@ -139,6 +181,7 @@ export class SandboxBridge {
 		if (event.source !== window.parent) {
 			return
 		}
+		this.logMessage("received", event.data)
 
 		const parsed = v.safeParse(hostToSandboxMessageSchema, event.data)
 		if (!parsed.success) {
@@ -159,8 +202,7 @@ export class SandboxBridge {
 					type: "invalidHostMessage",
 					reason: formatInvalidHostReason(incomingType, parsed.issues),
 				}
-				console.debug("[notion-custom-sdk] outbound postMessage", nack)
-				window.parent.postMessage(nack, "*")
+				this.postToHost(nack)
 			}
 			return
 		}
@@ -409,8 +451,7 @@ export class SandboxBridge {
 			key,
 			limit,
 		}
-		console.debug("[notion-custom-sdk] outbound postMessage", outbound)
-		window.parent.postMessage(outbound, "*")
+		this.postToHost(outbound)
 	}
 
 	postResize(height: number) {
@@ -423,8 +464,7 @@ export class SandboxBridge {
 			type: "resize",
 			height: safeHeight,
 		}
-		console.debug("[notion-custom-sdk] outbound postMessage", outbound)
-		window.parent.postMessage(outbound, "*")
+		this.postToHost(outbound)
 	}
 
 	createPage(input: CreatePageInput): Promise<CreatePageResult> {
@@ -459,8 +499,7 @@ export class SandboxBridge {
 			if (input.position !== undefined) {
 				outbound.position = input.position
 			}
-			console.debug("[notion-custom-sdk] outbound postMessage", outbound)
-			window.parent.postMessage(outbound, "*")
+			this.postToHost(outbound)
 		})
 	}
 
@@ -472,8 +511,7 @@ export class SandboxBridge {
 				requestId,
 				pageId,
 			}
-			console.debug("[notion-custom-sdk] outbound postMessage", outbound)
-			window.parent.postMessage(outbound, "*")
+			this.postToHost(outbound)
 		})
 	}
 
@@ -485,8 +523,7 @@ export class SandboxBridge {
 				requestId,
 				userId,
 			}
-			console.debug("[notion-custom-sdk] outbound postMessage", outbound)
-			window.parent.postMessage(outbound, "*")
+			this.postToHost(outbound)
 		})
 	}
 
@@ -499,8 +536,7 @@ export class SandboxBridge {
 				startCursor: input.startCursor,
 				pageSize: input.pageSize,
 			}
-			console.debug("[notion-custom-sdk] outbound postMessage", outbound)
-			window.parent.postMessage(outbound, "*")
+			this.postToHost(outbound)
 		})
 	}
 
@@ -539,8 +575,7 @@ export class SandboxBridge {
 			if (input.archived !== undefined) {
 				outbound.archived = input.archived
 			}
-			console.debug("[notion-custom-sdk] outbound postMessage", outbound)
-			window.parent.postMessage(outbound, "*")
+			this.postToHost(outbound)
 		})
 	}
 

package/{bridge → src/bridge}/sandboxClient.ts

@@ -17,7 +17,9 @@ import {
 } from "./hostState"
 import type { CustomBlockManifest } from "./manifest"
 import type { InitMessage } from "./messages/init"
-import { SandboxBridge } from "./SandboxBridge"
+import { type MessageLogEntry, SandboxBridge } from "./SandboxBridge"
+
+export type { MessageLogEntry }
 
 const bridge = new SandboxBridge()
 
@@ -57,6 +59,14 @@ export function postCustomBlockResize(height: number) {
 	bridge.postResize(height)
 }
 
+export function getMessageLog(): readonly MessageLogEntry[] {
+	return bridge.getMessageLog()
+}
+
+export function subscribeToMessageLog(listener: () => void) {
+	return bridge.subscribeToMessageLog(listener)
+}
+
 export function getUser(userId: NotionUserId): Promise<GetUserResult> {
 	return bridge.getUser(userId)
 }

package/{index.ts → src/index.ts}

@@ -63,7 +63,12 @@ export type {
 	NotionPagePropertyValue,
 	NotionPagePropertyWriteMap,
 } from "./bridge/pages/page"
-export { pages } from "./bridge/sandboxClient"
+export type { MessageLogEntry } from "./bridge/sandboxClient"
+export {
+	getMessageLog,
+	pages,
+	subscribeToMessageLog,
+} from "./bridge/sandboxClient"
 export type { NotionTheme } from "./bridge/theme"
 export {
 	type CustomBlockInitial,

package/{react.tsx → src/react.tsx}

@@ -11,10 +11,12 @@ import type { CustomBlockHostState } from "./bridge/hostState"
 import {
 	getCustomBlockHostState,
 	getDataSourceQueryView,
+	getMessageLog,
 	postCustomBlockResize,
 	queryCustomBlockDataSource,
 	setMockCustomBlockState,
 	subscribeToCustomBlockHost,
+	subscribeToMessageLog,
 } from "./bridge/sandboxClient"
 import type { NotionTheme } from "./bridge/theme"
 import {
@@ -168,6 +170,17 @@ export function NotionCustomBlock({
 	useCustomBlockAutoResize({ enabled: autoResize })
 	const isStandalone = init.error instanceof NotInIframeError
 	const host = useCustomBlockHost()
+	const [debugOpen, setDebugOpen] = useState(false)
+
+	useEffect(() => {
+		const onKeyDown = (e: KeyboardEvent) => {
+			if (e.key === "\\") {
+				setDebugOpen(prev => !prev)
+			}
+		}
+		window.addEventListener("keydown", onKeyDown)
+		return () => window.removeEventListener("keydown", onKeyDown)
+	}, [])
 
 	useEffect(() => {
 		if (!isStandalone) {
@@ -212,14 +225,42 @@ export function NotionCustomBlock({
 					Notion host not detected — running in standalone preview. SDK hooks
 					return placeholder values until embedded in Notion.
 				</div>
-				{children}
+				{debugOpen ? <DebugMessageLog /> : children}
 			</>
 		)
 	}
 	if (!init.isLoaded) {
 		return <>{fallback}</>
 	}
-	return <>{children}</>
+	return <>{debugOpen ? <DebugMessageLog /> : children}</>
+}
+
+function DebugMessageLog() {
+	const log = useSyncExternalStore(subscribeToMessageLog, getMessageLog)
+	const text = log
+		.map(
+			entry =>
+				`[${entry.timestamp}] ${entry.direction}: ${JSON.stringify(entry.data)}`,
+		)
+		.join("\n")
+	return (
+		<pre data-testid="debug-message-log" style={DEBUG_PRE_STYLE}>
+			{text || "(no messages yet)"}
+		</pre>
+	)
+}
+
+const DEBUG_PRE_STYLE = {
+	margin: 0,
+	padding: "8px 12px",
+	fontSize: 12,
+	fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+	lineHeight: 1.5,
+	whiteSpace: "pre-wrap" as const,
+	wordBreak: "break-all" as const,
+	userSelect: "text" as const,
+	background: "#1e1e1e",
+	color: "#d4d4d4",
 }
 
 const STANDALONE_BANNER_STYLE = {