@umami/shiso 1.1.12 → 1.3.0

package/dist/chunks/App.js

@@ -3290,11 +3290,11 @@ const createLucideIcon = (iconName, iconNode) => {
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconNode$17 = [["path", {
+const __iconNode$18 = [["path", {
 	d: "M20 6 9 17l-5-5",
 	key: "1gmf2c"
 }]];
-const Check$1 = createLucideIcon("check", __iconNode$17);
+const Check$1 = createLucideIcon("check", __iconNode$18);
 
 //#endregion
 //#region ../../node_modules/.pnpm/lucide-react@1.28.0_react@19.2.8/node_modules/lucide-react/dist/esm/icons/chevron-down.mjs
@@ -3304,11 +3304,11 @@ const Check$1 = createLucideIcon("check", __iconNode$17);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconNode$16 = [["path", {
+const __iconNode$17 = [["path", {
 	d: "m6 9 6 6 6-6",
 	key: "qrunsl"
 }]];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$16);
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$17);
 
 //#endregion
 //#region ../../node_modules/.pnpm/lucide-react@1.28.0_react@19.2.8/node_modules/lucide-react/dist/esm/icons/chevron-right.mjs
@@ -3318,11 +3318,11 @@ const ChevronDown = createLucideIcon("chevron-down", __iconNode$16);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconNode$15 = [["path", {
+const __iconNode$16 = [["path", {
 	d: "m9 18 6-6-6-6",
 	key: "mthhwq"
 }]];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$15);
+const ChevronRight = createLucideIcon("chevron-right", __iconNode$16);
 
 //#endregion
 //#region ../../node_modules/.pnpm/lucide-react@1.28.0_react@19.2.8/node_modules/lucide-react/dist/esm/icons/chevron-up.mjs
@@ -3332,11 +3332,11 @@ const ChevronRight = createLucideIcon("chevron-right", __iconNode$15);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconNode$14 = [["path", {
+const __iconNode$15 = [["path", {
 	d: "m18 15-6-6-6 6",
 	key: "153udz"
 }]];
-const ChevronUp = createLucideIcon("chevron-up", __iconNode$14);
+const ChevronUp = createLucideIcon("chevron-up", __iconNode$15);
 
 //#endregion
 //#region ../../node_modules/.pnpm/lucide-react@1.28.0_react@19.2.8/node_modules/lucide-react/dist/esm/icons/circle-alert.mjs
@@ -3346,7 +3346,7 @@ const ChevronUp = createLucideIcon("chevron-up", __iconNode$14);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconNode$13 = [
+const __iconNode$14 = [
 	["circle", {
 		cx: "12",
 		cy: "12",
@@ -3368,7 +3368,7 @@ const __iconNode$13 = [
 		key: "4dfq90"
 	}]
 ];
-const CircleAlert = createLucideIcon("circle-alert", __iconNode$13);
+const CircleAlert = createLucideIcon("circle-alert", __iconNode$14);
 
 //#endregion
 //#region ../../node_modules/.pnpm/lucide-react@1.28.0_react@19.2.8/node_modules/lucide-react/dist/esm/icons/copy.mjs
@@ -3378,7 +3378,7 @@ const CircleAlert = createLucideIcon("circle-alert", __iconNode$13);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconNode$12 = [["rect", {
+const __iconNode$13 = [["rect", {
 	width: "14",
 	height: "14",
 	x: "8",
@@ -3390,7 +3390,7 @@ const __iconNode$12 = [["rect", {
 	d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2",
 	key: "zix9uf"
 }]];
-const Copy = createLucideIcon("copy", __iconNode$12);
+const Copy = createLucideIcon("copy", __iconNode$13);
 
 //#endregion
 //#region ../../node_modules/.pnpm/lucide-react@1.28.0_react@19.2.8/node_modules/lucide-react/dist/esm/icons/external-link.mjs
@@ -3400,7 +3400,7 @@ const Copy = createLucideIcon("copy", __iconNode$12);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconNode$11 = [
+const __iconNode$12 = [
 	["path", {
 		d: "M15 3h6v6",
 		key: "1q9fwt"
@@ -3414,7 +3414,39 @@ const __iconNode$11 = [
 		key: "a6xqqp"
 	}]
 ];
-const ExternalLink = createLucideIcon("external-link", __iconNode$11);
+const ExternalLink = createLucideIcon("external-link", __iconNode$12);
+
+//#endregion
+//#region ../../node_modules/.pnpm/lucide-react@1.28.0_react@19.2.8/node_modules/lucide-react/dist/esm/icons/file-text.mjs
+/**
+* @license lucide-react v1.28.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const __iconNode$11 = [
+	["path", {
+		d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z",
+		key: "1oefj6"
+	}],
+	["path", {
+		d: "M14 2v5a1 1 0 0 0 1 1h5",
+		key: "wfsgrz"
+	}],
+	["path", {
+		d: "M10 9H8",
+		key: "b1mrlr"
+	}],
+	["path", {
+		d: "M16 13H8",
+		key: "t4e002"
+	}],
+	["path", {
+		d: "M16 17H8",
+		key: "z1uh3a"
+	}]
+];
+const FileText = createLucideIcon("file-text", __iconNode$11);
 
 //#endregion
 //#region ../../node_modules/.pnpm/lucide-react@1.28.0_react@19.2.8/node_modules/lucide-react/dist/esm/icons/globe.mjs
@@ -19706,7 +19738,7 @@ DialogBackdrop.displayName = "DialogBackdrop";
 *
 * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
 */
-const DialogClose$1 = /*#__PURE__*/ React$1.forwardRef(function DialogClose(componentProps, forwardedRef) {
+const DialogClose = /*#__PURE__*/ React$1.forwardRef(function DialogClose(componentProps, forwardedRef) {
 	const { render, className, style, disabled = false, nativeButton = true, ...elementProps } = componentProps;
 	const store = useDialogRootContext();
 	const open = store.useState("open");
@@ -19728,7 +19760,7 @@ const DialogClose$1 = /*#__PURE__*/ React$1.forwardRef(function DialogClose(comp
 		]
 	});
 });
-DialogClose$1.displayName = "DialogClose";
+DialogClose.displayName = "DialogClose";
 
 //#endregion
 //#region ../../node_modules/.pnpm/@base-ui+react@1.7.0_@types_e9c1e83f6bc6140c3efaf3427f2fbf0a/node_modules/@base-ui/react/dialog/portal/DialogPortalContext.mjs
@@ -20463,12 +20495,6 @@ function DialogPortal$1({ ...props }) {
 		...props
 	});
 }
-function DialogClose({ ...props }) {
-	return /* @__PURE__ */ jsx(DialogClose$1, {
-		"data-slot": "dialog-close",
-		...props
-	});
-}
 function DialogOverlay$1({ className, ...props }) {
 	return /* @__PURE__ */ jsx(DialogBackdrop, {
 		"data-slot": "dialog-overlay",
@@ -20481,7 +20507,7 @@ function DialogContent$1({ className, children, showCloseButton = true, overlayC
 		"data-slot": "dialog-content",
 		className: cn("fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
 		...props,
-		children: [children, showCloseButton && /* @__PURE__ */ jsxs(DialogClose$1, {
+		children: [children, showCloseButton && /* @__PURE__ */ jsxs(DialogClose, {
 			"data-slot": "dialog-close",
 			render: /* @__PURE__ */ jsx(Button, {
 				variant: "ghost",
@@ -20514,40 +20540,29 @@ function ZoomableImage({ noZoom = false, className, alt, src, ...props }) {
 	});
 	if (noZoom || !src) return image;
 	const label = alt ? `View “${alt}” full size` : "View image full size";
-	return /* @__PURE__ */ jsxs(Dialog$1, { children: [
-		/* @__PURE__ */ jsx(DialogTrigger, {
-			render: /* @__PURE__ */ jsx("button", {
-				type: "button",
-				"data-slot": "zoomable-image",
-				className: "my-6 block w-fit max-w-full cursor-zoom-in rounded-lg text-left outline-none focus-visible:ring-3 focus-visible:ring-ring/50",
-				"aria-label": label
-			}),
-			children: image
-		}),
-		/* @__PURE__ */ jsxs(DialogContent$1, {
-			showCloseButton: false,
-			overlayClassName: "bg-black/80 supports-backdrop-filter:backdrop-blur-sm",
-			className: "flex max-h-[calc(100vh-2rem)] w-auto max-w-[calc(100vw-2rem)] items-center justify-center bg-transparent p-0 ring-0 shadow-none sm:max-w-[calc(100vw-2rem)]",
-			children: [/* @__PURE__ */ jsx(DialogTitle, {
-				className: "sr-only",
-				children: alt || "Full-size image"
-			}), /* @__PURE__ */ jsx("img", {
-				src,
-				srcSet: props.srcSet,
-				sizes: props.sizes,
-				alt: alt || "",
-				className: "max-h-[calc(100vh-2rem)] max-w-[calc(100vw-2rem)] object-contain"
-			})]
+	return /* @__PURE__ */ jsxs(Dialog$1, { children: [/* @__PURE__ */ jsx(DialogTrigger, {
+		render: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"data-slot": "zoomable-image",
+			className: "my-6 block w-fit max-w-full cursor-zoom-in rounded-lg text-left outline-none focus-visible:ring-3 focus-visible:ring-ring/50",
+			"aria-label": label
 		}),
-		/* @__PURE__ */ jsx(DialogPortal$1, { children: /* @__PURE__ */ jsx(DialogClose, {
-			render: /* @__PURE__ */ jsx("button", {
-				type: "button",
-				className: "fixed top-4 right-4 z-[60] inline-flex size-9 items-center justify-center rounded-full bg-black/60 text-white outline-none backdrop-blur-sm hover:bg-black/80 focus-visible:ring-3 focus-visible:ring-white/60",
-				"aria-label": "Close full-size image"
-			}),
-			children: /* @__PURE__ */ jsx(X$1, { className: "size-5" })
-		}) })
-	] });
+		children: image
+	}), /* @__PURE__ */ jsxs(DialogContent$1, {
+		showCloseButton: false,
+		overlayClassName: "bg-black/80 supports-backdrop-filter:backdrop-blur-sm",
+		className: "flex max-h-[calc(100vh-2rem)] w-auto max-w-[calc(100vw-2rem)] items-center justify-center bg-transparent p-0 ring-0 shadow-none sm:max-w-[calc(100vw-2rem)]",
+		children: [/* @__PURE__ */ jsx(DialogTitle, {
+			className: "sr-only",
+			children: alt || "Full-size image"
+		}), /* @__PURE__ */ jsx("img", {
+			src,
+			srcSet: props.srcSet,
+			sizes: props.sizes,
+			alt: alt || "",
+			className: "max-h-[calc(100vh-2rem)] max-w-[calc(100vw-2rem)] object-contain"
+		})]
+	})] });
 }
 
 //#endregion
@@ -22903,6 +22918,7 @@ const SHISO_THEME_LABELS = {
 	searchUnavailable: "Search unavailable",
 	noResults: "No results",
 	lastUpdated: "Last updated on",
+	relatedTopics: "Related topics",
 	notFound: "Page not found",
 	dismissBanner: "Dismiss banner",
 	toggleTheme: "Toggle theme",
@@ -26167,7 +26183,7 @@ function TopNav({ docs, label }) {
 	const tabs = docs.tabs.filter((tab) => !tab.hidden);
 	if (!tabs.length) return null;
 	const selected = docs.pages.find((item) => item.url === pathname)?.tabId || [...tabs].sort((a, b) => b.url.length - a.url.length).find((tab) => pathname === tab.url || pathname.startsWith(`${tab.url}/`))?.id || tabs[0]?.id;
-	const tabClass = (tab) => clsx("flex h-full items-center gap-1 whitespace-nowrap border-transparent border-b-2 font-medium", {
+	const tabClass = (tab) => cn("flex h-full items-center gap-1 whitespace-nowrap border-transparent border-b-2 font-medium", {
 		"border-b-primary text-foreground": tab.id === selected,
 		"text-muted-foreground hover:text-foreground": tab.id !== selected
 	});
@@ -26609,6 +26625,31 @@ function ContextualMenu({ options, labels }) {
 
 //#endregion
 //#region src/components/DocContent.tsx
+/**
+* Related-topics entries from frontmatter. Bare paths resolve their title from
+* the docs registry; unknown internal paths without an explicit title are
+* skipped so dead links never render.
+*/
+function resolveRelated(entries) {
+	if (!Array.isArray(entries)) return [];
+	const links = [];
+	for (const entry of entries) {
+		const href = typeof entry === "string" ? entry : entry?.href;
+		if (!href || typeof href !== "string") continue;
+		const external = !href.startsWith("/");
+		const title = (typeof entry === "object" ? entry.title : void 0) || (external ? href : getPageByPathname(href)?.label);
+		if (!title) {
+			if (import.meta.env.DEV) console.warn(`[shiso] Related topic "${href}" does not match a page and has no title — skipped.`);
+			continue;
+		}
+		links.push({
+			href,
+			title,
+			external
+		});
+	}
+	return links;
+}
 function DocContent({ page, doc, site }) {
 	const pagerPages = getScopeForPage(docsSite, page).docs.pages.filter((item) => !item.hidden);
 	const pageIndex = pagerPages.findIndex((item) => item.slug === page.slug);
@@ -26620,6 +26661,7 @@ function DocContent({ page, doc, site }) {
 	const lastModified = (typeof doc.frontmatter?.timestamp === "boolean" ? doc.frontmatter.timestamp : site.showTimestamp) ? getLastModified(page.filePath) : void 0;
 	const eyebrow = site.styling.eyebrows === "breadcrumbs" ? [.../* @__PURE__ */ new Set([page.tabLabel, page.section])].filter(Boolean).join(" / ") : page.section;
 	const contextualOptions = resolveContextualOptions(site.contextualOptions, page, site.labels);
+	const related = resolveRelated(doc.frontmatter?.related);
 	const dateFormat = new Intl.DateTimeFormat(resolveLocale(page.language, site.locale), {
 		dateStyle: "medium",
 		timeZone: "UTC"
@@ -26660,6 +26702,33 @@ function DocContent({ page, doc, site }) {
 					})
 				]
 			}),
+			related.length > 0 && /* @__PURE__ */ jsxs("nav", {
+				className: "mt-8",
+				"aria-label": site.labels.relatedTopics,
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "text-sm text-muted-foreground",
+					children: site.labels.relatedTopics
+				}), /* @__PURE__ */ jsx("ul", {
+					className: "mt-3 flex flex-col gap-2 text-sm",
+					children: related.map(({ href, title, external }) => /* @__PURE__ */ jsxs("li", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ jsx(FileText, {
+							size: 14,
+							className: "shrink-0 text-muted-foreground"
+						}), external ? /* @__PURE__ */ jsx("a", {
+							href,
+							target: "_blank",
+							rel: "noreferrer",
+							className: "text-foreground hover:text-primary",
+							children: title
+						}) : /* @__PURE__ */ jsx(Link, {
+							to: href,
+							className: "text-foreground hover:text-primary",
+							children: title
+						})]
+					}, href))
+				})]
+			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "mt-8 flex items-center justify-between",
 				children: [/* @__PURE__ */ jsx(NavigationButton, {
@@ -26773,7 +26842,7 @@ function PageLinks({ items = [], title, navigationLabel }) {
 				const isActive = hash === id;
 				return /* @__PURE__ */ jsx("a", {
 					href: `#${id}`,
-					className: clsx("block border-l px-3 py-1.5", {
+					className: cn("block border-l px-3 py-1.5", {
 						"border-l-primary font-medium text-primary": isActive,
 						"border-border text-muted-foreground hover:text-foreground": !isActive
 					}),
@@ -26828,23 +26897,23 @@ function CollapsibleGroup({ node, pathname, depth, drilldown, expandLabel, colla
 	const chevron = /* @__PURE__ */ jsx(ChevronRight, { className: "size-3.5 shrink-0 origin-center text-muted-foreground transition-[color,transform] duration-150 group-hover/section:text-sidebar-accent-foreground group-aria-expanded/collapsible-trigger:rotate-90" });
 	const isTopLevel = depth === 0;
 	const rootSelected = node.root?.page.url === pathname;
-	const headerClass = isTopLevel ? "flex min-w-0 items-center text-sidebar-foreground" : clsx("flex items-center border-l border-l-sidebar-border text-muted-foreground hover:text-sidebar-accent-foreground", { "pl-6": depth > 1 });
+	const headerClass = isTopLevel ? "flex min-w-0 items-center text-sidebar-foreground" : cn("flex items-center border-l border-l-sidebar-border text-muted-foreground hover:text-sidebar-accent-foreground", { "pl-6": depth > 1 });
 	const fixedHeader = /* @__PURE__ */ jsx("div", {
-		className: clsx(headerClass, {
+		className: cn(headerClass, {
 			[selectedClass]: rootSelected && !isTopLevel,
 			"text-sidebar-primary": rootSelected && isTopLevel
 		}),
 		children: node.root ? /* @__PURE__ */ jsxs(Link, {
 			to: node.root.page.url,
-			className: clsx(isTopLevel ? sectionLabelClass : groupLabelClass, "flex-1"),
+			className: cn(isTopLevel ? sectionLabelClass : groupLabelClass, "flex-1"),
 			children: [resolveIcon(node.icon), node.label]
 		}) : /* @__PURE__ */ jsxs("span", {
-			className: clsx(isTopLevel ? sectionLabelClass : groupLabelClass, "flex-1"),
+			className: cn(isTopLevel ? sectionLabelClass : groupLabelClass, "flex-1"),
 			children: [resolveIcon(node.icon), node.label]
 		})
 	});
 	const header = !collapsible ? fixedHeader : drilldown !== false && node.root ? /* @__PURE__ */ jsxs("div", {
-		className: clsx(headerClass, "group/section flex items-center", {
+		className: cn(headerClass, "group/section flex items-center", {
 			[selectedClass]: rootSelected && !isTopLevel,
 			"text-sidebar-primary": rootSelected && isTopLevel
 		}),
@@ -26866,7 +26935,7 @@ function CollapsibleGroup({ node, pathname, depth, drilldown, expandLabel, colla
 		render: /* @__PURE__ */ jsx(Button, {
 			type: "button",
 			variant: "ghost",
-			className: clsx(headerClass, "group/section group/collapsible-trigger flex h-auto w-full items-center justify-start gap-[0.4rem] whitespace-normal rounded-none px-0 py-0 text-left hover:bg-transparent aria-expanded:bg-transparent dark:hover:bg-transparent", {
+			className: cn(headerClass, "group/section group/collapsible-trigger flex h-auto w-full items-center justify-start gap-[0.4rem] whitespace-normal rounded-none px-0 py-0 text-left hover:bg-transparent aria-expanded:bg-transparent dark:hover:bg-transparent", {
 				"pb-2 font-bold text-sidebar-foreground": isTopLevel,
 				"border-l border-l-sidebar-border px-3 py-2 font-medium text-muted-foreground hover:text-sidebar-accent-foreground": !isTopLevel
 			})
@@ -26917,7 +26986,7 @@ function NavNodes({ nodes, pathname, depth, drilldown, expandLabel, collapseLabe
 				href: node.href,
 				target: node.target,
 				rel: node.target === "_blank" ? "noreferrer" : void 0,
-				className: clsx("flex min-w-0 items-center gap-[0.4rem] border-l border-l-sidebar-border px-3 py-[0.55rem] text-muted-foreground hover:text-sidebar-accent-foreground [overflow-wrap:anywhere]", { "pl-6": depth > 1 }),
+				className: cn("flex min-w-0 items-center gap-[0.4rem] border-l border-l-sidebar-border px-3 py-[0.55rem] text-muted-foreground hover:text-sidebar-accent-foreground [overflow-wrap:anywhere]", { "pl-6": depth > 1 }),
 				children: [
 					resolveIcon(node.icon),
 					node.label,
@@ -26934,7 +27003,7 @@ function NavNodes({ nodes, pathname, depth, drilldown, expandLabel, collapseLabe
 			const isSelected = url === pathname;
 			rendered.push(/* @__PURE__ */ jsxs(Link, {
 				to: url,
-				className: clsx("flex min-w-0 items-center gap-[0.4rem] border-l border-l-sidebar-border px-3 py-[0.55rem] [overflow-wrap:anywhere]", {
+				className: cn("flex min-w-0 items-center gap-[0.4rem] border-l border-l-sidebar-border px-3 py-[0.55rem] [overflow-wrap:anywhere]", {
 					"pl-6": depth > 1,
 					[selectedClass]: isSelected,
 					"text-muted-foreground hover:text-sidebar-accent-foreground": !isSelected
@@ -26966,7 +27035,7 @@ function SideNav({ tabs, navigation, anchors, activeTabId, isSticky, drilldown,
 	const { pathname } = useLocation();
 	const nodes = navigation[activeTabId] || navigation[tabs[0]?.id] || [];
 	return /* @__PURE__ */ jsx(ScrollArea, {
-		className: clsx("w-full max-w-full", { "h-full": isSticky }),
+		className: cn("w-full max-w-full", { "h-full": isSticky }),
 		children: /* @__PURE__ */ jsxs("nav", {
 			className: "flex w-full flex-col gap-6 pr-4 text-sm",
 			"aria-label": navigationLabel,
@@ -27022,7 +27091,7 @@ function SheetContent({ className, children, side = "right", showCloseButton = t
 		"data-side": side,
 		className: cn("fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm", className),
 		...props,
-		children: [children, showCloseButton && /* @__PURE__ */ jsxs(DialogClose$1, {
+		children: [children, showCloseButton && /* @__PURE__ */ jsxs(DialogClose, {
 			"data-slot": "sheet-close",
 			render: /* @__PURE__ */ jsx(Button, {
 				variant: "ghost",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umami/shiso",
-  "version": "1.1.12",
+  "version": "1.3.0",
   "description": "Open-source documentation framework for Markdown and MDX sites.",
   "type": "module",
   "bin": {

package/src/components/DocContent.tsx

@@ -1,12 +1,56 @@
 import { Link } from 'react-router';
 import { ContextualMenu } from '@/components/ContextualMenu';
-import { ChevronRight } from '@/components/icons';
+import { ChevronRight, FileText } from '@/components/icons';
 import { getLastModified } from '@/lib/content';
 import { getScopeForPage } from '@/lib/docs-config';
 import { resolveLocale } from '@/lib/locale';
-import { docsSite } from '@/lib/site-config';
+import { docsSite, getPageByPathname } from '@/lib/site-config';
 import { resolveContextualOptions } from '@/lib/site-model';
-import type { DocModule, NormalizedDocsPage, SiteModel } from '@/lib/types';
+import type { DocModule, NormalizedDocsPage, RelatedEntry, SiteModel } from '@/lib/types';
+
+interface RelatedLink {
+  href: string;
+  title: string;
+  external: boolean;
+}
+
+/**
+ * Related-topics entries from frontmatter. Bare paths resolve their title from
+ * the docs registry; unknown internal paths without an explicit title are
+ * skipped so dead links never render.
+ */
+function resolveRelated(entries: unknown): RelatedLink[] {
+  if (!Array.isArray(entries)) {
+    return [];
+  }
+
+  const links: RelatedLink[] = [];
+
+  for (const entry of entries as RelatedEntry[]) {
+    const href = typeof entry === 'string' ? entry : entry?.href;
+
+    if (!href || typeof href !== 'string') {
+      continue;
+    }
+
+    const external = !href.startsWith('/');
+    const explicitTitle = typeof entry === 'object' ? entry.title : undefined;
+    const title = explicitTitle || (external ? href : getPageByPathname(href)?.label);
+
+    if (!title) {
+      if (import.meta.env.DEV) {
+        console.warn(
+          `[shiso] Related topic "${href}" does not match a page and has no title — skipped.`,
+        );
+      }
+      continue;
+    }
+
+    links.push({ href, title, external });
+  }
+
+  return links;
+}
 
 export interface DocContentProps {
   page: NormalizedDocsPage;
@@ -34,6 +78,7 @@ export function DocContent({ page, doc, site }: DocContentProps) {
       ? [...new Set([page.tabLabel, page.section])].filter(Boolean).join(' / ')
       : page.section;
   const contextualOptions = resolveContextualOptions(site.contextualOptions, page, site.labels);
+  const related = resolveRelated(doc.frontmatter?.related);
   // Dates follow the page's language when it is a valid locale code.
   const dateFormat = new Intl.DateTimeFormat(resolveLocale(page.language, site.locale), {
     dateStyle: 'medium',
@@ -61,6 +106,32 @@ export function DocContent({ page, doc, site }: DocContentProps) {
           <time dateTime={lastModified}>{dateFormat.format(new Date(lastModified))}</time>
         </div>
       )}
+      {related.length > 0 && (
+        <nav className="mt-8" aria-label={site.labels.relatedTopics}>
+          <div className="text-sm text-muted-foreground">{site.labels.relatedTopics}</div>
+          <ul className="mt-3 flex flex-col gap-2 text-sm">
+            {related.map(({ href, title, external }) => (
+              <li key={href} className="flex items-center gap-2">
+                <FileText size={14} className="shrink-0 text-muted-foreground" />
+                {external ? (
+                  <a
+                    href={href}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="text-foreground hover:text-primary"
+                  >
+                    {title}
+                  </a>
+                ) : (
+                  <Link to={href} className="text-foreground hover:text-primary">
+                    {title}
+                  </Link>
+                )}
+              </li>
+            ))}
+          </ul>
+        </nav>
+      )}
       <div className="mt-8 flex items-center justify-between">
         <NavigationButton {...prev} isPrev />
         <NavigationButton {...next} />

package/src/components/PageLinks.tsx

@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import { cn } from '@/lib/utils';
 import { useEffect, useState } from 'react';
 import type { TocEntry } from '@/lib/types';
 
@@ -55,7 +55,7 @@ export function PageLinks({ items = [], title, navigationLabel }: PageLinksProps
             <a
               key={id}
               href={`#${id}`}
-              className={classNames('block border-l px-3 py-1.5', {
+              className={cn('block border-l px-3 py-1.5', {
                 'border-l-primary font-medium text-primary': isActive,
                 'border-border text-muted-foreground hover:text-foreground': !isActive,
               })}

package/src/components/SideNav.tsx

@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import { cn } from '@/lib/utils';
 import { type ReactNode, useEffect, useState } from 'react';
 import { Link, useLocation, useNavigate } from 'react-router';
 import { resolveIcon } from '@/components/docs/utils';
@@ -96,14 +96,14 @@ function CollapsibleGroup({
   const rootSelected = node.root?.page.url === pathname;
   const headerClass = isTopLevel
     ? 'flex min-w-0 items-center text-sidebar-foreground'
-    : classNames(
+    : cn(
         'flex items-center border-l border-l-sidebar-border text-muted-foreground hover:text-sidebar-accent-foreground',
         { 'pl-6': depth > 1 },
       );
 
   const fixedHeader = (
     <div
-      className={classNames(headerClass, {
+      className={cn(headerClass, {
         [selectedClass]: rootSelected && !isTopLevel,
         'text-sidebar-primary': rootSelected && isTopLevel,
       })}
@@ -111,13 +111,13 @@ function CollapsibleGroup({
       {node.root ? (
         <Link
           to={node.root.page.url}
-          className={classNames(isTopLevel ? sectionLabelClass : groupLabelClass, 'flex-1')}
+          className={cn(isTopLevel ? sectionLabelClass : groupLabelClass, 'flex-1')}
         >
           {resolveIcon(node.icon)}
           {node.label}
         </Link>
       ) : (
-        <span className={classNames(isTopLevel ? sectionLabelClass : groupLabelClass, 'flex-1')}>
+        <span className={cn(isTopLevel ? sectionLabelClass : groupLabelClass, 'flex-1')}>
           {resolveIcon(node.icon)}
           {node.label}
         </span>
@@ -130,7 +130,7 @@ function CollapsibleGroup({
     fixedHeader
   ) : drilldown !== false && node.root ? (
     <div
-      className={classNames(headerClass, 'group/section flex items-center', {
+      className={cn(headerClass, 'group/section flex items-center', {
         [selectedClass]: rootSelected && !isTopLevel,
         'text-sidebar-primary': rootSelected && isTopLevel,
       })}
@@ -159,7 +159,7 @@ function CollapsibleGroup({
         <Button
           type="button"
           variant="ghost"
-          className={classNames(
+          className={cn(
             headerClass,
             'group/section group/collapsible-trigger flex h-auto w-full items-center justify-start gap-[0.4rem] whitespace-normal rounded-none px-0 py-0 text-left hover:bg-transparent aria-expanded:bg-transparent dark:hover:bg-transparent',
             {
@@ -243,7 +243,7 @@ function NavNodes({
           href={node.href}
           target={node.target}
           rel={node.target === '_blank' ? 'noreferrer' : undefined}
-          className={classNames(
+          className={cn(
             'flex min-w-0 items-center gap-[0.4rem] border-l border-l-sidebar-border px-3 py-[0.55rem] text-muted-foreground hover:text-sidebar-accent-foreground [overflow-wrap:anywhere]',
             { 'pl-6': depth > 1 },
           )}
@@ -264,7 +264,7 @@ function NavNodes({
         <Link
           key={url}
           to={url}
-          className={classNames(
+          className={cn(
             'flex min-w-0 items-center gap-[0.4rem] border-l border-l-sidebar-border px-3 py-[0.55rem] [overflow-wrap:anywhere]',
             {
               'pl-6': depth > 1,
@@ -319,7 +319,7 @@ export function SideNav({
   const nodes = navigation[activeTabId] || navigation[tabs[0]?.id] || [];
 
   return (
-    <ScrollArea className={classNames('w-full max-w-full', { 'h-full': isSticky })}>
+    <ScrollArea className={cn('w-full max-w-full', { 'h-full': isSticky })}>
       <nav className="flex w-full flex-col gap-6 pr-4 text-sm" aria-label={navigationLabel}>
         {anchors.length ? (
           <NavNodes

package/src/components/TopNav.tsx

@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import { cn } from '@/lib/utils';
 import { Link, useLocation, useNavigate } from 'react-router';
 import { ConfiguredIcon } from '@/components/ConfiguredIcon';
 import { ChevronRight } from '@/components/icons';
@@ -62,7 +62,7 @@ export function TopNav({ docs, label }: { docs: NormalizedDocsConfig; label: str
       .find(tab => pathname === tab.url || pathname.startsWith(`${tab.url}/`))?.id ||
     tabs[0]?.id;
   const tabClass = (tab: DocsTab) =>
-    classNames(
+    cn(
       'flex h-full items-center gap-1 whitespace-nowrap border-transparent border-b-2 font-medium',
       {
         'border-b-primary text-foreground': tab.id === selected,

package/src/components/docs/ZoomableImage.tsx

@@ -1,13 +1,5 @@
-import { XIcon } from 'lucide-react';
 import type { ImgHTMLAttributes } from 'react';
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
+import { Dialog, DialogContent, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
 import { cn } from '@/lib/utils';
 
 export interface ZoomableImageProps extends ImgHTMLAttributes<HTMLImageElement> {
@@ -64,19 +56,6 @@ export function ZoomableImage({
           className="max-h-[calc(100vh-2rem)] max-w-[calc(100vw-2rem)] object-contain"
         />
       </DialogContent>
-      <DialogPortal>
-        <DialogClose
-          render={
-            <button
-              type="button"
-              className="fixed top-4 right-4 z-[60] inline-flex size-9 items-center justify-center rounded-full bg-black/60 text-white outline-none backdrop-blur-sm hover:bg-black/80 focus-visible:ring-3 focus-visible:ring-white/60"
-              aria-label="Close full-size image"
-            />
-          }
-        >
-          <XIcon className="size-5" />
-        </DialogClose>
-      </DialogPortal>
     </Dialog>
   );
 }

package/src/components/icons/index.ts

@@ -5,6 +5,7 @@ export {
   CircleAlert,
   Copy,
   ExternalLink,
+  FileText,
   Hand,
   Info as InfoIcon,
   Lightbulb,

package/src/lib/site-model.ts

@@ -27,6 +27,7 @@ const SHISO_THEME_LABELS: ThemeLabels = {
   searchUnavailable: 'Search unavailable',
   noResults: 'No results',
   lastUpdated: 'Last updated on',
+  relatedTopics: 'Related topics',
   notFound: 'Page not found',
   dismissBanner: 'Dismiss banner',
   toggleTheme: 'Toggle theme',

package/src/lib/types.ts

@@ -444,6 +444,7 @@ export interface ThemeLabels {
   searchUnavailable: string;
   noResults: string;
   lastUpdated: string;
+  relatedTopics: string;
   notFound: string;
   dismissBanner: string;
   toggleTheme: string;
@@ -499,12 +500,17 @@ export interface TocEntry {
   size: number;
 }
 
+/** A related-topics entry: a page path, or a link with an explicit title. */
+export type RelatedEntry = string | { href: string; title?: string };
+
 export interface DocFrontmatter {
   title?: string;
   description?: string;
   noindex?: boolean;
   /** Overrides the site-wide `metadata.timestamp` setting for this page. */
   timestamp?: boolean;
+  /** Related pages rendered above the prev/next pager. */
+  related?: RelatedEntry[];
   [key: string]: unknown;
 }
 

package/src/styles/global.css

@@ -146,24 +146,46 @@
     font-size: 0.875rem;
   }
 
+  /* Styled to match the PropertiesTable component: rounded outer border,
+     horizontal row separators only, and no header fill. */
   .docs-markdown table {
     width: 100%;
-    border-collapse: collapse;
     margin: 1rem 0;
+    font-size: 0.875rem;
+    border-collapse: separate;
+    border-spacing: 0;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
   }
 
   .docs-markdown th,
   .docs-markdown td {
-    border: 1px solid var(--border);
-    padding: 0.5rem 0.75rem;
+    border: none;
+    border-bottom: 1px solid var(--border);
+    padding: 0.6rem 0.75rem;
     text-align: left;
+    vertical-align: top;
+  }
+
+  .docs-markdown th:first-child,
+  .docs-markdown td:first-child {
+    padding-left: 1.5rem;
+  }
+
+  .docs-markdown th:last-child,
+  .docs-markdown td:last-child {
+    padding-right: 1.5rem;
   }
 
   .docs-markdown th {
-    background: var(--card);
+    background: transparent;
     font-weight: 600;
   }
 
+  .docs-markdown tbody tr:last-child td {
+    border-bottom: none;
+  }
+
   .docs-markdown table code:not(pre code) {
     font-size: 0.75rem;
   }

package/vite.config.ts

@@ -1,3 +1,4 @@
+import { readFile } from 'node:fs/promises';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import tailwindcss from '@tailwindcss/vite';
@@ -281,6 +282,75 @@ function shisoHtml(getDocsConfig: () => DocsConfig): Plugin {
   };
 }
 
+/**
+ * Serves the raw markdown source for `<route>.md` URLs during development,
+ * mirroring the `.md` copies the prerenderer publishes next to every page in
+ * production builds. The contextual menu's copy/view options and AI links
+ * depend on these URLs.
+ */
+function shisoMarkdownDev(getDocsConfig: () => DocsConfig, root: string): Plugin {
+  return {
+    name: 'shiso-markdown-dev',
+    apply: 'serve',
+    configureServer(server) {
+      server.middlewares.use(async (req, res, next) => {
+        const url = (req.url || '').split('?')[0];
+
+        if ((req.method !== 'GET' && req.method !== 'HEAD') || !url.endsWith('.md')) {
+          return next();
+        }
+
+        const shiso =
+          (getDocsConfig() as { $shiso?: { docsPrefix?: string; contentDir?: string } }).$shiso ||
+          {};
+        const contentDir = (shiso.contentDir ?? 'content/docs').replace(/^\/+|\/+$/g, '');
+        const prefixValue = (shiso.docsPrefix ?? '/docs').trim().replace(/\/+$/, '');
+        const docsPrefix =
+          !prefixValue || prefixValue === '/'
+            ? ''
+            : prefixValue.startsWith('/')
+              ? prefixValue
+              : `/${prefixValue}`;
+
+        let route = decodeURIComponent(url).slice(0, -'.md'.length);
+        const base = server.config.base.replace(/\/+$/, '');
+
+        if (base && route.startsWith(base)) {
+          route = route.slice(base.length);
+        }
+
+        if (docsPrefix && route.startsWith(docsPrefix)) {
+          route = route.slice(docsPrefix.length);
+        }
+
+        const slug = route.replace(/^\/+/, '') || 'index';
+        const contentRoot = path.resolve(root, contentDir);
+        const candidates = [`${slug}.mdx`, `${slug}.md`, `${slug}/index.mdx`, `${slug}/index.md`];
+
+        for (const candidate of candidates) {
+          const filePath = path.resolve(contentRoot, candidate);
+
+          // Never read outside the content directory.
+          if (!filePath.startsWith(contentRoot + path.sep)) {
+            break;
+          }
+
+          try {
+            const source = await readFile(filePath, 'utf8');
+            res.setHeader('Content-Type', 'text/markdown; charset=utf-8');
+            res.end(source);
+            return;
+          } catch {
+            // Try the next candidate.
+          }
+        }
+
+        next();
+      });
+    },
+  };
+}
+
 const MDX_REACT_ENTRY = fileURLToPath(import.meta.resolve('@mdx-js/react'));
 const LUCIDE_REACT_ENTRY = path.join(
   path.dirname(fileURLToPath(import.meta.resolve('lucide-react/package.json'))),
@@ -319,6 +389,7 @@ export default defineConfig(async () => {
         path.join(generatedRoot, 'search-index.generated.ts'),
       ),
       shisoHtml(getDocsConfig),
+      shisoMarkdownDev(getDocsConfig, projectRoot),
       shisoMdx(),
       react({ include: /\.(mdx|md|tsx|ts|jsx|js)$/ }),
     ],