@livemark/markdown 0.0.0-stage → 0.45.0

package/source/models/message.ts

@@ -0,0 +1,96 @@
+import { z } from "zod"
+
+/** UI strings; each default is the English text, so `Messages.parse({})` is English. */
+export type Messages = z.infer<typeof Messages>
+export const Messages = z.strictObject({
+  "nav.docs": z.string().default("Docs"),
+  "nav.more": z.string().default("More"),
+  "nav.navigation": z.string().default("Navigation"),
+  "nav.chooseSection": z.string().default("Choose section"),
+  "nav.section": z.string().default("Section"),
+  "nav.toggleSubmenu": z.string().default("Toggle {title} submenu"),
+  "nav.previous": z.string().default("Previous"),
+  "nav.next": z.string().default("Next"),
+  "nav.backToTop": z.string().default("Back to top"),
+  "nav.close": z.string().default("Close"),
+  "nav.sections": z.string().default("Sections"),
+  "nav.articles": z.string().default("Articles"),
+  "nav.links": z.string().default("Links"),
+  "nav.releases": z.string().default("Releases"),
+  "nav.posts": z.string().default("Posts"),
+  "nav.tags": z.string().default("Tags"),
+  "nav.breadcrumbs": z.string().default("Breadcrumbs"),
+  "language.choose": z.string().default("Choose language"),
+  "language.untranslated": z.string().default("Not translated yet"),
+  "theme.change": z.string().default("Change theme"),
+  "theme.light": z.string().default("Light"),
+  "theme.dark": z.string().default("Dark"),
+  "theme.system": z.string().default("System"),
+  "shortcuts.title": z.string().default("Keyboard shortcuts"),
+  "shortcuts.search": z.string().default("Search"),
+  "shortcuts.theme": z.string().default("Toggle theme"),
+  "shortcuts.sidebar": z.string().default("Toggle sidebar"),
+  "shortcuts.scrollDown": z.string().default("Scroll down"),
+  "shortcuts.scrollUp": z.string().default("Scroll up"),
+  "shortcuts.top": z.string().default("Back to top"),
+  "shortcuts.bottom": z.string().default("Go to bottom"),
+  "shortcuts.next": z.string().default("Next page"),
+  "shortcuts.previous": z.string().default("Previous page"),
+  "search.label": z.string().default("Search"),
+  "search.description": z.string().default("Search documentation"),
+  "search.placeholder": z.string().default("Search docs..."),
+  "search.empty": z.string().default("No results found."),
+  "search.hint": z.string().default("Type to search across all contents."),
+  "search.close": z.string().default("Close search"),
+  "search.pages": z.string().default("Pages"),
+  "search.button": z.string().default("Search..."),
+  "search.navigate": z.string().default("navigate"),
+  "search.select": z.string().default("select"),
+  "search.dismiss": z.string().default("close"),
+  "toc.title": z.string().default("On this page"),
+  "toc.contents": z.string().default("Contents"),
+  "toc.actions": z.string().default("Actions"),
+  "toc.inline": z.string().default("Table of Contents"),
+  "page.updated": z.string().default("Updated {date}"),
+  "page.published": z.string().default("Published {date}"),
+  "page.edit": z.string().default("Edit on GitHub"),
+  "page.view": z.string().default("View on GitHub"),
+  "page.copyMarkdown": z.string().default("Copy Markdown"),
+  "page.openChatGpt": z.string().default("Open in ChatGPT"),
+  "page.openClaude": z.string().default("Open in Claude"),
+  "page.llmPrompt": z.string().default("Read {url}, I want to ask questions about it."),
+  "code.copy": z.string().default("Copy code"),
+  "code.copied": z.string().default("Copied!"),
+  "code.wrapOn": z.string().default("Enable wrap"),
+  "code.wrapOff": z.string().default("Disable wrap"),
+  "code.expand": z.string().default("Expand"),
+  "callout.note": z.string().default("Note"),
+  "callout.info": z.string().default("Info"),
+  "callout.tip": z.string().default("Tip"),
+  "callout.warning": z.string().default("Warning"),
+  "callout.danger": z.string().default("Danger"),
+  "blog.title": z.string().default("Blog"),
+  "blog.allPosts": z.string().default("All Posts"),
+  "blog.recentPosts": z.string().default("Recent Posts"),
+  "blog.rssFeed": z.string().default("RSS Feed"),
+  "blog.tagged": z.string().default("Posts tagged '{tag}'"),
+  "changelog.title": z.string().default("Changelog"),
+  "changelog.allReleases": z.string().default("All Releases"),
+  "changelog.recentReleases": z.string().default("Recent Releases"),
+  "error.notFound": z.string().default("The page you're looking for doesn't exist."),
+  "error.goBack": z.string().default("Go Back"),
+  "error.tryAgain": z.string().default("Try Again"),
+  "error.home": z.string().default("Home"),
+  "media.loadingDiagram": z.string().default("Loading diagram…"),
+  "media.youtube": z.string().default("YouTube video"),
+  "media.soundcloud": z.string().default("SoundCloud audio"),
+  "footnote.missing": z.string().default("Footnote not found"),
+  "footer.createdWith": z.string().default("Created with {heart} and {livemark}"),
+})
+
+/** A key of {@link Messages}. */
+export type MessageKey = keyof Messages
+
+/** Per-key overrides a project sets for one language; unknown keys are rejected. */
+export type MessageOverrides = z.infer<typeof MessageOverrides>
+export const MessageOverrides = z.partialRecord(Messages.keyof(), z.string())

package/source/models/plugins.ts

@@ -0,0 +1,11 @@
+import type { Pluggable } from "textlane"
+import { z } from "zod"
+
+/** Plugins added to the Markdown pipeline: unified-style attachers or native textlane
+ *  plugins. `md` runs on the Markdown tree before heading ids and components, `html` on
+ *  the HTML tree before heading slugs and the table of contents. */
+export type MarkdownPlugins = z.infer<typeof MarkdownPlugins>
+export const MarkdownPlugins = z.strictObject({
+  md: z.array(z.custom<Pluggable>()).optional(),
+  html: z.array(z.custom<Pluggable>()).optional(),
+})

package/source/models/theme.ts

@@ -0,0 +1,78 @@
+import { z } from "zod"
+
+/** Light syntax highlighting theme (Shiki) */
+/** A light Shiki theme name. */
+export type CodeThemeLight = z.infer<typeof CodeThemeLight>
+export const CodeThemeLight = z.enum([
+  "ayu-light",
+  "catppuccin-latte",
+  "everforest-light",
+  "github-light",
+  "github-light-default",
+  "github-light-high-contrast",
+  "gruvbox-light-hard",
+  "gruvbox-light-medium",
+  "gruvbox-light-soft",
+  "horizon-bright",
+  "kanagawa-lotus",
+  "light-plus",
+  "material-theme-lighter",
+  "min-light",
+  "night-owl-light",
+  "one-light",
+  "rose-pine-dawn",
+  "slack-ochin",
+  "snazzy-light",
+  "solarized-light",
+  "vitesse-light",
+])
+
+/** Dark syntax highlighting theme (Shiki) */
+/** A dark Shiki theme name. */
+export type CodeThemeDark = z.infer<typeof CodeThemeDark>
+export const CodeThemeDark = z.enum([
+  "andromeeda",
+  "aurora-x",
+  "ayu-dark",
+  "ayu-mirage",
+  "catppuccin-frappe",
+  "catppuccin-macchiato",
+  "catppuccin-mocha",
+  "dark-plus",
+  "dracula",
+  "dracula-soft",
+  "everforest-dark",
+  "github-dark",
+  "github-dark-default",
+  "github-dark-dimmed",
+  "github-dark-high-contrast",
+  "gruvbox-dark-hard",
+  "gruvbox-dark-medium",
+  "gruvbox-dark-soft",
+  "horizon",
+  "houston",
+  "kanagawa-dragon",
+  "kanagawa-wave",
+  "laserwave",
+  "material-theme",
+  "material-theme-darker",
+  "material-theme-ocean",
+  "material-theme-palenight",
+  "min-dark",
+  "monokai",
+  "night-owl",
+  "nord",
+  "one-dark-pro",
+  "plastic",
+  "poimandres",
+  "red",
+  "rose-pine",
+  "rose-pine-moon",
+  "slack-dark",
+  "solarized-dark",
+  "synthwave-84",
+  "tokyo-night",
+  "vesper",
+  "vitesse-black",
+  "vitesse-dark",
+])

package/source/models/toc.ts

@@ -0,0 +1,5 @@
+export interface TocItem {
+  url: string
+  title: string
+  depth: number
+}

package/source/plugins/twoslash.ts

@@ -0,0 +1,163 @@
+import { Worker } from "node:worker_threads"
+import type { Element, ElementContent, Root, RootContent } from "hast"
+import { readNodeText } from "../helpers/node-text.ts"
+
+/** A fenced code block whose meta names `twoslash` */
+export const TWOSLASH_FENCE = /^[ \t>]*(?:`{3,}|~{3,})[^\n]*\btwoslash\b/m
+
+const TWOSLASH = /(?:^|\s)twoslash(?:\s|$)/
+
+/** Re-highlight the code blocks whose meta names `twoslash` with Shiki's twoslash
+ *  transformer: the one stage textlane cannot run natively, as it needs TypeScript. */
+export function twoslashStage(options: { themes: { light: string; dark: string } }) {
+  return async (tree: Root) => {
+    const blocks: { node: Element; meta: string; lang: string }[] = []
+    for (const node of walkElements(tree)) {
+      if (node.tagName !== "pre") continue
+      const meta = node.properties["data-meta"] ?? node.properties.dataMeta
+      if (typeof meta !== "string" || !TWOSLASH.test(meta)) continue
+      blocks.push({ node, meta, lang: readLanguage(node) })
+    }
+    const themes = options.themes
+    await Promise.all(
+      blocks.map(async block => {
+        const pre = await renderBlock({
+          ...block,
+          code: readNodeText(block.node),
+          themes,
+        })
+        if (!pre) return
+        block.node.properties = structuredClone(pre.properties)
+        block.node.children = structuredClone(pre.children) as ElementContent[]
+      }),
+    )
+  }
+}
+
+/** Start TypeScript in the twoslash worker now, so it is ready once a block needs it */
+export function warmTwoslash() {
+  readWorker()
+}
+
+interface BlockRequest {
+  code: string
+  lang: string
+  meta: string
+  themes: { light: string; dark: string }
+}
+
+// Translated pages repeat the same blocks, which twoslash would check again
+const rendered = new Map<string, Promise<Element | undefined>>()
+
+function renderBlock(request: BlockRequest) {
+  const key = JSON.stringify([request.lang, request.meta, request.themes, request.code])
+  let pre = rendered.get(key)
+  if (!pre) {
+    pre = callWorker(request)
+    rendered.set(key, pre)
+  }
+  return pre
+}
+
+interface Pending {
+  resolve: (pre: Element | undefined) => void
+  reject: (error: Error) => void
+}
+
+// TypeScript takes ~0.8 s to start on the thread twoslash runs on; a worker keeps it
+// off the main thread, where textlane compiles every other article meanwhile
+let worker: { thread: Worker; pending: Map<number, Pending>; next: number } | undefined
+
+function readWorker() {
+  if (worker) return worker
+  const thread = new Worker(WORKER_SOURCE, {
+    eval: true,
+    // an eval'd worker resolves bare specifiers from the cwd, so it imports the
+    // packages this module resolves rather than resolving them itself
+    workerData: {
+      shiki: import.meta.resolve("shiki"),
+      twoslash: import.meta.resolve("@shikijs/twoslash"),
+    },
+  })
+  const pending = new Map<number, Pending>()
+  thread.on("message", (message: { id: number; pre?: Element; error?: string }) => {
+    const call = pending.get(message.id)
+    pending.delete(message.id)
+    if (pending.size === 0) thread.unref()
+    if (message.error) call?.reject(new Error(message.error))
+    else call?.resolve(message.pre)
+  })
+  thread.on("error", error => {
+    for (const call of pending.values()) call.reject(error)
+    pending.clear()
+    worker = undefined
+  })
+  // Only a worker with blocks in flight keeps the build alive; `on("message")` refs it
+  thread.unref()
+  worker = { thread, pending, next: 0 }
+  return worker
+}
+
+function callWorker(request: BlockRequest) {
+  const current = readWorker()
+  const id = current.next++
+  return new Promise<Element | undefined>((resolve, reject) => {
+    current.pending.set(id, { resolve, reject })
+    current.thread.ref()
+    current.thread.postMessage({ id, ...request })
+  })
+}
+
+// The first twoslash call builds TypeScript's program over `lib.*.d.ts`; one throwaway
+// block pays that while the main thread still has other articles to compile
+const WORKER_SOURCE = `
+const { parentPort, workerData } = require("node:worker_threads")
+const ready = (async () => {
+  const { bundledLanguages, getSingletonHighlighter } = await import(workerData.shiki)
+  const { transformerTwoslash } = await import(workerData.twoslash)
+  const transformer = transformerTwoslash({ explicitTrigger: true })
+  const highlighter = await getSingletonHighlighter({ themes: [], langs: ["ts"] })
+  highlighter.codeToHast("const a = 1", {
+    lang: "ts",
+    theme: "none",
+    meta: { __raw: "twoslash" },
+    transformers: [transformer],
+  })
+  return { bundledLanguages, highlighter, transformer }
+})()
+parentPort.on("message", async request => {
+  try {
+    const { bundledLanguages, highlighter, transformer } = await ready
+    const lang = request.lang in bundledLanguages ? request.lang : "ts"
+    await highlighter.loadLanguage(lang)
+    await highlighter.loadTheme(request.themes.light, request.themes.dark)
+    const fragment = highlighter.codeToHast(request.code, {
+      lang,
+      themes: request.themes,
+      meta: { __raw: request.meta, "data-meta": request.meta },
+      transformers: [transformer],
+    })
+    const pre = fragment.children[0]
+    parentPort.postMessage({ id: request.id, pre: pre && pre.type === "element" ? pre : undefined })
+  } catch (error) {
+    parentPort.postMessage({ id: request.id, error: String((error && error.stack) || error) })
+  }
+})
+`
+
+// addLanguageClass put `language-<name>` on the block's `<code>`
+function readLanguage(pre: Element) {
+  const code = pre.children.find(
+    (child): child is Element => child.type === "element" && child.tagName === "code",
+  )
+  const classes = code?.properties.className
+  const name = Array.isArray(classes)
+    ? classes.find(item => typeof item === "string" && item.startsWith("language-"))
+    : undefined
+  return typeof name === "string" ? name.slice("language-".length) : "ts"
+}
+
+function* walkElements(node: Root | RootContent): Generator<Element> {
+  if (node.type === "element") yield node
+  if ("children" in node) for (const child of node.children) yield* walkElements(child)
+}

package/source/standalone.css

@@ -0,0 +1,7 @@
+/* What an app outside Livemark loads: the shape scale, the Markdown styles, and the
+   sources Tailwind must scan, named from here since the app cannot see this package */
+@import "./styles/shape.css";
+@import "./styles/markdown.css";
+@source "./components";
+@source "./elements";
+@source "./helpers";

package/source/styles/general.css

@@ -0,0 +1,214 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "./shape.css";
+@plugin "@tailwindcss/typography";
+
+@custom-variant dark (&:is(.dark *));
+@custom-variant sidebar-collapsed ([data-slot="sidebar"][data-state="collapsed"] ~ [data-slot="sidebar-inset"] &);
+
+/* The page content's width on a 100rem (1600px) viewport, where it spans from the header
+   nav's first link to the PageToc under the search; it stops growing beyond that */
+[data-slot="sidebar-inset"] {
+  --content-max-width: calc(
+    100rem - var(--sidebar-width, 16rem) - var(--toc-width, 14rem) - 13.5rem
+  );
+}
+[data-slot="sidebar"][data-state="collapsed"] ~ [data-slot="sidebar-inset"] {
+  --content-max-width: calc(100rem - var(--toc-width, 14rem) - 13.5rem);
+}
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(54.6% 0.245 262.881);
+  --primary-foreground: oklch(0.985 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);
+  --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);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
+  --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);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.623 0.214 259.815);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(60.6% 0.25 292.717);
+  --secondary-foreground: oklch(0.985 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);
+  --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);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --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: 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);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-ring: oklch(0.439 0 0);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --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);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+
+  html {
+    scroll-behavior: smooth;
+    scrollbar-color: #ddd transparent;
+    scrollbar-gutter: stable;
+  }
+
+  button:not([disabled]),
+  [role="button"]:not([disabled]) {
+    cursor: pointer;
+  }
+
+  [data-slot="sidebar-content"] {
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+    transition: scrollbar-color 0.2s;
+  }
+  [data-slot="sidebar-content"]:hover,
+  [data-slot="sidebar-content"]:focus-within {
+    scrollbar-color: color-mix(in oklch, var(--sidebar-foreground) 20%, transparent)
+      transparent;
+  }
+
+  [data-slot="sidebar-content"]::-webkit-scrollbar {
+    width: 8px;
+  }
+  [data-slot="sidebar-content"]::-webkit-scrollbar-thumb {
+    background: transparent;
+    border-radius: 9999px;
+    transition: background 0.2s;
+  }
+  [data-slot="sidebar-content"]:hover::-webkit-scrollbar-thumb,
+  [data-slot="sidebar-content"]:focus-within::-webkit-scrollbar-thumb {
+    background: color-mix(in oklch, var(--sidebar-foreground) 20%, transparent);
+  }
+}