@notionhq/custom-blocks 0.1.18 → 0.1.19

package/dist/bridge/SandboxBridge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SandboxBridge.d.ts","sourceRoot":"","sources":["../../../../home/runner/work/custom-blocks/custom-blocks/sdk/src/bridge/SandboxBridge.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"SandboxBridge.d.ts","sourceRoot":"","sources":["../../../../home/runner/work/custom-blocks/custom-blocks/sdk/src/bridge/SandboxBridge.ts"],"names":[],"mappings":"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"}

package/dist/bridge/SandboxBridge.js

@@ -6,6 +6,7 @@ import { CUSTOM_BLOCK_BRIDGE_PROTOCOL_VERSION } from "../protocol/protocolVersio
 import * as v from "valibot";
 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 { createEmptyDataSourceQueryState, } from "./hostState.js";
@@ -104,6 +105,10 @@ export class SandboxBridge {
                         ...hostState,
                         theme: message.theme,
                     };
+                    syncDocumentAppearance({
+                        theme: message.theme,
+                        contrastMode: hostState.contrastMode,
+                    });
                     this.notify();
                     return;
                 }
@@ -112,6 +117,10 @@ export class SandboxBridge {
                         ...hostState,
                         contrastMode: message.contrastMode,
                     };
+                    syncDocumentAppearance({
+                        theme: hostState.theme,
+                        contrastMode: message.contrastMode,
+                    });
                     this.notify();
                     return;
                 }
@@ -410,6 +419,10 @@ export class SandboxBridge {
             dataSources,
             dataSourceState: {},
         };
+        syncDocumentAppearance({
+            theme: message.theme,
+            contrastMode: message.contrastMode,
+        });
         this.notify();
         if (postResult) {
             const result = {
@@ -699,6 +712,27 @@ export class SandboxBridge {
     }
 }
 SandboxBridge.MAX_LOG_ENTRIES = 100;
+/**
+ * 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) {
+    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/dist/bridge/appearance.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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 declare const NOTION_DARK_BACKGROUND_BASE = "#191918";
+export declare const NOTION_LIGHT_BACKGROUND_BASE = "#ffffff";
+//# sourceMappingURL=appearance.d.ts.map

package/dist/bridge/appearance.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"appearance.d.ts","sourceRoot":"","sources":["../../../../home/runner/work/custom-blocks/custom-blocks/sdk/src/bridge/appearance.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,2BAA2B,YAAY,CAAA;AACpD,eAAO,MAAM,4BAA4B,YAAY,CAAA"}

package/dist/bridge/appearance.js

@@ -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/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.18"
+export const CUSTOM_BLOCKS_SDK_VERSION = "0.1.19"

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@notionhq/custom-blocks",
-	"version": "0.1.18",
+	"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 {
@@ -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"