From 1409082ec4d9ef0a1b26080a8dc84abee58d7409 Mon Sep 17 00:00:00 2001
From: Huakun Shen <huakun.shen@huakunshen.com>
Date: Tue, 11 Mar 2025 16:04:44 -0400
Subject: [PATCH] feat(ui): add scroll area component and expand markdown
 renderer

---
 .../src/components/markdown/Markdown.svelte   | 21 +++++++-----
 .../ui/src/components/ui/scroll-area/index.ts | 10 ++++++
 .../scroll-area/scroll-area-scrollbar.svelte  | 29 ++++++++++++++++
 .../ui/scroll-area/scroll-area.svelte         | 34 +++++++++++++++++++
 packages/ui/src/index.ts                      |  1 +
 5 files changed, 86 insertions(+), 9 deletions(-)
 create mode 100644 packages/ui/src/components/ui/scroll-area/index.ts
 create mode 100644 packages/ui/src/components/ui/scroll-area/scroll-area-scrollbar.svelte
 create mode 100644 packages/ui/src/components/ui/scroll-area/scroll-area.svelte

diff --git a/packages/ui/src/components/markdown/Markdown.svelte b/packages/ui/src/components/markdown/Markdown.svelte
index eaad006..20bf649 100644
--- a/packages/ui/src/components/markdown/Markdown.svelte
+++ b/packages/ui/src/components/markdown/Markdown.svelte
@@ -1,15 +1,18 @@
 <script lang="ts">
-	import Markdown from "svelte-exmarkdown"
-	import type { Plugin } from "svelte-exmarkdown"
 	import rehypeShikiFromHighlighter from "@shikijs/rehype/core"
-	import { createHighlighterCoreSync } from "shiki/core"
-	import { createJavaScriptRegexEngine } from "shiki/engine/javascript"
-	import ts from "shiki/langs/typescript.mjs"
-	import svelte from "shiki/langs/svelte.mjs"
-	import vitesseDark from "shiki/themes/vitesse-dark.mjs"
+	import rehypeClassNames from "rehype-class-names"
 	import rehypeKatex from "rehype-katex"
 	import remarkMath from "remark-math"
-	import rehypeClassNames from "rehype-class-names"
+	import { createHighlighterCoreSync } from "shiki/core"
+	import { createJavaScriptRegexEngine } from "shiki/engine/javascript"
+	import html from "shiki/langs/html.mjs"
+	import json from "shiki/langs/json.mjs"
+	import rust from "shiki/langs/rust.mjs"
+	import svelte from "shiki/langs/svelte.mjs"
+	import ts from "shiki/langs/typescript.mjs"
+	import vitesseDark from "shiki/themes/vitesse-dark.mjs"
+	import Markdown from "svelte-exmarkdown"
+	import type { Plugin } from "svelte-exmarkdown"
 	import Pre from "./Pre.svelte"
 
 	const addClass: Plugin = {
@@ -26,7 +29,7 @@
 			rehypeShikiFromHighlighter,
 			createHighlighterCoreSync({
 				themes: [vitesseDark],
-				langs: [ts, svelte],
+				langs: [ts, svelte, json, html, rust],
 				engine: createJavaScriptRegexEngine()
 			}),
 			{
diff --git a/packages/ui/src/components/ui/scroll-area/index.ts b/packages/ui/src/components/ui/scroll-area/index.ts
new file mode 100644
index 0000000..e86a25b
--- /dev/null
+++ b/packages/ui/src/components/ui/scroll-area/index.ts
@@ -0,0 +1,10 @@
+import Scrollbar from "./scroll-area-scrollbar.svelte";
+import Root from "./scroll-area.svelte";
+
+export {
+	Root,
+	Scrollbar,
+	//,
+	Root as ScrollArea,
+	Scrollbar as ScrollAreaScrollbar,
+};
diff --git a/packages/ui/src/components/ui/scroll-area/scroll-area-scrollbar.svelte b/packages/ui/src/components/ui/scroll-area/scroll-area-scrollbar.svelte
new file mode 100644
index 0000000..7d92442
--- /dev/null
+++ b/packages/ui/src/components/ui/scroll-area/scroll-area-scrollbar.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { ScrollArea as ScrollAreaPrimitive, type WithoutChild } from "bits-ui"
+	import { cn } from "../../../utils"
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		orientation = "vertical",
+		children,
+		...restProps
+	}: WithoutChild<ScrollAreaPrimitive.ScrollbarProps> = $props()
+</script>
+
+<ScrollAreaPrimitive.Scrollbar
+	bind:ref
+	{orientation}
+	class={cn(
+		"flex touch-none select-none transition-colors",
+		orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-px",
+		orientation === "horizontal" && "h-2.5 w-full border-t border-t-transparent p-px",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ScrollAreaPrimitive.Thumb
+		class={cn("bg-border relative rounded-full", orientation === "vertical" && "flex-1")}
+	/>
+</ScrollAreaPrimitive.Scrollbar>
diff --git a/packages/ui/src/components/ui/scroll-area/scroll-area.svelte b/packages/ui/src/components/ui/scroll-area/scroll-area.svelte
new file mode 100644
index 0000000..cf6610c
--- /dev/null
+++ b/packages/ui/src/components/ui/scroll-area/scroll-area.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { ScrollArea as ScrollAreaPrimitive, type WithoutChild } from "bits-ui"
+	import { cn } from "../../../utils"
+	import { Scrollbar } from "./index.js"
+
+	let {
+		ref = $bindable(null),
+		viewportRef = $bindable(null),
+		class: className,
+		orientation = "vertical",
+		scrollbarXClasses = "",
+		scrollbarYClasses = "",
+		children,
+		...restProps
+	}: WithoutChild<ScrollAreaPrimitive.RootProps> & {
+		viewportRef?: HTMLDivElement | null
+		orientation?: "vertical" | "horizontal" | "both" | undefined
+		scrollbarXClasses?: string | undefined
+		scrollbarYClasses?: string | undefined
+	} = $props()
+</script>
+
+<ScrollAreaPrimitive.Root bind:ref {...restProps} class={cn("relative overflow-hidden", className)}>
+	<ScrollAreaPrimitive.Viewport bind:ref={viewportRef} class="h-full w-full rounded-[inherit]">
+		{@render children?.()}
+	</ScrollAreaPrimitive.Viewport>
+	{#if orientation === "vertical" || orientation === "both"}
+		<Scrollbar orientation="vertical" class={scrollbarYClasses} />
+	{/if}
+	{#if orientation === "horizontal" || orientation === "both"}
+		<Scrollbar orientation="horizontal" class={scrollbarXClasses} />
+	{/if}
+	<ScrollAreaPrimitive.Corner />
+</ScrollAreaPrimitive.Root>
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index aec9634..2e36d7c 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -15,4 +15,5 @@ export { default as RetroGrid } from "./components/animation/RetroGrid.svelte"
 export { default as AuroraText } from "./components/animation/AuroraText.svelte"
 export * as Constants from "./constants"
 export * as Form from "./components/ui/form"
+export * as ScrollArea from "./components/ui/scroll-area"
 export { default as ModeToggle } from "./components/theme/mode-toggle.svelte"