@qkix/better-blocks-react-renderer 0.18.0

package/dist/index.js

@@ -0,0 +1,1288 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  BlocksRenderer: () => BlocksRenderer
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/BlocksRenderer.tsx
+var import_react5 = require("react");
+var import_katex = __toESM(require("katex"));
+var import_better_blocks_core3 = require("@qkix/better-blocks-core");
+
+// src/media.ts
+var import_better_blocks_core = require("@qkix/better-blocks-core");
+var MEDIA_ALIGN_ITEMS = {
+  left: "flex-start",
+  center: "center",
+  right: "flex-end",
+  none: "stretch"
+};
+var MEDIA_MAX_WIDTH = "48rem";
+function getMediaFigureStyle(alignment) {
+  return {
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.5rem",
+    margin: "1rem 0",
+    alignItems: MEDIA_ALIGN_ITEMS[alignment]
+  };
+}
+function getMediaFrameStyle(alignment, aspectRatio) {
+  return {
+    width: "100%",
+    maxWidth: alignment === "none" ? "100%" : MEDIA_MAX_WIDTH,
+    aspectRatio
+  };
+}
+var MEDIA_CAPTION_STYLE = {
+  fontSize: "0.875rem",
+  color: "#6b7280"
+};
+
+// src/CodeBlock.tsx
+var import_react = require("react");
+
+// src/code.ts
+var import_better_blocks_core2 = require("@qkix/better-blocks-core");
+
+// src/CodeBlock.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var highlighters = /* @__PURE__ */ new Map();
+function loadHighlighter(theme, lang) {
+  let highlighter = highlighters.get(theme);
+  if (!highlighter) {
+    highlighter = import("shiki").then(
+      (shiki) => shiki.createHighlighter({ themes: [theme], langs: [lang] })
+    );
+    highlighters.set(theme, highlighter);
+    return highlighter;
+  }
+  return highlighter.then(async (instance) => {
+    if (!instance.getLoadedLanguages().includes(lang)) {
+      await instance.loadLanguage(lang);
+    }
+    return instance;
+  });
+}
+function CopyButton({ plainText }) {
+  const [copied, setCopied] = (0, import_react.useState)(false);
+  const timer = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    return () => {
+      if (timer.current) clearTimeout(timer.current);
+    };
+  }, []);
+  const handleCopy = () => {
+    if (!navigator.clipboard) return;
+    navigator.clipboard.writeText(plainText).then(() => {
+      setCopied(true);
+      if (timer.current) clearTimeout(timer.current);
+      timer.current = setTimeout(() => setCopied(false), 2e3);
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "bb-code-copy", type: "button", onClick: handleCopy, "aria-label": "Copy code", children: copied ? "Copied!" : "Copy" });
+}
+function CodeBlock({
+  plainText,
+  language,
+  theme,
+  copyButton
+}) {
+  const [html, setHtml] = (0, import_react.useState)(null);
+  (0, import_react.useEffect)(() => {
+    let cancelled = false;
+    setHtml(null);
+    if (!plainText) return;
+    const lang = (0, import_better_blocks_core2.normalizeCodeLang)(language);
+    loadHighlighter(theme, lang).then((highlighter) => highlighter.codeToHtml(plainText, { lang, theme })).then((highlighted) => {
+      if (!cancelled) setHtml(highlighted);
+    }).catch(() => {
+      if (!cancelled) setHtml(null);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [plainText, language, theme]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bb-code", children: [
+    html ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { dangerouslySetInnerHTML: { __html: html } }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", { className: "bb-code-pre", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { children: plainText }) }),
+    copyButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CopyButton, { plainText })
+  ] });
+}
+
+// src/MermaidDiagram.tsx
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var mermaidPromise = null;
+function loadMermaid() {
+  if (!mermaidPromise) {
+    mermaidPromise = import("mermaid").then((mod) => {
+      const mermaid = mod.default;
+      mermaid.initialize({ startOnLoad: false });
+      return mermaid;
+    });
+  }
+  return mermaidPromise;
+}
+var renderCount = 0;
+function MermaidDiagram({ value }) {
+  const [svg, setSvg] = (0, import_react2.useState)(null);
+  (0, import_react2.useEffect)(() => {
+    let cancelled = false;
+    setSvg(null);
+    if (!value) return;
+    loadMermaid().then((mermaid) => mermaid.render(`bb-mermaid-${renderCount++}`, value)).then(({ svg: svg2 }) => {
+      if (!cancelled) setSvg(svg2);
+    }).catch(() => {
+      if (!cancelled) setSvg(null);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [value]);
+  if (svg) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "mermaid-diagram", dangerouslySetInnerHTML: { __html: svg } });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("pre", { className: "mermaid-source", children: value });
+}
+
+// src/SocialEmbed.tsx
+var import_react3 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var socialWindow = () => window;
+var WIDGET_SCRIPTS = {
+  twitter: {
+    src: "https://platform.twitter.com/widgets.js",
+    process: () => {
+      var _a, _b;
+      const load = (_b = (_a = socialWindow().twttr) == null ? void 0 : _a.widgets) == null ? void 0 : _b.load;
+      load == null ? void 0 : load();
+      return Boolean(load);
+    }
+  },
+  instagram: {
+    src: "https://www.instagram.com/embed.js",
+    process: () => {
+      var _a, _b;
+      const process = (_b = (_a = socialWindow().instgrm) == null ? void 0 : _a.Embeds) == null ? void 0 : _b.process;
+      process == null ? void 0 : process();
+      return Boolean(process);
+    }
+  },
+  tiktok: {
+    src: "https://www.tiktok.com/embed.js",
+    process: (container) => {
+      var _a, _b;
+      const render = (_b = (_a = socialWindow().tiktokEmbed) == null ? void 0 : _a.lib) == null ? void 0 : _b.render;
+      render == null ? void 0 : render(Array.from(container.querySelectorAll(".tiktok-embed")));
+      return Boolean(render);
+    }
+  },
+  pinterest: {
+    src: "https://assets.pinterest.com/js/pinit.js",
+    process: () => {
+      var _a;
+      const build = (_a = socialWindow().PinUtils) == null ? void 0 : _a.build;
+      build == null ? void 0 : build();
+      return Boolean(build);
+    }
+  },
+  facebook: {
+    src: "https://connect.facebook.net/en_US/sdk.js",
+    process: () => {
+      var _a, _b;
+      const parse = (_b = (_a = socialWindow().FB) == null ? void 0 : _a.XFBML) == null ? void 0 : _b.parse;
+      parse == null ? void 0 : parse();
+      return Boolean(parse);
+    }
+  },
+  linkedin: null
+};
+var PLATFORM_LABELS = {
+  twitter: "X",
+  instagram: "Instagram",
+  facebook: "Facebook",
+  tiktok: "TikTok",
+  linkedin: "LinkedIn",
+  pinterest: "Pinterest"
+};
+var SCRIPT_MARKER = "data-bb-social-script";
+var scriptPromises = /* @__PURE__ */ new Map();
+var reinjected = /* @__PURE__ */ new Set();
+function injectScript(src, platform) {
+  const promise = new Promise((resolve) => {
+    const script = document.createElement("script");
+    script.src = src;
+    script.async = true;
+    script.setAttribute(SCRIPT_MARKER, platform);
+    script.addEventListener("load", () => resolve());
+    script.addEventListener("error", () => resolve());
+    document.body.appendChild(script);
+  });
+  scriptPromises.set(src, promise);
+  return promise;
+}
+function loadWidgetScript(src, platform) {
+  if (typeof document === "undefined") return Promise.resolve();
+  const cached = scriptPromises.get(src);
+  if (cached) return cached;
+  const existing = document.querySelector(`script[${SCRIPT_MARKER}="${platform}"]`);
+  if (existing) {
+    const resolved = Promise.resolve();
+    scriptPromises.set(src, resolved);
+    return resolved;
+  }
+  return injectScript(src, platform);
+}
+function reinjectWidgetScript(src, platform) {
+  if (typeof document === "undefined" || reinjected.has(platform)) return;
+  reinjected.add(platform);
+  document.querySelectorAll(`script[${SCRIPT_MARKER}="${platform}"]`).forEach((script) => {
+    script.remove();
+  });
+  scriptPromises.delete(src);
+  void injectScript(src, platform);
+}
+var SCRIPT_TAG = /<script\b[^>]*>[\s\S]*?<\/script\s*>/gi;
+function stripScripts(html) {
+  return html == null ? void 0 : html.replace(SCRIPT_TAG, "");
+}
+function FallbackCard({
+  url,
+  oembed,
+  providerName
+}) {
+  var _a;
+  const title = (_a = oembed == null ? void 0 : oembed.title) != null ? _a : (oembed == null ? void 0 : oembed.author) ? `Post by ${oembed.author}` : null;
+  const style = {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "0.75rem",
+    padding: "0.75rem 1rem",
+    border: "1px solid #d0d7de",
+    borderRadius: "0.5rem",
+    textDecoration: "none",
+    color: "inherit",
+    textAlign: "left"
+  };
+  const Tag = url ? "a" : "div";
+  const linkProps = url ? { href: url, target: "_blank", rel: "noopener noreferrer" } : {};
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Tag, { className: "bb-social-embed-fallback", style, ...linkProps, children: [
+    (oembed == null ? void 0 : oembed.thumbnailUrl) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "img",
+      {
+        className: "bb-social-embed-fallback-thumb",
+        src: oembed.thumbnailUrl,
+        alt: "",
+        loading: "lazy",
+        width: 48,
+        height: 48,
+        style: { borderRadius: "0.25rem", objectFit: "cover", flexShrink: 0 }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "bb-social-embed-fallback-body", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "span",
+        {
+          className: "bb-social-embed-fallback-title",
+          style: { display: "block", fontWeight: 600 },
+          children: title != null ? title : `View on ${providerName}`
+        }
+      ),
+      title && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "span",
+        {
+          className: "bb-social-embed-fallback-provider",
+          style: { opacity: 0.7, fontSize: "0.875em" },
+          children: providerName
+        }
+      )
+    ] })
+  ] });
+}
+function SocialEmbed({
+  platform,
+  url,
+  embedCode,
+  oembed,
+  alignment = "center",
+  caption
+}) {
+  var _a;
+  const containerRef = (0, import_react3.useRef)(null);
+  const html = (0, import_react3.useMemo)(() => stripScripts(embedCode != null ? embedCode : oembed == null ? void 0 : oembed.html), [embedCode, oembed == null ? void 0 : oembed.html]);
+  (0, import_react3.useEffect)(() => {
+    var _a2;
+    if (!html) return;
+    (_a2 = containerRef.current) == null ? void 0 : _a2.querySelectorAll("iframe").forEach((iframe) => {
+      if (!iframe.hasAttribute("loading")) iframe.setAttribute("loading", "lazy");
+    });
+    const widget = WIDGET_SCRIPTS[platform];
+    if (!widget) return;
+    let cancelled = false;
+    void loadWidgetScript(widget.src, platform).then(() => {
+      const container = containerRef.current;
+      if (cancelled || !container) return;
+      if (!widget.process(container)) reinjectWidgetScript(widget.src, platform);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [platform, html]);
+  const providerName = (_a = oembed == null ? void 0 : oembed.providerName) != null ? _a : PLATFORM_LABELS[platform];
+  const ariaLabel = (oembed == null ? void 0 : oembed.author) ? `${providerName} post by ${oembed.author}` : `${providerName} post`;
+  const figureStyle = {
+    margin: alignment === "center" ? "1rem auto" : "1rem 0",
+    textAlign: alignment
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "figure",
+    {
+      className: `bb-social-embed bb-social-embed-${platform} social-embed align-${alignment}`,
+      "aria-label": ariaLabel,
+      style: figureStyle,
+      children: [
+        html ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "div",
+          {
+            ref: containerRef,
+            className: "bb-social-embed-html",
+            dangerouslySetInnerHTML: { __html: html }
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FallbackCard, { url, oembed, providerName }),
+        caption && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("figcaption", { className: "bb-social-embed-caption", children: caption })
+      ]
+    }
+  );
+}
+
+// src/Video.tsx
+var import_react4 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var HLS_MANIFEST = /\.m3u8(?:[?#]|$)/i;
+var DASH_MANIFEST = /\.mpd(?:[?#]|$)/i;
+var MuxPlayer = "mux-player";
+function Video({
+  provider,
+  url,
+  playbackId,
+  poster,
+  title,
+  caption,
+  transcript,
+  player,
+  alignment = "center",
+  aspectRatio,
+  customAspectRatio,
+  instanceId
+}) {
+  var _a, _b, _c, _d, _e;
+  const videoRef = (0, import_react4.useRef)(null);
+  const wantsMux = provider === "mux" && Boolean(playbackId);
+  const [muxDefined, setMuxDefined] = (0, import_react4.useState)(false);
+  (0, import_react4.useEffect)(() => {
+    if (!wantsMux || typeof window === "undefined" || !window.customElements) return;
+    if (window.customElements.get("mux-player")) {
+      setMuxDefined(true);
+      return;
+    }
+    let cancelled = false;
+    void window.customElements.whenDefined("mux-player").then(() => {
+      if (!cancelled) setMuxDefined(true);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [wantsMux]);
+  const isHls = HLS_MANIFEST.test(url);
+  const isStreaming = isHls || DASH_MANIFEST.test(url);
+  const useMux = wantsMux && muxDefined;
+  (0, import_react4.useEffect)(() => {
+    var _a2;
+    const video = videoRef.current;
+    if (!video || !isHls) return;
+    const Hls = window.Hls;
+    if (!Hls || ((_a2 = Hls.isSupported) == null ? void 0 : _a2.call(Hls)) === false) return;
+    let instance;
+    try {
+      instance = new Hls();
+      instance.loadSource(url);
+      instance.attachMedia(video);
+    } catch (e) {
+      instance == null ? void 0 : instance.destroy();
+      instance = void 0;
+    }
+    return () => instance == null ? void 0 : instance.destroy();
+  }, [isHls, url, useMux]);
+  const capId = caption ? `bb-video-cap-${(_a = instanceId != null ? instanceId : playbackId) != null ? _a : 0}` : void 0;
+  const ratio = (0, import_better_blocks_core.getAspectRatio)(aspectRatio, customAspectRatio);
+  const frameStyle = getMediaFrameStyle(alignment, ratio);
+  const fillStyle = { width: "100%", height: "100%", display: "block" };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "figure",
+    {
+      className: `bb-video align-${alignment}`,
+      style: getMediaFigureStyle(alignment),
+      "aria-label": title ? `Video: ${title}` : void 0,
+      children: [
+        title && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("figcaption", { className: "bb-video-title", style: { fontWeight: 600 }, children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "bb-video-frame", style: frameStyle, children: useMux ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          MuxPlayer,
+          {
+            className: "bb-video-player",
+            "playback-id": playbackId,
+            poster,
+            "metadata-video-title": title,
+            autoplay: (player == null ? void 0 : player.autoplay) ? true : void 0,
+            loop: (player == null ? void 0 : player.loop) ? true : void 0,
+            muted: (player == null ? void 0 : player.muted) ? true : void 0,
+            "aria-describedby": capId,
+            style: fillStyle
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          "video",
+          {
+            ref: videoRef,
+            className: "bb-video-player",
+            src: url,
+            poster,
+            controls: (_b = player == null ? void 0 : player.controls) != null ? _b : true,
+            autoPlay: (_c = player == null ? void 0 : player.autoplay) != null ? _c : false,
+            loop: (_d = player == null ? void 0 : player.loop) != null ? _d : false,
+            muted: (_e = player == null ? void 0 : player.muted) != null ? _e : false,
+            playsInline: true,
+            preload: isStreaming ? "none" : "metadata",
+            "aria-label": title || "Video player",
+            "aria-describedby": capId,
+            style: fillStyle,
+            children: [
+              transcript && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("track", { kind: "captions", src: transcript, label: "Captions" }),
+              "Your browser does not support the video element. ",
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("a", { href: url, children: "Download the video" }),
+              "."
+            ]
+          }
+        ) }),
+        caption && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("figcaption", { id: capId, className: "bb-video-caption", style: MEDIA_CAPTION_STYLE, children: caption })
+      ]
+    }
+  );
+}
+
+// src/BlocksRenderer.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function renderTextNode(node, key, modifiers) {
+  const marks = (0, import_better_blocks_core3.buildTextMarks)(node);
+  let content = node.text;
+  for (let i = marks.length - 1; i >= 0; i -= 1) {
+    const mark = marks[i];
+    const Comp = modifiers == null ? void 0 : modifiers[mark.name];
+    if (Comp) {
+      content = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Comp, { ...(0, import_better_blocks_core3.getModifierProps)(mark), children: content });
+      continue;
+    }
+    const { tag, style } = (0, import_better_blocks_core3.getDefaultMarkRender)(mark);
+    content = (0, import_react5.createElement)(tag, { style }, content);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react5.Fragment, { children: content }, key);
+}
+function renderMath(node, key, blocks) {
+  var _a;
+  const isBlock = node.format === "block";
+  const MathComp = blocks == null ? void 0 : blocks.math;
+  const formula = (_a = node.value) != null ? _a : "";
+  if (MathComp) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MathComp, { formula, inline: !isBlock }, key);
+  }
+  const Tag = isBlock ? "div" : "span";
+  const className = isBlock ? "katex-block" : "katex-inline";
+  try {
+    const html = import_katex.default.renderToString(formula, {
+      displayMode: isBlock,
+      throwOnError: false
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Tag, { className, dangerouslySetInnerHTML: { __html: html } }, key);
+  } catch (e) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Tag, { className, children: formula }, key);
+  }
+}
+function renderInlineContent(children, blocks, modifiers) {
+  return children.map((child, index) => {
+    if (child.type === "text") {
+      return renderTextNode(child, index, modifiers);
+    }
+    if (child.type === "math") {
+      return renderMath(child, index, blocks);
+    }
+    if (child.type === "link") {
+      const LinkComp = blocks == null ? void 0 : blocks.link;
+      const linkChildren = child.children.map(
+        (textNode, i) => renderTextNode(textNode, i, modifiers)
+      );
+      return LinkComp ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LinkComp, { url: child.url, target: child.target, rel: child.rel, children: linkChildren }, index) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("a", { href: child.url, target: child.target, rel: child.rel, children: linkChildren }, index);
+    }
+    return null;
+  });
+}
+function renderListItem(node, key, isTodo, blocks, modifiers) {
+  var _a;
+  const ListItemComp = blocks == null ? void 0 : blocks["list-item"];
+  const children = renderInlineContent(node.children, blocks, modifiers);
+  if (ListItemComp) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ListItemComp, { checked: isTodo ? node.checked : void 0, children }, key);
+  }
+  if (isTodo) {
+    const checked = (_a = node.checked) != null ? _a : false;
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("li", { style: { listStyle: "none" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("input", { type: "checkbox", checked, readOnly: true, style: { marginRight: "0.5em" } }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: checked ? { textDecoration: "line-through", opacity: 0.6 } : void 0, children })
+    ] }, key);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", { children }, key);
+}
+function renderList(node, key, blocks, modifiers) {
+  const ListComp = blocks == null ? void 0 : blocks.list;
+  const indentLevel = node.indentLevel || 0;
+  const isTodo = node.format === "todo";
+  const children = node.children.map((child, index) => {
+    if (child.type === "list-item") {
+      return renderListItem(child, index, isTodo, blocks, modifiers);
+    }
+    if (child.type === "list") {
+      return renderList(child, index, blocks, modifiers);
+    }
+    return null;
+  });
+  if (ListComp) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ListComp, { format: node.format, indentLevel, children }, key);
+  }
+  if (isTodo) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ul", { style: { listStyle: "none", paddingLeft: indentLevel > 0 ? "1.5em" : 0 }, children }, key);
+  }
+  const Tag = node.format === "ordered" ? "ol" : "ul";
+  const listStyleType = (0, import_better_blocks_core3.getListStyleType)(node.format, indentLevel);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Tag, { style: { listStyleType }, children }, key);
+}
+function renderTable(block, key, blocks, modifiers) {
+  const TableComp = blocks == null ? void 0 : blocks.table;
+  const RowComp = blocks == null ? void 0 : blocks["table-row"];
+  const CellComp = blocks == null ? void 0 : blocks["table-cell"];
+  const HeaderCellComp = blocks == null ? void 0 : blocks["table-header-cell"];
+  let headerRowCount = 0;
+  while (isHeaderRow(block.children[headerRowCount])) headerRowCount++;
+  const rows = block.children.map((row, rowIndex) => {
+    const inHeader = rowIndex < headerRowCount;
+    const cells = row.children.map((cell, cellIndex) => {
+      const cellChildren = renderInlineContent(cell.children, blocks, modifiers);
+      const isHeader = cell.type === "table-header-cell";
+      const style = cell.align ? { textAlign: cell.align } : void 0;
+      const cellProps = {
+        align: cell.align,
+        colSpan: cell.colSpan,
+        rowSpan: cell.rowSpan,
+        style
+      };
+      if (isHeader && HeaderCellComp) {
+        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HeaderCellComp, { ...cellProps, children: cellChildren }, cellIndex);
+      }
+      if (!isHeader && CellComp) {
+        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CellComp, { ...cellProps, children: cellChildren }, cellIndex);
+      }
+      return isHeader ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "th",
+        {
+          scope: inHeader ? "col" : "row",
+          colSpan: cell.colSpan,
+          rowSpan: cell.rowSpan,
+          style,
+          children: cellChildren
+        },
+        cellIndex
+      ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { colSpan: cell.colSpan, rowSpan: cell.rowSpan, style, children: cellChildren }, cellIndex);
+    });
+    return RowComp ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RowComp, { children: cells }, rowIndex) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tr", { children: cells }, rowIndex);
+  });
+  if (TableComp) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TableComp, { children: rows }, key);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("table", { className: "bb-table", children: [
+    headerRowCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("thead", { children: rows.slice(0, headerRowCount) }),
+    rows.length > headerRowCount && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tbody", { children: rows.slice(headerRowCount) })
+  ] }, key);
+}
+function isHeaderRow(row) {
+  return !!row && row.children.length > 0 && row.children.every((c) => c.type === "table-header-cell");
+}
+function renderBlock(block, key, blocks, modifiers, options) {
+  switch (block.type) {
+    case "paragraph":
+      return renderParagraph(block, key, blocks, modifiers);
+    case "heading":
+      return renderHeading(block, key, blocks, modifiers);
+    case "list":
+      return renderList(block, key, blocks, modifiers);
+    case "quote":
+      return renderQuote(block, key, blocks, modifiers);
+    case "code":
+      return renderCode(block, key, blocks, options);
+    case "image":
+      return renderImage(block, key, blocks);
+    case "horizontal-line":
+      return renderHorizontalLine(block, key, blocks);
+    case "table":
+      return renderTable(block, key, blocks, modifiers);
+    case "media-embed":
+      return renderMediaEmbed(block, key, blocks);
+    case "embed":
+      return renderEmbed(block, key, blocks);
+    case "video":
+      return renderVideo(block, key, blocks);
+    case "math":
+      return renderMath(block, key, blocks);
+    case "diagram":
+      return renderDiagram(block, key, blocks);
+    case "callout":
+      return renderCallout(block, key, blocks, modifiers, options);
+    case "details":
+      return renderDetails(block, key, blocks, modifiers, options);
+    case "button":
+      return renderButton(block, key, blocks);
+    case "social-embed":
+      return renderSocialEmbed(block, key, blocks);
+    case "audio":
+      return renderAudio(block, key, blocks);
+    default:
+      return null;
+  }
+}
+function getBlockStyle(block) {
+  return (0, import_better_blocks_core3.getBlockStyle)(block);
+}
+function renderParagraph(block, key, blocks, modifiers) {
+  const ParagraphComp = blocks == null ? void 0 : blocks.paragraph;
+  const children = renderInlineContent(block.children, blocks, modifiers);
+  const style = getBlockStyle(block);
+  return ParagraphComp ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ParagraphComp, { style, children }, key) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { style, children }, key);
+}
+function renderHeading(block, key, blocks, modifiers) {
+  const HeadingComp = blocks == null ? void 0 : blocks.heading;
+  const children = renderInlineContent(block.children, blocks, modifiers);
+  const style = getBlockStyle(block);
+  if (HeadingComp) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HeadingComp, { level: block.level, style, children }, key);
+  }
+  const Tag = `h${block.level}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Tag, { style, children }, key);
+}
+function renderQuote(block, key, blocks, modifiers) {
+  const QuoteComp = blocks == null ? void 0 : blocks.quote;
+  const children = renderInlineContent(block.children, blocks, modifiers);
+  const style = getBlockStyle(block);
+  return QuoteComp ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(QuoteComp, { style, children }, key) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("blockquote", { className: "bb-quote", style, children }, key);
+}
+var DEFAULT_CODE_THEME = "github-dark";
+function renderCode(block, key, blocks, options) {
+  var _a, _b;
+  const CodeComp = blocks == null ? void 0 : blocks.code;
+  const plainText = (0, import_better_blocks_core3.getPlainText)(block.children);
+  if (CodeComp) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CodeComp, { plainText, language: block.language, children: plainText }, key);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    CodeBlock,
+    {
+      plainText,
+      language: block.language,
+      theme: (_a = options == null ? void 0 : options.codeTheme) != null ? _a : DEFAULT_CODE_THEME,
+      copyButton: (_b = options == null ? void 0 : options.codeCopyButton) != null ? _b : false
+    },
+    key
+  );
+}
+var TABLE_CSS = ".bb-table{display:block;width:max-content;max-width:100%;margin:1rem 0;overflow:auto;border-collapse:collapse;border-spacing:0;border:1px solid var(--bb-table-border,#d0d7de)}.bb-table th,.bb-table td{padding:.375rem .8125rem;border:1px solid var(--bb-table-border,#d0d7de);text-align:left}.bb-table th{font-weight:600;background:var(--bb-table-header-bg,#f6f8fa)}.bb-table tbody tr{background:var(--bb-table-row-bg,#fff)}.bb-table tbody tr:nth-child(2n){background:var(--bb-table-stripe-bg,#f6f8fa)}";
+var QUOTE_CSS = ".bb-quote{margin:1rem 0;padding:0 1rem;color:var(--bb-quote-fg,#57606a);border-left:.25rem solid var(--bb-quote-border,#d0d7de)}";
+var CODE_CSS = ".bb-code{position:relative;margin:1rem 0}.bb-code pre{margin:0;padding:1rem;border-radius:6px;font-size:.875rem;line-height:1.45;tab-size:2;overflow-x:auto}.bb-code-pre{background:var(--bb-code-fallback-bg,#24292e);color:var(--bb-code-fallback-fg,#e1e4e8)}.bb-code-copy{position:absolute;top:.5rem;right:.5rem;padding:.25rem .5rem;font-size:.75rem;line-height:1;color:var(--bb-code-copy-fg,#e1e4e8);background:var(--bb-code-copy-bg,rgba(110,118,129,.4));border:1px solid var(--bb-code-copy-border,rgba(240,246,252,.1));border-radius:6px;cursor:pointer;opacity:0;transition:opacity .15s ease,background .15s ease}.bb-code:hover .bb-code-copy,.bb-code-copy:focus-visible{opacity:1}.bb-code-copy:hover{background:var(--bb-code-copy-hover-bg,rgba(110,118,129,.6))}";
+function renderImage(block, key, blocks) {
+  const ImageComp = blocks == null ? void 0 : blocks.image;
+  if (ImageComp) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      ImageComp,
+      {
+        image: block.image,
+        caption: block.caption,
+        imageAlign: block.imageAlign
+      },
+      key
+    );
+  }
+  const align = block.imageAlign || "center";
+  const alignStyle = {
+    textAlign: align
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("figure", { style: alignStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "img",
+      {
+        src: block.image.url,
+        alt: block.image.alternativeText || "",
+        width: block.image.width,
+        height: block.image.height
+      }
+    ),
+    block.caption && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("figcaption", { children: block.caption })
+  ] }, key);
+}
+function renderHorizontalLine(_block, key, blocks) {
+  const HrComp = blocks == null ? void 0 : blocks["horizontal-line"];
+  return HrComp ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HrComp, {}, key) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("hr", {}, key);
+}
+function renderMediaEmbed(block, key, blocks) {
+  const EmbedComp = blocks == null ? void 0 : blocks["media-embed"];
+  if (EmbedComp) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(EmbedComp, { url: block.url, originalUrl: block.originalUrl }, key);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { position: "relative", paddingBottom: "56.25%", height: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "iframe",
+    {
+      src: block.url,
+      style: { position: "absolute", top: 0, left: 0, width: "100%", height: "100%", border: 0 },
+      allowFullScreen: true,
+      title: "Embedded media"
+    }
+  ) }, key);
+}
+var EMBED_FRAME_CSS = ".bb-embed-frame{overflow:hidden}.bb-embed-frame iframe{width:100%;height:100%;border:0;display:block}";
+function renderEmbed(block, key, blocks) {
+  var _a;
+  const EmbedComp = blocks == null ? void 0 : blocks.embed;
+  if (EmbedComp) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      EmbedComp,
+      {
+        source: block.source,
+        url: block.url,
+        iframe: block.iframe,
+        embedHtml: block.embedHtml,
+        embedSrc: block.embedSrc,
+        provider: block.provider,
+        thumbnail: block.thumbnail,
+        aspectRatio: block.aspectRatio,
+        customAspectRatio: block.customAspectRatio,
+        alignment: block.alignment,
+        caption: block.caption,
+        title: block.title
+      },
+      key
+    );
+  }
+  const alignment = (_a = block.alignment) != null ? _a : "center";
+  const ratio = (0, import_better_blocks_core.getAspectRatio)(block.aspectRatio, block.customAspectRatio);
+  const body = block.embedHtml ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "div",
+    {
+      className: "bb-embed-frame",
+      style: getMediaFrameStyle(alignment, ratio),
+      dangerouslySetInnerHTML: { __html: block.embedHtml }
+    }
+  ) : block.url ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("a", { className: "bb-embed-fallback", href: block.url, target: "_blank", rel: "noopener noreferrer", children: block.title || block.url }) : null;
+  if (!body) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "figure",
+    {
+      className: `bb-embed align-${alignment}`,
+      style: getMediaFigureStyle(alignment),
+      "aria-label": block.title,
+      children: [
+        body,
+        block.caption && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("figcaption", { className: "bb-embed-caption", style: MEDIA_CAPTION_STYLE, children: block.caption })
+      ]
+    },
+    key
+  );
+}
+function renderVideo(block, key, blocks) {
+  var _a, _b, _c, _d;
+  const VideoComp = blocks == null ? void 0 : blocks.video;
+  if (VideoComp) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      VideoComp,
+      {
+        provider: block.provider,
+        url: (_a = block.url) != null ? _a : "",
+        assetId: block.assetId,
+        playbackId: block.playbackId,
+        file: block.file,
+        poster: block.poster,
+        title: block.title,
+        caption: block.caption,
+        transcript: block.transcript,
+        player: block.player,
+        alignment: block.alignment,
+        aspectRatio: block.aspectRatio,
+        customAspectRatio: block.customAspectRatio
+      },
+      key
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    Video,
+    {
+      provider: block.provider,
+      url: (_b = block.url) != null ? _b : "",
+      assetId: block.assetId,
+      playbackId: block.playbackId,
+      file: block.file,
+      poster: block.poster,
+      title: block.title,
+      caption: block.caption,
+      transcript: block.transcript,
+      player: block.player,
+      alignment: block.alignment,
+      aspectRatio: block.aspectRatio,
+      customAspectRatio: block.customAspectRatio,
+      instanceId: (_d = (_c = block.file) == null ? void 0 : _c.id) != null ? _d : key
+    },
+    key
+  );
+}
+function renderSocialEmbed(block, key, blocks) {
+  const SocialComp = blocks == null ? void 0 : blocks["social-embed"];
+  if (SocialComp) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      SocialComp,
+      {
+        platform: block.platform,
+        url: block.url,
+        embedCode: block.embedCode,
+        oembed: block.oembed,
+        alignment: block.alignment,
+        caption: block.caption
+      },
+      key
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    SocialEmbed,
+    {
+      platform: block.platform,
+      url: block.url,
+      embedCode: block.embedCode,
+      oembed: block.oembed,
+      alignment: block.alignment,
+      caption: block.caption
+    },
+    key
+  );
+}
+var AUDIO_ALIGN_ITEMS = {
+  left: "flex-start",
+  center: "center",
+  right: "flex-end",
+  none: "stretch"
+};
+function renderAudio(block, key, blocks) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  const AudioComp = blocks == null ? void 0 : blocks.audio;
+  if (AudioComp) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      AudioComp,
+      {
+        file: block.file,
+        title: block.title,
+        caption: block.caption,
+        player: (_a = block.player) != null ? _a : {},
+        alignment: block.alignment
+      },
+      key
+    );
+  }
+  const { file, title, caption } = block;
+  const player = (_b = block.player) != null ? _b : {};
+  const alignment = (_c = block.alignment) != null ? _c : "center";
+  const capId = caption ? `bb-audio-cap-${(_e = (_d = file.id) != null ? _d : file.hash) != null ? _e : key}` : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "figure",
+    {
+      className: `bb-audio align-${alignment}`,
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "0.5rem",
+        margin: "1rem 0",
+        alignItems: AUDIO_ALIGN_ITEMS[alignment]
+      },
+      children: [
+        title && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("figcaption", { className: "bb-audio-title", style: { fontWeight: 600 }, children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          "audio",
+          {
+            className: "bb-audio-player",
+            src: file.url,
+            controls: (_f = player.controls) != null ? _f : true,
+            autoPlay: (_g = player.autoplay) != null ? _g : false,
+            loop: (_h = player.loop) != null ? _h : false,
+            preload: (_i = player.preload) != null ? _i : "metadata",
+            "aria-label": title || "Audio player",
+            "aria-describedby": capId,
+            style: { width: "100%", maxWidth: alignment === "none" ? "100%" : "32rem" },
+            children: [
+              "Your browser does not support the audio element. ",
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("a", { href: file.url, children: "Download the audio" }),
+              "."
+            ]
+          }
+        ),
+        caption && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "figcaption",
+          {
+            id: capId,
+            className: "bb-audio-caption",
+            style: { fontSize: "0.875rem", color: "#6b7280" },
+            children: caption
+          }
+        )
+      ]
+    },
+    key
+  );
+}
+function renderDiagram(block, key, blocks) {
+  var _a;
+  const DiagramComp = blocks == null ? void 0 : blocks.diagram;
+  const code = (_a = block.value) != null ? _a : "";
+  if (DiagramComp) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DiagramComp, { code, format: block.format }, key);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MermaidDiagram, { value: code }, key);
+}
+var CALLOUT_VARIANTS = {
+  note: {
+    color: "#0969da",
+    label: "Note",
+    icon: "M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"
+  },
+  tip: {
+    color: "#1a7f37",
+    label: "Tip",
+    icon: "M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z"
+  },
+  important: {
+    color: "#8250df",
+    label: "Important",
+    icon: "M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+  },
+  warning: {
+    color: "#9a6700",
+    label: "Warning",
+    icon: "M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+  },
+  caution: {
+    color: "#d1242f",
+    label: "Caution",
+    icon: "M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .39.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.39.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"
+  }
+};
+function renderCallout(block, key, blocks, modifiers, options) {
+  var _a;
+  const variant = CALLOUT_VARIANTS[block.variant] ? block.variant : "note";
+  const meta = CALLOUT_VARIANTS[variant];
+  const childNodes = block.children.map(
+    (child, index) => renderBlock(child, index, blocks, modifiers, options)
+  );
+  const lastIndex = childNodes.length - 1;
+  const children = childNodes.map((node, index) => {
+    if (!(0, import_react5.isValidElement)(node)) return node;
+    const element = node;
+    const collapsed = {};
+    if (index === 0) collapsed.marginTop = 0;
+    if (index === lastIndex) collapsed.marginBottom = 0;
+    return (0, import_react5.cloneElement)(element, { style: { ...element.props.style, ...collapsed } });
+  });
+  const CalloutComp = blocks == null ? void 0 : blocks.callout;
+  if (CalloutComp) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CalloutComp, { variant, title: block.title, children }, key);
+  }
+  const title = ((_a = block.title) == null ? void 0 : _a.trim()) ? block.title : meta.label;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "aside",
+    {
+      className: `bb-callout bb-callout-${variant}`,
+      role: "note",
+      style: {
+        borderLeft: `0.25rem solid ${meta.color}`,
+        // Subtle accent-tinted background (~8% opacity) to match the editor preview.
+        backgroundColor: `${meta.color}14`,
+        padding: "0.5rem 1rem",
+        margin: "1rem 0"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          "p",
+          {
+            className: "bb-callout-title",
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "0.5rem",
+              // GitHub spacing: tight title line with a 1rem gap before the body.
+              lineHeight: 1,
+              margin: "0 0 1rem",
+              fontWeight: 600,
+              color: meta.color
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "svg",
+                {
+                  className: "bb-callout-icon",
+                  viewBox: "0 0 16 16",
+                  width: "16",
+                  height: "16",
+                  fill: "currentColor",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: meta.icon })
+                }
+              ),
+              title
+            ]
+          }
+        ),
+        children
+      ]
+    },
+    key
+  );
+}
+function renderDetails(block, key, blocks, modifiers, options) {
+  const children = block.children.map(
+    (child, index) => renderBlock(child, index, blocks, modifiers, options)
+  );
+  const DetailsComp = blocks == null ? void 0 : blocks.details;
+  if (DetailsComp) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DetailsComp, { summary: block.summary, defaultOpen: block.defaultOpen, children }, key);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("details", { className: "bb-details", open: block.defaultOpen, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("summary", { className: "bb-details-summary", children: block.summary }),
+    children
+  ] }, key);
+}
+var BUTTON_HOVER_CSS = ".bb-button{transition:background-color .15s ease,color .15s ease}.bb-button:hover{background-color:var(--bb-button-hover-bg,var(--bb-button-bg))!important;color:var(--bb-button-hover-color,var(--bb-button-color))!important}.bb-button:focus-visible{outline:2px solid currentColor;outline-offset:2px}";
+function contentHasBlock(nodes, type) {
+  for (const node of nodes) {
+    if (node.type === type) return true;
+    const children = node.children;
+    if (Array.isArray(children) && contentHasBlock(children, type)) return true;
+  }
+  return false;
+}
+function getButtonStyle(style) {
+  const out = {
+    display: "inline-block",
+    textDecoration: "none",
+    cursor: "pointer"
+  };
+  if (!style) return out;
+  if (style.backgroundColor) {
+    out.backgroundColor = style.backgroundColor;
+    out["--bb-button-bg"] = style.backgroundColor;
+  }
+  if (style.textColor) {
+    out.color = style.textColor;
+    out["--bb-button-color"] = style.textColor;
+  }
+  if (style.borderRadius) out.borderRadius = style.borderRadius;
+  if (style.fontSize) out.fontSize = style.fontSize;
+  if (style.fontWeight) out.fontWeight = style.fontWeight;
+  if (style.padding) out.padding = style.padding;
+  if (style.border) out.border = style.border;
+  if (style.hoverBackgroundColor) out["--bb-button-hover-bg"] = style.hoverBackgroundColor;
+  if (style.hoverTextColor) out["--bb-button-hover-color"] = style.hoverTextColor;
+  return out;
+}
+function handleFileDownload(event, url, name) {
+  if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
+    return;
+  }
+  event.preventDefault();
+  void (async () => {
+    try {
+      const response = await fetch(url);
+      if (!response.ok) throw new Error(`Request failed: ${response.status}`);
+      const blob = await response.blob();
+      const objectUrl = URL.createObjectURL(blob);
+      const anchor = document.createElement("a");
+      anchor.href = objectUrl;
+      anchor.download = name;
+      document.body.appendChild(anchor);
+      anchor.click();
+      anchor.remove();
+      URL.revokeObjectURL(objectUrl);
+    } catch (e) {
+      window.location.href = url;
+    }
+  })();
+}
+function renderButton(block, key, blocks) {
+  var _a;
+  const ButtonComp = blocks == null ? void 0 : blocks.button;
+  if (ButtonComp) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      ButtonComp,
+      {
+        label: block.label,
+        buttonType: block.buttonType,
+        alignment: block.alignment,
+        link: block.link,
+        file: block.file,
+        showFileSize: block.showFileSize,
+        showFileIcon: block.showFileIcon,
+        filePreview: block.filePreview,
+        style: block.style,
+        cssClass: block.cssClass
+      },
+      key
+    );
+  }
+  const style = getButtonStyle(block.style);
+  const className = block.cssClass ? `bb-button ${block.cssClass}` : "bb-button";
+  let control;
+  if (block.buttonType === "file" && block.file) {
+    const file = block.file;
+    const icon = block.showFileIcon ? (0, import_better_blocks_core3.getFileIcon)(file) : null;
+    const size = block.showFileSize && typeof file.size === "number" ? (0, import_better_blocks_core3.formatFileSize)(file.size) : null;
+    const filePreview = block.filePreview === true;
+    control = filePreview ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "a",
+      {
+        href: file.url,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        "aria-label": `Preview ${file.name}`,
+        className,
+        style,
+        children: [
+          icon && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "bb-button-icon", "aria-hidden": "true", children: [
+            icon,
+            " "
+          ] }),
+          block.label,
+          size && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "bb-button-size", children: [
+            " (",
+            size,
+            ")"
+          ] })
+        ]
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "a",
+      {
+        href: file.url,
+        download: file.name,
+        "aria-label": `Download ${file.name}`,
+        className,
+        style,
+        onClick: (event) => handleFileDownload(event, file.url, file.name),
+        children: [
+          icon && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "bb-button-icon", "aria-hidden": "true", children: [
+            icon,
+            " "
+          ] }),
+          block.label,
+          size && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "bb-button-size", children: [
+            " (",
+            size,
+            ")"
+          ] })
+        ]
+      }
+    );
+  } else if (block.link) {
+    const link = block.link;
+    control = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "a",
+      {
+        href: link.url,
+        target: link.target,
+        rel: link.rel,
+        "aria-label": link.ariaLabel,
+        className,
+        style,
+        children: block.label
+      }
+    );
+  } else {
+    control = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className, style, children: block.label });
+  }
+  const alignment = (_a = block.alignment) != null ? _a : "left";
+  if (alignment === "none") {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react5.Fragment, { children: control }, key);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "div",
+    {
+      className: "bb-button-wrapper",
+      style: { textAlign: alignment, margin: "0.5rem 0" },
+      children: control
+    },
+    key
+  );
+}
+function BlocksRenderer({
+  content,
+  blocks,
+  modifiers,
+  codeTheme = DEFAULT_CODE_THEME,
+  codeCopyButton = false
+}) {
+  if (!content || !Array.isArray(content) || content.length === 0) {
+    return null;
+  }
+  const needsButtonCss = !(blocks == null ? void 0 : blocks.button) && contentHasBlock(content, "button");
+  const needsEmbedCss = !(blocks == null ? void 0 : blocks.embed) && contentHasBlock(content, "embed");
+  const needsTableCss = !(blocks == null ? void 0 : blocks.table) && contentHasBlock(content, "table");
+  const needsQuoteCss = !(blocks == null ? void 0 : blocks.quote) && contentHasBlock(content, "quote");
+  const needsCodeCss = !(blocks == null ? void 0 : blocks.code) && contentHasBlock(content, "code");
+  const options = { codeTheme, codeCopyButton };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    needsButtonCss && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("style", { children: BUTTON_HOVER_CSS }),
+    needsEmbedCss && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("style", { children: EMBED_FRAME_CSS }),
+    needsTableCss && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("style", { children: TABLE_CSS }),
+    needsQuoteCss && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("style", { children: QUOTE_CSS }),
+    needsCodeCss && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("style", { children: CODE_CSS }),
+    content.map((block, index) => renderBlock(block, index, blocks, modifiers, options))
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BlocksRenderer
+});
+//# sourceMappingURL=index.js.map