@clarify-labs/renderer 0.9.2 → 0.9.4

package/output/{ClarifyShell-C38EkErX.js → ClarifyShell-D2P0iZ_m.js}

@@ -1,4 +1,4 @@
-import { A as LocaleContext, C as themeCookieName, D as copyTextToClipboard, M as useConfig, N as useLocale, O as useBuiltInText, T as localizeHref, _ as getStoredLocalePreference, a as safeDecodeURIComponent, d as isSameRoutePath, f as normalizeRoutePath, g as useTheme, h as ThemeProvider, i as Navigation, j as OpenApisContext, k as ConfigContext, o as SectionProvider, p as resolveLocalizedText, r as Header, t as PageActionsProvider, w as isExternalHref, x as storeLocalePreference } from "./PageActions-tmnpzi23.js";
+import { A as OpenApisContext, C as isExternalHref, D as useBuiltInText, E as copyTextToClipboard, M as useConfigOptional, N as useLocale, O as ConfigContext, S as themeCookieName, a as SectionProvider, b as storeLocalePreference, d as normalizeRoutePath, f as resolveLocalizedText, g as getStoredLocalePreference, h as useTheme, i as Navigation, j as useConfig, k as LocaleContext, m as ThemeProvider, r as Header, t as PageActionsProvider, u as isSameRoutePath, w as localizeHref } from "./PageActions-D0PA8Zv5.js";
 import clsx from "clsx";
 import { Component, Suspense, createContext, lazy, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Link, Route, Routes, useLocation, useNavigate } from "react-router-dom";
@@ -108,6 +108,15 @@ function LazySlotComponent(props) {
 	return /* @__PURE__ */ jsx(Component, {});
 }
 //#endregion
+//#region source/utils/hash.ts
+function safeDecodeURIComponent(value) {
+	try {
+		return decodeURIComponent(value);
+	} catch {
+		return value;
+	}
+}
+//#endregion
 //#region source/assets/clarify.svg?url
 var clarify_default = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='279px'%20height='200px'%20viewBox='0%200%20279%20200'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3ctitle%3eclarify%3c/title%3e%3cg%20id='页面-1'%20stroke='none'%20stroke-width='1'%20fill='none'%20fill-rule='evenodd'%3e%3cg%20id='clarify'%20transform='translate(-0,%200.0054)'%3e%3cpath%20d='M44.867217,0.0054376148%20C130.715579,1.00591567%20200,70.9091172%20200,156.994562%20L199.986321,155.127494%20C199.384888,180.009127%20179.026368,199.994562%20154,199.994562%20L46,199.994562%20C20.5949015,199.994562%200,179.399661%200,153.994562%20L0,45.9945624%20C0,21.0975659%2019.7793434,0.820282524%2044.4815926,0.0191499894%20Z'%20fill='%2300D492'%3e%3c/path%3e%3cpath%20d='M123.867217,0.0054376148%20C209.715579,1.00591567%20279,70.9091172%20279,156.994562%20L278.986321,155.127494%20C278.384888,180.009127%20258.026368,199.994562%20233,199.994562%20L125,199.994562%20C99.5949015,199.994562%2079,179.399661%2079,153.994562%20L79,45.9945624%20C79,21.0975659%2098.7793434,0.820282524%20123.481593,0.0191499894%20Z'%20id='clarify-right'%20fill-opacity='0.6'%20fill='%2300F6C9'%20transform='translate(179,%20100)%20rotate(-90)%20translate(-179,%20-100)'%3e%3c/path%3e%3cpath%20d='M199.979267,154.416906%20L199.984438,155.157125%20L199.962366,155.872459%20C198.977251,180.406837%20178.776104,199.994562%20154,199.994562%20L124.372438,199.994125%20L124.249053,199.994081%20C99.6939678,199.603921%2079.8122712,179.973634%2079.01915,155.518407%20L79.0054376,155.132783%20C79.5830823,105.566626%20103.129768,61.5221348%20139.498462,33.1463428%20C175.69419,61.3871018%20199.186123,105.143863%20199.979267,154.416906%20Z'%20id='形状结合'%20fill='%2300F692'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
 //#endregion
@@ -135,22 +144,27 @@ function BuiltWithClarify() {
 	});
 }
 //#endregion
-//#region source/app/ErrorBoundary.tsx
-function PageErrorPanel(props) {
-	const { title, description, reloadLabel, detailsLabel, pathLabel, typeLabel, messageLabel, stackLabel, componentStackLabel, timestampLabel, copyLabel, copiedLabel, path, error, errorInfo, occurredAt } = props;
-	const [copiedStack, setCopiedStack] = useState(false);
-	const stack = error.stack ?? error.message;
-	const componentStack = errorInfo?.componentStack?.trim();
-	const stackText = componentStack ? `${stack}\n\n${componentStackLabel}\n${componentStack}` : stack;
-	const capturedAt = occurredAt ?? (/* @__PURE__ */ new Date()).toISOString();
-	async function copyStack() {
-		if (!await copyTextToClipboard(stackText)) return;
-		setCopiedStack(true);
-		window.setTimeout(() => setCopiedStack(false), 1600);
-	}
+//#region source/app/RenderErrorPanel.tsx
+function RenderErrorPanel(props) {
+	const { title, description, eyebrowLabel = "Render error", action, metadata = [], detailsLabel, detailsHeaderAction, detailsContent, titleId = "clarify-render-error-title", refreshLabel, onRefresh } = props;
+	const t = useBuiltInText();
+	const config = useConfigOptional();
+	const resolvedRefreshLabel = refreshLabel ?? t("renderError.reload");
+	const resolvedVersion = config?.version ?? "0.0.0";
+	const resolvedMetadata = [...metadata, {
+		label: t("renderError.version"),
+		value: resolvedVersion
+	}];
+	const handleRefresh = () => {
+		if (onRefresh) {
+			onRefresh();
+			return;
+		}
+		if (typeof window !== "undefined") window.location.reload();
+	};
 	return /* @__PURE__ */ jsx("section", {
 		className: "mx-auto flex min-h-(--clarify-error-page-min-height) w-full max-w-4xl flex-col justify-center py-16 text-(--clarify-theme-tokens-colors-foreground)",
-		"aria-labelledby": "clarify-render-error-title",
+		"aria-labelledby": titleId,
 		role: "alert",
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "border-t-2 border-(--clarify-error-accent-text) pt-8",
@@ -160,10 +174,10 @@ function PageErrorPanel(props) {
 					children: [/* @__PURE__ */ jsxs("div", { children: [
 						/* @__PURE__ */ jsx("p", {
 							className: "font-mono text-xs/5 font-semibold uppercase tracking-wide text-(--clarify-error-accent-text)",
-							children: "Render error"
+							children: eyebrowLabel
 						}),
 						/* @__PURE__ */ jsx("h1", {
-							id: "clarify-render-error-title",
+							id: titleId,
 							className: "mt-3 text-3xl/9 font-semibold tracking-tight text-(--clarify-theme-tokens-colors-foreground)",
 							children: title
 						}),
@@ -171,20 +185,22 @@ function PageErrorPanel(props) {
 							className: "mt-4 max-w-2xl text-sm/6 text-(--clarify-theme-tokens-colors-muted)",
 							children: description
 						})
-					] }), /* @__PURE__ */ jsx("button", {
-						type: "button",
-						className: "inline-flex shrink-0 items-center rounded-(--clarify-theme-tokens-radius-md) bg-(--clarify-theme-tokens-colors-primary) px-4 py-2 text-sm/5 font-semibold text-white shadow-xs transition hover:opacity-90",
-						onClick: () => window.location.reload(),
-						children: reloadLabel
+					] }), /* @__PURE__ */ jsxs("div", {
+						className: "flex shrink-0 items-center gap-3",
+						children: [/* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: "rounded-(--clarify-theme-tokens-radius-sm) border border-(--clarify-theme-tokens-colors-border) px-3 py-2 text-sm/5 font-semibold text-(--clarify-ui-text-soft) transition hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-ui-text-strong)",
+							onClick: handleRefresh,
+							children: resolvedRefreshLabel
+						}), action ? /* @__PURE__ */ jsx("div", {
+							className: "shrink-0",
+							children: action
+						}) : null]
 					})]
 				}),
-				/* @__PURE__ */ jsx("dl", {
+				resolvedMetadata.length > 0 ? /* @__PURE__ */ jsx("dl", {
 					className: "mt-8 grid gap-px overflow-hidden rounded-(--clarify-theme-tokens-radius-lg) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-border) sm:grid-cols-3",
-					children: [
-						[pathLabel, path],
-						[typeLabel, error.name],
-						[timestampLabel, capturedAt]
-					].map(([label, value]) => /* @__PURE__ */ jsxs("div", {
+					children: resolvedMetadata.map(({ label, value }, index) => /* @__PURE__ */ jsxs("div", {
 						className: "min-w-0 bg-(--clarify-theme-tokens-colors-surface) px-4 py-3",
 						children: [/* @__PURE__ */ jsx("dt", {
 							className: "text-xs/5 font-semibold uppercase tracking-wide text-(--clarify-ui-text-faint)",
@@ -194,8 +210,8 @@ function PageErrorPanel(props) {
 							title: value,
 							children: value
 						})]
-					}, label))
-				}),
+					}, `${label}-${index}`))
+				}) : null,
 				/* @__PURE__ */ jsxs("div", {
 					className: "mt-6 overflow-hidden rounded-(--clarify-theme-tokens-radius-lg) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-code-background)",
 					children: [/* @__PURE__ */ jsxs("div", {
@@ -203,59 +219,86 @@ function PageErrorPanel(props) {
 						children: [/* @__PURE__ */ jsx("p", {
 							className: "text-sm/6 font-semibold text-(--clarify-ui-text-strong)",
 							children: detailsLabel
-						}), /* @__PURE__ */ jsx("button", {
-							type: "button",
-							className: "rounded-(--clarify-theme-tokens-radius-sm) px-2 py-1 text-xs/5 font-semibold text-(--clarify-ui-text-soft) ring-1 ring-(--clarify-theme-tokens-colors-border) transition hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-ui-text-strong)",
-							onClick: copyStack,
-							children: copiedStack ? copiedLabel : copyLabel
-						})]
-					}), /* @__PURE__ */ jsxs("div", {
+						}), detailsHeaderAction ? /* @__PURE__ */ jsx("div", {
+							className: "shrink-0",
+							children: detailsHeaderAction
+						}) : null]
+					}), /* @__PURE__ */ jsx("div", {
 						className: "px-4 py-4 text-xs/5 text-(--clarify-ui-text)",
-						children: [
-							/* @__PURE__ */ jsx("p", {
-								className: "font-semibold uppercase tracking-wide text-(--clarify-ui-text-faint)",
-								children: messageLabel
-							}),
-							/* @__PURE__ */ jsx("p", {
-								className: "mt-2 wrap-break-word font-mono text-sm/6 font-semibold text-(--clarify-theme-tokens-colors-foreground)",
-								children: error.message
-							}),
-							/* @__PURE__ */ jsx("p", {
-								className: "mt-6 font-semibold uppercase tracking-wide text-(--clarify-ui-text-faint)",
-								children: stackLabel
-							}),
-							/* @__PURE__ */ jsx("pre", {
-								className: "mt-2 max-h-(--clarify-error-details-max-height) overflow-auto whitespace-pre-wrap wrap-break-word font-mono",
-								children: stack
-							}),
-							componentStack ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("p", {
-								className: "mt-6 font-semibold uppercase tracking-wide text-(--clarify-ui-text-faint)",
-								children: componentStackLabel
-							}), /* @__PURE__ */ jsx("pre", {
-								className: "mt-2 max-h-(--clarify-error-component-stack-max-height) overflow-auto whitespace-pre-wrap wrap-break-word font-mono",
-								children: componentStack
-							})] }) : null
-						]
+						children: detailsContent
 					})]
 				})
 			]
 		})
 	});
 }
+//#endregion
+//#region source/app/ErrorBoundary.tsx
+function PageErrorPanel(props) {
+	const { title, description, reloadLabel, detailsLabel, pathLabel, typeLabel, messageLabel, stackLabel, componentStackLabel, copyLabel, copiedLabel, path, error, errorInfo } = props;
+	const [copiedStack, setCopiedStack] = useState(false);
+	const stack = error.stack ?? error.message;
+	const componentStack = errorInfo?.componentStack?.trim();
+	const stackText = componentStack ? `${stack}\n\n${componentStackLabel}\n${componentStack}` : stack;
+	async function copyStack() {
+		if (!await copyTextToClipboard(stackText)) return;
+		setCopiedStack(true);
+		window.setTimeout(() => setCopiedStack(false), 1600);
+	}
+	return /* @__PURE__ */ jsx(RenderErrorPanel, {
+		title,
+		description,
+		refreshLabel: reloadLabel,
+		onRefresh: () => window.location.reload(),
+		metadata: [[pathLabel, path], [typeLabel, error.name]].map(([label, value]) => ({
+			label,
+			value: String(value)
+		})),
+		detailsLabel,
+		detailsHeaderAction: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "rounded-(--clarify-theme-tokens-radius-sm) px-2 py-1 text-xs/5 font-semibold text-(--clarify-ui-text-soft) ring-1 ring-(--clarify-theme-tokens-colors-border) transition hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-ui-text-strong)",
+			onClick: copyStack,
+			children: copiedStack ? copiedLabel : copyLabel
+		}),
+		detailsContent: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx("p", {
+				className: "font-semibold uppercase tracking-wide text-(--clarify-ui-text-faint)",
+				children: messageLabel
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "mt-2 wrap-break-word font-mono text-sm/6 font-semibold text-(--clarify-theme-tokens-colors-foreground)",
+				children: error.message
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "mt-6 font-semibold uppercase tracking-wide text-(--clarify-ui-text-faint)",
+				children: stackLabel
+			}),
+			/* @__PURE__ */ jsx("pre", {
+				className: "mt-2 max-h-(--clarify-error-details-max-height) overflow-auto whitespace-pre-wrap wrap-break-word font-mono",
+				children: stack
+			}),
+			componentStack ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("p", {
+				className: "mt-6 font-semibold uppercase tracking-wide text-(--clarify-ui-text-faint)",
+				children: componentStackLabel
+			}), /* @__PURE__ */ jsx("pre", {
+				className: "mt-2 max-h-(--clarify-error-component-stack-max-height) overflow-auto whitespace-pre-wrap wrap-break-word font-mono",
+				children: componentStack
+			})] }) : null
+		] })
+	});
+}
 var PageErrorBoundary = class extends Component {
 	state = {};
 	static getDerivedStateFromError(error) {
-		return {
-			error,
-			occurredAt: (/* @__PURE__ */ new Date()).toISOString()
-		};
+		return { error };
 	}
 	componentDidCatch(error, errorInfo) {
 		console.error("[clarify] Failed to render page:", error, errorInfo);
 		this.setState({ errorInfo });
 	}
 	render() {
-		const { error, errorInfo, occurredAt } = this.state;
+		const { error, errorInfo } = this.state;
 		if (!error) return this.props.children;
 		return /* @__PURE__ */ jsx(PageErrorPanel, {
 			title: this.props.title,
@@ -267,13 +310,11 @@ var PageErrorBoundary = class extends Component {
 			messageLabel: this.props.messageLabel,
 			stackLabel: this.props.stackLabel,
 			componentStackLabel: this.props.componentStackLabel,
-			timestampLabel: this.props.timestampLabel,
 			copyLabel: this.props.copyLabel,
 			copiedLabel: this.props.copiedLabel,
 			path: this.props.path,
 			error,
-			errorInfo,
-			occurredAt
+			errorInfo
 		});
 	}
 };
@@ -620,11 +661,24 @@ function resolveRouteComponent(route) {
 function scrollToHash(hash) {
 	if (!hash) return;
 	const targetId = safeDecodeURIComponent(hash.slice(1));
-	window.requestAnimationFrame(() => {
-		document.getElementById(targetId)?.scrollIntoView();
+	const tryScrollToTarget = (attempt = 0) => {
+		const target = document.getElementById(targetId);
+		if (!target) {
+			if (attempt < 12) window.requestAnimationFrame(() => {
+				tryScrollToTarget(attempt + 1);
+			});
+			return;
+		}
+		target.scrollIntoView({
+			behavior: "smooth",
+			block: "start"
+		});
 		window.requestAnimationFrame(() => {
 			window.dispatchEvent(new Event("scroll"));
 		});
+	};
+	window.requestAnimationFrame(() => {
+		tryScrollToTarget();
 	});
 }
 function explicitLocaleForPath(config, pathname) {
@@ -926,7 +980,6 @@ function AppShell(arg0) {
 				messageLabel: text("renderError.message"),
 				stackLabel: text("renderError.stack"),
 				componentStackLabel: text("renderError.componentStack"),
-				timestampLabel: text("renderError.timestamp"),
 				copyLabel: text("actions.copy"),
 				copiedLabel: text("actions.copied"),
 				path: pathname,
@@ -2300,6 +2353,6 @@ function ClarifyShell(props) {
 	});
 }
 //#endregion
-export { themeBootstrapScript as a, AppShell as c, BuiltWithClarify as d, RuntimeSlot as f, useSlot as h, themeEditorPresets as i, PageFooter as l, SlotProvider as m, ThemeEditor as n, themePresets as o, RuntimeSlotsProvider as p, applyThemeVariables as r, themeStorageKey as s, ClarifyShell as t, PageBanner as u };
+export { themeBootstrapScript as a, AppShell as c, RenderErrorPanel as d, BuiltWithClarify as f, useSlot as g, SlotProvider as h, themeEditorPresets as i, PageFooter as l, RuntimeSlotsProvider as m, ThemeEditor as n, themePresets as o, RuntimeSlot as p, applyThemeVariables as r, themeStorageKey as s, ClarifyShell as t, PageBanner as u };
 
-//# sourceMappingURL=ClarifyShell-C38EkErX.js.map
+//# sourceMappingURL=ClarifyShell-D2P0iZ_m.js.map