sheer-ui 0.4.2 → 0.5.0

package/dist/internal/paneforge/paneforge.svelte.js

@@ -0,0 +1,650 @@
+import { createContext, getAbortSignal, onMount, tick, untrack } from 'svelte';
+import { on } from 'svelte/events';
+import { attachRef, DOMContext, } from '../tools/index.js';
+import { callPaneCallbacks, findPaneDataIndex, getDeltaPercentage, getPivotIndices, getResizeEventCursorPosition, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePaneIds, getUnsafeDefaultLayout, paneDataHelper, updateResizeHandleAriaValues, validatePaneGroupLayout, } from './internal/helpers.js';
+import { isKeyDown, isMouseEvent, isTouchEvent } from './internal/utils/is.js';
+import { adjustLayoutByDelta } from './internal/utils/adjust-layout.js';
+import { arraysAreEqual as areArraysEqual } from '../arrays.js';
+import { areNumbersAlmostEqual } from './internal/utils/compare.js';
+import { computePaneFlexBoxStyle, getCursorStyle, resetGlobalCursorStyle, setGlobalCursorStyle } from './internal/utils/style.js';
+import { initializeStorage, loadPaneGroupState, updateStorageValues } from './internal/utils/storage.js';
+export const defaultStorage = {
+    getItem: (name) => {
+        initializeStorage(defaultStorage);
+        return defaultStorage.getItem(name);
+    },
+    setItem: (name, value) => {
+        initializeStorage(defaultStorage);
+        defaultStorage.setItem(name, value);
+    },
+};
+const [getPaneGroupContext, setPaneGroupContext] = createContext();
+export class PaneGroupState {
+    static create(opts) {
+        return setPaneGroupContext(new PaneGroupState(opts));
+    }
+    opts;
+    attachment;
+    domContext;
+    dragState = $state.raw(null);
+    layout = $state.raw([]);
+    panesArray = $state.raw([]);
+    panesArrayChanged = $state(false);
+    // Written on every resize event; nothing derives from it, so keep it non-reactive.
+    paneIdToLastNotifiedSizeMap = {};
+    paneSizeBeforeCollapseMap = new Map();
+    prevDelta = 0;
+    constructor(opts) {
+        this.opts = opts;
+        this.attachment = attachRef(this.opts.ref);
+        this.domContext = new DOMContext(this.opts.ref);
+        $effect(() => {
+            const groupId = this.opts.id.current;
+            const layout = this.layout;
+            const panesArray = this.panesArray;
+            return untrack(() => {
+                return updateResizeHandleAriaValues({
+                    groupId,
+                    layout,
+                    panesArray,
+                    domContext: this.domContext,
+                });
+            });
+        });
+        // Track id + panesArray so handles added after initial mount get their keydown
+        // listeners — mirrors the effect deps in react-resizable-panels'
+        // useWindowSplitterPanelGroupBehavior. Layout is deliberately left untracked:
+        // the handlers read it live, and tracking it would re-attach listeners on
+        // every drag frame.
+        $effect(() => {
+            void this.opts.id.current;
+            void this.panesArray;
+            return untrack(() => {
+                return this.#setResizeHandlerEventListeners();
+            });
+        });
+        $effect(() => {
+            const autoSaveId = this.opts.autoSaveId.current;
+            const layout = this.layout;
+            const storage = this.opts.storage.current;
+            untrack(() => {
+                if (!autoSaveId)
+                    return;
+                updateStorageValues({
+                    autoSaveId,
+                    layout,
+                    storage,
+                    panesArray: this.panesArray,
+                    paneSizeBeforeCollapse: this.paneSizeBeforeCollapseMap,
+                });
+            });
+        });
+        $effect(() => {
+            const panesArrayChanged = this.panesArrayChanged;
+            untrack(() => {
+                if (!panesArrayChanged)
+                    return;
+                this.panesArrayChanged = false;
+                const prevLayout = this.layout;
+                let unsafeLayout = null;
+                if (this.opts.autoSaveId.current) {
+                    const state = loadPaneGroupState(this.opts.autoSaveId.current, this.panesArray, this.opts.storage.current);
+                    if (state) {
+                        this.paneSizeBeforeCollapseMap = new Map(Object.entries(state.expandToSizes));
+                        unsafeLayout = state.layout;
+                    }
+                }
+                if (unsafeLayout == null) {
+                    unsafeLayout = getUnsafeDefaultLayout({
+                        panesArray: this.panesArray,
+                    });
+                }
+                const nextLayout = validatePaneGroupLayout({
+                    layout: unsafeLayout,
+                    paneConstraints: this.panesArray.map((paneData) => paneData.constraints),
+                });
+                if (areArraysEqual(prevLayout, nextLayout))
+                    return;
+                this.layout = nextLayout;
+                this.opts.onLayout.current?.(nextLayout);
+                callPaneCallbacks(this.panesArray, nextLayout, this.paneIdToLastNotifiedSizeMap);
+            });
+        });
+    }
+    setLayout = (newLayout) => {
+        this.layout = newLayout;
+    };
+    registerResizeHandle = (dragHandleId) => {
+        return (event) => {
+            event.preventDefault();
+            const direction = this.opts.direction.current;
+            const dragState = this.dragState;
+            const groupId = this.opts.id.current;
+            const keyboardResizeBy = this.opts.keyboardResizeBy.current;
+            const prevLayout = this.layout;
+            const paneDataArray = this.panesArray;
+            const { initialLayout } = dragState ?? {};
+            const doc = this.domContext.getDocument();
+            const pivotIndices = getPivotIndices({
+                groupId,
+                dragHandleId,
+                domContext: this.domContext,
+            });
+            if (!pivotIndices)
+                return;
+            let delta = getDeltaPercentage({
+                event: event,
+                dir: direction,
+                initialDragState: dragState,
+                keyboardResizeBy,
+            });
+            if (delta === 0)
+                return;
+            // support RTL
+            const isHorizontal = direction === 'horizontal';
+            if (doc.dir === 'rtl' && isHorizontal) {
+                delta = -delta;
+            }
+            const paneConstraints = paneDataArray.map((paneData) => paneData.constraints);
+            const nextLayout = adjustLayoutByDelta({
+                delta,
+                layout: initialLayout ?? prevLayout,
+                paneConstraints,
+                pivotIndices,
+                trigger: isKeyDown(event) ? 'keyboard' : 'mouse-or-touch',
+            });
+            const layoutChanged = !areArraysEqual(prevLayout, nextLayout);
+            // Only update the cursor for layout changes triggered by touch/mouse events (not keyboard)
+            // Update the cursor even if the layout hasn't changed (we may need to show an invalid cursor state)
+            if (isMouseEvent(event) || isTouchEvent(event)) {
+                // Watch for multiple subsequent deltas; this might occur for tiny cursor movements.
+                // In this case, Pane sizes might not change–
+                // but updating cursor in this scenario would cause a flicker.
+                const prevDelta = this.prevDelta;
+                if (prevDelta !== delta) {
+                    this.prevDelta = delta;
+                    if (!layoutChanged) {
+                        // If the pointer has moved too far to resize the pane any further,
+                        // update the cursor style for a visual clue.
+                        // This mimics VS Code behavior.
+                        if (isHorizontal) {
+                            setGlobalCursorStyle(delta < 0 ? 'horizontal-min' : 'horizontal-max', doc);
+                        }
+                        else {
+                            setGlobalCursorStyle(delta < 0 ? 'vertical-min' : 'vertical-max', doc);
+                        }
+                    }
+                    else {
+                        setGlobalCursorStyle(isHorizontal ? 'horizontal' : 'vertical', doc);
+                    }
+                }
+            }
+            if (layoutChanged) {
+                this.setLayout(nextLayout);
+                this.opts.onLayout.current?.(nextLayout);
+                callPaneCallbacks(paneDataArray, nextLayout, this.paneIdToLastNotifiedSizeMap);
+            }
+        };
+    };
+    resizePane = (paneState, unsafePaneSize) => {
+        const prevLayout = this.layout;
+        const panesArray = this.panesArray;
+        const paneConstraintsArr = panesArray.map((paneData) => paneData.constraints);
+        const { paneSize, pivotIndices } = paneDataHelper(panesArray, paneState, prevLayout);
+        if (paneSize == null || !pivotIndices)
+            return;
+        const isLastPane = findPaneDataIndex(panesArray, paneState) === panesArray.length - 1;
+        const delta = isLastPane ? paneSize - unsafePaneSize : unsafePaneSize - paneSize;
+        const nextLayout = adjustLayoutByDelta({
+            delta,
+            layout: prevLayout,
+            paneConstraints: paneConstraintsArr,
+            pivotIndices,
+            trigger: 'imperative-api',
+        });
+        if (areArraysEqual(prevLayout, nextLayout))
+            return;
+        this.setLayout(nextLayout);
+        this.opts.onLayout.current?.(nextLayout);
+        callPaneCallbacks(panesArray, nextLayout, this.paneIdToLastNotifiedSizeMap);
+    };
+    startDragging = (dragHandleId, e) => {
+        const direction = this.opts.direction.current;
+        const layout = this.layout;
+        const groupElement = this.opts.ref.current;
+        if (!groupElement)
+            return false;
+        const groupRect = groupElement.getBoundingClientRect();
+        const groupSizeInPixels = direction === 'horizontal' ? groupRect.width : groupRect.height;
+        if (groupSizeInPixels <= 0)
+            return false;
+        const initialCursorPosition = getResizeEventCursorPosition(direction, e);
+        if (initialCursorPosition == null)
+            return false;
+        this.dragState = {
+            dragHandleId,
+            groupSizeInPixels,
+            initialCursorPosition,
+            initialLayout: layout,
+        };
+        return true;
+    };
+    stopDragging = () => {
+        resetGlobalCursorStyle();
+        this.dragState = null;
+    };
+    isPaneCollapsed = (pane) => {
+        const paneDataArray = this.panesArray;
+        const layout = this.layout;
+        const { collapsedSize = 0, collapsible, paneSize } = paneDataHelper(paneDataArray, pane, layout);
+        // On init the value may be undefined, so we need to check for that
+        if (typeof paneSize !== 'number' || typeof collapsedSize !== 'number')
+            return false;
+        return collapsible === true && areNumbersAlmostEqual(paneSize, collapsedSize);
+    };
+    expandPane = (pane) => {
+        const prevLayout = this.layout;
+        const paneDataArray = this.panesArray;
+        if (!pane.constraints.collapsible)
+            return;
+        const paneConstraintsArray = paneDataArray.map((paneData) => paneData.constraints);
+        const { collapsedSize = 0, paneSize, minSize = 0, pivotIndices, } = paneDataHelper(paneDataArray, pane, prevLayout);
+        if (paneSize !== collapsedSize || !pivotIndices)
+            return;
+        // restore this pane to the size it was before it was collapsed, if possible.
+        const prevPaneSize = this.paneSizeBeforeCollapseMap.get(pane.opts.id.current);
+        const baseSize = prevPaneSize != null && prevPaneSize >= minSize ? prevPaneSize : minSize;
+        const isLastPane = findPaneDataIndex(paneDataArray, pane) === paneDataArray.length - 1;
+        const delta = isLastPane ? paneSize - baseSize : baseSize - paneSize;
+        const nextLayout = adjustLayoutByDelta({
+            delta,
+            layout: prevLayout,
+            paneConstraints: paneConstraintsArray,
+            pivotIndices,
+            trigger: 'imperative-api',
+        });
+        if (areArraysEqual(prevLayout, nextLayout))
+            return;
+        this.setLayout(nextLayout);
+        this.opts.onLayout.current?.(nextLayout);
+        callPaneCallbacks(paneDataArray, nextLayout, this.paneIdToLastNotifiedSizeMap);
+    };
+    collapsePane = (pane) => {
+        const prevLayout = this.layout;
+        const paneDataArray = this.panesArray;
+        if (!pane.constraints.collapsible)
+            return;
+        const paneConstraintsArray = paneDataArray.map((paneData) => paneData.constraints);
+        const { collapsedSize = 0, paneSize, pivotIndices } = paneDataHelper(paneDataArray, pane, prevLayout);
+        if (paneSize == null || !pivotIndices)
+            return;
+        if (paneSize === collapsedSize)
+            return;
+        // Store the size before collapse, which is returned when `expand()` is called
+        this.paneSizeBeforeCollapseMap.set(pane.opts.id.current, paneSize);
+        const isLastPane = findPaneDataIndex(paneDataArray, pane) === paneDataArray.length - 1;
+        const delta = isLastPane ? paneSize - collapsedSize : collapsedSize - paneSize;
+        const nextLayout = adjustLayoutByDelta({
+            delta,
+            layout: prevLayout,
+            paneConstraints: paneConstraintsArray,
+            pivotIndices,
+            trigger: 'imperative-api',
+        });
+        if (areArraysEqual(prevLayout, nextLayout))
+            return;
+        this.layout = nextLayout;
+        this.opts.onLayout.current?.(nextLayout);
+        callPaneCallbacks(paneDataArray, nextLayout, this.paneIdToLastNotifiedSizeMap);
+    };
+    getPaneSize = (pane) => {
+        return paneDataHelper(this.panesArray, pane, this.layout).paneSize;
+    };
+    getPaneStyle = (pane, defaultSize) => {
+        const paneDataArray = this.panesArray;
+        const layout = this.layout;
+        const dragState = this.dragState;
+        const paneIndex = findPaneDataIndex(paneDataArray, pane);
+        return computePaneFlexBoxStyle({
+            defaultSize,
+            dragState,
+            layout,
+            panesArray: paneDataArray,
+            paneIndex,
+        });
+    };
+    isPaneExpanded = (pane) => {
+        const { collapsedSize = 0, collapsible, paneSize } = paneDataHelper(this.panesArray, pane, this.layout);
+        return !collapsible || (paneSize != null && paneSize > collapsedSize);
+    };
+    registerPane = (pane) => {
+        const newPaneDataArray = [...this.panesArray, pane];
+        newPaneDataArray.sort((paneA, paneB) => {
+            const orderA = paneA.opts.order.current;
+            const orderB = paneB.opts.order.current;
+            if (orderA == null && orderB == null) {
+                return 0;
+            }
+            else if (orderA == null) {
+                return -1;
+            }
+            else if (orderB == null) {
+                return 1;
+            }
+            else {
+                return orderA - orderB;
+            }
+        });
+        this.panesArray = newPaneDataArray;
+        this.panesArrayChanged = true;
+        return () => {
+            const paneDataArray = [...this.panesArray];
+            const index = findPaneDataIndex(this.panesArray, pane);
+            if (index < 0)
+                return;
+            paneDataArray.splice(index, 1);
+            this.panesArray = paneDataArray;
+            delete this.paneIdToLastNotifiedSizeMap[pane.opts.id.current];
+            this.panesArrayChanged = true;
+        };
+    };
+    #setResizeHandlerEventListeners = () => {
+        const groupId = this.opts.id.current;
+        const handles = getResizeHandleElementsForGroup(groupId, this.domContext);
+        const paneDataArray = this.panesArray;
+        const unsubHandlers = handles.map((handle) => {
+            const handleId = handle.getAttribute('data-pane-resizer-id');
+            if (!handleId)
+                return () => { };
+            const [idBefore, idAfter] = getResizeHandlePaneIds({
+                groupId,
+                handleId,
+                panesArray: paneDataArray,
+                domContext: this.domContext,
+            });
+            if (idBefore == null || idAfter == null)
+                return () => { };
+            const onKeydown = (e) => {
+                if (e.defaultPrevented || e.key !== 'Enter')
+                    return;
+                e.preventDefault();
+                const paneDataArray = this.panesArray;
+                const index = paneDataArray.findIndex((paneData) => paneData.opts.id.current === idBefore);
+                if (index < 0)
+                    return;
+                const paneData = paneDataArray[index];
+                if (!paneData)
+                    return;
+                const layout = this.layout;
+                const size = layout[index];
+                const { collapsedSize = 0, collapsible, minSize = 0 } = paneData.constraints;
+                if (!(size != null && collapsible))
+                    return;
+                const pivotIndices = getPivotIndices({
+                    groupId,
+                    dragHandleId: handleId,
+                    domContext: this.domContext,
+                });
+                if (!pivotIndices)
+                    return;
+                const nextLayout = adjustLayoutByDelta({
+                    delta: areNumbersAlmostEqual(size, collapsedSize) ? minSize - size : collapsedSize - size,
+                    layout,
+                    paneConstraints: paneDataArray.map((paneData) => paneData.constraints),
+                    pivotIndices,
+                    trigger: 'keyboard',
+                });
+                if (layout !== nextLayout) {
+                    this.layout = nextLayout;
+                }
+            };
+            const unsubListener = on(handle, 'keydown', onKeydown);
+            return () => {
+                unsubListener();
+            };
+        });
+        return () => {
+            for (const unsub of unsubHandlers) {
+                unsub();
+            }
+        };
+    };
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        'data-pane-group': '',
+        'data-direction': this.opts.direction.current,
+        'data-pane-group-id': this.opts.id.current,
+        style: {
+            display: 'flex',
+            flexDirection: this.opts.direction.current === 'horizontal' ? 'row' : 'column',
+            height: '100%',
+            overflow: 'hidden',
+            width: '100%',
+        },
+        ...this.attachment,
+    }));
+}
+const resizeKeys = ['ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'End', 'Home'];
+export class PaneResizerState {
+    static create(opts) {
+        return new PaneResizerState(opts, getPaneGroupContext());
+    }
+    opts;
+    #group;
+    attachment;
+    domContext;
+    #isDragging = $derived.by(() => this.#group.dragState?.dragHandleId === this.opts.id.current);
+    #isFocused = $state(false);
+    resizeHandler = $derived.by(() => this.opts.disabled.current ? null : this.#group.registerResizeHandle(this.opts.id.current));
+    constructor(opts, group) {
+        this.opts = opts;
+        this.#group = group;
+        this.attachment = attachRef(this.opts.ref);
+        this.domContext = new DOMContext(this.opts.ref);
+        $effect(() => {
+            const node = this.opts.ref.current;
+            if (!node)
+                return;
+            const disabled = this.opts.disabled.current;
+            const resizeHandler = this.resizeHandler;
+            const isDragging = this.#isDragging;
+            if (disabled || resizeHandler === null || !isDragging)
+                return;
+            const stopDraggingAndBlur = () => {
+                node.blur();
+                this.#group.stopDragging();
+                this.opts.onDraggingChange.current(false);
+            };
+            const domBody = this.domContext.getDocument().body;
+            const domWindow = this.domContext.getWindow();
+            const signal = getAbortSignal();
+            on(domBody, 'contextmenu', stopDraggingAndBlur, { signal });
+            on(domBody, 'mousemove', resizeHandler, { signal });
+            on(domBody, 'touchmove', resizeHandler, { passive: false, signal });
+            on(domBody, 'mouseleave', resizeHandler, { signal });
+            on(domWindow, 'mouseup', stopDraggingAndBlur, { signal });
+            on(domWindow, 'touchend', stopDraggingAndBlur, { signal });
+        });
+    }
+    #startDragging = (e) => {
+        e.preventDefault();
+        if (this.opts.disabled.current)
+            return;
+        if (!this.#group.startDragging(this.opts.id.current, e))
+            return;
+        this.opts.onDraggingChange.current(true);
+    };
+    #stopDraggingAndBlur = () => {
+        const node = this.opts.ref.current;
+        if (!node)
+            return;
+        node.blur();
+        this.#group.stopDragging();
+        this.opts.onDraggingChange.current(false);
+    };
+    #onkeydown = (e) => {
+        if (this.opts.disabled.current || !this.resizeHandler || e.defaultPrevented)
+            return;
+        if (resizeKeys.includes(e.key)) {
+            e.preventDefault();
+            this.resizeHandler(e);
+            return;
+        }
+        if (e.key !== 'F6')
+            return;
+        e.preventDefault();
+        const handles = getResizeHandleElementsForGroup(this.#group.opts.id.current, this.domContext);
+        const index = getResizeHandleElementIndex({
+            groupId: this.#group.opts.id.current,
+            id: this.opts.id.current,
+            domContext: this.domContext,
+        });
+        if (index === null)
+            return;
+        let nextIndex = 0;
+        if (e.shiftKey) {
+            // Moving backwards
+            if (index > 0) {
+                nextIndex = index - 1;
+            }
+            else {
+                nextIndex = handles.length - 1;
+            }
+        }
+        else {
+            // Moving forwards
+            if (index + 1 < handles.length) {
+                nextIndex = index + 1;
+            }
+            else {
+                nextIndex = 0;
+            }
+        }
+        const nextHandle = handles[nextIndex];
+        nextHandle.focus();
+    };
+    #onblur = () => {
+        this.#isFocused = false;
+    };
+    #onfocus = () => {
+        this.#isFocused = true;
+    };
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        role: 'separator',
+        'data-direction': this.#group.opts.direction.current,
+        'data-pane-group-id': this.#group.opts.id.current,
+        'data-active': this.#isDragging ? 'pointer' : this.#isFocused ? 'keyboard' : undefined,
+        'data-enabled': !this.opts.disabled.current,
+        'data-pane-resizer-id': this.opts.id.current,
+        'data-pane-resizer': '',
+        tabIndex: this.opts.tabIndex.current,
+        style: {
+            cursor: getCursorStyle(this.#group.opts.direction.current),
+            touchAction: 'none',
+            userSelect: 'none',
+            '-webkit-user-select': 'none',
+            '-webkit-touch-callout': 'none',
+        },
+        onkeydown: this.#onkeydown,
+        onblur: this.#onblur,
+        onfocus: this.#onfocus,
+        onmousedown: this.#startDragging,
+        onmouseup: this.#stopDraggingAndBlur,
+        ontouchcancel: this.#stopDraggingAndBlur,
+        ontouchend: this.#stopDraggingAndBlur,
+        ontouchstart: this.#startDragging,
+        ...this.attachment,
+    }));
+}
+export class PaneState {
+    static create(opts) {
+        return new PaneState(opts, getPaneGroupContext());
+    }
+    opts;
+    group;
+    attachment;
+    domContext;
+    #paneTransitionState = $state('');
+    callbacks = $derived.by(() => ({
+        onCollapse: this.opts.onCollapse.current,
+        onExpand: this.opts.onExpand.current,
+        onResize: this.opts.onResize.current,
+    }));
+    constraints = $derived.by(() => ({
+        collapsedSize: this.opts.collapsedSize.current,
+        collapsible: this.opts.collapsible.current,
+        defaultSize: this.opts.defaultSize.current,
+        maxSize: this.opts.maxSize.current,
+        minSize: this.opts.minSize.current,
+    }));
+    #handleTransition = (state) => {
+        this.#paneTransitionState = state;
+        tick().then(() => {
+            if (this.opts.ref.current) {
+                const element = this.opts.ref.current;
+                const computedStyle = getComputedStyle(element);
+                const hasTransition = computedStyle.transitionDuration !== '0s';
+                if (!hasTransition) {
+                    this.#paneTransitionState = '';
+                    return;
+                }
+                const handleTransitionEnd = (event) => {
+                    // Only handle width/flex transitions
+                    if (event.propertyName === 'flex-grow') {
+                        this.#paneTransitionState = '';
+                        element.removeEventListener('transitionend', handleTransitionEnd);
+                    }
+                };
+                // Always add the listener - if there's no transition, it won't fire
+                element.addEventListener('transitionend', handleTransitionEnd);
+            }
+            else {
+                this.#paneTransitionState = '';
+            }
+        });
+    };
+    pane = {
+        collapse: () => {
+            this.#handleTransition('collapsing');
+            this.group.collapsePane(this);
+        },
+        expand: () => {
+            this.#handleTransition('expanding');
+            this.group.expandPane(this);
+        },
+        getSize: () => this.group.getPaneSize(this),
+        isCollapsed: () => this.group.isPaneCollapsed(this),
+        isExpanded: () => this.group.isPaneExpanded(this),
+        resize: (size) => this.group.resizePane(this, size),
+        getId: () => this.opts.id.current,
+    };
+    constructor(opts, group) {
+        this.opts = opts;
+        this.group = group;
+        this.attachment = attachRef(this.opts.ref);
+        this.domContext = new DOMContext(this.opts.ref);
+        onMount(() => {
+            return this.group.registerPane(this);
+        });
+        // constraints is a fresh plain object per recompute, so reading it is enough
+        // to re-run whenever any constraint option changes.
+        $effect(() => {
+            void this.constraints;
+            this.group.panesArrayChanged = true;
+        });
+    }
+    #isCollapsed = $derived.by(() => this.group.isPaneCollapsed(this));
+    #paneState = $derived.by(() => (this.#paneTransitionState !== '' ? this.#paneTransitionState : this.#isCollapsed ? 'collapsed' : 'expanded'));
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        style: this.group.getPaneStyle(this, this.opts.defaultSize.current),
+        'data-pane': '',
+        'data-pane-id': this.opts.id.current,
+        'data-pane-group-id': this.group.opts.id.current,
+        'data-collapsed': this.#isCollapsed ? '' : undefined,
+        'data-expanded': this.#isCollapsed ? undefined : '',
+        'data-pane-state': this.#paneState,
+        ...this.attachment,
+    }));
+}