livemark 0.25.0 → 0.26.0

package/source/plugins/vite-livemark.ts

@@ -1,9 +1,11 @@
-import { cpSync, existsSync, rmSync } from "node:fs"
+import { cpSync, existsSync, rmSync, statSync } from "node:fs"
 import { join, sep } from "node:path"
-import { watch as chokidarWatch } from "chokidar"
-import type { ConfigEnv, Plugin, UserConfig as ViteUserConfig, ViteDevServer } from "vite"
+import type { ConfigEnv, Plugin, UserConfig as ViteUserConfig } from "vite"
 import { mergeConfig } from "vite"
+import packageJson from "../../package.json" with { type: "json" }
 import { buildTarget } from "../actions/target/build.ts"
+import { renderInlineMarkdown } from "../helpers/render-inline-markdown.ts"
+import { resolveTargetExport } from "../helpers/target-export.ts"
 import type { Config } from "../models/config.ts"
 import { WebsiteConfig } from "../models/config.ts"
 import { ESCAPABLE_FILES, ESCAPABLE_FOLDERS } from "../settings.ts"
@@ -13,13 +15,15 @@ export interface LivemarkOptions {
 }
 
 const SOURCE_DIR = join(import.meta.dirname, "..")
+const IS_INSTALLED = SOURCE_DIR.includes(`${sep}node_modules${sep}`)
 
 /** Single virtual module exposing livemark's runtime values to consumer
  *  override files via named exports:
  *
  *      import { config } from "livemark:virtual"
  *
- *  Currently exports `config` (validated `WebsiteConfig`); future
+ *  Currently exports `config` (validated `WebsiteConfig`) and `bannerHtml`
+ *  (`config.banner` rendered from inline Markdown at build time); future
  *  additions (e.g. `articles`, `sections`) land here as new named
  *  exports without consumers changing their import statements.
  *
@@ -29,33 +33,36 @@ const SOURCE_DIR = join(import.meta.dirname, "..")
 const VIRTUAL_ID = "livemark:virtual"
 const VIRTUAL_RESOLVED_ID = `\0${VIRTUAL_ID}`
 
-/** Owns the per-consumer `targets/<hash>/` mount: synthesizes it via
+/** Owns the project's `.livemark/.target/` mount: synthesizes it via
  *  `buildTarget()`, returns the Vite config that anchors there, and
- *  watches the consumer's `.livemark/` (plus livemark's `source/` in
- *  dev) for changes that need to be re-copied into the target. The
- *  override mechanism is pure file-system (full copies) — no resolveId
- *  redirection, no realpath surprises. */
+ *  copies `.livemark/` edits (plus livemark's `source/` in its own dev)
+ *  into the target. Vite watches the target natively, so its own HMR
+ *  decides between Fast Refresh, CSS updates and a page reload. */
 export function livemark(opts: LivemarkOptions): Plugin {
   const overridesRoot = join(opts.config.root, ".livemark")
+  const outDir = join(overridesRoot, "build")
   let targetDir = ""
   return {
     name: "livemark",
     enforce: "pre",
     async config(_, env) {
-      targetDir = buildTarget(opts.config.configPath)
+      targetDir = buildTarget({
+        configPath: opts.config.configPath,
+        sourceDir: SOURCE_DIR,
+      })
       const base: ViteUserConfig = {
         root: targetDir,
+        // The default `<root>/node_modules/.vite` would land inside the
+        // dependency link, i.e. in livemark's shared install.
+        cacheDir: join(targetDir, ".vite"),
         // Mount everything (asset URLs, modulepreloads, dev server) under
         // `config.base` so the same build works at root or at a sub-path
         // (e.g. GitHub Pages `https://user.github.io/repo/`). The router
         // and asset-path resolver mirror this at runtime.
         base: opts.config.base ? `${opts.config.base}/` : "/",
-        // outDir lives outside the target root (in the consumer's
-        // .livemark/) so the consumer can find their deployable output
-        // without digging into node_modules. Vite's default refusal to
-        // empty out-of-root directories doesn't apply here because the
-        // target/ root is livemark's, not the consumer's.
-        build: { outDir: join(overridesRoot, "build"), emptyOutDir: true },
+        // outDir lives outside the target root, so Vite's refusal to
+        // empty out-of-root directories needs `emptyOutDir`.
+        build: { outDir, emptyOutDir: true },
         resolve: { dedupe: ["react", "react-dom"] },
         // For the SSR build only, inline every node_modules dep into
         // server.js. The prerender step (which runs server.js with
@@ -72,62 +79,44 @@ export function livemark(opts: LivemarkOptions): Plugin {
     },
     resolveId(id) {
       if (id === VIRTUAL_ID) return VIRTUAL_RESOLVED_ID
-      return null
+      return resolveTargetExport({ id, targetDir, exports: packageJson.exports }) ?? null
     },
     load(id) {
       if (id !== VIRTUAL_RESOLVED_ID) return null
       const config = WebsiteConfig.parse(opts.config)
-      return `export const config = ${JSON.stringify(config)}`
+      const bannerHtml = config.banner
+        ? renderInlineMarkdown(config.banner, config.base)
+        : undefined
+      return [
+        `export const config = ${JSON.stringify(config)}`,
+        `export const bannerHtml = ${JSON.stringify(bannerHtml)}`,
+      ].join("\n")
     },
     configureServer(server) {
-      // Two reasons we don't use Vite's own `server.watcher`:
-      //   1. Vite 8 bundles chokidar 3 with `disableGlobbing: true`, and
-      //      paths added via `server.watcher.add()` for surfaces outside
-      //      Vite's root never fire — getWatched() reports them but no
-      //      events arrive for external editors.
-      //   2. Vite's chokidar ignores `**\/node_modules/**` by default, so
-      //      even if (1) were fixed, our targetDir (which lives inside
-      //      livemark's own node_modules in consumer projects) would be
-      //      silently filtered. We emit the change event manually onto
-      //      `server.watcher` after cpSync — see {@link notifyVite}.
-      // A dedicated chokidar 5 watcher set up directly on these paths
-      // fires reliably; we forward events into Vite's HMR pipeline below.
-      const overlayPaths: string[] = []
-      for (const folder of ESCAPABLE_FOLDERS) {
-        overlayPaths.push(join(overridesRoot, folder))
-      }
-      for (const file of ESCAPABLE_FILES) {
-        overlayPaths.push(join(overridesRoot, file))
-      }
-      const watcher = chokidarWatch(
-        [opts.config.configPath, ...overlayPaths, SOURCE_DIR],
-        { ignoreInitial: true, ignorePermissionErrors: true },
-      )
-      watcher.on("change", file => onChange(file, "change"))
-      watcher.on("add", file => onChange(file, "add"))
-      watcher.on("unlink", file => onChange(file, "unlink"))
-      const closeWatcher = () => {
-        watcher.close()
-      }
-      server.httpServer?.once("close", closeWatcher)
+      // Vite watches only its root (the target); the files the target is
+      // copied from join its watcher here. `.livemark/` always exists
+      // because the target lives inside it.
+      server.watcher.add([opts.config.configPath, overridesRoot])
+      if (!IS_INSTALLED) server.watcher.add(SOURCE_DIR)
+      server.watcher.on("change", file => onChange(file, "change"))
+      server.watcher.on("add", file => onChange(file, "add"))
+      server.watcher.on("unlink", file => onChange(file, "unlink"))
+      server.watcher.on("unlinkDir", file => onChange(file, "unlink"))
 
       function onChange(file: string, kind: "change" | "add" | "unlink") {
         if (file === opts.config.configPath) {
           server.restart()
           return
         }
-        const overlayHit = matchOverlay(file, overridesRoot)
+        if (isWithin(file, targetDir) || isWithin(file, outDir)) return
+        const overlayHit = matchPath(file, overridesRoot)
         if (overlayHit) {
           syncOverlay(overlayHit, kind, targetDir, overridesRoot)
-          notifyVite(server, join(targetDir, overlayHit.rel), kind)
-          if (kind !== "change") fullReload(server)
           return
         }
-        const sourceHit = matchSource(file)
-        if (sourceHit) {
+        const sourceHit = matchPath(file, SOURCE_DIR)
+        if (sourceHit && !sourceHit.rel.includes("routeTree.gen.ts")) {
           syncSource(sourceHit, kind, targetDir, overridesRoot)
-          notifyVite(server, join(targetDir, sourceHit.rel), kind)
-          if (kind !== "change") fullReload(server)
         }
       }
     },
@@ -139,21 +128,14 @@ interface Hit {
   category: "folder" | "file" | null
 }
 
-function matchOverlay(file: string, overridesRoot: string): Hit | null {
-  const prefix = `${overridesRoot}${sep}`
-  if (!file.startsWith(prefix)) return null
-  const rel = file.slice(prefix.length)
+function matchPath(file: string, root: string): Hit | null {
+  if (!isWithin(file, root) || file === root) return null
+  const rel = file.slice(root.length + sep.length)
   return { rel, category: classify(rel) }
 }
 
-function matchSource(file: string): Hit | null {
-  const prefix = `${SOURCE_DIR}${sep}`
-  if (!file.startsWith(prefix)) return null
-  // Skip the targets/ output dir itself (sibling of source/) and any
-  // `.gen.ts` files that downstream tools regenerate inside the target.
-  const rel = file.slice(prefix.length)
-  if (rel === "" || rel.includes("routeTree.gen.ts")) return null
-  return { rel, category: classify(rel) }
+function isWithin(file: string, dir: string) {
+  return file === dir || file.startsWith(`${dir}${sep}`)
 }
 
 function classify(rel: string): "folder" | "file" | null {
@@ -175,7 +157,11 @@ function syncOverlay(
   const dest = join(targetDir, hit.rel)
   const source = join(SOURCE_DIR, hit.rel)
   if (kind === "unlink") {
-    rmSync(dest, { force: true, recursive: true })
+    // Copy a file's default over the escape in one write: an unlink then
+    // an add reaches Vite as two events and costs a page reload.
+    if (!existsSync(source) || statSync(source).isDirectory()) {
+      rmSync(dest, { force: true, recursive: true })
+    }
     if (existsSync(source)) cpSync(source, dest, { recursive: true, force: true })
     return
   }
@@ -201,33 +187,6 @@ function syncSource(
   if (existsSync(source)) cpSync(source, dest, { recursive: true, force: true })
 }
 
-function fullReload(server: ViteDevServer) {
-  server.ws.send({ type: "full-reload" })
-}
-
-/** Drive Vite's HMR pipeline manually for a target file we just synced.
- *  Vite's chokidar ignores `**\/node_modules/**` by default and our
- *  targetDir lives inside livemark's own node_modules in consumer
- *  projects, so cpSync writes there are silently filtered out.
- *
- *  Emitting on `server.watcher` runs Vite's HMR analysis per environment
- *  (CSS gets `hmr update`, route modules trigger `(ssr) page reload`).
- *  But `(ssr) page reload` only sends `full-reload` on the SSR
- *  environment's hot channel — the browser is connected to the *client*
- *  channel and never sees it. So we also fire `full-reload` on the
- *  client hot directly, which is what TanStack Start needs for route
- *  edits to actually refresh the page. CSS HMR still works because
- *  Vite's analysis runs first and updates already-flushed before our
- *  reload. */
-function notifyVite(
-  server: ViteDevServer,
-  targetFile: string,
-  kind: "change" | "add" | "unlink",
-) {
-  server.watcher.emit(kind, targetFile)
-  server.environments.client.hot.send({ type: "full-reload" })
-}
-
 /** Resolve livemark.config.ts's `vite` field — either a config object
  *  or a function `(env) => config` (matching Vite's own `defineConfig`).
  *  Schema stores it as `unknown`; typing for the consumer's editor

package/source/program.ts

@@ -1,5 +1,6 @@
 import { Command } from "commander"
 import { build } from "./commands/build.ts"
+import { clear } from "./commands/clear.ts"
 import { escape } from "./commands/escape.ts"
 import { preview } from "./commands/preview.ts"
 import { start } from "./commands/start.ts"
@@ -16,3 +17,4 @@ export const program = new Command()
   .addCommand(build)
   .addCommand(preview)
   .addCommand(escape)
+  .addCommand(clear)

package/source/routes/$.tsx

@@ -1,4 +1,6 @@
+import { config } from "livemark:virtual"
 import { createFileRoute, notFound, redirect } from "@tanstack/react-router"
+import { z } from "zod"
 import {
   currentSection,
   firstArticle,
@@ -6,12 +8,16 @@ import {
   sortedArticles,
 } from "../content/article.ts"
 import { sectionTags } from "../content/tag.ts"
+import { buildPageHead } from "../helpers/head.ts"
 import { Article } from "../components/Article.tsx"
 import { BlogIndex } from "../components/BlogIndex.tsx"
 import { ChangelogIndex } from "../components/ChangelogIndex.tsx"
+import { Layout } from "../components/Layout.tsx"
 import { TagIndex } from "../components/TagIndex.tsx"
 
 export const Route = createFileRoute("/$")({
+  // Loose, so keys this route does not own (UTM tags, devtools flags) survive.
+  validateSearch: z.looseObject({ highlight: z.string().optional().catch(undefined) }),
   loader: ({ params }) => {
     if (!params._splat) {
       if (homeArticle) return { ...homeArticle, sidebar: homeArticle.sidebar }
@@ -62,19 +68,31 @@ export const Route = createFileRoute("/$")({
 
     throw notFound()
   },
-  head: ({ loaderData }) => ({
-    meta: [
-      ...(loaderData ? [{ title: loaderData.title }] : []),
-      ...("description" in loaderData && loaderData.description
-        ? [{ name: "description", content: loaderData.description }]
-        : []),
-    ],
-  }),
+  head: ({ loaderData, params }) =>
+    buildPageHead({
+      config,
+      path: params._splat ? `/${params._splat}/` : "/",
+      title: loaderData?.title,
+      description:
+        loaderData && "description" in loaderData ? loaderData.description : undefined,
+      image: loaderData && "image" in loaderData ? loaderData.image : undefined,
+      isArticle: loaderData && "file" in loaderData,
+    }),
   component: Component,
 })
 
 function Component() {
   const data = Route.useLoaderData()
+  return (
+    <Layout withSidebar={data.sidebar}>
+      <Page />
+    </Layout>
+  )
+}
+
+function Page() {
+  const data = Route.useLoaderData()
+  const search = Route.useSearch()
   if ("blogIndex" in data) {
     return <BlogIndex sectionPrefix={data.sectionPrefix} />
   }
@@ -84,5 +102,5 @@ function Component() {
   if ("tagPage" in data) {
     return <TagIndex sectionPrefix={data.sectionPrefix} tag={data.tag} />
   }
-  return <Article article={data} />
+  return <Article article={data} highlight={search.highlight} />
 }

package/source/routes/__root.tsx

@@ -1,72 +1,39 @@
 import { config } from "livemark:virtual"
 import { TanStackDevtools } from "@tanstack/react-devtools"
 import { ReactQueryDevtoolsPanel } from "@tanstack/react-query-devtools"
-import {
-  createRootRoute,
-  HeadContent,
-  Outlet,
-  Scripts,
-  useMatch,
-} from "@tanstack/react-router"
+import { createRootRoute, HeadContent, Outlet, Scripts } from "@tanstack/react-router"
 import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools"
 import type * as React from "react"
+import { useEffect } from "react"
 import { Layout } from "../components/Layout.tsx"
+import { Root } from "../components/Root.tsx"
 import { DefaultCatchBoundary } from "../components/DefaultCatchBoundary.tsx"
 import { NotFound } from "../components/NotFound.tsx"
+import { useHydrated } from "../hooks/hydrated.ts"
 import { Toaster } from "../elements/sonner.tsx"
-import { faviconType } from "../helpers/favicon.ts"
-import { prefixUrl } from "../helpers/prefix-url.ts"
+import { buildRootHead } from "../helpers/head.ts"
+import { startTheme } from "../helpers/theme.ts"
+import { customizeHead } from "../head.ts"
 import defaultFavicon from "../assets/logo.svg"
 import generalCss from "../styles/general.css?url"
 import markdownCss from "../styles/markdown.css?url"
 
 export const Route = createRootRoute({
-  head: () => {
-    const favicon = prefixUrl(
-      config.favicon ?? config.logo ?? defaultFavicon,
-      config.base,
-    )
-    const feedLinks = config.site
-      ? (config.sections ?? [])
-          .filter(s => s.type === "blog")
-          .map(s => ({
-            rel: "alternate",
-            type: "application/rss+xml",
-            title: `${s.siteTitle ?? s.title} RSS Feed`,
-            href: prefixUrl(`${s.prefix}rss.xml`, config.base),
-          }))
-      : []
-    return {
-      meta: [
-        { charSet: "utf-8" },
-        { title: config.title },
-        { name: "description", content: config.description },
-        { property: "og:title", content: config.title },
-        {
-          property: "og:description",
-          content: config.description,
-        },
-        { property: "og:site_name", content: config.title },
-        { property: "og:type", content: "website" },
-        {
-          name: "viewport",
-          content: "width=device-width, initial-scale=1",
-        },
-      ],
-      links: [
-        { rel: "icon", href: favicon, type: faviconType(favicon) },
-        { rel: "shortcut icon", href: favicon, type: faviconType(favicon) },
-        { rel: "stylesheet", href: generalCss },
-        { rel: "stylesheet", href: markdownCss },
-        ...feedLinks,
-      ],
-    }
-  },
-  notFoundComponent: () => <NotFound />,
+  head: () =>
+    customizeHead(
+      buildRootHead({ config, defaultFavicon, stylesheets: [generalCss, markdownCss] }),
+    ),
+  notFoundComponent: () => (
+    <Layout>
+      <NotFound />
+    </Layout>
+  ),
   errorComponent: props => {
     return (
       <Document>
-        <DefaultCatchBoundary {...props} />
+        <Layout>
+          <DefaultCatchBoundary {...props} />
+        </Layout>
       </Document>
     )
   },
@@ -80,32 +47,45 @@ export const Route = createRootRoute({
 })
 
 function Document(props: { children: React.ReactNode }) {
-  const articleRoute = useMatch({ from: "/$", shouldThrow: false })
-  const withSidebar = articleRoute?.loaderData?.sidebar
+  // Off the raw URL, not the router's parsed search: a route whose validateSearch
+  // does not declare this key strips it.
+  const hydrated = useHydrated()
+  const devtools = hydrated && window.location.search.includes("tanstack-devtools")
+
+  useEffect(startTheme, [])
 
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <head>
         <HeadContent />
       </head>
       <body>
-        <Layout withSidebar={withSidebar}>{props.children}</Layout>
+        <Root>{props.children}</Root>
         <Toaster position="top-center" />
-        <TanStackDevtools
-          config={{ hideUntilHover: true, position: "bottom-left" }}
-          plugins={[
-            {
-              name: "TanStack Query",
-              render: <ReactQueryDevtoolsPanel />,
-              defaultOpen: true,
-            },
-            {
-              name: "TanStack Router",
-              render: <TanStackRouterDevtoolsPanel />,
-              defaultOpen: false,
-            },
-          ]}
-        />
+        {/* Gated here, not by the devtools' own `requireUrlFlag`: that setting seeds
+            localStorage on a browser's first run and is read from there afterwards,
+            so a browser that loaded the site before it was set keeps the trigger. */}
+        {/* The build strips the devtools element alone; the fragment keeps
+            `devtools && (<></>)` valid instead of the syntax error `&& ()`. */}
+        {devtools && (
+          <>
+            <TanStackDevtools
+              config={{ requireUrlFlag: true, position: "bottom-left" }}
+              plugins={[
+                {
+                  name: "TanStack Query",
+                  render: <ReactQueryDevtoolsPanel />,
+                  defaultOpen: true,
+                },
+                {
+                  name: "TanStack Router",
+                  render: <TanStackRouterDevtoolsPanel />,
+                  defaultOpen: false,
+                },
+              ]}
+            />
+          </>
+        )}
         <Scripts />
       </body>
     </html>

package/source/settings.ts

@@ -14,6 +14,7 @@ export const ESCAPABLE_FILES: readonly string[] = [
   "client.tsx",
   "server.ts",
   "router.tsx",
+  "head.ts",
 ]
 
 /** Glob patterns auto-excluded from content scanning when the consumer's

package/source/styles/general.css

@@ -1,5 +1,6 @@
 @import "tailwindcss";
 @import "tw-animate-css";
+@import "./shape.css";
 @plugin "@tailwindcss/typography";
 
 @custom-variant dark (&:is(.dark *));
@@ -13,14 +14,28 @@
   --popover-foreground: oklch(0.145 0 0);
   --primary: oklch(54.6% 0.245 262.881);
   --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(89.4% 0.057 293.283);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
+  --secondary: oklch(54.1% 0.281 293.009);
+  --secondary-foreground: oklch(0.985 0 0);
+  --banner: oklch(89.4% 0.057 293.283);
+  --banner-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.985 0 0);
   --muted-foreground: oklch(0.5 0 0);
   --accent: oklch(0.97 0 0);
   --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --positive: oklch(0.648 0.2 131.684);
+  --positive-foreground: oklch(0.205 0 0);
+  --positive-tint: oklch(96.7% 0.067 122.328);
+  --positive-tint-foreground: oklch(53.2% 0.157 131.589);
+  --warning: oklch(79.5% 0.184 86.047);
+  --warning-foreground: oklch(0.205 0 0);
+  --warning-tint: oklch(97.3% 0.071 103.193);
+  --warning-tint-foreground: oklch(47.6% 0.114 61.907);
+  --highlight: oklch(90.5% 0.182 98.111);
+  --highlight-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.55 0.2 25);
+  --destructive-foreground: oklch(0.985 0 0);
+  --destructive-tint: oklch(93.6% 0.032 17.717);
+  --destructive-tint-foreground: oklch(50.5% 0.213 27.518);
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
   --ring: oklch(0.708 0 0);
@@ -30,7 +45,7 @@
   --chart-4: oklch(0.828 0.189 84.429);
   --chart-5: oklch(0.769 0.188 70.08);
   --radius: 0.625rem;
-  --sidebar: oklch(0.985 0 0);
+  --sidebar: var(--muted);
   --sidebar-foreground: oklch(0.145 0 0);
   --sidebar-primary: oklch(0.205 0 0);
   --sidebar-primary-foreground: oklch(0.985 0 0);
@@ -49,14 +64,28 @@
   --popover-foreground: oklch(0.985 0 0);
   --primary: oklch(0.623 0.214 259.815);
   --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.269 0 0);
+  --secondary: oklch(60.6% 0.25 292.717);
   --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
+  --banner: oklch(0.269 0 0);
+  --banner-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.205 0 0);
   --muted-foreground: oklch(0.708 0 0);
   --accent: oklch(0.269 0 0);
   --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.396 0.141 25.723);
-  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --positive: oklch(0.841 0.238 128.85);
+  --positive-foreground: oklch(0.205 0 0);
+  --positive-tint: oklch(27.4% 0.072 132.109);
+  --positive-tint-foreground: oklch(84.1% 0.238 128.85);
+  --warning: oklch(85.2% 0.199 91.936);
+  --warning-foreground: oklch(0.22 0.04 70);
+  --warning-tint: oklch(28.6% 0.066 53.813);
+  --warning-tint-foreground: oklch(85.2% 0.199 91.936);
+  --highlight: oklch(55.4% 0.135 66.442);
+  --highlight-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.7 0.17 25);
+  --destructive-foreground: oklch(0.2 0.03 25);
+  --destructive-tint: oklch(25.8% 0.092 26.042);
+  --destructive-tint-foreground: oklch(70.4% 0.191 22.216);
   --border: oklch(0.269 0 0);
   --input: oklch(0.269 0 0);
   --ring: oklch(0.439 0 0);
@@ -65,7 +94,7 @@
   --chart-3: oklch(0.769 0.188 70.08);
   --chart-4: oklch(0.627 0.265 303.9);
   --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
+  --sidebar: var(--muted);
   --sidebar-foreground: oklch(0.985 0 0);
   --sidebar-primary: oklch(0.488 0.243 264.376);
   --sidebar-primary-foreground: oklch(0.985 0 0);
@@ -86,12 +115,26 @@
   --color-primary-foreground: var(--primary-foreground);
   --color-secondary: var(--secondary);
   --color-secondary-foreground: var(--secondary-foreground);
+  --color-banner: var(--banner);
+  --color-banner-foreground: var(--banner-foreground);
   --color-muted: var(--muted);
   --color-muted-foreground: var(--muted-foreground);
   --color-accent: var(--accent);
   --color-accent-foreground: var(--accent-foreground);
+  --color-positive: var(--positive);
+  --color-positive-foreground: var(--positive-foreground);
+  --color-positive-tint: var(--positive-tint);
+  --color-positive-tint-foreground: var(--positive-tint-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-warning-tint: var(--warning-tint);
+  --color-warning-tint-foreground: var(--warning-tint-foreground);
+  --color-highlight: var(--highlight);
+  --color-highlight-foreground: var(--highlight-foreground);
   --color-destructive: var(--destructive);
   --color-destructive-foreground: var(--destructive-foreground);
+  --color-destructive-tint: var(--destructive-tint);
+  --color-destructive-tint-foreground: var(--destructive-tint-foreground);
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
@@ -122,6 +165,11 @@
     @apply bg-background text-foreground;
   }
 
+  ::highlight(search-match) {
+    background-color: var(--highlight);
+    color: var(--highlight-foreground);
+  }
+
   html {
     scroll-behavior: smooth;
     scrollbar-color: #ddd transparent;