@clarify-labs/renderer 0.9.2 → 0.9.4

package/output/{ClarifyShell-DdYRgrfY.cjs → ClarifyShell-7r92MZg9.cjs}

@@ -1,5 +1,5 @@
 const require_chunk = require("./chunk-DakpK96I.cjs");
-const require_PageActions = require("./PageActions-B08cDCzq.cjs");
+const require_PageActions = require("./PageActions-CTn2XkPg.cjs");
 let clsx = require("clsx");
 clsx = require_chunk.__toESM(clsx, 1);
 let react = require("react");
@@ -110,6 +110,15 @@ function LazySlotComponent(props) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.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
@@ -137,22 +146,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] = (0, react.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 require_PageActions.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 = require_PageActions.useBuiltInText();
+	const config = require_PageActions.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "border-t-2 border-(--clarify-error-accent-text) pt-8",
@@ -162,10 +176,10 @@ function PageErrorPanel(props) {
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 							className: "font-mono text-xs/5 font-semibold uppercase tracking-wide text-(--clarify-error-accent-text)",
-							children: "Render error"
+							children: eyebrowLabel
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.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
 						}),
@@ -173,20 +187,22 @@ function PageErrorPanel(props) {
 							className: "mt-4 max-w-2xl text-sm/6 text-(--clarify-theme-tokens-colors-muted)",
 							children: description
 						})
-					] }), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex shrink-0 items-center gap-3",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "shrink-0",
+							children: action
+						}) : null]
 					})]
 				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dl", {
+				resolvedMetadata.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+					children: resolvedMetadata.map(({ label, value }, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "min-w-0 bg-(--clarify-theme-tokens-colors-surface) px-4 py-3",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", {
 							className: "text-xs/5 font-semibold uppercase tracking-wide text-(--clarify-ui-text-faint)",
@@ -196,8 +212,8 @@ function PageErrorPanel(props) {
 							title: value,
 							children: value
 						})]
-					}, label))
-				}),
+					}, `${label}-${index}`))
+				}) : null,
 				/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -205,59 +221,86 @@ function PageErrorPanel(props) {
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 							className: "text-sm/6 font-semibold text-(--clarify-ui-text-strong)",
 							children: detailsLabel
-						}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+						}), detailsHeaderAction ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "shrink-0",
+							children: detailsHeaderAction
+						}) : null]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "px-4 py-4 text-xs/5 text-(--clarify-ui-text)",
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-								className: "font-semibold uppercase tracking-wide text-(--clarify-ui-text-faint)",
-								children: messageLabel
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("p", {
-								className: "mt-6 font-semibold uppercase tracking-wide text-(--clarify-ui-text-faint)",
-								children: stackLabel
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-								className: "mt-6 font-semibold uppercase tracking-wide text-(--clarify-ui-text-faint)",
-								children: componentStackLabel
-							}), /* @__PURE__ */ (0, react_jsx_runtime.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] = (0, react.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 require_PageActions.copyTextToClipboard(stackText)) return;
+		setCopiedStack(true);
+		window.setTimeout(() => setCopiedStack(false), 1600);
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "font-semibold uppercase tracking-wide text-(--clarify-ui-text-faint)",
+				children: messageLabel
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "mt-6 font-semibold uppercase tracking-wide text-(--clarify-ui-text-faint)",
+				children: stackLabel
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "mt-6 font-semibold uppercase tracking-wide text-(--clarify-ui-text-faint)",
+				children: componentStackLabel
+			}), /* @__PURE__ */ (0, react_jsx_runtime.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 react.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__ */ (0, react_jsx_runtime.jsx)(PageErrorPanel, {
 			title: this.props.title,
@@ -269,13 +312,11 @@ var PageErrorBoundary = class extends react.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
 		});
 	}
 };
@@ -621,12 +662,25 @@ function resolveRouteComponent(route) {
 }
 function scrollToHash(hash) {
 	if (!hash) return;
-	const targetId = require_PageActions.safeDecodeURIComponent(hash.slice(1));
-	window.requestAnimationFrame(() => {
-		document.getElementById(targetId)?.scrollIntoView();
+	const targetId = safeDecodeURIComponent(hash.slice(1));
+	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) {
@@ -928,7 +982,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,
@@ -2332,6 +2385,12 @@ Object.defineProperty(exports, "PageFooter", {
 		return PageFooter;
 	}
 });
+Object.defineProperty(exports, "RenderErrorPanel", {
+	enumerable: true,
+	get: function() {
+		return RenderErrorPanel;
+	}
+});
 Object.defineProperty(exports, "RuntimeSlot", {
 	enumerable: true,
 	get: function() {
@@ -2393,4 +2452,4 @@ Object.defineProperty(exports, "useSlot", {
 	}
 });
 
-//# sourceMappingURL=ClarifyShell-DdYRgrfY.cjs.map
+//# sourceMappingURL=ClarifyShell-7r92MZg9.cjs.map