livemark 0.25.0 → 0.27.0

package/source/components/Article.tsx

@@ -1,6 +1,8 @@
+import { useRef } from "react"
 import { MDXContent } from "@content-collections/mdx/react"
 import { Calendar, History, User } from "lucide-react"
 import type { ArticleView } from "../models/article.ts"
+import { useSearchHighlight } from "../helpers/search-highlight.ts"
 import { TocContext } from "../helpers/toc-context.ts"
 import { Abbr } from "./Abbr.tsx"
 import { AnsiCode } from "./AnsiCode.tsx"
@@ -42,8 +44,10 @@ import { ZoomImage } from "./ZoomImage.tsx"
 import { Separator } from "../elements/separator.tsx"
 
 /** Full-page article layout: MDX content, table of contents, toolbar, prev/next, footer */
-export function Article(props: { article: ArticleView }) {
+export function Article(props: { article: ArticleView; highlight?: string }) {
   const { article } = props
+  const prose = useRef<HTMLDivElement>(null)
+  useSearchHighlight(prose, article.path, props.highlight)
   const lastUpdated = formatDate(article.lastUpdated)
   const publishedDate = formatDate(article.date)
   const authors = article.author
@@ -56,7 +60,7 @@ export function Article(props: { article: ArticleView }) {
   return (
     <TocContext.Provider value={article.tocItems}>
       {article.toc !== false && (
-        <MobileToc items={article.tocItems}>
+        <MobileToc items={article.tocItems} title={article.title}>
           <PageToolbar
             file={article.file}
             sourceUrl={article.sourceUrl}
@@ -67,7 +71,7 @@ export function Article(props: { article: ArticleView }) {
       )}
       <div className="flex flex-1 gap-10 p-4 pt-8 md:p-10">
         <div className="flex-1 min-w-0 mx-auto max-w-3xl">
-          <div className="prose dark:prose-invert max-w-none">
+          <div ref={prose} className="prose dark:prose-invert max-w-none">
             <h1 id="top">
               <a href="#top">{article.title}</a>
             </h1>
@@ -97,7 +101,7 @@ export function Article(props: { article: ArticleView }) {
               <img
                 src={article.image}
                 alt=""
-                className="!mt-0 !mb-6 w-full rounded-xl border shadow-sm"
+                className="!mt-0 !mb-6 w-full rounded-card border shadow-sm"
               />
             )}
             <MDXContent

package/source/components/Banner.tsx

@@ -1,4 +1,14 @@
-/** Optional header banner. Empty by default; shadow via `.livemark/components/Banner.tsx` to render content. */
+import { bannerHtml } from "livemark:virtual"
+
+/** Announcement strip above the header, rendered from the `banner` config option. */
 export function Banner() {
-  return null
+  if (!bannerHtml) return null
+  return (
+    <div className="bg-banner text-banner-foreground">
+      <div
+        className="min-w-0 px-4 py-2 text-center font-mono text-xs tracking-wide text-balance sm:px-6 [&_a]:underline [&_a]:underline-offset-4 [&_a:hover]:no-underline [&_code]:font-semibold"
+        dangerouslySetInnerHTML={{ __html: bannerHtml }}
+      />
+    </div>
+  )
 }

package/source/components/BlogIndex.tsx

@@ -40,7 +40,7 @@ export function BlogIndex(props: { sectionPrefix: string }) {
 
   return (
     <TocContext.Provider value={tocItems}>
-      <MobileToc items={tocItems}>
+      <MobileToc items={tocItems} title={section?.title ?? "Blog"}>
         <PageToolbar content={content} />
       </MobileToc>
       <div className="flex flex-1 gap-10 p-4 pt-8 md:p-10">

package/source/components/Callout.tsx

@@ -25,20 +25,18 @@ const configs: Record<CalloutType, CalloutConfig> = {
   tip: {
     icon: Lightbulb,
     label: "Tip",
-    classes:
-      "border-green-500/30 bg-green-50/50 text-green-900 dark:bg-green-950/30 dark:text-green-200",
+    classes: "border-positive/30 bg-positive-tint/50 text-positive-tint-foreground",
   },
   warning: {
     icon: AlertTriangle,
     label: "Warning",
-    classes:
-      "border-yellow-500/30 bg-yellow-50/50 text-yellow-900 dark:bg-yellow-950/30 dark:text-yellow-200",
+    classes: "border-warning/30 bg-warning-tint/50 text-warning-tint-foreground",
   },
   danger: {
     icon: Flame,
     label: "Danger",
     classes:
-      "border-red-500/30 bg-red-50/50 text-red-900 dark:bg-red-950/30 dark:text-red-200",
+      "border-destructive/30 bg-destructive-tint/50 text-destructive-tint-foreground",
   },
 }
 
@@ -54,7 +52,7 @@ export function Callout(props: {
   const title = props.title ?? config.label
 
   return (
-    <aside className={cn("not-prose my-4 rounded-xl border px-4 py-3", config.classes)}>
+    <aside className={cn("not-prose my-4 rounded-card border px-4 py-3", config.classes)}>
       <div className="flex items-center gap-2 font-semibold text-sm mb-2">
         <Icon className="size-4 shrink-0" />
         <span>{title}</span>

package/source/components/ChangelogIndex.tsx

@@ -37,7 +37,7 @@ export function ChangelogIndex(props: { sectionPrefix: string }) {
 
   return (
     <TocContext.Provider value={tocItems}>
-      <MobileToc items={tocItems}>
+      <MobileToc items={tocItems} title={section?.title ?? "Changelog"}>
         <PageToolbar content={content} />
       </MobileToc>
       <div className="flex flex-1 gap-10 p-4 pt-8 md:p-10">

package/source/components/ChoiceList.tsx

@@ -0,0 +1,69 @@
+import { CheckIcon } from "lucide-react"
+import type { MouseEvent, ReactNode } from "react"
+import { cn } from "cn"
+
+export type Choice = {
+  id: string
+  label: ReactNode
+  icon?: ReactNode
+  href?: string
+  /** Indent level below the top one, for a nested choice like a sub-heading. */
+  depth?: number
+}
+
+/** The rows of a sheet that picks one of a list, the selected one tinted and ticked. */
+export function ChoiceList(props: {
+  choices: Choice[]
+  selectedId?: string
+  onSelect?: (choice: Choice, event: MouseEvent<HTMLElement>) => void
+}) {
+  return (
+    <ul className="-mx-2 flex flex-col gap-0.5">
+      {props.choices.map(choice => {
+        const selected = choice.id === props.selectedId
+        const className = cn(
+          "hover:bg-muted active:bg-muted flex h-10 w-full items-center gap-2.5 rounded-control px-2 text-left text-base outline-hidden focus-visible:ring-2 focus-visible:ring-ring [&_svg]:size-[18px] [&_svg]:shrink-0",
+          selected && "bg-sidebar-accent text-sidebar-accent-foreground font-medium",
+        )
+        const content = (
+          <>
+            {choice.icon}
+            <span
+              className={cn(
+                "flex-1 truncate",
+                choice.depth === 1 && "ps-4",
+                (choice.depth ?? 0) >= 2 && "ps-8",
+              )}
+            >
+              {choice.label}
+            </span>
+            {selected && <CheckIcon className="text-primary" />}
+          </>
+        )
+        return (
+          <li key={choice.id}>
+            {choice.href ? (
+              <a
+                href={choice.href}
+                aria-current={selected || undefined}
+                className={className}
+                onClick={event => props.onSelect?.(choice, event)}
+              >
+                {content}
+              </a>
+            ) : (
+              <button
+                type="button"
+                aria-pressed={selected}
+                className={className}
+                onClick={event => props.onSelect?.(choice, event)}
+              >
+                {content}
+              </button>
+            )}
+          </li>
+        )
+      })}
+    </ul>
+  )
+}

package/source/components/CodeBlock.tsx

@@ -28,7 +28,7 @@ export function CodeBlock(props: React.ComponentProps<"pre">) {
 
   return (
     <figure
-      className="shiki not-prose my-4 relative rounded-xl border shadow-sm overflow-hidden text-sm bg-sidebar dark:bg-sidebar"
+      className="shiki not-prose my-4 relative rounded-card border shadow-sm overflow-hidden text-sm bg-sidebar dark:bg-sidebar"
       style={{ ...style, backgroundColor: undefined }}
     >
       {title ? (
@@ -44,7 +44,7 @@ export function CodeBlock(props: React.ComponentProps<"pre">) {
             <TooltipTrigger
               onClick={handleWrapToggle}
               aria-label={wrap ? "Disable wrap" : "Enable wrap"}
-              className={`-me-2 p-1.5 rounded-md hover:text-foreground transition-colors ${wrap ? "text-foreground" : ""}`}
+              className={`-me-2 p-1.5 rounded-control hover:text-foreground transition-colors ${wrap ? "text-foreground" : ""}`}
             >
               <WrapText className="size-3.5" />
             </TooltipTrigger>
@@ -54,7 +54,7 @@ export function CodeBlock(props: React.ComponentProps<"pre">) {
             <TooltipTrigger
               onClick={handleCopy}
               aria-label={copied ? "Copied" : "Copy code"}
-              className="-me-2 p-1.5 rounded-md hover:text-foreground transition-colors"
+              className="-me-2 p-1.5 rounded-control hover:text-foreground transition-colors"
             >
               {copied ? (
                 <Check className="size-3.5" />
@@ -66,12 +66,12 @@ export function CodeBlock(props: React.ComponentProps<"pre">) {
           </Tooltip>
         </div>
       ) : (
-        <div className="empty:hidden absolute top-2 right-2 z-10 backdrop-blur-lg rounded-lg text-muted-foreground">
+        <div className="empty:hidden absolute top-2 right-2 z-10 backdrop-blur-lg rounded-control text-muted-foreground">
           <Tooltip>
             <TooltipTrigger
               onClick={handleWrapToggle}
               aria-label={wrap ? "Disable wrap" : "Enable wrap"}
-              className={`p-1.5 rounded-md hover:text-foreground transition-colors ${wrap ? "text-foreground" : ""}`}
+              className={`p-1.5 rounded-control hover:text-foreground transition-colors ${wrap ? "text-foreground" : ""}`}
             >
               <WrapText className="size-3.5" />
             </TooltipTrigger>
@@ -81,7 +81,7 @@ export function CodeBlock(props: React.ComponentProps<"pre">) {
             <TooltipTrigger
               onClick={handleCopy}
               aria-label={copied ? "Copied" : "Copy code"}
-              className="p-1.5 rounded-md hover:text-foreground transition-colors"
+              className="p-1.5 rounded-control hover:text-foreground transition-colors"
             >
               {copied ? (
                 <Check className="size-3.5" />

package/source/components/CodeTabs.tsx

@@ -47,7 +47,7 @@ export function CodeTabs(props: {
   }, [props.sync, names])
 
   return (
-    <div className="not-prose my-4 rounded-xl border shadow-sm overflow-hidden text-sm bg-sidebar dark:bg-sidebar">
+    <div className="not-prose my-4 rounded-card border shadow-sm overflow-hidden text-sm bg-sidebar dark:bg-sidebar">
       <div className="flex border-b">
         {names.map((name, i) => (
           <button

package/source/components/ContentTabs.tsx

@@ -45,7 +45,7 @@ export function ContentTabs(props: { sync?: string; children: React.ReactNode })
   }, [props.sync, titles])
 
   return (
-    <div className="not-prose my-4 rounded-xl border bg-card">
+    <div className="not-prose my-4 rounded-card border bg-card">
       <div className="flex border-b">
         {titles.map((title, i) => (
           <button

package/source/components/DefaultCatchBoundary.tsx

@@ -6,6 +6,7 @@ import {
   useMatch,
   useRouter,
 } from "@tanstack/react-router"
+import { buttonVariants } from "../elements/button.tsx"
 
 export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
   const router = useRouter()
@@ -25,21 +26,18 @@ export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
           onClick={() => {
             router.invalidate()
           }}
-          className="bg-primary text-primary-foreground px-4 py-2 text-sm font-medium hover:bg-primary/80 transition-colors"
+          className={buttonVariants({ size: "lg" })}
         >
           Try Again
         </button>
         {isRoot ? (
-          <Link
-            to="/"
-            className="border border-border px-4 py-2 text-sm font-medium hover:bg-card transition-colors"
-          >
+          <Link to="/" className={buttonVariants({ variant: "outline", size: "lg" })}>
             Home
           </Link>
         ) : (
           <Link
             to="/"
-            className="border border-border px-4 py-2 text-sm font-medium hover:bg-card transition-colors"
+            className={buttonVariants({ variant: "outline", size: "lg" })}
             onClick={(e: any) => {
               e.preventDefault()
               window.history.back()

package/source/components/Details.tsx

@@ -14,7 +14,7 @@ export function Details(props: { summary: string; children: React.ReactNode }) {
     <Collapsible
       open={open}
       onOpenChange={setOpen}
-      className="not-prose my-4 rounded-xl border border-border bg-card px-4 py-3"
+      className="not-prose my-4 rounded-card border border-border bg-card px-4 py-3"
     >
       <CollapsibleTrigger className="flex w-full cursor-pointer items-center gap-2 text-sm font-semibold select-none">
         <ChevronRight

package/source/components/FileTree.tsx

@@ -11,7 +11,7 @@ export function FileTree(props: { tree: string }) {
   const items: TreeItem[] = JSON.parse(props.tree)
 
   return (
-    <div className="not-prose my-4 rounded-xl border border-border bg-card p-4 font-mono text-sm">
+    <div className="not-prose my-4 rounded-card border border-border bg-card p-4 font-mono text-sm">
       <TreeItems items={items} depth={0} />
     </div>
   )

package/source/components/Header.tsx

@@ -0,0 +1,52 @@
+import { config } from "livemark:virtual"
+import { useLocation, useMatch } from "@tanstack/react-router"
+import { useState } from "react"
+import { cn } from "cn"
+import { currentSection } from "../content/article.ts"
+import { activeSiteLink } from "../helpers/section.ts"
+import { HeaderMenu } from "./HeaderMenu.tsx"
+import { HeaderNav } from "./HeaderNav.tsx"
+import { Search } from "./Search.tsx"
+import { SiteLink } from "./SiteLink.tsx"
+import { SiteTitle } from "./SiteTitle.tsx"
+import { Theme } from "./Theme.tsx"
+
+/** Sticky site header: title, header sections and links, search and theme. `toggle`
+ * sits before the title from `lg`; `menu` opens the phone navigation */
+export function Header(props: { toggle?: React.ReactNode; menu?: React.ReactNode }) {
+  const pathname = useLocation({ select: l => l.pathname })
+  const articleRoute = useMatch({ from: "/$", shouldThrow: false })
+  const activeSection = articleRoute
+    ? currentSection(`/${pathname.replace(/^\/|\/$/g, "")}/`)
+    : undefined
+  const siteLinkTarget = activeSiteLink(pathname, config.sections ?? [])
+  const [compactSearch, setCompactSearch] = useState(false)
+
+  return (
+    <header className="sticky top-0 z-20 flex has-[[data-header-search]]:z-40 h-16 shrink-0 items-center border-b bg-background">
+      <div
+        className={cn(
+          "flex min-w-0 items-center self-stretch pl-4 lg:shrink-0",
+          props.toggle ? "pr-4" : "lg:w-[calc(var(--sidebar-width,16rem)+4rem)]",
+        )}
+      >
+        {props.toggle && <div className="hidden lg:flex">{props.toggle}</div>}
+        <SiteLink
+          to={siteLinkTarget}
+          className={cn("flex min-w-0 items-center gap-2", props.toggle && "lg:hidden")}
+        >
+          <SiteTitle />
+        </SiteLink>
+      </div>
+      <HeaderNav
+        activePrefix={activeSection?.prefix}
+        onCompactChange={setCompactSearch}
+      />
+      <div className="ml-auto flex shrink-0 items-center gap-1 pr-2 lg:pr-1">
+        <Search compact={compactSearch} />
+        <Theme />
+        <div className="lg:hidden">{props.menu ?? <HeaderMenu />}</div>
+      </div>
+    </header>
+  )
+}

package/source/components/HeaderMenu.tsx

@@ -0,0 +1,41 @@
+import { config } from "livemark:virtual"
+import { useNavigate } from "@tanstack/react-router"
+import { Menu } from "lucide-react"
+import { Button } from "../elements/button.tsx"
+import { DynamicIcon } from "../helpers/dynamic-icon.tsx"
+import { useNavItems } from "../helpers/nav-items.tsx"
+import { prefixUrl } from "../helpers/prefix-url.ts"
+import { MenuSheet } from "./MenuSheet.tsx"
+
+/** Phone navigation for a `Header` without a sidebar: the header sections and links */
+export function HeaderMenu() {
+  const items = useNavItems()
+  const navigate = useNavigate()
+
+  return (
+    <MenuSheet
+      title="Navigation"
+      items={items.map(item => ({
+        id: item.key,
+        label: item.suffix ? `${item.title} (${item.suffix})` : item.title,
+        icon: item.icon && <DynamicIcon name={item.icon} className="size-4 shrink-0" />,
+        active: item.active,
+        onSelect: () => {
+          if (item.href) window.location.assign(prefixUrl(item.href, config.base))
+          else if (item.target) navigate({ to: item.target })
+        },
+      }))}
+      trigger={
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          title="Navigation"
+          aria-label="Navigation"
+          className="cursor-pointer"
+        />
+      }
+    >
+      <Menu />
+    </MenuSheet>
+  )
+}

package/source/components/HeaderNav.tsx

@@ -0,0 +1,145 @@
+import { ChevronDown } from "lucide-react"
+import { useLayoutEffect, useRef, useState } from "react"
+import { cn } from "cn"
+import { type NavItem, renderNavAnchor, useNavItems } from "../helpers/nav-items.tsx"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../elements/dropdown-menu.tsx"
+
+// The `lg:w-56` Search field minus its 36px icon-only form
+const SEARCH_COMPACT_SAVING = 188
+
+/** Header sections and links from `lg`: once they outgrow the bar, Search turns
+ * compact and the rest fold into a "More" menu */
+export function HeaderNav(props: {
+  activePrefix?: string
+  onCompactChange: (compact: boolean) => void
+}) {
+  const items = useNavItems(props.activePrefix)
+  const strip = useRef<HTMLElement>(null)
+  const measure = useRef<HTMLDivElement>(null)
+  const [visibleCount, setVisibleCount] = useState(items.length)
+  const onCompactChange = useRef(props.onCompactChange)
+  onCompactChange.current = props.onCompactChange
+
+  useLayoutEffect(() => {
+    let compact = false
+    const fit = () => {
+      if (!strip.current || !measure.current) return
+      const style = getComputedStyle(strip.current)
+      const width =
+        strip.current.clientWidth -
+        parseFloat(style.paddingLeft) -
+        parseFloat(style.paddingRight)
+      if (width <= 0) return
+      // Measured as if Search were full, so toggling it never feeds back into the fit
+      const room = width - (compact ? SEARCH_COMPACT_SAVING : 0)
+      const gap = parseFloat(getComputedStyle(measure.current).columnGap) || 0
+      const widths = [...measure.current.children].map(
+        child => child.getBoundingClientRect().width,
+      )
+      const more = widths.pop() ?? 0
+      const total = widths.reduce((sum, w) => sum + w, 0) + gap * (widths.length - 1)
+
+      compact = total > room
+      let count = widths.length
+      if (total > room + SEARCH_COMPACT_SAVING) {
+        let used = more
+        count = 0
+        for (const w of widths) {
+          if (used + gap + w > room + SEARCH_COMPACT_SAVING) break
+          used += gap + w
+          count++
+        }
+      }
+      onCompactChange.current(compact)
+      setVisibleCount(count)
+    }
+    fit()
+    const observer = new ResizeObserver(fit)
+    if (strip.current) observer.observe(strip.current)
+    if (measure.current) observer.observe(measure.current)
+    return () => observer.disconnect()
+  }, [])
+
+  const shown = items.slice(0, visibleCount)
+  const folded = items.slice(visibleCount)
+
+  return (
+    <nav
+      ref={strip}
+      className="relative hidden w-0 min-w-0 flex-1 items-center gap-6 self-stretch overflow-hidden px-6 text-sm lg:flex xl:gap-8"
+    >
+      {shown.map(item => (
+        <HeaderNavLink key={item.key} item={item} />
+      ))}
+      {folded.length > 0 && <HeaderNavMore items={folded} />}
+      <div
+        ref={measure}
+        aria-hidden
+        inert
+        className="invisible absolute left-0 flex gap-6 whitespace-nowrap xl:gap-8"
+      >
+        {items.map(item => (
+          <HeaderNavLink key={item.key} item={item} />
+        ))}
+        <HeaderNavMoreTrigger active={false} />
+      </div>
+    </nav>
+  )
+}
+
+function HeaderNavLink(props: { item: NavItem }) {
+  return renderNavAnchor(
+    props.item,
+    cn(
+      "inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap text-foreground",
+      props.item.active ? ACTIVE : IDLE,
+    ),
+  )
+}
+
+function HeaderNavMore(props: { items: NavItem[] }) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={<HeaderNavMoreTrigger active={props.items.some(item => item.active)} />}
+      />
+      <DropdownMenuContent align="end" className="w-auto">
+        {props.items.map(item => (
+          <DropdownMenuItem
+            key={item.key}
+            className={cn("cursor-pointer", item.active && "font-medium")}
+            render={renderNavAnchor(item)}
+          />
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+function HeaderNavMoreTrigger(
+  props: React.ComponentProps<"button"> & { active: boolean },
+) {
+  const { active, className, ...rest } = props
+  return (
+    <button
+      type="button"
+      {...rest}
+      className={cn(
+        "inline-flex shrink-0 cursor-pointer items-center gap-1 whitespace-nowrap text-foreground",
+        active ? ACTIVE : IDLE,
+        className,
+      )}
+    >
+      More
+      <ChevronDown className="size-3.5" />
+    </button>
+  )
+}
+
+const ACTIVE = "font-medium border-b-2 border-foreground pb-0.5 -mb-0.5"
+const IDLE = "opacity-80 hover:opacity-100 transition-opacity"

package/source/components/HeaderSearch.tsx

@@ -0,0 +1,77 @@
+import { useLayoutEffect, useRef, useState } from "react"
+import { X } from "lucide-react"
+import { SearchResultGroups, useArticleSearch } from "../helpers/article-search.tsx"
+import { Command, CommandEmpty, CommandInput, CommandList } from "../elements/command.tsx"
+
+/** Search field that takes over the header below `lg`, with results dropping under it */
+export function HeaderSearch(props: { onClose: () => void }) {
+  const search = useArticleSearch()
+  const bar = useRef<HTMLDivElement>(null)
+  const [panelTop, setPanelTop] = useState<number>()
+
+  // Measured, not `top-16`: while the Banner is in view it pushes the header down.
+  useLayoutEffect(() => {
+    const measure = () => setPanelTop(bar.current?.getBoundingClientRect().bottom)
+    measure()
+    window.addEventListener("scroll", measure, { passive: true })
+    window.addEventListener("resize", measure)
+    return () => {
+      window.removeEventListener("scroll", measure)
+      window.removeEventListener("resize", measure)
+    }
+  }, [])
+
+  // `data-header-search` lifts the header over the Toc bar and BackToTop (Layout).
+  return (
+    <Command
+      ref={bar}
+      data-header-search
+      shouldFilter={false}
+      loop
+      onKeyDown={event => {
+        if (event.key === "Escape") props.onClose()
+      }}
+      className="absolute inset-0 z-10 overflow-visible rounded-none! bg-background p-0 lg:hidden"
+    >
+      <div className="flex h-full items-center gap-1 pl-1 pr-2">
+        <div className="flex-1 [&_[data-slot=command-input-wrapper]]:p-0 [&_[data-slot=input-group]]:border-transparent! [&_[data-slot=input-group]]:bg-transparent! [&_[data-slot=input-group]]:ring-0!">
+          <CommandInput
+            autoFocus
+            placeholder="Search docs..."
+            value={search.query}
+            onValueChange={search.searchArticles}
+          />
+        </div>
+        <button
+          type="button"
+          onClick={props.onClose}
+          aria-label="Close search"
+          title="Close search"
+          className="flex size-9 shrink-0 items-center justify-center rounded-control text-muted-foreground hover:bg-muted hover:text-foreground transition-colors cursor-pointer"
+        >
+          <X className="size-5" />
+        </button>
+      </div>
+      <div
+        style={{ top: panelTop }}
+        className="fixed inset-x-0 bottom-0 flex flex-col border-t bg-background p-1"
+      >
+        <CommandList className="max-h-none flex-1 overscroll-contain">
+          <CommandEmpty>
+            {search.query.trim()
+              ? "No results found."
+              : "Type to search across all contents."}
+          </CommandEmpty>
+          <SearchResultGroups
+            query={search.query}
+            grouped={search.grouped}
+            onSelect={path => {
+              props.onClose()
+              search.selectArticle(path)
+            }}
+          />
+        </CommandList>
+      </div>
+    </Command>
+  )
+}

package/source/components/InlineBadge.tsx

@@ -3,7 +3,7 @@ import { Badge } from "../elements/badge.tsx"
 /** Inline badge rendered from :badge text directives */
 export function InlineBadge(props: {
   label: string
-  variant?: "default" | "secondary" | "destructive" | "outline"
+  variant?: "default" | "secondary" | "positive" | "warning" | "destructive" | "outline"
 }) {
   return <Badge variant={props.variant}>{props.label}</Badge>
 }

package/source/components/InlineToc.tsx

@@ -9,7 +9,7 @@ export function InlineToc(props: { maxLevel?: string }) {
   if (items.length === 0) return null
 
   return (
-    <nav className="not-prose my-8 rounded-xl border border-border bg-card p-6">
+    <nav className="not-prose my-8 rounded-card border border-border bg-card p-6">
       <p className="text-base font-semibold mb-4">Table of Contents</p>
       <ul className="text-base space-y-2.5">
         {items.map(item => (