fumadocs-openapi 10.9.1 → 10.10.0

package/dist/ui/schema/client.js

@@ -2,115 +2,234 @@
 import { useTranslations } from "../client/i18n.js";
 import { cn } from "../../utils/cn.js";
 import { Badge } from "../components/method-label.js";
-import { Fragment, Suspense, createContext, use, useCallback, useDeferredValue, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../components/select.js";
+import { useAnchorId } from "../../utils/auto-anchor.client.js";
+import { mergeRefs } from "../../utils/merge-refs.js";
+import { Fragment, Suspense, createContext, use, useCallback, useDeferredValue, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { ChevronDown, FilterIcon } from "lucide-react";
+import { CheckIcon, FilterIcon, LinkIcon } from "lucide-react";
 import { buttonVariants } from "fumadocs-ui/components/ui/button";
 import { cva } from "class-variance-authority";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "fumadocs-ui/components/ui/collapsible";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "fumadocs-ui/components/tabs";
+import { useCopyButton } from "fumadocs-ui/utils/use-copy-button";
 import { Popover, PopoverContent, PopoverTrigger } from "fumadocs-ui/components/ui/popover";
 //#region src/ui/schema/client.tsx
 const typeVariants = cva("text-sm text-start text-fd-muted-foreground font-mono", { variants: { variant: { trigger: "underline hover:text-fd-accent-foreground data-[state=open]:text-fd-accent-foreground" } } });
-const PopoverContext = createContext({ renderTrigger: (props) => /* @__PURE__ */ jsx(RootPopoverTrigger, { ...props }) });
-const DataContext = createContext(null);
-function useData() {
-	return use(DataContext);
-}
-function usePopover() {
-	return use(PopoverContext);
+const Context = createContext(null);
+function useStates() {
+	return use(Context);
 }
 function SchemaUI({ name, required = false, as = "property", generated }) {
-	return /* @__PURE__ */ jsx(DataContext, {
-		value: generated,
-		children: /* @__PURE__ */ jsx(SchemaUIProperty, {
+	const rootId = useAnchorId([name]);
+	const [path, _setPath] = useState(() => [{
+		$ref: generated.$root,
+		name
+	}]);
+	const ref = useRef(null);
+	const popoverRef = useRef(null);
+	const setPath = useCallback((v) => {
+		for (const item of v) delete item.highlighted;
+		_setPath((current) => {
+			if (popoverRef.current && current.length > 0) current[current.length - 1].scrollTop = popoverRef.current.scrollTop;
+			return v;
+		});
+	}, []);
+	useEffect(() => {
+		const element = popoverRef.current;
+		if (!element) return;
+		element.scrollTop = path.at(-1).scrollTop ?? 0;
+		const current = parseFloat(element.style.getPropertyValue("--min-height") || "0");
+		element.style.setProperty("--min-height", Math.max(element.clientHeight + 2, current) + "px");
+	}, [path]);
+	useEffect(() => {
+		const url = new URL(window.location.href);
+		const param = url.searchParams.get("path");
+		if (url.hash !== `#${rootId}` || !param) return;
+		const decoded = decodePath(param, url.searchParams.get("s-highlight"));
+		if (!decoded || decoded.length === 0 || decoded.some((item) => !generated.refs[item.$ref])) return;
+		_setPath(decoded);
+		if (!decoded.at(-1).highlighted) ref.current?.scrollIntoView({ behavior: "smooth" });
+	}, [rootId]);
+	return /* @__PURE__ */ jsx(Context, {
+		value: useMemo(() => ({
+			rootId,
+			path,
+			generated,
+			setPath,
+			renderTypeInfoTrigger: ({ $ref, children, pathName }) => /* @__PURE__ */ jsxs(Popover, {
+				open: path[1] && path[1].$ref === $ref && path[1].name === pathName && !path.at(-1).closed,
+				onOpenChange: (v) => {
+					if (v) setPath([path[0], {
+						name: pathName,
+						$ref
+					}]);
+					else {
+						const next = [...path];
+						next.at(-1).closed = true;
+						setPath(next);
+					}
+				},
+				children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+					className: cn(typeVariants({ variant: "trigger" })),
+					children
+				}), /* @__PURE__ */ jsx(PopoverContent, {
+					ref: popoverRef,
+					className: "w-[600px] min-h-(--min-height,0) max-h-[460px] px-2 pt-0",
+					onOpenAutoFocus: (e) => {
+						const input = e.target.querySelector("input[data-object-search-input]");
+						if (!(input instanceof HTMLInputElement)) return;
+						input.focus({ preventScroll: true });
+						e.preventDefault();
+					},
+					children: /* @__PURE__ */ jsx(SchemaUIPopover, {})
+				})]
+			})
+		}), [
+			generated,
+			path,
+			rootId,
+			setPath
+		]),
+		children: as === "property" || generated.refs[generated.$root].type === "primitive" ? /* @__PURE__ */ jsx(ObjectProperty, {
+			ref,
+			id: rootId,
 			name,
 			$type: generated.$root,
-			overrides: { required },
-			variant: as === "property" || generated.refs[generated.$root].type === "primitive" ? "default" : "expand"
+			required
+		}) : /* @__PURE__ */ jsx("div", {
+			id: rootId,
+			ref,
+			children: /* @__PURE__ */ jsx(PathItemBody, { pathIndex: 0 })
 		})
 	});
 }
-function SchemaUIProperty({ name, $type, variant = "default", overrides, objectSearchOverrides }) {
-	const { refs } = useData();
+function SchemaDescription({ schema, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		className: cn("prose-no-margin py-4 empty:hidden", props.className),
+		children: [schema.description, schema.infoTags && schema.infoTags.length > 0 && /* @__PURE__ */ jsx("div", {
+			className: "flex flex-row gap-2 flex-wrap mt-2 not-prose empty:hidden",
+			children: schema.infoTags.map((tag, i) => /* @__PURE__ */ jsx(InfoTag, { tag }, i))
+		})]
+	});
+}
+function ObjectProperty({ name, $type, required, ...props }) {
+	const t = useTranslations();
+	const { path, generated: { refs }, rootId } = useStates();
 	const schema = refs[$type];
-	const renderRef = useRenderRef();
-	let type = schema.aliasName;
+	const highlighted = path.at(-1).highlighted === name;
+	const [isChecked, onClick] = useCopyButton(() => {
+		const url = new URL(window.location.href);
+		url.hash = `#${rootId}`;
+		url.searchParams.set("s-highlight", name);
+		url.searchParams.set("path", encodePath(path));
+		return navigator.clipboard.writeText(url.href);
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		ref: mergeRefs(props.ref, useCallback((element) => {
+			if (element && highlighted) element.scrollIntoView();
+		}, [highlighted])),
+		className: cn("group/property text-sm border-t py-4 first:border-t-0", props.className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-wrap items-center gap-3 not-prose",
+			children: [
+				/* @__PURE__ */ jsxs("span", {
+					className: "font-medium font-mono",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: cn(highlighted ? "bg-fd-primary text-fd-primary-foreground rounded-sm" : "text-fd-primary", schema.deprecated && "line-through opacity-80"),
+						children: name
+					}), required ? /* @__PURE__ */ jsx("span", {
+						className: "text-red-400",
+						children: "*"
+					}) : /* @__PURE__ */ jsx("span", {
+						className: "text-fd-muted-foreground",
+						children: "?"
+					})]
+				}),
+				schema.type === "primitive" ? /* @__PURE__ */ jsx("span", {
+					className: cn(typeVariants()),
+					children: schema.aliasName
+				}) : /* @__PURE__ */ jsx(TypeInfoTrigger, {
+					pathName: name,
+					$ref: $type,
+					children: schema.aliasName
+				}),
+				/* @__PURE__ */ jsx("div", { className: "flex-1" }),
+				schema.deprecated && /* @__PURE__ */ jsx(Badge, {
+					color: "yellow",
+					className: "text-xs",
+					children: t.deprecated
+				}),
+				/* @__PURE__ */ jsx("button", {
+					className: cn(buttonVariants({
+						size: "icon-xs",
+						variant: "ghost"
+					}), "text-fd-muted-foreground"),
+					onClick,
+					children: isChecked ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(LinkIcon, {})
+				})
+			]
+		}), /* @__PURE__ */ jsx(SchemaDescription, {
+			schema,
+			className: "pb-0"
+		})]
+	});
+}
+function PathItemBody({ pathIndex, asSchema, tabDepth = 0, objectSearchOverrides }) {
+	const { path, setPath, generated: { refs } } = useStates();
+	const schema = asSchema ?? refs[path[pathIndex].$ref];
 	if ((schema.type === "or" || schema.type === "and") && schema.items.length > 0) {
-		if (variant === "expand") return /* @__PURE__ */ jsxs(Tabs, {
-			defaultValue: schema.items[0].$type,
-			children: [/* @__PURE__ */ jsx(TabsList, { children: schema.items.map((item) => /* @__PURE__ */ jsx(TabsTrigger, {
-				value: item.$type,
+		const value = path[pathIndex].tabValues?.[tabDepth] ?? schema.items[0].$type;
+		const items = schema.items.map((item) => ({
+			label: /* @__PURE__ */ jsx("code", {
+				className: "text-xs font-medium",
 				children: item.name
-			}, item.$type)) }), schema.items.map((item) => /* @__PURE__ */ jsx(TabsContent, {
-				value: item.$type,
-				className: "pt-2 pb-0",
-				children: /* @__PURE__ */ jsx(SchemaUIProperty, {
-					...item,
-					variant: "expand"
-				})
-			}, item.$type))]
-		});
-		type = renderRef({
-			pathName: name,
-			$ref: $type,
-			text: schema.aliasName
-		});
-	} else if (schema.type === "object" && schema.props.length > 0) {
-		if (variant === "expand") return /* @__PURE__ */ jsx(ObjectSearch, {
-			properties: schema.props,
-			...objectSearchOverrides
-		});
-		type = renderRef({
-			pathName: name,
-			$ref: $type,
-			text: schema.aliasName
-		});
-	} else if (schema.type === "array") {
-		if (variant === "expand") return /* @__PURE__ */ jsx(ArrayItemCollapsible, { schema });
-		type = renderRef({
-			pathName: name,
-			$ref: $type,
-			text: schema.aliasName
+			}),
+			value: item.$type
+		}));
+		return /* @__PURE__ */ jsxs(Select, {
+			value,
+			onValueChange: (v) => {
+				const next = [...path];
+				(next[pathIndex].tabValues ??= []).splice(tabDepth, 1, v);
+				setPath(next);
+			},
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-row my-2 gap-2 items-center",
+				children: [
+					/* @__PURE__ */ jsx(SchemaDescription, {
+						schema,
+						className: "flex-1 py-0"
+					}),
+					/* @__PURE__ */ jsx(SelectTrigger, {
+						className: "not-prose w-fit min-w-0 mb-auto *:min-w-0",
+						children: /* @__PURE__ */ jsx(SelectValue, { children: items.find((item) => item.value === value)?.label })
+					}),
+					/* @__PURE__ */ jsx(SelectContent, { children: items.map(({ label, value }) => /* @__PURE__ */ jsx(SelectItem, {
+						value,
+						children: label
+					}, value)) })
+				]
+			}), /* @__PURE__ */ jsx(PathItemBody, {
+				asSchema: refs[value],
+				pathIndex,
+				tabDepth: tabDepth + 1
+			})]
 		});
 	}
-	const child = /* @__PURE__ */ jsxs(Fragment$1, { children: [schema.description, schema.infoTags && schema.infoTags.length > 0 && /* @__PURE__ */ jsx("div", {
-		className: "flex flex-row gap-2 flex-wrap my-2 not-prose empty:hidden",
-		children: schema.infoTags.map((tag, i) => /* @__PURE__ */ jsx(InfoTag, { tag }, i))
-	})] });
-	if (variant === "expand") return child;
-	return /* @__PURE__ */ jsx(Property, {
-		name,
-		type,
-		deprecated: schema.deprecated,
-		...overrides,
-		children: child
-	});
-}
-function ArrayItemCollapsible({ schema }) {
-	const [open, setOpen] = useState(false);
-	const t = useTranslations();
-	return /* @__PURE__ */ jsxs(Collapsible, {
-		className: "my-2",
-		open,
-		onOpenChange: setOpen,
-		children: [/* @__PURE__ */ jsxs(CollapsibleTrigger, {
-			className: cn(buttonVariants({
-				color: "secondary",
-				size: "sm"
-			}), "group px-3 py-2 data-[state=open]:rounded-b-none"),
-			children: [open ? t.schemaHideArray : t.schemaShowArray, /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 text-fd-muted-foreground group-data-[state=open]:rotate-180" })]
-		}), /* @__PURE__ */ jsx(CollapsibleContent, {
-			className: "-mt-px bg-fd-card px-3 rounded-lg rounded-tl-none border shadow-sm",
-			children: /* @__PURE__ */ jsx(SchemaUIProperty, {
-				name: "",
-				$type: schema.item.$type,
-				variant: "expand"
-			})
-		})]
+	if (schema.type === "object" && schema.props.length > 0) return /* @__PURE__ */ jsx(ObjectSearch, {
+		properties: schema.props,
+		...objectSearchOverrides,
+		children: /* @__PURE__ */ jsx(SchemaDescription, { schema })
 	});
+	if (schema.type === "array") return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(SchemaDescription, { schema }), /* @__PURE__ */ jsx(ObjectProperty, {
+		name: "[index: integer]",
+		$type: schema.item.$type
+	})] });
+	return /* @__PURE__ */ jsx(SchemaDescription, { schema });
 }
-function ObjectSearch({ properties, container, open }) {
+function ObjectSearch({ variant = "secondary", properties, inputContainer, children }) {
+	const { path, setPath } = useStates();
 	const [search, setSearch] = useState("");
 	const deferredValue = useDeferredValue(search);
 	const firstItemRef = useRef(null);
@@ -120,27 +239,35 @@ function ObjectSearch({ properties, container, open }) {
 		prevProperties.current = properties;
 		setSearch("");
 	}
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
-		...container,
-		className: cn("flex items-center border my-2 rounded-md bg-fd-secondary text-fd-secondary-foreground transition-colors shadow-sm focus-within:ring-2 focus-within:ring-fd-ring", container?.className),
-		children: [/* @__PURE__ */ jsx(FilterIcon, { className: "text-fd-muted-foreground ms-2 size-3.5" }), /* @__PURE__ */ jsx("input", {
-			value: search,
-			"data-object-search-input": "",
-			onChange: (e) => setSearch(e.target.value),
-			placeholder: t.schemaFilterPropertiesPlaceholder,
-			className: "text-sm ps-2 py-2 flex-1 outline-none placeholder:text-fd-muted-foreground",
-			onKeyDown: (e) => {
-				if (e.key === "Enter" && open) {
-					if (firstItemRef.current) open(firstItemRef.current);
-					e.preventDefault();
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsxs("div", {
+			...inputContainer,
+			className: cn("flex items-center bg-fd-secondary text-fd-secondary-foreground transition-colors", variant === "ghost" && "border-b focus-within:[&_svg]:text-fd-primary", variant === "secondary" && "border bg-fd-secondary rounded-md shadow-sm focus-within:ring-2 focus-within:ring-fd-ring", inputContainer?.className),
+			children: [/* @__PURE__ */ jsx(FilterIcon, { className: "text-fd-muted-foreground ms-2 size-3.5 transition-colors" }), /* @__PURE__ */ jsx("input", {
+				value: search,
+				"data-object-search-input": "",
+				onChange: (e) => setSearch(e.target.value),
+				placeholder: t.schemaFilterPropertiesPlaceholder,
+				className: "peer text-sm ps-2 py-2 flex-1 outline-none placeholder:text-fd-muted-foreground",
+				onKeyDown: (e) => {
+					if (e.key === "Enter") {
+						const item = firstItemRef.current;
+						if (item) setPath([...path, {
+							name: item.name,
+							$ref: item.$type
+						}]);
+						e.preventDefault();
+					}
 				}
-			}
-		})]
-	}), /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(ObjectSearchContent, {
-		search: deferredValue,
-		properties,
-		firstItemRef
-	}) })] });
+			})]
+		}),
+		children,
+		/* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(ObjectSearchContent, {
+			search: deferredValue,
+			properties,
+			firstItemRef
+		}) })
+	] });
 }
 function ObjectSearchContent({ search: rawSearch, firstItemRef, properties }) {
 	const t = useTranslations();
@@ -148,9 +275,9 @@ function ObjectSearchContent({ search: rawSearch, firstItemRef, properties }) {
 		const search = rawSearch.trim().toLowerCase();
 		return search.length > 0 ? properties.filter((prop) => prop.name.toLowerCase().includes(search)) : properties;
 	}, [properties, rawSearch]);
-	firstItemRef.current = filtered.length > 0 ? filtered[0] : null;
+	firstItemRef.current = filtered[0] ?? null;
 	if (filtered.length === 0) return /* @__PURE__ */ jsxs("p", {
-		className: "text-fd-muted-foreground text-sm px-2",
+		className: "text-fd-muted-foreground text-sm",
 		children: [
 			t.schemaFilterPropertiesEmpty,
 			" ",
@@ -160,200 +287,123 @@ function ObjectSearchContent({ search: rawSearch, firstItemRef, properties }) {
 			})
 		]
 	});
-	return filtered.map((prop) => /* @__PURE__ */ jsx(SchemaUIProperty, {
+	return filtered.map((prop) => /* @__PURE__ */ jsx(ObjectProperty, {
 		name: prop.name,
 		$type: prop.$type,
-		overrides: { required: prop.required }
+		required: prop.required
 	}, prop.name));
 }
 function InfoTag({ tag }) {
 	const ref = useRef(null);
-	const [isTruncated, setTruncated] = useState(false);
 	const [open, setOpen] = useState(false);
-	useEffect(() => {
-		const element = ref.current;
-		if (!element) return;
-		setTruncated(element.scrollWidth !== element.offsetWidth);
-	}, []);
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-row items-start gap-2 bg-fd-secondary border rounded-lg text-xs p-1.5 shadow-md max-w-full",
-		children: [
-			/* @__PURE__ */ jsx("span", {
-				className: "font-medium",
-				children: tag.label
-			}),
-			/* @__PURE__ */ jsx("code", {
-				ref,
-				className: cn("min-w-0 flex-1 text-fd-muted-foreground", open ? "wrap-break-word" : "truncate"),
-				children: tag.value
-			}),
-			isTruncated && /* @__PURE__ */ jsx("button", {
-				className: cn(buttonVariants({
-					size: "icon-xs",
-					variant: "ghost"
-				})),
-				onClick: () => setOpen((prev) => !prev),
-				children: /* @__PURE__ */ jsx(ChevronDown, {})
-			})
-		]
+	return /* @__PURE__ */ jsxs("button", {
+		className: "inline-flex text-start items-start gap-2 bg-fd-secondary border rounded-lg text-xs p-1.5 shadow-md max-w-full",
+		onClick: () => setOpen((prev) => !prev),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "font-medium",
+			children: tag.label
+		}), /* @__PURE__ */ jsx("code", {
+			ref,
+			className: cn("min-w-0 flex-1 text-fd-muted-foreground", open ? "wrap-break-word" : "truncate"),
+			children: tag.value
+		})]
 	});
 }
-function SchemaUIPopover({ containerRef, initialPath }) {
-	const [path, setPath] = useState(initialPath);
-	useLayoutEffect(() => {
-		const last = path[0];
-		const element = containerRef.current;
-		if (!element || !last || !element.parentElement) return;
-		element.parentElement.scrollTop = last.scrollTop ?? 0;
-		return () => {
-			if (element.parentElement) last.scrollTop = element.parentElement.scrollTop;
-		};
-	}, [containerRef, path]);
-	const context = useMemo(() => ({ renderTrigger: ({ $ref, pathName, children }) => /* @__PURE__ */ jsx("button", {
-		className: cn(typeVariants({ variant: "trigger" })),
-		onClick: () => setPath((path) => [...path, {
-			name: pathName,
-			$ref
-		}]),
-		children
-	}) }), []);
-	const currentRef = path.findLast((item) => item.$ref !== void 0);
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
-		className: "sticky top-0 -mx-2 flex flex-row flex-wrap items-center text-sm font-medium font-mono bg-fd-popover px-2 h-8 border-b",
-		children: path.map((item, i) => {
-			const className = cn(path.some((other, j) => j < i && other.$ref === item.$ref) && "text-orange-400", item.$ref && "hover:underline hover:text-fd-accent-foreground");
-			const node = item.$ref ? /* @__PURE__ */ jsx("button", {
-				onClick: () => setPath((path) => path.slice(0, i + 1)),
-				className,
-				children: item.name
-			}) : /* @__PURE__ */ jsx("span", {
-				className,
-				children: item.name
-			});
-			return /* @__PURE__ */ jsxs(Fragment, { children: [i > 0 && ".", node] }, i);
-		})
-	}), /* @__PURE__ */ jsx(PopoverContext, {
-		value: context,
-		children: currentRef?.$ref && /* @__PURE__ */ jsx(SchemaUIProperty, {
-			name: "",
-			$type: currentRef.$ref,
-			variant: "expand",
+function SchemaUIPopover() {
+	const states = useStates();
+	const { path, setPath } = states;
+	return /* @__PURE__ */ jsxs(Context, {
+		value: useMemo(() => ({
+			...states,
+			renderTypeInfoTrigger: ({ $ref, pathName, children }) => /* @__PURE__ */ jsx("button", {
+				className: cn(typeVariants({ variant: "trigger" })),
+				onClick: () => setPath([...path, {
+					name: pathName,
+					$ref
+				}]),
+				children
+			})
+		}), [states]),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "sticky top-0 -mx-2 flex flex-row overflow-x-auto overflow-y-hidden items-center text-sm font-medium font-mono bg-fd-popover px-2 h-10 border-b z-20",
+			children: path.map((item, i) => {
+				if (i === 0) return;
+				const isDuplicated = path.some((other, j) => j !== i && other.$ref === item.$ref);
+				let text;
+				const indexItemMatch = /^\[(\w+): (\w+)]$/.exec(item.name);
+				if (indexItemMatch) text = `[${indexItemMatch[1]}]`;
+				else if (i > 1) text = `.${item.name}`;
+				else text = item.name;
+				return /* @__PURE__ */ jsx("button", {
+					onClick: () => setPath(path.slice(0, i + 1)),
+					className: cn("hover:underline hover:text-fd-accent-foreground", isDuplicated && "text-orange-400"),
+					children: text
+				}, i);
+			})
+		}), /* @__PURE__ */ jsx(PathItemBody, {
+			pathIndex: path.length - 1,
 			objectSearchOverrides: {
-				container: { className: "sticky top-10" },
-				open(item) {
-					setPath((path) => [...path, {
-						name: item.name,
-						$ref: item.$type
-					}]);
-				}
+				variant: "ghost",
+				inputContainer: { className: "sticky top-10 -mx-2" }
 			}
-		})
-	})] });
+		})]
+	});
 }
-function useRenderRef() {
-	const { refs } = useData();
-	const { renderTrigger } = usePopover();
-	return function renderRef({ pathName, $ref, text }) {
-		const schema = refs[$ref];
-		if (!isExpandable(schema)) return /* @__PURE__ */ jsx("span", {
-			className: cn(typeVariants()),
-			children: text
-		});
-		if (schema.type === "and" || schema.type === "or") {
-			const sep = schema.type === "and" ? "&" : "|";
-			return /* @__PURE__ */ jsx("span", {
-				className: cn(typeVariants(), "flex flex-row gap-2 items-center flex-wrap"),
-				children: schema.items.map((item, i) => /* @__PURE__ */ jsxs(Fragment, { children: [i > 0 && /* @__PURE__ */ jsx("span", { children: sep }), renderRef({
-					pathName,
-					text: item.name,
-					$ref: item.$type
-				})] }, item.$type))
-			});
-		}
-		if (schema.type === "array") return /* @__PURE__ */ jsxs("span", {
-			className: cn(typeVariants(), "flex flex-row items-center flex-wrap"),
-			children: [
-				"array<",
-				renderRef({
-					pathName: /* @__PURE__ */ jsxs(Fragment$1, { children: [pathName, "[]"] }),
-					text: refs[schema.item.$type].aliasName,
-					$ref: schema.item.$type
-				}),
-				">"
-			]
-		});
-		return renderTrigger({
-			$ref,
-			pathName,
-			children: text
+function TypeInfoTrigger({ pathName, $ref, children }) {
+	const { generated: { refs }, renderTypeInfoTrigger } = useStates();
+	const schema = refs[$ref];
+	if (schema.type === "primitive" && !schema.description && (!schema.infoTags || schema.infoTags.length === 0)) return /* @__PURE__ */ jsx("span", {
+		className: cn(typeVariants()),
+		children
+	});
+	if (schema.type === "and" || schema.type === "or") {
+		const sep = schema.type === "and" ? "&" : "|";
+		return /* @__PURE__ */ jsx("span", {
+			className: cn(typeVariants(), "flex flex-row gap-2 items-center flex-wrap"),
+			children: schema.items.map((item, i) => /* @__PURE__ */ jsxs(Fragment, { children: [i > 0 && /* @__PURE__ */ jsx("span", { children: sep }), /* @__PURE__ */ jsx(TypeInfoTrigger, {
+				pathName,
+				$ref: item.$type,
+				children: item.name
+			})] }, item.$type))
 		});
-	};
-}
-function RootPopoverTrigger({ $ref, pathName, children }) {
-	const ref = useRef(null);
-	const refCallback = useCallback((element) => {
-		ref.current = element;
-		if (!element || element.style.getPropertyValue("--initial-height")) return;
-		element.style.setProperty("--initial-height", `${element.clientHeight + 2}px`);
-	}, []);
-	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
-		className: cn(typeVariants({ variant: "trigger" })),
+	}
+	if (schema.type === "array") return /* @__PURE__ */ jsxs("span", {
+		className: cn(typeVariants(), "flex flex-row items-center flex-wrap"),
+		children: [
+			"array<",
+			/* @__PURE__ */ jsx(TypeInfoTrigger, {
+				pathName: `${pathName}[]`,
+				$ref: schema.item.$type,
+				children: refs[schema.item.$type].aliasName
+			}),
+			">"
+		]
+	});
+	return renderTypeInfoTrigger({
+		$ref,
+		pathName,
 		children
-	}), /* @__PURE__ */ jsx(PopoverContent, {
-		ref: refCallback,
-		onOpenAutoFocus: (e) => {
-			if (!ref.current) return;
-			const input = ref.current.querySelector("input[data-object-search-input]");
-			if (!(input instanceof HTMLInputElement)) return;
-			input.focus({ preventScroll: true });
-			e.preventDefault();
-		},
-		className: "w-[600px] min-h-(--initial-height,0) max-h-[460px] px-2 py-0",
-		children: /* @__PURE__ */ jsx(SchemaUIPopover, {
-			containerRef: ref,
-			initialPath: [{
-				name: pathName,
-				$ref
-			}]
-		})
-	})] });
-}
-function Property({ name, type, required, deprecated, nested = false, className, ...props }) {
-	const t = useTranslations();
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn("text-sm border-t", nested ? "p-3 border-x bg-fd-card last:rounded-b-xl first:rounded-tr-xl last:border-b" : "py-4 first:border-t-0", className),
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex flex-wrap items-center gap-3 not-prose",
-			children: [
-				/* @__PURE__ */ jsxs("span", {
-					className: "font-medium font-mono text-fd-primary",
-					children: [name, required ? /* @__PURE__ */ jsx("span", {
-						className: "text-red-400",
-						children: "*"
-					}) : /* @__PURE__ */ jsx("span", {
-						className: "text-fd-muted-foreground",
-						children: "?"
-					})]
-				}),
-				typeof type === "string" ? /* @__PURE__ */ jsx("span", {
-					className: "text-sm font-mono text-fd-muted-foreground",
-					children: type
-				}) : type,
-				deprecated && /* @__PURE__ */ jsx(Badge, {
-					color: "yellow",
-					className: "ms-auto text-xs",
-					children: t.deprecated
-				})
-			]
-		}), /* @__PURE__ */ jsx("div", {
-			className: "prose-no-margin pt-2.5 empty:hidden",
-			children: props.children
-		})]
 	});
 }
-function isExpandable(data) {
-	if (data.type !== "primitive") return true;
-	return Boolean(data.description || data.infoTags && data.infoTags.length > 0);
+function encodePath(path) {
+	return path.map((item) => [
+		item.name,
+		item.$ref,
+		...item.tabValues ?? []
+	].join("\0").replaceAll("|", "")).join("|");
+}
+function decodePath(path, highlighted) {
+	const out = [];
+	for (const part of path.split("|")) {
+		const [name, $ref, ...tabValues] = part.split("\0");
+		out.push({
+			name,
+			$ref,
+			tabValues
+		});
+	}
+	if (highlighted && out.length > 0) out[out.length - 1].highlighted = highlighted;
+	return out;
 }
 //#endregion
 export { SchemaUI };