feat(ui): add scroll area component and expand markdown renderer

Author: HuakunShen

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 rehypeClassNames from "rehype-class-names"
+	import rehypeKatex from "rehype-katex"
+	import remarkMath from "remark-math"
 	import { createHighlighterCoreSync } from "shiki/core"
 	import { createJavaScriptRegexEngine } from "shiki/engine/javascript"
-	import ts from "shiki/langs/typescript.mjs"
+	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 rehypeKatex from "rehype-katex"
-	import remarkMath from "remark-math"
-	import rehypeClassNames from "rehype-class-names"
+	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()
 			}),
 			{

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,
+};

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>

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>

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"