@umami/shiso 1.9.0 → 1.11.0

package/dist/chunks/App.js

@@ -14,6 +14,40 @@ import shiso from "virtual:shiso-config";
 import rawConfig from "virtual:shiso-docs-config";
 import { LAST_MODIFIED } from "@/generated/last-modified";
 
+//#region ../../node_modules/.pnpm/lucide-react@1.28.0_react@19.2.8/node_modules/lucide-react/dist/esm/icons/arrow-left.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$10 = [["path", {
+	d: "m12 19-7-7 7-7",
+	key: "1l729n"
+}], ["path", {
+	d: "M19 12H5",
+	key: "x3x0zl"
+}]];
+const ArrowLeft = createLucideIcon("arrow-left", __iconNode$10);
+
+//#endregion
+//#region ../../node_modules/.pnpm/lucide-react@1.28.0_react@19.2.8/node_modules/lucide-react/dist/esm/icons/arrow-right.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$9 = [["path", {
+	d: "M5 12h14",
+	key: "1ays0h"
+}], ["path", {
+	d: "m12 5 7 7-7 7",
+	key: "xquz4c"
+}]];
+const ArrowRight = createLucideIcon("arrow-right", __iconNode$9);
+
+//#endregion
 //#region ../../node_modules/.pnpm/lucide-react@1.28.0_react@19.2.8/node_modules/lucide-react/dist/esm/icons/copy.mjs
 /**
 * @license lucide-react v1.28.0 - ISC
@@ -1159,7 +1193,7 @@ function CodeBlock({ children, className }) {
 	};
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "code-block",
-		className: "relative my-5 overflow-hidden rounded-lg bg-muted/50",
+		className: "relative my-5 overflow-hidden rounded-lg bg-card",
 		children: [/* @__PURE__ */ jsx(ScrollArea, {
 			scrollbars: "horizontal",
 			className: "w-full",
@@ -4026,11 +4060,24 @@ const DEFAULT_SEARCH_PROMPT = "Search...";
 const DEFAULT_SEARCH_PROVIDER = "local";
 const DEFAULT_SEARCH_SHORTCUT = "k";
 const DEFAULT_SEARCH_SHORTCUT_LABEL = "Ctrl K";
+const DEFAULT_SEARCH_POSITION = "header";
+/** Positions the built-in theme knows how to render. */
+const SEARCH_POSITIONS = ["header", "sidebar"];
+/**
+* Themes must always support "header", so anything unrecognized (or not
+* implemented by the active theme) lands there instead of vanishing.
+*/
+function resolveSearchPosition(position, supported = SEARCH_POSITIONS) {
+	if (typeof position === "string" && supported.includes(position)) return position;
+	if (position !== void 0 && position !== "header") console.warn(`[shiso] Unsupported search.position "${String(position)}" — using "${DEFAULT_SEARCH_POSITION}".`);
+	return DEFAULT_SEARCH_POSITION;
+}
 /** Normalizes docs.json search settings for both the UI and provider loader. */
 function resolveSearchConfig(config) {
 	if (config === false) return {
 		enabled: false,
 		prompt: DEFAULT_SEARCH_PROMPT,
+		position: DEFAULT_SEARCH_POSITION,
 		provider: DEFAULT_SEARCH_PROVIDER,
 		options: {},
 		shortcut: false,
@@ -4039,6 +4086,7 @@ function resolveSearchConfig(config) {
 	return {
 		enabled: true,
 		prompt: config?.prompt?.trim() || "Search...",
+		position: resolveSearchPosition(config?.position),
 		provider: config?.provider?.trim().toLowerCase() || "local",
 		options: config?.options || {},
 		shortcut: config?.shortcut === false ? false : config?.shortcut?.trim().toLowerCase() || "k",
@@ -4060,6 +4108,8 @@ const SHISO_THEME_LABELS = {
 	noResults: "No results",
 	lastUpdated: "Last updated on",
 	relatedTopics: "Related topics",
+	previousPage: "Previous",
+	nextPage: "Next",
 	notFound: "Page not found",
 	dismissBanner: "Dismiss banner",
 	toggleTheme: "Toggle theme",
@@ -7205,7 +7255,7 @@ function renderWithQueryHighlight(text, query) {
 * Provider-neutral search dialog. The selected provider and its index or
 * client are loaded on demand, so search stays out of the initial bundle.
 */
-function Search({ config, labels }) {
+function Search({ config, labels, className }) {
 	const navigate = useNavigate();
 	const { pathname } = useLocation();
 	const [open, setOpen] = useState(false);
@@ -7294,12 +7344,12 @@ function Search({ config, labels }) {
 		children: [/* @__PURE__ */ jsxs(DialogTrigger, {
 			render: /* @__PURE__ */ jsx(Button, {
 				variant: "outline",
-				className: "h-auto gap-2 rounded-md bg-card px-2.5 py-1.5 text-muted-foreground hover:border-input hover:bg-card hover:text-foreground"
+				className: cn("h-auto gap-2 rounded-md bg-card px-2.5 py-1.5 text-muted-foreground hover:border-input hover:bg-card hover:text-foreground", className)
 			}),
 			children: [
 				/* @__PURE__ */ jsx(Search$1, { className: "size-3.5" }),
 				/* @__PURE__ */ jsx("span", {
-					className: "min-w-24 text-left",
+					className: "min-w-24 grow text-left",
 					children: config.prompt
 				}),
 				config.shortcut ? /* @__PURE__ */ jsx("kbd", {
@@ -7348,6 +7398,21 @@ function Search({ config, labels }) {
 		})]
 	});
 }
+/**
+* Renders the search control only when `search.position` targets this slot.
+* Layout components drop one of these into each position they support; the
+* per-page `search: false` frontmatter flag is honored here as well.
+*/
+function SearchSlot({ site, position, className }) {
+	const { pathname } = useLocation();
+	if (!site.search.enabled || site.search.position !== position) return null;
+	if (getPageFrontmatter(pathname)?.search === false) return null;
+	return /* @__PURE__ */ jsx(Search, {
+		config: site.search,
+		labels: site.labels,
+		className
+	});
+}
 
 //#endregion
 //#region src/components/ThemeToggle.tsx
@@ -7527,10 +7592,9 @@ function NavbarLinkItem({ link, primary = false }) {
 	});
 }
 function Header({ site }) {
-	const { logo, navbar, name, appearance, labels, search } = site;
+	const { logo, navbar, name, appearance, labels } = site;
 	const { pathname } = useLocation();
 	const docs = getScopeByPathname(pathname).docs;
-	const showSearch = getPageFrontmatter(pathname)?.search !== false;
 	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]";
@@ -7579,10 +7643,15 @@ function Header({ site }) {
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex min-w-0 items-center gap-2 justify-self-end",
 					children: [
-						showSearch ? /* @__PURE__ */ jsx(Search, {
-							config: search,
-							labels
-						}) : null,
+						/* @__PURE__ */ jsx(SearchSlot, {
+							site,
+							position: "header"
+						}),
+						/* @__PURE__ */ jsx(SearchSlot, {
+							site,
+							position: "sidebar",
+							className: "lg:hidden"
+						}),
 						navbar?.links.map((link) => /* @__PURE__ */ jsx(NavbarLinkItem, { link }, link.href)),
 						!appearance.strict && /* @__PURE__ */ jsx(ThemeToggle, { label: labels.toggleTheme }),
 						navbar?.primary ? /* @__PURE__ */ jsx(NavbarLinkItem, {
@@ -8001,30 +8070,44 @@ function DocContent({ page, doc, site }) {
 				})]
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "mt-8 flex items-center justify-between",
+				className: "mt-8 flex items-end justify-between",
 				"data-pagefind-ignore": true,
 				children: [/* @__PURE__ */ jsx(NavigationButton, {
 					...prev,
+					eyebrow: site.labels.previousPage,
 					isPrev: true
-				}), /* @__PURE__ */ jsx(NavigationButton, { ...next })]
+				}), /* @__PURE__ */ jsx(NavigationButton, {
+					...next,
+					eyebrow: site.labels.nextPage
+				})]
 			})
 		]
 	});
 }
-const NavigationButton = ({ label, url, isPrev }) => {
-	if (!url || !label) return /* @__PURE__ */ jsx("div", {});
+const NavigationButton = ({ label, url, eyebrow, isPrev }) => {
+	if (!url || !label) return /* @__PURE__ */ jsx("div", { className: "flex-1" });
 	return /* @__PURE__ */ jsxs(Link, {
 		to: url,
-		className: "group my-3 inline-flex items-center gap-3 text-base font-bold text-foreground",
+		className: cn("group flex flex-1 items-end gap-3 py-3 text-base text-foreground", { "justify-end text-right": !isPrev }),
+		rel: isPrev ? "prev" : "next",
 		children: [
-			isPrev && /* @__PURE__ */ jsx(ChevronRight, {
+			isPrev && /* @__PURE__ */ jsx(ArrowLeft, {
 				size: 14,
-				className: "rotate-180 text-muted-foreground transition-colors group-hover:text-foreground"
+				className: "mb-[0.3rem] text-muted-foreground transition-colors group-hover:text-foreground"
 			}),
-			label,
-			!isPrev && /* @__PURE__ */ jsx(ChevronRight, {
+			/* @__PURE__ */ jsxs("span", {
+				className: "flex flex-col",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-xs font-bold text-muted-foreground",
+					children: eyebrow
+				}), /* @__PURE__ */ jsx("span", {
+					className: "font-medium transition-colors group-hover:text-primary",
+					children: label
+				})]
+			}),
+			!isPrev && /* @__PURE__ */ jsx(ArrowRight, {
 				size: 14,
-				className: "text-muted-foreground transition-colors group-hover:text-foreground"
+				className: "mb-[0.3rem] text-muted-foreground transition-colors group-hover:text-foreground"
 			})
 		]
 	});
@@ -8307,7 +8390,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: cn("w-full max-w-full", { "h-full": isSticky }),
+		className: cn("w-full max-w-full", { "min-h-0 grow": isSticky }),
 		children: /* @__PURE__ */ jsxs("nav", {
 			className: "flex w-full flex-col gap-6 pr-4 text-sm",
 			"aria-label": navigationLabel,
@@ -8462,9 +8545,13 @@ function Docs({ page, doc, site }) {
 			})]
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "flex items-start gap-12 lg:min-h-[calc(100dvh-var(--header-height))] lg:pt-6",
-			children: [/* @__PURE__ */ jsx("div", {
-				className: "hidden min-w-0 max-w-60 basis-60 self-start lg:sticky lg:top-[calc(var(--header-height)+1.5rem)] lg:block lg:h-[calc(100dvh-var(--header-height)-3rem)] lg:shrink-0",
-				children: /* @__PURE__ */ jsx(SideNav, {
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "hidden min-w-0 max-w-60 basis-60 flex-col gap-4 self-start lg:sticky lg:top-[calc(var(--header-height)+1.5rem)] lg:flex lg:h-[calc(100dvh-var(--header-height)-3rem)] lg:shrink-0",
+				children: [/* @__PURE__ */ jsx(SearchSlot, {
+					site,
+					position: "sidebar",
+					className: "w-full"
+				}), /* @__PURE__ */ jsx(SideNav, {
 					tabs,
 					navigation,
 					anchors: scopeDocs.anchors,
@@ -8474,7 +8561,7 @@ function Docs({ page, doc, site }) {
 					navigationLabel: site.labels.documentationNavigation,
 					expandLabel: site.labels.expand,
 					collapseLabel: site.labels.collapse
-				})
+				})]
 			}), /* @__PURE__ */ jsxs("div", {
 				className: "flex min-w-0 grow self-stretch flex-col",
 				children: [/* @__PURE__ */ jsxs("div", {

package/dist/chunks/docs.js

@@ -9832,7 +9832,8 @@ const styles = {
 	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",
+	expandableTrigger: "items-center py-3 text-sm font-normal text-foreground hover:no-underline",
+	expandableContent: "pl-6",
 	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",
 	calloutBody: "flex min-w-0 flex-1 flex-col gap-[0.35rem] [&>:first-child]:mt-0 [&>:last-child]:mb-0 [&_:where(p,ul,ol)]:my-[0.35rem] [&>:where(p,ul,ol):first-child]:mt-0 [&>:where(p,ul,ol):last-child]:mb-0",
@@ -9844,7 +9845,8 @@ 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-primary",
+	card: "block h-full gap-0 rounded-lg border border-border p-4 text-sm ring-0 hover:border-primary",
+	cardPlain: "bg-card",
 	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",
@@ -9853,7 +9855,7 @@ const styles = {
 	cardMain: "flex min-w-0 flex-col gap-2",
 	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",
+	cardTitle: "text-sm 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",
 	cardArrow: "shrink-0 text-muted-foreground",
@@ -10377,7 +10379,7 @@ function DocsCardContent({ title, icon, color, img, cta, arrow, type, children }
 function Card({ title, href, icon, color, img, cta, horizontal, arrow, type, children }) {
 	const external = typeof href === "string" && /^https?:\/\//i.test(href);
 	const showArrow = arrow ?? external;
-	const className = `${styles.card} ${type ? `${styles.cardTyped} ${styles[type]} ${CARD_TYPE_HOVER[type]}` : ""} ${horizontal ? styles.cardHorizontal : ""} ${img ? styles.cardImageLayout : ""}`;
+	const className = `${styles.card} ${type ? `${styles.cardTyped} ${styles[type]} ${CARD_TYPE_HOVER[type]}` : styles.cardPlain} ${horizontal ? styles.cardHorizontal : ""} ${img ? styles.cardImageLayout : ""}`;
 	const content = /* @__PURE__ */ jsx(Card$1, {
 		className,
 		children: /* @__PURE__ */ jsx(DocsCardContent, {
@@ -11304,7 +11306,7 @@ function CodeGroup({ children }) {
 	return /* @__PURE__ */ jsxs(Tabs$1, {
 		value: selected,
 		onValueChange: setSelectedKey,
-		className: "my-4 gap-0 overflow-hidden rounded-lg bg-muted/50 [&_[data-slot=code-block]]:my-0 [&_[data-slot=code-block]]:rounded-none [&_[data-slot=code-block]]:border-0 [&_[data-slot=code-block]]:bg-transparent",
+		className: "my-4 gap-0 overflow-hidden rounded-lg bg-card [&_[data-slot=code-block]]:my-0 [&_[data-slot=code-block]]:rounded-none [&_[data-slot=code-block]]:border-0 [&_[data-slot=code-block]]:bg-transparent",
 		children: [/* @__PURE__ */ jsx(TabsList, {
 			variant: "line",
 			className: "h-9 w-full justify-start gap-5 overflow-x-auto overflow-y-hidden rounded-none px-3 py-0 shadow-[inset_0_-1px_0_var(--border)] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
@@ -11541,7 +11543,7 @@ function Expandable({ title, children, defaultOpen = false }) {
 				className: `${styles.expandableTrigger} group/collapsible-trigger flex w-full justify-start gap-2 text-left outline-none focus-visible:ring-3 focus-visible:ring-ring/50`,
 				children: [/* @__PURE__ */ jsx(ChevronRight, { className: "size-4 shrink-0 text-muted-foreground transition-transform group-aria-expanded/collapsible-trigger:rotate-90" }), title]
 			}), /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", {
-				className: styles.accordionContent,
+				className: `${styles.accordionContent} ${styles.expandableContent}`,
 				children
 			}) })]
 		})
@@ -11725,53 +11727,43 @@ function PropertiesTable({ children }) {
 	const rows = toElementArray(children);
 	if (!rows.length) return null;
 	return /* @__PURE__ */ jsx("div", {
-		className: "my-4 overflow-x-auto rounded-lg border border-border px-6 py-2",
+		className: "my-4 overflow-x-auto",
 		children: /* @__PURE__ */ jsxs("table", {
-			className: "m-0 min-w-[40rem] table-fixed border-collapse border-0",
+			className: "m-0 min-w-[40rem] table-fixed",
 			children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
 				/* @__PURE__ */ jsx("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",
+					className: "w-1/5",
 					children: "Name"
 				}),
 				/* @__PURE__ */ jsx("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",
+					className: "w-1/4",
 					children: "Type"
 				}),
-				/* @__PURE__ */ jsx("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",
-					children: "Description"
-				})
-			] }) }), /* @__PURE__ */ jsx("tbody", { children: rows.map((row, index) => {
+				/* @__PURE__ */ jsx("th", { children: "Description" })
+			] }) }), /* @__PURE__ */ jsx("tbody", { children: rows.map((row) => {
 				const { name, type, required, deprecated, children: description } = row.props;
 				const defaultValue = displayValue(row.props.default);
-				const borderClass = index === rows.length - 1 ? "border-b-0" : "border-b";
 				return /* @__PURE__ */ jsxs("tr", { children: [
-					/* @__PURE__ */ jsx("td", {
-						className: `${borderClass} border-x-0 border-t-0 border-border px-0 py-2 pr-6 align-top text-sm text-foreground`,
-						children: /* @__PURE__ */ jsxs("span", {
-							className: "inline-flex flex-wrap items-center gap-2",
-							children: [
-								name,
-								required ? /* @__PURE__ */ jsx(Badge, {
-									size: "xs",
-									tone: "primary",
-									children: "required"
-								}) : null,
-								deprecated ? /* @__PURE__ */ jsx(Badge, {
-									size: "xs",
-									children: "deprecated"
-								}) : null
-							]
-						})
-					}),
-					/* @__PURE__ */ jsx("td", {
-						className: `${borderClass} border-x-0 border-t-0 border-border px-0 py-2 pr-6 align-top text-sm text-foreground`,
-						children: displayValue(type)
-					}),
+					/* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsxs("span", {
+						className: "inline-flex flex-wrap items-center gap-2",
+						children: [
+							name,
+							required ? /* @__PURE__ */ jsx(Badge, {
+								size: "xs",
+								tone: "primary",
+								children: "required"
+							}) : null,
+							deprecated ? /* @__PURE__ */ jsx(Badge, {
+								size: "xs",
+								children: "deprecated"
+							}) : null
+						]
+					}) }),
+					/* @__PURE__ */ jsx("td", { children: displayValue(type) }),
 					/* @__PURE__ */ jsxs("td", {
-						className: `${borderClass} border-x-0 border-t-0 border-border px-0 py-2 align-top text-sm leading-6 text-foreground [&_p]:m-0`,
+						className: "[&_p]:m-0",
 						children: [description, defaultValue ? /* @__PURE__ */ jsxs("span", {
-							className: "mt-1 block text-sm text-muted-foreground",
+							className: "mt-1 block text-muted-foreground",
 							children: ["Default: ", defaultValue]
 						}) : null]
 					})

package/docs.schema.json

@@ -279,6 +279,14 @@
               "allOf": [{ "$ref": "#/definitions/stringValue" }],
               "description": "Placeholder text for the search input."
             },
+            "position": {
+              "anyOf": [
+                { "type": "string", "enum": ["header", "sidebar"] },
+                { "$ref": "#/definitions/configRefValue" }
+              ],
+              "default": "header",
+              "description": "Where the search control renders: \"header\" (right side of the header) or \"sidebar\" (top of the navigation column; stays in the header on small screens). Themes that do not support a position fall back to \"header\"."
+            },
             "provider": {
               "allOf": [{ "$ref": "#/definitions/nonEmptyStringValue" }],
               "description": "Search provider id: \"local\" (default), \"pagefind\", or a provider registered at runtime."

package/package.json

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

package/src/components/CodeBlock.tsx

@@ -22,7 +22,7 @@ export function CodeBlock({ children, className }: CodeBlockProps) {
   };
 
   return (
-    <div data-slot="code-block" className="relative my-5 overflow-hidden rounded-lg bg-muted/50">
+    <div data-slot="code-block" className="relative my-5 overflow-hidden rounded-lg bg-card">
       <ScrollArea scrollbars="horizontal" className="w-full">
         <pre
           ref={textInput}

package/src/components/DocContent.tsx

@@ -1,12 +1,13 @@
 import { Link } from 'react-router';
 import { ContextualMenu } from '@/components/ContextualMenu';
-import { ChevronRight, FileText } from '@/components/icons';
+import { ArrowLeft, ArrowRight, FileText } from '@/components/icons';
 import { getLastModified } from '@/lib/content';
 import { getScopeForPage } from '@/lib/docs-config';
 import { resolveLocale } from '@/lib/locale';
 import { docsSite, getPageByPathname } from '@/lib/site-config';
 import { resolveContextualOptions } from '@/lib/site-model';
 import type { DocModule, NormalizedDocsPage, RelatedEntry, SiteModel } from '@/lib/types';
+import { cn } from '@/lib/utils';
 
 interface RelatedLink {
   href: string;
@@ -148,9 +149,9 @@ export function DocContent({ page, doc, site }: DocContentProps) {
           </ul>
         </nav>
       )}
-      <div className="mt-8 flex items-center justify-between" data-pagefind-ignore>
-        <NavigationButton {...prev} isPrev />
-        <NavigationButton {...next} />
+      <div className="mt-8 flex items-end justify-between" data-pagefind-ignore>
+        <NavigationButton {...prev} eyebrow={site.labels.previousPage} isPrev />
+        <NavigationButton {...next} eyebrow={site.labels.nextPage} />
       </div>
     </article>
   );
@@ -159,32 +160,44 @@ export function DocContent({ page, doc, site }: DocContentProps) {
 const NavigationButton = ({
   label,
   url,
+  eyebrow,
   isPrev,
 }: {
   label?: string;
   url?: string;
+  /** Direction caption ("Previous" / "Next") shown above the page title. */
+  eyebrow: string;
   isPrev?: boolean;
 }) => {
   if (!url || !label) {
-    return <div />;
+    return <div className="flex-1" />;
   }
 
   return (
     <Link
       to={url}
-      className="group my-3 inline-flex items-center gap-3 text-base font-bold text-foreground"
+      // The link stretches across its half of the row so the whole box is
+      // clickable, not just the text. Vertical margin became padding for the
+      // same reason.
+      className={cn('group flex flex-1 items-end gap-3 py-3 text-base text-foreground', {
+        'justify-end text-right': !isPrev,
+      })}
+      rel={isPrev ? 'prev' : 'next'}
     >
       {isPrev && (
-        <ChevronRight
+        <ArrowLeft
           size={14}
-          className="rotate-180 text-muted-foreground transition-colors group-hover:text-foreground"
+          className="mb-[0.3rem] text-muted-foreground transition-colors group-hover:text-foreground"
         />
       )}
-      {label}
+      <span className="flex flex-col">
+        <span className="text-xs font-bold text-muted-foreground">{eyebrow}</span>
+        <span className="font-medium transition-colors group-hover:text-primary">{label}</span>
+      </span>
       {!isPrev && (
-        <ChevronRight
+        <ArrowRight
           size={14}
-          className="text-muted-foreground transition-colors group-hover:text-foreground"
+          className="mb-[0.3rem] text-muted-foreground transition-colors group-hover:text-foreground"
         />
       )}
     </Link>

package/src/components/Docs.tsx

@@ -5,6 +5,7 @@ import { Footer } from '@/components/Footer';
 import { Menu } from '@/components/icons';
 import { LanguageSwitcher } from '@/components/LanguageSwitcher';
 import { PageLinks } from '@/components/PageLinks';
+import { SearchSlot } from '@/components/Search';
 import { SideNav } from '@/components/SideNav';
 import { Button } from '@/components/ui/button';
 import { Sheet, SheetContent, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
@@ -104,7 +105,8 @@ export function Docs({ page, doc, site }: DocsProps) {
         </SheetContent>
       </Sheet>
       <div className="flex items-start gap-12 lg:min-h-[calc(100dvh-var(--header-height))] lg:pt-6">
-        <div className="hidden min-w-0 max-w-60 basis-60 self-start lg:sticky lg:top-[calc(var(--header-height)+1.5rem)] lg:block lg:h-[calc(100dvh-var(--header-height)-3rem)] lg:shrink-0">
+        <div className="hidden min-w-0 max-w-60 basis-60 flex-col gap-4 self-start lg:sticky lg:top-[calc(var(--header-height)+1.5rem)] lg:flex lg:h-[calc(100dvh-var(--header-height)-3rem)] lg:shrink-0">
+          <SearchSlot site={site} position="sidebar" className="w-full" />
           <SideNav
             tabs={tabs}
             navigation={navigation}

package/src/components/Header.tsx

@@ -1,17 +1,12 @@
 import { Link, useLocation } from 'react-router';
 import { ConfiguredIcon } from '@/components/ConfiguredIcon';
 import { LanguageSwitcher } from '@/components/LanguageSwitcher';
-import { Search } from '@/components/Search';
+import { SearchSlot } from '@/components/Search';
 import { ThemeToggle } from '@/components/ThemeToggle';
 import { TopNav } from '@/components/TopNav';
 import { VersionSwitcher } from '@/components/VersionSwitcher';
 import { isExternalHref } from '@/lib/paths';
-import {
-  docsHomeUrl,
-  getPageFrontmatter,
-  getScopeByPathname,
-  hasRootStandalonePage,
-} from '@/lib/site-config';
+import { docsHomeUrl, getScopeByPathname, hasRootStandalonePage } from '@/lib/site-config';
 import type { NormalizedLink, SiteModel } from '@/lib/types';
 
 /**
@@ -63,11 +58,10 @@ function NavbarLinkItem({ link, primary = false }: { link: NormalizedLink; prima
 }
 
 export function Header({ site }: { site: SiteModel }) {
-  const { logo, navbar, name, appearance, labels, search } = site;
+  const { logo, navbar, name, appearance, labels } = site;
   const { pathname } = useLocation();
   // The header renders the navigation of whichever scope owns the current page.
   const docs = getScopeByPathname(pathname).docs;
-  const showSearch = getPageFrontmatter(pathname)?.search !== false;
   // The brand links to the standalone home page when one owns "/".
   const brandHref = logo?.href || (hasRootStandalonePage ? '/' : docsHomeUrl);
   const hasBrand = !!name || !!logo?.light || !!logo?.dark;
@@ -120,7 +114,10 @@ export function Header({ site }: { site: SiteModel }) {
           {docs.showTabs ? <TopNav docs={docs} label={labels.sections} /> : null}
         </div>
         <div className="flex min-w-0 items-center gap-2 justify-self-end">
-          {showSearch ? <Search config={search} labels={labels} /> : null}
+          <SearchSlot site={site} position="header" />
+          {/* The sidebar collapses into a sheet on small screens, so its
+              search control moves up here until the column is visible. */}
+          <SearchSlot site={site} position="sidebar" className="lg:hidden" />
           {navbar?.links.map(link => (
             <NavbarLinkItem key={link.href} link={link} />
           ))}

package/src/components/Search.tsx

@@ -14,8 +14,9 @@ import { Dialog, DialogContent, DialogTitle, DialogTrigger } from '@/components/
 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';
-import type { ThemeLabels } from '@/lib/types';
+import { getPageFrontmatter, getScopeByPathname } from '@/lib/site-config';
+import type { SearchPosition, SiteModel, ThemeLabels } from '@/lib/types';
+import { cn } from '@/lib/utils';
 
 /** Enough results to make the list scroll; the dialog caps its own height. */
 const RESULT_LIMIT = 30;
@@ -54,7 +55,16 @@ function renderWithQueryHighlight(text: string, query: string) {
  * Provider-neutral search dialog. The selected provider and its index or
  * client are loaded on demand, so search stays out of the initial bundle.
  */
-export function Search({ config, labels }: { config: ResolvedSearchConfig; labels: ThemeLabels }) {
+export function Search({
+  config,
+  labels,
+  className,
+}: {
+  config: ResolvedSearchConfig;
+  labels: ThemeLabels;
+  /** Extra classes for the trigger button (e.g. to stretch it in a column). */
+  className?: string;
+}) {
   const navigate = useNavigate();
   const { pathname } = useLocation();
   const [open, setOpen] = useState(false);
@@ -179,12 +189,15 @@ export function Search({ config, labels }: { config: ResolvedSearchConfig; label
         render={
           <Button
             variant="outline"
-            className="h-auto gap-2 rounded-md bg-card px-2.5 py-1.5 text-muted-foreground hover:border-input hover:bg-card hover:text-foreground"
+            className={cn(
+              'h-auto gap-2 rounded-md bg-card px-2.5 py-1.5 text-muted-foreground hover:border-input hover:bg-card hover:text-foreground',
+              className,
+            )}
           />
         }
       >
         <SearchIcon className="size-3.5" />
-        <span className="min-w-24 text-left">{config.prompt}</span>
+        <span className="min-w-24 grow text-left">{config.prompt}</span>
         {config.shortcut ? (
           <kbd className="rounded-sm border border-border bg-muted px-[0.3rem] py-[0.05rem] text-[0.7rem] font-sans">
             {config.shortcutLabel}
@@ -253,3 +266,30 @@ export function Search({ config, labels }: { config: ResolvedSearchConfig; label
     </Dialog>
   );
 }
+
+/**
+ * Renders the search control only when `search.position` targets this slot.
+ * Layout components drop one of these into each position they support; the
+ * per-page `search: false` frontmatter flag is honored here as well.
+ */
+export function SearchSlot({
+  site,
+  position,
+  className,
+}: {
+  site: SiteModel;
+  position: SearchPosition;
+  className?: string;
+}) {
+  const { pathname } = useLocation();
+
+  if (!site.search.enabled || site.search.position !== position) {
+    return null;
+  }
+
+  if (getPageFrontmatter(pathname)?.search === false) {
+    return null;
+  }
+
+  return <Search config={site.search} labels={site.labels} className={className} />;
+}

package/src/components/SideNav.tsx

@@ -1,4 +1,3 @@
-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';
@@ -9,9 +8,9 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/component
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { flattenNav, isNodeHidden } from '@/lib/docs-config';
 import type { DocsTab, NavGroupNode, NavNode } from '@/lib/types';
+import { cn } from '@/lib/utils';
 
-const sectionLabelClass =
-  'flex min-w-0 items-center gap-[0.4rem] pb-2 pr-1 font-bold text-inherit';
+const sectionLabelClass = 'flex min-w-0 items-center gap-[0.4rem] pb-2 pr-1 font-bold text-inherit';
 const groupLabelClass =
   'flex min-w-0 items-center gap-[0.4rem] py-2 pl-3 pr-1 font-medium text-inherit';
 const selectedClass =
@@ -319,7 +318,7 @@ export function SideNav({
   const nodes = navigation[activeTabId] || navigation[tabs[0]?.id] || [];
 
   return (
-    <ScrollArea className={cn('w-full max-w-full', { 'h-full': isSticky })}>
+    <ScrollArea className={cn('w-full max-w-full', { 'min-h-0 grow': isSticky })}>
       <nav className="flex w-full flex-col gap-6 pr-4 text-sm" aria-label={navigationLabel}>
         {anchors.length ? (
           <NavNodes

package/src/components/docs/Card.tsx

@@ -110,7 +110,7 @@ export function Card({
 }: CardProps) {
   const external = typeof href === 'string' && /^https?:\/\//i.test(href);
   const showArrow = arrow ?? external;
-  const className = `${styles.card} ${type ? `${styles.cardTyped} ${styles[type]} ${CARD_TYPE_HOVER[type]}` : ''} ${horizontal ? styles.cardHorizontal : ''} ${img ? styles.cardImageLayout : ''}`;
+  const className = `${styles.card} ${type ? `${styles.cardTyped} ${styles[type]} ${CARD_TYPE_HOVER[type]}` : styles.cardPlain} ${horizontal ? styles.cardHorizontal : ''} ${img ? styles.cardImageLayout : ''}`;
   const content = (
     <CardPrimitive className={className}>
       <DocsCardContent

package/src/components/docs/CodeGroup.tsx

@@ -46,7 +46,7 @@ export function CodeGroup({ children }: CodeGroupProps) {
     <TabsPrimitive
       value={selected}
       onValueChange={setSelectedKey}
-      className="my-4 gap-0 overflow-hidden rounded-lg bg-muted/50 [&_[data-slot=code-block]]:my-0 [&_[data-slot=code-block]]:rounded-none [&_[data-slot=code-block]]:border-0 [&_[data-slot=code-block]]:bg-transparent"
+      className="my-4 gap-0 overflow-hidden rounded-lg bg-card [&_[data-slot=code-block]]:my-0 [&_[data-slot=code-block]]:rounded-none [&_[data-slot=code-block]]:border-0 [&_[data-slot=code-block]]:bg-transparent"
     >
       <TabsList
         variant="line"

package/src/components/docs/Expandable.tsx

@@ -20,7 +20,7 @@ export function Expandable({ title, children, defaultOpen = false }: ExpandableP
           {title}
         </CollapsibleTrigger>
         <CollapsibleContent>
-          <div className={styles.accordionContent}>{children}</div>
+          <div className={`${styles.accordionContent} ${styles.expandableContent}`}>{children}</div>
         </CollapsibleContent>
       </div>
     </Collapsible>

package/src/components/docs/PropertiesTable.tsx

@@ -22,33 +22,26 @@ export function PropertiesTable({ children }: PropertiesTableProps) {
     return null;
   }
 
+  // Rendered as a plain table so the .docs-markdown table rules in global.css
+  // style it exactly like a GFM table; only column widths are set here.
   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 border-0">
+    <div className="my-4 overflow-x-auto">
+      <table className="m-0 min-w-[40rem] table-fixed">
         <thead>
           <tr>
-            <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/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="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>
+            <th className="w-1/5">Name</th>
+            <th className="w-1/4">Type</th>
+            <th>Description</th>
           </tr>
         </thead>
         <tbody>
-          {rows.map((row, index) => {
+          {rows.map(row => {
             const { name, type, required, deprecated, children: description } = row.props;
             const defaultValue = displayValue(row.props.default);
-            const borderClass = index === rows.length - 1 ? 'border-b-0' : 'border-b';
 
             return (
               <tr key={row.key ?? name}>
-                <td
-                  className={`${borderClass} border-x-0 border-t-0 border-border px-0 py-2 pr-6 align-top text-sm text-foreground`}
-                >
+                <td>
                   <span className="inline-flex flex-wrap items-center gap-2">
                     {name}
                     {required ? (
@@ -59,17 +52,11 @@ export function PropertiesTable({ children }: PropertiesTableProps) {
                     {deprecated ? <Badge size="xs">deprecated</Badge> : null}
                   </span>
                 </td>
-                <td
-                  className={`${borderClass} border-x-0 border-t-0 border-border px-0 py-2 pr-6 align-top text-sm text-foreground`}
-                >
-                  {displayValue(type)}
-                </td>
-                <td
-                  className={`${borderClass} border-x-0 border-t-0 border-border px-0 py-2 align-top text-sm leading-6 text-foreground [&_p]:m-0`}
-                >
+                <td>{displayValue(type)}</td>
+                <td className="[&_p]:m-0">
                   {description}
                   {defaultValue ? (
-                    <span className="mt-1 block text-sm text-muted-foreground">
+                    <span className="mt-1 block text-muted-foreground">
                       Default: {defaultValue}
                     </span>
                   ) : null}

package/src/components/docs/styles.ts

@@ -9,8 +9,9 @@ export const styles = {
   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',
+  expandableTrigger: 'items-center py-3 text-sm font-normal text-foreground hover:no-underline',
+  /* Indent by chevron width + gap so body text lines up with the title. */
+  expandableContent: 'pl-6',
 
   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',
@@ -27,7 +28,9 @@ 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-primary',
+  card: 'block h-full gap-0 rounded-lg border border-border p-4 text-sm ring-0 hover:border-primary',
+  /* Typed cards bring their own tinted background; plain cards get the surface tint. */
+  cardPlain: 'bg-card',
   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:
@@ -38,7 +41,7 @@ export const styles = {
   cardMain: 'flex min-w-0 flex-col gap-2',
   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',
+  cardTitle: 'text-sm 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',

package/src/components/icons/index.ts

@@ -1,4 +1,6 @@
 export {
+  ArrowLeft,
+  ArrowRight,
   Check,
   Check as CheckIcon,
   ChevronRight,

package/src/lib/search/config.ts

@@ -1,13 +1,39 @@
-import type { SearchConfig } from '@/lib/types';
+import type { SearchConfig, SearchPosition } from '@/lib/types';
 
 export const DEFAULT_SEARCH_PROMPT = 'Search...';
 export const DEFAULT_SEARCH_PROVIDER = 'local';
 export const DEFAULT_SEARCH_SHORTCUT = 'k';
 export const DEFAULT_SEARCH_SHORTCUT_LABEL = 'Ctrl K';
+export const DEFAULT_SEARCH_POSITION: SearchPosition = 'header';
+
+/** Positions the built-in theme knows how to render. */
+export const SEARCH_POSITIONS: readonly SearchPosition[] = ['header', 'sidebar'];
+
+/**
+ * Themes must always support "header", so anything unrecognized (or not
+ * implemented by the active theme) lands there instead of vanishing.
+ */
+export function resolveSearchPosition(
+  position: unknown,
+  supported: readonly SearchPosition[] = SEARCH_POSITIONS,
+): SearchPosition {
+  if (typeof position === 'string' && (supported as readonly string[]).includes(position)) {
+    return position as SearchPosition;
+  }
+
+  if (position !== undefined && position !== DEFAULT_SEARCH_POSITION) {
+    console.warn(
+      `[shiso] Unsupported search.position "${String(position)}" — using "${DEFAULT_SEARCH_POSITION}".`,
+    );
+  }
+
+  return DEFAULT_SEARCH_POSITION;
+}
 
 export interface ResolvedSearchConfig {
   enabled: boolean;
   prompt: string;
+  position: SearchPosition;
   provider: string;
   options: Record<string, unknown>;
   shortcut: string | false;
@@ -22,6 +48,7 @@ export function resolveSearchConfig(
     return {
       enabled: false,
       prompt: DEFAULT_SEARCH_PROMPT,
+      position: DEFAULT_SEARCH_POSITION,
       provider: DEFAULT_SEARCH_PROVIDER,
       options: {},
       shortcut: false,
@@ -32,6 +59,7 @@ export function resolveSearchConfig(
   return {
     enabled: true,
     prompt: config?.prompt?.trim() || DEFAULT_SEARCH_PROMPT,
+    position: resolveSearchPosition(config?.position),
     provider: config?.provider?.trim().toLowerCase() || DEFAULT_SEARCH_PROVIDER,
     options: config?.options || {},
     shortcut:

package/src/lib/site-model.ts

@@ -29,6 +29,8 @@ const SHISO_THEME_LABELS: ThemeLabels = {
   noResults: 'No results',
   lastUpdated: 'Last updated on',
   relatedTopics: 'Related topics',
+  previousPage: 'Previous',
+  nextPage: 'Next',
   notFound: 'Page not found',
   dismissBanner: 'Dismiss banner',
   toggleTheme: 'Toggle theme',

package/src/lib/types.ts

@@ -255,9 +255,20 @@ export interface FontsConfig extends FontSpec {
   body?: FontSpec;
 }
 
+/**
+ * Named slots a theme can place the search control in. Every theme must
+ * support "header"; unsupported positions fall back to it.
+ */
+export type SearchPosition = 'header' | 'sidebar';
+
 export interface SearchConfig {
   /** Placeholder text for the search input. */
   prompt?: string;
+  /**
+   * Where the search control renders: "header" (default, right side of the
+   * header) or "sidebar" (top of the navigation column).
+   */
+  position?: SearchPosition;
   /** Provider id: "local" (default), "pagefind", or a runtime-registered id. */
   provider?: string;
   /** Provider-specific configuration. */
@@ -487,6 +498,8 @@ export interface ThemeLabels {
   noResults: string;
   lastUpdated: string;
   relatedTopics: string;
+  previousPage: string;
+  nextPage: string;
   notFound: string;
   dismissBanner: string;
   toggleTheme: string;
@@ -555,7 +568,7 @@ export interface DocFrontmatter {
   title?: string;
   description?: string;
   noindex?: boolean;
-  /** Hide the header search control and disable its shortcut on this page. */
+  /** Hide the search control and disable its shortcut on this page. */
   search?: false;
   /** Overrides the site-wide `metadata.timestamp` setting for this page. */
   timestamp?: boolean;

package/src/styles/global.css

@@ -186,8 +186,8 @@
     font-size: 0.875rem;
   }
 
-  /* Styled to match the PropertiesTable component: rounded outer border,
-     horizontal row separators only, and no header fill. */
+  /* Shared by GFM tables and the PropertiesTable component: rounded outer border,
+     horizontal row separators only, and a card-colored header fill. */
   .docs-markdown table:not(:where(.not-prose, .not-prose *)) {
     width: 100%;
     margin: 1rem 0;
@@ -222,10 +222,19 @@
   }
 
   .docs-markdown th:not(:where(.not-prose, .not-prose *)) {
-    background: transparent;
+    background: var(--card);
     font-weight: 600;
   }
 
+  /* The header fill must follow the table's rounded top corners. */
+  .docs-markdown th:first-child:not(:where(.not-prose, .not-prose *)) {
+    border-top-left-radius: calc(var(--radius-lg) - 1px);
+  }
+
+  .docs-markdown th:last-child:not(:where(.not-prose, .not-prose *)) {
+    border-top-right-radius: calc(var(--radius-lg) - 1px);
+  }
+
   .docs-markdown tbody tr:last-child td:not(:where(.not-prose, .not-prose *)) {
     border-bottom: none;
   }