@notionhq/custom-blocks 0.0.63 → 0.0.65

package/src/host/lifecycle/initErrors.ts

@@ -15,6 +15,10 @@ const UNKNOWN_ERROR_MESSAGE =
  */
 export function initErrorForFailureReason(
 	reason: CustomBlockInitErrorCode,
+	data: {
+		minBridgeProtocolVersion?: number
+		currentBridgeProtocolVersion?: number
+	} = {},
 ): CustomBlockInitErrorInfo {
 	switch (reason) {
 		case "no_ready":
@@ -43,20 +47,31 @@ export function initErrorForFailureReason(
 				// The sandbox must be updated to a valid manifest.
 				isRetryable: false,
 			}
-		case "invalid_protocol_version":
+		case "invalid_protocol_version": {
+			const versionText = data.currentBridgeProtocolVersion
+				? `: ${data.currentBridgeProtocolVersion}`
+				: "."
 			return {
 				code: reason,
-				message: "Sandbox reported an invalid bridge protocol version.",
+				message: `Sandbox reported an invalid bridge protocol version ${versionText}`,
 				// The sandbox must be updated to a supported protocol version.
 				isRetryable: false,
 			}
-		case "unsupported_protocol_version":
+		}
+		case "unsupported_protocol_version": {
+			const currentVersionText = data.currentBridgeProtocolVersion
+				? `${data.currentBridgeProtocolVersion} `
+				: ""
+			const minVersionText = data.minBridgeProtocolVersion
+				? ` Minimum supported version is ${data.minBridgeProtocolVersion}.`
+				: ""
 			return {
 				code: reason,
-				message: "Sandbox bridge protocol version is not supported.",
+				message: `Sandbox bridge protocol version ${currentVersionText}is not supported.${minVersionText}`,
 				// The sandbox must be updated to a supported protocol version.
 				isRetryable: false,
 			}
+		}
 		case "context_unavailable":
 			return {
 				code: reason,

package/src/host/lifecycle/ready.ts

@@ -1,36 +1,3 @@
-import type { CustomBlockInitErrorCode } from "../../bridge/messages/init.js"
-import type { ReadyMessage } from "../../bridge/messages/ready.js"
-
-export type ReadyInitFailure = {
-	code: CustomBlockInitErrorCode
-	message?: string
-}
-
-export function getReadyInitFailure(
-	message: ReadyMessage,
-	minBridgeProtocolVersion: number,
-): ReadyInitFailure | undefined {
-	if (!isValidBridgeProtocolVersion(message.bridgeProtocolVersion)) {
-		return {
-			code: "invalid_protocol_version",
-			message: `Sandbox reported invalid bridge protocol version ${message.bridgeProtocolVersion}.`,
-		}
-	}
-	if (message.bridgeProtocolVersion < minBridgeProtocolVersion) {
-		return {
-			code: "unsupported_protocol_version",
-			message: `Sandbox bridge protocol version ${message.bridgeProtocolVersion} is below the host minimum ${minBridgeProtocolVersion}.`,
-		}
-	}
-	if (message.status === "error") {
-		return {
-			code: message.error.code,
-			message: message.error.message,
-		}
-	}
-	return undefined
-}
-
-function isValidBridgeProtocolVersion(version: number): boolean {
+export function isValidBridgeProtocolVersion(version: number): boolean {
 	return Number.isFinite(version) && Number.isInteger(version) && version >= 1
 }

package/src/init.ts

@@ -106,7 +106,7 @@ export function initCustomBlock(
 			}
 			if (message.status === "error") {
 				console.error(
-					`[notion-custom-sdk] host reported init error (${message.error.code}): ${message.error.message}`,
+					`[custom-blocks-sdk] host reported init error (${message.error.code}): ${message.error.message}`,
 				)
 				throw new CustomBlockInitError(message.error)
 			}

package/src/react/NotionCustomBlock.css

@@ -1,27 +1,27 @@
-.ncblock-standalone-banner {
-	--ncblock-standalone-banner-background: #fff8e1;
-	--ncblock-standalone-banner-border: #f0d77b;
-	--ncblock-standalone-banner-text: #5d4200;
+.custom-blocks-standalone-banner {
+	--custom-blocks-standalone-banner-background: #fff8e1;
+	--custom-blocks-standalone-banner-border: #f0d77b;
+	--custom-blocks-standalone-banner-text: #5d4200;
 
 	padding: 8px 12px;
-	background: var(--ncblock-standalone-banner-background);
-	color: var(--ncblock-standalone-banner-text);
-	border-bottom: 1px solid var(--ncblock-standalone-banner-border);
+	background: var(--custom-blocks-standalone-banner-background);
+	color: var(--custom-blocks-standalone-banner-text);
+	border-bottom: 1px solid var(--custom-blocks-standalone-banner-border);
 	font-size: 13px;
 	font-family: system-ui, sans-serif;
 	line-height: 1.4;
 }
 
-.ncblock-default-init-error {
-	--ncblock-init-error-background: #f7f7f5;
-	--ncblock-init-error-card-background: #ffffff;
-	--ncblock-init-error-border: #e5e5e1;
-	--ncblock-init-error-text: #1f1f1d;
-	--ncblock-init-error-muted-text: #5f5e5b;
-	--ncblock-init-error-eyebrow-text: #787774;
-	--ncblock-init-error-pre-background: #f1f1ef;
-	--ncblock-init-error-pre-text: #37352f;
-	--ncblock-init-error-shadow: rgba(0, 0, 0, 0.08);
+.custom-blocks-default-init-error {
+	--custom-blocks-init-error-background: #f7f7f5;
+	--custom-blocks-init-error-card-background: #ffffff;
+	--custom-blocks-init-error-border: #e5e5e1;
+	--custom-blocks-init-error-text: #1f1f1d;
+	--custom-blocks-init-error-muted-text: #5f5e5b;
+	--custom-blocks-init-error-eyebrow-text: #787774;
+	--custom-blocks-init-error-pre-background: #f1f1ef;
+	--custom-blocks-init-error-pre-text: #37352f;
+	--custom-blocks-init-error-shadow: rgba(0, 0, 0, 0.08);
 
 	box-sizing: border-box;
 	min-height: 240px;
@@ -29,81 +29,81 @@
 	align-items: center;
 	justify-content: center;
 	padding: 24px;
-	background: var(--ncblock-init-error-background);
-	color: var(--ncblock-init-error-text);
+	background: var(--custom-blocks-init-error-background);
+	color: var(--custom-blocks-init-error-text);
 	font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
 	color-scheme: light;
 }
 
-.ncblock-default-init-error__card {
+.custom-blocks-default-init-error__card {
 	box-sizing: border-box;
 	width: 100%;
 	max-width: 420px;
 	padding: 20px;
-	border: 1px solid var(--ncblock-init-error-border);
+	border: 1px solid var(--custom-blocks-init-error-border);
 	border-radius: 12px;
-	background: var(--ncblock-init-error-card-background);
-	box-shadow: 0 8px 24px var(--ncblock-init-error-shadow);
+	background: var(--custom-blocks-init-error-card-background);
+	box-shadow: 0 8px 24px var(--custom-blocks-init-error-shadow);
 }
 
-.ncblock-default-init-error__eyebrow {
+.custom-blocks-default-init-error__eyebrow {
 	margin-bottom: 8px;
 	font-size: 11px;
 	font-weight: 600;
 	letter-spacing: 0.08em;
 	text-transform: uppercase;
-	color: var(--ncblock-init-error-eyebrow-text);
+	color: var(--custom-blocks-init-error-eyebrow-text);
 }
 
-.ncblock-default-init-error__title {
+.custom-blocks-default-init-error__title {
 	margin: 0;
 	font-size: 18px;
 	line-height: 1.3;
 	font-weight: 650;
 }
 
-.ncblock-default-init-error__body {
+.custom-blocks-default-init-error__body {
 	margin: 8px 0 0;
 	font-size: 14px;
 	line-height: 1.5;
-	color: var(--ncblock-init-error-muted-text);
+	color: var(--custom-blocks-init-error-muted-text);
 }
 
-.ncblock-default-init-error__details {
+.custom-blocks-default-init-error__details {
 	margin-top: 14px;
 	font-size: 12px;
-	color: var(--ncblock-init-error-muted-text);
+	color: var(--custom-blocks-init-error-muted-text);
 }
 
-.ncblock-default-init-error__pre {
+.custom-blocks-default-init-error__pre {
 	margin: 8px 0 0;
 	padding: 10px;
 	overflow: auto;
 	border-radius: 8px;
-	background: var(--ncblock-init-error-pre-background);
-	color: var(--ncblock-init-error-pre-text);
+	background: var(--custom-blocks-init-error-pre-background);
+	color: var(--custom-blocks-init-error-pre-text);
 	font-size: 12px;
 	line-height: 1.4;
 	white-space: pre-wrap;
 }
 
 @media (prefers-color-scheme: dark) {
-	.ncblock-standalone-banner {
-		--ncblock-standalone-banner-background: #3b2f0b;
-		--ncblock-standalone-banner-border: #6f5713;
-		--ncblock-standalone-banner-text: #f5d36c;
+	.custom-blocks-standalone-banner {
+		--custom-blocks-standalone-banner-background: #3b2f0b;
+		--custom-blocks-standalone-banner-border: #6f5713;
+		--custom-blocks-standalone-banner-text: #f5d36c;
 	}
 
-	.ncblock-default-init-error {
-		--ncblock-init-error-background: #191918;
-		--ncblock-init-error-card-background: #20201f;
-		--ncblock-init-error-border: #373633;
-		--ncblock-init-error-text: #f1f1ef;
-		--ncblock-init-error-muted-text: #b9b8b3;
-		--ncblock-init-error-eyebrow-text: #9b9a97;
-		--ncblock-init-error-pre-background: #2a2a28;
-		--ncblock-init-error-pre-text: #e8e8e4;
-		--ncblock-init-error-shadow: rgba(0, 0, 0, 0.35);
+	.custom-blocks-default-init-error {
+		--custom-blocks-init-error-background: #191918;
+		--custom-blocks-init-error-card-background: #20201f;
+		--custom-blocks-init-error-border: #373633;
+		--custom-blocks-init-error-text: #f1f1ef;
+		--custom-blocks-init-error-muted-text: #b9b8b3;
+		--custom-blocks-init-error-eyebrow-text: #9b9a97;
+		--custom-blocks-init-error-pre-background: #2a2a28;
+		--custom-blocks-init-error-pre-text: #e8e8e4;
+		--custom-blocks-init-error-shadow: rgba(0, 0, 0, 0.35);
 
 		color-scheme: dark;
 	}

package/src/react/NotionCustomBlock.tsx

@@ -80,7 +80,7 @@ export function NotionCustomBlock({
 		if (!isStandalone) {
 			return
 		}
-		console.warn(`[notion-custom-sdk] ${init.error?.message}`)
+		console.warn(`[custom-blocks-sdk] ${init.error?.message}`)
 		seedStandalonePreviewState()
 	}, [isStandalone, init.error])
 
@@ -107,7 +107,7 @@ export function NotionCustomBlock({
 		}
 		return (
 			<>
-				<div role="status" className="ncblock-standalone-banner">
+				<div role="status" className="custom-blocks-standalone-banner">
 					Notion host not detected — running in standalone preview. SDK hooks
 					return placeholder values until embedded in Notion.
 				</div>
@@ -125,25 +125,29 @@ export function NotionCustomBlock({
 function DefaultInitErrorFallback({ error }: { error: Error }) {
 	useEffect(() => {
 		console.warn(
-			`[notion-custom-sdk] Custom block init failed: ${error.message}`,
+			`[custom-blocks-sdk] Custom block init failed: ${error.message}`,
 		)
 	}, [error])
 
 	return (
-		<div role="alert" className="ncblock-default-init-error">
-			<div className="ncblock-default-init-error__card">
-				<div className="ncblock-default-init-error__eyebrow">Custom block</div>
-				<h2 className="ncblock-default-init-error__title">
+		<div role="alert" className="custom-blocks-default-init-error">
+			<div className="custom-blocks-default-init-error__card">
+				<div className="custom-blocks-default-init-error__eyebrow">
+					Custom block
+				</div>
+				<h2 className="custom-blocks-default-init-error__title">
 					Couldn&apos;t connect to Notion
 				</h2>
-				<p className="ncblock-default-init-error__body">
+				<p className="custom-blocks-default-init-error__body">
 					This custom block loaded, but the setup handshake didn&apos;t finish.
 					Try again from Notion. If this keeps happening, check the browser
 					console for SDK details.
 				</p>
-				<details className="ncblock-default-init-error__details">
+				<details className="custom-blocks-default-init-error__details">
 					<summary>Developer details</summary>
-					<pre className="ncblock-default-init-error__pre">{error.message}</pre>
+					<pre className="custom-blocks-default-init-error__pre">
+						{error.message}
+					</pre>
 				</details>
 			</div>
 		</div>

package/src/utils.ts

@@ -8,6 +8,6 @@
  */
 export function unreachable(value: never): never {
 	throw new Error(
-		`[notion-custom-sdk] Unexpected value encountered: ${JSON.stringify(value)}`,
+		`[custom-blocks-sdk] Unexpected value encountered: ${JSON.stringify(value)}`,
 	)
 }

package/src/version.ts

@@ -5,4 +5,4 @@
  * This checked-in value intentionally stays generic for local development. The SDK publish build
  * overwrites the compiled runtime module with package.json's semver before publishing.
  */
-export const NCBLOCK_SDK_VERSION: string = "0.0.0"
+export const CUSTOM_BLOCKS_SDK_VERSION: string = "0.0.0"