@clarify-labs/renderer 0.6.7 → 0.7.1

package/output/{OpenApiOperation-CxQQyEHK.cjs → OpenApiOperation-C4xZu4i0.cjs}

@@ -1,5 +1,5 @@
 const require_chunk = require("./chunk-DakpK96I.cjs");
-const require_shell = require("./shell-D4tS8Jts.cjs");
+const require_PageActions = require("./PageActions-1RDCHcUY.cjs");
 const require_remark = require("./remark-Dv3owbSH.cjs");
 let clsx = require("clsx");
 clsx = require_chunk.__toESM(clsx, 1);
@@ -14,6 +14,23 @@ let react_markdown = require("react-markdown");
 react_markdown = require_chunk.__toESM(react_markdown, 1);
 let github_slugger = require("github-slugger");
 let _scalar_snippetz = require("@scalar/snippetz");
+//#region source/components/LocalizedLink.tsx
+function useLocalizedHref(href) {
+	return require_PageActions.localizeHref(href, require_PageActions.useConfig(), require_PageActions.useLocale());
+}
+function LocalizedLink(arg0) {
+	const { href, ...props } = arg0;
+	const localizedHref = useLocalizedHref(href);
+	if (!require_PageActions.isExternalHref(localizedHref) && !localizedHref.startsWith("#")) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router_dom.Link, {
+		to: localizedHref,
+		...props
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+		href: localizedHref,
+		...props
+	});
+}
+//#endregion
 //#region source/components/Button.tsx
 var buttonVariantStyles = {
 	primary: "rounded-full bg-(--clarify-theme-tokens-colors-foreground) px-3 py-1 text-(--clarify-theme-tokens-colors-background) hover:opacity-80 dark:bg-(--clarify-theme-tokens-colors-primary)/10 dark:text-(--clarify-theme-tokens-colors-primary) dark:ring-1 dark:ring-inset dark:ring-(--clarify-theme-tokens-colors-primary)/20 dark:hover:opacity-80",
@@ -24,11 +41,17 @@ var buttonVariantStyles = {
 };
 function Button(arg0) {
 	const { variant = "primary", className, children, arrow, ...props } = arg0;
-	const classes = (0, clsx.default)("clarify-button inline-flex justify-center gap-0.5 overflow-hidden text-sm font-medium transition", buttonVariantStyles[variant], className);
-	const arrowIcon = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowRight, { className: (0, clsx.default)("mt-0.5 h-5 w-5", variant === "text" && "relative top-px", arrow === "left" && "-ml-1 rotate-180", arrow === "right" && "-mr-1") });
+	const classes = (0, clsx.default)("clarify-button not-prose inline-flex w-fit max-w-full items-center justify-center gap-1 overflow-hidden align-middle text-sm leading-6 font-medium whitespace-nowrap no-underline transition", buttonVariantStyles[variant], className);
+	const arrowIcon = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowRight, {
+		"aria-hidden": "true",
+		className: (0, clsx.default)("h-4 w-4 shrink-0", variant === "text" && "relative top-px", arrow === "left" && "-ml-0.5 rotate-180", arrow === "right" && "-mr-0.5")
+	});
 	const inner = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 		arrow === "left" ? arrowIcon : null,
-		children,
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "truncate",
+			children
+		}),
 		arrow === "right" ? arrowIcon : null
 	] });
 	if (typeof props.href === "undefined") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
@@ -36,7 +59,7 @@ function Button(arg0) {
 		...props,
 		children: inner
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LocalizedLink, {
 		className: classes,
 		...props,
 		children: inner
@@ -92,7 +115,7 @@ var defaultTitleKeys = {
 };
 function Callout(arg0) {
 	const { children, type = "info", title, icon = true, className, ...props } = arg0;
-	const t = require_shell.useBuiltInText();
+	const t = require_PageActions.useBuiltInText();
 	const style = calloutStyles[type];
 	const Icon = style.Icon;
 	const resolvedTitle = title === void 0 ? t(defaultTitleKeys[type]) : title;
@@ -119,9 +142,9 @@ function Callout(arg0) {
 function CardIcon(arg0) {
 	const { name } = arg0;
 	if (!name) return null;
-	const iconName = require_shell.resolveLucideIconName(name);
+	const iconName = require_PageActions.resolveLucideIconName(name);
 	if (!iconName) return null;
-	const Icon = require_shell.lucideIconRegistry[iconName];
+	const Icon = require_PageActions.lucideIconRegistry[iconName];
 	if (!Icon) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		className: "flex size-9 flex-none items-center justify-center rounded-(--clarify-theme-tokens-radius-lg) bg-(--clarify-ui-accent-background) text-(--clarify-ui-accent-text) ring-1 ring-(--clarify-ui-accent-border)",
@@ -167,13 +190,7 @@ function Card(arg0) {
 		className: classes,
 		children: content
 	});
-	if (href.startsWith("/") && !href.startsWith("//")) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router_dom.Link, {
-		to: href,
-		className: classes,
-		...props,
-		children: content
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LocalizedLink, {
 		href,
 		className: classes,
 		...props,
@@ -212,7 +229,7 @@ function getNodeText(node) {
 }
 function CopyButton(arg0) {
 	const { code } = arg0;
-	const t = require_shell.useBuiltInText();
+	const t = require_PageActions.useBuiltInText();
 	const [copyCount, setCopyCount] = (0, react.useState)(0);
 	const copied = copyCount > 0;
 	(0, react.useEffect)(() => {
@@ -221,38 +238,30 @@ function CopyButton(arg0) {
 		return () => window.clearTimeout(timeout);
 	}, [copyCount]);
 	if (!code) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 		type: "button",
-		className: (0, clsx.default)("clarify-code-copy group/button absolute top-3.5 right-4 overflow-hidden rounded-full py-1 pr-3 pl-2 text-2xs font-medium opacity-0 backdrop-blur-sm transition group-hover:opacity-100 focus:opacity-100", copied ? "clarify-code-copy-copied" : "bg-white/5 hover:bg-white/7.5 dark:bg-white/2.5 dark:hover:bg-white/5"),
+		className: (0, clsx.default)("clarify-code-copy group/button absolute top-3.5 right-4 inline-flex items-center gap-1 overflow-hidden rounded-full border border-(--clarify-code-border) py-1 pr-3 pl-2 text-2xs font-medium whitespace-nowrap opacity-100 shadow-sm backdrop-blur-sm transition sm:opacity-0 sm:group-hover:opacity-100 focus:opacity-100", copied ? "clarify-code-copy-copied text-(--clarify-code-text)" : "bg-(--clarify-code-control-background) text-(--clarify-code-text) hover:bg-(--clarify-code-control-background-hover)"),
 		onClick: () => {
-			require_shell.copyTextToClipboard(code).then((ok) => {
+			require_PageActions.copyTextToClipboard(code).then((ok) => {
 				if (ok) setCopyCount((count) => count + 1);
 			});
 		},
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-			"aria-hidden": copied,
-			className: (0, clsx.default)("pointer-events-none flex items-center gap-0.5 text-zinc-400 transition duration-300", copied && "-translate-y-1.5 opacity-0"),
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Clipboard, { className: "h-5 w-5 stroke-zinc-500 transition-colors group-hover/button:stroke-zinc-400" }), t("actions.copy")]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			"aria-hidden": !copied,
-			className: (0, clsx.default)("pointer-events-none absolute inset-0 flex items-center justify-center text-(--clarify-theme-tokens-colors-primary) transition duration-300", !copied && "translate-y-1.5 opacity-0"),
-			children: t("actions.copied")
-		})]
+		children: copied ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "h-3.5 w-3.5 stroke-(--clarify-theme-tokens-colors-primary)" }), t("actions.copied")] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Clipboard, { className: "h-3.5 w-3.5 stroke-(--clarify-code-muted) transition-colors group-hover/button:stroke-(--clarify-code-text)" }), t("actions.copy")] })
 	});
 }
 function CodePanelHeader(arg0) {
 	const { tag, label } = arg0;
 	if (!tag && !label) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "clarify-code-panel-header flex h-9 items-center gap-2 border-y border-t-transparent border-b-white/7.5 bg-zinc-900 px-4 dark:border-b-white/5 dark:bg-white/1",
+		className: "clarify-code-panel-header flex h-9 items-center gap-2 border-y border-(--clarify-code-border) border-t-transparent bg-(--clarify-code-background) px-4",
 		children: [
 			tag ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				className: "clarify-code-panel-tag font-semibold text-(--clarify-theme-tokens-colors-primary)",
 				children: tag
 			}) : null,
-			tag && label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "h-0.5 w-0.5 rounded-full bg-zinc-500" }) : null,
+			tag && label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "h-0.5 w-0.5 rounded-full bg-(--clarify-code-faint)" }) : null,
 			label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "text-xs text-zinc-400",
+				className: "truncate text-xs text-(--clarify-code-muted)",
 				children: label
 			}) : null
 		]
@@ -270,14 +279,14 @@ function CodePanel(arg0) {
 	}
 	const copyText = code ?? getNodeText(children);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "clarify-code-panel group dark:bg-white/2.5",
+		className: "clarify-code-panel group bg-(--clarify-code-background)",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodePanelHeader, {
 			tag,
 			label
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "relative",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
-				className: "clarify-code-pre overflow-x-auto p-4 text-xs text-white",
+				className: "clarify-code-pre overflow-x-auto p-4 text-xs text-(--clarify-code-text)",
 				children
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopyButton, { code: copyText })]
 		})]
@@ -285,18 +294,18 @@ function CodePanel(arg0) {
 }
 function CodeGroupHeader(arg0) {
 	const { title, children, selectedIndex } = arg0;
-	const t = require_shell.useBuiltInText();
+	const t = require_PageActions.useBuiltInText();
 	const hasTabs = react.Children.count(children) > 1;
 	if (!title && !hasTabs) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "clarify-code-group-header flex min-h-(--clarify-code-header-min-height) flex-wrap items-start gap-x-4 border-b border-zinc-700 bg-zinc-800 px-4 dark:border-zinc-800 dark:bg-transparent",
+		className: "clarify-code-group-header flex min-h-(--clarify-code-header-min-height) flex-wrap items-start gap-x-4 border-b border-(--clarify-code-border) bg-(--clarify-code-header-background) px-4",
 		children: [title ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-			className: "mr-auto pt-3 text-xs font-semibold text-white",
+			className: "mr-auto pt-3 text-xs font-semibold text-(--clarify-code-text)",
 			children: title
 		}) : null, hasTabs ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.TabList, {
 			className: "clarify-code-tabs -mb-px flex gap-4 text-xs font-medium",
 			children: react.Children.map(children, (child, childIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.Tab, {
-				className: (0, clsx.default)("clarify-code-tab border-b py-3 transition data-selected:not-data-focus:outline-hidden", childIndex === selectedIndex ? "border-(--clarify-theme-tokens-colors-primary) text-(--clarify-theme-tokens-colors-primary)" : "border-transparent text-zinc-400 hover:text-zinc-300"),
+				className: (0, clsx.default)("clarify-code-tab border-b py-3 transition data-selected:not-data-focus:outline-hidden", childIndex === selectedIndex ? "border-(--clarify-theme-tokens-colors-primary) text-(--clarify-theme-tokens-colors-primary)" : "border-transparent text-(--clarify-code-muted) hover:text-(--clarify-code-text)"),
 				children: getPanelTitle({
 					...(0, react.isValidElement)(child) ? child.props : {},
 					fallbackTitle: t("actions.code")
@@ -364,13 +373,13 @@ function useTabGroupProps(availableLanguages) {
 var CodeGroupContext = (0, react.createContext)(false);
 function CodeGroup(arg0) {
 	const { children, title, ...props } = arg0;
-	const t = require_shell.useBuiltInText();
+	const t = require_PageActions.useBuiltInText();
 	const tabGroupProps = useTabGroupProps(react.Children.map(children, (child) => getPanelTitle({
 		...(0, react.isValidElement)(child) ? child.props : {},
 		fallbackTitle: t("actions.code")
 	})) ?? []);
 	const hasTabs = react.Children.count(children) > 1;
-	const containerClassName = "clarify-code-group my-6 overflow-hidden rounded-2xl bg-zinc-900 shadow-md dark:ring-1 dark:ring-white/10";
+	const containerClassName = "clarify-code-group my-6 overflow-hidden rounded-2xl bg-(--clarify-code-background) shadow-md ring-1 ring-(--clarify-code-border)";
 	const header = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodeGroupHeader, {
 		title,
 		selectedIndex: tabGroupProps.selectedIndex,
@@ -431,7 +440,7 @@ function Collapse(arg0) {
 		setMaxHeight(open ? `${contentRef.current.scrollHeight}px` : "0px");
 	}, [open, children]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, clsx.default)("clarify-collapse my-6 overflow-hidden rounded-(--clarify-theme-tokens-radius-xl) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) shadow-sm", className),
+		className: (0, clsx.default)("clarify-collapse my-6 overflow-hidden rounded-(--clarify-theme-tokens-radius-xl) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface)", className),
 		...props,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 			type: "button",
@@ -469,7 +478,7 @@ function FeedbackButton(props) {
 }
 var FeedbackForm = (0, react.forwardRef)(function FeedbackForm(arg0, ref) {
 	const { onSubmit, className, ...props } = arg0;
-	const t = require_shell.useBuiltInText();
+	const t = require_PageActions.useBuiltInText();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
 		...props,
 		ref,
@@ -496,7 +505,7 @@ var FeedbackForm = (0, react.forwardRef)(function FeedbackForm(arg0, ref) {
 });
 var FeedbackThanks = (0, react.forwardRef)(function FeedbackThanks(arg0, ref) {
 	const { className, ...props } = arg0;
-	const t = require_shell.useBuiltInText();
+	const t = require_PageActions.useBuiltInText();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		...props,
 		ref,
@@ -604,9 +613,9 @@ function Heading(arg0) {
 	const resolvedLevel = level ?? 2;
 	const Component = `h${resolvedLevel}`;
 	const ref = (0, react.useRef)(null);
-	const registerHeading = require_shell.useSectionStore((state) => state.registerHeading);
+	const registerHeading = require_PageActions.useSectionStore((state) => state.registerHeading);
 	const inView = (0, framer_motion.useInView)(ref, {
-		margin: `${require_shell.remToPx(-3.5)}px 0px 0px 0px`,
+		margin: `${require_PageActions.remToPx(-3.5)}px 0px 0px 0px`,
 		amount: "all"
 	});
 	(0, react.useEffect)(() => {
@@ -734,6 +743,57 @@ function Prose(arg0) {
 	});
 }
 //#endregion
+//#region source/components/WebFrame.tsx
+function WebFrame(arg0) {
+	const { src, title = "Embedded content", children, showWindow = true, className, iframeClassName, height = 420, style, ...props } = arg0;
+	const frame = src ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("iframe", {
+		src,
+		title,
+		loading: "lazy",
+		className: (0, clsx.default)("block w-full flex-1 border-0 bg-white", iframeClassName),
+		style: {
+			height,
+			...style
+		},
+		...props
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, clsx.default)("min-h-0 flex-1 overflow-auto bg-white text-zinc-950", iframeClassName),
+		style: {
+			height,
+			...style
+		},
+		children
+	});
+	if (!showWindow) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, clsx.default)("clarify-web-frame not-prose my-10 overflow-hidden rounded-(--clarify-theme-tokens-radius-xl) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) shadow-(--clarify-ui-accent-glow)", className),
+		children: frame
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, clsx.default)("clarify-web-frame not-prose my-10 overflow-hidden rounded-(--clarify-theme-tokens-radius-xl) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) shadow-(--clarify-ui-accent-glow)", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex h-10 items-center gap-2 border-b border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-code-background) px-4",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "size-3 rounded-full bg-red-400",
+					"aria-hidden": "true"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "size-3 rounded-full bg-yellow-400",
+					"aria-hidden": "true"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "size-3 rounded-full bg-green-400",
+					"aria-hidden": "true"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "sr-only",
+					children: title
+				})
+			]
+		}), frame]
+	});
+}
+//#endregion
 //#region source/mdx/primitives.tsx
 var primitives_exports = /* @__PURE__ */ require_chunk.__exportAll({
 	Button: () => Button,
@@ -746,8 +806,10 @@ var primitives_exports = /* @__PURE__ */ require_chunk.__exportAll({
 	Properties: () => Properties,
 	Property: () => Property,
 	Row: () => Row,
+	WebFrame: () => WebFrame,
 	a: () => a,
 	code: () => code,
+	h1: () => h1,
 	h2: () => h2,
 	h3: () => h3,
 	pre: () => pre,
@@ -756,7 +818,7 @@ var primitives_exports = /* @__PURE__ */ require_chunk.__exportAll({
 function wrapper(arg0) {
 	const { children } = arg0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("article", {
-		className: "clarify-mdx-page flex h-full flex-col pt-16 pb-10",
+		className: "clarify-mdx-page flex h-full flex-col pt-14 pb-10",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Prose, {
 			className: "flex-auto",
 			children
@@ -765,15 +827,22 @@ function wrapper(arg0) {
 }
 function a(arg0) {
 	const { href = "", ...props } = arg0;
-	if (href.startsWith("/") && !href.startsWith("//")) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router_dom.Link, {
-		to: href,
-		...props
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LocalizedLink, {
 		href,
 		...props
 	});
 }
+function h1(arg0) {
+	const { children, className, ...props } = arg0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "clarify-page-title-row flex flex-col gap-4  pb-4 sm:flex-row sm:items-start sm:justify-between",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
+			className: (0, clsx.default)("clarify-page-title min-w-0 flex-1", className),
+			...props,
+			children
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PageActions.PageTitleActions, {})]
+	});
+}
 var code = Code;
 var pre = Pre;
 function h2(props) {
@@ -1478,26 +1547,26 @@ function SelectControl(arg0) {
 			className: wrapperClassName,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.ListboxButton, {
 				"aria-label": label,
-				className: `clarify-api-select-button flex ${buttonSizeClassName} items-center justify-between gap-2 rounded-lg bg-black/30 px-2 py-1 text-xs font-medium whitespace-nowrap text-zinc-100 outline-hidden transition hover:bg-black/50 focus:ring-2 focus:ring-emerald-400/25 data-open:bg-white/10 data-open:ring-2 data-open:ring-emerald-400/25`,
+				className: `clarify-api-select-button flex ${buttonSizeClassName} items-center justify-between gap-2 rounded-lg bg-(--clarify-code-control-background) px-2 py-1 text-xs font-medium whitespace-nowrap text-(--clarify-code-text) outline-hidden transition hover:bg-(--clarify-code-control-background-hover) focus:ring-2 focus:ring-(--clarify-ui-accent-border) data-open:bg-(--clarify-code-control-background-hover) data-open:ring-2 data-open:ring-(--clarify-ui-accent-border)`,
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 					className: "flex min-w-0 items-center gap-1.5 overflow-hidden",
 					children: [icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "shrink-0 text-zinc-500",
+						className: "shrink-0 text-(--clarify-code-faint)",
 						children: icon
 					}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						className: "truncate",
 						children: selectedOption?.label ?? value
 					})]
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronsUpDownIcon, {
-					className: "h-3.5 w-3.5 shrink-0 text-zinc-500",
+					className: "h-3.5 w-3.5 shrink-0 text-(--clarify-code-faint)",
 					"aria-hidden": "true"
 				})]
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.ListboxOptions, {
 				anchor: "bottom end",
-				className: "clarify-api-select-options z-30 mt-1 max-h-64 w-max min-w-(--button-width) max-w-(--clarify-popover-max-width) overflow-auto rounded-xl bg-zinc-900 p-1 text-xs shadow-lg shadow-black/20 ring-1 ring-white/10 [--anchor-gap:--spacing(1)] focus:outline-none",
+				className: "clarify-api-select-options z-30 mt-1 max-h-64 w-max min-w-(--button-width) max-w-(--clarify-popover-max-width) overflow-auto rounded-xl bg-(--clarify-code-surface) p-1 text-xs shadow-lg shadow-black/20 ring-1 ring-(--clarify-code-border) [--anchor-gap:--spacing(1)] focus:outline-none",
 				children: normalizedOptions.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.ListboxOption, {
 					value: option.value,
-					className: "clarify-api-select-option group flex cursor-default items-center justify-between gap-3 rounded-lg px-2.5 py-2 text-xs whitespace-nowrap text-zinc-300 select-none data-focus:bg-white/10 data-focus:text-white data-selected:text-emerald-300",
+					className: "clarify-api-select-option group flex cursor-default items-center justify-between gap-3 rounded-lg px-2.5 py-2 text-xs whitespace-nowrap text-(--clarify-code-muted) select-none data-focus:bg-(--clarify-code-control-background-hover) data-focus:text-(--clarify-code-text) data-selected:text-(--clarify-theme-tokens-colors-primary)",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: option.label }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CheckIcon, {
 						className: "h-3.5 w-3.5 shrink-0 opacity-0 group-data-selected:opacity-100",
 						"aria-hidden": "true"
@@ -1572,23 +1641,23 @@ function authLabel(name, scheme) {
 }
 function CopyCodeButton(arg0) {
 	const { code } = arg0;
-	const t = require_shell.useBuiltInText();
+	const t = require_PageActions.useBuiltInText();
 	const [copied, setCopied] = (0, react.useState)(false);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 		type: "button",
 		onClick: () => {
-			require_shell.copyTextToClipboard(code).then((ok) => {
+			require_PageActions.copyTextToClipboard(code).then((ok) => {
 				if (!ok) return;
 				setCopied(true);
 				window.setTimeout(() => setCopied(false), 1e3);
 			});
 		},
-		className: "flex items-center gap-1.5 rounded-full bg-black/ px-2.5 py-1.5 text-2xs font-medium text-zinc-400 transition hover:bg-black/50 hover:text-zinc-200 focus:bg-black/50 focus:text-zinc-200",
+		className: "flex items-center gap-1.5 rounded-full bg-(--clarify-code-control-background) px-2.5 py-1.5 text-2xs font-medium text-(--clarify-code-muted) transition hover:bg-(--clarify-code-control-background-hover) hover:text-(--clarify-code-text) focus:bg-(--clarify-code-control-background-hover) focus:text-(--clarify-code-text)",
 		children: [copied ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CheckIcon, {
-			className: "h-3.5 w-3.5 text-emerald-300",
+			className: "h-3.5 w-3.5 text-(--clarify-theme-tokens-colors-primary)",
 			"aria-hidden": "true"
 		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ClipboardIcon, {
-			className: "h-3.5 w-3.5 text-zinc-500",
+			className: "h-3.5 w-3.5 text-(--clarify-code-faint)",
 			"aria-hidden": "true"
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: copied ? t("actions.copied") : t("actions.copy") })]
 	});
@@ -1608,7 +1677,7 @@ function ExampleMetaValue(arg0) {
 }
 function CodeToolbar(arg0) {
 	const { code, languageOptions, selectedLanguageKey, onSelectLanguage, clientOptions, selectedClientKey, onSelectClient } = arg0;
-	const t = require_shell.useBuiltInText();
+	const t = require_PageActions.useBuiltInText();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "absolute top-3.5 right-4 left-4 z-10 flex items-center justify-between gap-3",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -1637,17 +1706,17 @@ function CodeToolbar(arg0) {
 }
 function ApiExampleCodeGroup(arg0) {
 	const { title, tag, tagOptions, onSelectTag, label, labelOptions, onSelectLabel, comfortableMeta = false, code, language, mediaTypes, selectedMediaType, onSelectMediaType, examples, selectedExampleKey, onSelectExample, languageOptions, selectedLanguageKey, onSelectLanguage, clientOptions, selectedClientKey, onSelectClient } = arg0;
-	const t = require_shell.useBuiltInText();
-	const metaClassName = comfortableMeta ? "flex min-h-11 min-w-0 items-center gap-2 border-y border-t-transparent border-b-white/7.5 bg-zinc-900 px-4 py-2 dark:border-b-white/5 dark:bg-white/1" : "flex h-9 min-w-0 items-center gap-2 border-y border-t-transparent border-b-white/7.5 bg-zinc-900 px-4 dark:border-b-white/5 dark:bg-white/1";
+	const t = require_PageActions.useBuiltInText();
+	const metaClassName = comfortableMeta ? "flex min-h-11 min-w-0 items-center gap-2 border-y border-(--clarify-code-border) border-t-transparent bg-(--clarify-code-background) px-4 py-2" : "flex h-9 min-w-0 items-center gap-2 border-y border-(--clarify-code-border) border-t-transparent bg-(--clarify-code-background) px-4";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "clarify-api-example my-6 overflow-hidden rounded-2xl bg-zinc-900 shadow-md dark:ring-1 dark:ring-white/10",
+		className: "clarify-api-example my-6 overflow-hidden rounded-2xl bg-(--clarify-code-background) shadow-md ring-1 ring-(--clarify-code-border)",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "not-prose",
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "clarify-api-example-header flex min-h-(--clarify-code-header-min-height) items-center gap-3 border-b border-zinc-700 bg-zinc-800 px-4 py-2 dark:border-zinc-800 dark:bg-transparent",
+					className: "clarify-api-example-header flex min-h-(--clarify-code-header-min-height) items-center gap-3 border-b border-(--clarify-code-border) bg-(--clarify-code-header-background) px-4 py-2",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-						className: "mr-auto min-w-16 truncate py-1 text-xs font-semibold text-white",
+						className: "mr-auto min-w-16 truncate py-1 text-xs font-semibold text-(--clarify-code-text)",
 						children: title
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "ml-auto flex min-w-0 items-center gap-2 whitespace-nowrap",
@@ -1679,18 +1748,18 @@ function ApiExampleCodeGroup(arg0) {
 							onChange: onSelectTag,
 							className: "clarify-api-example-status font-semibold text-emerald-400"
 						}) : null,
-						tag && label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "h-0.5 w-0.5 shrink-0 rounded-full bg-zinc-500" }) : null,
+						tag && label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "h-0.5 w-0.5 shrink-0 rounded-full bg-(--clarify-code-faint)" }) : null,
 						label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ExampleMetaValue, {
 							label: t("openapi.mediaType"),
 							value: label,
 							options: labelOptions,
 							onChange: onSelectLabel,
-							className: "min-w-0 truncate text-xs text-zinc-400"
+							className: "min-w-0 truncate text-xs text-(--clarify-code-muted)"
 						}) : null
 					]
 				}) : null,
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "clarify-api-example-code group relative",
+					className: "clarify-api-example-code group relative bg-(--clarify-code-background)",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodeToolbar, {
 						code,
 						languageOptions,
@@ -1700,7 +1769,7 @@ function ApiExampleCodeGroup(arg0) {
 						selectedClientKey,
 						onSelectClient
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
-						className: `max-h-128 overflow-auto overscroll-contain p-4 text-xs text-white ${languageOptions && languageOptions.length > 1 ? "pt-14" : ""}`,
+						className: `max-h-128 overflow-auto overscroll-contain p-4 text-xs text-(--clarify-code-text) ${languageOptions && languageOptions.length > 1 ? "pt-14" : ""}`,
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
 							className: `language-${language}`,
 							children: code
@@ -1713,7 +1782,7 @@ function ApiExampleCodeGroup(arg0) {
 }
 function RequestExamplesPanel(arg0) {
 	const { spec, path, method, parameters, requestContents, selectedMediaType, onSelectMediaType, selectedServer, serverVariables, auth } = arg0;
-	const t = require_shell.useBuiltInText();
+	const t = require_PageActions.useBuiltInText();
 	const selectedContent = requestContents.find((content) => content.mediaType === selectedMediaType) ?? requestContents[0];
 	const examples = getExampleEntries(selectedContent?.value);
 	const [selectedExampleKey, setSelectedExampleKey] = (0, react.useState)(examples[0]?.key ?? "");
@@ -1770,7 +1839,7 @@ function RequestExamplesPanel(arg0) {
 }
 function ResponseExamplesPanel(arg0) {
 	const { operation, spec } = arg0;
-	const t = require_shell.useBuiltInText();
+	const t = require_PageActions.useBuiltInText();
 	const responses = getResponseEntries(operation, spec).filter(({ response }) => getMediaTypeEntries(response.content, spec).length > 0);
 	const [selectedStatus, setSelectedStatus] = (0, react.useState)(responses.find(({ status }) => status.startsWith("2"))?.status ?? responses[0]?.status ?? "");
 	const selectedResponse = responses.find(({ status }) => status === selectedStatus) ?? responses[0];
@@ -1963,7 +2032,7 @@ function getRootSchemaNode(spec, schema) {
 }
 function SchemaNode(arg0) {
 	const { node, depth = 0 } = arg0;
-	const t = require_shell.useBuiltInText();
+	const t = require_PageActions.useBuiltInText();
 	const [expanded, setExpanded] = (0, react.useState)(depth < 1);
 	const hasChildren = node.children.length > 0;
 	const type = [node.type, node.required ? t("openapi.requiredBadge") : void 0].filter(Boolean).join(", ") || void 0;
@@ -2033,7 +2102,7 @@ function SchemaProperties(arg0) {
 }
 function ParameterList(arg0) {
 	const { title, parameters } = arg0;
-	const t = require_shell.useBuiltInText();
+	const t = require_PageActions.useBuiltInText();
 	if (parameters.length === 0) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: title }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Properties, { children: parameters.map((parameter) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Property, {
 		name: parameter.name ?? t("openapi.parameter"),
@@ -2043,7 +2112,7 @@ function ParameterList(arg0) {
 }
 function ResponseList(arg0) {
 	const { operation, spec } = arg0;
-	const t = require_shell.useBuiltInText();
+	const t = require_PageActions.useBuiltInText();
 	const responses = getResponseEntries(operation, spec);
 	if (responses.length === 0) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: t("openapi.responses") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Properties, { children: responses.map(({ status, response }) => {
@@ -2144,7 +2213,7 @@ function ServerUrlValue(arg0) {
 		"aria-expanded": open,
 		"aria-label": "Server",
 		onClick: onToggle,
-		className: (0, clsx.default)("flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-(--clarify-ui-subtle-background) text-(--clarify-ui-text-soft) transition hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-theme-tokens-colors-foreground) sm:w-auto sm:min-w-16 sm:max-w-(--clarify-server-url-max-width) sm:px-1.5", open ? "bg-(--clarify-ui-active-background) text-(--clarify-theme-tokens-colors-foreground)" : null),
+		className: (0, clsx.default)("flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-(--clarify-ui-subtle-background) text-(--clarify-ui-text-foreground) transition hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-theme-tokens-colors-foreground) sm:w-auto sm:min-w-16 sm:max-w-(--clarify-server-url-max-width) sm:px-1.5", open ? "bg-(--clarify-ui-active-background) text-(--clarify-theme-tokens-colors-foreground)" : null),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "sm:hidden",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ServerIcon, {
@@ -2154,7 +2223,7 @@ function ServerUrlValue(arg0) {
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 			className: "hidden min-w-0 items-center gap-1 overflow-hidden sm:flex",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "truncate text-xs",
+				className: "truncate font-semibold text-xs",
 				children: url
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDownIcon, {
 				className: "h-3.5 w-3.5 shrink-0 text-zinc-400",
@@ -2334,7 +2403,7 @@ function EndpointIdentity(arg0) {
 }
 function OpenApiOperation(arg0) {
 	const { spec, path, method, operation } = arg0;
-	const t = require_shell.useBuiltInText();
+	const t = require_PageActions.useBuiltInText();
 	const id = (0, github_slugger.slug)(`${method.toLowerCase()} ${path}`);
 	const summary = operation.summary ?? `${method} ${path}`;
 	const description = operation.description;
@@ -2579,6 +2648,12 @@ Object.defineProperty(exports, "Tag", {
 		return Tag;
 	}
 });
+Object.defineProperty(exports, "WebFrame", {
+	enumerable: true,
+	get: function() {
+		return WebFrame;
+	}
+});
 Object.defineProperty(exports, "authPlaceholder", {
 	enumerable: true,
 	get: function() {
@@ -2628,4 +2703,4 @@ Object.defineProperty(exports, "primitives_exports", {
 	}
 });
 
-//# sourceMappingURL=OpenApiOperation-CxQQyEHK.cjs.map
+//# sourceMappingURL=OpenApiOperation-C4xZu4i0.cjs.map