notionic 0.0.0-stage → 0.8.3

package/dist/index.js

@@ -0,0 +1,1266 @@
+import { a as resolvePageLink, i as resolveLink, n as defaultPageHref, r as normalizePageId, t as resolveFileUrl } from "./files-DIc0m6LM.js";
+import { n as plainText, r as warnOnce, t as cx } from "./utils-BL_oAR33.js";
+import { t as pageTitle } from "./page-BmeweSIt.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/colors.ts
+const TEXT = {
+	gray: "text-(--notionic-gray)",
+	brown: "text-(--notionic-brown)",
+	orange: "text-(--notionic-orange)",
+	yellow: "text-(--notionic-yellow)",
+	green: "text-(--notionic-green)",
+	blue: "text-(--notionic-blue)",
+	purple: "text-(--notionic-purple)",
+	pink: "text-(--notionic-pink)",
+	red: "text-(--notionic-red)"
+};
+const BACKGROUND = {
+	gray_background: "bg-(--notionic-gray-bg)",
+	brown_background: "bg-(--notionic-brown-bg)",
+	orange_background: "bg-(--notionic-orange-bg)",
+	yellow_background: "bg-(--notionic-yellow-bg)",
+	green_background: "bg-(--notionic-green-bg)",
+	blue_background: "bg-(--notionic-blue-bg)",
+	purple_background: "bg-(--notionic-purple-bg)",
+	pink_background: "bg-(--notionic-pink-bg)",
+	red_background: "bg-(--notionic-red-bg)"
+};
+/** The class for a Notion color (`red`, `red_background`…), or undefined for `default`. */
+function colorClass(color) {
+	if (!color) return void 0;
+	return TEXT[color] ?? BACKGROUND[color];
+}
+function isBackgroundColor(color) {
+	return Boolean(color && color in BACKGROUND);
+}
+/**
+* A block's color: text color, or a background that bleeds past the text, so
+* the text stays on the same edge as the blocks around it. Blocks with a
+* frame of their own (quote, callout) use `colorClass` instead.
+*/
+function blockColorClass(color) {
+	const cls = colorClass(color);
+	if (!cls) return void 0;
+	return isBackgroundColor(color) ? `${cls} -mx-2 rounded-md px-2 py-1` : cls;
+}
+//#endregion
+//#region src/rich-text.tsx
+const CODE_CLASSES = "rounded-sm bg-muted px-1.5 py-0.5 font-mono text-[0.875em] box-decoration-clone";
+const NOWRAP_CODE_LENGTH = 24;
+const LINK_CLASSES = "font-medium underline underline-offset-4 decoration-from-font decoration-muted-foreground/50 transition-[text-decoration-color] hover:decoration-foreground rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring";
+/** An anchor with notionic's link styling; external links open in a new tab. */
+function NotionLink({ link, className, children }) {
+	return /* @__PURE__ */ jsxs("a", {
+		href: link.href,
+		...link.external ? {
+			target: "_blank",
+			rel: "noopener noreferrer"
+		} : {},
+		className: cx(LINK_CLASSES, className),
+		children: [children, link.external ? /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: " (opens in a new tab)"
+		}) : null]
+	});
+}
+function RichTextItem({ item, context }) {
+	const { annotations } = item;
+	let node = item.plain_text.includes("\n") ? item.plain_text.split("\n").flatMap((line, i) => i === 0 ? [line] : [/* @__PURE__ */ jsx("br", {}, i), line]) : item.plain_text;
+	if (item.type === "mention" && item.mention.type === "date") node = /* @__PURE__ */ jsx("time", {
+		dateTime: item.mention.date.start,
+		children: node
+	});
+	if (item.type === "equation") {
+		const InlineEquation = context.components.inline_equation;
+		if (InlineEquation) node = /* @__PURE__ */ jsx(InlineEquation, {
+			expression: item.equation.expression,
+			context
+		});
+	} else if (annotations.code) {
+		const short = item.plain_text.length <= NOWRAP_CODE_LENGTH;
+		node = /* @__PURE__ */ jsx("code", {
+			className: cx(CODE_CLASSES, short && "whitespace-nowrap"),
+			children: node
+		});
+	}
+	if (annotations.bold) node = /* @__PURE__ */ jsx("strong", {
+		className: "font-semibold",
+		children: node
+	});
+	if (annotations.italic) node = /* @__PURE__ */ jsx("em", { children: node });
+	if (annotations.strikethrough) node = /* @__PURE__ */ jsx("s", { children: node });
+	if (annotations.underline) node = /* @__PURE__ */ jsx("u", {
+		className: "underline-offset-4 decoration-from-font",
+		children: node
+	});
+	const color = colorClass(annotations.color);
+	if (color) node = isBackgroundColor(annotations.color) ? /* @__PURE__ */ jsx("mark", {
+		className: cx("rounded-sm px-0.5 text-inherit box-decoration-clone", color),
+		children: node
+	}) : /* @__PURE__ */ jsx("span", {
+		className: color,
+		children: node
+	});
+	const link = resolveLink(item.href, context);
+	if (link) node = /* @__PURE__ */ jsx(NotionLink, {
+		link,
+		children: node
+	});
+	return node;
+}
+/** A Notion rich text array: annotations, colors, links and mentions. */
+function RichText({ text, context }) {
+	return text.map((item, i) => /* @__PURE__ */ jsx(RichTextItem, {
+		item,
+		context
+	}, i));
+}
+//#endregion
+//#region src/blocks/code.tsx
+const LANGUAGE_NAMES = {
+	"c#": "C#",
+	"c++": "C++",
+	coffeescript: "CoffeeScript",
+	css: "CSS",
+	glsl: "GLSL",
+	graphql: "GraphQL",
+	html: "HTML",
+	javascript: "JavaScript",
+	json: "JSON",
+	latex: "LaTeX",
+	"objective-c": "Objective-C",
+	ocaml: "OCaml",
+	php: "PHP",
+	powershell: "PowerShell",
+	scss: "SCSS",
+	sql: "SQL",
+	typescript: "TypeScript",
+	vb: "VB",
+	"vb.net": "VB.NET",
+	webassembly: "WebAssembly",
+	xml: "XML",
+	yaml: "YAML"
+};
+/** A Notion code language as people write it: "typescript" is "TypeScript". */
+function languageName(language) {
+	return LANGUAGE_NAMES[language] ?? language.charAt(0).toUpperCase() + language.slice(1);
+}
+/**
+* Plain code, no highlighting. For syntax highlighting and a copy button,
+* install the shadcn version: `npx shadcn add @notionic/notion-code`.
+*/
+function Code({ block, context }) {
+	const { language, rich_text, caption } = block.code;
+	const code = plainText(rich_text);
+	const name = languageName(language);
+	return /* @__PURE__ */ jsxs("figure", {
+		className: "overflow-hidden rounded-lg border border-border bg-muted",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "border-b border-border px-4 py-2 text-xs text-muted-foreground",
+				children: name
+			}),
+			/* @__PURE__ */ jsx("pre", {
+				tabIndex: 0,
+				"aria-label": `Code, ${name}`,
+				className: "overflow-x-auto px-4 py-3 font-mono text-[0.8125rem] leading-relaxed focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring",
+				children: /* @__PURE__ */ jsx("code", { children: code })
+			}),
+			caption.length > 0 ? /* @__PURE__ */ jsx("figcaption", {
+				className: "border-t border-border px-4 py-2 text-sm text-muted-foreground",
+				children: /* @__PURE__ */ jsx(RichText, {
+					text: caption,
+					context
+				})
+			}) : null
+		]
+	});
+}
+//#endregion
+//#region src/blocks/disclosure.tsx
+/**
+* The chevron of a disclosure (toggle, toggleable heading): one line tall, so
+* it lines up with the first line of text, and rotated while open. Put it in a
+* `<summary>` inside a `<details className="group/toggle">`.
+*/
+function DisclosureChevron() {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: "flex h-[1lh] shrink-0 items-center text-muted-foreground",
+		children: /* @__PURE__ */ jsx("svg", {
+			"aria-hidden": "true",
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			className: "size-4 transition-transform duration-150 ease-out group-open/toggle:rotate-90 motion-reduce:transition-none",
+			children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+		})
+	});
+}
+/** Summary classes: a row with the chevron, and no native marker. */
+const SUMMARY_CLASSES = "flex cursor-pointer list-none gap-1.5 rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring [&::-webkit-details-marker]:hidden";
+/**
+* `<details>` classes: the content grows from zero height and fades in, and
+* shrinks back when closed. Browsers without `::details-content` or
+* `interpolate-size` open instantly; reduced motion keeps only the fade.
+*/
+const DISCLOSURE_CLASSES = "[interpolate-size:allow-keywords] details-content:h-0 details-content:overflow-x-visible details-content:overflow-y-clip details-content:opacity-0 details-content:transition-[height,opacity,content-visibility] details-content:transition-discrete details-content:duration-200 details-content:ease-[cubic-bezier(0.23,1,0.32,1)] open:details-content:h-auto open:details-content:opacity-100 motion-reduce:details-content:transition-[opacity,content-visibility]";
+/** Indent for a disclosure's content: the chevron's width plus the gap, so it lines up with the summary's text. */
+const DISCLOSURE_CONTENT_INDENT = "ps-5.5";
+//#endregion
+//#region src/blocks/heading.tsx
+const LEVELS$1 = {
+	heading_1: {
+		Tag: "h2",
+		className: "mt-6 text-2xl leading-tight font-semibold tracking-tight"
+	},
+	heading_2: {
+		Tag: "h3",
+		className: "mt-4 text-xl leading-tight font-semibold tracking-tight"
+	},
+	heading_3: {
+		Tag: "h4",
+		className: "mt-4 text-lg leading-snug font-semibold tracking-tight"
+	},
+	heading_4: {
+		Tag: "h5",
+		className: "mt-4 text-base leading-snug font-semibold"
+	}
+};
+const ANCHOR = "relative ms-2 rounded-sm text-muted-foreground no-underline opacity-0 transition-opacity duration-150 ease-out group-hover:opacity-100 focus-visible:transition-none focus-visible:opacity-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring pointer-coarse:text-[0.75em] pointer-coarse:font-normal pointer-coarse:opacity-100 after:absolute after:-inset-2 after:content-['']";
+function Heading({ block, context, children }) {
+	const data = block.type === "heading_1" ? block.heading_1 : block.type === "heading_2" ? block.heading_2 : block.type === "heading_3" ? block.heading_3 : block.heading_4;
+	const text = plainText(data.rich_text);
+	const id = context.headings.find((heading) => heading.blockId === block.id)?.id;
+	if (!id) return children ?? null;
+	const { Tag, className } = LEVELS$1[block.type];
+	const heading = /* @__PURE__ */ jsx(Tag, {
+		id,
+		className: "inline scroll-mt-8",
+		children: /* @__PURE__ */ jsx(RichText, {
+			text: data.rich_text,
+			context
+		})
+	});
+	if (data.is_toggleable) return /* @__PURE__ */ jsxs("details", {
+		className: cx("group/toggle text-balance [hr+&]:mt-0", DISCLOSURE_CLASSES, className),
+		children: [/* @__PURE__ */ jsxs("summary", {
+			className: cx(SUMMARY_CLASSES, blockColorClass(data.color)),
+			children: [/* @__PURE__ */ jsx(DisclosureChevron, {}), heading]
+		}), children ? /* @__PURE__ */ jsx("div", {
+			className: cx("mt-2 flex flex-col gap-4 text-base leading-[1.6] font-normal tracking-normal text-wrap", DISCLOSURE_CONTENT_INDENT),
+			children
+		}) : null]
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		className: cx("group text-balance [hr+&]:mt-0", className, blockColorClass(data.color)),
+		children: [heading, /* @__PURE__ */ jsx("a", {
+			href: `#${id}`,
+			"aria-label": `Link to section: ${text}`,
+			className: ANCHOR,
+			children: /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				children: "#"
+			})
+		})]
+	}), children] });
+}
+//#endregion
+//#region src/blocks/layout.tsx
+function Toggle({ block, context, children }) {
+	const { rich_text, color } = block.toggle;
+	return /* @__PURE__ */ jsxs("details", {
+		className: cx("group/toggle", DISCLOSURE_CLASSES, blockColorClass(color)),
+		children: [/* @__PURE__ */ jsxs("summary", {
+			className: SUMMARY_CLASSES,
+			children: [/* @__PURE__ */ jsx(DisclosureChevron, {}), /* @__PURE__ */ jsx("span", {
+				className: "min-w-0",
+				children: /* @__PURE__ */ jsx(RichText, {
+					text: rich_text,
+					context
+				})
+			})]
+		}), children ? /* @__PURE__ */ jsx("div", {
+			className: cx("mt-2 flex flex-col gap-4", DISCLOSURE_CONTENT_INDENT),
+			children
+		}) : null]
+	});
+}
+/**
+* Columns sit side by side once the space they're in is 36rem wide, whatever
+* the screen: a renderer in a sidebar or card stacks them. The container is a
+* wrapper inside the block flow, where its width is always defined; on the
+* renderer's root, size containment would collapse it inside a flex row.
+*/
+function ColumnList({ children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "@container",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col gap-4 @xl:flex-row @xl:gap-6",
+			children
+		})
+	});
+}
+function Column({ block, children }) {
+	const ratio = block.column.width_ratio;
+	return /* @__PURE__ */ jsx("div", {
+		className: cx("flex min-w-0 flex-col gap-4", !ratio && "@xl:flex-1"),
+		style: ratio ? { flex: `${ratio} 1 0%` } : void 0,
+		children
+	});
+}
+/** Synced blocks: their content flows into the page. */
+function SyncedBlock({ children }) {
+	return children ?? null;
+}
+//#endregion
+//#region src/blocks/list.tsx
+function Nested({ children, className }) {
+	return children ? /* @__PURE__ */ jsx("div", {
+		className: cx("mt-2 flex flex-col gap-2", className),
+		children
+	}) : null;
+}
+function BulletedListItem({ block, context, children }) {
+	const { rich_text, color } = block.bulleted_list_item;
+	return /* @__PURE__ */ jsxs("li", {
+		className: blockColorClass(color),
+		children: [/* @__PURE__ */ jsx(RichText, {
+			text: rich_text,
+			context
+		}), /* @__PURE__ */ jsx(Nested, { children })]
+	});
+}
+function NumberedListItem({ block, context, children }) {
+	const { rich_text, color } = block.numbered_list_item;
+	return /* @__PURE__ */ jsxs("li", {
+		className: blockColorClass(color),
+		children: [/* @__PURE__ */ jsx(RichText, {
+			text: rich_text,
+			context
+		}), /* @__PURE__ */ jsx(Nested, { children })]
+	});
+}
+function ToDo({ block, context, children }) {
+	const { rich_text, checked, color } = block.to_do;
+	const text = /* @__PURE__ */ jsx(RichText, {
+		text: rich_text,
+		context
+	});
+	return /* @__PURE__ */ jsxs("li", {
+		className: blockColorClass(color),
+		children: [/* @__PURE__ */ jsxs("label", {
+			className: "flex items-start gap-2",
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: "relative flex h-[1lh] shrink-0 items-center",
+				children: [/* @__PURE__ */ jsx("input", {
+					type: "checkbox",
+					checked,
+					disabled: true,
+					readOnly: true,
+					className: "peer size-4 appearance-none rounded-[4px] border border-muted-foreground/80 bg-background checked:border-primary checked:bg-primary"
+				}), /* @__PURE__ */ jsx("svg", {
+					"aria-hidden": "true",
+					viewBox: "0 0 24 24",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "3",
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					className: "pointer-events-none absolute inset-x-0.5 size-3 text-primary-foreground opacity-0 peer-checked:opacity-100",
+					children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+				})]
+			}), /* @__PURE__ */ jsx("span", {
+				className: cx(checked && "text-muted-foreground line-through"),
+				children: text
+			})]
+		}), /* @__PURE__ */ jsx(Nested, {
+			className: "ps-6",
+			children
+		})]
+	});
+}
+//#endregion
+//#region src/demos.ts
+/**
+* The demo an embed URL names, or null. A URL names a demo when its path ends
+* in `/demos/<name>` and `<name>` is one of `demos`. Only the path counts, so
+* the same embed works on localhost, previews and production.
+*/
+function matchDemo(url, demos) {
+	if (!demos) return null;
+	let parsed;
+	let name;
+	try {
+		parsed = new URL(url);
+		const segments = parsed.pathname.split("/").filter(Boolean);
+		if (segments.length < 2 || segments[segments.length - 2] !== "demos") return null;
+		name = decodeURIComponent(segments[segments.length - 1] ?? "");
+	} catch {
+		return null;
+	}
+	if (!Object.hasOwn(demos, name)) return null;
+	const Component = demos[name];
+	if (!Component) return null;
+	return {
+		name,
+		params: Object.fromEntries(parsed.searchParams),
+		Component
+	};
+}
+//#endregion
+//#region src/blocks/icon.tsx
+const BROKEN_IMAGE = "relative before:absolute before:inset-0 before:rounded-[inherit] before:bg-muted before:content-['']";
+/**
+* A Notion icon (an emoji, a custom emoji or an image) in a fixed slot one
+* line tall, so it centers on the first line of the text beside it and the
+* text starts at the same place whatever the icon. Without an icon, the
+* fallback, or nothing.
+*/
+function IconSlot({ icon, blockId, context, fallback }) {
+	const url = icon?.type === "custom_emoji" ? icon.custom_emoji.url : icon?.type === "emoji" ? null : resolveFileUrl(icon, blockId, context);
+	const content = icon?.type === "emoji" ? icon.emoji : url ? /* @__PURE__ */ jsx("img", {
+		src: url,
+		alt: "",
+		className: cx("size-5 rounded-sm object-contain", BROKEN_IMAGE)
+	}) : fallback;
+	if (!content) return null;
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: "flex h-[1lh] w-5 shrink-0 items-center justify-center",
+		children: content
+	});
+}
+//#endregion
+//#region src/blocks/media.tsx
+/** An http(s) URL, or a same-site path such as a file proxy route. */
+function isUrl(url) {
+	if (/^\/(?![/\\])/.test(url)) return true;
+	try {
+		const { protocol } = new URL(url);
+		return protocol === "http:" || protocol === "https:";
+	} catch {
+		return false;
+	}
+}
+function Caption({ caption, context }) {
+	if (caption.length === 0) return null;
+	return /* @__PURE__ */ jsx("figcaption", {
+		className: "mt-2 text-sm text-muted-foreground",
+		children: /* @__PURE__ */ jsx(RichText, {
+			text: caption,
+			context
+		})
+	});
+}
+/** A line linking to a URL, labelled by the caption or the URL itself. */
+function UrlLine({ url, label, context }) {
+	const link = resolveLink(url, context);
+	if (!link) return null;
+	return /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx(NotionLink, {
+		link,
+		children: label || url
+	}) });
+}
+function Image({ block, context }) {
+	const src = resolveFileUrl(block.image, block.id, context);
+	if (!src || !isUrl(src)) return null;
+	return /* @__PURE__ */ jsxs("figure", { children: [/* @__PURE__ */ jsx("img", {
+		src,
+		alt: plainText(block.image.caption),
+		loading: "lazy",
+		decoding: "async",
+		className: cx("h-auto max-w-full", MEDIA_OUTLINE)
+	}), /* @__PURE__ */ jsx(Caption, {
+		caption: block.image.caption,
+		context
+	})] });
+}
+const MEDIA_OUTLINE = "rounded-lg outline outline-1 -outline-offset-1 outline-(--notionic-image-outline)";
+const MEDIA_SURFACE = `${MEDIA_OUTLINE} bg-muted`;
+const VIDEO_FILE = /\.(mp4|webm|mov|m4v|ogv)$/i;
+function isVideoFile(url) {
+	try {
+		return VIDEO_FILE.test(new URL(url).pathname);
+	} catch {
+		return false;
+	}
+}
+/** The embed URL for a YouTube link, or null. */
+function youTubeEmbedUrl(url) {
+	let parsed;
+	try {
+		parsed = new URL(url);
+	} catch {
+		return null;
+	}
+	const host = parsed.hostname.replace(/^(www\.|m\.)/, "");
+	let id = null;
+	if (host === "youtu.be") id = parsed.pathname.slice(1);
+	else if (host === "youtube.com" || host === "youtube-nocookie.com") id = parsed.searchParams.get("v") ?? parsed.pathname.match(/^\/(?:embed|shorts|live)\/([^/]+)/)?.[1] ?? null;
+	return id && /^[\w-]{6,}$/.test(id) ? `https://www.youtube-nocookie.com/embed/${id}` : null;
+}
+function Video({ block, context }) {
+	const src = resolveFileUrl(block.video, block.id, context) ?? "";
+	const caption = block.video.caption;
+	const label = plainText(caption);
+	const embed = youTubeEmbedUrl(src);
+	if (embed) return /* @__PURE__ */ jsxs("figure", { children: [/* @__PURE__ */ jsx("iframe", {
+		src: embed,
+		title: label || "YouTube video",
+		allow: "accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
+		referrerPolicy: "strict-origin-when-cross-origin",
+		allowFullScreen: true,
+		loading: "lazy",
+		className: cx("aspect-video w-full", MEDIA_SURFACE)
+	}), /* @__PURE__ */ jsx(Caption, {
+		caption,
+		context
+	})] });
+	if (isUrl(src) && (block.video.type === "file" || isVideoFile(src))) return /* @__PURE__ */ jsxs("figure", { children: [/* @__PURE__ */ jsx("video", {
+		src,
+		controls: true,
+		preload: "metadata",
+		"aria-label": label || "Video",
+		className: cx("w-full", MEDIA_SURFACE)
+	}), /* @__PURE__ */ jsx(Caption, {
+		caption,
+		context
+	})] });
+	return /* @__PURE__ */ jsx(UrlLine, {
+		url: src,
+		label,
+		context
+	});
+}
+function Audio({ block, context }) {
+	const src = resolveFileUrl(block.audio, block.id, context);
+	if (!src || !isUrl(src)) return null;
+	return /* @__PURE__ */ jsxs("figure", { children: [/* @__PURE__ */ jsx("audio", {
+		src,
+		controls: true,
+		preload: "metadata",
+		"aria-label": plainText(block.audio.caption) || "Audio",
+		className: "w-full"
+	}), /* @__PURE__ */ jsx(Caption, {
+		caption: block.audio.caption,
+		context
+	})] });
+}
+/** The extension of a file name or URL path, upper-cased ("report.pdf" is "PDF"), or null. */
+function fileExtension(name) {
+	const match = name.match(/\.([a-z0-9]{1,8})$/i);
+	return match?.[1] ? match[1].toUpperCase() : null;
+}
+/** The last segment of a URL's path, decoded: "…/files/report.pdf?X=1" is "report.pdf". */
+function fileNameFromUrl(url) {
+	try {
+		return decodeURIComponent(new URL(url, "https://notionic.dev").pathname.split("/").pop() ?? "");
+	} catch {
+		return "";
+	}
+}
+/** The URL Notion gave for a file, before `transformFileUrl`. */
+function sourceUrl(file) {
+	return "external" in file ? file.external.url : file.file.url;
+}
+/** A URL without its protocol, `www.` or a trailing slash: "github.com/vercel/next.js". */
+function displayUrl(url) {
+	return url.replace(/^https?:\/\/(www\.)?/, "").replace(/\/$/, "");
+}
+/**
+* A link as a one-line bordered row: an icon, a title that truncates (the full
+* title as a tooltip), an optional detail at the end, and the caption below.
+*/
+function CardRow({ url, title, icon, detail, caption, context }) {
+	const link = resolveLink(url, context);
+	if (!link) return null;
+	return /* @__PURE__ */ jsxs("figure", { children: [/* @__PURE__ */ jsxs("a", {
+		href: link.href,
+		title,
+		...link.external ? {
+			target: "_blank",
+			rel: "noopener noreferrer"
+		} : {},
+		className: "flex items-center gap-3 rounded-lg border border-border px-3 py-2.5 transition-[background-color,scale] hover:bg-muted/50 active:scale-[0.99] motion-reduce:active:scale-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
+		children: [
+			/* @__PURE__ */ jsx("svg", {
+				"aria-hidden": "true",
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				className: "size-5 shrink-0 text-muted-foreground",
+				children: icon
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "min-w-0 flex-1 truncate font-medium",
+				children: title
+			}),
+			detail ? /* @__PURE__ */ jsx("span", {
+				className: "shrink-0 text-xs text-muted-foreground",
+				children: detail
+			}) : null,
+			link.external ? /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: " (opens in a new tab)"
+			}) : null
+		]
+	}), /* @__PURE__ */ jsx(Caption, {
+		caption,
+		context
+	})] });
+}
+const FILE_ICON = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }), /* @__PURE__ */ jsx("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" })] });
+const LINK_ICON = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }), /* @__PURE__ */ jsx("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })] });
+const EMBED_ICON = /* @__PURE__ */ jsxs(Fragment, { children: [
+	/* @__PURE__ */ jsx("rect", {
+		width: "20",
+		height: "16",
+		x: "2",
+		y: "4",
+		rx: "2"
+	}),
+	/* @__PURE__ */ jsx("path", { d: "M10 4v4" }),
+	/* @__PURE__ */ jsx("path", { d: "M2 8h20" }),
+	/* @__PURE__ */ jsx("path", { d: "M6 4v4" })
+] });
+/** A file as a card: its name, its type ("PDF"), and the caption below. */
+function FileCard({ url, name, caption, context }) {
+	return /* @__PURE__ */ jsx(CardRow, {
+		url,
+		title: name || url,
+		icon: FILE_ICON,
+		detail: fileExtension(name),
+		caption,
+		context
+	});
+}
+function File({ block, context }) {
+	return /* @__PURE__ */ jsx(FileCard, {
+		url: resolveFileUrl(block.file, block.id, context) ?? "",
+		name: block.file.name || fileNameFromUrl(sourceUrl(block.file)),
+		caption: block.file.caption,
+		context
+	});
+}
+function Pdf({ block, context }) {
+	return /* @__PURE__ */ jsx(FileCard, {
+		url: resolveFileUrl(block.pdf, block.id, context) ?? "",
+		name: fileNameFromUrl(sourceUrl(block.pdf)),
+		caption: block.pdf.caption,
+		context
+	});
+}
+function Bookmark({ block, context }) {
+	const { url, caption } = block.bookmark;
+	return /* @__PURE__ */ jsx(PreviewCard, {
+		url,
+		preview: block.bookmarkPreview,
+		icon: LINK_ICON,
+		caption,
+		context
+	});
+}
+/**
+* A link with the linked page's title, description and image, as in Notion's
+* bookmarks: the image sits on the right, or on top when the card is narrow (a
+* phone, a column). Without a preview from `fetchBlocks` (none fetched, or the
+* page had no title), a one-line card.
+*/
+function PreviewCard({ url, preview, icon, caption, context }) {
+	const link = resolveLink(url, context);
+	if (!preview || !link) return /* @__PURE__ */ jsx(CardRow, {
+		url,
+		title: displayUrl(url),
+		icon,
+		caption,
+		context
+	});
+	return /* @__PURE__ */ jsxs("figure", {
+		className: "@container",
+		children: [/* @__PURE__ */ jsxs("a", {
+			href: link.href,
+			...link.external ? {
+				target: "_blank",
+				rel: "noopener noreferrer"
+			} : {},
+			className: "flex flex-col-reverse overflow-hidden rounded-lg border border-border transition-[background-color,scale] @md:min-h-26 @md:flex-row hover:bg-muted/50 active:scale-[0.99] motion-reduce:active:scale-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
+			children: [
+				/* @__PURE__ */ jsxs("span", {
+					className: "flex min-w-0 flex-1 flex-col gap-1 p-3.5",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "line-clamp-2 text-sm font-medium @md:line-clamp-1",
+							children: preview.title
+						}),
+						preview.description ? /* @__PURE__ */ jsx("span", {
+							className: "line-clamp-2 text-xs text-muted-foreground",
+							children: preview.description
+						}) : null,
+						/* @__PURE__ */ jsxs("span", {
+							className: "mt-auto flex min-w-0 items-center gap-1.5 pt-1.5 text-xs text-muted-foreground",
+							children: [preview.favicon ? /* @__PURE__ */ jsx("img", {
+								src: preview.favicon,
+								alt: "",
+								width: 16,
+								height: 16,
+								loading: "lazy",
+								referrerPolicy: "no-referrer",
+								className: cx("size-4 shrink-0 rounded-sm", BROKEN_IMAGE)
+							}) : null, /* @__PURE__ */ jsx("span", {
+								className: "truncate",
+								children: displayUrl(url)
+							})]
+						})
+					]
+				}),
+				preview.image ? /* @__PURE__ */ jsx("img", {
+					src: preview.image,
+					alt: "",
+					loading: "lazy",
+					decoding: "async",
+					referrerPolicy: "no-referrer",
+					className: cx("aspect-[1.91/1] w-full border-b border-border bg-muted object-cover @md:aspect-auto @md:w-1/3 @md:max-w-60 @md:shrink-0 @md:border-b-0 @md:border-s", BROKEN_IMAGE)
+				}) : null,
+				link.external ? /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: " (opens in a new tab)"
+				}) : null
+			]
+		}), /* @__PURE__ */ jsx(Caption, {
+			caption,
+			context
+		})]
+	});
+}
+/** The default frame around a demo: a bordered stage with the caption below. */
+function DemoFrame({ caption, context, children }) {
+	return /* @__PURE__ */ jsxs("figure", { children: [/* @__PURE__ */ jsx("div", {
+		className: "flex min-h-48 flex-col items-center justify-center gap-6 overflow-hidden rounded-xl border border-border px-6 py-10",
+		children
+	}), caption.length ? /* @__PURE__ */ jsx("figcaption", {
+		className: "mt-3 text-center text-sm text-muted-foreground",
+		children: /* @__PURE__ */ jsx(RichText, {
+			text: caption,
+			context
+		})
+	}) : null] });
+}
+/**
+* An embed, as a preview card linking to it: embedding any site in an iframe
+* is unsafe, and most refuse it. An embed of `…/demos/<name>` whose name is one of
+* `demos` renders that demo component instead, in the `demo` frame.
+*/
+function Embed({ block, context }) {
+	const demo = matchDemo(block.embed.url, context.demos);
+	if (demo) {
+		const Frame = context.components.demo ?? DemoFrame;
+		return /* @__PURE__ */ jsx(Frame, {
+			name: demo.name,
+			caption: block.embed.caption,
+			context,
+			children: /* @__PURE__ */ jsx(demo.Component, {
+				name: demo.name,
+				params: demo.params
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(PreviewCard, {
+		url: block.embed.url,
+		preview: block.bookmarkPreview,
+		icon: EMBED_ICON,
+		caption: block.embed.caption,
+		context
+	});
+}
+function LinkPreview({ block, context }) {
+	return /* @__PURE__ */ jsx(PreviewCard, {
+		url: block.link_preview.url,
+		preview: block.bookmarkPreview,
+		icon: LINK_ICON,
+		caption: [],
+		context
+	});
+}
+const PAGE_ICON = /* @__PURE__ */ jsx("svg", {
+	"aria-hidden": "true",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "1.5",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	className: "size-5 text-muted-foreground",
+	children: FILE_ICON
+});
+/**
+* A page as a row: its icon (or a page icon), then its title. Rows that
+* follow each other sit close together, like a list of subpages in Notion.
+*/
+function PageRow({ pageId, title, icon, blockId, context }) {
+	const link = resolvePageLink(pageId, context);
+	const row = "flex flex-1 gap-2 rounded-md px-2 py-1";
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(IconSlot, {
+		icon,
+		blockId,
+		context,
+		fallback: PAGE_ICON
+	}), /* @__PURE__ */ jsx("span", {
+		className: "min-w-0 font-medium underline decoration-muted-foreground/50 decoration-from-font underline-offset-4 transition-[text-decoration-color] group-hover:decoration-foreground",
+		children: title || "Untitled"
+	})] });
+	return /* @__PURE__ */ jsx("p", {
+		"data-page-row": "",
+		className: "-mx-2 flex [[data-page-row]+&]:-mt-3",
+		children: link ? /* @__PURE__ */ jsxs("a", {
+			href: link.href,
+			...link.external ? {
+				target: "_blank",
+				rel: "noopener noreferrer"
+			} : {},
+			className: cx("group transition-[background-color] hover:bg-muted/50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", row),
+			children: [content, link.external ? /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: " (opens in a new tab)"
+			}) : null]
+		}) : /* @__PURE__ */ jsx("span", {
+			className: row,
+			children: content
+		})
+	});
+}
+/** A subpage, with its icon when `fetchBlocks` attached it. */
+function ChildPage({ block, context }) {
+	return /* @__PURE__ */ jsx(PageRow, {
+		pageId: block.id,
+		title: block.child_page.title,
+		icon: block.linkedPage?.icon,
+		blockId: block.id,
+		context
+	});
+}
+/** A link to another page, titled by `fetchBlocks`. Without a title, nothing renders. */
+function LinkToPage({ block, context }) {
+	const page = block.linkedPage;
+	if (!page) return null;
+	return /* @__PURE__ */ jsx(PageRow, {
+		pageId: page.id,
+		title: page.title,
+		icon: page.icon,
+		blockId: block.id,
+		context
+	});
+}
+//#endregion
+//#region src/blocks/table.tsx
+const CELL = "max-w-64 border border-border px-4 py-2 text-start align-top";
+const HEADER_CELL = `${CELL} bg-muted font-semibold`;
+function cells(row) {
+	return row.type === "table_row" ? row.table_row.cells : [];
+}
+/** Renders its rows itself, from `block.children`. */
+function Table({ block, context }) {
+	const { has_column_header, has_row_header } = block.table;
+	const rows = (block.children ?? []).filter((row) => row.type === "table_row");
+	const [first, ...rest] = rows;
+	if (!first) return null;
+	const renderRow = (row, head) => /* @__PURE__ */ jsx("tr", { children: cells(row).map((cell, i) => head ? /* @__PURE__ */ jsx("th", {
+		scope: "col",
+		className: HEADER_CELL,
+		children: /* @__PURE__ */ jsx(RichText, {
+			text: cell,
+			context
+		})
+	}, i) : i === 0 && has_row_header ? /* @__PURE__ */ jsx("th", {
+		scope: "row",
+		className: HEADER_CELL,
+		children: /* @__PURE__ */ jsx(RichText, {
+			text: cell,
+			context
+		})
+	}, i) : /* @__PURE__ */ jsx("td", {
+		className: CELL,
+		children: /* @__PURE__ */ jsx(RichText, {
+			text: cell,
+			context
+		})
+	}, i)) }, row.id);
+	const columns = has_column_header ? cells(first).map((cell) => plainText(cell).trim()).filter(Boolean) : [];
+	return /* @__PURE__ */ jsx("div", {
+		role: "region",
+		"aria-label": columns.length > 0 ? `Table: ${columns.join(", ")}` : "Table",
+		tabIndex: 0,
+		className: "overflow-x-auto rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
+		children: /* @__PURE__ */ jsx("table", {
+			className: "w-max min-w-full border-collapse text-sm tabular-nums",
+			children: has_column_header ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("thead", { children: renderRow(first, true) }), /* @__PURE__ */ jsx("tbody", { children: rest.map((row) => renderRow(row, false)) })] }) : /* @__PURE__ */ jsx("tbody", { children: rows.map((row) => renderRow(row, false)) })
+		})
+	});
+}
+//#endregion
+//#region src/blocks/navigation.tsx
+const INDENT = [
+	"",
+	"ps-4",
+	"ps-8",
+	"ps-12"
+];
+/** Links to every heading on the page, indented by level. */
+function TableOfContents({ block, context }) {
+	const { headings } = context;
+	if (headings.length === 0) return null;
+	const top = Math.min(...headings.map((heading) => heading.level));
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": "Table of contents",
+		className: cx("text-sm", blockColorClass(block.table_of_contents.color)),
+		children: /* @__PURE__ */ jsx("ul", {
+			className: "flex flex-col",
+			children: headings.map((heading) => /* @__PURE__ */ jsx("li", {
+				className: INDENT[heading.level - top],
+				children: /* @__PURE__ */ jsx("a", {
+					href: `#${heading.id}`,
+					className: "block rounded-sm py-1 text-muted-foreground underline decoration-transparent underline-offset-4 transition-[color,text-decoration-color] duration-150 hover:text-foreground hover:decoration-current focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
+					children: heading.text
+				})
+			}, heading.blockId))
+		})
+	});
+}
+const SHOW_PANEL = [
+	"[&:has([data-tab='0']:checked)_[data-panel='0']]:flex",
+	"[&:has([data-tab='1']:checked)_[data-panel='1']]:flex",
+	"[&:has([data-tab='2']:checked)_[data-panel='2']]:flex",
+	"[&:has([data-tab='3']:checked)_[data-panel='3']]:flex",
+	"[&:has([data-tab='4']:checked)_[data-panel='4']]:flex",
+	"[&:has([data-tab='5']:checked)_[data-panel='5']]:flex",
+	"[&:has([data-tab='6']:checked)_[data-panel='6']]:flex",
+	"[&:has([data-tab='7']:checked)_[data-panel='7']]:flex",
+	"[&:has([data-tab='8']:checked)_[data-panel='8']]:flex",
+	"[&:has([data-tab='9']:checked)_[data-panel='9']]:flex",
+	"[&:has([data-tab='10']:checked)_[data-panel='10']]:flex",
+	"[&:has([data-tab='11']:checked)_[data-panel='11']]:flex",
+	"[&:has([data-tab='12']:checked)_[data-panel='12']]:flex",
+	"[&:has([data-tab='13']:checked)_[data-panel='13']]:flex",
+	"[&:has([data-tab='14']:checked)_[data-panel='14']]:flex",
+	"[&:has([data-tab='15']:checked)_[data-panel='15']]:flex",
+	"[&:has([data-tab='16']:checked)_[data-panel='16']]:flex",
+	"[&:has([data-tab='17']:checked)_[data-panel='17']]:flex",
+	"[&:has([data-tab='18']:checked)_[data-panel='18']]:flex",
+	"[&:has([data-tab='19']:checked)_[data-panel='19']]:flex"
+];
+/**
+* Notion tabs, with no JavaScript: each tab is a radio button drawn as a pill,
+* in a row that scrolls sideways when the tabs don't fit, and CSS shows the
+* panel of the checked one. The first tab starts selected. Radios give
+* keyboard support for free (arrow keys switch tabs), and screen readers
+* announce "pnpm, radio button, 2 of 3". Each tab is a paragraph (its title
+* and icon) whose children are the tab's content.
+*/
+function Tab({ block, context }) {
+	const tabs = (block.children ?? []).filter((child) => child.type === "paragraph").slice(0, SHOW_PANEL.length);
+	if (tabs.length === 0) return null;
+	const name = `notionic-tabs-${block.id}`;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx("group/tabs rounded-xl border border-border p-2", ...SHOW_PANEL.slice(0, tabs.length)),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "flex gap-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+			children: tabs.map((tab, index) => {
+				if (tab.type !== "paragraph") return null;
+				const { rich_text, icon } = tab.paragraph;
+				const id = `${name}-${index}`;
+				return /* @__PURE__ */ jsxs("span", {
+					className: "relative flex shrink-0",
+					children: [/* @__PURE__ */ jsx("input", {
+						type: "radio",
+						name,
+						id,
+						"data-tab": index,
+						defaultChecked: index === 0,
+						className: "pointer-events-none absolute inset-0 appearance-none opacity-0"
+					}), /* @__PURE__ */ jsxs("label", {
+						htmlFor: id,
+						className: "flex cursor-pointer items-center gap-2 rounded-lg px-3 py-1.5 font-medium whitespace-nowrap text-muted-foreground transition-[color,background-color] duration-150 hover:text-foreground motion-reduce:transition-none [:checked+&]:bg-muted [:checked+&]:text-foreground [:focus-visible+&]:outline-2 [:focus-visible+&]:-outline-offset-2 [:focus-visible+&]:outline-ring",
+						children: [icon?.type === "emoji" ? /* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							children: icon.emoji
+						}) : null, /* @__PURE__ */ jsx(RichText, {
+							text: rich_text,
+							context
+						})]
+					})]
+				}, tab.id);
+			})
+		}), tabs.map((tab, index) => /* @__PURE__ */ jsx("div", {
+			"data-panel": index,
+			className: "hidden flex-col gap-4 px-3 pt-3 pb-2 transition-opacity duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] group-focus-within/tabs:starting:opacity-0",
+			children: /* @__PURE__ */ jsx(BlockList, {
+				blocks: tab.children,
+				context
+			})
+		}, tab.id))]
+	});
+}
+//#endregion
+//#region src/blocks/text.tsx
+function Paragraph({ block, context, children }) {
+	const { rich_text, color } = block.paragraph;
+	const empty = rich_text.length === 0;
+	if (empty && !children) return null;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [empty ? null : /* @__PURE__ */ jsx("p", {
+		className: blockColorClass(color),
+		children: /* @__PURE__ */ jsx(RichText, {
+			text: rich_text,
+			context
+		})
+	}), children ? /* @__PURE__ */ jsx("div", {
+		className: "flex flex-col gap-4 ps-6",
+		children
+	}) : null] });
+}
+function Quote({ block, context, children }) {
+	const { rich_text, color } = block.quote;
+	return /* @__PURE__ */ jsxs("blockquote", {
+		className: cx("border-s-2 border-border ps-4 italic [&_em]:not-italic", colorClass(color), isBackgroundColor(color) && "rounded-e-md py-1 pe-3"),
+		children: [/* @__PURE__ */ jsx(RichText, {
+			text: rich_text,
+			context
+		}), children ? /* @__PURE__ */ jsx("div", {
+			className: "mt-4 flex flex-col gap-4",
+			children
+		}) : null]
+	});
+}
+function Callout({ block, context, children }) {
+	const { icon, rich_text, color } = block.callout;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx("flex gap-3 rounded-lg p-4", isBackgroundColor(color) ? cx("border border-transparent", colorClass(color)) : cx("border border-border bg-muted/50", colorClass(color))),
+		children: [/* @__PURE__ */ jsx(IconSlot, {
+			icon,
+			blockId: block.id,
+			context
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-1 flex-col gap-4",
+			children: [rich_text.length > 0 ? /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx(RichText, {
+				text: rich_text,
+				context
+			}) }) : null, children]
+		})]
+	});
+}
+function Divider(_) {
+	return /* @__PURE__ */ jsx("hr", { className: "my-4 border-border" });
+}
+/** An equation's LaTeX source. For formatted math, use `notion-equation` from the shadcn registry. */
+function Equation({ block }) {
+	return /* @__PURE__ */ jsx("figure", {
+		"aria-label": "Equation, LaTeX source",
+		className: "rounded-lg border border-border bg-muted px-4 py-3 font-mono text-[0.8125rem] leading-relaxed",
+		children: /* @__PURE__ */ jsx("code", { children: block.equation.expression })
+	});
+}
+/** An equation inside text, as its LaTeX source. */
+function InlineEquation({ expression }) {
+	return /* @__PURE__ */ jsx("code", {
+		className: CODE_CLASSES,
+		children: expression
+	});
+}
+//#endregion
+//#region src/slug.ts
+/** Lowercase, accent-free, hyphenated anchor id for a heading's text. */
+function slugify(text) {
+	return text.normalize("NFKD").replace(/[̀-ͯ]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "") || "section";
+}
+/** Slugs for one page: the first use is plain, repeats get -2, -3… */
+function createSlugger() {
+	const seen = /* @__PURE__ */ new Map();
+	return (text) => {
+		const slug = slugify(text);
+		const count = (seen.get(slug) ?? 0) + 1;
+		seen.set(slug, count);
+		return count === 1 ? slug : `${slug}-${count}`;
+	};
+}
+//#endregion
+//#region src/headings.ts
+const LEVELS = {
+	heading_1: 1,
+	heading_2: 2,
+	heading_3: 3,
+	heading_4: 4
+};
+/**
+* Every non-blank heading on the page, in reading order (headings nested in
+* toggles, columns and callouts included), with unique anchor ids. Use it for
+* a table of contents or a sidebar outline.
+*/
+function collectHeadings(blocks) {
+	const slug = createSlugger();
+	const headings = [];
+	const walk = (list) => {
+		for (const block of list) {
+			if (block.type === "heading_1" || block.type === "heading_2" || block.type === "heading_3" || block.type === "heading_4") {
+				const data = block.type === "heading_1" ? block.heading_1 : block.type === "heading_2" ? block.heading_2 : block.type === "heading_3" ? block.heading_3 : block.heading_4;
+				const text = plainText(data.rich_text).trim();
+				if (text) headings.push({
+					blockId: block.id,
+					id: slug(text),
+					text,
+					level: LEVELS[block.type]
+				});
+			}
+			if (block.children) walk(block.children);
+		}
+	};
+	walk(blocks);
+	return headings;
+}
+//#endregion
+//#region src/renderer.tsx
+const defaultComponents = {
+	paragraph: Paragraph,
+	heading_1: Heading,
+	heading_2: Heading,
+	heading_3: Heading,
+	heading_4: Heading,
+	bulleted_list_item: BulletedListItem,
+	numbered_list_item: NumberedListItem,
+	to_do: ToDo,
+	quote: Quote,
+	callout: Callout,
+	toggle: Toggle,
+	divider: Divider,
+	equation: Equation,
+	code: Code,
+	table: Table,
+	column_list: ColumnList,
+	column: Column,
+	synced_block: SyncedBlock,
+	image: Image,
+	video: Video,
+	audio: Audio,
+	file: File,
+	pdf: Pdf,
+	bookmark: Bookmark,
+	embed: Embed,
+	link_preview: LinkPreview,
+	child_page: ChildPage,
+	link_to_page: LinkToPage,
+	table_of_contents: TableOfContents,
+	tab: Tab,
+	inline_equation: InlineEquation
+};
+const LIST_KINDS = {
+	bulleted_list_item: "bulleted",
+	numbered_list_item: "numbered",
+	to_do: "todo"
+};
+/**
+* Merges consecutive list items of one kind into a group, since the API
+* returns each item as its own block. Other blocks stand alone.
+*/
+function groupBlocks(blocks) {
+	const groups = [];
+	for (const block of blocks) {
+		const kind = LIST_KINDS[block.type];
+		const last = groups[groups.length - 1];
+		if (!kind) groups.push({
+			kind: "block",
+			block
+		});
+		else if (last && last.kind === kind) last.items.push(block);
+		else groups.push({
+			kind,
+			items: [block]
+		});
+	}
+	return groups;
+}
+const NUMBER_FORMATS = {
+	numbers: "list-decimal",
+	letters: "list-[lower-alpha]",
+	roman: "list-[lower-roman]"
+};
+const NESTED_NUMBERS = "[&_[data-list=numbers]]:list-[lower-alpha] [&_[data-list=numbers]_[data-list=numbers]]:list-[lower-roman]";
+const NESTED_BULLETS = "[&_[data-list=bulleted]]:list-[circle] [&_[data-list=bulleted]_[data-list=bulleted]]:list-[square]";
+function List({ kind, items, context }) {
+	const rendered = items.map((item) => /* @__PURE__ */ jsx(Block, {
+		block: item,
+		context
+	}, item.id));
+	if (kind === "numbered") {
+		const first = items[0].type === "numbered_list_item" ? items[0].numbered_list_item : void 0;
+		const format = first?.list_format ?? "numbers";
+		return /* @__PURE__ */ jsx("ol", {
+			start: first?.list_start_index,
+			"data-list": format,
+			className: cx("flex flex-col gap-2 ps-6", NUMBER_FORMATS[format], NESTED_NUMBERS),
+			children: rendered
+		});
+	}
+	return /* @__PURE__ */ jsx("ul", {
+		"data-list": kind,
+		className: cx("flex flex-col gap-2", kind === "bulleted" ? cx("list-disc ps-6 marker:text-muted-foreground", NESTED_BULLETS) : "list-none"),
+		children: rendered
+	});
+}
+/** Blocks in order, with list items grouped into lists. */
+function BlockList({ blocks, context }) {
+	if (!blocks?.length) return null;
+	return groupBlocks(blocks).map((group) => group.kind === "block" ? /* @__PURE__ */ jsx(Block, {
+		block: group.block,
+		context
+	}, group.block.id) : /* @__PURE__ */ jsx(List, {
+		kind: group.kind,
+		items: group.items,
+		context
+	}, group.items[0].id));
+}
+/** One block, rendered by its component, with its nested blocks as children. */
+function Block({ block, context }) {
+	const Component = context.components[block.type];
+	if (!Component) {
+		warnOnce(`Notion block type "${block.type}" is not rendered`);
+		return null;
+	}
+	const children = block.children?.length ? /* @__PURE__ */ jsx(BlockList, {
+		blocks: block.children,
+		context
+	}) : void 0;
+	return /* @__PURE__ */ jsx(Component, {
+		block,
+		context,
+		children
+	});
+}
+/**
+* Renders Notion blocks. Works as a Server Component; it ships no client
+* JavaScript of its own (demos ship theirs).
+*/
+function NotionRenderer({ blocks, components, pageHref = defaultPageHref, transformFileUrl, demos, className }) {
+	const context = {
+		pageHref,
+		transformFileUrl,
+		demos,
+		headings: collectHeadings(blocks),
+		components: {
+			...defaultComponents,
+			...components
+		}
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: cx("notionic flex flex-col gap-4 leading-[1.6] wrap-break-word text-foreground", className),
+		children: /* @__PURE__ */ jsx(BlockList, {
+			blocks,
+			context
+		})
+	});
+}
+//#endregion
+export { Block, BlockList, DemoFrame, NotionLink, NotionRenderer, RichText, blockColorClass, collectHeadings, colorClass, defaultComponents, defaultPageHref, groupBlocks, languageName, normalizePageId, pageTitle, plainText, resolveFileUrl, resolveLink, resolvePageLink };