@umami/shiso 1.5.0 → 1.7.0

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to `@umami/shiso` are documented here. This project follows
 [Semantic Versioning](https://semver.org/).
 
+## Unreleased
+
+### Added
+
+- Link tabs: a navigation tab may define `href` instead of `groups`/`pages`/
+  `dropdowns` to link to a standalone page or external URL from the top
+  navigation. Internal hrefs route client-side and highlight when active;
+  external URLs open in a new browser tab.
+
 ## 2.0.0 - 2026-08-21
 
 ### Breaking

package/dist/chunks/App.js

@@ -1,9 +1,8 @@
+import { n as highlightTerms } from "./search.js";
 import { resolveSearchProvider } from "../search.js";
 import * as React$1 from "react";
 import { Children, cloneElement, createContext, createElement, forwardRef, isValidElement, useCallback, useContext, useDebugValue, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore, useSyncExternalStore as useSyncExternalStore$1 } from "react";
-import "@fontsource/inter/400.css";
-import "@fontsource/inter/700.css";
-import "@fontsource/inter/800.css";
+import "@fontsource-variable/inter/index.css";
 import "@fontsource/jetbrains-mono/400.css";
 import "highlight.js/styles/github.css";
 import "@umami/shiso/styles.css";
@@ -9533,7 +9532,7 @@ function ScrollArea({ className, children, scrollbars = "vertical", ...props })
 		children: [
 			/* @__PURE__ */ jsx(ScrollAreaViewport, {
 				"data-slot": "scroll-area-viewport",
-				className: "box-border h-full w-full max-w-full rounded-[inherit] overscroll-contain outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1",
+				className: cn("box-border h-full w-full max-w-full rounded-[inherit] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1", scrollbars === "both" ? "overscroll-contain" : hasHorizontalScrollbar ? "overscroll-x-contain" : "overscroll-y-contain"),
 				children: /* @__PURE__ */ jsx(ScrollAreaContent, {
 					"data-slot": "scroll-area-content",
 					className: cn("box-border min-w-0", hasHorizontalScrollbar ? "w-max min-w-full max-w-none" : "w-full max-w-full"),
@@ -10970,7 +10969,7 @@ function AccordionItem({ className, ...props }) {
 }
 function AccordionTrigger({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx(AccordionHeader, {
-		className: "m-0 flex",
+		className: "flex",
 		children: /* @__PURE__ */ jsxs(AccordionTrigger$1, {
 			"data-slot": "accordion-trigger",
 			className: cn("group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground", className),
@@ -11005,11 +11004,11 @@ function AccordionContent({ className, children, ...props }) {
 //#region src/components/docs/styles.ts
 /** Shared Tailwind utility groups for the built-in MDX components. */
 const styles = {
-	accordion: "my-3",
-	accordionGroup: "my-4 overflow-hidden rounded-lg border border-border [&_[data-slot=accordion-item]]:rounded-none [&_[data-slot=accordion-item]]:border-0 [&_[data-slot=accordion-item]+[data-slot=accordion-item]]:border-t [&_[data-slot=accordion-trigger]]:rounded-none",
-	accordionItem: "rounded-lg border border-border bg-transparent",
-	accordionTrigger: "items-center px-4 py-3 text-base font-semibold text-foreground hover:no-underline",
-	accordionContent: "px-4 pb-4 text-base leading-7",
+	accordion: "my-3 [&_h3:has(>[data-slot=accordion-trigger])]:m-0",
+	accordionGroup: "my-4 [&_h3:has(>[data-slot=accordion-trigger])]:m-0",
+	accordionItem: "",
+	accordionTrigger: "text-foreground",
+	accordionContent: "text-muted-foreground [&_p]:mt-0 [&_p:last-child]:mb-0",
 	expandableTrigger: "items-center px-4 py-3 text-sm font-normal text-foreground hover:no-underline",
 	callout: "my-4 flex items-start gap-3 rounded-lg border px-3 py-2.5 text-sm leading-6",
 	calloutIcon: "flex h-6 w-5 shrink-0 items-center justify-center [&_svg]:block [&_svg]:size-4",
@@ -11022,15 +11021,15 @@ const styles = {
 	tip: "border-green-300 bg-green-50 text-green-900 dark:border-green-400/40 dark:bg-green-400/10 dark:text-green-300",
 	check: "border-emerald-300 bg-emerald-50 text-emerald-900 dark:border-emerald-400/40 dark:bg-emerald-400/10 dark:text-emerald-300",
 	danger: "border-destructive/40 bg-destructive/10 text-destructive",
-	card: "block h-full gap-0 rounded-lg border border-border bg-transparent p-4 text-base ring-0 hover:border-input",
-	cardHorizontal: "[&_[data-slot=card-inner]]:items-center [&_[data-slot=card-main]]:flex-row [&_[data-slot=card-main]]:items-center [&_[data-slot=card-main]]:gap-3 [&_[data-slot=card-body]]:m-0",
+	card: "block h-full gap-0 rounded-lg border border-border bg-transparent p-4 text-base ring-0 hover:border-primary",
+	cardHorizontal: "[&_[data-slot=card-inner]]:items-center [&_[data-slot=card-main]]:flex-row [&_[data-slot=card-main]]:items-center [&_[data-slot=card-main]]:gap-3 [&_[data-slot=card-body]]:m-0 [&_[data-slot=card-header]]:flex-row [&_[data-slot=card-header]]:items-center [&_[data-slot=card-header]]:gap-2",
 	cardTyped: "[&_[data-slot=card-title]]:text-inherit [&_[data-slot=card-body]]:text-inherit [&_[data-slot=card-cta]]:text-inherit [&_[data-slot=card-arrow]]:text-inherit",
 	cardImageLayout: "p-0 [&_[data-slot=card-inner]]:p-6",
 	cardImage: "block aspect-video w-full border-border border-b object-cover",
 	cardInner: "flex items-start justify-between gap-3",
 	cardMain: "flex min-w-0 flex-col gap-2",
-	cardHeader: "flex items-center gap-2",
-	cardIcon: "inline-flex shrink-0 items-center justify-center [&_img]:size-4 [&_svg]:size-4",
+	cardHeader: "flex flex-col items-start gap-3",
+	cardIcon: "inline-flex shrink-0 items-center justify-center [&_img]:size-6 [&_svg]:size-6",
 	cardTitle: "text-base font-semibold text-foreground",
 	cardBody: "text-muted-foreground [&>:first-child]:mt-0 [&>:last-child]:mb-0",
 	cardCta: "flex shrink-0 items-center gap-[0.35rem] text-[0.9rem] font-medium text-muted-foreground",
@@ -11494,12 +11493,12 @@ function CardContent({ className, ...props }) {
 //#endregion
 //#region src/components/docs/Card.tsx
 const CARD_TYPE_ICONS = {
-	note: /* @__PURE__ */ jsx(Info$1, { size: 16 }),
-	info: /* @__PURE__ */ jsx(Info$1, { size: 16 }),
-	warning: /* @__PURE__ */ jsx(TriangleAlert, { size: 16 }),
-	tip: /* @__PURE__ */ jsx(Lightbulb, { size: 16 }),
-	check: /* @__PURE__ */ jsx(Check$1, { size: 16 }),
-	danger: /* @__PURE__ */ jsx(CircleAlert, { size: 16 })
+	note: /* @__PURE__ */ jsx(Info$1, { size: 24 }),
+	info: /* @__PURE__ */ jsx(Info$1, { size: 24 }),
+	warning: /* @__PURE__ */ jsx(TriangleAlert, { size: 24 }),
+	tip: /* @__PURE__ */ jsx(Lightbulb, { size: 24 }),
+	check: /* @__PURE__ */ jsx(Check$1, { size: 24 }),
+	danger: /* @__PURE__ */ jsx(CircleAlert, { size: 24 })
 };
 const CARD_TYPE_HOVER = {
 	note: "hover:border-border",
@@ -11510,7 +11509,7 @@ const CARD_TYPE_HOVER = {
 	danger: "hover:border-destructive/40"
 };
 function DocsCardContent({ title, icon, color, img, cta, arrow, type, children }) {
-	const resolvedIcon = resolveIcon(icon, 16) || (type ? CARD_TYPE_ICONS[type] : null);
+	const resolvedIcon = resolveIcon(icon, 24) || (type ? CARD_TYPE_ICONS[type] : null);
 	return /* @__PURE__ */ jsxs(CardContent, {
 		className: "p-0",
 		children: [img ? /* @__PURE__ */ jsx("img", {
@@ -11525,6 +11524,7 @@ function DocsCardContent({ title, icon, color, img, cta, arrow, type, children }
 				"data-slot": "card-main",
 				children: [/* @__PURE__ */ jsxs("div", {
 					className: styles.cardHeader,
+					"data-slot": "card-header",
 					children: [resolvedIcon ? /* @__PURE__ */ jsx("span", {
 						className: `${styles.cardIcon} ${type ? "text-inherit" : "text-primary"}`,
 						style: color ? { color } : void 0,
@@ -12892,18 +12892,18 @@ function PropertiesTable({ children }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: "my-4 overflow-x-auto rounded-lg border border-border px-6 py-2",
 		children: /* @__PURE__ */ jsxs("table", {
-			className: "m-0 min-w-[40rem] table-fixed border-collapse",
+			className: "m-0 min-w-[40rem] table-fixed border-collapse border-0",
 			children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
 				/* @__PURE__ */ jsx("th", {
-					className: "w-1/3 border-x-0 border-t-0 border-b border-border bg-transparent px-0 py-2 pr-6 text-left text-sm font-semibold text-foreground",
+					className: "w-1/5 border-x-0 border-t-0 border-b border-border bg-transparent px-0 py-2 pr-6 text-left text-sm font-semibold text-foreground",
 					children: "Name"
 				}),
 				/* @__PURE__ */ jsx("th", {
-					className: "w-1/3 border-x-0 border-t-0 border-b border-border bg-transparent px-0 py-2 pr-6 text-left text-sm font-semibold text-foreground",
+					className: "w-1/4 border-x-0 border-t-0 border-b border-border bg-transparent px-0 py-2 pr-6 text-left text-sm font-semibold text-foreground",
 					children: "Type"
 				}),
 				/* @__PURE__ */ jsx("th", {
-					className: "w-1/3 border-x-0 border-t-0 border-b border-border bg-transparent px-0 py-2 text-left text-sm font-semibold text-foreground",
+					className: "border-x-0 border-t-0 border-b border-border bg-transparent px-0 py-2 text-left text-sm font-semibold text-foreground",
 					children: "Description"
 				})
 			] }) }), /* @__PURE__ */ jsx("tbody", { children: rows.map((row, index) => {
@@ -22651,7 +22651,9 @@ function normalizeScope(name, source, anchors, resolveDocFile, docsPrefix) {
 			});
 		});
 		if (Array.isArray(tab.pages) && tab.pages.length) nodes.push(...collectPages(tab.pages, context, state));
-		if (state.pages.length === pagesBefore) throw new Error(`Invalid docs config: tab "${tabLabel}" does not contain any supported page entries.`);
+		const isLinkTab = typeof tab.href === "string" && !!tab.href;
+		if (isLinkTab && state.pages.length !== pagesBefore) throw new Error(`Invalid docs config: tab "${tabLabel}" cannot define both "href" and page entries.`);
+		if (!isLinkTab && state.pages.length === pagesBefore) throw new Error(`Invalid docs config: tab "${tabLabel}" does not contain any supported page entries.`);
 		treeByTab.set(tabId, nodes);
 	});
 	const pending = state.pages;
@@ -22724,13 +22726,15 @@ function normalizeScope(name, source, anchors, resolveDocFile, docsPrefix) {
 		tabs: tabs.map((tab, index) => {
 			const tabId = tabIds[index];
 			const firstPage = firstVisiblePageByTab.get(tabId);
+			const href = typeof tab.href === "string" && tab.href ? tab.href : void 0;
 			return {
 				id: tabId,
 				label: tab.tab?.trim() || "",
-				url: firstPage?.url || pageToUrl("index", docsPrefix),
+				url: href || firstPage?.url || pageToUrl("index", docsPrefix),
 				icon: tab.icon,
 				presentation: tab.presentation || "tab",
-				hidden: tab.hidden || void 0
+				hidden: tab.hidden || void 0,
+				link: href ? true : void 0
 			};
 		}),
 		showTabs,
@@ -23032,7 +23036,8 @@ function resolveSiteModel(config, docs, shiso) {
 		light: config.logo.light || config.logo.dark,
 		dark: config.logo.dark || config.logo.light,
 		href: config.logo.href,
-		target: config.logo.href ? resolveLinkTarget(config.logo.href, config.logo.target) : void 0
+		target: config.logo.href ? resolveLinkTarget(config.logo.href, config.logo.target) : void 0,
+		invert: config.logo.invert === true
 	} : null;
 	return {
 		name: config.name?.trim() || void 0,
@@ -26097,6 +26102,11 @@ function renderSnippet(snippet) {
 		children: part
 	}, index) : part);
 }
+function renderWithQueryHighlight(text, query) {
+	const terms = query.trim().split(/\s+/).filter(Boolean);
+	if (!terms.length) return text;
+	return renderSnippet(highlightTerms(text, terms));
+}
 /**
 * Provider-neutral search dialog. The selected provider and its index or
 * client are loaded on demand, so search stays out of the initial bundle.
@@ -26232,7 +26242,7 @@ function Search({ config, labels }) {
 							onSelect: () => select(result),
 							children: [/* @__PURE__ */ jsxs("div", {
 								className: "text-[0.9rem] font-semibold text-foreground",
-								children: [result.page, result.heading ? ` › ${result.heading}` : ""]
+								children: [renderWithQueryHighlight(result.page, query), result.heading ? /* @__PURE__ */ jsxs(Fragment, { children: [" › ", renderWithQueryHighlight(result.heading, query)] }) : null]
 							}), result.snippet && /* @__PURE__ */ jsx("div", {
 								className: "mt-[0.15rem] line-clamp-2 text-[0.8rem] text-muted-foreground",
 								children: renderSnippet(result.snippet)
@@ -26340,6 +26350,13 @@ function TopNav({ docs, label }) {
 					}, item.href))
 				})] }, tab.id);
 			}
+			if (tab.link && isExternalHref(tab.url)) return /* @__PURE__ */ jsxs("a", {
+				href: tab.url,
+				className: tabClass(tab),
+				target: "_blank",
+				rel: "noreferrer",
+				children: [/* @__PURE__ */ jsx(ConfiguredIcon, { icon: tab.icon }), tab.label]
+			}, tab.id);
 			return /* @__PURE__ */ jsxs(Link, {
 				to: tab.url,
 				className: tabClass(tab),
@@ -26422,19 +26439,19 @@ function Header({ site }) {
 	const brandHref = logo?.href || (hasRootStandalonePage ? "/" : docsHomeUrl);
 	const hasBrand = !!name || !!logo?.light || !!logo?.dark;
 	const brandClassName = "inline-flex items-center gap-2 text-xl font-bold text-foreground tracking-[-0.03em]";
-	const brandContent = /* @__PURE__ */ jsxs(Fragment, { children: [
-		logo?.light ? /* @__PURE__ */ jsx("img", {
-			src: logo.light,
-			alt: "",
-			className: "h-6 w-auto dark:hidden"
-		}) : null,
-		logo?.dark ? /* @__PURE__ */ jsx("img", {
-			src: logo.dark,
-			alt: "",
-			className: "hidden h-6 w-auto dark:block"
-		}) : null,
-		name ? /* @__PURE__ */ jsx("span", { children: name }) : null
-	] });
+	const brandContent = /* @__PURE__ */ jsxs(Fragment, { children: [logo?.invert && logo.light ? /* @__PURE__ */ jsx("img", {
+		src: logo.light,
+		alt: "",
+		className: "h-6 w-auto dark:brightness-0 dark:invert"
+	}) : /* @__PURE__ */ jsxs(Fragment, { children: [logo?.light ? /* @__PURE__ */ jsx("img", {
+		src: logo.light,
+		alt: "",
+		className: "h-6 w-auto dark:hidden"
+	}) : null, logo?.dark ? /* @__PURE__ */ jsx("img", {
+		src: logo.dark,
+		alt: "",
+		className: "hidden h-6 w-auto dark:block"
+	}) : null] }), name ? /* @__PURE__ */ jsx("span", { children: name }) : null] });
 	return /* @__PURE__ */ jsx("header", {
 		className: "sticky top-0 z-50 h-[var(--header-height)] shrink-0 border-border border-b bg-[color-mix(in_srgb,var(--background)_92%,transparent)] backdrop-blur-md",
 		children: /* @__PURE__ */ jsxs("div", {
@@ -26828,13 +26845,13 @@ function DocContent({ page, doc, site }) {
 		...pagefindAttrs,
 		children: [
 			eyebrow && /* @__PURE__ */ jsx("div", {
-				className: "text-sm font-bold text-primary",
+				className: "text-sm font-medium text-primary",
 				children: eyebrow
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex items-start justify-between gap-4",
 				children: [title && /* @__PURE__ */ jsx("h1", {
-					className: "mt-2 text-4xl text-foreground leading-[1.2] tracking-[-0.03em] [font-family:var(--font-heading)] [font-weight:var(--font-heading-weight,800)]",
+					className: "mt-2 text-4xl text-foreground leading-[1.2] tracking-[-0.03em] [font-family:var(--font-heading)] [font-weight:var(--font-heading-weight,700)]",
 					children: title
 				}), /* @__PURE__ */ jsx(ContextualMenu, {
 					options: contextualOptions,
@@ -26842,7 +26859,7 @@ function DocContent({ page, doc, site }) {
 				})]
 			}),
 			description && /* @__PURE__ */ jsx("p", {
-				className: "mt-1 mb-6 text-base text-muted-foreground",
+				className: "mt-3 mb-8 text-lg text-muted-foreground leading-relaxed",
 				children: description
 			}),
 			/* @__PURE__ */ jsx("div", {

package/dist/chunks/local.js

@@ -1,66 +1,5 @@
-//#region src/lib/search.ts
-/**
-* Restricts records to the active scope. Records without a scope id (from
-* single-scope indexes or older caches) always pass.
-*/
-function filterRecordsByScope(records, context) {
-	if (!context?.scopeId) return records;
-	return records.filter((record) => !record.scopeId || record.scopeId === context.scopeId);
-}
-const SNIPPET_RADIUS = 60;
-function escapeRegExp(value) {
-	return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-}
-/** Wraps every term occurrence in `<mark>` so the dialog can highlight it. */
-function highlightTerms(snippet, terms) {
-	if (!terms.length) return snippet;
-	const pattern = new RegExp([...terms].sort((a, b) => b.length - a.length).map(escapeRegExp).join("|"), "gi");
-	return snippet.replace(pattern, "<mark>$&</mark>");
-}
-function makeSnippet(text, index, length, terms) {
-	const start = Math.max(0, index - SNIPPET_RADIUS);
-	const end = Math.min(text.length, index + length + SNIPPET_RADIUS);
-	return highlightTerms(`${start > 0 ? "…" : ""}${text.slice(start, end).trim()}${end < text.length ? "…" : ""}`, terms);
-}
-function searchIndex(records, query, limit = 10) {
-	const terms = query.toLowerCase().split(/\s+/).filter(Boolean);
-	if (!terms.length) return [];
-	const results = [];
-	for (const record of records) {
-		const page = record.page.toLowerCase();
-		const heading = (record.heading || "").toLowerCase();
-		const text = record.text.toLowerCase();
-		let score = 0;
-		let snippetAt = -1;
-		let snippetLength = 0;
-		let matched = true;
-		for (const term of terms) if (page.includes(term)) score += page === term ? 40 : 20;
-		else if (heading.includes(term)) score += heading === term ? 30 : 15;
-		else {
-			const index = text.indexOf(term);
-			if (index === -1) {
-				matched = false;
-				break;
-			}
-			score += 5;
-			if (snippetAt === -1) {
-				snippetAt = index;
-				snippetLength = term.length;
-			}
-		}
-		if (!matched || !score) continue;
-		results.push({
-			url: record.id ? `${record.url}#${record.id}` : record.url,
-			page: record.page,
-			heading: record.heading,
-			snippet: snippetAt >= 0 ? makeSnippet(record.text, snippetAt, snippetLength, terms) : void 0,
-			score
-		});
-	}
-	return results.sort((a, b) => b.score - a.score).slice(0, limit);
-}
+import { r as searchIndex, t as filterRecordsByScope } from "./search.js";
 
-//#endregion
 //#region src/lib/search/providers/local.ts
 /** Built-in provider backed by the section index generated during the build. */
 function createLocalSearchProvider(_options = {}) {

package/dist/chunks/search.js

@@ -0,0 +1,64 @@
+//#region src/lib/search.ts
+/**
+* Restricts records to the active scope. Records without a scope id (from
+* single-scope indexes or older caches) always pass.
+*/
+function filterRecordsByScope(records, context) {
+	if (!context?.scopeId) return records;
+	return records.filter((record) => !record.scopeId || record.scopeId === context.scopeId);
+}
+const SNIPPET_RADIUS = 60;
+function escapeRegExp(value) {
+	return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+/** Wraps every term occurrence in `<mark>` so the dialog can highlight it. */
+function highlightTerms(snippet, terms) {
+	if (!terms.length) return snippet;
+	const pattern = new RegExp([...terms].sort((a, b) => b.length - a.length).map(escapeRegExp).join("|"), "gi");
+	return snippet.replace(pattern, "<mark>$&</mark>");
+}
+function makeSnippet(text, index, length, terms) {
+	const start = Math.max(0, index - SNIPPET_RADIUS);
+	const end = Math.min(text.length, index + length + SNIPPET_RADIUS);
+	return highlightTerms(`${start > 0 ? "…" : ""}${text.slice(start, end).trim()}${end < text.length ? "…" : ""}`, terms);
+}
+function searchIndex(records, query, limit = 10) {
+	const terms = query.toLowerCase().split(/\s+/).filter(Boolean);
+	if (!terms.length) return [];
+	const results = [];
+	for (const record of records) {
+		const page = record.page.toLowerCase();
+		const heading = (record.heading || "").toLowerCase();
+		const text = record.text.toLowerCase();
+		let score = 0;
+		let snippetAt = -1;
+		let snippetLength = 0;
+		let matched = true;
+		for (const term of terms) if (page.includes(term)) score += page === term ? 40 : 20;
+		else if (heading.includes(term)) score += heading === term ? 30 : 15;
+		else {
+			const index = text.indexOf(term);
+			if (index === -1) {
+				matched = false;
+				break;
+			}
+			score += 5;
+			if (snippetAt === -1) {
+				snippetAt = index;
+				snippetLength = term.length;
+			}
+		}
+		if (!matched || !score) continue;
+		results.push({
+			url: record.id ? `${record.url}#${record.id}` : record.url,
+			page: record.page,
+			heading: record.heading,
+			snippet: snippetAt >= 0 ? makeSnippet(record.text, snippetAt, snippetLength, terms) : void 0,
+			score
+		});
+	}
+	return results.sort((a, b) => b.score - a.score).slice(0, limit);
+}
+
+//#endregion
+export { highlightTerms as n, searchIndex as r, filterRecordsByScope as t };

package/docs.schema.json

@@ -66,6 +66,10 @@
             "target": {
               "allOf": [{ "$ref": "#/definitions/targetValue" }],
               "description": "Browsing context for the logo link. Defaults from href."
+            },
+            "invert": {
+              "allOf": [{ "$ref": "#/definitions/booleanValue" }],
+              "description": "Render one logo and force it to white in dark mode with a CSS filter, instead of swapping to a dark variant. Best for monochrome logos."
             }
           }
         }
@@ -814,7 +818,8 @@
       "type": "object",
       "allOf": [
         { "anyOf": [{ "required": ["$ref"] }, { "required": ["tab"] }] },
-        { "anyOf": [{ "required": ["$ref"] }, { "required": ["groups"] }, { "required": ["pages"] }, { "required": ["dropdowns"] }] }
+        { "anyOf": [{ "required": ["$ref"] }, { "required": ["groups"] }, { "required": ["pages"] }, { "required": ["dropdowns"] }, { "required": ["href"] }] },
+        { "not": { "anyOf": [{ "required": ["href", "groups"] }, { "required": ["href", "pages"] }, { "required": ["href", "dropdowns"] }] } }
       ],
       "additionalProperties": false,
       "properties": {
@@ -823,6 +828,7 @@
         "groups": { "$ref": "#/definitions/groupList" },
         "pages": { "$ref": "#/definitions/pageItemList" },
         "dropdowns": { "$ref": "#/definitions/dropdownList" },
+        "href": { "allOf": [{ "$ref": "#/definitions/nonEmptyStringValue" }], "description": "Link tab: navigates to this URL (a standalone page or external site) instead of owning docs pages. Cannot be combined with groups, pages, or dropdowns." },
         "icon": { "allOf": [{ "$ref": "#/definitions/stringValue" }], "description": "Icon name shown beside the tab label." },
         "hidden": { "allOf": [{ "$ref": "#/definitions/booleanValue" }], "description": "Hide the tab from the top navigation." }
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umami/shiso",
-  "version": "1.5.0",
+  "version": "1.7.0",
   "description": "Open-source documentation framework for Markdown and MDX sites.",
   "type": "module",
   "bin": {
@@ -64,7 +64,7 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.7.0",
-    "@fontsource/inter": "^5.2.5",
+    "@fontsource-variable/inter": "^5.3.0",
     "@fontsource/jetbrains-mono": "^5.2.5",
     "@mdx-js/react": "^3.1.1",
     "@mdx-js/rollup": "^3.1.1",

package/src/App.tsx

@@ -1,6 +1,4 @@
-import '@fontsource/inter/400.css';
-import '@fontsource/inter/700.css';
-import '@fontsource/inter/800.css';
+import '@fontsource-variable/inter/index.css';
 import '@fontsource/jetbrains-mono/400.css';
 import 'highlight.js/styles/github.css';
 import '@umami/shiso/styles.css';

package/src/components/DocContent.tsx

@@ -101,16 +101,18 @@ export function DocContent({ page, doc, site }: DocContentProps) {
 
   return (
     <article className="min-w-0 grow" {...pagefindAttrs}>
-      {eyebrow && <div className="text-sm font-bold text-primary">{eyebrow}</div>}
+      {eyebrow && <div className="text-sm font-medium text-primary">{eyebrow}</div>}
       <div className="flex items-start justify-between gap-4">
         {title && (
-          <h1 className="mt-2 text-4xl text-foreground leading-[1.2] tracking-[-0.03em] [font-family:var(--font-heading)] [font-weight:var(--font-heading-weight,800)]">
+          <h1 className="mt-2 text-4xl text-foreground leading-[1.2] tracking-[-0.03em] [font-family:var(--font-heading)] [font-weight:var(--font-heading-weight,700)]">
             {title}
           </h1>
         )}
         <ContextualMenu options={contextualOptions} labels={site.labels} />
       </div>
-      {description && <p className="mt-1 mb-6 text-base text-muted-foreground">{description}</p>}
+      {description && (
+        <p className="mt-3 mb-8 text-lg text-muted-foreground leading-relaxed">{description}</p>
+      )}
       <div className="docs-markdown">
         <Content />
       </div>

package/src/components/Header.tsx

@@ -69,8 +69,18 @@ export function Header({ site }: { site: SiteModel }) {
     'inline-flex items-center gap-2 text-xl font-bold text-foreground tracking-[-0.03em]';
   const brandContent = (
     <>
-      {logo?.light ? <img src={logo.light} alt="" className="h-6 w-auto dark:hidden" /> : null}
-      {logo?.dark ? <img src={logo.dark} alt="" className="hidden h-6 w-auto dark:block" /> : null}
+      {/* With `invert`, one logo serves both modes: a CSS filter forces it to
+          white in dark mode instead of swapping to a dark variant. */}
+      {logo?.invert && logo.light ? (
+        <img src={logo.light} alt="" className="h-6 w-auto dark:brightness-0 dark:invert" />
+      ) : (
+        <>
+          {logo?.light ? <img src={logo.light} alt="" className="h-6 w-auto dark:hidden" /> : null}
+          {logo?.dark ? (
+            <img src={logo.dark} alt="" className="hidden h-6 w-auto dark:block" />
+          ) : null}
+        </>
+      )}
       {name ? <span>{name}</span> : null}
     </>
   );

package/src/components/Search.tsx

@@ -11,7 +11,7 @@ import {
   CommandList,
 } from '@/components/ui/command';
 import { Dialog, DialogContent, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
-import type { SearchResult } from '@/lib/search';
+import { highlightTerms, type SearchResult } from '@/lib/search';
 import type { ResolvedSearchConfig } from '@/lib/search/config';
 import { resolveSearchProvider, type SearchProvider } from '@/lib/search/provider';
 import { getScopeByPathname } from '@/lib/site-config';
@@ -44,6 +44,12 @@ function renderSnippet(snippet: string) {
   );
 }
 
+function renderWithQueryHighlight(text: string, query: string) {
+  const terms = query.trim().split(/\s+/).filter(Boolean);
+  if (!terms.length) return text;
+  return renderSnippet(highlightTerms(text, terms));
+}
+
 /**
  * Provider-neutral search dialog. The selected provider and its index or
  * client are loaded on demand, so search stays out of the initial bundle.
@@ -224,8 +230,13 @@ export function Search({ config, labels }: { config: ResolvedSearchConfig; label
                     onSelect={() => select(result)}
                   >
                     <div className="text-[0.9rem] font-semibold text-foreground">
-                      {result.page}
-                      {result.heading ? ` › ${result.heading}` : ''}
+                      {renderWithQueryHighlight(result.page, query)}
+                      {result.heading ? (
+                        <>
+                          {' › '}
+                          {renderWithQueryHighlight(result.heading, query)}
+                        </>
+                      ) : null}
                     </div>
                     {result.snippet && (
                       <div className="mt-[0.15rem] line-clamp-2 text-[0.8rem] text-muted-foreground">

package/src/components/TopNav.tsx

@@ -7,6 +7,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
+import { isExternalHref } from '@/lib/paths';
 import { getStandalonePage } from '@/lib/site-config';
 import type { DocsTab, LinkTarget, NavNode, NormalizedDocsConfig } from '@/lib/types';
 import { cn } from '@/lib/utils';
@@ -112,6 +113,23 @@ export function TopNav({ docs, label }: { docs: NormalizedDocsConfig; label: str
           );
         }
 
+        // Link tabs may point outside the app; render external URLs as plain
+        // anchors so the browser handles them.
+        if (tab.link && isExternalHref(tab.url)) {
+          return (
+            <a
+              key={tab.id}
+              href={tab.url}
+              className={tabClass(tab)}
+              target="_blank"
+              rel="noreferrer"
+            >
+              <ConfiguredIcon icon={tab.icon} />
+              {tab.label}
+            </a>
+          );
+        }
+
         return (
           <Link
             key={tab.id}

package/src/components/docs/Card.tsx

@@ -28,12 +28,12 @@ export interface CardProps {
 export type CardType = 'note' | 'info' | 'warning' | 'tip' | 'check' | 'danger';
 
 const CARD_TYPE_ICONS: Record<CardType, ReactNode> = {
-  note: <InfoIcon size={16} />,
-  info: <InfoIcon size={16} />,
-  warning: <TriangleAlert size={16} />,
-  tip: <Lightbulb size={16} />,
-  check: <CheckIcon size={16} />,
-  danger: <CircleAlert size={16} />,
+  note: <InfoIcon size={24} />,
+  info: <InfoIcon size={24} />,
+  warning: <TriangleAlert size={24} />,
+  tip: <Lightbulb size={24} />,
+  check: <CheckIcon size={24} />,
+  danger: <CircleAlert size={24} />,
 };
 
 const CARD_TYPE_HOVER: Record<CardType, string> = {
@@ -55,14 +55,14 @@ function DocsCardContent({
   type,
   children,
 }: Omit<CardProps, 'href'>) {
-  const resolvedIcon = resolveIcon(icon, 16) || (type ? CARD_TYPE_ICONS[type] : null);
+  const resolvedIcon = resolveIcon(icon, 24) || (type ? CARD_TYPE_ICONS[type] : null);
 
   return (
     <CardContent className="p-0">
       {img ? <img src={img} alt="" className={styles.cardImage} /> : null}
       <div className={styles.cardInner} data-slot="card-inner">
         <div className={styles.cardMain} data-slot="card-main">
-          <div className={styles.cardHeader}>
+          <div className={styles.cardHeader} data-slot="card-header">
             {resolvedIcon ? (
               <span
                 className={`${styles.cardIcon} ${type ? 'text-inherit' : 'text-primary'}`}

package/src/components/docs/PropertiesTable.tsx

@@ -24,16 +24,16 @@ export function PropertiesTable({ children }: PropertiesTableProps) {
 
   return (
     <div className="my-4 overflow-x-auto rounded-lg border border-border px-6 py-2">
-      <table className="m-0 min-w-[40rem] table-fixed border-collapse">
+      <table className="m-0 min-w-[40rem] table-fixed border-collapse border-0">
         <thead>
           <tr>
-            <th className="w-1/3 border-x-0 border-t-0 border-b border-border bg-transparent px-0 py-2 pr-6 text-left text-sm font-semibold text-foreground">
+            <th className="w-1/5 border-x-0 border-t-0 border-b border-border bg-transparent px-0 py-2 pr-6 text-left text-sm font-semibold text-foreground">
               Name
             </th>
-            <th className="w-1/3 border-x-0 border-t-0 border-b border-border bg-transparent px-0 py-2 pr-6 text-left text-sm font-semibold text-foreground">
+            <th className="w-1/4 border-x-0 border-t-0 border-b border-border bg-transparent px-0 py-2 pr-6 text-left text-sm font-semibold text-foreground">
               Type
             </th>
-            <th className="w-1/3 border-x-0 border-t-0 border-b border-border bg-transparent px-0 py-2 text-left text-sm font-semibold text-foreground">
+            <th className="border-x-0 border-t-0 border-b border-border bg-transparent px-0 py-2 text-left text-sm font-semibold text-foreground">
               Description
             </th>
           </tr>

package/src/components/docs/styles.ts

@@ -1,12 +1,14 @@
 /** Shared Tailwind utility groups for the built-in MDX components. */
 export const styles = {
-  accordion: 'my-3',
-  accordionGroup:
-    'my-4 overflow-hidden rounded-lg border border-border [&_[data-slot=accordion-item]]:rounded-none [&_[data-slot=accordion-item]]:border-0 [&_[data-slot=accordion-item]+[data-slot=accordion-item]]:border-t [&_[data-slot=accordion-trigger]]:rounded-none',
-  accordionItem: 'rounded-lg border border-border bg-transparent',
-  accordionTrigger:
-    'items-center px-4 py-3 text-base font-semibold text-foreground hover:no-underline',
-  accordionContent: 'px-4 pb-4 text-base leading-7',
+  /* Accordions keep the native shadcn look: no outer box, hairline separators,
+     small medium-weight triggers with hover underline. Only margins are added.
+     The trigger header is an <h3> and panel text renders as <p>, so the
+     .docs-markdown typography margins must be cancelled for those elements. */
+  accordion: 'my-3 [&_h3:has(>[data-slot=accordion-trigger])]:m-0',
+  accordionGroup: 'my-4 [&_h3:has(>[data-slot=accordion-trigger])]:m-0',
+  accordionItem: '',
+  accordionTrigger: 'text-foreground',
+  accordionContent: 'text-muted-foreground [&_p]:mt-0 [&_p:last-child]:mb-0',
   expandableTrigger:
     'items-center px-4 py-3 text-sm font-normal text-foreground hover:no-underline',
 
@@ -25,17 +27,17 @@ export const styles = {
     'border-emerald-300 bg-emerald-50 text-emerald-900 dark:border-emerald-400/40 dark:bg-emerald-400/10 dark:text-emerald-300',
   danger: 'border-destructive/40 bg-destructive/10 text-destructive',
 
-  card: 'block h-full gap-0 rounded-lg border border-border bg-transparent p-4 text-base ring-0 hover:border-input',
+  card: 'block h-full gap-0 rounded-lg border border-border bg-transparent p-4 text-base ring-0 hover:border-primary',
   cardHorizontal:
-    '[&_[data-slot=card-inner]]:items-center [&_[data-slot=card-main]]:flex-row [&_[data-slot=card-main]]:items-center [&_[data-slot=card-main]]:gap-3 [&_[data-slot=card-body]]:m-0',
+    '[&_[data-slot=card-inner]]:items-center [&_[data-slot=card-main]]:flex-row [&_[data-slot=card-main]]:items-center [&_[data-slot=card-main]]:gap-3 [&_[data-slot=card-body]]:m-0 [&_[data-slot=card-header]]:flex-row [&_[data-slot=card-header]]:items-center [&_[data-slot=card-header]]:gap-2',
   cardTyped:
     '[&_[data-slot=card-title]]:text-inherit [&_[data-slot=card-body]]:text-inherit [&_[data-slot=card-cta]]:text-inherit [&_[data-slot=card-arrow]]:text-inherit',
   cardImageLayout: 'p-0 [&_[data-slot=card-inner]]:p-6',
   cardImage: 'block aspect-video w-full border-border border-b object-cover',
   cardInner: 'flex items-start justify-between gap-3',
   cardMain: 'flex min-w-0 flex-col gap-2',
-  cardHeader: 'flex items-center gap-2',
-  cardIcon: 'inline-flex shrink-0 items-center justify-center [&_img]:size-4 [&_svg]:size-4',
+  cardHeader: 'flex flex-col items-start gap-3',
+  cardIcon: 'inline-flex shrink-0 items-center justify-center [&_img]:size-6 [&_svg]:size-6',
   cardTitle: 'text-base font-semibold text-foreground',
   cardBody: 'text-muted-foreground [&>:first-child]:mt-0 [&>:last-child]:mb-0',
   cardCta:

package/src/components/ui/accordion.tsx

@@ -24,7 +24,7 @@ function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
 
 function AccordionTrigger({ className, children, ...props }: AccordionPrimitive.Trigger.Props) {
   return (
-    <AccordionPrimitive.Header className="m-0 flex">
+    <AccordionPrimitive.Header className="flex">
       <AccordionPrimitive.Trigger
         data-slot="accordion-trigger"
         className={cn(

package/src/components/ui/scroll-area.tsx

@@ -22,7 +22,17 @@ function ScrollArea({ className, children, scrollbars = 'vertical', ...props }:
     >
       <ScrollAreaPrimitive.Viewport
         data-slot="scroll-area-viewport"
-        className="box-border h-full w-full max-w-full rounded-[inherit] overscroll-contain outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
+        className={cn(
+          'box-border h-full w-full max-w-full rounded-[inherit] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1',
+          // Contain overscroll only on the managed axis; containing both axes
+          // would swallow vertical wheel events over horizontal-only scroll
+          // areas (e.g. code blocks) and block page scrolling.
+          scrollbars === 'both'
+            ? 'overscroll-contain'
+            : hasHorizontalScrollbar
+              ? 'overscroll-x-contain'
+              : 'overscroll-y-contain',
+        )}
       >
         <ScrollAreaPrimitive.Content
           data-slot="scroll-area-content"

package/src/lib/docs-config.ts

@@ -665,7 +665,15 @@ function normalizeScope(
       nodes.push(...collectPages(tab.pages, context, state));
     }
 
-    if (state.pages.length === pagesBefore) {
+    const isLinkTab = typeof tab.href === 'string' && !!tab.href;
+
+    if (isLinkTab && state.pages.length !== pagesBefore) {
+      throw new Error(
+        `Invalid docs config: tab "${tabLabel}" cannot define both "href" and page entries.`,
+      );
+    }
+
+    if (!isLinkTab && state.pages.length === pagesBefore) {
       throw new Error(
         `Invalid docs config: tab "${tabLabel}" does not contain any supported page entries.`,
       );
@@ -781,14 +789,16 @@ function normalizeScope(
   const normalizedTabs = tabs.map((tab, index) => {
     const tabId = tabIds[index];
     const firstPage = firstVisiblePageByTab.get(tabId);
+    const href = typeof tab.href === 'string' && tab.href ? tab.href : undefined;
 
     return {
       id: tabId,
       label: tab.tab?.trim() || '',
-      url: firstPage?.url || pageToUrl('index', docsPrefix),
+      url: href || firstPage?.url || pageToUrl('index', docsPrefix),
       icon: tab.icon,
       presentation: tab.presentation || 'tab',
       hidden: tab.hidden || undefined,
+      link: href ? true : undefined,
     };
   });
 

package/src/lib/site-model.ts

@@ -107,6 +107,7 @@ export function resolveSiteModel(
           target: config.logo.href
             ? resolveLinkTarget(config.logo.href, config.logo.target)
             : undefined,
+          invert: config.logo.invert === true,
         }
     : null;
 

package/src/lib/types.ts

@@ -46,6 +46,8 @@ export interface TabItem {
   groups?: GroupItem[];
   pages?: PageItem[];
   dropdowns?: DropdownItem[];
+  /** Link tab: navigates to this URL instead of owning docs pages. */
+  href?: string;
   icon?: string;
   hidden?: boolean;
   /** Internal normalized presentation; not a docs.json field. */
@@ -99,7 +101,15 @@ export interface ThemeColors {
 
 export type LogoOption =
   | string
-  | { light?: string; dark?: string; href?: string; target?: LinkTarget };
+  | {
+      light?: string;
+      dark?: string;
+      href?: string;
+      target?: LinkTarget;
+      /** Force the logo to white in dark mode with a CSS filter instead of
+       * swapping to a dark variant. Best for monochrome logos. */
+      invert?: boolean;
+    };
 
 /** Project-level settings supplied by shiso.config.ts. Mirrors the public
  * shape exported from "@umami/shiso/config". */
@@ -337,6 +347,8 @@ export interface DocsTab {
   icon?: string;
   presentation: 'tab' | 'dropdown';
   hidden?: boolean;
+  /** True for link tabs configured with `href` instead of docs pages. */
+  link?: boolean;
 }
 
 export interface NormalizedDocsPage {
@@ -494,7 +506,13 @@ export interface ThemeLabels {
 
 export interface SiteModel {
   name?: string;
-  logo: { light?: string; dark?: string; href?: string; target?: LinkTarget } | null;
+  logo: {
+    light?: string;
+    dark?: string;
+    href?: string;
+    target?: LinkTarget;
+    invert?: boolean;
+  } | null;
   navbar: NormalizedNavbar | null;
   footer: NormalizedFooter | null;
   banner: BannerConfig | null;

package/src/styles/global.css

@@ -5,6 +5,32 @@
 
 @custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
 
+/* tw-animate-css defines these keyframes against Radix-style height variables
+   (--radix-accordion-content-height etc.). Base UI exposes the panel height as
+   --accordion-panel-height instead, so the originals resolve to `auto` and the
+   open/close animation jumps. Redefining them inside @theme replaces the
+   originals in Tailwind's emitted output (a plain top-level @keyframes rule
+   would lose: Tailwind emits theme keyframes at the end of the stylesheet). */
+@theme inline {
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--accordion-panel-height);
+    }
+  }
+
+  @keyframes accordion-up {
+    from {
+      height: var(--accordion-panel-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+}
+
 @layer base {
   *,
   *::before,
@@ -60,19 +86,26 @@
 /* Markdown content */
 
 @layer components {
+  /* Body copy is muted; headings, bold text, links, and inline code stay at
+     full foreground brightness so they stand out against the running text. */
   .docs-markdown {
     margin-bottom: 2.5rem;
     font-size: 16px;
     line-height: 1.75;
+    color: color-mix(in srgb, var(--foreground) 40%, var(--muted-foreground));
+  }
+
+  [data-theme="dark"] .docs-markdown {
+    color: color-mix(in srgb, var(--foreground) 25%, var(--muted-foreground));
   }
 
   .docs-markdown > * + * {
     margin-top: 1rem;
   }
 
-  .docs-markdown :where(h2, h3, h4, h5, h6) {
+  .docs-markdown :where(h1, h2, h3, h4, h5, h6) {
     font-family: var(--font-heading);
-    font-weight: var(--font-heading-weight, 700);
+    font-weight: var(--font-heading-weight, 600);
     letter-spacing: -0.02em;
     line-height: 1.25;
     color: var(--foreground);
@@ -129,7 +162,13 @@
     margin: 0.35rem 0;
   }
 
+  .docs-markdown :where(strong, b) {
+    color: var(--foreground);
+    font-weight: 600;
+  }
+
   .docs-markdown a {
+    color: var(--foreground);
     text-decoration: underline;
     text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
     text-underline-offset: 0.2em;
@@ -140,6 +179,7 @@
   }
 
   .docs-markdown code:not(pre code) {
+    color: var(--foreground);
     border-radius: var(--radius-sm);
     background: color-mix(in srgb, currentColor 4%, transparent);
     padding: 0.1rem 0.3rem;
@@ -158,6 +198,10 @@
     border-radius: var(--radius-lg);
   }
 
+  .docs-markdown th {
+    color: var(--foreground);
+  }
+
   .docs-markdown th,
   .docs-markdown td {
     border: none;

package/src/styles/tokens.css

@@ -40,7 +40,7 @@
 }
 
 :root {
-  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-sans: "Inter Variable", system-ui, -apple-system, "Segoe UI", sans-serif;
   --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
   --font-heading: var(--font-sans);
   --header-height: 3rem;