@notionhq/custom-blocks 0.0.62 → 0.0.64

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/react/standalonePreview.ts

@@ -12,7 +12,7 @@ export function seedStandalonePreviewState() {
 		theme: "light",
 		blockId: previewBlockId,
 		parent: { type: "page_id", page_id: previewPageId },
-		page: { id: previewPageId },
+		page: { id: previewPageId, parent: { type: "workspace", workspace: true } },
 		dataSources: { bindings: {} },
 		currentUser: {
 			object: "user",

package/src/react/useCustomBlockInit.ts

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react"
 import { CustomBlockInitError } from "../bridge/messages/init.js"
 import {
-	type CustomBlockInitial,
+	type CustomBlockInitPayload,
 	type InitCustomBlockOptions,
 	initCustomBlock,
 	NotInIframeError,
@@ -22,7 +22,7 @@ export type CustomBlockInitFailure = CustomBlockInitError | NotInIframeError
 export type UseCustomBlockInitResult =
 	| { isLoaded: false; error: undefined }
 	| { isLoaded: false; error: CustomBlockInitFailure }
-	| { isLoaded: true; error: undefined; initial: CustomBlockInitial }
+	| { isLoaded: true; error: undefined; initial: CustomBlockInitPayload }
 
 /**
  * React wrapper around {@link initCustomBlock}. Kicks off the SDK ↔ host

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"