@open-resource-discovery/metadata-renderer 1.0.1 → 1.1.1

package/README.md

@@ -17,6 +17,7 @@ React components that render metadata documents of various types consistently.
 - [AsyncAPI](https://asyncapi.com/) 2.x / 3.x (JSON or YAML) — via [@asyncapi/react-component](https://github.com/asyncapi/asyncapi-react)
 - [A2A Agent Cards](https://a2a-protocol.org/latest/specification/) — via [@open-resource-discovery/a2a-editor](https://www.npmjs.com/package/@open-resource-discovery/a2a-editor)
 - [MCP Server Cards](https://github.com/modelcontextprotocol/modelcontextprotocol/pull/2127) — via [@open-resource-discovery/mcp-server-card-ui](https://www.npmjs.com/package/@open-resource-discovery/mcp-server-card-ui)
+- [ORD Overlay](https://open-resource-discovery.org/) — via [@open-resource-discovery/overlay-editor](https://www.npmjs.com/package/@open-resource-discovery/overlay-editor)
 
 More formats will be added over time. See the [Support](https://open-resource-discovery.github.io/metadata-renderer/docs/Supported) page for the current list.
 

package/dist/a2a/index.d.ts

@@ -6,4 +6,4 @@ export type A2ARendererProps = {
     className?: string;
     theme?: RendererTheme;
 };
-export declare function A2ARenderer({ content, showValidation, showConnection, className, theme, }: A2ARendererProps): import("react").JSX.Element;
+export declare function A2ARenderer({ content, showValidation, showConnection, className, theme, }: A2ARendererProps): import('react').JSX.Element;

package/dist/a2a.js

@@ -1,2 +1,2 @@
-import { t as A2ARenderer } from "./chunks/a2a-B5lkgqLU.js";
+import { t as A2ARenderer } from "./chunks/a2a-BfdUdobQ.js";
 export { A2ARenderer };

package/dist/asyncApi/asyncapi-browser.d.ts

@@ -1,3 +1,13 @@
 declare module '@asyncapi/react-component/browser/index.js' {
     export { default } from '@asyncapi/react-component';
 }
+
+// The `PluginSlot` enum is defined in this dependency-free leaf module. We import
+// the runtime value from here (not from the package root) because the root entry
+// pulls in @asyncapi/parser -> @asyncapi/avro-schema-parser -> avsc, which needs
+// Node builtins and breaks browser consumers. The browser component's plugin
+// system keys on the same string values (INFO = "info"). Types are re-exported
+// from the package root and are erased at build time.
+declare module '@asyncapi/react-component/lib/esm/types.js' {
+    export { PluginSlot } from '@asyncapi/react-component';
+}

package/dist/asyncApi/customAttributes/attributeLink.d.ts

@@ -1,3 +1,3 @@
 export default function AttributeLink({ attributeName }: {
     attributeName: string;
-}): import("react").JSX.Element | null;
+}): import('react').JSX.Element | null;

package/dist/asyncApi/index.d.ts

@@ -8,4 +8,5 @@ export type AsyncApiRendererProps = {
     className?: string;
     theme?: RendererTheme;
 };
-export declare function AsyncApiRenderer({ content, config, customAttributes, className, theme }: AsyncApiRendererProps): import("react").JSX.Element;
+export declare function buildAsyncApiThemeStyle(id: string, theme: RendererTheme): string;
+export declare function AsyncApiRenderer({ content, config, customAttributes, className, theme }: AsyncApiRendererProps): import('react').JSX.Element;

package/dist/asyncapi.js

@@ -1,2 +1,2 @@
-import { t as AsyncApiRenderer } from "./chunks/asyncApi-DtAXW7IY.js";
+import { t as AsyncApiRenderer } from "./chunks/asyncApi-B7WZqXRI.js";
 export { AsyncApiRenderer };

package/dist/chunks/{a2a-B5lkgqLU.js → a2a-BfdUdobQ.js}

@@ -1,4 +1,4 @@
-import { t as buildShadcnThemeStyle } from "./utils-BC3WF3-9.js";
+import { t as buildShadcnThemeStyle } from "./utils-BLQCpHkJ.js";
 /* empty css              */
 import { useEffect, useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/chunks/{asyncApi-DtAXW7IY.js → asyncApi-B7WZqXRI.js}

@@ -1,10 +1,10 @@
-import { i as loadObject } from "./utils-BC3WF3-9.js";
+import { i as loadObject } from "./utils-BLQCpHkJ.js";
 /* empty css                 */
 import { createElement, useId, useMemo } from "react";
 import Markdown from "react-markdown";
 import { jsx, jsxs } from "react/jsx-runtime";
 import AsyncApiComponent from "@asyncapi/react-component/browser/index.js";
-import { PluginSlot } from "@asyncapi/react-component";
+import { PluginSlot } from "@asyncapi/react-component/lib/esm/types.js";
 //#region src/lib/asyncApi/customAttributes/context.ts
 var asyncApiContext = {
 	version: "",
@@ -311,7 +311,8 @@ function buildRootExtensionsPlugin(configs) {
 			const config = asyncApiContext.configs.find((c) => c.extensions?.[key]) ?? asyncApiContext.configs.find((c) => c.prefixStartsWith && key.startsWith(c.prefixStartsWith)) ?? configs[0];
 			if (!config) return [];
 			const def = config.extensions?.[key];
-			return [createElement(buildAsyncApiGenericRenderer(key, def, config), {
+			const fieldComponent = buildAsyncApiGenericRenderer(key, def, config);
+			return [createElement(fieldComponent, {
 				key,
 				propertyName: key,
 				propertyValue: value,
@@ -447,7 +448,7 @@ function buildAsyncApiThemeStyle(id, theme) {
 	if (accentFg) rules.push(`${scope} .text-gray-200, ${scope} .examples .text-gray-600 { color: ${accentFg} !important; } `);
 	if (fg) rules.push(`${scope} .text-gray-800, ${scope} .text-gray-900 { color: ${fg} !important; }`);
 	if (border) rules.push(`${scope} .border { border-color: ${border}; }`, `${scope} .border-b { border-bottom-color: ${border}; }`, `${scope} .border-gray-400 { border-color: ${border} !important; }`);
-	if (borderRadius) rules.push(`${scope} .rounded, ${scope} .prose pre, ${scope} .\\32 xl\\:rounded { border-radius: ${borderRadius}px; }`, `${scope} .rounded:not(.inline-block) { overflow: hidden; }`, `${scope} .rounded-tl-none { border-top-left-radius: 0px; }`, `${scope} .examples { border-radius: 0px !important; }`);
+	if (borderRadius) rules.push(`${scope} .rounded, ${scope} .prose pre { border-radius: ${borderRadius}px; }`, `@media (min-width: 1536px) {\n${scope} .\\32 xl\\:rounded { border-radius: ${borderRadius}px; }\n}`, `${scope} .rounded:not(.inline-block) { overflow: hidden; }`, `${scope} .rounded-tl-none { border-top-left-radius: 0px; }`);
 	return rules.join("\n");
 }
 function AsyncApiRenderer({ content, config, customAttributes, className, theme }) {
@@ -490,6 +491,7 @@ function AsyncApiRenderer({ content, config, customAttributes, className, theme
 			isEnabled && /* @__PURE__ */ jsx("style", { children: styles_default }),
 			/* @__PURE__ */ jsx("style", { children: layoutStyle }),
 			isEnabled && /* @__PURE__ */ jsx("style", { children: `[data-renderer-id="${id}"] #introduction .hidden { display: block !important; }` }),
+			!isEnabled && /* @__PURE__ */ jsx("style", { children: `[data-renderer-id="${id}"] :is(#operations, #messages) div:has(> .flex.py-2 span.Extensions) { display: none; }` }),
 			/* @__PURE__ */ jsx(AsyncApiComponent, {
 				schema: content,
 				config: effectiveConfig,

package/dist/chunks/{csn-3ek2O4d6.js → csn-CIBA2ds5.js}

@@ -1,4 +1,4 @@
-import { i as loadObject } from "./utils-BC3WF3-9.js";
+import { i as loadObject } from "./utils-BLQCpHkJ.js";
 import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { generateHtml } from "@sap/csn-interop-renderer";
@@ -254,35 +254,67 @@ function replaceNodeRun(parentNode, startNode, endNode, replacementHtml) {
 		cur = next;
 	}
 }
+function matchAnnotationRun(node, next) {
+	if (node.nodeType !== Node.TEXT_NODE) return null;
+	const text = (node.textContent ?? "").replace(/^\s+/, "");
+	const match = /^@([\w.]+):\s*$/.exec(text);
+	if (!match) return null;
+	if (!next || next.nodeType !== Node.ELEMENT_NODE) return null;
+	const el = next;
+	let codeEl = null;
+	if (el.tagName === "CODE") codeEl = el;
+	else if (el.tagName === "A") codeEl = el.querySelector("code");
+	if (!codeEl) return null;
+	return {
+		key: `@${match[1]}`,
+		valueNode: next,
+		codeEl
+	};
+}
 function collectAnnotationPairs(td, renderers) {
 	const pairs = [];
 	const childNodes = Array.from(td.childNodes);
 	for (let i = 0; i < childNodes.length - 1; i++) {
-		const node = childNodes[i];
-		if (node.nodeType !== Node.TEXT_NODE) continue;
-		const text = (node.textContent ?? "").replace(/^\s+/, "");
-		const match = /^@([\w.]+):\s*$/.exec(text);
-		if (!match) continue;
-		const key = `@${match[1]}`;
-		const entry = renderers.get(key);
+		const run = matchAnnotationRun(childNodes[i], childNodes[i + 1]);
+		if (!run) continue;
+		const entry = renderers.get(run.key);
 		if (!entry) continue;
-		const valueNode = childNodes[i + 1];
-		if (!valueNode || valueNode.nodeType !== Node.ELEMENT_NODE) continue;
-		const el = valueNode;
-		let codeEl = null;
-		if (el.tagName === "CODE") codeEl = el;
-		else if (el.tagName === "A") codeEl = el.querySelector("code");
-		if (!codeEl) continue;
 		pairs.push({
-			textNode: node,
-			valueNode,
-			codeEl,
-			key,
+			textNode: childNodes[i],
+			valueNode: run.valueNode,
+			codeEl: run.codeEl,
+			key: run.key,
 			entry
 		});
 	}
 	return pairs;
 }
+function precedingBr(textNode) {
+	let prev = textNode.previousSibling;
+	if (prev && prev.nodeType === Node.TEXT_NODE && !(prev.textContent ?? "").trim()) prev = prev.previousSibling;
+	return prev && prev.nodeType === Node.ELEMENT_NODE && prev.tagName === "BR" ? prev : null;
+}
+function stripAllAnnotations(html) {
+	const domDoc = new DOMParser().parseFromString(html, "text/html");
+	for (const container of Array.from(domDoc.querySelectorAll("td, p"))) {
+		const childNodes = Array.from(container.childNodes);
+		const runs = [];
+		for (let i = 0; i < childNodes.length - 1; i++) {
+			const run = matchAnnotationRun(childNodes[i], childNodes[i + 1]);
+			if (!run) continue;
+			runs.push({
+				textNode: childNodes[i],
+				valueNode: run.valueNode,
+				br: precedingBr(childNodes[i])
+			});
+		}
+		for (const { textNode, valueNode, br } of runs) {
+			replaceNodeRun(container, textNode, valueNode, "");
+			if (br && br.parentNode === container) container.removeChild(br);
+		}
+	}
+	return domDoc.body.innerHTML;
+}
 function applyAnnotationRenderers(html, configs, doc) {
 	const renderers = /* @__PURE__ */ new Map();
 	for (const config of configs) {
@@ -349,7 +381,7 @@ function CsnRenderer({ content, config, customAttributes, className, theme }) {
 			}
 		};
 		generateHtml(parsed, rendererConfig).then((html) => {
-			const processed = isEnabled ? applyAnnotationRenderers(html, activeConfigs, parsedDoc) : html;
+			const processed = isEnabled ? applyAnnotationRenderers(html, activeConfigs, parsedDoc) : stripAllAnnotations(html);
 			if (!cancelled) setState({
 				kind: "ready",
 				html: processed

package/dist/chunks/{mcp-qA5sYRAN.js → mcp-Yb3SHisP.js}

@@ -1,4 +1,4 @@
-import { t as buildShadcnThemeStyle } from "./utils-BC3WF3-9.js";
+import { t as buildShadcnThemeStyle } from "./utils-BLQCpHkJ.js";
 /* empty css              */
 import { useEffect, useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/chunks/{openApi-BTb5yzun.js → openApi-D0QJn2Gd.js}

@@ -1,4 +1,4 @@
-import { i as loadObject } from "./utils-BC3WF3-9.js";
+import { i as loadObject } from "./utils-BLQCpHkJ.js";
 /* empty css               */
 import { createElement, useEffect, useId, useMemo, useRef } from "react";
 import { ApiReferenceReact } from "@scalar/api-reference-react";
@@ -522,6 +522,26 @@ function buildScalarThemeStyles(id, theme) {
 	})()].filter(Boolean).join("\n\n");
 }
 //#endregion
+//#region src/lib/openApi/utils/sidebarHeight.ts
+/**
+* Nearest ancestor a `position: sticky` descendant sticks within — one that clips or scrolls
+* vertically — or `null` when that is the document itself.
+*/
+function findScrollParent(el) {
+	for (let node = el.parentElement; node && node !== document.body; node = node.parentElement) if (/^(auto|scroll|overlay|hidden)$/.test(getComputedStyle(node).overflowY)) return node;
+	return null;
+}
+/**
+* Height for Scalar's sticky sidebar (`--scalar-container-height`, see `styles.ts`): the renderer's
+* own box, but never taller than what is visible of it — the nearest scroll container and the
+* viewport. In a host that bounds the box this is just the box; in one that doesn't, the box is as
+* tall as Scalar's layout, which is as tall as the sidebar, so measuring the box alone would let the
+* height grow and never shrink back to the content.
+*/
+function sidebarHeight(containerHeight, scrollPortHeight, viewportHeight) {
+	return Math.min(containerHeight, scrollPortHeight ?? Infinity, viewportHeight);
+}
+//#endregion
 //#region src/lib/openApi/styles.ts
 var styles_default = `
 .sap-api-container {
@@ -711,7 +731,8 @@ a:hover {
 }
 
 /* Override Scalar's sidebar height variable so the <aside> uses our measured container height
-   instead of Scalar's default 100dvh (which breaks when embedded in Docusaurus/non-fullscreen). */
+   instead of Scalar's default 100dvh (which breaks when embedded in Docusaurus/non-fullscreen).
+   The measurement is capped at the visible height — see utils/sidebarHeight.ts. */
 .scalar-app {
     --refs-sidebar-height: calc(var(--scalar-container-height, 100dvh) - var(--refs-header-height, 0px));
 }
@@ -727,13 +748,20 @@ function OpenApiRenderer({ content, customAttributes, className, theme }) {
 	useEffect(() => {
 		const el = containerRef.current;
 		if (!el) return;
-		const ro = new ResizeObserver(([entry]) => {
-			el.style.setProperty("--scalar-container-height", `${entry.contentRect.height}px`);
-		});
+		const scrollPort = findScrollParent(el);
+		const update = () => {
+			const height = sidebarHeight(el.clientHeight, scrollPort?.clientHeight ?? null, window.innerHeight);
+			el.style.setProperty("--scalar-container-height", `${height}px`);
+		};
+		const ro = new ResizeObserver(update);
 		ro.observe(el);
+		if (scrollPort) ro.observe(scrollPort);
+		window.addEventListener("resize", update);
 		return () => {
 			ro.disconnect();
+			window.removeEventListener("resize", update);
 			if (window.location.hash) history.replaceState(null, "", window.location.pathname + window.location.search);
+			document.body.classList.remove("light-mode", "dark-mode");
 		};
 	}, []);
 	const customAttributesKey = useMemo(() => {

package/dist/chunks/overlay-CO0o6FYy.js

@@ -0,0 +1,41 @@
+import { t as buildShadcnThemeStyle } from "./utils-BLQCpHkJ.js";
+/* empty css              */
+import { useEffect, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { OverlayCardView, useOverlayStore, useTheme } from "@open-resource-discovery/overlay-editor/card-view";
+//#region src/lib/overlay/index.tsx
+function OverlayRenderer({ content, className, theme }) {
+	const id = useId();
+	const { setTheme } = useTheme();
+	const isDark = className?.split(/\s+/).includes("dark") ?? false;
+	useEffect(() => {
+		useOverlayStore.getState().setRawJson(content);
+	}, [content]);
+	useEffect(() => {
+		setTheme(isDark ? "dark" : "light");
+	}, [isDark, setTheme]);
+	const themeStyle = theme ? buildShadcnThemeStyle("overlay-root", id, theme) : null;
+	const footerThemeStyle = theme ? buildShadcnThemeStyle("overlay-sidebar-footer-mobile", id, theme) : null;
+	const scopedStyles = `
+        ${`[data-renderer-id="${id}"] .overlay-root`} code {
+            color: var(--ord-code-fg, var(--ord-foreground, #24292f));
+            background-color: var(--ord-code-bg, var(--ord-muted, #f6f8fa));
+        }
+        [data-renderer-id="${id}"] .overlay-sidebar-footer-mobile {
+            background: var(--ord-background);
+            color: var(--ord-muted-foreground);
+        }
+    `;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-renderer-id": id,
+		className: "h-full",
+		children: [
+			/* @__PURE__ */ jsx("style", { children: scopedStyles }),
+			themeStyle && /* @__PURE__ */ jsx("style", { children: themeStyle }),
+			footerThemeStyle && /* @__PURE__ */ jsx("style", { children: footerThemeStyle }),
+			/* @__PURE__ */ jsx(OverlayCardView, {})
+		]
+	});
+}
+//#endregion
+export { OverlayRenderer as t };

package/dist/chunks/{utils-BC3WF3-9.js → utils-BLQCpHkJ.js}

@@ -25,6 +25,7 @@ function detectMetaType(content) {
 	if (typeof o.csnInteropEffective === "string") return "csn";
 	if (typeof o.openapi === "string" || typeof o.swagger === "string") return "openapi";
 	if (typeof o.asyncapi === "string") return "asyncapi";
+	if (typeof o.ordOverlay === "string" && Array.isArray(o.patches)) return "overlay";
 	if (Array.isArray(o.supportedProtocolVersions)) return "mcp";
 	if (typeof o.capabilities === "object" && o.capabilities !== null && Array.isArray(o.skills)) return "a2a";
 	return "unknown";
@@ -38,6 +39,7 @@ function extractVersion(type, content) {
 			if (typeof o.swagger === "string") return "2.0";
 			return "";
 		case "asyncapi": return typeof o.asyncapi === "string" ? o.asyncapi : "";
+		case "overlay": return typeof o.ordOverlay === "string" ? o.ordOverlay : "";
 		case "a2a":
 			if (typeof o.protocolVersion === "string") return o.protocolVersion;
 			if (Array.isArray(o.supportedInterfaces) && o.supportedInterfaces.length > 0) {

package/dist/core/ShadowRoot.d.ts

@@ -3,4 +3,4 @@ export type ShadowRootProps = {
     styles?: string;
     children: ReactNode;
 };
-export declare function ShadowRoot({ styles, children }: ShadowRootProps): import("react").JSX.Element;
+export declare function ShadowRoot({ styles, children }: ShadowRootProps): import('react').JSX.Element;

package/dist/core/index.d.ts

@@ -8,4 +8,4 @@ export type MetadataRendererProps = {
     className?: string;
     theme?: RendererTheme;
 };
-export declare function MetadataRenderer({ content, renderers, options, type, className, theme }: MetadataRendererProps): import("react").JSX.Element;
+export declare function MetadataRenderer({ content, renderers, options, type, className, theme }: MetadataRendererProps): import('react').JSX.Element;

package/dist/core/utils.d.ts

@@ -1,5 +1,5 @@
 import { RendererTheme } from '../types';
-export type MetaType = 'csn' | 'openapi' | 'asyncapi' | 'a2a' | 'mcp' | 'unknown';
+export type MetaType = 'csn' | 'openapi' | 'asyncapi' | 'overlay' | 'a2a' | 'mcp' | 'unknown';
 export declare function loadObject(content: string): undefined | object;
 export declare function detectMetaType(content: string): MetaType;
 export declare function extractVersion(type: MetaType, content: string): string;

package/dist/csn/customAttributes/postProcess.d.ts

@@ -1,5 +1,6 @@
 import { CsnCustomAttributesConfig } from './types';
 type Rec = Record<string, unknown>;
 export declare function discoverAnnotationKeys(doc: Rec, prefix: string): string[];
+export declare function stripAllAnnotations(html: string): string;
 export declare function applyAnnotationRenderers(html: string, configs: CsnCustomAttributesConfig[], doc: Rec | null): string;
 export {};

package/dist/csn/customAttributes/postProcess.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/csn/index.d.ts

@@ -8,4 +8,4 @@ export type CsnRendererProps = {
     className?: string;
     theme?: RendererTheme;
 };
-export declare function CsnRenderer({ content, config, customAttributes, className, theme }: CsnRendererProps): import("react").JSX.Element;
+export declare function CsnRenderer({ content, config, customAttributes, className, theme }: CsnRendererProps): import('react').JSX.Element;

package/dist/csn.js

@@ -1,2 +1,2 @@
-import { t as CsnRenderer } from "./chunks/csn-3ek2O4d6.js";
+import { t as CsnRenderer } from "./chunks/csn-CIBA2ds5.js";
 export { CsnRenderer };

package/dist/entries/overlay.d.ts

@@ -0,0 +1,2 @@
+export { OverlayRenderer } from '../overlay';
+export type { OverlayRendererProps } from '../overlay';