livemark 0.25.0 → 0.26.0

package/source/components/LinkButton.tsx

@@ -5,7 +5,15 @@ import { cn } from "cn"
 export function LinkButton(props: {
   href: string
   label: string
-  variant?: "default" | "outline" | "secondary" | "ghost" | "destructive" | "link"
+  variant?:
+    | "default"
+    | "outline"
+    | "secondary"
+    | "ghost"
+    | "positive"
+    | "warning"
+    | "destructive"
+    | "link"
   size?: "default" | "sm" | "lg"
 }) {
   return (

package/source/components/MenuSheet.tsx

@@ -0,0 +1,92 @@
+import { CheckIcon } from "lucide-react"
+import { cloneElement, useState, type ReactElement, type ReactNode } from "react"
+import { cn } from "cn"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../elements/dropdown-menu.tsx"
+import { useIsMobile } from "../hooks/media.ts"
+import { SheetPanel } from "./SheetPanel.tsx"
+
+/** One row of a `MenuSheet` */
+export type MenuSheetItem = {
+  id: string
+  label: ReactNode
+  icon?: ReactNode
+  active?: boolean
+  onSelect?: () => void
+}
+
+/** A menu that is an anchored dropdown from a laptop up and a bottom sheet on a
+ * phone */
+export function MenuSheet(props: {
+  trigger: ReactElement<{ onClick?: () => void; children?: ReactNode }>
+  children?: ReactNode
+  title: ReactNode
+  items: MenuSheetItem[]
+  align?: "start" | "end"
+  onOpenChange?: (open: boolean) => void
+}) {
+  const isMobile = useIsMobile()
+  const [open, setOpen] = useState(false)
+  const changeOpen = (next: boolean) => {
+    setOpen(next)
+    props.onOpenChange?.(next)
+  }
+
+  if (isMobile) {
+    return (
+      <>
+        {cloneElement(props.trigger, { onClick: () => changeOpen(true) }, props.children)}
+        <SheetPanel open={open} onOpenChange={changeOpen} title={props.title}>
+          <ul className="flex w-full min-w-0 flex-col gap-1">
+            {props.items.map(item => (
+              <li key={item.id}>
+                <button
+                  type="button"
+                  className={cn(ROW, item.active && ROW_ACTIVE)}
+                  onClick={() => {
+                    item.onSelect?.()
+                    changeOpen(false)
+                  }}
+                >
+                  {item.icon}
+                  <span className="flex-1 truncate">{item.label}</span>
+                  {item.active && <CheckIcon className="size-4 shrink-0" />}
+                </button>
+              </li>
+            ))}
+          </ul>
+        </SheetPanel>
+      </>
+    )
+  }
+
+  return (
+    <DropdownMenu onOpenChange={props.onOpenChange}>
+      {/* Without a `render`, Base UI's trigger falls back to a bare <button> — which
+          SSR paints on a phone until `useIsMobile` flips, flashing a stray icon. */}
+      <DropdownMenuTrigger render={props.trigger}>{props.children}</DropdownMenuTrigger>
+      <DropdownMenuContent align={props.align ?? "end"}>
+        {props.items.map(item => (
+          <DropdownMenuItem
+            key={item.id}
+            onClick={item.onSelect}
+            className="cursor-pointer gap-2"
+          >
+            {item.icon}
+            <span className={item.active ? "font-medium" : undefined}>{item.label}</span>
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+const ROW =
+  "hover:bg-muted active:bg-muted flex h-10 w-full items-center gap-2.5 overflow-hidden rounded-md p-2 text-left text-base outline-hidden [&_svg]:size-[18px] [&_svg]:shrink-0"
+
+const ROW_ACTIVE =
+  "bg-sidebar-accent text-sidebar-accent-foreground font-semibold [&_svg]:stroke-[2.5]"

package/source/components/MermaidRenderer.tsx

@@ -3,6 +3,10 @@ import mermaid from "mermaid"
 
 mermaid.initialize({ startOnLoad: false })
 
+// Module-wide so runs never overlap, even across effect re-runs: overlapping runs on
+// one node reject with "reading 'firstChild'".
+let renderQueue = Promise.resolve()
+
 /** Renders a Mermaid diagram from a chart definition string */
 export default function MermaidRenderer(props: { children: string }) {
   const ref = useRef<HTMLDivElement>(null)
@@ -12,14 +16,21 @@ export default function MermaidRenderer(props: { children: string }) {
     if (!el) return
 
     const render = () => {
-      const isDark = document.documentElement.classList.contains("dark")
-      mermaid.initialize({
-        startOnLoad: false,
-        theme: isDark ? "dark" : "default",
-      })
-      el.textContent = props.children
-      el.removeAttribute("data-processed")
-      mermaid.run({ nodes: [el] })
+      renderQueue = renderQueue
+        .then(() => {
+          if (!el.isConnected) return
+          const isDark = document.documentElement.classList.contains("dark")
+          mermaid.initialize({
+            startOnLoad: false,
+            theme: isDark ? "dark" : "default",
+          })
+          el.textContent = props.children
+          el.removeAttribute("data-processed")
+          return mermaid.run({ nodes: [el] })
+        })
+        .catch(error => {
+          if (el.isConnected) console.error(error)
+        })
     }
 
     render()

package/source/components/NotFound.tsx

@@ -1,4 +1,5 @@
 import { Link } from "@tanstack/react-router"
+import { buttonVariants } from "../elements/button.tsx"
 
 export function NotFound({ children }: { children?: any }) {
   return (
@@ -11,14 +12,11 @@ export function NotFound({ children }: { children?: any }) {
         <button
           type="button"
           onClick={() => window.history.back()}
-          className="bg-primary text-primary-foreground px-4 py-2 text-sm font-medium hover:bg-primary/80 transition-colors"
+          className={buttonVariants({ size: "lg" })}
         >
           Go Back
         </button>
-        <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>
       </div>

package/source/components/PackageTabs.tsx

@@ -31,7 +31,7 @@ export function PackageTabs(props: PackageTabsProps) {
   }
 
   return (
-    <figure className="not-prose my-4 relative rounded-xl border shadow-sm overflow-hidden text-sm bg-sidebar dark:bg-sidebar">
+    <figure className="not-prose my-4 relative rounded-card border shadow-sm overflow-hidden text-sm bg-sidebar dark:bg-sidebar">
       <div className="flex items-center border-b">
         <div className="flex flex-1 items-center">
           {managers.map(pm => (
@@ -52,7 +52,7 @@ export function PackageTabs(props: PackageTabsProps) {
         <button
           type="button"
           onClick={handleCopy}
-          className="me-2 p-1 rounded-md text-muted-foreground hover:text-foreground transition-colors"
+          className="me-2 p-1 rounded-control text-muted-foreground hover:text-foreground transition-colors"
           aria-label="Copy code"
         >
           {copied ? <Check className="size-3.5" /> : <Clipboard className="size-3.5" />}

package/source/components/PageToolbar.tsx

@@ -37,13 +37,13 @@ export function PageToolbar(props: {
 
   return (
     <>
-      <div className="mb-6 flex flex-col gap-2 text-sm">
-        <p className="text-sm font-medium mb-1">Actions</p>
+      <div data-slot="page-toolbar" className="flex flex-col gap-2 text-sm">
         {sourceHref ? (
           <a
             href={sourceHref}
             target="_blank"
             rel="noopener noreferrer"
+            data-slot="page-action"
             className={buttonClass}
           >
             <SourceIcon className="size-3.5" />
@@ -51,6 +51,7 @@ export function PageToolbar(props: {
           </a>
         ) : (
           <span
+            data-slot="page-action"
             className={`${buttonClass} opacity-50 cursor-not-allowed hover:text-muted-foreground`}
             aria-disabled="true"
           >
@@ -58,13 +59,19 @@ export function PageToolbar(props: {
             {sourceLabel}
           </span>
         )}
-        <button type="button" onClick={handleCopy} className={buttonClass}>
+        <button
+          type="button"
+          onClick={handleCopy}
+          data-slot="page-action"
+          className={buttonClass}
+        >
           {copied ? <Check className="size-3.5" /> : <Copy className="size-3.5" />}
           Copy Markdown
         </button>
         <button
           type="button"
           onClick={() => openIn("https://chatgpt.com/", { hints: "search" })}
+          data-slot="page-action"
           className={buttonClass}
         >
           <ExternalLink className="size-3.5" />
@@ -73,6 +80,7 @@ export function PageToolbar(props: {
         <button
           type="button"
           onClick={() => openIn("https://claude.ai/new")}
+          data-slot="page-action"
           className={buttonClass}
         >
           <ExternalLink className="size-3.5" />

package/source/components/PrevNext.tsx

@@ -29,7 +29,7 @@ export function PrevNext(props: { path: string }) {
         <Link
           to="/$"
           params={{ _splat: prev.path.replace(/^\/|\/$/g, "") }}
-          className="flex-1 rounded-xl border shadow-sm p-4 hover:bg-muted/50 transition-colors"
+          className="flex-1 rounded-card border shadow-sm p-4 hover:bg-muted/50 transition-colors"
         >
           <span className="flex items-center gap-1 text-sm text-muted-foreground">
             <ChevronLeft className="size-4" />
@@ -42,7 +42,7 @@ export function PrevNext(props: { path: string }) {
         <Link
           to="/$"
           params={{ _splat: next.path.replace(/^\/|\/$/g, "") }}
-          className="flex-1 rounded-xl border shadow-sm p-4 hover:bg-muted/50 transition-colors text-right"
+          className="flex-1 rounded-card border shadow-sm p-4 hover:bg-muted/50 transition-colors text-right"
         >
           <span className="flex items-center justify-end gap-1 text-sm text-muted-foreground">
             Next

package/source/components/Root.tsx

@@ -0,0 +1,13 @@
+import { useHotkey } from "@tanstack/react-hotkeys"
+
+/** Headless wrapper around every route; pages add their own chrome with `Layout` */
+export function Root(props: { children?: React.ReactNode }) {
+  useHotkey("J", () =>
+    window.scrollBy({ top: window.innerHeight * 0.8, behavior: "smooth" }),
+  )
+  useHotkey("K", () =>
+    window.scrollBy({ top: -window.innerHeight * 0.8, behavior: "smooth" }),
+  )
+
+  return props.children
+}

package/source/components/Search.tsx

@@ -1,27 +1,47 @@
 import { useState } from "react"
 import { useHotkey } from "@tanstack/react-hotkeys"
 import { Search as SearchIcon } from "lucide-react"
+import { cn } from "cn"
+import { isMobileNow } from "../hooks/media.ts"
+import { HeaderSearch } from "./HeaderSearch.tsx"
 import { SearchDialog } from "./SearchDialog.tsx"
 
-/** Search button with "/" keyboard shortcut and command palette dialog */
-export function Search() {
+/** Search button with "S" keyboard shortcut: a command palette from `lg`, an in-header field below.
+ * `compact` keeps it an icon from `lg` too, when header sections need the room */
+export function Search(props: { compact?: boolean }) {
   const [open, setOpen] = useState(false)
+  const [headerOpen, setHeaderOpen] = useState(false)
+  const openSearch = () => (isMobileNow() ? setHeaderOpen(true) : setOpen(true))
 
-  useHotkey("/", () => setOpen(true))
+  useHotkey("S", openSearch)
 
   return (
     <>
       <button
         type="button"
-        onClick={() => setOpen(true)}
-        className="flex w-full items-center gap-2 rounded-xl border border-border bg-sidebar-accent/70 px-3 py-2 text-sm text-muted-foreground shadow-xs hover:bg-background transition-colors cursor-pointer"
+        onClick={openSearch}
+        aria-label="Search"
+        aria-keyshortcuts="S"
+        title="Search"
+        className={cn(
+          "flex h-9 items-center gap-2 rounded-control border border-border bg-muted/50 px-2.5 text-sm text-muted-foreground shadow-xs hover:bg-muted transition-colors cursor-pointer",
+          !props.compact && "lg:w-56",
+        )}
       >
         <SearchIcon className="size-4" />
-        <span className="flex-1 text-left">Search...</span>
-        <kbd className="rounded border border-border bg-muted px-1.5 py-0.5 text-[10px] font-mono">
-          /
+        <span className={cn("hidden flex-1 text-left", !props.compact && "lg:inline")}>
+          Search...
+        </span>
+        <kbd
+          className={cn(
+            "hidden rounded border border-border bg-background px-1.5 py-0.5 text-[10px] font-mono",
+            !props.compact && "lg:inline",
+          )}
+        >
+          S
         </kbd>
       </button>
+      {headerOpen && <HeaderSearch onClose={() => setHeaderOpen(false)} />}
       <SearchDialog open={open} onOpenChange={setOpen} />
     </>
   )

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>
+  )
+}