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

package/dist/index.d.ts

@@ -6,6 +6,8 @@ export { CsnRenderer } from './csn';
 export type { CsnRendererProps } from './csn';
 export { AsyncApiRenderer } from './asyncApi';
 export type { AsyncApiRendererProps } from './asyncApi';
+export { OverlayRenderer } from './overlay';
+export type { OverlayRendererProps } from './overlay';
 export { A2ARenderer } from './a2a';
 export type { A2ARendererProps } from './a2a';
 export { McpRenderer } from './mcp';

package/dist/index.js

@@ -1,9 +1,10 @@
-import { i as loadObject, n as detectMetaType, r as extractVersion } from "./chunks/utils-BC3WF3-9.js";
-import { n as attributeLink, t as OpenApiRenderer } from "./chunks/openApi-BTb5yzun.js";
-import { t as CsnRenderer } from "./chunks/csn-3ek2O4d6.js";
-import { n as AttributeLink, t as AsyncApiRenderer } from "./chunks/asyncApi-DtAXW7IY.js";
-import { t as A2ARenderer } from "./chunks/a2a-B5lkgqLU.js";
-import { t as McpRenderer } from "./chunks/mcp-qA5sYRAN.js";
+import { i as loadObject, n as detectMetaType, r as extractVersion } from "./chunks/utils-BLQCpHkJ.js";
+import { n as attributeLink, t as OpenApiRenderer } from "./chunks/openApi-D0QJn2Gd.js";
+import { t as CsnRenderer } from "./chunks/csn-CIBA2ds5.js";
+import { n as AttributeLink, t as AsyncApiRenderer } from "./chunks/asyncApi-B7WZqXRI.js";
+import { t as OverlayRenderer } from "./chunks/overlay-CO0o6FYy.js";
+import { t as A2ARenderer } from "./chunks/a2a-BfdUdobQ.js";
+import { t as McpRenderer } from "./chunks/mcp-Yb3SHisP.js";
 import { useMemo, useState } from "react";
 import Markdown from "react-markdown";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -33,6 +34,7 @@ var DEFAULT_RENDERERS = {
 	openapi: OpenApiRenderer,
 	csn: CsnRenderer,
 	asyncapi: AsyncApiRenderer,
+	overlay: OverlayRenderer,
 	a2a: A2ARenderer,
 	mcp: McpRenderer
 };
@@ -40,6 +42,7 @@ var PROTOCOL_LABELS = {
 	openapi: "OpenAPI",
 	csn: "CSN",
 	asyncapi: "AsyncAPI",
+	overlay: "Overlay",
 	a2a: "A2A",
 	mcp: "MCP"
 };
@@ -81,13 +84,15 @@ function MetadataRenderer({ content, renderers, options, type, className, theme
 				"’ was specified."
 			]
 		});
-	} else if (RendererComponent) renderer = /* @__PURE__ */ jsx(RendererComponent, {
-		content,
-		className,
-		theme,
-		...buildRendererExtraProps(metaType, options)
-	});
-	else if (options?.fallback === "raw") renderer = /* @__PURE__ */ jsx("pre", {
+	} else if (RendererComponent) {
+		const extraProps = buildRendererExtraProps(metaType, options);
+		renderer = /* @__PURE__ */ jsx(RendererComponent, {
+			content,
+			className,
+			theme,
+			...extraProps
+		});
+	} else if (options?.fallback === "raw") renderer = /* @__PURE__ */ jsx("pre", {
 		style: {
 			margin: 0,
 			padding: 16,
@@ -114,12 +119,12 @@ function MetadataRenderer({ content, renderers, options, type, className, theme
 			height: "100%",
 			...theme
 		},
-		children: [label && /* @__PURE__ */ jsxs("div", {
+		children: [label && label !== PROTOCOL_LABELS.overlay && label !== PROTOCOL_LABELS.openapi && /* @__PURE__ */ jsxs("div", {
 			style: {
 				position: "absolute",
 				top: 8,
 				right: 8,
-				zIndex: 10,
+				zIndex: 100,
 				padding: "2px 8px",
 				borderRadius: 4,
 				fontSize: 11,
@@ -780,4 +785,4 @@ var sapCsnAttributesConfig = {
 	}
 };
 //#endregion
-export { A2ARenderer, AsyncApiRenderer, CsnRenderer, McpRenderer, MetadataRenderer, OpenApiRenderer, createTheme, detectMetaType, extractVersion, loadObject, sapAsyncApiAttributesConfig, sapCsnAttributesConfig, sapOpenApiAttributesConfig };
+export { A2ARenderer, AsyncApiRenderer, CsnRenderer, McpRenderer, MetadataRenderer, OpenApiRenderer, OverlayRenderer, createTheme, detectMetaType, extractVersion, loadObject, sapAsyncApiAttributesConfig, sapCsnAttributesConfig, sapOpenApiAttributesConfig };

package/dist/mcp/index.d.ts

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

package/dist/mcp.js

@@ -1,2 +1,2 @@
-import { t as McpRenderer } from "./chunks/mcp-qA5sYRAN.js";
+import { t as McpRenderer } from "./chunks/mcp-Yb3SHisP.js";
 export { McpRenderer };

package/dist/openApi/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/openApi/index.d.ts

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

package/dist/openApi/styles.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "\n.sap-api-container {\n    display: flex;\n    flex-wrap: wrap;\n    container-type: inline-size;\n    border: var(--scalar-border-width) solid var(--scalar-border-color);\n    border-radius: var(--scalar-radius-lg);\n    margin-top: 8px;\n    font-size: var(--scalar-small);\n    line-height: var(--scalar-line-height-3);\n    overflow: hidden;\n}\n\n.sap-api-label {\n    color: var(--scalar-color-1);\n    width: 30%;\n    min-width: 20ch;\n    flex-shrink: 0;\n    background: var(--scalar-background-2);\n    padding: 6px 9px 6px 12px;\n    border-right: var(--scalar-border-width) solid var(--scalar-border-color);\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    font-weight: 500;\n}\n\n.sap-api-label--root {\n    min-width: 20ch;\n}\n\n.sap-api-value {\n    color: var(--scalar-color-2);\n    padding: 8px;\n    flex: 1 1 0;\n    min-width: 0;\n}\n\n.sap-api-value--root {\n    flex: 1 1 0;\n    min-width: 0;\n}\n\n.sap-api-list {\n    margin: 0 2ch;\n    list-style: disc;\n}\n\n.sap-api-link {\n    text-decoration: none;\n    color: var(--scalar-link-color);\n    transition: color 0.1s ease-in-out;\n    cursor: pointer;\n}\n\n.sap-api-ord-id {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n}\n\n.sap-api-ord-id-text {\n    flex: 1 1 auto;\n    min-width: 0;\n    word-break: break-all;\n}\n\n.sap-api-copy-btn {\n    flex-shrink: 0;\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 1em;\n    line-height: 1;\n    padding: 4px;\n    color: var(--scalar-color-2);\n    background: var(--scalar-background-2);\n    border: var(--scalar-border-width) solid var(--scalar-border-color);\n    border-radius: var(--scalar-radius);\n    transition: background 0.1s ease-in-out, color 0.1s ease-in-out;\n}\n\n.sap-api-copy-btn:hover {\n    background: var(--scalar-background-3);\n    color: var(--scalar-color-1);\n}\n\n.sap-api-placeholder {\n    color: #999;\n}\n\n.sap-api-obj {\n    margin: 0;\n    padding-left: 12px;\n}\n\n.sap-api-obj-row {\n    margin-bottom: 4px;\n}\n\n.sap-api-obj-key {\n    font-weight: 600;\n    display: inline;\n}\n\n.sap-api-obj-val {\n    display: inline;\n    margin: 0;\n}\n\n/* Width-adaptive rows: react to the row's own available width (container-type above).\n   When the row is narrow, label and value wrap onto separate lines (label above value). */\n@container (max-width: 420px) {\n    .sap-api-label,\n    .sap-api-label--root {\n        flex-basis: 100%;\n        width: 100%;\n        min-width: 0;\n        border-right: none;\n        border-bottom: var(--scalar-border-width) solid var(--scalar-border-color);\n    }\n    .sap-api-value,\n    .sap-api-value--root {\n        flex-basis: 100%;\n        width: 100%;\n    }\n}\n\na {\n    text-decoration: none;\n    color: var(--sapLinkColor);\n    transition: color 0.1s ease-in-out;\n    cursor: pointer;\n}\na:hover {\n    text-decoration: underline;\n}\n\n/* Keyboard key: use Scalar background instead of Infima colors */\n.scalar-app kbd {\n    background: var(--scalar-background-1);\n    color: var(--scalar-color-1);\n    border: 1px solid var(--scalar-border-color);\n}\n\n/* Syntax highlighting \u2014 override --scalar-color-* with ThemeEditor --ord-hljs-* tokens */\n.scalar-app .hljs-attr,\n.scalar-app .hljs-attribute { color: var(--ord-hljs-attr); }\n\n.scalar-app .hljs-string,\n.scalar-app .hljs-regexp,\n.scalar-app .hljs-subst,\n.scalar-app .hljs-doctag,\n.scalar-app .hljs-bullet,\n.scalar-app .hljs-link,\n.scalar-app .hljs-meta,\n.scalar-app .hljs-symbol { color: var(--ord-hljs-string); }\n\n.scalar-app .hljs-number,\n.scalar-app .hljs-selector-attr,\n.scalar-app .hljs-selector-pseudo,\n.scalar-app .hljs-built_in { color: var(--ord-hljs-number); }\n\n.scalar-app .hljs-title.function_ { color: var(--ord-hljs-function); }\n\n.scalar-app .hljs-addition,\n.scalar-app .hljs-literal,\n.scalar-app .hljs-selector-tag,\n.scalar-app .hljs-type { color: var(--ord-hljs-literal); }\n\n.scalar-app .hljs-keyword { color: var(--ord-hljs-keyword); }\n\n.scalar-app .hljs-comment,\n.scalar-app .hljs-quote { color: var(--ord-hljs-comment); }\n\n.scalar-app .hljs-punctuation { color: var(--ord-hljs-punctuation); }\n\n/* Hide the \"x-sap-schema-attrs\" property heading row \u2014 the row exists only to\n   carry schema-level extension components; the key name should not be visible. */\n.scalar-app .property:has(.sap-schema-attrs-block) {\n    padding-top: 2px;\n}\n.scalar-app .property:has(.sap-schema-attrs-block) .property-heading {\n    display: none;\n}\n\n/* Override Scalar's sidebar height variable so the <aside> uses our measured container height\n   instead of Scalar's default 100dvh (which breaks when embedded in Docusaurus/non-fullscreen). */\n.scalar-app {\n    --refs-sidebar-height: calc(var(--scalar-container-height, 100dvh) - var(--refs-header-height, 0px));\n}\n";
+declare const _default: "\n.sap-api-container {\n    display: flex;\n    flex-wrap: wrap;\n    container-type: inline-size;\n    border: var(--scalar-border-width) solid var(--scalar-border-color);\n    border-radius: var(--scalar-radius-lg);\n    margin-top: 8px;\n    font-size: var(--scalar-small);\n    line-height: var(--scalar-line-height-3);\n    overflow: hidden;\n}\n\n.sap-api-label {\n    color: var(--scalar-color-1);\n    width: 30%;\n    min-width: 20ch;\n    flex-shrink: 0;\n    background: var(--scalar-background-2);\n    padding: 6px 9px 6px 12px;\n    border-right: var(--scalar-border-width) solid var(--scalar-border-color);\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    font-weight: 500;\n}\n\n.sap-api-label--root {\n    min-width: 20ch;\n}\n\n.sap-api-value {\n    color: var(--scalar-color-2);\n    padding: 8px;\n    flex: 1 1 0;\n    min-width: 0;\n}\n\n.sap-api-value--root {\n    flex: 1 1 0;\n    min-width: 0;\n}\n\n.sap-api-list {\n    margin: 0 2ch;\n    list-style: disc;\n}\n\n.sap-api-link {\n    text-decoration: none;\n    color: var(--scalar-link-color);\n    transition: color 0.1s ease-in-out;\n    cursor: pointer;\n}\n\n.sap-api-ord-id {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n}\n\n.sap-api-ord-id-text {\n    flex: 1 1 auto;\n    min-width: 0;\n    word-break: break-all;\n}\n\n.sap-api-copy-btn {\n    flex-shrink: 0;\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 1em;\n    line-height: 1;\n    padding: 4px;\n    color: var(--scalar-color-2);\n    background: var(--scalar-background-2);\n    border: var(--scalar-border-width) solid var(--scalar-border-color);\n    border-radius: var(--scalar-radius);\n    transition: background 0.1s ease-in-out, color 0.1s ease-in-out;\n}\n\n.sap-api-copy-btn:hover {\n    background: var(--scalar-background-3);\n    color: var(--scalar-color-1);\n}\n\n.sap-api-placeholder {\n    color: #999;\n}\n\n.sap-api-obj {\n    margin: 0;\n    padding-left: 12px;\n}\n\n.sap-api-obj-row {\n    margin-bottom: 4px;\n}\n\n.sap-api-obj-key {\n    font-weight: 600;\n    display: inline;\n}\n\n.sap-api-obj-val {\n    display: inline;\n    margin: 0;\n}\n\n/* Width-adaptive rows: react to the row's own available width (container-type above).\n   When the row is narrow, label and value wrap onto separate lines (label above value). */\n@container (max-width: 420px) {\n    .sap-api-label,\n    .sap-api-label--root {\n        flex-basis: 100%;\n        width: 100%;\n        min-width: 0;\n        border-right: none;\n        border-bottom: var(--scalar-border-width) solid var(--scalar-border-color);\n    }\n    .sap-api-value,\n    .sap-api-value--root {\n        flex-basis: 100%;\n        width: 100%;\n    }\n}\n\na {\n    text-decoration: none;\n    color: var(--sapLinkColor);\n    transition: color 0.1s ease-in-out;\n    cursor: pointer;\n}\na:hover {\n    text-decoration: underline;\n}\n\n/* Keyboard key: use Scalar background instead of Infima colors */\n.scalar-app kbd {\n    background: var(--scalar-background-1);\n    color: var(--scalar-color-1);\n    border: 1px solid var(--scalar-border-color);\n}\n\n/* Syntax highlighting \u2014 override --scalar-color-* with ThemeEditor --ord-hljs-* tokens */\n.scalar-app .hljs-attr,\n.scalar-app .hljs-attribute { color: var(--ord-hljs-attr); }\n\n.scalar-app .hljs-string,\n.scalar-app .hljs-regexp,\n.scalar-app .hljs-subst,\n.scalar-app .hljs-doctag,\n.scalar-app .hljs-bullet,\n.scalar-app .hljs-link,\n.scalar-app .hljs-meta,\n.scalar-app .hljs-symbol { color: var(--ord-hljs-string); }\n\n.scalar-app .hljs-number,\n.scalar-app .hljs-selector-attr,\n.scalar-app .hljs-selector-pseudo,\n.scalar-app .hljs-built_in { color: var(--ord-hljs-number); }\n\n.scalar-app .hljs-title.function_ { color: var(--ord-hljs-function); }\n\n.scalar-app .hljs-addition,\n.scalar-app .hljs-literal,\n.scalar-app .hljs-selector-tag,\n.scalar-app .hljs-type { color: var(--ord-hljs-literal); }\n\n.scalar-app .hljs-keyword { color: var(--ord-hljs-keyword); }\n\n.scalar-app .hljs-comment,\n.scalar-app .hljs-quote { color: var(--ord-hljs-comment); }\n\n.scalar-app .hljs-punctuation { color: var(--ord-hljs-punctuation); }\n\n/* Hide the \"x-sap-schema-attrs\" property heading row \u2014 the row exists only to\n   carry schema-level extension components; the key name should not be visible. */\n.scalar-app .property:has(.sap-schema-attrs-block) {\n    padding-top: 2px;\n}\n.scalar-app .property:has(.sap-schema-attrs-block) .property-heading {\n    display: none;\n}\n\n/* Override Scalar's sidebar height variable so the <aside> uses our measured container height\n   instead of Scalar's default 100dvh (which breaks when embedded in Docusaurus/non-fullscreen).\n   The measurement is capped at the visible height \u2014 see utils/sidebarHeight.ts. */\n.scalar-app {\n    --refs-sidebar-height: calc(var(--scalar-container-height, 100dvh) - var(--refs-header-height, 0px));\n}\n";
 export default _default;

package/dist/openApi/utils/sidebarHeight.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Nearest ancestor a `position: sticky` descendant sticks within — one that clips or scrolls
+ * vertically — or `null` when that is the document itself.
+ */
+export declare function findScrollParent(el: HTMLElement): HTMLElement | 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.
+ */
+export declare function sidebarHeight(containerHeight: number, scrollPortHeight: number | null, viewportHeight: number): number;

package/dist/openApi/utils/sidebarHeight.test.d.ts

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

package/dist/openapi.js

@@ -1,2 +1,2 @@
-import { t as OpenApiRenderer } from "./chunks/openApi-BTb5yzun.js";
+import { t as OpenApiRenderer } from "./chunks/openApi-D0QJn2Gd.js";
 export { OpenApiRenderer };

package/dist/overlay/index.d.ts

@@ -0,0 +1,7 @@
+import { RendererTheme } from '../types';
+export type OverlayRendererProps = {
+    content: string;
+    className?: string;
+    theme?: RendererTheme;
+};
+export declare function OverlayRenderer({ content, className, theme }: OverlayRendererProps): import('react').JSX.Element;

package/dist/overlay.js

@@ -0,0 +1,2 @@
+import { t as OverlayRenderer } from "./chunks/overlay-CO0o6FYy.js";
+export { OverlayRenderer };

package/dist/styles.d.ts

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

package/dist/styles.js

@@ -2,3 +2,4 @@
 /* empty css                        */
 /* empty css                     */
 /* empty css                     */
+/* empty css                     */

package/dist/vendor.d.ts

@@ -1,2 +1,3 @@
 declare module '@open-resource-discovery/a2a-editor/styles';
 declare module '@open-resource-discovery/mcp-server-card-ui/styles';
+declare module '@open-resource-discovery/overlay-editor/styles';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@open-resource-discovery/metadata-renderer",
-    "version": "1.0.1",
+    "version": "1.1.1",
     "description": "React components that render OpenAPI, CSN, AsyncAPI, A2A, and MCP metadata documents.",
     "author": "SAP SE",
     "license": "Apache-2.0",
@@ -65,7 +65,15 @@
             "import": "./dist/mcp.js",
             "default": "./dist/mcp.js"
         },
-        "./styles": "./dist/index.css"
+        "./overlay": {
+            "types": "./dist/entries/overlay.d.ts",
+            "import": "./dist/overlay.js",
+            "default": "./dist/overlay.js"
+        },
+        "./styles": {
+            "types": "./dist/styles.d.ts",
+            "default": "./dist/index.css"
+        }
     },
     "files": [
         "dist",
@@ -100,12 +108,13 @@
     },
     "dependencies": {
         "@asyncapi/react-component": "^3.1.3",
-        "@open-resource-discovery/a2a-editor": "^0.4.2",
-        "@open-resource-discovery/mcp-server-card-ui": "0.2.1",
+        "@open-resource-discovery/a2a-editor": "^0.4.6",
+        "@open-resource-discovery/mcp-server-card-ui": "^0.2.3",
+        "@open-resource-discovery/overlay-editor": "^0.2.3",
         "@sap/csn-interop-renderer": "0.5.0",
         "@scalar/api-reference-react": "^0.9.54",
         "@scalar/react-renderer": "^0.4.1",
-        "@scalar/types": "^0.16.2",
+        "@scalar/types": "^0.24.0",
         "react-error-boundary": "^6.0.0",
         "react-markdown": "^10.1.0",
         "yaml": "^2.8.1"
@@ -113,25 +122,26 @@
     "overrides": {
         "dompurify": ">=3.4.12",
         "fast-uri": ">=3.1.5",
-        "undici": ">=7.29.0 <8",
+        "undici": ">=7.29.0 <9",
         "postcss": ">=8.5.23",
-        "brace-expansion": ">=1.1.18"
+        "brace-expansion": ">=1.1.18",
+        "js-yaml": "4.3.2"
     },
     "devDependencies": {
         "@sap/eslint-config": "0.5.2",
-        "@types/node": "24.13.3",
-        "@types/react": "19.2.17",
-        "@types/react-dom": "19.2.3",
-        "@vitejs/plugin-react": "6.0.5",
-        "eslint": "10.6.0",
-        "jsdom": "29.1.1",
-        "jsonc-eslint-parser": "3.1.0",
-        "prettier": "3.9.6",
-        "react": "19.2.8",
-        "react-dom": "19.2.8",
+        "@types/node": "26.6.5",
+        "@types/react": "19.3.0",
+        "@types/react-dom": "19.3.0",
+        "@vitejs/plugin-react": "6.1.2",
+        "eslint": "10.13.0",
+        "jsdom": "30.1.3",
+        "jsonc-eslint-parser": "3.3.0",
+        "prettier": "3.9.10",
+        "react": "19.3.1",
+        "react-dom": "19.3.1",
         "typescript": "5.9.3",
-        "vite": "8.1.5",
-        "vite-plugin-dts": "4.5.4",
-        "vitest": "3.2.7"
+        "vite": "8.3.4",
+        "vite-plugin-dts": "5.1.2",
+        "vitest": "5.0.5"
     }
 }