@umami/shiso 1.9.0 → 1.10.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
@@ -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 }) => {
+const NavigationButton = ({ label, url, eyebrow, isPrev }) => {
 	if (!url || !label) return /* @__PURE__ */ jsx("div", {});
 	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 my-3 inline-flex items-end gap-3 text-base text-foreground", { "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/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.10.0",
   "description": "Open-source documentation framework for Markdown and MDX sites.",
   "type": "module",
   "bin": {

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,10 +160,13 @@ 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) {
@@ -172,19 +176,25 @@ const NavigationButton = ({
   return (
     <Link
       to={url}
-      className="group my-3 inline-flex items-center gap-3 text-base font-bold text-foreground"
+      className={cn('group my-3 inline-flex items-end gap-3 text-base text-foreground', {
+        '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/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;