@rolder/kit 3.0.0-alpha-1

package/dist/ui/scrollArea/useScrollArea.js

@@ -0,0 +1,146 @@
+import { useDebouncedCallback, useMergedRef, useResizeObserver } from "@mantine/hooks";
+import { useCallback, useEffect, useRef, useState } from "react";
+const useScrollAreaState = (options = {})=>{
+    const { autoScroll = false, scrollToBottomOnInit = false, animated = true, nearThreshold = 32 } = options;
+    const scrollAreaRef = useRef(null);
+    const isUserInteractingRef = useRef(false);
+    const userInteractionTimeoutRef = useRef(void 0);
+    const isInitializedRef = useRef(false);
+    const [contentResizeRef, contentRect] = useResizeObserver();
+    const [scrollPosition, setScrollPosition] = useState({
+        scrollTop: 0,
+        clientHeight: 0,
+        scrollHeight: 0
+    });
+    const isAtTop = 0 === scrollPosition.scrollTop;
+    const isAtBottom = scrollPosition.scrollTop + scrollPosition.clientHeight >= scrollPosition.scrollHeight;
+    const isNearTop = scrollPosition.scrollTop <= nearThreshold;
+    const isNearBottom = scrollPosition.scrollTop + scrollPosition.clientHeight >= scrollPosition.scrollHeight - nearThreshold;
+    const isAboveCenter = scrollPosition.scrollTop < (scrollPosition.scrollHeight - scrollPosition.clientHeight) / 2;
+    const hasScrollableContent = scrollPosition.scrollHeight > scrollPosition.clientHeight;
+    const debouncedUpdatePosition = useDebouncedCallback((element)=>{
+        const newPosition = {
+            scrollTop: element.scrollTop,
+            clientHeight: element.clientHeight,
+            scrollHeight: element.scrollHeight
+        };
+        setScrollPosition(newPosition);
+    }, {
+        delay: 16
+    });
+    const scrollToTop = useCallback((isAnimated)=>{
+        const element = scrollAreaRef.current;
+        if (!element) return;
+        const shouldAnimate = isAnimated ?? animated;
+        if (shouldAnimate) element.scrollTo({
+            top: 0,
+            behavior: 'smooth'
+        });
+        else element.scrollTop = 0;
+    }, [
+        animated
+    ]);
+    const scrollToBottom = useCallback((isAnimated)=>{
+        const element = scrollAreaRef.current;
+        if (!element) return;
+        const shouldAnimate = isAnimated ?? animated;
+        if (shouldAnimate) element.scrollTo({
+            top: element.scrollHeight,
+            behavior: 'smooth'
+        });
+        else element.scrollTop = element.scrollHeight;
+        const scrollHeightBefore = element.scrollHeight;
+        setTimeout(()=>{
+            const scrollHeightAfter = element.scrollHeight;
+            const diff = element.scrollHeight - (element.scrollTop + element.clientHeight);
+            if (diff > 1 && scrollHeightAfter !== scrollHeightBefore) element.scrollTop = element.scrollHeight;
+        }, 50);
+    }, [
+        animated
+    ]);
+    const performAutoScroll = useCallback(()=>{
+        if (!autoScroll || isUserInteractingRef.current || !scrollAreaRef.current) return;
+        if (isAtBottom) scrollToBottom(false);
+    }, [
+        autoScroll,
+        isAtBottom,
+        scrollToBottom
+    ]);
+    const handleUserInteraction = useCallback(()=>{
+        isUserInteractingRef.current = true;
+        if (userInteractionTimeoutRef.current) clearTimeout(userInteractionTimeoutRef.current);
+        userInteractionTimeoutRef.current = setTimeout(()=>{
+            isUserInteractingRef.current = false;
+        }, 150);
+    }, []);
+    const handleScroll = useCallback((event)=>{
+        const element = event.target;
+        debouncedUpdatePosition(element);
+    }, [
+        debouncedUpdatePosition
+    ]);
+    useEffect(()=>{
+        if (!scrollToBottomOnInit || isInitializedRef.current) return;
+        if (hasScrollableContent) {
+            scrollToBottom(animated);
+            isInitializedRef.current = true;
+        }
+    }, [
+        scrollToBottomOnInit,
+        hasScrollableContent,
+        scrollToBottom,
+        animated
+    ]);
+    useEffect(()=>{
+        const element = scrollAreaRef.current;
+        if (!element || 0 === contentRect.height) return;
+        debouncedUpdatePosition(element);
+        const timeoutId = setTimeout(performAutoScroll, 10);
+        return ()=>clearTimeout(timeoutId);
+    }, [
+        contentRect.height,
+        debouncedUpdatePosition,
+        performAutoScroll
+    ]);
+    useEffect(()=>{
+        const element = scrollAreaRef.current;
+        if (!element) return;
+        const events = [
+            'wheel',
+            'touchstart',
+            'touchmove',
+            'mousedown'
+        ];
+        element.addEventListener('scroll', handleScroll);
+        events.forEach((event)=>{
+            element.addEventListener(event, handleUserInteraction);
+        });
+        debouncedUpdatePosition(element);
+        return ()=>{
+            element.removeEventListener('scroll', handleScroll);
+            events.forEach((event)=>{
+                element.removeEventListener(event, handleUserInteraction);
+            });
+            if (userInteractionTimeoutRef.current) clearTimeout(userInteractionTimeoutRef.current);
+        };
+    }, [
+        handleScroll,
+        handleUserInteraction,
+        debouncedUpdatePosition
+    ]);
+    const callbackRef = useMergedRef(scrollAreaRef);
+    return {
+        isAtTop,
+        isNearTop,
+        isAtBottom,
+        isNearBottom,
+        isAboveCenter,
+        hasScrollableContent,
+        scrollToTop,
+        scrollToBottom,
+        viewportRef: scrollAreaRef,
+        _callbackRef: callbackRef,
+        _contentResizeRef: contentResizeRef
+    };
+};
+export { useScrollAreaState };

package/package.json

@@ -0,0 +1,59 @@
+{
+	"name": "@rolder/kit",
+	"version": "3.0.0-alpha-1",
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/index.js"
+		}
+	},
+	"types": "./dist/index.d.ts",
+	"files": [
+		"dist"
+	],
+	"scripts": {
+		"build": "rslib build",
+		"dev": "rslib build --watch",
+		"check": "biome check --write && tsc --noEmit"
+	},
+	"devDependencies": {
+		"@biomejs/biome": "2.3.8",
+		"@rsbuild/plugin-react": "^1.4.2",
+		"@rslib/core": "^0.19.2",
+		"@types/react": "^19.2.8",
+		"react": "^19.2.3",
+		"typescript": "^5.9.3",
+		"@types/bun": "^1.3.5",
+		"@types/js-cookie": "^3.0.6"
+	},
+	"peerDependencies": {
+		"react": ">=16.9.0",
+		"react-dom": ">=16.9.0",
+		"@tabler/icons-react": "^3.36.1",
+		"clsx": "^2.1.1",
+		"@tiptap/extension-highlight": "^3.15.3",
+		"@tiptap/extension-placeholder": "^3.15.3",
+		"@tiptap/extension-table": "^3.15.3",
+		"@tiptap/extension-task-item": "^3.15.3",
+		"@tiptap/extension-task-list": "^3.15.3",
+		"@tiptap/extension-text-align": "^3.15.3",
+		"@tiptap/starter-kit": "^3.15.3",
+		"@codemirror/lang-json": "^6.0.2",
+		"@codemirror/lint": "^6.9.2",
+		"@uiw/codemirror-theme-vscode": "^4.25.4",
+		"@uiw/react-codemirror": "^4.25.4",
+		"@mantine/core": "^8.3.11",
+		"@mantine/hooks": "^8.3.11",
+		"@mantine/tiptap": "^8.3.11",
+		"@tanstack/react-router": "1.147.3",
+		"@tanstack/react-form": "1.27.7",
+		"@tanstack/react-start": "^1.149.1",
+		"zod": "^4.3.5",
+		"js-cookie": "^3.0.5"
+	},
+	"trustedDependencies": [
+		"core-js",
+		"esbuild"
+	]
+}