@umami/shiso 1.5.0 → 1.6.0

package/dist/chunks/App.js

@@ -1,9 +1,8 @@
+import { n as highlightTerms } from "./search.js";
 import { resolveSearchProvider } from "../search.js";
 import * as React$1 from "react";
 import { Children, cloneElement, createContext, createElement, forwardRef, isValidElement, useCallback, useContext, useDebugValue, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore, useSyncExternalStore as useSyncExternalStore$1 } from "react";
-import "@fontsource/inter/400.css";
-import "@fontsource/inter/700.css";
-import "@fontsource/inter/800.css";
+import "@fontsource-variable/inter/index.css";
 import "@fontsource/jetbrains-mono/400.css";
 import "highlight.js/styles/github.css";
 import "@umami/shiso/styles.css";
@@ -12892,18 +12891,18 @@ function PropertiesTable({ children }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: "my-4 overflow-x-auto rounded-lg border border-border px-6 py-2",
 		children: /* @__PURE__ */ jsxs("table", {
-			className: "m-0 min-w-[40rem] table-fixed border-collapse",
+			className: "m-0 min-w-[40rem] table-fixed border-collapse border-0",
 			children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
 				/* @__PURE__ */ jsx("th", {
-					className: "w-1/3 border-x-0 border-t-0 border-b border-border bg-transparent px-0 py-2 pr-6 text-left text-sm font-semibold text-foreground",
+					className: "w-1/5 border-x-0 border-t-0 border-b border-border bg-transparent px-0 py-2 pr-6 text-left text-sm font-semibold text-foreground",
 					children: "Name"
 				}),
 				/* @__PURE__ */ jsx("th", {
-					className: "w-1/3 border-x-0 border-t-0 border-b border-border bg-transparent px-0 py-2 pr-6 text-left text-sm font-semibold text-foreground",
+					className: "w-1/4 border-x-0 border-t-0 border-b border-border bg-transparent px-0 py-2 pr-6 text-left text-sm font-semibold text-foreground",
 					children: "Type"
 				}),
 				/* @__PURE__ */ jsx("th", {
-					className: "w-1/3 border-x-0 border-t-0 border-b border-border bg-transparent px-0 py-2 text-left text-sm font-semibold text-foreground",
+					className: "border-x-0 border-t-0 border-b border-border bg-transparent px-0 py-2 text-left text-sm font-semibold text-foreground",
 					children: "Description"
 				})
 			] }) }), /* @__PURE__ */ jsx("tbody", { children: rows.map((row, index) => {
@@ -26097,6 +26096,11 @@ function renderSnippet(snippet) {
 		children: part
 	}, index) : part);
 }
+function renderWithQueryHighlight(text, query) {
+	const terms = query.trim().split(/\s+/).filter(Boolean);
+	if (!terms.length) return text;
+	return renderSnippet(highlightTerms(text, terms));
+}
 /**
 * Provider-neutral search dialog. The selected provider and its index or
 * client are loaded on demand, so search stays out of the initial bundle.
@@ -26232,7 +26236,7 @@ function Search({ config, labels }) {
 							onSelect: () => select(result),
 							children: [/* @__PURE__ */ jsxs("div", {
 								className: "text-[0.9rem] font-semibold text-foreground",
-								children: [result.page, result.heading ? ` › ${result.heading}` : ""]
+								children: [renderWithQueryHighlight(result.page, query), result.heading ? /* @__PURE__ */ jsxs(Fragment, { children: [" › ", renderWithQueryHighlight(result.heading, query)] }) : null]
 							}), result.snippet && /* @__PURE__ */ jsx("div", {
 								className: "mt-[0.15rem] line-clamp-2 text-[0.8rem] text-muted-foreground",
 								children: renderSnippet(result.snippet)
@@ -26828,13 +26832,13 @@ function DocContent({ page, doc, site }) {
 		...pagefindAttrs,
 		children: [
 			eyebrow && /* @__PURE__ */ jsx("div", {
-				className: "text-sm font-bold text-primary",
+				className: "text-sm font-medium text-primary",
 				children: eyebrow
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex items-start justify-between gap-4",
 				children: [title && /* @__PURE__ */ jsx("h1", {
-					className: "mt-2 text-4xl text-foreground leading-[1.2] tracking-[-0.03em] [font-family:var(--font-heading)] [font-weight:var(--font-heading-weight,800)]",
+					className: "mt-2 text-4xl text-foreground leading-[1.2] tracking-[-0.03em] [font-family:var(--font-heading)] [font-weight:var(--font-heading-weight,700)]",
 					children: title
 				}), /* @__PURE__ */ jsx(ContextualMenu, {
 					options: contextualOptions,
@@ -26842,7 +26846,7 @@ function DocContent({ page, doc, site }) {
 				})]
 			}),
 			description && /* @__PURE__ */ jsx("p", {
-				className: "mt-1 mb-6 text-base text-muted-foreground",
+				className: "mt-3 mb-8 text-lg text-muted-foreground leading-relaxed",
 				children: description
 			}),
 			/* @__PURE__ */ jsx("div", {

package/dist/chunks/local.js

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

package/dist/chunks/search.js

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

package/package.json

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

package/src/App.tsx

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

package/src/components/DocContent.tsx

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

package/src/components/Search.tsx

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

package/src/components/docs/PropertiesTable.tsx

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

package/src/styles/global.css

@@ -60,10 +60,17 @@
 /* Markdown content */
 
 @layer components {
+  /* Body copy is muted; headings, bold text, links, and inline code stay at
+     full foreground brightness so they stand out against the running text. */
   .docs-markdown {
     margin-bottom: 2.5rem;
     font-size: 16px;
     line-height: 1.75;
+    color: color-mix(in srgb, var(--foreground) 40%, var(--muted-foreground));
+  }
+
+  [data-theme="dark"] .docs-markdown {
+    color: color-mix(in srgb, var(--foreground) 25%, var(--muted-foreground));
   }
 
   .docs-markdown > * + * {
@@ -72,7 +79,7 @@
 
   .docs-markdown :where(h2, h3, h4, h5, h6) {
     font-family: var(--font-heading);
-    font-weight: var(--font-heading-weight, 700);
+    font-weight: var(--font-heading-weight, 600);
     letter-spacing: -0.02em;
     line-height: 1.25;
     color: var(--foreground);
@@ -129,7 +136,13 @@
     margin: 0.35rem 0;
   }
 
+  .docs-markdown :where(strong, b) {
+    color: var(--foreground);
+    font-weight: 600;
+  }
+
   .docs-markdown a {
+    color: var(--foreground);
     text-decoration: underline;
     text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
     text-underline-offset: 0.2em;
@@ -140,6 +153,7 @@
   }
 
   .docs-markdown code:not(pre code) {
+    color: var(--foreground);
     border-radius: var(--radius-sm);
     background: color-mix(in srgb, currentColor 4%, transparent);
     padding: 0.1rem 0.3rem;
@@ -158,6 +172,10 @@
     border-radius: var(--radius-lg);
   }
 
+  .docs-markdown th {
+    color: var(--foreground);
+  }
+
   .docs-markdown th,
   .docs-markdown td {
     border: none;

package/src/styles/tokens.css

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