sheer-ui 0.4.2 → 0.5.0

package/dist/internal/paneforge/internal/utils/adjust-layout.js

@@ -0,0 +1,101 @@
+import { areNumbersAlmostEqual, compareNumbersWithTolerance } from './compare.js';
+import { resizePane } from './resize.js';
+/**
+ * Adjusts the layout of panes based on the delta of the resize handle.
+ * All units must be in percentages; pixel values should be pre-converted.
+ *
+ * Credit: https://github.com/bvaughn/react-resizable-panels
+ */
+export function adjustLayoutByDelta({ delta, layout: prevLayout, paneConstraints, pivotIndices: [firstPivotIndex, secondPivotIndex], trigger, }) {
+    if (areNumbersAlmostEqual(delta, 0))
+        return prevLayout;
+    if (prevLayout.length !== paneConstraints.length)
+        return prevLayout;
+    if (!Number.isInteger(firstPivotIndex) ||
+        !Number.isInteger(secondPivotIndex) ||
+        firstPivotIndex < 0 ||
+        secondPivotIndex < 0 ||
+        secondPivotIndex !== firstPivotIndex + 1 ||
+        firstPivotIndex >= prevLayout.length ||
+        secondPivotIndex >= prevLayout.length) {
+        return prevLayout;
+    }
+    for (let index = 0; index < prevLayout.length; index++) {
+        if (prevLayout[index] == null || paneConstraints[index] == null)
+            return prevLayout;
+    }
+    const nextLayout = [...prevLayout];
+    const safeSize = (paneIndex, initialSize) => resizePane({ paneConstraints, paneIndex, initialSize });
+    // Keyboard resizes snap collapsible panes through their full collapsed<->min transition,
+    // rather than gating on the halfway threshold (which could prevent expansion entirely).
+    if (trigger === 'keyboard')
+        for (const expand of [true, false]) {
+            const index = delta < 0 === expand ? secondPivotIndex : firstPivotIndex;
+            const constraints = paneConstraints[index];
+            if (!constraints.collapsible)
+                continue;
+            const { collapsedSize = 0, minSize = 0 } = constraints;
+            const prevSize = prevLayout[index];
+            if (!areNumbersAlmostEqual(prevSize, expand ? collapsedSize : minSize))
+                continue;
+            const localDelta = expand ? minSize - prevSize : prevSize - collapsedSize;
+            if (compareNumbersWithTolerance(localDelta, Math.abs(delta)) > 0)
+                delta = delta < 0 ? -localDelta : localDelta;
+        }
+    // Clamp the requested delta to the max the panes opposite the pivot can actually yield.
+    {
+        const increment = delta < 0 ? 1 : -1;
+        let maxAvailableDelta = 0;
+        for (let index = delta < 0 ? secondPivotIndex : firstPivotIndex; index >= 0 && index < paneConstraints.length; index += increment) {
+            const prevSize = prevLayout[index];
+            maxAvailableDelta += safeSize(index, 100) - prevSize;
+        }
+        const minAbsDelta = Math.min(Math.abs(delta), Math.abs(maxAvailableDelta));
+        delta = delta < 0 ? -minAbsDelta : minAbsDelta;
+    }
+    // Subtract the delta from panes on one side of the pivot, within their constraints.
+    let deltaApplied = 0;
+    {
+        let index = delta < 0 ? firstPivotIndex : secondPivotIndex;
+        while (index >= 0 && index < paneConstraints.length) {
+            const prevSize = prevLayout[index];
+            const next = safeSize(index, prevSize - (Math.abs(delta) - Math.abs(deltaApplied)));
+            if (!areNumbersAlmostEqual(prevSize, next)) {
+                deltaApplied += prevSize - next;
+                nextLayout[index] = next;
+                if (deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), undefined, { numeric: true }) >= 0)
+                    break;
+            }
+            index += delta < 0 ? -1 : 1;
+        }
+    }
+    // Nothing moved — bail (e.g. drag past a pane's boundary).
+    if (areNumbersAlmostEqual(deltaApplied, 0))
+        return prevLayout;
+    // Add the applied delta to the pivot pane on the other side.
+    {
+        const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex;
+        const prevSize = prevLayout[pivotIndex];
+        const unsafeSize = prevSize + deltaApplied;
+        const size = safeSize(pivotIndex, unsafeSize);
+        nextLayout[pivotIndex] = size;
+        // Expanding/contracting one pane flipped another's collapsed state — redistribute the remainder.
+        if (!areNumbersAlmostEqual(size, unsafeSize)) {
+            let deltaRemaining = unsafeSize - size;
+            let index = pivotIndex;
+            while (index >= 0 && index < paneConstraints.length) {
+                const prevSize = nextLayout[index];
+                const next = safeSize(index, prevSize + deltaRemaining);
+                if (!areNumbersAlmostEqual(prevSize, next)) {
+                    deltaRemaining -= next - prevSize;
+                    nextLayout[index] = next;
+                }
+                if (areNumbersAlmostEqual(deltaRemaining, 0))
+                    break;
+                index += delta > 0 ? -1 : 1;
+            }
+        }
+    }
+    const totalSize = nextLayout.reduce((total, size) => total + size, 0);
+    return areNumbersAlmostEqual(totalSize, 100) ? nextLayout : prevLayout;
+}

package/dist/internal/paneforge/internal/utils/aria.d.ts

@@ -0,0 +1,14 @@
+import type { PaneState } from '../../paneforge.svelte.js';
+/**
+ * Calculates `aria-valuemax`/`aria-valuemin`/`aria-valuenow` for the pane at
+ * `pivotIndices[0]`, accounting for the min/max sizes of all other panes.
+ */
+export declare const calculateAriaValues: ({ layout, panesArray, pivotIndices: [firstIndex], }: {
+    layout: number[];
+    panesArray: PaneState[];
+    pivotIndices: number[];
+}) => {
+    valueMax: number;
+    valueMin: number;
+    valueNow: number | undefined;
+};

package/dist/internal/paneforge/internal/utils/aria.js

@@ -0,0 +1,25 @@
+/**
+ * Calculates `aria-valuemax`/`aria-valuemin`/`aria-valuenow` for the pane at
+ * `pivotIndices[0]`, accounting for the min/max sizes of all other panes.
+ */
+export const calculateAriaValues = ({ layout, panesArray, pivotIndices: [firstIndex], }) => {
+    let currentMinSize = 0;
+    let currentMaxSize = 100;
+    let totalMinSize = 0;
+    let totalMaxSize = 0;
+    panesArray.forEach(({ constraints: { maxSize = 100, minSize = 0 } }, i) => {
+        if (i === firstIndex) {
+            currentMinSize = minSize;
+            currentMaxSize = maxSize;
+        }
+        else {
+            totalMinSize += minSize;
+            totalMaxSize += maxSize;
+        }
+    });
+    return {
+        valueMax: Math.min(currentMaxSize, 100 - totalMinSize),
+        valueMin: Math.max(currentMinSize, 100 - totalMaxSize),
+        valueNow: layout[firstIndex],
+    };
+};

package/dist/internal/paneforge/internal/utils/compare.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Compares two numbers for equality with a given fractional precision.
+ */
+export declare const areNumbersAlmostEqual: (actual: number, expected: number, digits?: number) => boolean;
+/**
+ * Compares two numbers with a given tolerance.
+ *
+ * @returns `-1` if `actual` is less than `expected`, `0` if they are equal,
+ * and `1` if `actual` is greater than `expected`.
+ */
+export declare const compareNumbersWithTolerance: (actual: number, expected: number, digits?: number) => number;

package/dist/internal/paneforge/internal/utils/compare.js

@@ -0,0 +1,12 @@
+import { PRECISION } from '../constants.js';
+/**
+ * Compares two numbers for equality with a given fractional precision.
+ */
+export const areNumbersAlmostEqual = (actual, expected, digits = PRECISION) => actual.toFixed(digits) === expected.toFixed(digits);
+/**
+ * Compares two numbers with a given tolerance.
+ *
+ * @returns `-1` if `actual` is less than `expected`, `0` if they are equal,
+ * and `1` if `actual` is greater than `expected`.
+ */
+export const compareNumbersWithTolerance = (actual, expected, digits = PRECISION) => Math.sign(Number(actual.toFixed(digits)) - Number(expected.toFixed(digits)));

package/dist/internal/paneforge/internal/utils/is.d.ts

@@ -0,0 +1,4 @@
+import type { ResizeEvent } from '../types.js';
+export declare function isKeyDown(event: ResizeEvent): event is KeyboardEvent;
+export declare function isMouseEvent(event: ResizeEvent): event is MouseEvent;
+export declare function isTouchEvent(event: ResizeEvent): event is TouchEvent;

package/dist/internal/paneforge/internal/utils/is.js

@@ -0,0 +1,9 @@
+export function isKeyDown(event) {
+    return event.type === 'keydown';
+}
+export function isMouseEvent(event) {
+    return event.type.startsWith('mouse');
+}
+export function isTouchEvent(event) {
+    return event.type.startsWith('touch');
+}

package/dist/internal/paneforge/internal/utils/resize.d.ts

@@ -0,0 +1,7 @@
+import type { PaneConstraints } from '../types.js';
+/** Resizes a pane based on its constraints. */
+export declare const resizePane: ({ paneConstraints, paneIndex, initialSize, }: {
+    paneConstraints: PaneConstraints[];
+    paneIndex: number;
+    initialSize: number;
+}) => number;

package/dist/internal/paneforge/internal/utils/resize.js

@@ -0,0 +1,18 @@
+import { PRECISION } from '../constants.js';
+import { compareNumbersWithTolerance } from './compare.js';
+/**
+ * If the pane is collapsible, snaps below-min sizes to `collapsedSize` or
+ * `minSize` based on the halfway point; otherwise clamps to `minSize`.
+ */
+const getAdjustedSizeForCollapsible = (size, collapsible, collapsedSize, minSize) => !collapsible ? minSize : compareNumbersWithTolerance(size, (collapsedSize + minSize) / 2) < 0 ? collapsedSize : minSize;
+/** Resizes a pane based on its constraints. */
+export const resizePane = ({ paneConstraints, paneIndex, initialSize, }) => {
+    const constraints = paneConstraints[paneIndex];
+    if (!constraints)
+        return initialSize;
+    const { collapsedSize = 0, collapsible, maxSize = 100, minSize = 0 } = constraints;
+    const size = compareNumbersWithTolerance(initialSize, minSize) < 0
+        ? getAdjustedSizeForCollapsible(initialSize, collapsible, collapsedSize, minSize)
+        : initialSize;
+    return Number(Math.min(maxSize, size).toFixed(PRECISION));
+};

package/dist/internal/paneforge/internal/utils/storage.d.ts

@@ -0,0 +1,34 @@
+import type { PaneState } from '../../paneforge.svelte.js';
+export interface PaneConfigState {
+    expandToSizes: {
+        [paneId: string]: number;
+    };
+    layout: number[];
+}
+export interface SerializedPaneGroupState {
+    [paneIds: string]: PaneConfigState;
+}
+export interface PaneGroupStorage {
+    getItem: (name: string) => string | null;
+    setItem: (name: string, value: string) => void;
+}
+/**
+ * Initializes the storage object with the appropriate getItem
+ * and setItem functions depending on the environment (browser or not).
+ */
+export declare const initializeStorage: (storageObject: PaneGroupStorage) => void;
+/** Loads the pane group state from storage, or null if not found. */
+export declare const loadPaneGroupState: (autoSaveId: string, panesArray: PaneState[], storage: PaneGroupStorage) => PaneConfigState | null;
+/** Saves the pane group state to storage. */
+export declare const savePaneGroupState: (autoSaveId: string, panesArray: PaneState[], paneSizesBeforeCollapse: Map<string, number>, sizes: number[], storage: PaneGroupStorage) => void;
+/**
+ * Updates the values in storage based on the current state of the pane group.
+ * Debounced to limit the frequency of storage writes.
+ */
+export declare const updateStorageValues: ({ autoSaveId, layout, storage, panesArray, paneSizeBeforeCollapse, }: {
+    autoSaveId: string;
+    layout: number[];
+    storage: PaneGroupStorage;
+    panesArray: PaneState[];
+    paneSizeBeforeCollapse: Map<string, number>;
+}) => void;

package/dist/internal/paneforge/internal/utils/storage.js

@@ -0,0 +1,74 @@
+import { LOCAL_STORAGE_DEBOUNCE_INTERVAL } from '../constants.js';
+/**
+ * Initializes the storage object with the appropriate getItem
+ * and setItem functions depending on the environment (browser or not).
+ */
+export const initializeStorage = (storageObject) => {
+    try {
+        if (typeof localStorage === 'undefined')
+            throw new TypeError('localStorage is not supported in this environment');
+        storageObject.getItem = (name) => localStorage.getItem(name);
+        storageObject.setItem = (name, value) => localStorage.setItem(name, value);
+    }
+    catch (err) {
+        console.error(err);
+        storageObject.getItem = () => null;
+        storageObject.setItem = () => { };
+    }
+};
+const getPaneGroupKey = (autoSaveId) => `paneforge:${autoSaveId}`;
+/** Key derived from pane order + constraints, stable across reorderings of the array. */
+const getPaneKey = (panes) => panes
+    .map(({ opts, constraints }) => opts.order.current ? `${opts.order.current}:${JSON.stringify(constraints)}` : JSON.stringify(constraints))
+    .sort()
+    .join(',');
+/** Loads the serialized pane group state from storage, or null if missing/corrupt. */
+const loadSerializedPaneGroupState = (autoSaveId, storage) => {
+    try {
+        const parsed = JSON.parse(storage.getItem(getPaneGroupKey(autoSaveId)) || '');
+        if (typeof parsed === 'object' && parsed !== null)
+            return parsed;
+    }
+    catch {
+        // noop
+    }
+    return null;
+};
+/** Loads the pane group state from storage, or null if not found. */
+export const loadPaneGroupState = (autoSaveId, panesArray, storage) => (loadSerializedPaneGroupState(autoSaveId, storage) || {})[getPaneKey(panesArray)] || null;
+/** Saves the pane group state to storage. */
+export const savePaneGroupState = (autoSaveId, panesArray, paneSizesBeforeCollapse, sizes, storage) => {
+    const state = loadSerializedPaneGroupState(autoSaveId, storage) || {};
+    state[getPaneKey(panesArray)] = {
+        expandToSizes: Object.fromEntries(paneSizesBeforeCollapse),
+        layout: sizes,
+    };
+    try {
+        storage.setItem(getPaneGroupKey(autoSaveId), JSON.stringify(state));
+    }
+    catch (error) {
+        console.error(error);
+    }
+};
+/** Returns a debounced version of the given function. */
+const debounce = (callback, durationMs = 10) => {
+    let timeoutId = null;
+    return (...args) => {
+        if (timeoutId !== null)
+            clearTimeout(timeoutId);
+        timeoutId = setTimeout(() => callback(...args), durationMs);
+    };
+};
+const debounceMap = {};
+/**
+ * Updates the values in storage based on the current state of the pane group.
+ * Debounced to limit the frequency of storage writes.
+ */
+export const updateStorageValues = ({ autoSaveId, layout, storage, panesArray, paneSizeBeforeCollapse, }) => {
+    if (layout.length === 0 || layout.length !== panesArray.length)
+        return;
+    const debouncedSave = (debounceMap[autoSaveId] ??= debounce(savePaneGroupState, LOCAL_STORAGE_DEBOUNCE_INTERVAL));
+    // Clone mutable data before passing to the debounced function,
+    // else we risk saving a stale combination of mutable and immutable values.
+    debouncedSave(autoSaveId, [...panesArray], new Map(paneSizeBeforeCollapse), layout, storage);
+};

package/dist/internal/paneforge/internal/utils/style.d.ts

@@ -0,0 +1,27 @@
+import type { PaneState } from '../../paneforge.svelte.js';
+import type { DragState } from '../types.js';
+type CursorState = 'horizontal' | 'horizontal-max' | 'horizontal-min' | 'vertical' | 'vertical-max' | 'vertical-min';
+/**
+ * Returns the cursor style for a given cursor state.
+ */
+export declare function getCursorStyle(state: CursorState): string;
+/**
+ * Resets the global cursor style to the default.
+ */
+export declare function resetGlobalCursorStyle(): void;
+/**
+ * Sets the global cursor style to the given state.
+ */
+export declare function setGlobalCursorStyle(state: CursorState, doc: Document): void;
+/**
+ * Computes the flexbox style for a pane given its layout and drag state.
+ */
+export declare function computePaneFlexBoxStyle({ defaultSize, dragState, layout, panesArray, paneIndex, precision, }: {
+    defaultSize: number | undefined;
+    layout: number[];
+    dragState: DragState | null;
+    panesArray: PaneState[];
+    paneIndex: number;
+    precision?: number;
+}): Record<string, unknown>;
+export {};

package/dist/internal/paneforge/internal/utils/style.js

@@ -0,0 +1,76 @@
+/* Global cursor state */
+let currentState = null;
+/* Global cursor element */
+let element = null;
+/**
+ * Returns the cursor style for a given cursor state.
+ */
+export function getCursorStyle(state) {
+    switch (state) {
+        case 'horizontal':
+            return 'ew-resize';
+        case 'horizontal-max':
+            return 'w-resize';
+        case 'horizontal-min':
+            return 'e-resize';
+        case 'vertical':
+            return 'ns-resize';
+        case 'vertical-max':
+            return 'n-resize';
+        case 'vertical-min':
+            return 's-resize';
+    }
+}
+/**
+ * Resets the global cursor style to the default.
+ */
+export function resetGlobalCursorStyle() {
+    if (element === null)
+        return;
+    document.head.removeChild(element);
+    currentState = null;
+    element = null;
+}
+/**
+ * Sets the global cursor style to the given state.
+ */
+export function setGlobalCursorStyle(state, doc) {
+    if (currentState === state)
+        return;
+    currentState = state;
+    const style = getCursorStyle(state);
+    if (element === null) {
+        element = doc.createElement('style');
+        doc.head.appendChild(element);
+    }
+    element.innerHTML = `*{cursor: ${style}!important;}`;
+}
+/**
+ * Computes the flexbox style for a pane given its layout and drag state.
+ */
+export function computePaneFlexBoxStyle({ defaultSize, dragState, layout, panesArray, paneIndex, precision = 3, }) {
+    const size = layout[paneIndex];
+    let flexGrow;
+    if (size == null) {
+        // Initial render (before panes have registered themselves)
+        // To support server rendering, fallback to default size
+        flexGrow = defaultSize ?? '1';
+    }
+    else if (panesArray.length === 1) {
+        //  Single pane group should always fill full width/height
+        flexGrow = '1';
+    }
+    else {
+        flexGrow = size.toPrecision(precision);
+    }
+    return {
+        flexBasis: 0,
+        flexGrow,
+        flexShrink: 1,
+        // Without this, pane sizes may be unintentionally overridden by their content
+        overflow: 'hidden',
+        // Disable pointer events inside of a pane during resize
+        // This avoid edge cases like nested iframes
+        pointerEvents: dragState !== null ? 'none' : undefined,
+    };
+}

package/dist/internal/paneforge/pane-group.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { PaneGroupProps } from './types.js';
+declare const PaneGroup: import("svelte").Component<PaneGroupProps, {
+    getLayout: () => number[];
+    setLayout: (newLayout: number[]) => void;
+    getId: () => string;
+}, "ref">;
+type PaneGroup = ReturnType<typeof PaneGroup>;
+export default PaneGroup;

package/dist/internal/paneforge/pane-resizer.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { PaneResizerProps } from './types.js';
+declare const PaneResizer: import("svelte").Component<PaneResizerProps, {}, "ref">;
+type PaneResizer = ReturnType<typeof PaneResizer>;
+export default PaneResizer;

package/dist/internal/paneforge/pane.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { PaneProps } from './types.js';
+declare const Pane: import("svelte").Component<PaneProps, {
+    collapse: () => void;
+    expand: () => void;
+    getSize: () => number | undefined;
+    isCollapsed: () => boolean;
+    isExpanded: () => boolean;
+    resize: (size: number) => void;
+    getId: () => string;
+}, "ref">;
+type Pane = ReturnType<typeof Pane>;
+export default Pane;

package/dist/internal/paneforge/paneforge.svelte.d.ts

@@ -0,0 +1,147 @@
+import type { FocusEventHandler, KeyboardEventHandler } from 'svelte/elements';
+import { type ReadableBoxedValues, type RefAttachment, type WithRefProps, DOMContext } from '../tools/index.js';
+import type { Direction, DragState, PaneOnCollapse, PaneOnExpand, PaneOnResize, PaneResizeHandleOnDragging, ResizeEvent, ResizeHandler } from './internal/types.js';
+import { type PaneGroupStorage } from './internal/utils/storage.js';
+export declare const defaultStorage: PaneGroupStorage;
+interface PaneGroupStateOpts extends WithRefProps, ReadableBoxedValues<{
+    autoSaveId: string | null;
+    direction: Direction;
+    keyboardResizeBy: number | null;
+    onLayout: (layout: number[]) => void | null;
+    storage: PaneGroupStorage;
+}> {
+}
+export declare class PaneGroupState {
+    #private;
+    static create(opts: PaneGroupStateOpts): PaneGroupState;
+    readonly opts: PaneGroupStateOpts;
+    readonly attachment: RefAttachment<HTMLElement>;
+    readonly domContext: DOMContext;
+    dragState: DragState | null;
+    layout: number[];
+    panesArray: PaneState[];
+    panesArrayChanged: boolean;
+    paneIdToLastNotifiedSizeMap: Record<string, number>;
+    paneSizeBeforeCollapseMap: Map<string, number>;
+    prevDelta: number;
+    constructor(opts: PaneGroupStateOpts);
+    setLayout: (newLayout: number[]) => void;
+    registerResizeHandle: (dragHandleId: string) => (event: ResizeEvent) => void;
+    resizePane: (paneState: PaneState, unsafePaneSize: number) => void;
+    startDragging: (dragHandleId: string, e: ResizeEvent) => boolean;
+    stopDragging: () => void;
+    isPaneCollapsed: (pane: PaneState) => boolean;
+    expandPane: (pane: PaneState) => void;
+    collapsePane: (pane: PaneState) => void;
+    getPaneSize: (pane: PaneState) => number | undefined;
+    getPaneStyle: (pane: PaneState, defaultSize: number | undefined) => Record<string, unknown>;
+    isPaneExpanded: (pane: PaneState) => boolean;
+    registerPane: (pane: PaneState) => () => void;
+    readonly props: {
+        readonly id: string;
+        readonly 'data-pane-group': "";
+        readonly 'data-direction': Direction;
+        readonly 'data-pane-group-id': string;
+        readonly style: {
+            readonly display: "flex";
+            readonly flexDirection: "row" | "column";
+            readonly height: "100%";
+            readonly overflow: "hidden";
+            readonly width: "100%";
+        };
+    };
+}
+interface PaneResizerStateOpts extends WithRefProps, ReadableBoxedValues<{
+    onDraggingChange: PaneResizeHandleOnDragging;
+    disabled: boolean;
+    tabIndex: number;
+}> {
+}
+export declare class PaneResizerState {
+    #private;
+    static create(opts: PaneResizerStateOpts): PaneResizerState;
+    readonly opts: PaneResizerStateOpts;
+    readonly attachment: RefAttachment<HTMLElement>;
+    readonly domContext: DOMContext;
+    readonly resizeHandler: ResizeHandler | null;
+    constructor(opts: PaneResizerStateOpts, group: PaneGroupState);
+    readonly props: {
+        readonly id: string;
+        readonly role: "separator";
+        readonly 'data-direction': Direction;
+        readonly 'data-pane-group-id': string;
+        readonly 'data-active': "keyboard" | "pointer" | undefined;
+        readonly 'data-enabled': boolean;
+        readonly 'data-pane-resizer-id': string;
+        readonly 'data-pane-resizer': "";
+        readonly tabIndex: number;
+        readonly style: {
+            readonly cursor: string;
+            readonly touchAction: "none";
+            readonly userSelect: "none";
+            readonly '-webkit-user-select': "none";
+            readonly '-webkit-touch-callout': "none";
+        };
+        readonly onkeydown: KeyboardEventHandler<HTMLElement>;
+        readonly onblur: FocusEventHandler<HTMLElement>;
+        readonly onfocus: FocusEventHandler<HTMLElement>;
+        readonly onmousedown: (e: MouseEvent | TouchEvent) => void;
+        readonly onmouseup: () => void;
+        readonly ontouchcancel: () => void;
+        readonly ontouchend: () => void;
+        readonly ontouchstart: (e: MouseEvent | TouchEvent) => void;
+    };
+}
+interface PaneStateOpts extends WithRefProps, ReadableBoxedValues<{
+    collapsedSize: number | undefined;
+    collapsible: boolean | undefined;
+    defaultSize: number | undefined;
+    maxSize: number | undefined;
+    minSize: number | undefined;
+    order: number | undefined;
+    onCollapse: PaneOnCollapse;
+    onExpand: PaneOnExpand;
+    onResize: PaneOnResize;
+}> {
+}
+export declare class PaneState {
+    #private;
+    static create(opts: PaneStateOpts): PaneState;
+    readonly opts: PaneStateOpts;
+    readonly group: PaneGroupState;
+    readonly attachment: RefAttachment<HTMLElement>;
+    readonly domContext: DOMContext;
+    readonly callbacks: {
+        onCollapse: PaneOnCollapse;
+        onExpand: PaneOnExpand;
+        onResize: PaneOnResize;
+    };
+    readonly constraints: {
+        collapsedSize: number | undefined;
+        collapsible: boolean | undefined;
+        defaultSize: number | undefined;
+        maxSize: number | undefined;
+        minSize: number | undefined;
+    };
+    readonly pane: {
+        collapse: () => void;
+        expand: () => void;
+        getSize: () => number | undefined;
+        isCollapsed: () => boolean;
+        isExpanded: () => boolean;
+        resize: (size: number) => void;
+        getId: () => string;
+    };
+    constructor(opts: PaneStateOpts, group: PaneGroupState);
+    readonly props: {
+        readonly id: string;
+        readonly style: Record<string, unknown>;
+        readonly 'data-pane': "";
+        readonly 'data-pane-id': string;
+        readonly 'data-pane-group-id': string;
+        readonly 'data-collapsed': "" | undefined;
+        readonly 'data-expanded': "" | undefined;
+        readonly 'data-pane-state': "collapsing" | "expanding" | "collapsed" | "expanded";
+    };
+}
+export {};