notion-to-jsx 0.0.0 → 0.2.0

package/dist/index.mjs

@@ -0,0 +1,740 @@
+// src/components/Renderer/index.tsx
+import React6, { useState as useState4, useMemo as useMemo2, useCallback } from "react";
+
+// src/components/Renderer/styles.css.ts
+var container = "styles_container__epva5u0";
+
+// src/components/Renderer/components/List/styles.css.ts
+import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
+var list = _7a468({ defaultClassName: "styles_list__es8vim0", variantClassNames: { type: { bulleted: "styles_list_type_bulleted__es8vim1", numbered: "styles_list_type_numbered__es8vim2" } }, defaultVariants: {}, compoundVariants: [] });
+var listItem = "styles_listItem__es8vim3";
+
+// src/components/Renderer/components/List/List.tsx
+import { jsx } from "react/jsx-runtime";
+var List = ({
+  as: Component = "ul",
+  type,
+  className,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(Component, { className: list({ type }), ...props, children });
+};
+var ListItem = ({
+  className,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx("li", { className: listItem, ...props, children });
+};
+
+// src/components/Renderer/components/MemoizedComponents.tsx
+import React4 from "react";
+
+// src/components/Renderer/components/RichText/styles.css.ts
+import { createRuntimeFn as _7a4682 } from "@vanilla-extract/recipes/createRuntimeFn";
+var link = "styles_link__fdf3tw7";
+var richText = _7a4682({ defaultClassName: "styles_richText__fdf3tw0", variantClassNames: { bold: { true: "styles_richText_bold_true__fdf3tw1" }, italic: { true: "styles_richText_italic_true__fdf3tw2" }, strikethrough: { true: "styles_richText_strikethrough_true__fdf3tw3" }, underline: { true: "styles_richText_underline_true__fdf3tw4" }, code: { true: "styles_richText_code_true__fdf3tw5" } }, defaultVariants: {}, compoundVariants: [[{ strikethrough: true, underline: true }, "styles_richText_compound_0__fdf3tw6"]] });
+
+// src/components/Renderer/components/RichText/RichTexts.tsx
+import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
+var RichTexts = ({ richTexts }) => {
+  return /* @__PURE__ */ jsx2(Fragment, { children: richTexts.map((text, index) => {
+    const { bold, italic, strikethrough, underline, code, color } = text.annotations;
+    const content3 = text.text.link ? /* @__PURE__ */ jsx2(
+      "a",
+      {
+        href: text.text.link,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: link,
+        children: text.text.content
+      }
+    ) : text.text.content;
+    return /* @__PURE__ */ jsx2(
+      "span",
+      {
+        className: richText({
+          bold,
+          italic,
+          strikethrough,
+          underline,
+          code
+        }),
+        children: content3
+      },
+      index
+    );
+  }) });
+};
+var RichTexts_default = RichTexts;
+
+// src/components/Renderer/components/Image/Image.tsx
+import { useState, useEffect } from "react";
+
+// src/components/Renderer/components/Image/styles.css.ts
+import { createRuntimeFn as _7a4683 } from "@vanilla-extract/recipes/createRuntimeFn";
+var caption = "styles_caption__2f3ncfc";
+var imageContainer = "styles_imageContainer__2f3ncf0";
+var imageWrapper = _7a4683({ defaultClassName: "styles_imageWrapper__2f3ncf3", variantClassNames: { hasWidth: { true: "styles_imageWrapper_hasWidth_true__2f3ncf4", false: "styles_imageWrapper_hasWidth_false__2f3ncf5" } }, defaultVariants: { hasWidth: false }, compoundVariants: [] });
+var placeholder = "styles_placeholder__2f3ncfb";
+var styledImage = _7a4683({ defaultClassName: "styles_styledImage__2f3ncf6", variantClassNames: { loaded: { true: "styles_styledImage_loaded_true__2f3ncf7", false: "styles_styledImage_loaded_false__2f3ncf8" }, hasAspectRatio: { true: "styles_styledImage_hasAspectRatio_true__2f3ncf9", false: "styles_styledImage_hasAspectRatio_false__2f3ncfa" } }, defaultVariants: { loaded: false, hasAspectRatio: false }, compoundVariants: [] });
+
+// src/components/Renderer/components/Image/Image.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var MAX_WIDTH = 720;
+var Image = ({
+  src,
+  alt,
+  caption: imageCaption,
+  priority = false,
+  format
+}) => {
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [error, setError] = useState(false);
+  useEffect(() => {
+    setIsLoaded(false);
+    setError(false);
+  }, [src]);
+  return /* @__PURE__ */ jsxs("figure", { className: imageContainer, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: imageWrapper({
+          hasWidth: !!format?.block_width
+        }),
+        style: format?.block_width ? {
+          width: format.block_width > MAX_WIDTH ? "100%" : `${format.block_width}px`
+        } : void 0,
+        children: [
+          !isLoaded && !error && /* @__PURE__ */ jsx3(
+            "div",
+            {
+              className: placeholder,
+              style: {
+                width: format?.block_width ? format.block_width > MAX_WIDTH ? "100%" : `${format.block_width}px` : "100%",
+                aspectRatio: format?.block_aspect_ratio ? `${format.block_aspect_ratio}` : "auto"
+              },
+              children: /* @__PURE__ */ jsx3(
+                "svg",
+                {
+                  width: "38",
+                  height: "38",
+                  viewBox: "0 0 38 38",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  stroke: "#888",
+                  children: /* @__PURE__ */ jsx3("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ jsxs("g", { transform: "translate(1 1)", strokeWidth: "2", children: [
+                    /* @__PURE__ */ jsx3("circle", { strokeOpacity: ".5", cx: "18", cy: "18", r: "18" }),
+                    /* @__PURE__ */ jsx3("path", { d: "M36 18c0-9.94-8.06-18-18-18", children: /* @__PURE__ */ jsx3(
+                      "animateTransform",
+                      {
+                        attributeName: "transform",
+                        type: "rotate",
+                        from: "0 18 18",
+                        to: "360 18 18",
+                        dur: "1s",
+                        repeatCount: "indefinite"
+                      }
+                    ) })
+                  ] }) })
+                }
+              )
+            }
+          ),
+          error && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: placeholder,
+              style: {
+                width: format?.block_width ? format.block_width > MAX_WIDTH ? "100%" : `${format.block_width}px` : "100%",
+                aspectRatio: format?.block_aspect_ratio ? `${format.block_aspect_ratio}` : "auto"
+              },
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "svg",
+                  {
+                    width: "48",
+                    height: "48",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    children: [
+                      /* @__PURE__ */ jsx3(
+                        "path",
+                        {
+                          d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z",
+                          stroke: "#FF6B6B",
+                          strokeWidth: "2",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx3(
+                        "path",
+                        {
+                          d: "M15 9L9 15",
+                          stroke: "#FF6B6B",
+                          strokeWidth: "2",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx3(
+                        "path",
+                        {
+                          d: "M9 9L15 15",
+                          stroke: "#FF6B6B",
+                          strokeWidth: "2",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx3("div", { style: { width: "10px" } }),
+                /* @__PURE__ */ jsx3("p", { style: { color: "#FF6B6B", fontSize: "14px" }, children: "Image Load failed" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx3(
+            "img",
+            {
+              className: styledImage({
+                loaded: isLoaded,
+                hasAspectRatio: !!format?.block_aspect_ratio
+              }),
+              src,
+              alt,
+              loading: priority ? "eager" : "lazy",
+              onLoad: () => setIsLoaded(true),
+              onError: () => setError(true),
+              width: format?.block_width,
+              height: format?.block_height,
+              style: format?.block_aspect_ratio ? { aspectRatio: `${format.block_aspect_ratio}` } : void 0
+            }
+          )
+        ]
+      }
+    ),
+    imageCaption && imageCaption.length > 0 && /* @__PURE__ */ jsx3("figcaption", { className: caption, children: /* @__PURE__ */ jsx3(MemoizedRichText, { richTexts: imageCaption }) })
+  ] });
+};
+var Image_default = Image;
+
+// src/components/Renderer/components/Bookmark/Bookmark.tsx
+import { useState as useState2, useEffect as useEffect2 } from "react";
+
+// src/components/Renderer/components/Bookmark/styles.css.ts
+var card = "styles_card__qrq8yf1";
+var content = "styles_content__qrq8yf2";
+var description = "styles_description__qrq8yf6";
+var favicon = "styles_favicon__qrq8yf8";
+var link2 = "styles_link__qrq8yf0";
+var previewContainer = "styles_previewContainer__qrq8yf3";
+var previewImage = "styles_previewImage__qrq8yf4";
+var siteName = "styles_siteName__qrq8yf7";
+var title = "styles_title__qrq8yf5";
+var urlText = "styles_urlText__qrq8yf9";
+
+// src/components/Renderer/components/Bookmark/Bookmark.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var fetchOpenGraphData = async (url) => {
+  try {
+    const apiUrl = `https://api.microlink.io/?url=${encodeURIComponent(url)}`;
+    const response = await fetch(apiUrl);
+    const data = await response.json();
+    if (!response.ok) {
+      throw new Error("Failed to fetch metadata");
+    }
+    const { status, data: metaData } = data;
+    if (status !== "success") {
+      throw new Error("API returned error status");
+    }
+    const parsedUrl = new URL(url);
+    const domain = parsedUrl.hostname;
+    return {
+      title: metaData.title || domain,
+      description: metaData.description || "No description available",
+      image: metaData.image?.url || "",
+      siteName: metaData.publisher || domain,
+      url: metaData.url || "",
+      favicon: metaData.logo?.url || `https://www.google.com/s2/favicons?domain=${domain}&sz=64`
+    };
+  } catch (error) {
+    console.error("Error fetching OpenGraph data:", error);
+    const parsedUrl = new URL(url);
+    const domain = parsedUrl.hostname;
+    return {
+      title: domain,
+      description: "No description available",
+      image: "",
+      url: "",
+      siteName: domain,
+      favicon: `https://www.google.com/s2/favicons?domain=${domain}&sz=64`
+    };
+  }
+};
+var Bookmark = ({ url }) => {
+  const [ogData, setOgData] = useState2(null);
+  const [error, setError] = useState2(false);
+  useEffect2(() => {
+    const loadOgData = async () => {
+      try {
+        const data = await fetchOpenGraphData(url);
+        setOgData(data);
+      } catch (err) {
+        setError(true);
+      }
+    };
+    loadOgData();
+  }, [url]);
+  return /* @__PURE__ */ jsx4("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: link2, children: /* @__PURE__ */ jsxs2("div", { className: card, children: [
+    /* @__PURE__ */ jsxs2("div", { className: content, children: [
+      /* @__PURE__ */ jsxs2("div", { children: [
+        /* @__PURE__ */ jsx4("h4", { className: title, children: ogData?.title || url }),
+        /* @__PURE__ */ jsx4("p", { className: description, children: ogData?.description || "" })
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { className: siteName, children: [
+        ogData?.favicon && /* @__PURE__ */ jsx4("img", { src: ogData.favicon, alt: "", className: favicon }),
+        /* @__PURE__ */ jsx4("span", { className: urlText, children: ogData?.url || "" })
+      ] })
+    ] }),
+    ogData?.image && /* @__PURE__ */ jsx4("div", { className: previewContainer, children: /* @__PURE__ */ jsx4(
+      "img",
+      {
+        className: previewImage,
+        src: ogData.image,
+        alt: ogData.title,
+        loading: "lazy",
+        onError: (e) => {
+          const target = e.target;
+          target.style.display = "none";
+        }
+      }
+    ) })
+  ] }) });
+};
+var Bookmark_default = Bookmark;
+
+// src/components/Renderer/components/LinkPreview/LinkPreview.tsx
+import { useState as useState3, useEffect as useEffect3 } from "react";
+
+// src/components/Renderer/components/LinkPreview/styles.css.ts
+var card2 = "styles_card__o1p3m11";
+var content2 = "styles_content__o1p3m12";
+var icon = "styles_icon__o1p3m14";
+var iconContainer = "styles_iconContainer__o1p3m13";
+var link3 = "styles_link__o1p3m10";
+var title2 = "styles_title__o1p3m15";
+var updatedText = "styles_updatedText__o1p3m16";
+
+// src/components/Renderer/components/LinkPreview/LinkPreview.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var fetchGitHubRepoData = async (repoPath) => {
+  try {
+    const apiUrl = `https://api.github.com/repos/${repoPath}`;
+    const response = await fetch(apiUrl);
+    if (!response.ok) {
+      throw new Error("Failed to fetch GitHub repo data");
+    }
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error("Error fetching GitHub repo data:", error);
+    return null;
+  }
+};
+var extractRepoPathFromUrl = (url) => {
+  try {
+    const parsedUrl = new URL(url);
+    if (parsedUrl.hostname === "github.com") {
+      const path = parsedUrl.pathname.substring(1);
+      const pathParts = path.split("/");
+      if (pathParts.length >= 2) {
+        return `${pathParts[0]}/${pathParts[1]}`;
+      }
+    }
+    return null;
+  } catch (error) {
+    console.error("Error parsing URL:", error);
+    return null;
+  }
+};
+var formatUpdatedTime = (dateString) => {
+  const date = new Date(dateString);
+  const now = /* @__PURE__ */ new Date();
+  const diffInHours = Math.floor(
+    (now.getTime() - date.getTime()) / (1e3 * 60 * 60)
+  );
+  if (diffInHours < 24) {
+    return `Updated ${diffInHours} hours ago`;
+  } else {
+    const diffInDays = Math.floor(diffInHours / 24);
+    if (diffInDays === 1) {
+      return "Updated yesterday";
+    } else if (diffInDays < 30) {
+      return `Updated ${diffInDays} days ago`;
+    } else {
+      const months = [
+        "Jan",
+        "Feb",
+        "Mar",
+        "Apr",
+        "May",
+        "Jun",
+        "Jul",
+        "Aug",
+        "Sep",
+        "Oct",
+        "Nov",
+        "Dec"
+      ];
+      return `Updated on ${months[date.getMonth()]} ${date.getDate()}, ${date.getFullYear()}`;
+    }
+  }
+};
+var LinkPreview = ({ url }) => {
+  const [repoData, setRepoData] = useState3(null);
+  const [loading, setLoading] = useState3(true);
+  useEffect3(() => {
+    const loadRepoData = async () => {
+      setLoading(true);
+      const repoPath = extractRepoPathFromUrl(url);
+      if (repoPath) {
+        const data = await fetchGitHubRepoData(repoPath);
+        setRepoData(data);
+      }
+      setLoading(false);
+    };
+    loadRepoData();
+  }, [url]);
+  const repoName = repoData?.name || extractRepoPathFromUrl(url)?.split("/")[1] || "Repository";
+  const updatedTimeText = repoData?.updated_at ? formatUpdatedTime(repoData.updated_at) : "";
+  return /* @__PURE__ */ jsx5("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: link3, children: /* @__PURE__ */ jsxs3("div", { className: card2, children: [
+    /* @__PURE__ */ jsx5("div", { className: iconContainer, children: /* @__PURE__ */ jsx5(
+      "img",
+      {
+        src: repoData?.owner?.avatar_url || "https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png",
+        alt: "Repository icon",
+        className: icon
+      }
+    ) }),
+    /* @__PURE__ */ jsxs3("div", { className: content2, children: [
+      /* @__PURE__ */ jsx5("div", { className: title2, children: repoName }),
+      /* @__PURE__ */ jsx5("div", { className: updatedText, children: loading ? "Loading..." : `NotionX \u2022 ${updatedTimeText}` })
+    ] })
+  ] }) });
+};
+var LinkPreview_default = LinkPreview;
+
+// src/components/Renderer/components/MemoizedComponents.tsx
+var MemoizedRichText = React4.memo(
+  RichTexts_default,
+  (prev, next) => {
+    return JSON.stringify(prev.richTexts) === JSON.stringify(next.richTexts);
+  }
+);
+var MemoizedImage = React4.memo(Image_default, (prev, next) => {
+  return prev.src === next.src && prev.alt === next.alt && JSON.stringify(prev.caption) === JSON.stringify(next.caption);
+});
+var MemoizedBookmark = React4.memo(
+  Bookmark_default,
+  (prev, next) => {
+    return prev.url === next.url;
+  }
+);
+var MemoizedLinkPreview = React4.memo(
+  LinkPreview_default,
+  (prev, next) => {
+    return prev.url === next.url;
+  }
+);
+
+// src/components/Renderer/components/List/ListBlocksRenderer.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var RecursiveListItem = ({ block, index }) => {
+  const blockProps = {
+    tabIndex: 0,
+    "data-block-id": block.id
+  };
+  const blockType = block.type;
+  const richTexts = block[blockType]?.rich_text;
+  return /* @__PURE__ */ jsxs4(ListItem, { ...blockProps, children: [
+    /* @__PURE__ */ jsx6(MemoizedRichText, { richTexts }),
+    block.children && block.children.length > 0 && /* @__PURE__ */ jsx6(
+      RecursiveListGroup,
+      {
+        blocks: block.children,
+        type: blockType.split("_")[0]
+      }
+    )
+  ] });
+};
+var RecursiveListGroup = ({ blocks, type }) => {
+  if (!blocks || blocks.length === 0) return null;
+  const listItems = blocks.filter(
+    (block) => block.type === `${type}_list_item`
+  );
+  if (listItems.length === 0) return null;
+  return /* @__PURE__ */ jsx6(
+    List,
+    {
+      as: type === "numbered" ? "ol" : "ul",
+      type,
+      role: "list",
+      "aria-label": type === "bulleted" ? "Bulleted list" : "Numbered list",
+      children: listItems.map((block, index) => /* @__PURE__ */ jsx6(RecursiveListItem, { block, index }, block.id))
+    }
+  );
+};
+var ListBlocksRenderer = ({ blocks, startIndex, type }) => {
+  let consecutiveItems = 0;
+  for (let i = startIndex; i < blocks.length; i++) {
+    const block = blocks[i];
+    if (!block) break;
+    if (block.type === `${type}_list_item`) {
+      consecutiveItems++;
+    } else {
+      break;
+    }
+  }
+  const listItems = blocks.slice(startIndex, startIndex + consecutiveItems);
+  return /* @__PURE__ */ jsx6(
+    List,
+    {
+      as: type === "numbered" ? "ol" : "ul",
+      type,
+      role: "list",
+      "aria-label": type === "bulleted" ? "Bulleted list" : "Numbered list",
+      children: listItems.map((block, index) => /* @__PURE__ */ jsx6(
+        RecursiveListItem,
+        {
+          block,
+          index: startIndex + index
+        },
+        block.id
+      ))
+    }
+  );
+};
+var ListBlocksRenderer_default = ListBlocksRenderer;
+
+// src/components/Renderer/components/Code/CodeBlock.tsx
+import { useMemo } from "react";
+
+// src/components/Renderer/components/Code/styles.css.ts
+var codeBlock = "styles_codeBlock__1qn42yc0";
+
+// src/components/Renderer/components/Code/CodeBlock.tsx
+import Prism from "prismjs";
+import "prismjs/themes/prism.css";
+import "prismjs/components/prism-typescript";
+import "prismjs/components/prism-javascript";
+import "prismjs/components/prism-jsx";
+import "prismjs/components/prism-tsx";
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+if (typeof window !== "undefined") {
+  window.Prism = Prism;
+}
+var CodeBlock = ({ code, language, caption: caption2 }) => {
+  const highlightedCode = useMemo(() => {
+    const prismLanguage = Prism.languages[language] || Prism.languages.plaintext;
+    return Prism.highlight(code, prismLanguage, language);
+  }, [code, language]);
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    /* @__PURE__ */ jsx7("pre", { className: codeBlock, children: /* @__PURE__ */ jsx7("code", { dangerouslySetInnerHTML: { __html: highlightedCode } }) }),
+    caption2 && /* @__PURE__ */ jsx7("figcaption", { children: /* @__PURE__ */ jsx7(MemoizedRichText, { richTexts: caption2 }) })
+  ] });
+};
+var CodeBlock_default = CodeBlock;
+
+// src/components/Renderer/components/Typography/styles.css.ts
+var heading1 = "styles_heading1__90a95g1";
+var heading2 = "styles_heading2__90a95g2";
+var heading3 = "styles_heading3__90a95g3";
+var paragraph = "styles_paragraph__90a95g0";
+
+// src/components/Renderer/components/Typography/Typography.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var Paragraph = ({
+  className,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx8("p", { className: paragraph, ...props, children });
+};
+var Heading1 = ({
+  className,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx8("h1", { className: heading1, ...props, children });
+};
+var Heading2 = ({
+  className,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx8("h2", { className: heading2, ...props, children });
+};
+var Heading3 = ({
+  className,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx8("h3", { className: heading3, ...props, children });
+};
+
+// src/components/Renderer/components/Block/BlockRenderer.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var BlockRenderer = ({ block, onFocus, index }) => {
+  if (!block) return null;
+  const blockProps = {
+    tabIndex: 0,
+    onFocus,
+    "data-block-id": block.id
+  };
+  switch (block.type) {
+    case "link_preview":
+      return /* @__PURE__ */ jsx9(
+        MemoizedLinkPreview,
+        {
+          url: block.link_preview.url,
+          ...blockProps
+        }
+      );
+    case "paragraph":
+      return /* @__PURE__ */ jsx9(Paragraph, { ...blockProps, children: /* @__PURE__ */ jsx9(MemoizedRichText, { richTexts: block.paragraph.rich_text }) });
+    case "heading_1":
+      return /* @__PURE__ */ jsx9(Heading1, { ...blockProps, children: /* @__PURE__ */ jsx9(MemoizedRichText, { richTexts: block.heading_1.rich_text }) });
+    case "heading_2":
+      return /* @__PURE__ */ jsx9(Heading2, { ...blockProps, children: /* @__PURE__ */ jsx9(MemoizedRichText, { richTexts: block.heading_2.rich_text }) });
+    case "heading_3":
+      return /* @__PURE__ */ jsx9(Heading3, { ...blockProps, children: /* @__PURE__ */ jsx9(MemoizedRichText, { richTexts: block.heading_3.rich_text }) });
+    case "code":
+      return /* @__PURE__ */ jsx9("div", { ...blockProps, children: /* @__PURE__ */ jsx9(
+        CodeBlock_default,
+        {
+          code: block.code.rich_text[0].text.content,
+          language: block.code.language,
+          caption: block.code.caption?.[0]?.plain_text
+        }
+      ) });
+    case "image":
+      return /* @__PURE__ */ jsx9("figure", { ...blockProps, children: /* @__PURE__ */ jsx9(
+        MemoizedImage,
+        {
+          src: block.image.file?.url || block.image.external?.url,
+          alt: block.image.caption?.[0]?.plain_text || "",
+          caption: block.image.caption,
+          format: block.image.format
+        }
+      ) });
+    case "bookmark":
+      return /* @__PURE__ */ jsx9(MemoizedBookmark, { url: block.bookmark.url });
+    default:
+      return null;
+  }
+};
+var BlockRenderer_default = BlockRenderer;
+
+// src/styles/theme.css.ts
+var darkTheme = "theme_darkTheme__sq3jkb15";
+var lightTheme = "theme_lightTheme__sq3jkb14";
+
+// src/components/Title/index.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var Title = ({ title: title3 }) => {
+  return /* @__PURE__ */ jsx10(Heading1, { children: title3 });
+};
+var Title_default = Title;
+
+// src/components/Cover/styles.css.ts
+var cover = "styles_cover__p0cp8d0";
+
+// src/components/Cover/index.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+var Cover = ({ src, alt }) => {
+  return /* @__PURE__ */ jsx11("img", { src, alt, className: cover });
+};
+var Cover_default = Cover;
+
+// src/components/Renderer/index.tsx
+import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+var Renderer = React6.memo(
+  ({ blocks, isDarkMode = false, title: title3, cover: cover2, onBlockFocus }) => {
+    const theme = isDarkMode ? darkTheme : lightTheme;
+    const [focusedIndex, setFocusedIndex] = useState4(-1);
+    const handleBlockFocus = useCallback(
+      (index) => {
+        setFocusedIndex(index);
+        onBlockFocus?.(index);
+      },
+      [onBlockFocus]
+    );
+    const renderedBlocks = useMemo2(() => {
+      const result = [];
+      for (let i = 0; i < blocks.length; i++) {
+        const block = blocks[i];
+        if (!block) break;
+        const handleListItem = (listType) => {
+          const listItemType = `${listType}_list_item`;
+          if (block.type === listItemType && (i === 0 || blocks[i - 1]?.type !== listItemType)) {
+            result.push(
+              /* @__PURE__ */ jsx12(
+                ListBlocksRenderer_default,
+                {
+                  blocks,
+                  startIndex: i,
+                  type: listType
+                },
+                block.id
+              )
+            );
+            while (i + 1 < blocks.length && blocks[i + 1] && blocks[i + 1]?.type === listItemType) {
+              i++;
+            }
+            return true;
+          }
+          return false;
+        };
+        if (handleListItem("bulleted") || handleListItem("numbered")) {
+          continue;
+        } else {
+          result.push(
+            /* @__PURE__ */ jsx12(
+              BlockRenderer_default,
+              {
+                block,
+                index: i,
+                onFocus: () => handleBlockFocus(i)
+              },
+              block.id
+            )
+          );
+        }
+      }
+      return result;
+    }, [blocks, handleBlockFocus]);
+    return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+      cover2 && /* @__PURE__ */ jsx12(Cover_default, { src: cover2, alt: title3 || "Notion page content" }),
+      /* @__PURE__ */ jsxs6(
+        "article",
+        {
+          className: `${theme} ${container}`,
+          "aria-label": title3 || "Notion page content",
+          children: [
+            title3 && /* @__PURE__ */ jsx12(Title_default, { title: title3 }),
+            renderedBlocks
+          ]
+        }
+      )
+    ] });
+  }
+);
+Renderer.displayName = "Renderer";
+export {
+  Renderer
+};
+//# sourceMappingURL=index.mjs.map