rspress-plugin-api-extractor 0.1.1 → 0.2.0

package/runtime/components/SignatureCode/index.js

@@ -0,0 +1,44 @@
+import { hastToReact } from "../../utils/hast-renderer.js";
+import index_module_default from "./index.module.js";
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+
+//#region src/runtime/components/SignatureCode/index.tsx
+/**
+* Code block for displaying syntax-highlighted signatures
+* Supports wrapped and unwrapped states
+* Uses HAST for safe rendering without dangerouslySetInnerHTML
+*/
+function SignatureCode({ hast, wrapped }) {
+	const containerRef = useRef(null);
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		const handleMouseOver = (e) => {
+			const hover = e.target.closest?.(".twoslash-hover");
+			if (!hover) return;
+			const popup = hover.querySelector(".twoslash-popup-container");
+			if (!popup) return;
+			const hoverRect = hover.getBoundingClientRect();
+			const containerWidth = container.getBoundingClientRect().width;
+			popup.style.setProperty("--popup-top", `${hoverRect.bottom + 4}px`);
+			popup.style.setProperty("--popup-left", `${hoverRect.left}px`);
+			popup.style.setProperty("--popup-max-width", `${containerWidth * .75}px`);
+		};
+		container.addEventListener("mouseover", handleMouseOver);
+		return () => container.removeEventListener("mouseover", handleMouseOver);
+	}, []);
+	if (!hast) return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		className: clsx(index_module_default.code, wrapped && index_module_default.wrapped)
+	});
+	return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		className: clsx("api-doc-code", index_module_default.code, wrapped && index_module_default.wrapped),
+		children: hastToReact(hast)
+	});
+}
+
+//#endregion
+export { SignatureCode };

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

@@ -0,0 +1,10 @@
+import './index.css';
+//#region src/runtime/components/SignatureCode/index.module.css
+var index_module_default = {
+	"code": "Ze8uHG_code",
+	"rpDark": "Ze8uHG_rp-dark",
+	"wrapped": "Ze8uHG_wrapped"
+};
+
+//#endregion
+export { index_module_default as default };

package/runtime/components/SignatureToolbar/index.css

@@ -0,0 +1,122 @@
+.HQ_pKG_toolbar {
+  justify-content: flex-end;
+  align-items: flex-end;
+  gap: var(--api-spacing-sm);
+  padding: var(--api-spacing-sm);
+  background-color: var(--api-color-bg);
+  border-top-left-radius: var(--api-border-radius);
+  border-top-right-radius: var(--api-border-radius);
+  display: flex;
+}
+
+html.HQ_pKG_rp-dark .HQ_pKG_toolbar {
+  background-color: var(--api-color-bg);
+  border-bottom-color: var(--api-color-border);
+}
+
+.HQ_pKG_toolbar:has(.HQ_pKG_memberHeading) {
+  justify-content: space-between;
+}
+
+.HQ_pKG_toolbar h2, .HQ_pKG_toolbar h3 {
+  font-size: var(--api-font-size-lg);
+  padding-left: var(--api-spacing-sm);
+  font-family: var(--rp-font-family-mono);
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.HQ_pKG_toolbarLeft {
+  gap: var(--api-spacing-sm);
+  flex-direction: column;
+  flex: 1;
+  display: flex;
+}
+
+.HQ_pKG_memberHeading {
+  font-size: var(--api-font-size-md);
+  color: var(--api-color-text);
+  height: auto;
+  font-weight: 600;
+  line-height: var(--api-line-height-base);
+  user-select: auto;
+  margin: 0;
+  position: relative;
+  overflow: visible;
+}
+
+html.HQ_pKG_rp-dark .HQ_pKG_memberHeading {
+  color: var(--api-color-text);
+}
+
+.HQ_pKG_memberHeading .rp-header-anchor {
+  opacity: 0;
+  font-weight: 500;
+  font-size: inherit;
+  color: var(--rp-c-brand);
+  text-decoration: none;
+  transition: color .25s, opacity .25s;
+  position: absolute;
+  left: -1.2rem;
+}
+
+.HQ_pKG_memberHeading:hover .rp-header-anchor {
+  opacity: .85;
+}
+
+.HQ_pKG_memberHeading .rp-header-anchor:hover {
+  border-bottom: 1px solid var(--rp-c-brand);
+  opacity: .85;
+}
+
+.HQ_pKG_memberHeadingH2 {
+  font-size: var(--api-font-size-lg);
+  text-transform: lowercase;
+  border-top: none;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-top: 0;
+  font-weight: 600;
+  line-height: 2rem;
+}
+
+.HQ_pKG_memberHeadingH2:before, .HQ_pKG_memberHeadingH2:after {
+  content: none;
+  margin: 0;
+  padding: 0;
+  display: none;
+}
+
+.HQ_pKG_memberHeadingH2 .rp-header-anchor {
+  font-size: var(--api-font-size-lg);
+  left: -1.5rem;
+}
+
+.HQ_pKG_summary {
+  padding: 0;
+  padding-left: var(--api-spacing-sm);
+  font-size: var(--api-font-size-md);
+  line-height: var(--api-line-height-base);
+  color: var(--api-color-text-secondary);
+  background-color: #0000;
+  border: none;
+}
+
+html.HQ_pKG_rp-dark .HQ_pKG_summary {
+  color: var(--api-color-text-secondary);
+  background-color: #0000;
+  border: none;
+}
+
+.HQ_pKG_summary p:first-child {
+  margin-top: 0;
+}
+
+.HQ_pKG_summary p:last-child, .HQ_pKG_summary ul:last-child, .HQ_pKG_summary ol:last-child {
+  margin-bottom: 0;
+}
+
+.HQ_pKG_buttons {
+  gap: var(--api-spacing-sm);
+  display: flex;
+}

package/runtime/components/SignatureToolbar/index.js

@@ -0,0 +1,52 @@
+import { MarkdownContent } from "../MarkdownContent/index.js";
+import index_module_default from "./index.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+
+//#region src/runtime/components/SignatureToolbar/index.tsx
+/**
+* Toolbar for signature blocks
+* Displays optional heading, summary, and action buttons
+*/
+function SignatureToolbar({ heading, summary, buttons }) {
+	const renderHeading = () => {
+		if (!heading) return null;
+		const HeadingTag = heading.level;
+		const headingClasses = heading.className || clsx("rp-toc-include", index_module_default.memberHeading, heading.level === "h2" && index_module_default.memberHeadingH2);
+		return /* @__PURE__ */ jsxs(HeadingTag, {
+			id: heading.id,
+			className: headingClasses,
+			children: [heading.id && /* @__PURE__ */ jsx("a", {
+				href: `#${heading.id}`,
+				className: "rp-header-anchor rp-link",
+				tabIndex: -1,
+				"aria-label": "Permalink",
+				children: "#"
+			}), heading.text]
+		});
+	};
+	const renderSummary = () => {
+		if (!summary) return null;
+		return /* @__PURE__ */ jsx("div", {
+			className: index_module_default.summary,
+			children: /* @__PURE__ */ jsx(MarkdownContent, { children: summary })
+		});
+	};
+	if (heading) return /* @__PURE__ */ jsxs("div", {
+		className: index_module_default.toolbar,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: index_module_default.toolbarLeft,
+			children: [renderHeading(), renderSummary()]
+		}), /* @__PURE__ */ jsx("div", {
+			className: index_module_default.buttons,
+			children: buttons
+		})]
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: index_module_default.toolbar,
+		children: buttons
+	});
+}
+
+//#endregion
+export { SignatureToolbar };

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

@@ -0,0 +1,14 @@
+import './index.css';
+//#region src/runtime/components/SignatureToolbar/index.module.css
+var index_module_default = {
+	"buttons": "HQ_pKG_buttons",
+	"memberHeading": "HQ_pKG_memberHeading",
+	"memberHeadingH2": "HQ_pKG_memberHeadingH2",
+	"rpDark": "HQ_pKG_rp-dark",
+	"summary": "HQ_pKG_summary",
+	"toolbar": "HQ_pKG_toolbar",
+	"toolbarLeft": "HQ_pKG_toolbarLeft"
+};
+
+//#endregion
+export { index_module_default as default };

package/runtime/components/buttons/ButtonGroup.js

@@ -0,0 +1,16 @@
+import index_module_default from "./index.module.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/runtime/components/buttons/ButtonGroup.tsx
+/**
+* Container for grouping multiple buttons with consistent spacing
+*/
+function ButtonGroup({ children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: index_module_default.buttonGroup,
+		children
+	});
+}
+
+//#endregion
+export { ButtonGroup };

package/runtime/components/buttons/CopyCodeButton.js

@@ -0,0 +1,44 @@
+import index_module_default from "./index.module.js";
+import { CheckIcon } from "../icons/CheckIcon/index.js";
+import { CopyIcon } from "../icons/CopyIcon/index.js";
+import { useCallback, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+
+//#region src/runtime/components/buttons/CopyCodeButton.tsx
+/**
+* Copy code button for code blocks
+* Shows copy icon, changes to checkmark on success
+*/
+function CopyCodeButton({ code }) {
+	const [copied, setCopied] = useState(false);
+	const handleCopy = useCallback(async () => {
+		try {
+			await navigator.clipboard.writeText(code);
+			setCopied(true);
+			setTimeout(() => setCopied(false), 2e3);
+		} catch {
+			const textarea = document.createElement("textarea");
+			textarea.value = code;
+			textarea.style.position = "fixed";
+			textarea.style.opacity = "0";
+			document.body.appendChild(textarea);
+			textarea.select();
+			document.execCommand("copy");
+			document.body.removeChild(textarea);
+			setCopied(true);
+			setTimeout(() => setCopied(false), 2e3);
+		}
+	}, [code]);
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: clsx(index_module_default.button, copied && "active"),
+		onClick: handleCopy,
+		"aria-label": copied ? "Copied!" : "Copy code",
+		title: copied ? "Copied!" : "Copy code",
+		children: copied ? /* @__PURE__ */ jsx(CheckIcon, { size: 16 }) : /* @__PURE__ */ jsx(CopyIcon, { size: 16 })
+	});
+}
+
+//#endregion
+export { CopyCodeButton };

package/runtime/components/buttons/WrapSignatureButton.js

@@ -0,0 +1,24 @@
+import index_module_default from "./index.module.js";
+import { UnwrapIcon } from "../icons/UnwrapIcon/index.js";
+import { WrapIcon } from "../icons/WrapIcon/index.js";
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+
+//#region src/runtime/components/buttons/WrapSignatureButton.tsx
+/**
+* Wrap toggle button for API signature blocks
+* Shows wrapped/unwrapped state with distinct icons
+*/
+function WrapSignatureButton({ wrapped, onToggle }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: clsx(index_module_default.button, wrapped && "active"),
+		onClick: onToggle,
+		"aria-label": wrapped ? "Disable line wrapping" : "Enable line wrapping",
+		title: wrapped ? "Disable wrapping" : "Enable wrapping",
+		children: wrapped ? /* @__PURE__ */ jsx(UnwrapIcon, { size: 16 }) : /* @__PURE__ */ jsx(WrapIcon, { size: 16 })
+	});
+}
+
+//#endregion
+export { WrapSignatureButton };

package/runtime/components/buttons/index.css

@@ -0,0 +1,36 @@
+.Fw3JAa_buttonGroup {
+  gap: var(--api-spacing-sm);
+  display: flex;
+}
+
+.Fw3JAa_button {
+  align-items: center;
+  gap: var(--api-spacing-xs);
+  padding: var(--api-spacing-xs) var(--api-spacing-md);
+  font-size: var(--api-font-size-sm);
+  font-weight: 500;
+  line-height: var(--api-line-height-button);
+  color: var(--api-color-text);
+  background-color: var(--api-color-bg-secondary);
+  border: 1px solid var(--api-color-border-secondary);
+  border-radius: var(--api-border-radius);
+  cursor: pointer;
+  transition: all var(--api-transition-fast);
+  display: inline-flex;
+}
+
+.Fw3JAa_button:hover {
+  background-color: var(--api-color-hover-bg);
+  border-color: var(--api-color-border-hover);
+}
+
+.Fw3JAa_button:active {
+  background-color: var(--api-color-active-bg);
+  transform: scale(.98);
+}
+
+.Fw3JAa_button svg {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+}

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

@@ -0,0 +1,9 @@
+import './index.css';
+//#region src/runtime/components/buttons/index.module.css
+var index_module_default = {
+	"button": "Fw3JAa_button",
+	"buttonGroup": "Fw3JAa_buttonGroup"
+};
+
+//#endregion
+export { index_module_default as default };

package/runtime/components/icons/CheckIcon/index.js

@@ -0,0 +1,23 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/runtime/components/icons/CheckIcon/index.tsx
+/**
+* Check/checkmark icon for success states
+* Shows a checkmark indicating success/completion
+*/
+function CheckIcon({ size = 16, ...props }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: size,
+		height: size,
+		viewBox: "0 0 24 24",
+		...props,
+		children: [/* @__PURE__ */ jsx("title", { children: "Copied" }), /* @__PURE__ */ jsx("path", {
+			fill: "currentColor",
+			d: "M21 7L9 19l-5.5-5.5l1.41-1.41L9 16.17L19.59 5.59L21 7Z"
+		})]
+	});
+}
+
+//#endregion
+export { CheckIcon };

package/runtime/components/icons/CopyIcon/index.js

@@ -0,0 +1,23 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/runtime/components/icons/CopyIcon/index.tsx
+/**
+* Copy icon for copy code buttons
+* Shows two overlapping rectangles indicating copy/duplicate
+*/
+function CopyIcon({ size = 16, ...props }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: size,
+		height: size,
+		viewBox: "0 0 24 24",
+		...props,
+		children: [/* @__PURE__ */ jsx("title", { children: "Copy" }), /* @__PURE__ */ jsx("path", {
+			fill: "currentColor",
+			d: "M19 21H8V7h11m0-2H8a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2m-3-4H4a2 2 0 0 0-2 2v14h2V3h12V1Z"
+		})]
+	});
+}
+
+//#endregion
+export { CopyIcon };

package/runtime/components/icons/UnwrapIcon/index.js

@@ -0,0 +1,25 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/runtime/components/icons/UnwrapIcon/index.tsx
+/**
+* Unwrap icon for text wrapping toggle buttons (active state)
+* Shows wrapped lines with an arrow indicating active wrap mode
+* Uses green color to indicate active state
+*/
+function UnwrapIcon({ size = 16, ...props }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: size,
+		height: size,
+		viewBox: "0 0 24 24",
+		"aria-label": "Wrapped",
+		...props,
+		children: [/* @__PURE__ */ jsx("title", { children: "Unwrap" }), /* @__PURE__ */ jsx("path", {
+			fill: "#22a041",
+			d: "M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3l4 3v-2h2c2.95 0 4-1.27 4-4c0-2.72-1-4-4-4H3z"
+		})]
+	});
+}
+
+//#endregion
+export { UnwrapIcon };

package/runtime/components/icons/WrapIcon/index.js

@@ -0,0 +1,23 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/runtime/components/icons/WrapIcon/index.tsx
+/**
+* Wrap icon for text wrapping toggle buttons
+* Shows lines with an arrow indicating text will wrap
+*/
+function WrapIcon({ size = 16, ...props }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: size,
+		height: size,
+		viewBox: "0 0 24 24",
+		...props,
+		children: [/* @__PURE__ */ jsx("title", { children: "Wrap" }), /* @__PURE__ */ jsx("path", {
+			fill: "currentColor",
+			d: "M16 7H3V5h13v2M3 19h13v-2H3v2m19-7l-4-3v2H3v2h15v2l4-3Z"
+		})]
+	});
+}
+
+//#endregion
+export { WrapIcon };