rspress-plugin-api-extractor 0.1.0 → 0.1.2

package/runtime/components/ApiLlmsViewOptions/index.js

@@ -0,0 +1,365 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useI18n, usePage, useSite } from "@rspress/core/runtime";
+import { useMdUrl } from "@rspress/core/theme";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+function resolveUrl(urlPath) {
+    if ("u" < typeof window) return urlPath;
+    return urlPath.startsWith("http") ? urlPath : `${window.location.origin}${urlPath}`;
+}
+function findScope(pathname, scopes) {
+    const sorted = [
+        ...scopes
+    ].sort((a, b)=>b.packageRoute.length - a.packageRoute.length);
+    for (const s of sorted){
+        const base = s.packageRoute.endsWith("/") ? s.packageRoute : `${s.packageRoute}/`;
+        if (pathname === s.packageRoute || pathname.startsWith(base)) return s;
+    }
+    return null;
+}
+async function copyText(text) {
+    await navigator.clipboard.writeText(text);
+}
+function DownArrow({ className }) {
+    return /*#__PURE__*/ jsxs("svg", {
+        className: className,
+        width: 16,
+        height: 16,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        children: [
+            /*#__PURE__*/ jsx("title", {
+                children: "Toggle menu"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "m6 9 6 6 6-6"
+            })
+        ]
+    });
+}
+function LinkIcon() {
+    return /*#__PURE__*/ jsxs("svg", {
+        width: 16,
+        height: 16,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        children: [
+            /*#__PURE__*/ jsx("title", {
+                children: "Link"
+            }),
+            /*#__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"
+            })
+        ]
+    });
+}
+function CopyIcon() {
+    return /*#__PURE__*/ jsxs("svg", {
+        width: 16,
+        height: 16,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        children: [
+            /*#__PURE__*/ jsx("title", {
+                children: "Copy"
+            }),
+            /*#__PURE__*/ jsx("rect", {
+                x: 9,
+                y: 9,
+                width: 13,
+                height: 13,
+                rx: 2,
+                ry: 2
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
+            })
+        ]
+    });
+}
+function ExternalLinkIcon() {
+    return /*#__PURE__*/ jsxs("svg", {
+        width: 12,
+        height: 12,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        children: [
+            /*#__PURE__*/ jsx("title", {
+                children: "External link"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"
+            }),
+            /*#__PURE__*/ jsx("polyline", {
+                points: "15 3 21 3 21 9"
+            }),
+            /*#__PURE__*/ jsx("line", {
+                x1: 10,
+                y1: 14,
+                x2: 21,
+                y2: 3
+            })
+        ]
+    });
+}
+function ChatGPTIcon() {
+    return /*#__PURE__*/ jsxs("svg", {
+        role: "img",
+        viewBox: "0 0 24 24",
+        fill: "currentColor",
+        xmlns: "http://www.w3.org/2000/svg",
+        width: 16,
+        height: 16,
+        children: [
+            /*#__PURE__*/ jsx("title", {
+                children: "ChatGPT"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z"
+            })
+        ]
+    });
+}
+function ClaudeIcon() {
+    return /*#__PURE__*/ jsxs("svg", {
+        fill: "currentColor",
+        role: "img",
+        viewBox: "0 0 24 24",
+        xmlns: "http://www.w3.org/2000/svg",
+        width: 16,
+        height: 16,
+        children: [
+            /*#__PURE__*/ jsx("title", {
+                children: "Anthropic"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M17.3041 3.541h-3.6718l6.696 16.918H24Zm-10.6082 0L0 20.459h3.7442l1.3693-3.5527h7.0052l1.3693 3.5528h3.7442L10.5363 3.5409Zm-.3712 10.2232 2.2914-5.9456 2.2914 5.9456Z"
+            })
+        ]
+    });
+}
+function LlmsViewOptions(props) {
+    const { site } = useSite();
+    const { page } = usePage();
+    const { pathname } = useMdUrl();
+    const t = useI18n();
+    const [isOpen, setIsOpen] = useState(false);
+    const [feedback, setFeedback] = useState(null);
+    const dropdownRef = useRef(null);
+    const llmsUI = site?.themeConfig?.llmsUI;
+    const configOptions = "object" == typeof llmsUI ? llmsUI?.viewOptions : void 0;
+    const options = props.options ?? configOptions ?? [
+        "markdownLink",
+        "chatgpt",
+        "claude"
+    ];
+    const tc = site?.themeConfig;
+    const scopes = tc?.apiExtractorScopes ?? [];
+    const activeScope = useMemo(()=>findScope(page.routePath, scopes), [
+        page.routePath,
+        scopes
+    ]);
+    useEffect(()=>{
+        if (!isOpen) return;
+        const handler = (e)=>{
+            if (dropdownRef.current && !dropdownRef.current.contains(e.target)) setIsOpen(false);
+        };
+        document.addEventListener("mousedown", handler);
+        return ()=>document.removeEventListener("mousedown", handler);
+    }, [
+        isOpen
+    ]);
+    const fullMarkdownUrl = useMemo(()=>"u" > typeof window ? new URL(pathname, window.location.origin).toString() : "", [
+        pathname
+    ]);
+    const pageQ = `Read ${fullMarkdownUrl}, I want to ask questions about it.`;
+    const pageItems = useMemo(()=>{
+        const builtins = {
+            markdownLink: {
+                title: t("copyMarkdownLinkText"),
+                icon: /*#__PURE__*/ jsx(LinkIcon, {}),
+                onClick: ()=>copyText(fullMarkdownUrl)
+            },
+            chatgpt: {
+                title: t("openInText", {
+                    name: "ChatGPT"
+                }),
+                href: `https://chatgpt.com/?${new URLSearchParams({
+                    hints: "search",
+                    q: pageQ
+                })}`,
+                icon: /*#__PURE__*/ jsx(ChatGPTIcon, {})
+            },
+            claude: {
+                title: t("openInText", {
+                    name: "Claude"
+                }),
+                href: `https://claude.ai/new?${new URLSearchParams({
+                    q: pageQ
+                })}`,
+                icon: /*#__PURE__*/ jsx(ClaudeIcon, {})
+            }
+        };
+        return options.map((opt)=>{
+            if ("string" == typeof opt) return builtins[opt] ?? null;
+            return opt;
+        }).filter(Boolean);
+    }, [
+        options,
+        fullMarkdownUrl,
+        pageQ,
+        t
+    ]);
+    const showFeedback = useCallback((msg)=>{
+        setFeedback(msg);
+        setTimeout(()=>setFeedback(null), 1500);
+    }, []);
+    const handleCopyDocs = useCallback(async ()=>{
+        if (!activeScope) return;
+        try {
+            const res = await fetch(resolveUrl(activeScope.llmsDocsTxt));
+            await copyText(await res.text());
+            showFeedback("Copied!");
+        } catch  {
+            showFeedback("Failed");
+        }
+    }, [
+        activeScope,
+        showFeedback
+    ]);
+    const handleCopyLink = useCallback(async (urlPath)=>{
+        try {
+            await copyText(resolveUrl(urlPath));
+            showFeedback("Copied!");
+        } catch  {
+            showFeedback("Failed");
+        }
+    }, [
+        showFeedback
+    ]);
+    if (!pathname) return null;
+    const packageItems = [];
+    if (activeScope) {
+        const pkgQ = `Read ${resolveUrl(activeScope.llmsTxt)}, I want to ask questions about the ${activeScope.name} package.`;
+        packageItems.push({
+            title: feedback ?? `Copy ${activeScope.name} docs`,
+            icon: /*#__PURE__*/ jsx(CopyIcon, {}),
+            onClick: handleCopyDocs
+        }, {
+            title: "Copy llms.txt link",
+            icon: /*#__PURE__*/ jsx(LinkIcon, {}),
+            onClick: ()=>handleCopyLink(activeScope.llmsTxt)
+        }, {
+            title: "Copy llms-full.txt link",
+            icon: /*#__PURE__*/ jsx(LinkIcon, {}),
+            onClick: ()=>handleCopyLink(activeScope.llmsFullTxt)
+        }, {
+            title: `Open ${activeScope.name} in ChatGPT`,
+            href: `https://chatgpt.com/?${new URLSearchParams({
+                hints: "search",
+                q: pkgQ
+            })}`,
+            icon: /*#__PURE__*/ jsx(ChatGPTIcon, {})
+        }, {
+            title: `Open ${activeScope.name} in Claude`,
+            href: `https://claude.ai/new?${new URLSearchParams({
+                q: pkgQ
+            })}`,
+            icon: /*#__PURE__*/ jsx(ClaudeIcon, {})
+        });
+    }
+    return /*#__PURE__*/ jsxs("button", {
+        ref: dropdownRef,
+        type: "button",
+        className: `rp-llms-button rp-llms-view-options__trigger ${isOpen ? "rp-llms-view-options__trigger--active" : ""}`,
+        onClick: ()=>setIsOpen(!isOpen),
+        children: [
+            /*#__PURE__*/ jsx(DownArrow, {
+                className: `rp-llms-view-options__arrow ${isOpen ? "rp-llms-view-options__arrow--rotated" : ""}`
+            }),
+            isOpen && /*#__PURE__*/ jsxs("div", {
+                className: "rp-llms-view-options__menu",
+                children: [
+                    pageItems.map((item)=>/*#__PURE__*/ jsx(MenuItem, {
+                            item: item,
+                            onClose: ()=>setIsOpen(false)
+                        }, item.title)),
+                    packageItems.length > 0 && /*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsx("div", {
+                                style: {
+                                    height: 1,
+                                    margin: "4px 0",
+                                    background: "var(--rp-c-divider)"
+                                }
+                            }),
+                            packageItems.map((item)=>/*#__PURE__*/ jsx(MenuItem, {
+                                    item: item,
+                                    onClose: ()=>setIsOpen(false)
+                                }, item.title))
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+function MenuItem({ item, onClose }) {
+    if (item.href) return /*#__PURE__*/ jsxs("a", {
+        className: "rp-llms-view-options__menu-item",
+        href: item.href,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        onClick: onClose,
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                className: "rp-llms-view-options__item-icon",
+                children: item.icon
+            }),
+            /*#__PURE__*/ jsx("span", {
+                children: item.title
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: "rp-llms-view-options__external-icon",
+                children: /*#__PURE__*/ jsx(ExternalLinkIcon, {})
+            })
+        ]
+    });
+    return /*#__PURE__*/ jsxs("button", {
+        type: "button",
+        className: "rp-llms-view-options__menu-item",
+        onClick: (e)=>{
+            e.stopPropagation();
+            item.onClick?.();
+            onClose();
+        },
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                className: "rp-llms-view-options__item-icon",
+                children: item.icon
+            }),
+            /*#__PURE__*/ jsx("span", {
+                children: item.title
+            })
+        ]
+    });
+}
+export { LlmsViewOptions };

package/runtime/components/ApiMember/index.js

@@ -0,0 +1,51 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createElement, useMemo } from "react";
+import { decodeHast } from "../../utils/decode-hast.js";
+import { MemberSignature } from "../MemberSignature/index.js";
+function ApiMember({ code, memberName, summary, id, hast, hasParameters }) {
+    const parsedHast = useMemo(()=>decodeHast(hast, "ApiMember"), [
+        hast
+    ]);
+    const hasParamsBoolean = "string" == typeof hasParameters ? "true" === hasParameters : !!hasParameters;
+    if (import.meta.env.SSG_MD) {
+        const header = "```typescript\n";
+        const footer = "\n```\n";
+        return /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                `### ${memberName}\n\n`,
+                summary && `${summary}\n\n`,
+                `${header}${code.trim()}${footer}`
+            ]
+        });
+    }
+    if (parsedHast) {
+        const memberProps = {
+            hast: parsedHast,
+            memberName,
+            hasParameters: hasParamsBoolean
+        };
+        if (null != summary) memberProps.summary = summary;
+        if (null != id) memberProps.id = id;
+        return /*#__PURE__*/ createElement(MemberSignature, memberProps);
+    }
+    return /*#__PURE__*/ jsxs("div", {
+        children: [
+            /*#__PURE__*/ jsx("h3", {
+                id: id,
+                children: memberName
+            }),
+            summary && /*#__PURE__*/ jsx("p", {
+                children: summary
+            }),
+            /*#__PURE__*/ jsx("pre", {
+                children: /*#__PURE__*/ jsx("code", {
+                    className: "language-typescript",
+                    children: code.trim()
+                })
+            })
+        ]
+    });
+}
+const components_ApiMember = ApiMember;
+export default components_ApiMember;
+export { ApiMember };

package/runtime/components/ApiSignature/index.js

@@ -0,0 +1,32 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { createElement, useMemo } from "react";
+import { decodeHast } from "../../utils/decode-hast.js";
+import { SignatureBlock } from "../SignatureBlock/index.js";
+function ApiSignature({ code, heading: _heading = "Signature", id: _id = "signature", hast, hasParameters, hasMembers }) {
+    const parsedHast = useMemo(()=>decodeHast(hast, "ApiSignature"), [
+        hast
+    ]);
+    const hasParamsBoolean = "string" == typeof hasParameters ? "true" === hasParameters : !!hasParameters;
+    const hasMembersBoolean = "string" == typeof hasMembers ? "true" === hasMembers : !!hasMembers;
+    const hasTableBelow = hasParamsBoolean || hasMembersBoolean;
+    if (import.meta.env.SSG_MD) {
+        const header = "```typescript\n";
+        const footer = "\n```\n";
+        return /*#__PURE__*/ jsx(Fragment, {
+            children: `${header}${code.trim()}${footer}`
+        });
+    }
+    if (parsedHast) return /*#__PURE__*/ createElement(SignatureBlock, {
+        hast: parsedHast,
+        hasParameters: hasTableBelow
+    });
+    return /*#__PURE__*/ jsx("pre", {
+        children: /*#__PURE__*/ jsx("code", {
+            className: "language-typescript",
+            children: code.trim()
+        })
+    });
+}
+const components_ApiSignature = ApiSignature;
+export default components_ApiSignature;
+export { ApiSignature };

package/runtime/components/EnumMembersTable/index.js

@@ -0,0 +1,69 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { MarkdownContent } from "../MarkdownContent/index.js";
+import index_module from "./index.module.js";
+const EnumMembersTable = ({ members })=>{
+    if (!members || 0 === members.length) return null;
+    if (import.meta.env.SSG_MD) {
+        let markdown = "#### Members\n\n";
+        markdown += "| Member | Value | Description |\n";
+        markdown += "|--------|-------|-------------|\n";
+        for (const member of members){
+            const name = `\`${member.name}\``;
+            const value = member.value ? `\`${member.value}\`` : "";
+            const description = member.description.replace(/<[^>]*>/g, "").trim();
+            markdown += `| ${name} | ${value} | ${description} |\n`;
+        }
+        return /*#__PURE__*/ jsx(Fragment, {
+            children: markdown
+        });
+    }
+    return /*#__PURE__*/ jsx("div", {
+        className: index_module.table,
+        children: /*#__PURE__*/ jsx("div", {
+            className: index_module.scroll,
+            children: /*#__PURE__*/ jsxs("table", {
+                children: [
+                    /*#__PURE__*/ jsx("thead", {
+                        children: /*#__PURE__*/ jsxs("tr", {
+                            children: [
+                                /*#__PURE__*/ jsx("th", {
+                                    children: "Member"
+                                }),
+                                /*#__PURE__*/ jsx("th", {
+                                    children: "Value"
+                                }),
+                                /*#__PURE__*/ jsx("th", {
+                                    children: "Description"
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ jsx("tbody", {
+                        children: members.map((member)=>/*#__PURE__*/ jsxs("tr", {
+                                children: [
+                                    /*#__PURE__*/ jsx("td", {
+                                        children: /*#__PURE__*/ jsx("code", {
+                                            children: member.name
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx("td", {
+                                        children: member.value && /*#__PURE__*/ jsx("code", {
+                                            children: member.value
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx("td", {
+                                        children: /*#__PURE__*/ jsx(MarkdownContent, {
+                                            children: member.description
+                                        })
+                                    })
+                                ]
+                            }, member.name))
+                    })
+                ]
+            })
+        })
+    });
+};
+const components_EnumMembersTable = EnumMembersTable;
+export default components_EnumMembersTable;
+export { EnumMembersTable };

package/runtime/components/EnumMembersTable/index.module.js

@@ -0,0 +1,7 @@
+import "./index_module.css";
+const index_module = {
+    table: "table-vZ4IFZ",
+    rpDark: "rp-dark-Xp3cTC",
+    scroll: "scroll-NvHud6"
+};
+export default index_module;

package/runtime/components/EnumMembersTable/index_module.css

@@ -0,0 +1,100 @@
+.table-vZ4IFZ {
+  border: 1px solid var(--api-color-border);
+  border-radius: 0 0 var(--api-border-radius) var(--api-border-radius);
+  border-top: none;
+  margin: 0;
+  position: relative;
+  overflow: hidden;
+}
+
+html.rp-dark-Xp3cTC .table-vZ4IFZ {
+  border-color: var(--api-color-border);
+}
+
+.scroll-NvHud6 {
+  -webkit-overflow-scrolling: touch;
+  overflow-x: auto;
+}
+
+.table-vZ4IFZ table {
+  border-collapse: collapse;
+  width: 100%;
+  font-size: var(--api-font-size-base);
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  margin: 0;
+}
+
+.table-vZ4IFZ thead {
+  background-color: var(--api-color-bg);
+  border-bottom: 1px solid var(--api-color-border);
+}
+
+.table-vZ4IFZ th {
+  padding: var(--api-spacing-md) var(--api-spacing-lg);
+  text-align: left;
+  color: var(--api-color-text);
+  white-space: nowrap;
+  font-weight: 600;
+}
+
+.table-vZ4IFZ th:first-child {
+  width: 20%;
+  min-width: 120px;
+}
+
+.table-vZ4IFZ th:nth-child(2) {
+  width: 25%;
+  min-width: 120px;
+}
+
+.table-vZ4IFZ th:last-child {
+  width: 55%;
+}
+
+.table-vZ4IFZ td {
+  padding: var(--api-spacing-md) var(--api-spacing-lg);
+  border-top: 1px solid var(--api-color-border);
+  vertical-align: top;
+}
+
+.table-vZ4IFZ td:first-child {
+  width: 20%;
+  min-width: 120px;
+}
+
+.table-vZ4IFZ td:nth-child(2) {
+  width: 25%;
+  min-width: 120px;
+}
+
+.table-vZ4IFZ td:last-child {
+  width: 55%;
+}
+
+.table-vZ4IFZ td code, .table-vZ4IFZ th code {
+  font-size: var(--api-font-size-sm);
+  background-color: var(--api-color-code-bg);
+  border-radius: var(--api-border-radius-sm);
+  padding: .125rem .375rem;
+}
+
+.table-vZ4IFZ td:last-child p:first-child {
+  margin-top: 0;
+}
+
+.table-vZ4IFZ td:last-child p:last-child, .table-vZ4IFZ td:last-child ul:last-child, .table-vZ4IFZ td:last-child ol:last-child {
+  margin-bottom: 0;
+}
+
+@media (width <= 768px) {
+  .table-vZ4IFZ td, .table-vZ4IFZ th {
+    padding: var(--api-spacing-sm) var(--api-spacing-md);
+    font-size: var(--api-font-size-sm);
+  }
+
+  .table-vZ4IFZ td:first-child, .table-vZ4IFZ th:first-child, .table-vZ4IFZ td:nth-child(2), .table-vZ4IFZ th:nth-child(2) {
+    min-width: 100px;
+  }
+}
+

package/runtime/components/ExampleBlock/index.js

@@ -0,0 +1,36 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useWrapToggle } from "../../hooks/useWrapToggle.js";
+import { ButtonGroup } from "../buttons/ButtonGroup.js";
+import { CopyCodeButton } from "../buttons/CopyCodeButton.js";
+import { WrapSignatureButton } from "../buttons/WrapSignatureButton.js";
+import { SignatureCode } from "../SignatureCode/index.js";
+import { SignatureToolbar } from "../SignatureToolbar/index.js";
+import index_module from "./index.module.js";
+function ExampleBlock({ hast, code }) {
+    const { wrapped, toggleWrap } = useWrapToggle();
+    return /*#__PURE__*/ jsxs("div", {
+        className: index_module.block,
+        children: [
+            /*#__PURE__*/ jsx(SignatureToolbar, {
+                buttons: /*#__PURE__*/ jsxs(ButtonGroup, {
+                    children: [
+                        code && /*#__PURE__*/ jsx(CopyCodeButton, {
+                            code: code
+                        }),
+                        /*#__PURE__*/ jsx(WrapSignatureButton, {
+                            wrapped: wrapped,
+                            onToggle: toggleWrap
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsx(SignatureCode, {
+                hast: hast,
+                wrapped: wrapped
+            })
+        ]
+    });
+}
+const components_ExampleBlock = ExampleBlock;
+export default components_ExampleBlock;
+export { ExampleBlock };

package/runtime/components/ExampleBlock/index.module.js

@@ -0,0 +1,6 @@
+import "./index_module.css";
+const index_module = {
+    block: "block-g6Xu1V",
+    rpDark: "rp-dark-q3G77C"
+};
+export default index_module;

package/runtime/components/ExampleBlock/index_module.css

@@ -0,0 +1,12 @@
+.block-g6Xu1V {
+  margin: var(--api-spacing-xl) 0;
+  border-radius: var(--api-border-radius);
+  border: 1px solid var(--api-color-border);
+  position: relative;
+  overflow: visible;
+}
+
+html.rp-dark-q3G77C .block-g6Xu1V {
+  border-color: var(--api-color-border);
+}
+