@umami/shiso 1.6.0 → 1.8.0

package/dist/components.js

@@ -0,0 +1,3 @@
+import { At as Info, Dt as Callout, Et as CardGroup, Ft as Button, It as Badge, Mt as Tip, Nt as Warning, Ot as Check, Pt as WarningBanner, Rt as Accordion, Tt as Card, _ as Tooltip, at as Tabs, bt as Columns, ct as ResponseField, dt as ParamField, ft as Icon, ht as Expandable, it as Tab, jt as Note, kt as Danger, lt as PropertiesTable, n as ZoomableImage, ot as Step, pt as Frame, st as Steps, ut as Param, xt as CodeGroup, yt as Column, zt as AccordionGroup } from "./chunks/docs.js";
+
+export { Accordion, AccordionGroup, Badge, Button, Callout, Card, CardGroup, Check, CodeGroup, Column, Columns, Danger, Expandable, Frame, Icon, Info, Note, Param, ParamField, PropertiesTable, ResponseField, Step, Steps, Tab, Tabs, Tip, Tooltip, Warning, WarningBanner, ZoomableImage };

package/dist/entry-client.js

@@ -1,4 +1,5 @@
-import { g as BrowserRouter, m as BASE_URL, t as App } from "./chunks/App.js";
+import { ir as BrowserRouter } from "./chunks/docs.js";
+import { m as BASE_URL, t as App } from "./chunks/App.js";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/entry-client.tsx

package/dist/entry-server.js

@@ -1,4 +1,5 @@
-import { _ as Router, a as docsSite, b as ABSOLUTE_URL_REGEX, c as getSeo, d as getDocModule, f as getLastModified, h as toAbsoluteUrl, i as docsHomeUrl, l as siteName, m as BASE_URL, n as buildHead, o as getLocaleByPathname, p as getScopeForPage, r as renderHeadToString, s as getRedirects, t as App, u as standalonePages, v as createPath, y as parsePath } from "./chunks/App.js";
+import { cr as Router, fr as createPath, mr as ABSOLUTE_URL_REGEX, pr as parsePath } from "./chunks/docs.js";
+import { a as docsSite, c as getSeo, d as getDocModule, f as getLastModified, h as toAbsoluteUrl, i as docsHomeUrl, l as siteName, m as BASE_URL, n as buildHead, o as getLocaleByPathname, p as getScopeForPage, r as renderHeadToString, s as getRedirects, t as App, u as standalonePages } from "./chunks/App.js";
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 import { renderToString } from "react-dom/server";
@@ -91,16 +92,17 @@ function getRoutes() {
 	return [...docsSite.pages.map((page) => page.url), ...standalonePages.map((page) => page.path)];
 }
 /**
-* Source file for every routed page, so the prerenderer can publish raw
+* Source file for every Markdown/MDX page, so the prerenderer can publish raw
 * markdown next to each HTML page (used by the contextual menu's copy/view
-* options and by AI tools). `filePath` is a module key like
-* "/content/docs/index.mdx", resolved against the project root.
+* options and by AI tools). TSX standalone pages have no raw Markdown copy.
+* `filePath` is a module key like "/content/docs/index.mdx", resolved against
+* the project root.
 */
 function getMarkdownPages() {
 	return [...docsSite.pages.map((page) => ({
 		route: page.url,
 		filePath: page.filePath
-	})), ...standalonePages.map((page) => ({
+	})), ...standalonePages.filter((page) => !page.filePath.endsWith(".tsx")).map((page) => ({
 		route: page.path,
 		filePath: page.filePath
 	}))];

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."
             }
           }
         }
@@ -95,7 +99,7 @@
           },
           "page": {
             "allOf": [{ "$ref": "#/definitions/nonEmptyStringValue" }],
-            "description": "File slug under content/pages, e.g. \"home\" for content/pages/home.mdx."
+            "description": "File slug under content/pages, e.g. \"home\" for content/pages/home.tsx, home.mdx, or home.md."
           },
           "title": {
             "allOf": [{ "$ref": "#/definitions/stringValue" }],
@@ -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.6.0",
+  "version": "1.8.0",
   "description": "Open-source documentation framework for Markdown and MDX sites.",
   "type": "module",
   "bin": {
@@ -15,6 +15,10 @@
       "types": "./types/client.d.ts",
       "default": "./dist/entry-client.js"
     },
+    "./components": {
+      "types": "./types/components.d.ts",
+      "default": "./dist/components.js"
+    },
     "./search": {
       "types": "./types/search.d.ts",
       "default": "./dist/search.js"

package/scripts/build-runtime.mjs

@@ -66,6 +66,7 @@ const bundle = await rolldown({
   input: {
     'entry-client': path.join(sourceRoot, 'entry-client.tsx'),
     'entry-server': path.join(sourceRoot, 'entry-server.tsx'),
+    components: path.join(sourceRoot, 'components/docs/index.ts'),
     search: path.join(sourceRoot, 'lib/search/provider.ts'),
   },
   external: isExternal,

package/scripts/check-package.mjs

@@ -7,6 +7,7 @@ for (const relativeFile of [
   'bin/shiso.mjs',
   'dist/entry-client.js',
   'dist/entry-server.js',
+  'dist/components.js',
   'dist/search.js',
   'docs.schema.json',
   'scripts/lib/mdast.mjs',
@@ -14,6 +15,7 @@ for (const relativeFile of [
   'scripts/lib/slug.mjs',
   'src/styles/global.css',
   'types/client.d.ts',
+  'types/components.d.ts',
   'types/search.d.ts',
   'vite.config.ts',
 ]) {

package/scripts/generate-last-modified.mjs

@@ -18,7 +18,7 @@ import { promisify } from 'node:util';
 const execFileAsync = promisify(execFile);
 
 const DEFAULT_ROOT = process.cwd();
-const CONTENT_EXTENSIONS = new Set(['.md', '.mdx']);
+const CONTENT_EXTENSIONS = new Set(['.md', '.mdx', '.tsx']);
 
 async function collectContentFiles(dir, files = []) {
   let entries;
@@ -115,7 +115,7 @@ export function shisoLastModified(options = {}) {
       await generateLastModified(options);
     },
     async handleHotUpdate({ file }) {
-      if (/\.(md|mdx)$/.test(file)) {
+      if (/\.(md|mdx|tsx)$/.test(file)) {
         await generateLastModified(options);
       }
     },

package/src/components/Header.tsx

@@ -6,7 +6,12 @@ import { ThemeToggle } from '@/components/ThemeToggle';
 import { TopNav } from '@/components/TopNav';
 import { VersionSwitcher } from '@/components/VersionSwitcher';
 import { isExternalHref } from '@/lib/paths';
-import { docsHomeUrl, getScopeByPathname, hasRootStandalonePage } from '@/lib/site-config';
+import {
+  docsHomeUrl,
+  getPageFrontmatter,
+  getScopeByPathname,
+  hasRootStandalonePage,
+} from '@/lib/site-config';
 import type { NormalizedLink, SiteModel } from '@/lib/types';
 
 /**
@@ -62,6 +67,7 @@ export function Header({ site }: { site: SiteModel }) {
   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;
@@ -69,8 +75,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}
     </>
   );
@@ -104,7 +120,7 @@ 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">
-          <Search config={search} labels={labels} />
+          {showSearch ? <Search config={search} labels={labels} /> : null}
           {navbar?.links.map(link => (
             <NavbarLinkItem key={link.href} link={link} />
           ))}

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/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/entry-server.tsx

@@ -36,15 +36,18 @@ export function getRoutes(): string[] {
 export { getRedirects };
 
 /**
- * Source file for every routed page, so the prerenderer can publish raw
+ * Source file for every Markdown/MDX page, so the prerenderer can publish raw
  * markdown next to each HTML page (used by the contextual menu's copy/view
- * options and by AI tools). `filePath` is a module key like
- * "/content/docs/index.mdx", resolved against the project root.
+ * options and by AI tools). TSX standalone pages have no raw Markdown copy.
+ * `filePath` is a module key like "/content/docs/index.mdx", resolved against
+ * the project root.
  */
 export function getMarkdownPages(): { route: string; filePath: string }[] {
   return [
     ...docsSite.pages.map(page => ({ route: page.url, filePath: page.filePath })),
-    ...standalonePages.map(page => ({ route: page.path, filePath: page.filePath })),
+    ...standalonePages
+      .filter(page => !page.filePath.endsWith('.tsx'))
+      .map(page => ({ route: page.path, filePath: page.filePath })),
   ];
 }
 

package/src/lib/content.ts

@@ -3,10 +3,9 @@ import { CONTENT_DIR, PAGES_DIR } from '@/lib/paths';
 import type { DocModule } from '@/lib/types';
 
 /**
- * Eagerly imports every content file at build time. Each module exports:
- * - default: the compiled MDX component
- * - frontmatter: parsed YAML frontmatter
- * - toc: heading anchors injected by the remark-toc plugin
+ * Eagerly imports every content file at build time. Markdown/MDX modules
+ * export a compiled component plus generated frontmatter and TOC values. TSX
+ * standalone pages export their component and may export frontmatter directly.
  *
  * Eager loading keeps server prerendering and client hydration in sync
  * without Suspense, at the cost of bundling all pages together.
@@ -16,7 +15,7 @@ import type { DocModule } from '@/lib/types';
  * lookup time instead. That also lets later versioned/localized content roots
  * (`content/v2`, `content/es`) work without touching this glob.
  */
-export const docModules = import.meta.glob('/content/**/*.{md,mdx}', {
+export const docModules = import.meta.glob('/content/**/*.{md,mdx,tsx}', {
   eager: true,
 }) as Record<string, DocModule>;
 
@@ -35,7 +34,12 @@ export function resolveDocFile(fileSlug: string, contentDir = CONTENT_DIR): stri
  * under the fixed content/pages root.
  */
 export function resolvePageFile(fileSlug: string): string | undefined {
-  return resolveDocFile(fileSlug, PAGES_DIR);
+  const candidates = [
+    `/${PAGES_DIR}/${fileSlug}.tsx`,
+    `/${PAGES_DIR}/${fileSlug}.mdx`,
+    `/${PAGES_DIR}/${fileSlug}.md`,
+  ];
+  return candidates.find(candidate => candidate in docModules);
 }
 
 export function getDocModule(filePath: string): DocModule | undefined {

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-config.ts

@@ -1,6 +1,6 @@
 import shisoConfig from 'virtual:shiso-config';
 import rawConfig from 'virtual:shiso-docs-config';
-import { resolveDocFile, resolvePageFile } from '@/lib/content';
+import { getDocModule, resolveDocFile, resolvePageFile } from '@/lib/content';
 import {
   assertDocsConfig,
   getDefaultScope,
@@ -126,6 +126,12 @@ export function getPageByPathname(pathname: string): NormalizedDocsPage | null {
   return getSitePageByPathname(docsSite, stripBase(pathname));
 }
 
+/** Frontmatter for the docs or standalone page that owns a pathname. */
+export function getPageFrontmatter(pathname: string) {
+  const page = getStandalonePage(pathname) || getPageByPathname(pathname);
+  return page ? getDocModule(page.filePath)?.frontmatter : undefined;
+}
+
 export function getPageTitle(pageTitle?: string): string {
   if (pageTitle && siteName) {
     return `${pageTitle} – ${siteName}`;

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/standalone-pages.ts

@@ -28,7 +28,7 @@ function normalizePath(rawPath: unknown): string {
     throw invalid(`standalone page path "${value}" must not use wildcard patterns.`);
   }
 
-  if (/\.mdx?$/i.test(value)) {
+  if (/\.(?:mdx?|tsx)$/i.test(value)) {
     throw invalid(
       `standalone page path "${value}" must be a route, not a file — drop the extension.`,
     );
@@ -48,7 +48,7 @@ function normalizePageSlug(rawSlug: unknown): string {
       .replace(/\\/g, '/')
       .replace(/^\/+/, '')
       .replace(/^pages\//, '')
-      .replace(/\.mdx?$/, '')
+      .replace(/\.(?:mdx?|tsx)$/, '')
       .replace(/\/+$/, '') || 'index'
   );
 }
@@ -104,7 +104,7 @@ export function normalizeStandalonePages(
     if (!filePath) {
       throw new Error(
         `Missing standalone page file for "${fileSlug}": expected ` +
-          `"content/pages/${fileSlug}.mdx" or ".md".`,
+          `"content/pages/${fileSlug}.tsx", ".mdx", or ".md".`,
       );
     }
 

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". */
@@ -179,7 +189,7 @@ export interface RedirectRule {
 export interface StandalonePageItem {
   /** Route path, starting with "/". "/" replaces the root redirect to docs. */
   path: string;
-  /** File slug under content/pages, e.g. "home" for content/pages/home.mdx. */
+  /** File slug under content/pages, e.g. "home" for content/pages/home.tsx. */
   page: string;
   /** Page title used in the document head. Frontmatter title wins. */
   title?: string;
@@ -189,7 +199,7 @@ export interface StandalonePageItem {
 export interface StandalonePage {
   /** Base-relative route, e.g. "/" or "/about". */
   path: string;
-  /** Module key of the MDX file, e.g. "/content/pages/home.mdx". */
+  /** Module key of the TSX, MDX, or Markdown file. */
   filePath: string;
   /** Config-level head-title override. */
   title?: string;
@@ -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;
@@ -537,6 +555,8 @@ export interface DocFrontmatter {
   title?: string;
   description?: string;
   noindex?: boolean;
+  /** Hide the header search control and disable its shortcut on this page. */
+  search?: false;
   /** Overrides the site-wide `metadata.timestamp` setting for this page. */
   timestamp?: boolean;
   /** Related pages rendered above the prev/next pager. */

package/src/pages/StandalonePage.tsx

@@ -7,8 +7,8 @@ import type { SiteModel, StandalonePage } from '@/lib/types';
 
 /**
  * A standalone (non-docs) page: site chrome from Layout (banner, header),
- * the MDX content at full container width — no sidebar, TOC, or pager — and
- * the footer. MDX components come from the app-level MDXProvider.
+ * content at full container width — no sidebar, TOC, or pager — and the
+ * footer. Markdown/MDX gets docs typography; TSX owns its presentation.
  */
 export function StandalonePageView({ page, site }: { page: StandalonePage; site: SiteModel }) {
   const { pathname } = useLocation();
@@ -28,14 +28,21 @@ export function StandalonePageView({ page, site }: { page: StandalonePage; site:
   }
 
   const Content = doc.default;
+  const isComponentPage = page.filePath.endsWith('.tsx');
 
   return (
     <div className="flex min-h-full flex-col">
-      <article className="grow py-8">
-        <div className="docs-markdown">
+      {isComponentPage ? (
+        <div className="grow">
           <Content />
         </div>
-      </article>
+      ) : (
+        <article className="grow py-8">
+          <div className="docs-markdown">
+            <Content />
+          </div>
+        </article>
+      )}
       <Footer footer={site.footer} />
     </div>
   );