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

package/dist/chunks/csn-3ek2O4d6.js

@@ -0,0 +1,385 @@
+import { i as loadObject } from "./utils-BC3WF3-9.js";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { generateHtml } from "@sap/csn-interop-renderer";
+//#region src/lib/csn/styles.ts
+var styles_default = `
+.csn-root {
+    color: var(--ord-foreground, #1a1a2e);
+    background-color: var(--ord-background, #ffffff);
+    container: csn / inline-size;
+    /* Single font source for the whole renderer so tables, headings, paragraphs and
+       custom fields stay consistent (they otherwise inherit the host page's font). */
+    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+}
+/* Host frameworks (e.g. Docusaurus/Infima) set font-family directly on h1-h6, which
+   beats inheritance from .csn-root. Re-inherit so headings match the rest of the renderer. */
+.csn-root h1,
+.csn-root h2,
+.csn-root h3,
+.csn-root h4,
+.csn-root h5,
+.csn-root h6 {
+    font-family: inherit;
+}
+.csn-root table {
+    border-spacing: 0;
+    border-collapse: separate;
+    border: solid 1px var(--ord-border, #a6a6a6);
+    border-radius: calc(var(--ord-radius, 4)*1px);
+    /* display: table overrides Docusaurus/Infima's global "table { display: block }",
+       which otherwise breaks table-layout: fixed and the column widths below. */
+    display: table;
+    width: 100%;
+    table-layout: fixed;
+    overflow: hidden;
+}
+.csn-root table th {
+    text-align: left;
+    background-color: var(--ord-primary, #1a1a2e);
+    color: var(--ord-primary-foreground, #fafafa);
+    padding: 8px;
+    border: 1px solid var(--ord-border, #a6a6a6);
+}
+.csn-root table td {
+    text-align: start;
+    padding: 8px;
+    align-content: start;
+    font-size: 0.875em;
+}
+.csn-root table td strong {
+    font-weight: 500;
+}
+.csn-root table th:nth-child(1),
+.csn-root table td:nth-child(1) {
+    width: clamp(10ch, 24cqi, 20ch);
+}
+.csn-root table th:nth-child(2),
+.csn-root table td:nth-child(2) {
+    width: clamp(8ch, 19cqi, 16ch);
+}
+.csn-root table tbody td {
+    color: var(--ord-foreground, #636363);
+    border: 1px solid var(--ord-border, #dddfe1);
+}
+.csn-root table tbody tr {
+    background-color: var(--ord-card, #f9fafb);
+}
+.csn-root table tbody tr:nth-child(odd) {
+    background-color: var(--ord-background, #ffffff);
+}
+.csn-root code {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+    background-color: var(--ord-code-bg, #cccccc);
+    color: var(--ord-code-fg, #333333);
+}
+.csn-root a {
+    color: var(--ord-accent-foreground, #375eab)
+}
+.csn-root .csn-attr-row {
+    display: flex;
+    gap: 0;
+    margin: 6px 0;
+    font-size: 0.875em;
+    line-height: 1.5;
+    border: 1px solid var(--ord-border, #dddfe1);
+    border-radius: 4px;
+    overflow: hidden;
+}
+.csn-root .csn-attr-row + br { display: none; } /* Remove br's afte attribute rows */
+.csn-root .csn-attr-label {
+    width: 25%;
+    min-width: 20ch;
+    flex-shrink: 0;
+    color: var(--ord-foreground, #1a1a2e);
+    background: var(--ord-muted, #f3f4f6);
+    padding: 4px 8px;
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    border-right: 1px solid var(--ord-border, #dddfe1);
+    font-weight: 500;
+}
+.csn-root .csn-attr-value {
+    color: var(--ord-muted-foreground, #6b7280);
+    padding: 3px 8px;
+}
+.csn-root .csn-attr-link {
+    color: var(--ord-primary, #375eab);
+    text-decoration: none;
+}
+.csn-root .csn-attr-doclink {
+    color: var(--ord-muted-foreground, #6b7280);
+    text-decoration: none;
+    font-size: 0.8em;
+    margin-left: 2px;
+}
+.csn-root .csn-attr-list {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+.csn-root .csn-attr-list-item {
+    display: block;
+}
+.csn-root .csn-attr-obj {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+.csn-root .csn-attr-kv {
+    display: flex;
+    gap: 4px;
+}
+.csn-root .csn-attr-kv-key {
+    font-weight: 600;
+    color: var(--ord-foreground, #1a1a2e);
+}
+.csn-root .csn-attr-kv-val {
+    color: var(--ord-muted-foreground, #6b7280);
+}
+
+/* Width-adaptive attribute rows. Trigger is the renderer's own width (container: csn).
+   Root-level annotations sit in <p> and get ~full renderer width, so they only flip to
+   vertical when the renderer itself is narrow. Element-level annotations sit in a <td>
+   (the Description cell) and only get the 3rd column's width, so they flip much earlier.
+   (A real container on the <td> is impossible: size containment is ignored on table cells.) */
+@container csn (max-width: 420px) {
+    .csn-root p .csn-attr-row {
+        flex-direction: column;
+    }
+    .csn-root p .csn-attr-label {
+        width: 100%;
+        min-width: 0;
+        border-right: none;
+        border-bottom: 1px solid var(--ord-border, #dddfe1);
+    }
+    .csn-root p .csn-attr-value {
+        width: 100%;
+    }
+}
+@container csn (max-width: 700px) {
+    .csn-root td .csn-attr-row {
+        flex-direction: column;
+    }
+    .csn-root td .csn-attr-label {
+        width: 100%;
+        min-width: 0;
+        border-right: none;
+        border-bottom: 1px solid var(--ord-border, #dddfe1);
+    }
+    .csn-root td .csn-attr-value {
+        width: 100%;
+    }
+}
+`;
+//#endregion
+//#region src/lib/csn/customAttributes/genericRenderer.ts
+function autoLabel(key, prefix) {
+	let name = key;
+	if (prefix && name.startsWith(prefix)) name = name.slice(prefix.length);
+	return name.split(".").filter(Boolean).map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" · ");
+}
+function escapeHtml(str) {
+	return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function renderValue(value, def) {
+	if (value === null || value === void 0) return "";
+	if (def && "render" in def) return def.render(value);
+	if (def?.type === "link" && "callback" in def) {
+		const href = def.callback(value);
+		const text = escapeHtml(String(value));
+		return href ? `<a href="${escapeHtml(href)}" class="csn-attr-link" target="_blank" rel="noreferrer">${text}</a>` : text;
+	}
+	if (def?.type === "boolean" || typeof value === "boolean") return value ? "Yes" : "No";
+	if (def?.type === "number" || typeof value === "number") return escapeHtml(String(value));
+	if (def?.type === "array" || Array.isArray(value)) {
+		if (!Array.isArray(value)) return escapeHtml(String(value));
+		return `<span class="csn-attr-list">${value.map((item) => `<span class="csn-attr-list-item">${renderValue(item, void 0)}</span>`).join("")}</span>`;
+	}
+	if (def?.type === "object" || typeof value === "object" && value !== null) {
+		const entries = Object.entries(value);
+		if (entries.length === 1 && entries[0][0] === "#") return escapeHtml(String(entries[0][1]));
+		return `<span class="csn-attr-obj">${entries.map(([k, v]) => `<span class="csn-attr-kv"><span class="csn-attr-kv-key">${escapeHtml(k)}</span><span class="csn-attr-kv-val">${renderValue(v, void 0)}</span></span>`).join("")}</span>`;
+	}
+	if (def && "valueLinks" in def && def.valueLinks) {
+		const href = def.valueLinks[String(value)];
+		const text = escapeHtml(String(value));
+		return href ? `<a href="${escapeHtml(href)}" class="csn-attr-link" target="_blank" rel="noreferrer">${text}</a>` : text;
+	}
+	return escapeHtml(String(value));
+}
+function buildCsnAnnotationHtml(key, value, def, config) {
+	if (value === null || value === void 0) return "";
+	const label = def && !("render" in def) && "label" in def && def.label ? def.label : autoLabel(key, config.prefixStartsWith ?? "@");
+	const docUrl = config.documentationUrl?.(key);
+	const docLink = docUrl ? ` <a href="${escapeHtml(docUrl)}" class="csn-attr-doclink" target="_blank" rel="noreferrer" title="Documentation">↗</a>` : "";
+	const valueHtml = renderValue(value, def);
+	if (!valueHtml) return "";
+	return `<span class="csn-attr-row"><span class="csn-attr-label">${escapeHtml(label)}${docLink}</span><span class="csn-attr-value">${valueHtml}</span></span>`;
+}
+//#endregion
+//#region src/lib/csn/customAttributes/postProcess.ts
+function discoverAnnotationKeys(doc, prefix) {
+	const keys = /* @__PURE__ */ new Set();
+	const addFromObj = (obj) => {
+		if (!obj || typeof obj !== "object") return;
+		for (const k of Object.keys(obj)) if (k.startsWith(prefix)) keys.add(k);
+	};
+	const definitions = doc.definitions;
+	if (definitions) for (const def of Object.values(definitions)) {
+		addFromObj(def);
+		const elements = def?.elements;
+		if (elements) for (const el of Object.values(elements)) addFromObj(el);
+	}
+	return [...keys];
+}
+function parseCodeValue(decoded) {
+	try {
+		return JSON.parse(decoded);
+	} catch {
+		return decoded;
+	}
+}
+function replaceNodeRun(parentNode, startNode, endNode, replacementHtml) {
+	const tpl = parentNode.ownerDocument.createElement("template");
+	tpl.innerHTML = replacementHtml;
+	parentNode.insertBefore(tpl.content, startNode);
+	let cur = startNode;
+	while (cur) {
+		const next = cur.nextSibling;
+		const done = cur === endNode;
+		parentNode.removeChild(cur);
+		if (done) break;
+		cur = next;
+	}
+}
+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);
+		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,
+			entry
+		});
+	}
+	return pairs;
+}
+function applyAnnotationRenderers(html, configs, doc) {
+	const renderers = /* @__PURE__ */ new Map();
+	for (const config of configs) {
+		for (const [key, def] of Object.entries(config.annotations ?? {})) if (!renderers.has(key)) renderers.set(key, {
+			def,
+			config
+		});
+		if (config.prefixStartsWith && doc) {
+			for (const key of discoverAnnotationKeys(doc, config.prefixStartsWith)) if (!renderers.has(key)) renderers.set(key, {
+				def: void 0,
+				config
+			});
+		}
+	}
+	if (renderers.size === 0) return html;
+	const domDoc = new DOMParser().parseFromString(html, "text/html");
+	for (const td of Array.from(domDoc.querySelectorAll("td, p"))) {
+		const pairs = collectAnnotationPairs(td, renderers);
+		for (const { textNode, valueNode, codeEl, key, entry } of pairs) {
+			const rendered = buildCsnAnnotationHtml(key, parseCodeValue(codeEl.textContent ?? ""), entry.def, entry.config);
+			if (rendered) replaceNodeRun(td, textNode, valueNode, rendered);
+		}
+	}
+	return domDoc.body.innerHTML;
+}
+//#endregion
+//#region src/lib/csn/index.tsx
+function buildAnnotationLinkCallbacks(configs) {
+	const callbacks = {};
+	for (const config of configs) for (const [key, def] of Object.entries(config.annotations ?? {})) if ("type" in def && def.type === "link" && "callback" in def && !(key in callbacks)) {
+		const cb = def.callback;
+		callbacks[key] = (value) => cb(value) ?? "";
+	}
+	return callbacks;
+}
+function CsnRenderer({ content, config, customAttributes, className, theme }) {
+	const [state, setState] = useState({ kind: "idle" });
+	useEffect(() => {
+		if (!content) {
+			setState({ kind: "idle" });
+			return;
+		}
+		let cancelled = false;
+		setState({ kind: "loading" });
+		let parsed;
+		try {
+			parsed = JSON.parse(content);
+		} catch (e) {
+			setState({
+				kind: "error",
+				message: String(e)
+			});
+			return;
+		}
+		const activeConfigs = customAttributes ?? [];
+		const isEnabled = customAttributes !== void 0;
+		const parsedDoc = isEnabled ? loadObject(content) : null;
+		const linkCallbacks = isEnabled ? buildAnnotationLinkCallbacks(activeConfigs) : {};
+		const rendererConfig = {
+			...config,
+			annotationLinkCallbacks: {
+				...linkCallbacks,
+				...config?.annotationLinkCallbacks
+			}
+		};
+		generateHtml(parsed, rendererConfig).then((html) => {
+			const processed = isEnabled ? applyAnnotationRenderers(html, activeConfigs, parsedDoc) : html;
+			if (!cancelled) setState({
+				kind: "ready",
+				html: processed
+			});
+		}).catch((e) => {
+			if (!cancelled) setState({
+				kind: "error",
+				message: String(e)
+			});
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		content,
+		config,
+		customAttributes
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: `csn-root${className ? ` ${className}` : ""}`,
+		style: theme,
+		children: [
+			/* @__PURE__ */ jsx("style", { children: styles_default }),
+			state.kind === "ready" && /* @__PURE__ */ jsx("div", {
+				className: "p-4",
+				dangerouslySetInnerHTML: { __html: state.html }
+			}),
+			state.kind === "error" && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h1", { children: "Invalid CSN" }), /* @__PURE__ */ jsx("div", { children: state.message })] })
+		]
+	});
+}
+//#endregion
+export { CsnRenderer as t };

package/dist/chunks/mcp-qA5sYRAN.js

@@ -0,0 +1,29 @@
+import { t as buildShadcnThemeStyle } from "./utils-BC3WF3-9.js";
+/* empty css              */
+import { useEffect, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MCPServerCardView, useServerCardStore } from "@open-resource-discovery/mcp-server-card-ui/card-view";
+import { useTheme } from "@open-resource-discovery/mcp-server-card-ui";
+//#region src/lib/mcp/index.tsx
+function McpRenderer({ content, showValidation = false, className, theme }) {
+	const id = useId();
+	const { setTheme } = useTheme();
+	const isDark = className?.split(/\s+/).includes("dark") ?? false;
+	useEffect(() => {
+		useServerCardStore.getState().setRawJson(content);
+	}, [content]);
+	useEffect(() => {
+		setTheme(isDark ? "dark" : "light");
+	}, [isDark, setTheme]);
+	const themeStyle = theme ? buildShadcnThemeStyle("mcp-root", id, theme) : null;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-renderer-id": id,
+		className: "h-full",
+		children: [themeStyle && /* @__PURE__ */ jsx("style", { children: themeStyle }), /* @__PURE__ */ jsx(MCPServerCardView, {
+			readOnly: true,
+			showValidation
+		})]
+	});
+}
+//#endregion
+export { McpRenderer as t };