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

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

@@ -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,12 +748,18 @@ 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");
 		};

package/dist/index.js

@@ -1,5 +1,5 @@
 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-sDysRKUP.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";

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-sDysRKUP.js";
+import { t as OpenApiRenderer } from "./chunks/openApi-D0QJn2Gd.js";
 export { OpenApiRenderer };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@open-resource-discovery/metadata-renderer",
-    "version": "1.1.0",
+    "version": "1.1.1",
     "description": "React components that render OpenAPI, CSN, AsyncAPI, A2A, and MCP metadata documents.",
     "author": "SAP SE",
     "license": "Apache-2.0",