feat(ScrollArea): add shadcn scroll area to layout

src/shared/shadcn/ui/scroll-area/index.ts

@@ -0,0 +1,10 @@
+import Scrollbar from './scroll-area-scrollbar.svelte';
+import Root from './scroll-area.svelte';
+
+export {
+    Root,
+    // ,
+    Root as ScrollArea,
+    Scrollbar,
+    Scrollbar as ScrollAreaScrollbar,
+};

src/shared/shadcn/ui/scroll-area/scroll-area-scrollbar.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+import {
+    type WithoutChild,
+    cn,
+} from '$shared/shadcn/utils/shadcn-utils.js';
+import { ScrollArea as ScrollAreaPrimitive } from 'bits-ui';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    orientation = 'vertical',
+    children,
+    ...restProps
+}: WithoutChild<ScrollAreaPrimitive.ScrollbarProps> = $props();
+</script>
+
+<ScrollAreaPrimitive.Scrollbar
+    bind:ref
+    data-slot="scroll-area-scrollbar"
+    {orientation}
+    class={cn(
+        'flex touch-none p-px transition-colors select-none',
+        orientation === 'vertical' && 'h-full w-2.5 border-s border-s-transparent',
+        orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent',
+        className,
+    )}
+    {...restProps}
+>
+    {@render children?.()}
+    <ScrollAreaPrimitive.Thumb
+        data-slot="scroll-area-thumb"
+        class="bg-border relative flex-1 rounded-full"
+    />
+</ScrollAreaPrimitive.Scrollbar>

src/shared/shadcn/ui/scroll-area/scroll-area.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+import {
+    type WithoutChild,
+    cn,
+} from '$shared/shadcn/utils/shadcn-utils.js';
+import { ScrollArea as ScrollAreaPrimitive } from 'bits-ui';
+import { Scrollbar } from './index.js';
+
+let {
+    ref = $bindable(null),
+    viewportRef = $bindable(null),
+    class: className,
+    orientation = 'vertical',
+    scrollbarXClasses = '',
+    scrollbarYClasses = '',
+    children,
+    ...restProps
+}: WithoutChild<ScrollAreaPrimitive.RootProps> & {
+    orientation?: 'vertical' | 'horizontal' | 'both' | undefined;
+    scrollbarXClasses?: string | undefined;
+    scrollbarYClasses?: string | undefined;
+    viewportRef?: HTMLElement | null;
+} = $props();
+</script>
+
+<ScrollAreaPrimitive.Root
+    bind:ref
+    data-slot="scroll-area"
+    class={cn('relative', className)}
+    {...restProps}
+>
+    <ScrollAreaPrimitive.Viewport
+        bind:ref={viewportRef}
+        data-slot="scroll-area-viewport"
+        class="ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1"
+    >
+        {@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>