@svelte-atoms/core 1.0.0-alpha.41 → 1.0.0-alpha.44

package/dist/components/scrollable/bond.svelte.js

@@ -1,369 +1,159 @@
+import { getContext, setContext, untrack } from 'svelte';
 import { createAttachmentKey } from 'svelte/attachments';
-import { getContext, setContext } from 'svelte';
-import { Bond, BondState } from '../../shared/bond.svelte';
+import { Bond, BondState, BondAtom } from '../../shared/bond.svelte';
+// ============================================================================
+// BondAtom Classes
+// ============================================================================
 /**
- * Main bond class that manages scrollable state and DOM element interactions
- * Extends the base Bond class with scrollable-specific functionality
+ * Root atom for the scrollable component
  */
-export class ScrollableBond extends Bond {
-    /** Unique key for identifying this bond type in the context system */
-    static CONTEXT_KEY = '@atoms/context/scrollable';
-    /** Reference to parent scrollable bond (for nested scrollable areas) */
-    #parent;
-    /**
-     * Creates a new scrollable bond instance
-     * @param state - The scrollable state instance to manage
-     */
-    constructor(state) {
-        super(state);
-        // Capture any existing scrollable context as parent
-        this.#parent = ScrollableBond.get();
-    }
-    /**
-     * Gets the parent scrollable bond if this is a nested scrollable
-     * @returns The parent bond or undefined if this is the root scrollable
-     */
-    get parent() {
-        return this.#parent;
-    }
-    /**
-     * Shares this bond instance through the context system
-     * Makes this bond available to child components
-     * @returns This bond instance for chaining
-     */
-    share() {
-        ScrollableBond.set(this);
-        return this;
-    }
-    /**
-     * Retrieves the current scrollable bond from context
-     * @returns The active scrollable bond or undefined if none exists
-     */
-    static get() {
-        return getContext(ScrollableBond.CONTEXT_KEY);
-    }
-    /**
-     * Sets the scrollable bond in context for child components
-     * @param bond - The bond instance to set in context
-     * @returns The bond that was set
-     */
-    static set(bond) {
-        return setContext(ScrollableBond.CONTEXT_KEY, bond);
+export class ScrollableRootAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'root');
     }
-    /**
-     * Creates props for the root element with hidden overflow
-     * The root element contains the entire scrollable interface but doesn't scroll itself
-     * @param props - Additional props to merge with the generated props
-     * @returns Object containing all necessary props for the root element
-     */
-    root(props = {}) {
+    get attrs() {
+        const props = untrack(() => this.bond.state.props);
         return {
-            'data-atom': this.id ?? '',
-            'data-kind': 'scrollable-root',
-            'data-disabled': this.state.props.disabled,
-            'data-open': this.state.props.open,
-            ...props,
-            // Attach the root DOM element
-            [createAttachmentKey()]: (node) => {
-                this.elements.root = node;
-            }
+            ...super.attrs,
+            'data-disabled': props.disabled,
+            'data-open': props.open
         };
     }
-    /**
-     * Creates props for the scrollable container element
-     * This element is the actual scrollable area that handles scroll events
-     * @param props - Additional props to merge with the generated props
-     * @returns Object containing all necessary props for the container element
-     */
-    container(props = {}) {
+}
+/**
+ * Container atom for the scrollable area
+ */
+export class ScrollableContainerAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'container');
+    }
+    get handlers() {
         return {
-            'data-atom': this.id ?? '',
-            'data-kind': 'scrollable-container',
-            // Handle scroll events and update internal state
             onscroll: (e) => {
-                this.updateScrollState();
-                if ('onscroll' in props && typeof props.onscroll === 'function') {
-                    props.onscroll(e);
-                }
-            },
-            ...props,
-            // Attach the container DOM element and initialize scroll state
-            [createAttachmentKey()]: (node) => {
-                this.elements.container = node;
-                this.updateScrollState();
+                this.bond.updateScrollState();
             }
         };
     }
-    /**
-     * Creates props for the scrollable content wrapper element
-     * This element defines the boundaries and size of the scrollable content
-     * @param props - Additional props to merge with the generated props
-     * @returns Object containing all necessary props for the content element
-     */
-    content(props = {}) {
-        return {
-            'data-atom': this.id ?? '',
-            'data-kind': 'scrollable-content',
-            ...props,
-            // Attach the content DOM element for measurement and interaction
-            [createAttachmentKey()]: (node) => {
-                this.elements.content = node;
-            }
-        };
+    onmount(node) {
+        this.bond.updateScrollState();
     }
-    /**
-     * Creates props for the horizontal scrollbar track element
-     * Provides click-to-scroll functionality for horizontal navigation
-     * @param props - Additional props to merge with the generated props
-     * @returns Object containing all necessary props for the horizontal track element
-     */
-    trackX(props = {}) {
+}
+/**
+ * Content atom for the scrollable content wrapper
+ */
+export class ScrollableContentAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'content');
+    }
+}
+/**
+ * Track atom for scrollbar tracks (horizontal or vertical)
+ */
+export class ScrollableTrackAtom extends BondAtom {
+    #axis;
+    constructor(bond, axis) {
+        super(bond, axis === 'x' ? 'trackX' : 'trackY');
+        this.#axis = axis;
+    }
+    get attrs() {
+        const canScroll = this.#axis === 'x' ? this.bond.canScrollX : this.bond.canScrollY;
         return {
-            'data-atom': this.id ?? '',
-            'data-kind': 'scrollable-track-x',
-            'data-visible': this.canScrollX,
-            ...props,
-            // Handle click-to-scroll on the horizontal track
-            onclick: (e) => {
-                this.handleTrackClick(e, 'x');
-                if ('onclick' in props && typeof props.onclick === 'function') {
-                    props.onclick(e);
-                }
-            },
-            // Attach the horizontal track DOM element
-            [createAttachmentKey()]: (node) => {
-                this.elements.trackX = node;
-            }
+            ...super.attrs,
+            'data-visible': canScroll,
+            'data-direction': this.#axis === 'x' ? 'horizontal' : 'vertical'
         };
     }
-    /**
-     * Creates props for the vertical scrollbar track element
-     * Provides click-to-scroll functionality for vertical navigation
-     * @param props - Additional props to merge with the generated props
-     * @returns Object containing all necessary props for the vertical track element
-     */
-    trackY(props = {}) {
+    get handlers() {
         return {
-            'data-atom': this.id ?? '',
-            'data-kind': 'scrollable-track-y',
-            'data-visible': this.canScrollY,
-            ...props,
-            // Handle click-to-scroll on the vertical track
             onclick: (e) => {
-                this.handleTrackClick(e, 'y');
-                if ('onclick' in props && typeof props.onclick === 'function') {
-                    props.onclick(e);
-                }
-            },
-            // Attach the vertical track DOM element
-            [createAttachmentKey()]: (node) => {
-                this.elements.trackY = node;
+                this.bond.handleTrackClick(e, this.#axis);
             }
         };
     }
-    /**
-     * Creates props for the horizontal scrollbar thumb element
-     * Provides drag-to-scroll functionality and automatic positioning/sizing
-     * @param props - Additional props to merge with the generated props
-     * @returns Object containing all necessary props for the horizontal thumb element
-     */
-    thumbX(props = {}) {
+}
+/**
+ * Thumb atom for scrollbar thumbs (horizontal or vertical)
+ */
+export class ScrollableThumbAtom extends BondAtom {
+    #axis;
+    constructor(bond, axis) {
+        super(bond, axis === 'x' ? 'thumbX' : 'thumbY');
+        this.#axis = axis;
+    }
+    get attrs() {
+        const position = this.#axis === 'x' ? this.bond.getThumbXPosition() : this.bond.getThumbYPosition();
+        const size = this.#axis === 'x' ? this.bond.getThumbXSize() : this.bond.getThumbYSize();
+        const styleProperty = this.#axis === 'x' ? 'left' : 'top';
+        const sizeProperty = this.#axis === 'x' ? 'width' : 'height';
         return {
-            'data-atom': this.id ?? '',
-            'data-kind': 'scrollable-thumb-x',
-            ...props,
-            // Dynamically position and size the thumb based on scroll state
-            style: `left: ${this.getThumbXPosition()}%; width: ${this.getThumbXSize()}%;`,
-            // Handle drag-to-scroll interaction
-            onmousedown: (e) => {
-                this.handleThumbDrag(e, 'x');
-                if ('onmousedown' in props && typeof props.onmousedown === 'function') {
-                    props.onmousedown(e);
-                }
-            },
-            // Attach the horizontal thumb DOM element
-            [createAttachmentKey()]: (node) => {
-                this.elements.thumbX = node;
-            }
+            ...super.attrs,
+            'data-direction': this.#axis === 'x' ? 'horizontal' : 'vertical',
+            style: `${styleProperty}: ${position}%; ${sizeProperty}: ${size}%;`
         };
     }
-    /**
-     * Creates props for the vertical scrollbar thumb element
-     * Provides drag-to-scroll functionality and automatic positioning/sizing
-     * @param props - Additional props to merge with the generated props
-     * @returns Object containing all necessary props for the vertical thumb element
-     */
-    thumbY(props = {}) {
+    get handlers() {
         return {
-            'data-atom': this.id ?? '',
-            'data-kind': 'scrollable-thumb-y',
-            ...props,
-            // Dynamically position and size the thumb based on scroll state
-            style: `top: ${this.getThumbYPosition()}%; height: ${this.getThumbYSize()}%;`,
-            // Handle drag-to-scroll interaction
             onmousedown: (e) => {
-                this.handleThumbDrag(e, 'y');
-                if ('onmousedown' in props && typeof props.onmousedown === 'function') {
-                    props.onmousedown(e);
-                }
-            },
-            // Attach the vertical thumb DOM element
-            [createAttachmentKey()]: (node) => {
-                this.elements.thumbY = node;
+                this.bond.handleThumbDrag(e, this.#axis);
             }
         };
     }
-    /**
-     * Creates props for a unified track element that can be oriented horizontally or vertically
-     * This method provides a single interface for both horizontal and vertical tracks
-     * @param orientation - The track orientation ('horizontal' or 'vertical')
-     * @param props - Additional props to merge with the generated props
-     * @returns Object containing all necessary props for the track element
-     */
-    track(orientation, props = {}) {
-        const isHorizontal = orientation === 'horizontal';
-        return {
-            'data-atom': this.id ?? '',
-            'data-kind': `scrollable-track-${isHorizontal ? 'x' : 'y'}`,
-            'data-direction': orientation,
-            'data-visible': isHorizontal ? this.canScrollX : this.canScrollY,
-            ...props,
-            // Handle click-to-scroll based on orientation
-            onclick: (e) => {
-                this.handleTrackClick(e, isHorizontal ? 'x' : 'y');
-                if ('onclick' in props && typeof props.onclick === 'function') {
-                    props.onclick(e);
-                }
-            },
-            [createAttachmentKey()]: (node) => {
-                // Set both the unified track reference and the specific axis reference
-                if (isHorizontal) {
-                    this.elements.trackX = node;
-                }
-                else {
-                    this.elements.trackY = node;
-                }
-            }
-        };
+}
+// ============================================================================
+// ScrollableBond Class
+// ============================================================================
+/**
+ * Main bond class that manages scrollable state and DOM element interactions
+ */
+export class ScrollableBond extends Bond {
+    static CONTEXT_KEY = '@atoms/context/scrollable';
+    #parent;
+    constructor(state) {
+        super(state);
+        this.#parent = ScrollableBond.get();
     }
-    /**
-     * Creates props for a unified thumb element that can be oriented horizontally or vertically
-     * This method provides a single interface for both horizontal and vertical thumbs
-     * @param orientation - The thumb orientation ('horizontal' or 'vertical')
-     * @param props - Additional props to merge with the generated props
-     * @returns Object containing all necessary props for the thumb element
-     */
-    thumb(orientation, props = {}) {
-        const isHorizontal = orientation === 'horizontal';
-        // Calculate position and size based on orientation
-        // const position = isHorizontal ? this.getThumbXPosition() : this.getThumbYPosition();
-        // const size = isHorizontal ? this.getThumbXSize() : this.getThumbYSize();
-        // const styleProperty = isHorizontal ? 'left' : 'top';
-        // const sizeProperty = isHorizontal ? 'width' : 'height';
-        return {
-            'data-atom': this.id ?? '',
-            'data-kind': `scrollable-thumb-${isHorizontal ? 'x' : 'y'}`,
-            'data-direction': orientation,
-            ...props,
-            // Handle drag-to-scroll based on orientation
-            onmousedown: (e) => {
-                this.handleThumbDrag(e, isHorizontal ? 'x' : 'y');
-                if ('onmousedown' in props && typeof props.onmousedown === 'function') {
-                    props.onmousedown(e);
-                }
-            },
-            [createAttachmentKey()]: (node) => {
-                // Set both the unified thumb reference and the specific axis reference
-                if (isHorizontal) {
-                    this.elements.thumbX = node;
-                }
-                else {
-                    this.elements.thumbY = node;
-                }
-            }
-        };
+    get parent() {
+        return this.#parent;
     }
-    /**
-     * Handles click events on scrollbar tracks for jump-to-position scrolling
-     * Calculates the click position as a percentage and scrolls to that position
-     * @param e - The mouse event from the track click
-     * @param axis - The scroll axis ('x' for horizontal, 'y' for vertical)
-     */
-    handleTrackClick(e, axis) {
-        const container = this.elements.container;
-        const track = axis === 'x' ? this.elements.trackX : this.elements.trackY;
-        if (!container || !track)
-            return;
-        // Calculate click position relative to track boundaries
-        const rect = track.getBoundingClientRect();
-        const clickPosition = axis === 'x' ? e.clientX - rect.left : e.clientY - rect.top;
-        const trackSize = axis === 'x' ? rect.width : rect.height;
-        const percentage = clickPosition / trackSize;
-        // Apply scroll based on calculated percentage
-        if (axis === 'x') {
-            const maxScrollX = container.scrollWidth - container.clientWidth;
-            container.scrollLeft = percentage * maxScrollX;
-        }
-        else {
-            const maxScrollY = container.scrollHeight - container.clientHeight;
-            container.scrollTop = percentage * maxScrollY;
-        }
+    share() {
+        ScrollableBond.set(this);
+        return this;
     }
-    /**
-     * Handles mouse drag events on scrollbar thumbs for precise scrolling control
-     * Sets up mouse event listeners for drag-to-scroll functionality
-     * @param e - The initial mousedown event on the thumb
-     * @param axis - The scroll axis ('x' for horizontal, 'y' for vertical)
-     */
-    handleThumbDrag(e, axis) {
-        e.preventDefault();
-        // Set scrolling state to true
-        this.state.props.isScrolling = true;
-        const container = this.elements.container;
-        const track = axis === 'x' ? this.elements.trackX : this.elements.trackY;
-        if (!container || !track)
-            return;
-        // Capture initial state for drag calculations
-        const trackRect = track.getBoundingClientRect();
-        const startPos = axis === 'x' ? e.clientX : e.clientY;
-        const startScroll = axis === 'x' ? container.scrollLeft : container.scrollTop;
-        /**
-         * Handles mouse movement during thumb drag
-         * Calculates scroll position based on cursor movement relative to track size
-         */
-        const onMouseMove = (moveE) => {
-            const currentPos = axis === 'x' ? moveE.clientX : moveE.clientY;
-            const delta = currentPos - startPos;
-            const trackSize = axis === 'x' ? trackRect.width : trackRect.height;
-            // Apply proportional scrolling based on thumb movement
-            if (axis === 'x') {
-                const maxScrollX = container.scrollWidth - container.clientWidth;
-                const scrollDelta = (delta / trackSize) * maxScrollX;
-                container.scrollLeft = Math.max(0, Math.min(maxScrollX, startScroll + scrollDelta));
-            }
-            else {
-                const maxScrollY = container.scrollHeight - container.clientHeight;
-                const scrollDelta = (delta / trackSize) * maxScrollY;
-                container.scrollTop = Math.max(0, Math.min(maxScrollY, startScroll + scrollDelta));
-            }
-        };
-        /**
-         * Cleans up mouse event listeners when drag ends
-         */
-        const onMouseUp = () => {
-            // Set scrolling state to true
-            this.state.props.isScrolling = false;
-            document.removeEventListener('mousemove', onMouseMove);
-            document.removeEventListener('mouseup', onMouseUp);
-        };
-        // Set up global mouse event listeners for drag interaction
-        document.addEventListener('mousemove', onMouseMove);
-        document.addEventListener('mouseup', onMouseUp);
+    static get() {
+        return getContext(ScrollableBond.CONTEXT_KEY);
+    }
+    static set(bond) {
+        return setContext(ScrollableBond.CONTEXT_KEY, bond);
+    }
+    // ============================================================================
+    // Atom Helpers
+    // ============================================================================
+    root() {
+        return this.atom('root', () => new ScrollableRootAtom(this));
+    }
+    container() {
+        return this.atom('container', () => new ScrollableContainerAtom(this));
+    }
+    content() {
+        return this.atom('content', () => new ScrollableContentAtom(this));
+    }
+    trackX() {
+        return this.atom('trackX', () => new ScrollableTrackAtom(this, 'x'));
+    }
+    trackY() {
+        return this.atom('trackY', () => new ScrollableTrackAtom(this, 'y'));
     }
+    thumbX() {
+        return this.atom('thumbX', () => new ScrollableThumbAtom(this, 'x'));
+    }
+    thumbY() {
+        return this.atom('thumbY', () => new ScrollableThumbAtom(this, 'y'));
+    }
+    // ============================================================================
+    // Public API Methods
+    // ============================================================================
     /**
-     * Scrolls to an absolute position in the scrollable area
-     * @param x - The horizontal scroll position in pixels
-     * @param y - The vertical scroll position in pixels
+     * Scrolls to an absolute position
      */
     scrollTo(x, y) {
         const container = this.elements.container;
@@ -372,9 +162,7 @@ export class ScrollableBond extends Bond {
         }
     }
     /**
-     * Scrolls by a relative amount from the current position
-     * @param x - The horizontal scroll delta in pixels
-     * @param y - The vertical scroll delta in pixels
+     * Scrolls by a relative amount
      */
     scrollBy(x, y) {
         const container = this.elements.container;
@@ -383,9 +171,7 @@ export class ScrollableBond extends Bond {
         }
     }
     /**
-     * Scrolls an element into view within the scrollable area
-     * @param element - The element to scroll into view
-     * @param options - Optional scroll behavior configuration
+     * Scrolls an element into view
      */
     scrollIntoView(element, options) {
         const container = this.elements.container;
@@ -395,8 +181,6 @@ export class ScrollableBond extends Bond {
     }
     /**
      * Updates the internal scroll state based on current DOM measurements
-     * This method should be called when the scroll position or content size changes
-     * TODO: Implement reactive binding updates for scroll properties
      */
     updateScrollState() {
         const container = this.elements.container;
@@ -409,72 +193,112 @@ export class ScrollableBond extends Bond {
         this.state.props.clientWidth = container.clientWidth;
         this.state.props.clientHeight = container.clientHeight;
     }
-    /**
-     * Calculates the horizontal thumb position as a percentage
-     * @returns The left position of the horizontal thumb (0-100%)
-     */
+    // ============================================================================
+    // Scroll Calculations
+    // ============================================================================
     getThumbXPosition() {
         const { scrollX, clientWidth, scrollWidth } = this.state.props;
         if (scrollWidth <= clientWidth)
             return 0;
-        return (scrollX / (scrollWidth - clientWidth)) * 100;
+        const thumbSize = this.getThumbXSize();
+        const maxPosition = 100 - thumbSize;
+        const scrollPercentage = scrollX / (scrollWidth - clientWidth);
+        return scrollPercentage * maxPosition;
     }
-    /**
-     * Calculates the vertical thumb position as a percentage
-     * @returns The top position of the vertical thumb (0-100%)
-     */
     getThumbYPosition() {
         const { scrollY, clientHeight, scrollHeight } = this.state.props;
         if (scrollHeight <= clientHeight)
             return 0;
-        return (scrollY / (scrollHeight - clientHeight)) * 100;
+        const thumbSize = this.getThumbYSize();
+        const maxPosition = 100 - thumbSize;
+        const scrollPercentage = scrollY / (scrollHeight - clientHeight);
+        return scrollPercentage * maxPosition;
     }
-    /**
-     * Calculates the horizontal thumb size as a percentage
-     * @returns The width of the horizontal thumb (0-100%)
-     */
     getThumbXSize() {
         const { clientWidth, scrollWidth } = this.state.props;
         if (scrollWidth <= clientWidth)
             return 100;
         return (clientWidth / scrollWidth) * 100;
     }
-    /**
-     * Calculates the vertical thumb size as a percentage
-     * @returns The height of the vertical thumb (0-100%)
-     */
     getThumbYSize() {
         const { clientHeight, scrollHeight } = this.state.props;
         if (scrollHeight <= clientHeight)
             return 100;
         return (clientHeight / scrollHeight) * 100;
     }
-    /**
-     * Determines if horizontal scrolling is possible
-     * @returns True if content width exceeds visible area width
-     */
     get canScrollX() {
         const { scrollWidth, clientWidth } = this.state.props;
         return scrollWidth > clientWidth;
     }
-    /**
-     * Determines if vertical scrolling is possible
-     * @returns True if content height exceeds visible area height
-     */
     get canScrollY() {
         const { scrollHeight, clientHeight } = this.state.props;
         return scrollHeight > clientHeight;
     }
+    // ============================================================================
+    // Event Handlers
+    // ============================================================================
+    /**
+     * Handles click events on scrollbar tracks
+     */
+    handleTrackClick(e, axis) {
+        const container = this.elements.container;
+        const track = axis === 'x' ? this.elements.trackX : this.elements.trackY;
+        if (!container || !track)
+            return;
+        const rect = track.getBoundingClientRect();
+        const clickPosition = axis === 'x' ? e.clientX - rect.left : e.clientY - rect.top;
+        const trackSize = axis === 'x' ? rect.width : rect.height;
+        const percentage = clickPosition / trackSize;
+        if (axis === 'x') {
+            const maxScrollX = container.scrollWidth - container.clientWidth;
+            container.scrollLeft = percentage * maxScrollX;
+        }
+        else {
+            const maxScrollY = container.scrollHeight - container.clientHeight;
+            container.scrollTop = percentage * maxScrollY;
+        }
+    }
+    /**
+     * Handles mouse drag events on scrollbar thumbs
+     */
+    handleThumbDrag(e, axis) {
+        e.preventDefault();
+        this.state.props.isScrolling = true;
+        const container = this.elements.container;
+        const track = axis === 'x' ? this.elements.trackX : this.elements.trackY;
+        if (!container || !track)
+            return;
+        const trackRect = track.getBoundingClientRect();
+        const startPos = axis === 'x' ? e.clientX : e.clientY;
+        const startScroll = axis === 'x' ? container.scrollLeft : container.scrollTop;
+        const onMouseMove = (moveE) => {
+            const currentPos = axis === 'x' ? moveE.clientX : moveE.clientY;
+            const delta = currentPos - startPos;
+            const trackSize = axis === 'x' ? trackRect.width : trackRect.height;
+            if (axis === 'x') {
+                const maxScrollX = container.scrollWidth - container.clientWidth;
+                const scrollDelta = (delta / trackSize) * maxScrollX;
+                container.scrollLeft = Math.max(0, Math.min(maxScrollX, startScroll + scrollDelta));
+            }
+            else {
+                const maxScrollY = container.scrollHeight - container.clientHeight;
+                const scrollDelta = (delta / trackSize) * maxScrollY;
+                container.scrollTop = Math.max(0, Math.min(maxScrollY, startScroll + scrollDelta));
+            }
+        };
+        const onMouseUp = () => {
+            this.state.props.isScrolling = false;
+            document.removeEventListener('mousemove', onMouseMove);
+            document.removeEventListener('mouseup', onMouseUp);
+        };
+        document.addEventListener('mousemove', onMouseMove);
+        document.addEventListener('mouseup', onMouseUp);
+    }
 }
 /**
  * Reactive state container for scrollable component properties
- * Extends BondState to provide typed access to scroll-related data
  */
 export class ScrollableState extends BondState {
-    /**
-     * Creates a new scrollable state instance
-     * @param props - Function that returns the current state properties
-     */
     constructor(props) {
         super(props);
     }