@notionhq/custom-blocks 0.0.58

package/src/host/queries/querySubscriptions.ts

@@ -0,0 +1,52 @@
+import type { NotionDataSourceId } from "../../bridge/ids.js"
+import type { QueryDataSourceMessage } from "../../bridge/messages/queryDataSource.js"
+import type {
+	CustomBlockHostQueryDataSourceResult,
+	QuerySubscriptionState,
+} from "./types.js"
+
+export type QueryRefreshResult =
+	| {
+			status: "success"
+			requestId: string
+			snapshotId: string
+			response: CustomBlockHostQueryDataSourceResult
+	  }
+	| { status: "missing" }
+
+export class QuerySubscriptions {
+	private readonly latestByDataSourceId = new Map<
+		NotionDataSourceId,
+		QuerySubscriptionState
+	>()
+
+	track(message: QueryDataSourceMessage) {
+		this.latestByDataSourceId.set(message.dataSourceId, {
+			requestId: message.requestId,
+			snapshotId: message.snapshotId,
+			limit: message.limit,
+		})
+	}
+
+	resolveRefresh(args: {
+		dataSourceId: NotionDataSourceId
+		response: CustomBlockHostQueryDataSourceResult
+	}): QueryRefreshResult {
+		const queryState = this.latestByDataSourceId.get(args.dataSourceId)
+		if (!queryState) {
+			return { status: "missing" }
+		}
+		const items = args.response.items.slice(0, queryState.limit)
+		return {
+			status: "success",
+			requestId: queryState.requestId,
+			snapshotId: queryState.snapshotId,
+			response: {
+				items,
+				hasMore:
+					args.response.hasMore ?? args.response.items.length > items.length,
+				error: args.response.error,
+			},
+		}
+	}
+}

package/src/host/queries/types.ts

@@ -0,0 +1,16 @@
+import type { QueryDataSourceMessage } from "../../bridge/messages/queryDataSource.js"
+import type {
+	CustomBlockQueryDataSourceErrorInfo,
+	QueryDataSourceResultMessage,
+} from "../../bridge/messages/queryDataSourceResult.js"
+
+export type CustomBlockHostQueryDataSourceResult = {
+	items: QueryDataSourceResultMessage["items"]
+	hasMore?: boolean
+	error?: CustomBlockQueryDataSourceErrorInfo
+}
+
+export type QuerySubscriptionState = Pick<
+	QueryDataSourceMessage,
+	"requestId" | "snapshotId" | "limit"
+>

package/src/host.ts

@@ -0,0 +1,167 @@
+/**
+ * Host-side entrypoint for `@notionhq/custom-blocks/host`.
+ *
+ * Re-exports the bridge valibot schemas and data-source binding types so
+ * anything implementing the host side of the bridge can validate inbound
+ * sandbox traffic and shape outbound traffic without reaching into private
+ * `bridge/*` paths.
+ *
+ * Nothing here is intended for use inside a sandboxed custom block; that
+ * surface lives in the default `@notionhq/custom-blocks` entrypoint.
+ */
+
+export type {
+	NotionDataSourceBinding,
+	NotionDataSourceBindings,
+} from "./bridge/dataSources/dataSource.js"
+export {
+	notionDataSourceBindingSchema,
+	notionDataSourceBindingsSchema,
+} from "./bridge/dataSources/dataSource.js"
+export type { NotionDataSourcePageBridge } from "./bridge/dataSources/dataSourcePage.js"
+export { notionDataSourcePageBridgeSchema } from "./bridge/dataSources/dataSourcePage.js"
+export type {
+	CustomBlockDataSourceResolutionErrorCode,
+	CustomBlockDataSourceResolutionErrorInfo,
+} from "./bridge/dataSources/errors.js"
+export { customBlockDataSourceResolutionErrorCodeSchema } from "./bridge/dataSources/errors.js"
+export type {
+	CustomBlockPropertyErrorCode,
+	CustomBlockPropertyErrorInfo,
+} from "./bridge/dataSources/resolveProperty.js"
+export { customBlockPropertyErrorCodeSchema } from "./bridge/dataSources/resolveProperty.js"
+export type { CustomBlockErrorInfo } from "./bridge/errors.js"
+export { customBlockErrorInfoSchema } from "./bridge/errors.js"
+export {
+	notionBlockIdSchema,
+	notionDataSourceIdSchema,
+	notionPageIdSchema,
+} from "./bridge/ids.js"
+export { readIncomingType } from "./bridge/incomingType.js"
+export type { CreatePageMessage } from "./bridge/messages/createPage.js"
+export { createPageMessageSchema } from "./bridge/messages/createPage.js"
+export type {
+	CreatePageResultMessage,
+	CustomBlockCreatePageErrorCode,
+	CustomBlockCreatePageErrorInfo,
+} from "./bridge/messages/createPageResult.js"
+export {
+	createPageResultMessageSchema,
+	customBlockCreatePageErrorCodeSchema,
+	customBlockCreatePageErrorInfoSchema,
+} from "./bridge/messages/createPageResult.js"
+export type { CurrentUserChangedMessage } from "./bridge/messages/currentUserChanged.js"
+export { currentUserChangedMessageSchema } from "./bridge/messages/currentUserChanged.js"
+export type { DataSourcesChangedMessage } from "./bridge/messages/dataSourcesChanged.js"
+export { dataSourcesChangedMessageSchema } from "./bridge/messages/dataSourcesChanged.js"
+export type {
+	CustomBlockGetPageErrorCode,
+	CustomBlockGetPageErrorInfo,
+	GetPageMessage,
+	GetPageResultMessage,
+} from "./bridge/messages/getPage.js"
+export {
+	customBlockGetPageErrorCodeSchema,
+	customBlockGetPageErrorInfoSchema,
+	getPageMessageSchema,
+	getPageResultMessageSchema,
+} from "./bridge/messages/getPage.js"
+export type {
+	CustomBlockGetUserErrorCode,
+	CustomBlockGetUserErrorInfo,
+	GetUserMessage,
+	GetUserResultMessage,
+} from "./bridge/messages/getUser.js"
+export {
+	customBlockGetUserErrorCodeSchema,
+	customBlockGetUserErrorInfoSchema,
+	getUserMessageSchema,
+	getUserResultMessageSchema,
+} from "./bridge/messages/getUser.js"
+export type { HostToSandboxMessage } from "./bridge/messages/hostToSandbox.js"
+export { hostToSandboxMessageSchema } from "./bridge/messages/hostToSandbox.js"
+export type {
+	CustomBlockInitErrorCode,
+	CustomBlockInitErrorInfo,
+	InitMessage,
+} from "./bridge/messages/init.js"
+export {
+	customBlockInitErrorCodeSchema,
+	customBlockInitErrorInfoSchema,
+	initMessageSchema,
+} from "./bridge/messages/init.js"
+export type { InvalidHostMessage } from "./bridge/messages/invalidHostMessage.js"
+export { invalidHostMessageSchema } from "./bridge/messages/invalidHostMessage.js"
+export type { InvalidSandboxMessage } from "./bridge/messages/invalidSandboxMessage.js"
+export { invalidSandboxMessageSchema } from "./bridge/messages/invalidSandboxMessage.js"
+export type {
+	CustomBlockListUsersErrorCode,
+	CustomBlockListUsersErrorInfo,
+	ListUsersMessage,
+	ListUsersResultMessage,
+} from "./bridge/messages/listUsers.js"
+export {
+	customBlockListUsersErrorCodeSchema,
+	customBlockListUsersErrorInfoSchema,
+	listUsersMessageSchema,
+	listUsersResultMessageSchema,
+} from "./bridge/messages/listUsers.js"
+export type { PageChangedMessage } from "./bridge/messages/pageChanged.js"
+export { pageChangedMessageSchema } from "./bridge/messages/pageChanged.js"
+export type { ParentChangedMessage } from "./bridge/messages/parentChanged.js"
+export { parentChangedMessageSchema } from "./bridge/messages/parentChanged.js"
+export type { QueryDataSourceMessage } from "./bridge/messages/queryDataSource.js"
+export { queryDataSourceMessageSchema } from "./bridge/messages/queryDataSource.js"
+export type {
+	CustomBlockQueryDataSourceErrorCode,
+	CustomBlockQueryDataSourceErrorInfo,
+	QueryDataSourceResultMessage,
+} from "./bridge/messages/queryDataSourceResult.js"
+export {
+	customBlockQueryDataSourceErrorCodeSchema,
+	customBlockQueryDataSourceErrorInfoSchema,
+	queryDataSourceResultMessageSchema,
+} from "./bridge/messages/queryDataSourceResult.js"
+export type { ReadyMessage } from "./bridge/messages/ready.js"
+export { readyMessageSchema } from "./bridge/messages/ready.js"
+export type { ResizeMessage } from "./bridge/messages/resize.js"
+export { resizeMessageSchema } from "./bridge/messages/resize.js"
+export type { SandboxToHostMessage } from "./bridge/messages/sandboxToHost.js"
+export { sandboxToHostMessageSchema } from "./bridge/messages/sandboxToHost.js"
+export type { ThemeChangedMessage } from "./bridge/messages/themeChanged.js"
+export { themeChangedMessageSchema } from "./bridge/messages/themeChanged.js"
+export type { UpdatePageMessage } from "./bridge/messages/updatePage.js"
+export { updatePageMessageSchema } from "./bridge/messages/updatePage.js"
+export type {
+	CustomBlockUpdatePageErrorCode,
+	CustomBlockUpdatePageErrorInfo,
+	UpdatePageResultMessage,
+} from "./bridge/messages/updatePageResult.js"
+export {
+	customBlockUpdatePageErrorCodeSchema,
+	customBlockUpdatePageErrorInfoSchema,
+	updatePageResultMessageSchema,
+} from "./bridge/messages/updatePageResult.js"
+export type { CustomBlockPage } from "./bridge/pages/page.js"
+export { customBlockPageSchema } from "./bridge/pages/page.js"
+export { notionParentSchema } from "./bridge/parent.js"
+export {
+	type CustomBlockHostHandle,
+	type CustomBlockHostOptions,
+	createCustomBlockHost,
+} from "./host/createCustomBlockHost.js"
+export type {
+	CustomBlockHostDataSourcesPayload,
+	CustomBlockHostInitialDataSources,
+	CustomBlockHostInitialState,
+} from "./host/lifecycle/types.js"
+export type {
+	CustomBlockHostCreatePageResult,
+	CustomBlockHostGetPageResult,
+	CustomBlockHostGetUserResult,
+	CustomBlockHostHandlers,
+	CustomBlockHostListUsersResult,
+	CustomBlockHostLogDirection,
+	CustomBlockHostUpdatePageResult,
+} from "./host/messages/types.js"
+export type { CustomBlockHostQueryDataSourceResult } from "./host/queries/types.js"

package/src/index.ts

@@ -0,0 +1,115 @@
+/**
+ * Public entrypoint for `@notionhq/custom-blocks`.
+ *
+ * Everything re-exported here is part of the SDK's public API. Anything not
+ * re-exported is internal and may change without notice. Framework-neutral
+ * consumers should import from `@notionhq/custom-blocks`; React consumers
+ * should import hooks and components from `@notionhq/custom-blocks/react`.
+ */
+
+export type {
+	NotionCollectionSchema,
+	NotionDataSource,
+} from "./bridge/dataSources/dataSource.js"
+export type {
+	NotionDataSourcePage,
+	NotionDataSourcePageUpdateInput,
+	NotionDataSourcePageUpdateResult,
+} from "./bridge/dataSources/dataSourcePage.js"
+export type { NotionDataSourceValue } from "./bridge/dataSources/dataSourceValue.js"
+export type {
+	NotionDate,
+	NotionDateRange,
+	NotionDateReminder,
+	NotionDateTime,
+	NotionDateTimeRange,
+	NotionDateTimeReminder,
+	NotionDateValue,
+	NotionNoReminder,
+	NotionTimeReminder,
+} from "./bridge/dataSources/dateValue.js"
+export type {
+	CustomBlockDataSourceResolutionErrorCode,
+	CustomBlockDataSourceResolutionErrorInfo,
+} from "./bridge/dataSources/errors.js"
+export type {
+	NotionBuiltinPropertyId,
+	NotionDualProperty,
+	NotionPropertyColor,
+	NotionPropertyOption,
+	NotionPropertySchema,
+	NotionPropertyType,
+	NotionStatusGroup,
+} from "./bridge/dataSources/propertySchema.js"
+export {
+	NOTION_BUILTIN_PROPERTY_IDS,
+	NOTION_PROPERTY_TYPES,
+} from "./bridge/dataSources/propertySchema.js"
+export type { NotionRecordPointer } from "./bridge/dataSources/recordPointer.js"
+export type {
+	CustomBlockPropertyErrorCode,
+	CustomBlockPropertyErrorInfo,
+} from "./bridge/dataSources/resolveProperty.js"
+export type { CustomBlockErrorInfo } from "./bridge/errors.js"
+export type {
+	NotionBlockId,
+	NotionDataSourceId,
+	NotionSpaceId,
+} from "./bridge/ids.js"
+export type {
+	CustomBlockManifest,
+	ManifestDataSource,
+	ManifestIcon,
+	ManifestProperty,
+} from "./bridge/manifest.js"
+export type { NotionCreatePagePosition } from "./bridge/messages/createPage.js"
+export type {
+	CustomBlockCreatePageErrorCode,
+	CustomBlockCreatePageErrorInfo,
+} from "./bridge/messages/createPageResult.js"
+export type {
+	CustomBlockGetPageErrorCode,
+	CustomBlockGetPageErrorInfo,
+} from "./bridge/messages/getPage.js"
+export type {
+	CustomBlockGetUserErrorCode,
+	CustomBlockGetUserErrorInfo,
+} from "./bridge/messages/getUser.js"
+export type {
+	CustomBlockInitErrorCode,
+	CustomBlockInitErrorInfo,
+} from "./bridge/messages/init.js"
+export { CustomBlockInitError } from "./bridge/messages/init.js"
+export type {
+	CustomBlockListUsersErrorCode,
+	CustomBlockListUsersErrorInfo,
+} from "./bridge/messages/listUsers.js"
+export type {
+	CustomBlockQueryDataSourceErrorCode,
+	CustomBlockQueryDataSourceErrorInfo,
+} from "./bridge/messages/queryDataSourceResult.js"
+export type {
+	CustomBlockUpdatePageErrorCode,
+	CustomBlockUpdatePageErrorInfo,
+} from "./bridge/messages/updatePageResult.js"
+export type {
+	NotionPage,
+	NotionPageCover,
+	NotionPageIcon,
+	NotionPageId,
+	NotionPagePropertyInputMap,
+	NotionPagePropertyInputValue,
+	NotionPagePropertyValue,
+	NotionPagePropertyWriteMap,
+} from "./bridge/pages/page.js"
+export type { NotionParent } from "./bridge/parent.js"
+export { pages, users } from "./bridge/sandboxClient.js"
+export type { NotionTheme } from "./bridge/theme.js"
+export { type CustomBlockState, customBlock } from "./customBlock.js"
+export {
+	type CustomBlockInitial,
+	type InitCustomBlockOptions,
+	initCustomBlock,
+	NotInIframeError,
+} from "./init.js"
+export * from "./types.js"

package/src/init.ts

@@ -0,0 +1,143 @@
+import type { NotionDataSource } from "./bridge/dataSources/dataSource.js"
+import type { NotionBlockId } from "./bridge/ids.js"
+import { loadManifest } from "./bridge/loadManifest.js"
+import {
+	CustomBlockInitError,
+	type CustomBlockInitErrorCode,
+	type InitMessage,
+} from "./bridge/messages/init.js"
+import type { CustomBlockPage } from "./bridge/pages/page.js"
+import type { NotionParent } from "./bridge/parent.js"
+import { customBlockHost } from "./bridge/sandboxClient.js"
+import type { NotionTheme } from "./bridge/theme.js"
+import type { NotionUser } from "./bridge/users/user.js"
+
+/**
+ * The payload sent by the host in the `init` message in response to the sandbox's `ready` message.
+ */
+export type CustomBlockInitial = {
+	theme: NotionTheme
+	blockId: NotionBlockId
+	parent: NotionParent
+	page: CustomBlockPage
+	currentUser: NotionUser
+	dataSources: NotionDataSource[]
+}
+
+/**
+ * Error thrown when the SDK is loaded in a top-level standalone window with no parent frame.
+ * `postMessage` would just hit the same window and the handshake can never complete.
+ * `<NotionCustomBlock>` catches this specifically and falls back to a standalone preview with a
+ * warning banner. Direct callers can `instanceof` it to apply their own policy.
+ */
+export class NotInIframeError extends Error {
+	constructor(message: string = NOT_IN_IFRAME_MESSAGE) {
+		super(message)
+		this.name = "NotInIframeError"
+		this.code = "not_in_iframe"
+		this.isRetryable = false
+	}
+
+	code: CustomBlockInitErrorCode
+	isRetryable: boolean
+}
+
+/**
+ * Options for {@link initCustomBlock}.
+ */
+export type InitCustomBlockOptions = {
+	/**
+	 * How long to wait for the host's `init` response before rejecting with an error.
+	 *
+	 * @default 15000 - Intentionally longer than Notion's 10s host-dependency watchdog
+	 * so host-owned init errors can arrive before the SDK's generic fallback appears.
+	 */
+	timeoutMs?: number
+}
+
+const DEFAULT_INIT_TIMEOUT_MS = 15_000
+
+const NOT_IN_IFRAME_MESSAGE =
+	"<NotionCustomBlock> only works inside an iframe — use the dev shell or deploy to Notion."
+
+let initPromise: Promise<CustomBlockInitial> | undefined
+
+/**
+ * Performs the SDK <-> host handshake: loads `custom_blocks.json`, posts
+ * `ready`, then awaits the host's `init` message. Resolves with that payload.
+ *
+ * Rejects with a `CustomBlockInitError` if the host doesn't respond inside `timeoutMs`.
+ *
+ * Idempotent: subsequent calls return the same promise as the first and ignore any new options.
+ * Mount your React tree (or call any SDK hook / `customBlock.subscribe`) only after the
+ * returned promise resolves.
+ */
+export function initCustomBlock(
+	opts: InitCustomBlockOptions = {},
+): Promise<CustomBlockInitial> {
+	if (initPromise === undefined) {
+		initPromise = (async () => {
+			// Fail fast with a typed error when rendered as a standalone tab and not in a parent frame.
+			// Otherwise, it would eventually hit the timeout, since `postMessage` to `window.parent`
+			// would just hit the same window and never arrive.
+			if (typeof window !== "undefined" && window.parent === window) {
+				throw new NotInIframeError()
+			}
+
+			// Load the manifest and send it to the host.
+			const manifestResult = await loadManifest()
+			customBlockHost.sendReady(manifestResult)
+
+			const timeoutMs = opts.timeoutMs ?? DEFAULT_INIT_TIMEOUT_MS
+			let message: InitMessage
+			try {
+				message = await customBlockHost.awaitInit(
+					AbortSignal.timeout(timeoutMs),
+				)
+			} catch (error) {
+				if (isTimeoutError(error)) {
+					throw new CustomBlockInitError({
+						code: "init_timeout",
+						message: "Host did not respond to init before the timeout.",
+						isRetryable: true,
+					})
+				}
+				throw error
+			}
+			if (message.status === "error") {
+				console.error(
+					`[notion-custom-sdk] host reported init error (${message.error.code}): ${message.error.message}`,
+				)
+				throw new CustomBlockInitError(message.error)
+			}
+
+			const hostState = customBlockHost.getState()
+			if (hostState.status !== "initialized") {
+				throw new CustomBlockInitError({
+					code: "context_unavailable",
+					message: "Host block payload is unavailable.",
+					isRetryable: true,
+				})
+			}
+
+			return {
+				theme: message.theme,
+				blockId: hostState.blockId,
+				parent: hostState.parent,
+				page: hostState.page,
+				currentUser: message.currentUser,
+				dataSources: hostState.dataSources,
+			}
+		})()
+	}
+	return initPromise
+}
+
+function isTimeoutError(error: unknown): boolean {
+	return (
+		typeof error === "object" &&
+		error !== null &&
+		"name" in error &&
+		(error.name === "TimeoutError" || error.name === "AbortError")
+	)
+}

package/src/react/DebugMessageLog.tsx

@@ -0,0 +1,30 @@
+import { useSyncExternalStore } from "react"
+import { messageLog } from "../bridge/sandboxClient.js"
+
+export function DebugMessageLog() {
+	const log = useSyncExternalStore(messageLog.subscribe, messageLog.getSnapshot)
+	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",
+}

package/src/react/NotionCustomBlock.css

@@ -0,0 +1,110 @@
+.ncblock-standalone-banner {
+	--ncblock-standalone-banner-background: #fff8e1;
+	--ncblock-standalone-banner-border: #f0d77b;
+	--ncblock-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);
+	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);
+
+	box-sizing: border-box;
+	min-height: 240px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 24px;
+	background: var(--ncblock-init-error-background);
+	color: var(--ncblock-init-error-text);
+	font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+	color-scheme: light;
+}
+
+.ncblock-default-init-error__card {
+	box-sizing: border-box;
+	width: 100%;
+	max-width: 420px;
+	padding: 20px;
+	border: 1px solid var(--ncblock-init-error-border);
+	border-radius: 12px;
+	background: var(--ncblock-init-error-card-background);
+	box-shadow: 0 8px 24px var(--ncblock-init-error-shadow);
+}
+
+.ncblock-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);
+}
+
+.ncblock-default-init-error__title {
+	margin: 0;
+	font-size: 18px;
+	line-height: 1.3;
+	font-weight: 650;
+}
+
+.ncblock-default-init-error__body {
+	margin: 8px 0 0;
+	font-size: 14px;
+	line-height: 1.5;
+	color: var(--ncblock-init-error-muted-text);
+}
+
+.ncblock-default-init-error__details {
+	margin-top: 14px;
+	font-size: 12px;
+	color: var(--ncblock-init-error-muted-text);
+}
+
+.ncblock-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);
+	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;
+	}
+
+	.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);
+
+		color-scheme: dark;
+	}
+}