@notionhq/custom-blocks 0.1.17 → 0.1.19

package/dist/protocol/messages/updatePageResult.d.ts

@@ -17,22 +17,22 @@ export declare const updatePageResultMessageSchema: v.VariantSchema<"status", [v
     readonly status: v.LiteralSchema<"success", undefined>;
     readonly page: v.ObjectSchema<{
         readonly object: v.LiteralSchema<"page", undefined>;
-        readonly id: v.CustomSchema<import("../ids.js").NotionPageId, v.ErrorMessage<v.CustomIssue> | undefined>;
+        readonly id: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.BrandAction<string, "NotionPageId">]>;
         readonly parent: v.VariantSchema<"type", [v.ObjectSchema<{
             readonly type: v.LiteralSchema<"page_id", undefined>;
-            readonly page_id: v.CustomSchema<import("../ids.js").NotionPageId, v.ErrorMessage<v.CustomIssue> | undefined>;
+            readonly page_id: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.BrandAction<string, "NotionPageId">]>;
         }, undefined>, v.ObjectSchema<{
             readonly type: v.LiteralSchema<"data_source_id", undefined>;
-            readonly data_source_id: v.CustomSchema<import("../ids.js").NotionDataSourceId, v.ErrorMessage<v.CustomIssue> | undefined>;
+            readonly data_source_id: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.BrandAction<string, "NotionDataSourceId">]>;
         }, undefined>, v.ObjectSchema<{
             readonly type: v.LiteralSchema<"workspace", undefined>;
             readonly workspace: v.LiteralSchema<true, undefined>;
         }, undefined>, v.ObjectSchema<{
             readonly type: v.LiteralSchema<"block_id", undefined>;
-            readonly block_id: v.CustomSchema<import("../ids.js").NotionBlockId, v.ErrorMessage<v.CustomIssue> | undefined>;
+            readonly block_id: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.BrandAction<string, "NotionBlockId">]>;
         }, undefined>, v.ObjectSchema<{
             readonly type: v.LiteralSchema<"agent_id", undefined>;
-            readonly agent_id: v.CustomSchema<import("../ids.js").NotionAgentId, v.ErrorMessage<v.CustomIssue> | undefined>;
+            readonly agent_id: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.BrandAction<string, "NotionAgentId">]>;
         }, undefined>], undefined>;
         readonly properties: v.RecordSchema<v.StringSchema<undefined>, v.VariantSchema<"type", [v.ObjectSchema<{
             readonly type: v.LiteralSchema<"title", undefined>;

package/dist/protocol/pages/page.d.ts

@@ -10,7 +10,7 @@ export type { NotionPageId } from "../ids.js";
  * The custom block's nearest enclosing page ancestor, carried in `init.page` and `pageChanged`.
  */
 export declare const customBlockPageSchema: v.ObjectSchema<{
-    readonly id: v.CustomSchema<import("./page.js").NotionPageId, v.ErrorMessage<v.CustomIssue> | undefined>;
+    readonly id: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.BrandAction<string, "NotionPageId">]>;
     /**
      * The containing page's own parent. It lets a block distinguish a freestanding page from a
      * database row without a round trip. Not to be confused with the top-level `parent` runtime
@@ -18,19 +18,19 @@ export declare const customBlockPageSchema: v.ObjectSchema<{
      */
     readonly parent: v.VariantSchema<"type", [v.ObjectSchema<{
         readonly type: v.LiteralSchema<"page_id", undefined>;
-        readonly page_id: v.CustomSchema<import("./page.js").NotionPageId, v.ErrorMessage<v.CustomIssue> | undefined>;
+        readonly page_id: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.BrandAction<string, "NotionPageId">]>;
     }, undefined>, v.ObjectSchema<{
         readonly type: v.LiteralSchema<"data_source_id", undefined>;
-        readonly data_source_id: v.CustomSchema<import("../ids.js").NotionDataSourceId, v.ErrorMessage<v.CustomIssue> | undefined>;
+        readonly data_source_id: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.BrandAction<string, "NotionDataSourceId">]>;
     }, undefined>, v.ObjectSchema<{
         readonly type: v.LiteralSchema<"workspace", undefined>;
         readonly workspace: v.LiteralSchema<true, undefined>;
     }, undefined>, v.ObjectSchema<{
         readonly type: v.LiteralSchema<"block_id", undefined>;
-        readonly block_id: v.CustomSchema<import("../ids.js").NotionBlockId, v.ErrorMessage<v.CustomIssue> | undefined>;
+        readonly block_id: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.BrandAction<string, "NotionBlockId">]>;
     }, undefined>, v.ObjectSchema<{
         readonly type: v.LiteralSchema<"agent_id", undefined>;
-        readonly agent_id: v.CustomSchema<import("../ids.js").NotionAgentId, v.ErrorMessage<v.CustomIssue> | undefined>;
+        readonly agent_id: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.BrandAction<string, "NotionAgentId">]>;
     }, undefined>], undefined>;
 }, undefined>;
 export type CustomBlockPage = v.InferOutput<typeof customBlockPageSchema>;
@@ -412,22 +412,22 @@ export type NotionPagePropertyWriteMap = v.InferOutput<typeof notionPageProperty
  */
 export declare const notionPageSchema: v.ObjectSchema<{
     readonly object: v.LiteralSchema<"page", undefined>;
-    readonly id: v.CustomSchema<import("./page.js").NotionPageId, v.ErrorMessage<v.CustomIssue> | undefined>;
+    readonly id: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.BrandAction<string, "NotionPageId">]>;
     readonly parent: v.VariantSchema<"type", [v.ObjectSchema<{
         readonly type: v.LiteralSchema<"page_id", undefined>;
-        readonly page_id: v.CustomSchema<import("./page.js").NotionPageId, v.ErrorMessage<v.CustomIssue> | undefined>;
+        readonly page_id: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.BrandAction<string, "NotionPageId">]>;
     }, undefined>, v.ObjectSchema<{
         readonly type: v.LiteralSchema<"data_source_id", undefined>;
-        readonly data_source_id: v.CustomSchema<import("../ids.js").NotionDataSourceId, v.ErrorMessage<v.CustomIssue> | undefined>;
+        readonly data_source_id: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.BrandAction<string, "NotionDataSourceId">]>;
     }, undefined>, v.ObjectSchema<{
         readonly type: v.LiteralSchema<"workspace", undefined>;
         readonly workspace: v.LiteralSchema<true, undefined>;
     }, undefined>, v.ObjectSchema<{
         readonly type: v.LiteralSchema<"block_id", undefined>;
-        readonly block_id: v.CustomSchema<import("../ids.js").NotionBlockId, v.ErrorMessage<v.CustomIssue> | undefined>;
+        readonly block_id: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.BrandAction<string, "NotionBlockId">]>;
     }, undefined>, v.ObjectSchema<{
         readonly type: v.LiteralSchema<"agent_id", undefined>;
-        readonly agent_id: v.CustomSchema<import("../ids.js").NotionAgentId, v.ErrorMessage<v.CustomIssue> | undefined>;
+        readonly agent_id: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.BrandAction<string, "NotionAgentId">]>;
     }, undefined>], undefined>;
     readonly properties: v.RecordSchema<v.StringSchema<undefined>, v.VariantSchema<"type", [v.ObjectSchema<{
         readonly type: v.LiteralSchema<"title", undefined>;

package/dist/protocol/parent.d.ts

@@ -1,19 +1,19 @@
 import * as v from "valibot";
 export declare const notionParentSchema: v.VariantSchema<"type", [v.ObjectSchema<{
     readonly type: v.LiteralSchema<"page_id", undefined>;
-    readonly page_id: v.CustomSchema<import("./ids.js").NotionPageId, v.ErrorMessage<v.CustomIssue> | undefined>;
+    readonly page_id: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.BrandAction<string, "NotionPageId">]>;
 }, undefined>, v.ObjectSchema<{
     readonly type: v.LiteralSchema<"data_source_id", undefined>;
-    readonly data_source_id: v.CustomSchema<import("./ids.js").NotionDataSourceId, v.ErrorMessage<v.CustomIssue> | undefined>;
+    readonly data_source_id: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.BrandAction<string, "NotionDataSourceId">]>;
 }, undefined>, v.ObjectSchema<{
     readonly type: v.LiteralSchema<"workspace", undefined>;
     readonly workspace: v.LiteralSchema<true, undefined>;
 }, undefined>, v.ObjectSchema<{
     readonly type: v.LiteralSchema<"block_id", undefined>;
-    readonly block_id: v.CustomSchema<import("./ids.js").NotionBlockId, v.ErrorMessage<v.CustomIssue> | undefined>;
+    readonly block_id: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.BrandAction<string, "NotionBlockId">]>;
 }, undefined>, v.ObjectSchema<{
     readonly type: v.LiteralSchema<"agent_id", undefined>;
-    readonly agent_id: v.CustomSchema<import("./ids.js").NotionAgentId, v.ErrorMessage<v.CustomIssue> | undefined>;
+    readonly agent_id: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.BrandAction<string, "NotionAgentId">]>;
 }, undefined>], undefined>;
 /**
  * A record's parent reference.

package/dist/protocol/users/user.d.ts

@@ -1,11 +1,9 @@
 import * as v from "valibot";
-declare const notionUserIdBrand: unique symbol;
-export type NotionUserId = string & {
-    readonly [notionUserIdBrand]: "NotionUserId";
-};
+export declare const notionUserIdSchema: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.BrandAction<string, "NotionUserId">]>;
+export type NotionUserId = v.InferOutput<typeof notionUserIdSchema>;
 export declare const notionUserSchema: v.ObjectSchema<{
     readonly object: v.LiteralSchema<"user", undefined>;
-    readonly id: v.StringSchema<undefined>;
+    readonly id: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.BrandAction<string, "NotionUserId">]>;
     readonly name: v.OptionalSchema<v.StringSchema<undefined>, undefined>;
     readonly avatar_url: v.NullableSchema<v.StringSchema<undefined>, undefined>;
     readonly type: v.LiteralSchema<"person", undefined>;
@@ -18,7 +16,7 @@ export declare const notionUserListSchema: v.ObjectSchema<{
     readonly object: v.LiteralSchema<"list", undefined>;
     readonly results: v.ArraySchema<v.ObjectSchema<{
         readonly object: v.LiteralSchema<"user", undefined>;
-        readonly id: v.StringSchema<undefined>;
+        readonly id: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.BrandAction<string, "NotionUserId">]>;
         readonly name: v.OptionalSchema<v.StringSchema<undefined>, undefined>;
         readonly avatar_url: v.NullableSchema<v.StringSchema<undefined>, undefined>;
         readonly type: v.LiteralSchema<"person", undefined>;
@@ -32,5 +30,4 @@ export declare const notionUserListSchema: v.ObjectSchema<{
     readonly user: v.RecordSchema<v.StringSchema<undefined>, v.UnknownSchema, undefined>;
 }, undefined>;
 export type NotionUserList = v.InferOutput<typeof notionUserListSchema>;
-export {};
 //# sourceMappingURL=user.d.ts.map

package/dist/protocol/users/user.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"user.d.ts","sourceRoot":"","sources":["../../../../../home/runner/work/custom-blocks/custom-blocks/protocol/src/users/user.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,CAAC,MAAM,SAAS,CAAA;AAE5B,OAAO,CAAC,MAAM,iBAAiB,EAAE,OAAO,MAAM,CAAA;AAE9C,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG;IACnC,QAAQ,CAAC,CAAC,iBAAiB,CAAC,EAAE,cAAc,CAAA;CAC5C,CAAA;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;aAS3B,CAAA;AAEF,MAAM,MAAM,UAAU,GAAG,CAAC,CAAC,WAAW,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAE/D,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;aAO/B,CAAA;AAEF,MAAM,MAAM,cAAc,GAAG,CAAC,CAAC,WAAW,CAAC,OAAO,oBAAoB,CAAC,CAAA"}
+{"version":3,"file":"user.d.ts","sourceRoot":"","sources":["../../../../../home/runner/work/custom-blocks/custom-blocks/protocol/src/users/user.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,CAAC,MAAM,SAAS,CAAA;AAE5B,eAAO,MAAM,kBAAkB,+FAA8C,CAAA;AAC7E,MAAM,MAAM,YAAY,GAAG,CAAC,CAAC,WAAW,CAAC,OAAO,kBAAkB,CAAC,CAAA;AAEnE,eAAO,MAAM,gBAAgB;;;;;;;;;aAS3B,CAAA;AAEF,MAAM,MAAM,UAAU,GAAG,CAAC,CAAC,WAAW,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAE/D,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;aAO/B,CAAA;AAEF,MAAM,MAAM,cAAc,GAAG,CAAC,CAAC,WAAW,CAAC,OAAO,oBAAoB,CAAC,CAAA"}

package/dist/protocol/users/user.js

@@ -1,7 +1,8 @@
 import * as v from "valibot";
+export const notionUserIdSchema = v.pipe(v.string(), v.brand("NotionUserId"));
 export const notionUserSchema = v.object({
     object: v.literal("user"),
-    id: v.string(),
+    id: notionUserIdSchema,
     name: v.optional(v.string()),
     avatar_url: v.nullable(v.string()),
     type: v.literal("person"),

package/dist/react/standalonePreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"standalonePreview.d.ts","sourceRoot":"","sources":["../../../../home/runner/work/custom-blocks/custom-blocks/sdk/src/react/standalonePreview.ts"],"names":[],"mappings":"AAWA,wBAAgB,0BAA0B,SAuBzC"}
+{"version":3,"file":"standalonePreview.d.ts","sourceRoot":"","sources":["../../../../home/runner/work/custom-blocks/custom-blocks/sdk/src/react/standalonePreview.ts"],"names":[],"mappings":"AAaA,wBAAgB,0BAA0B,SAuBzC"}

package/dist/react/standalonePreview.js

@@ -1,9 +1,11 @@
 import { DEFAULT_CONTRAST_MODE } from "../protocol/contrast.js";
 import { notionBlockIdSchema, notionPageIdSchema, } from "../protocol/ids.js";
+import { notionUserIdSchema } from "../protocol/users/user.js";
 import * as v from "valibot";
 import { customBlockHost } from "../bridge/sandboxClient.js";
 const previewBlockId = v.parse(notionBlockIdSchema, "");
 const previewPageId = v.parse(notionPageIdSchema, "");
+const previewUserId = v.parse(notionUserIdSchema, "");
 export function seedStandalonePreviewState() {
     customBlockHost.setMockState({
         type: "init",
@@ -18,7 +20,7 @@ export function seedStandalonePreviewState() {
         dataSources: { bindings: {} },
         currentUser: {
             object: "user",
-            id: "",
+            id: previewUserId,
             name: "Preview User",
             avatar_url: null,
             type: "person",

package/dist/version.js

@@ -4,4 +4,4 @@
  *
  * WARNING: Generated during SDK publish. Do not edit in the published package.
  */
-export const CUSTOM_BLOCKS_SDK_VERSION = "0.1.17"
+export const CUSTOM_BLOCKS_SDK_VERSION = "0.1.19"

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@notionhq/custom-blocks",
-	"version": "0.1.17",
+	"version": "0.1.19",
 	"license": "MIT",
 	"type": "module",
 	"publishConfig": {

package/src/bridge/SandboxBridge.ts

@@ -1,3 +1,4 @@
+import type { NotionContrastMode } from "@notionhq/custom-blocks-protocol/contrast.js"
 import { DEFAULT_CONTRAST_MODE } from "@notionhq/custom-blocks-protocol/contrast.js"
 import type {
 	NotionDataSource,
@@ -29,6 +30,7 @@ import type { CustomBlockQueryDataSourceErrorInfo } from "@notionhq/custom-block
 import type { ResizeMessage } from "@notionhq/custom-blocks-protocol/messages/resize.js"
 import type { UpdatePageMessage } from "@notionhq/custom-blocks-protocol/messages/updatePage.js"
 import { CUSTOM_BLOCK_BRIDGE_PROTOCOL_VERSION } from "@notionhq/custom-blocks-protocol/protocolVersion.js"
+import type { NotionTheme } from "@notionhq/custom-blocks-protocol/theme.js"
 import type { NotionUser } from "@notionhq/custom-blocks-protocol/users/user.js"
 import * as v from "valibot"
 import type {
@@ -48,6 +50,10 @@ import type {
 } from "../types.js"
 import { unreachable } from "../utils.js"
 import { CUSTOM_BLOCKS_SDK_VERSION } from "../version.js"
+import {
+	NOTION_DARK_BACKGROUND_BASE,
+	NOTION_LIGHT_BACKGROUND_BASE,
+} from "./appearance.js"
 import { resolveDataSources } from "./dataSources/resolve.js"
 import { resolvePropertyWriteMapForDataSource } from "./dataSources/resolveProperty.js"
 import {
@@ -98,6 +104,7 @@ export class SandboxBridge {
 	private initializationId: string | undefined
 	private latestDataSourceBindings: NotionDataSourceBindings = {}
 	private isMockState = false
+	private isListening = false
 	private resolveInit: (() => void) | undefined
 	private rejectInit: ((reason: Error) => void) | undefined
 	private readonly initMessage: Promise<void> = new Promise(
@@ -107,13 +114,12 @@ export class SandboxBridge {
 		},
 	)
 
-	constructor() {
-		// `connect` is sent later by `initCustomBlock` (after the manifest fetch
-		// resolves). Top-level / no-iframe rejection is handled there too, so
-		// the constructor just attaches the listener.
-		if (typeof window !== "undefined") {
-			window.addEventListener("message", this.handleMessage)
+	startListening() {
+		if (this.isListening || typeof window === "undefined") {
+			return
 		}
+		this.isListening = true
+		window.addEventListener("message", this.handleMessage)
 	}
 
 	private static MAX_LOG_ENTRIES = 100
@@ -291,6 +297,10 @@ export class SandboxBridge {
 					...hostState,
 					theme: message.theme,
 				}
+				syncDocumentAppearance({
+					theme: message.theme,
+					contrastMode: hostState.contrastMode,
+				})
 				this.notify()
 				return
 			}
@@ -300,6 +310,10 @@ export class SandboxBridge {
 					...hostState,
 					contrastMode: message.contrastMode,
 				}
+				syncDocumentAppearance({
+					theme: hostState.theme,
+					contrastMode: message.contrastMode,
+				})
 				this.notify()
 				return
 			}
@@ -550,6 +564,10 @@ export class SandboxBridge {
 			dataSources,
 			dataSourceState: {},
 		}
+		syncDocumentAppearance({
+			theme: message.theme,
+			contrastMode: message.contrastMode,
+		})
 		this.notify()
 		if (postResult) {
 			const result: InitResultMessage = {
@@ -885,6 +903,31 @@ export class SandboxBridge {
 	}
 }
 
+/**
+ * Makes the document canvas match the host appearance before acknowledging init.
+ *
+ * The host reveals the iframe as soon as it receives `initResult.success`. Applying these
+ * attributes synchronously prevents the browser's default white canvas from flashing while React
+ * mounts a token scope.
+ */
+function syncDocumentAppearance(args: {
+	theme: NotionTheme
+	contrastMode: NotionContrastMode
+}): void {
+	if (typeof document === "undefined") {
+		return
+	}
+	const { theme, contrastMode } = args
+	const root = document.documentElement
+	root.dataset.displayMode = theme
+	root.dataset.contrastMode = contrastMode
+	root.style.colorScheme = theme
+	root.style.backgroundColor =
+		theme === "dark"
+			? NOTION_DARK_BACKGROUND_BASE
+			: NOTION_LIGHT_BACKGROUND_BASE
+}
+
 /**
  * `postMessage` cloning creates new objects even for bindings that did not change.
  * Preserve their resolved object identity so React effects only run for changed bindings.

package/src/bridge/appearance.ts

@@ -0,0 +1,14 @@
+/**
+ * Background color values used before the NDS token scope mounts.
+ *
+ * The light value matches NDS's semantic `--bg-base` token in light mode
+ * (`--gray-0`, white). The dark value is the existing SDK fallback canvas
+ * color; it is not an exact current generated NDS value. Current NDS maps
+ * dark `--bg-base` to `--gray-145` (approximately `#1b1b1b`), while the
+ * legacy notion-next gray surface is `rgba(32, 32, 32, 1)`.
+ *
+ * Keep the resolved values here because the document must be styled before the block's NDS
+ * stylesheet and token scope are guaranteed to be available.
+ */
+export const NOTION_DARK_BACKGROUND_BASE = "#191918"
+export const NOTION_LIGHT_BACKGROUND_BASE = "#ffffff"

package/src/bridge/sandboxClient.ts

@@ -22,23 +22,34 @@ import { type MessageLogEntry, SandboxBridge } from "./SandboxBridge.js"
 
 export type { MessageLogEntry }
 
-const bridge = new SandboxBridge()
+let bridge: SandboxBridge | undefined
+
+function getBridge(): SandboxBridge {
+	if (!bridge) {
+		bridge = new SandboxBridge()
+	}
+	return bridge
+}
 
 export const customBlockHost = {
+	start: () => {
+		getBridge().startListening()
+	},
+
 	sendConnect: (manifestResult: ManifestLoadResult) => {
-		bridge.sendConnect(manifestResult)
+		getBridge().sendConnect(manifestResult)
 	},
 
 	awaitInit: (signal?: AbortSignal): Promise<void> => {
-		return bridge.awaitInit(signal)
+		return getBridge().awaitInit(signal)
 	},
 
 	subscribe: (listener: () => void) => {
-		return bridge.subscribe(listener)
+		return getBridge().subscribe(listener)
 	},
 
 	getState: (): CustomBlockHostState => {
-		return bridge.getHostState()
+		return getBridge().getHostState()
 	},
 
 	/**
@@ -46,17 +57,17 @@ export const customBlockHost = {
 	 * standalone preview state.
 	 */
 	setMockState: (message: InitMessage) => {
-		bridge.setMockState(message)
+		getBridge().setMockState(message)
 	},
 
 	postResize: (height: number) => {
-		bridge.postResize(height)
+		getBridge().postResize(height)
 	},
 }
 
 export const customBlockDataSources = {
 	query: (key: string, options?: UseDataSourceOptions) => {
-		bridge.queryDataSource(key, options)
+		getBridge().queryDataSource(key, options)
 	},
 
 	getView: (
@@ -64,18 +75,18 @@ export const customBlockDataSources = {
 		key: string,
 	): DataSourceQueryView => {
 		return getDataSourceQueryViewWithBridge(hostState, key, args =>
-			bridge.updateDataSourcePage(args),
+			getBridge().updateDataSourcePage(args),
 		)
 	},
 }
 
 export const messageLog = {
 	getSnapshot: (): readonly MessageLogEntry[] => {
-		return bridge.getMessageLog()
+		return getBridge().getMessageLog()
 	},
 
 	subscribe: (listener: () => void) => {
-		return bridge.subscribeToMessageLog(listener)
+		return getBridge().subscribeToMessageLog(listener)
 	},
 }
 
@@ -87,28 +98,28 @@ export const pages = {
 	 * Creates a new Notion page.
 	 */
 	create: (input: CreatePageArgs): Promise<CreatePageResult> => {
-		return bridge.createPage(input)
+		return getBridge().createPage(input)
 	},
 
 	/**
 	 * Fetches a page by id.
 	 */
 	get: (pageId: NotionPageId): Promise<GetPageResult> => {
-		return bridge.getPage(pageId)
+		return getBridge().getPage(pageId)
 	},
 
 	/**
 	 * Updates an existing page.
 	 */
 	update: (input: UpdatePageArgs): Promise<UpdatePageResult> => {
-		return bridge.updatePage(input)
+		return getBridge().updatePage(input)
 	},
 
 	/**
 	 * Soft-delete a page by archiving it.
 	 */
 	delete: (pageId: NotionPageId): Promise<UpdatePageResult> => {
-		return bridge.updatePage({ pageId, archived: true })
+		return getBridge().updatePage({ pageId, archived: true })
 	},
 }
 
@@ -120,13 +131,13 @@ export const users = {
 	 * Lists users visible in the current custom block workspace.
 	 */
 	list: (input?: ListUsersArgs): Promise<ListUsersResult> => {
-		return bridge.listUsers(input)
+		return getBridge().listUsers(input)
 	},
 
 	/**
 	 * Fetches a user by id.
 	 */
 	get: (userId: NotionUserId): Promise<GetUserResult> => {
-		return bridge.getUser(userId)
+		return getBridge().getUser(userId)
 	},
 }

package/src/init.ts

@@ -76,6 +76,7 @@ export function initCustomBlock(
 	opts: InitCustomBlockOptions = {},
 ): Promise<CustomBlockInitPayload> {
 	if (initPromise === undefined) {
+		customBlockHost.start()
 		initPromise = performHandshake(opts)
 	}
 	return initPromise

package/src/react/standalonePreview.ts

@@ -3,11 +3,13 @@ import {
 	notionBlockIdSchema,
 	notionPageIdSchema,
 } from "@notionhq/custom-blocks-protocol/ids.js"
+import { notionUserIdSchema } from "@notionhq/custom-blocks-protocol/users/user.js"
 import * as v from "valibot"
 import { customBlockHost } from "../bridge/sandboxClient.js"
 
 const previewBlockId = v.parse(notionBlockIdSchema, "")
 const previewPageId = v.parse(notionPageIdSchema, "")
+const previewUserId = v.parse(notionUserIdSchema, "")
 
 export function seedStandalonePreviewState() {
 	customBlockHost.setMockState({
@@ -23,7 +25,7 @@ export function seedStandalonePreviewState() {
 		dataSources: { bindings: {} },
 		currentUser: {
 			object: "user",
-			id: "",
+			id: previewUserId,
 			name: "Preview User",
 			avatar_url: null,
 			type: "person",