livemark 0.25.0 → 0.27.0

package/source/components/SearchDialog.tsx

@@ -1,127 +1,17 @@
-import { useState, useRef, useCallback, useMemo } from "react"
-import { useNavigate } from "@tanstack/react-router"
-import { create, insertMultiple, search } from "@orama/orama"
-import { sortedArticles } from "../content/article.ts"
-import { resolveArticleIcon } from "../helpers/article-icon.ts"
+import { SearchResultGroups, useArticleSearch } from "../helpers/article-search.tsx"
 import {
   CommandDialog,
   CommandEmpty,
-  CommandGroup,
   CommandInput,
-  CommandItem,
   CommandList,
 } from "../elements/command.tsx"
 
-interface SearchResult {
-  title: string
-  path: string
-  icon?: string
-  snippet: string
-  group: string
-}
-
 /** Full-text search dialog powered by Orama */
 export function SearchDialog(props: {
   open: boolean
   onOpenChange: (open: boolean) => void
 }) {
-  const [results, setResults] = useState<SearchResult[]>([])
-  const [query, setQuery] = useState("")
-  const dbRef = useRef<Awaited<ReturnType<typeof create>> | null>(null)
-  const navigate = useNavigate()
-
-  const ensureIndex = useCallback(async () => {
-    if (dbRef.current) return dbRef.current
-    const db = await create({
-      schema: {
-        title: "string",
-        description: "string",
-        searchText: "string",
-      },
-    })
-    await insertMultiple(
-      db,
-      sortedArticles.map(a => ({
-        title: a.title,
-        description: a.description ?? "",
-        searchText: a.searchText,
-      })),
-    )
-    dbRef.current = db
-    return db
-  }, [])
-
-  const toResult = useCallback(
-    (article: (typeof sortedArticles)[number], term: string): SearchResult => ({
-      title: article.title,
-      path: article.path,
-      icon: article.icon,
-      snippet: term
-        ? extractSnippet(article.searchText, term)
-        : (article.description ?? ""),
-      group: groupFor(article.path),
-    }),
-    [],
-  )
-
-  const handleSearch = useCallback(
-    async (term: string) => {
-      setQuery(term)
-      if (!term.trim()) {
-        setResults([])
-        return
-      }
-      const db = await ensureIndex()
-      const hits = await search(db, {
-        term,
-        properties: ["title", "description", "searchText"],
-        tolerance: 1,
-        boost: { title: 3, description: 2 },
-      })
-      setResults(
-        hits.hits.map(hit => {
-          const article = sortedArticles.find(a => a.title === hit.document.title)
-          if (!article)
-            return toResult(
-              {
-                ...sortedArticles[0],
-                title: hit.document.title,
-                path: "",
-                searchText: hit.document.description,
-                description: hit.document.description,
-                icon: "",
-              },
-              term,
-            )
-          return toResult(article, term)
-        }),
-      )
-    },
-    [ensureIndex, toResult],
-  )
-
-  const handleSelect = useCallback(
-    (path: string) => {
-      props.onOpenChange(false)
-      setQuery("")
-      setResults([])
-      navigate({
-        to: "/$",
-        params: { _splat: path.replace(/^\/|\/$/g, "") },
-      })
-    },
-    [navigate, props.onOpenChange],
-  )
-
-  const grouped = useMemo(() => {
-    const groups = new Map<string, SearchResult[]>()
-    for (const r of results) {
-      const list = groups.get(r.group) ?? []
-      list.push(r)
-      groups.set(r.group, list)
-    }
-    return groups
-  }, [results])
+  const search = useArticleSearch()
 
   return (
     <CommandDialog
@@ -134,43 +24,24 @@ export function SearchDialog(props: {
     >
       <CommandInput
         placeholder="Search docs..."
-        value={query}
-        onValueChange={handleSearch}
-        onClear={() => handleSearch("")}
+        value={search.query}
+        onValueChange={search.searchArticles}
+        onClear={() => search.searchArticles("")}
       />
       <CommandList className="max-h-80">
         <CommandEmpty>
-          {query.trim()
+          {search.query.trim()
             ? "No results found."
-            : "Type to search across all documentation."}
+            : "Type to search across all contents."}
         </CommandEmpty>
-        {[...grouped.entries()].map(([group, items]) => (
-          <CommandGroup key={group} heading={group}>
-            {items.map(result => {
-              const Icon = resolveArticleIcon(result.icon)
-              return (
-                <CommandItem
-                  key={result.path}
-                  value={result.path}
-                  onSelect={() => handleSelect(result.path)}
-                  className="py-2.5"
-                >
-                  {Icon && (
-                    <Icon className="size-5 shrink-0 mt-0.5 self-start opacity-60" />
-                  )}
-                  <div className="flex flex-col gap-0.5 min-w-0">
-                    <span className="text-base font-medium">{result.title}</span>
-                    {result.snippet && (
-                      <span className="text-sm text-muted-foreground line-clamp-1">
-                        <HighlightedText text={result.snippet} term={query} />
-                      </span>
-                    )}
-                  </div>
-                </CommandItem>
-              )
-            })}
-          </CommandGroup>
-        ))}
+        <SearchResultGroups
+          query={search.query}
+          grouped={search.grouped}
+          onSelect={path => {
+            props.onOpenChange(false)
+            search.selectArticle(path)
+          }}
+        />
       </CommandList>
       <div className="flex items-center gap-4 border-t mt-2 px-4 py-2.5 text-sm text-muted-foreground">
         <span className="flex items-center gap-1.5">
@@ -195,48 +66,3 @@ export function SearchDialog(props: {
     </CommandDialog>
   )
 }
-
-function groupFor(pathname: string) {
-  const segments = pathname.replace(/^\/|\/$/g, "").split("/")
-  if (segments.length <= 2) return "Pages"
-  return segments
-    .slice(1, -1)
-    .map(s =>
-      s
-        .split("-")
-        .map(w => w.charAt(0).toUpperCase() + w.slice(1))
-        .join(" "),
-    )
-    .join(" › ")
-}
-
-function extractSnippet(text: string, term: string) {
-  const lower = text.toLowerCase()
-  const idx = lower.indexOf(term.toLowerCase())
-  if (idx === -1) return text.slice(0, 120)
-  const start = Math.max(0, idx - 40)
-  const end = Math.min(text.length, idx + term.length + 80)
-  const prefix = start > 0 ? "…" : ""
-  const suffix = end < text.length ? "…" : ""
-  return `${prefix}${text.slice(start, end)}${suffix}`
-}
-
-function HighlightedText(props: { text: string; term: string }) {
-  if (!props.term.trim()) return <>{props.text}</>
-  const escaped = props.term.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
-  const regex = new RegExp(`(${escaped})`, "gi")
-  const parts = props.text.split(regex)
-  return (
-    <>
-      {parts.map((part, i) =>
-        regex.test(part) ? (
-          <span key={i} className="text-foreground font-medium">
-            {part}
-          </span>
-        ) : (
-          part
-        ),
-      )}
-    </>
-  )
-}

package/source/components/SheetPanel.tsx

@@ -0,0 +1,69 @@
+import { XIcon } from "lucide-react"
+import { useRef, type ReactNode } from "react"
+import { cn } from "cn"
+import { Button } from "../elements/button.tsx"
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+} from "../elements/drawer.tsx"
+
+/** A phone's bottom sheet: title left, close right, a scrolling body and an
+ * optional pinned footer. */
+export function SheetPanel(props: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onOpenChangeComplete?: (open: boolean) => void
+  title: ReactNode
+  footer?: ReactNode
+  bodyClassName?: string
+  children: ReactNode
+}) {
+  const panelRef = useRef<HTMLDivElement>(null)
+
+  return (
+    <Drawer
+      open={props.open}
+      onOpenChange={open => props.onOpenChange(open)}
+      onOpenChangeComplete={props.onOpenChangeComplete}
+    >
+      <DrawerContent
+        // The body, never its first link: focusing that scrolls the list to it
+        // and paints a focus ring the tap never asked for.
+        initialFocus={panelRef}
+        showCloseButton={false}
+        className="max-h-[85dvh] gap-0"
+      >
+        <DrawerHeader className="shrink-0 flex-row items-center gap-2 pb-2">
+          <DrawerTitle className="line-clamp-1 text-lg font-semibold">
+            {props.title}
+          </DrawerTitle>
+          <DrawerClose
+            render={<Button variant="ghost" size="icon-sm" className="-mr-2 ml-auto" />}
+          >
+            <XIcon className="size-5" />
+            <span className="sr-only">Close</span>
+          </DrawerClose>
+        </DrawerHeader>
+        <div
+          ref={panelRef}
+          tabIndex={-1}
+          className={cn(
+            "min-h-0 flex-1 overflow-y-auto px-4 pt-2 text-base outline-none empty:hidden",
+            props.footer ? "pb-2" : "pb-[max(1.5rem,env(safe-area-inset-bottom))]",
+            props.bodyClassName,
+          )}
+        >
+          {props.children}
+        </div>
+        {props.footer && (
+          <div className="shrink-0 px-4 py-4 pb-[max(1rem,env(safe-area-inset-bottom))]">
+            {props.footer}
+          </div>
+        )}
+      </DrawerContent>
+    </Drawer>
+  )
+}

package/source/components/Sidebar.tsx

@@ -1,4 +1,5 @@
 import { config } from "livemark:virtual"
+import { useState } from "react"
 import { useLocation, useMatch } from "@tanstack/react-router"
 import { useHotkey } from "@tanstack/react-hotkeys"
 import { currentSection } from "../content/article.ts"
@@ -6,7 +7,6 @@ import { activeSiteLink } from "../helpers/section.ts"
 import {
   Sidebar as SidebarRoot,
   SidebarContent,
-  SidebarFooter,
   SidebarHeader,
   SidebarMenu,
   SidebarMenuButton,
@@ -14,15 +14,15 @@ import {
   SidebarRail,
   useSidebar,
 } from "../elements/sidebar.tsx"
-import { Search } from "./Search.tsx"
 import { SidebarArticles } from "./SidebarArticles.tsx"
 import { SidebarLinks } from "./SidebarLinks.tsx"
 import { SidebarPosts } from "./SidebarPosts.tsx"
 import { SidebarReleases } from "./SidebarReleases.tsx"
+import { SidebarSectionPicker } from "./SidebarSectionPicker.tsx"
 import { SidebarSections } from "./SidebarSections.tsx"
 import { SiteLink } from "./SiteLink.tsx"
 import { SiteTitle } from "./SiteTitle.tsx"
-import { Theme } from "./Theme.tsx"
+import type { RoutedSection } from "../models/section.ts"
 
 /** Application sidebar shell: header, body slot picked by section.type, footer */
 export function Sidebar(props: { withSidebar?: boolean }) {
@@ -30,13 +30,19 @@ export function Sidebar(props: { withSidebar?: boolean }) {
   const articleRoute = useMatch({ from: "/$", shouldThrow: false })
   const { toggleSidebar, isMobile } = useSidebar()
 
-  useHotkey("S", () => {
+  useHotkey("L", () => {
     if (props.withSidebar || isMobile) toggleSidebar()
   })
 
-  const section = articleRoute
+  const [browsed, setBrowsed] = useState<{ section: RoutedSection; pathname: string }>()
+
+  const routeSection = articleRoute
     ? currentSection(`/${pathname.replace(/^\/|\/$/g, "")}/`)
     : undefined
+  const picking = isMobile && routeSection !== undefined
+  // Browsing is scoped to the page it started on, so navigating resets it
+  const section =
+    picking && browsed?.pathname === pathname ? browsed.section : routeSection
   const siteLinkTarget = activeSiteLink(pathname, config.sections ?? [])
 
   return (
@@ -51,18 +57,25 @@ export function Sidebar(props: { withSidebar?: boolean }) {
         </SidebarMenu>
       </SidebarHeader>
       <SidebarContent>
-        <SidebarSections />
-        {props.withSidebar && section?.type === "blog" && <SidebarPosts />}
-        {props.withSidebar && section?.type === "changelog" && <SidebarReleases />}
+        {picking && section ? (
+          <SidebarSectionPicker
+            section={section}
+            onSelect={picked => setBrowsed({ section: picked, pathname })}
+          />
+        ) : (
+          <SidebarSections />
+        )}
+        {props.withSidebar && section?.type === "blog" && (
+          <SidebarPosts section={section} />
+        )}
+        {props.withSidebar && section?.type === "changelog" && (
+          <SidebarReleases section={section} />
+        )}
         {props.withSidebar &&
           section?.type !== "blog" &&
-          section?.type !== "changelog" && <SidebarArticles />}
-        <SidebarLinks />
+          section?.type !== "changelog" && <SidebarArticles section={section} />}
+        <SidebarLinks section={section} />
       </SidebarContent>
-      <SidebarFooter className="p-4 space-y-2">
-        <Search />
-        <Theme />
-      </SidebarFooter>
       <SidebarRail />
     </SidebarRoot>
   )

package/source/components/SidebarArticles.tsx

@@ -20,13 +20,14 @@ import {
 } from "../elements/sidebar.tsx"
 import { resolveArticleIcon } from "../helpers/article-icon.ts"
 import type { ArticleNode } from "../models/article.ts"
+import type { RoutedSection } from "../models/section.ts"
 
 /** Article-tree body slot for the Sidebar shell */
-export function SidebarArticles() {
+export function SidebarArticles(props: { section?: RoutedSection }) {
   const pathname = useLocation({ select: l => l.pathname })
 
   const configSections = config.sections
-  const section = currentSection(`/${pathname.replace(/^\/|\/$/g, "")}/`)
+  const section = props.section ?? currentSection(`/${pathname.replace(/^\/|\/$/g, "")}/`)
   const tree = configSections?.length
     ? (sectionArticleTrees.get(section?.prefix ?? "__default__") ?? articleTree)
     : articleTree
@@ -88,7 +89,7 @@ function NavNode(props: { node: ArticleNode; currentPath: string; depth?: number
         </Button>
         <CollapsibleTrigger
           aria-label={`Toggle ${node.label ?? node.title} submenu`}
-          className="absolute right-1 top-1.5 p-1 rounded-md hover:bg-sidebar-accent"
+          className="absolute right-1 top-1.5 p-1 rounded-control hover:bg-sidebar-accent"
         >
           <ChevronRight className="size-3.5 transition-transform group-data-[open]/collapsible:rotate-90" />
         </CollapsibleTrigger>

package/source/components/SidebarLinks.tsx

@@ -11,13 +11,14 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
 } from "../elements/sidebar.tsx"
+import type { RoutedSection } from "../models/section.ts"
 
 /** Shared Links group. Renders sidebar-positioned links always, and
  * header-positioned links only on mobile (mobile collapses all chrome
  * links into the sidebar since the header strip is hidden below `md`). */
-export function SidebarLinks() {
+export function SidebarLinks(props: { section?: RoutedSection }) {
   const pathname = useLocation({ select: l => l.pathname })
-  const section = currentSection(`/${pathname.replace(/^\/|\/$/g, "")}/`)
+  const section = props.section ?? currentSection(`/${pathname.replace(/^\/|\/$/g, "")}/`)
   const links =
     config.links?.filter(link => !link.prefix || link.prefix === section?.prefix) ?? []
 

package/source/components/SidebarPosts.tsx

@@ -17,12 +17,13 @@ import {
   SidebarMenuSubButton,
   SidebarMenuSubItem,
 } from "../elements/sidebar.tsx"
+import type { RoutedSection } from "../models/section.ts"
 
 /** Blog body slot for the Sidebar shell: All Posts / Recent Posts / RSS / Tags */
-export function SidebarPosts() {
+export function SidebarPosts(props: { section?: RoutedSection }) {
   const pathname = useLocation({ select: l => l.pathname })
 
-  const section = currentSection(`/${pathname.replace(/^\/|\/$/g, "")}/`)
+  const section = props.section ?? currentSection(`/${pathname.replace(/^\/|\/$/g, "")}/`)
   const flat = section ? (sectionFlatArticles.get(section.prefix) ?? []) : []
   const posts = flat
     .map(p => sortedArticles.find(a => a.path === p))

package/source/components/SidebarReleases.tsx

@@ -16,12 +16,13 @@ import {
   SidebarMenuSubButton,
   SidebarMenuSubItem,
 } from "../elements/sidebar.tsx"
+import type { RoutedSection } from "../models/section.ts"
 
 /** Changelog body slot for the Sidebar shell: All Releases / Recent Releases */
-export function SidebarReleases() {
+export function SidebarReleases(props: { section?: RoutedSection }) {
   const pathname = useLocation({ select: l => l.pathname })
 
-  const section = currentSection(`/${pathname.replace(/^\/|\/$/g, "")}/`)
+  const section = props.section ?? currentSection(`/${pathname.replace(/^\/|\/$/g, "")}/`)
   const flat = section ? (sectionFlatArticles.get(section.prefix) ?? []) : []
   const entries = flat
     .map(p => sortedArticles.find(a => a.path === p))

package/source/components/SidebarSectionPicker.tsx

@@ -0,0 +1,70 @@
+import { config } from "livemark:virtual"
+import { ChevronDownIcon } from "lucide-react"
+import { DynamicIcon } from "../helpers/dynamic-icon.tsx"
+import { prefixUrl } from "../helpers/prefix-url.ts"
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+} from "../elements/sidebar.tsx"
+import type { RoutedSection, Section } from "../models/section.ts"
+import { MenuSheet } from "./MenuSheet.tsx"
+
+/** Mobile Sections group: a select-like trigger opening a bottom sheet that swaps the
+ * sidebar body to another section without navigating; custom sections still navigate
+ * to their URL. */
+export function SidebarSectionPicker(props: {
+  section: RoutedSection
+  onSelect: (section: RoutedSection) => void
+}) {
+  const sections = config.sections ?? []
+
+  const selectSection = (picked: Section) => {
+    if (picked.type === "custom") {
+      window.location.assign(prefixUrl(picked.url, config.base))
+      return
+    }
+    props.onSelect(picked)
+  }
+
+  return (
+    <SidebarGroup>
+      <SidebarGroupLabel className="uppercase font-mono text-xs tracking-widest">
+        Sections
+      </SidebarGroupLabel>
+      <SidebarGroupContent>
+        <MenuSheet
+          title="Choose section"
+          items={sections.map(s => ({
+            id: sectionKey(s),
+            label: s.title,
+            icon: s.icon ? <DynamicIcon name={s.icon} className="size-4" /> : undefined,
+            active: s.type !== "custom" && s.prefix === props.section.prefix,
+            onSelect: () => selectSection(s),
+          }))}
+          trigger={
+            <button
+              type="button"
+              aria-label="Section"
+              aria-haspopup="dialog"
+              className="flex h-9 w-full min-w-0 cursor-pointer items-center gap-2 rounded-control border border-input bg-transparent px-3 text-left text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 dark:bg-input/30 dark:hover:bg-input/50"
+            />
+          }
+        >
+          {props.section.icon && (
+            <DynamicIcon name={props.section.icon} className="size-4 shrink-0" />
+          )}
+          <span className="flex-1 truncate">{props.section.title}</span>
+          <ChevronDownIcon
+            className="size-4 shrink-0 text-muted-foreground"
+            aria-hidden="true"
+          />
+        </MenuSheet>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
+
+function sectionKey(section: Section) {
+  return section.type === "custom" ? `url:${section.url}` : section.prefix
+}

package/source/components/SiteTitle.tsx

@@ -14,11 +14,11 @@ export function SiteTitle() {
   const description = section?.siteDescription ?? config.description
   const logo = prefixUrl(config.logo ?? defaultLogo, config.base)
   return (
-    <div className="flex items-end gap-2.5 text-sm">
-      <img src={logo} alt={title} className="size-6.5 mb-1.25" />
-      <div className="flex flex-col gap-0.5 leading-none">
-        <span className="font-semibold">{title}</span>
-        <span className="text-xs opacity-80">{description}</span>
+    <div className="flex min-w-0 items-end gap-2.5 text-sm">
+      <img src={logo} alt={title} className="size-6.5 mb-1.25 shrink-0" />
+      <div className="flex min-w-0 flex-col gap-0.5 leading-none">
+        <span className="truncate font-semibold">{title}</span>
+        <span className="truncate text-xs opacity-80">{description}</span>
       </div>
     </div>
   )

package/source/components/SoundCloud.tsx

@@ -3,7 +3,7 @@ export function SoundCloud(props: { url: string }) {
   const src = `https://w.soundcloud.com/player/?url=${encodeURIComponent(props.url)}&color=%23ff5500&auto_play=false&hide_related=true&show_comments=false&show_user=true&show_reposts=false&show_teaser=false`
 
   return (
-    <div className="not-prose my-4 overflow-hidden rounded-lg border">
+    <div className="not-prose my-4 overflow-hidden rounded-card border">
       <iframe
         className="w-full"
         height={166}

package/source/components/TagIndex.tsx

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

package/source/components/Theme.tsx

@@ -1,39 +1,65 @@
-import { Moon, Sun } from "lucide-react"
+import { Moon, Sun, SunMoon } from "lucide-react"
 import { useHotkey } from "@tanstack/react-hotkeys"
+import { useState } from "react"
 import { Button } from "../elements/button.tsx"
-import { getCurrentTheme, setTheme } from "../helpers/theme.ts"
+import type { ThemePref } from "../helpers/theme.ts"
+import { getCurrentTheme, getThemePref, setTheme } from "../helpers/theme.ts"
+import { MenuSheet } from "./MenuSheet.tsx"
 
+/** Header menu choosing light, dark or system theme; "T" flips light and dark */
 export function Theme() {
-  const handleToggle = () => {
-    const oldTheme = getCurrentTheme()
-    const newTheme = oldTheme === "light" ? "dark" : "light"
-    setTheme(newTheme)
-  }
+  // Read as the menu opens: on the server there is no stored preference to read.
+  const [current, setCurrent] = useState<ThemePref>("system")
+
+  useHotkey("T", () => setTheme(getCurrentTheme() === "light" ? "dark" : "light"))
 
-  useHotkey("T", handleToggle)
+  const choose = (pref: ThemePref) => {
+    setCurrent(pref)
+    setTheme(pref)
+  }
 
   return (
-    <Button
-      variant="ghost"
-      size="sm"
-      onClick={handleToggle}
-      title="Change Theme"
-      className="w-full h-auto rounded-xl cursor-pointer text-xs font-normal justify-start text-muted-foreground bg-sidebar-accent/70 border border-border shadow-xs hover:!bg-background px-3 py-2"
+    <MenuSheet
+      title="Change theme"
+      onOpenChange={open => open && setCurrent(getThemePref())}
+      items={[
+        {
+          id: "light",
+          label: "Light",
+          icon: <Sun className="size-4 shrink-0" />,
+          active: current === "light",
+          onSelect: () => choose("light"),
+        },
+        {
+          id: "dark",
+          label: "Dark",
+          icon: <Moon className="size-4 shrink-0" />,
+          active: current === "dark",
+          onSelect: () => choose("dark"),
+        },
+        {
+          id: "system",
+          label: "System",
+          icon: <SunMoon className="size-4 shrink-0" />,
+          active: current === "system",
+          onSelect: () => choose("system"),
+        },
+      ]}
+      trigger={
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          title="Change theme"
+          aria-label="Change theme"
+          aria-keyshortcuts="T"
+          className="cursor-pointer text-muted-foreground"
+        />
+      }
     >
-      <div className="flex flex-1 gap-2 items-center dark:hidden">
-        <Sun className="size-4" />
-        <span className="flex-1 text-left">Light Theme</span>
-        <kbd className="rounded border border-border bg-muted px-1.5 py-0.5 text-[10px] font-mono">
-          T
-        </kbd>
-      </div>
-      <div className="flex-1 gap-2 items-center hidden dark:flex">
-        <Moon className="size-4" />
-        <span className="flex-1 text-left">Dark Theme</span>
-        <kbd className="rounded border border-border bg-muted px-1.5 py-0.5 text-[10px] font-mono">
-          T
-        </kbd>
-      </div>
-    </Button>
+      {/* Swapped on the `.dark` class rather than on state, so the server render
+          matches: no hydration mismatch, no wrong-icon flash. */}
+      <Sun className="size-4 dark:hidden" />
+      <Moon className="hidden size-4 dark:block" />
+    </MenuSheet>
   )
 }