entangle-ui 0.2.0 → 0.4.0

package/dist/esm/components/layout/SplitPane/SplitPane.js

@@ -0,0 +1,557 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React, { useRef, useState, useMemo, useCallback, useEffect } from 'react';
+import { cx } from '../../../utils/cx.js';
+import { assignInlineVars } from '../../../node_modules/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.js';
+import { dividerSizeVar, dividerRecipe, containerRecipe } from './SplitPane.css.js';
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+/**
+ * Parse a PanelConfig defaultSize into a pixel value given the available space.
+ * Returns `undefined` when no explicit default is given.
+ */
+function parseDefaultSize(defaultSize, availableSpace) {
+    if (defaultSize === undefined)
+        return undefined;
+    if (typeof defaultSize === 'number')
+        return defaultSize;
+    // Handle percentage strings like "30%"
+    if (defaultSize.endsWith('%')) {
+        const pct = parseFloat(defaultSize);
+        if (!Number.isNaN(pct))
+            return (pct / 100) * availableSpace;
+    }
+    return undefined;
+}
+/**
+ * Calculate initial sizes from panel configs and available space.
+ */
+function computeInitialSizes(panelCount, panels, availableSpace) {
+    const sizes = Array.from({ length: panelCount }, (_, i) => {
+        const cfg = panels[i];
+        if (!cfg)
+            return undefined;
+        return parseDefaultSize(cfg.defaultSize, availableSpace);
+    });
+    let allocated = 0;
+    let unspecifiedCount = 0;
+    for (let i = 0; i < panelCount; i++) {
+        if (sizes[i] !== undefined) {
+            allocated += sizes[i];
+        }
+        else {
+            unspecifiedCount++;
+        }
+    }
+    const remaining = Math.max(0, availableSpace - allocated);
+    const perUnspecified = unspecifiedCount > 0 ? remaining / unspecifiedCount : 0;
+    return sizes.map(s => s ?? perUnspecified);
+}
+/**
+ * Clamp sizes to min/max constraints in the panel configs.
+ */
+function clampSizes(sizes, panels, collapsed) {
+    return sizes.map((size, i) => {
+        const cfg = panels[i];
+        if (!cfg)
+            return size;
+        let clamped = size;
+        if (cfg.minSize !== undefined && !collapsed?.has(i))
+            clamped = Math.max(clamped, cfg.minSize);
+        if (cfg.maxSize !== undefined)
+            clamped = Math.min(clamped, cfg.maxSize);
+        return clamped;
+    });
+}
+/**
+ * Snap panel sizes to whole pixels while preserving total width/height.
+ * This avoids sub-pixel rounding gaps (often visible as a 1-2px seam).
+ */
+function snapSizesToWholePixels(sizes, panels, availableSpace) {
+    const targetTotal = Math.max(0, Math.round(availableSpace));
+    const floored = sizes.map(size => Math.max(0, Math.floor(size)));
+    const fractions = sizes.map((size, i) => ({
+        index: i,
+        fraction: Math.max(0, size - (floored[i] ?? 0)),
+    }));
+    const snapped = [...floored];
+    let delta = targetTotal - snapped.reduce((sum, size) => sum + size, 0);
+    if (delta > 0) {
+        const growOrder = [...fractions].sort((a, b) => {
+            if (b.fraction !== a.fraction)
+                return b.fraction - a.fraction;
+            return b.index - a.index;
+        });
+        while (delta > 0) {
+            let changed = false;
+            for (const { index } of growOrder) {
+                if (delta <= 0)
+                    break;
+                const max = panels[index]?.maxSize ?? Infinity;
+                const current = snapped[index] ?? 0;
+                if (current + 1 > max)
+                    continue;
+                snapped[index] = current + 1;
+                delta -= 1;
+                changed = true;
+            }
+            if (!changed)
+                break;
+        }
+    }
+    else if (delta < 0) {
+        delta = -delta;
+        const shrinkOrder = [...fractions].sort((a, b) => {
+            if (a.fraction !== b.fraction)
+                return a.fraction - b.fraction;
+            return b.index - a.index;
+        });
+        while (delta > 0) {
+            let changed = false;
+            for (const { index } of shrinkOrder) {
+                if (delta <= 0)
+                    break;
+                const min = panels[index]?.minSize ?? 0;
+                const current = snapped[index] ?? 0;
+                if (current - 1 < min)
+                    continue;
+                snapped[index] = current - 1;
+                delta -= 1;
+                changed = true;
+            }
+            if (!changed)
+                break;
+        }
+    }
+    return snapped;
+}
+/**
+ * Ensures panel sizes fill the available space exactly.
+ * Handles small floating-point drift and rounding leftovers by distributing
+ * the remaining pixels across panels that can still grow/shrink.
+ */
+function reconcileSizesToAvailableSpace(sizes, panels, availableSpace, collapsed) {
+    const adjusted = clampSizes(sizes, panels, collapsed);
+    let remaining = availableSpace - adjusted.reduce((sum, size) => sum + size, 0);
+    // Ignore tiny floating-point noise.
+    if (Math.abs(remaining) < 0.01) {
+        return snapSizesToWholePixels(adjusted, panels, availableSpace);
+    }
+    // Try to consume remainder from right to left so right-most panel
+    // naturally absorbs visual rounding leftovers.
+    for (let i = adjusted.length - 1; i >= 0; i--) {
+        if (Math.abs(remaining) < 0.01)
+            break;
+        const cfg = panels[i];
+        const min = cfg?.minSize ?? 0;
+        const max = cfg?.maxSize ?? Infinity;
+        const current = adjusted[i] ?? 0;
+        if (remaining > 0) {
+            const room = max - current;
+            if (room <= 0)
+                continue;
+            const delta = Math.min(room, remaining);
+            adjusted[i] = current + delta;
+            remaining -= delta;
+            continue;
+        }
+        const room = current - min;
+        if (room <= 0)
+            continue;
+        const delta = Math.min(room, -remaining);
+        adjusted[i] = current - delta;
+        remaining += delta;
+    }
+    return snapSizesToWholePixels(adjusted, panels, availableSpace);
+}
+const KEYBOARD_STEP = 10;
+const KEYBOARD_LARGE_STEP = 50;
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+/**
+ * A resizable split-pane layout component.
+ *
+ * Divides space between two or more child panels with draggable dividers.
+ * Supports horizontal and vertical directions, controlled and uncontrolled
+ * modes, collapsible panels, and keyboard-accessible dividers.
+ *
+ * @example
+ * ```tsx
+ * <SplitPane direction="horizontal">
+ *   <SplitPanePanel>Left</SplitPanePanel>
+ *   <SplitPanePanel>Right</SplitPanePanel>
+ * </SplitPane>
+ * ```
+ */
+const SplitPane = ({ direction = 'horizontal', panels: panelConfigs = [], sizes: controlledSizes, dividerSize = 4, children, onResize, onResizeEnd, onCollapseChange, className, testId, style, ref, ...htmlProps }) => {
+    const containerRef = useRef(null);
+    const [internalSizes, setInternalSizes] = useState([]);
+    const [draggingIndex, setDraggingIndex] = useState(null);
+    const collapsedRef = useRef(new Set());
+    // Refs for drag tracking
+    const dragStartPos = useRef(0);
+    const dragStartSizes = useRef([]);
+    // Extract panel children
+    const panelChildren = React.Children.toArray(children);
+    const panelCount = panelChildren.length;
+    // Which sizes array to use
+    const isControlled = controlledSizes !== undefined;
+    const sizes = isControlled ? controlledSizes : internalSizes;
+    // Stable reference to panelConfigs for use in effects/callbacks
+    const panelConfigsKey = JSON.stringify(panelConfigs);
+    const stablePanelConfigs = useMemo(() => panelConfigs, [panelConfigsKey]);
+    // Keep a ref so the ResizeObserver callback always reads latest values
+    const latestRef = useRef({
+        panelCount,
+        dividerSize,
+        direction,
+        isControlled,
+        panelConfigs: stablePanelConfigs,
+    });
+    latestRef.current = {
+        panelCount,
+        dividerSize,
+        direction,
+        isControlled,
+        panelConfigs: stablePanelConfigs,
+    };
+    // -----------------------------------------------------------------------
+    // Initial size calculation + ResizeObserver
+    // -----------------------------------------------------------------------
+    const recalculate = useCallback(() => {
+        const container = containerRef.current;
+        const { panelCount: count, dividerSize: dSize, direction: dir, isControlled: ctrl, panelConfigs: cfgs, } = latestRef.current;
+        if (!container || count < 2)
+            return;
+        const totalDividerSpace = (count - 1) * dSize;
+        const containerDim = dir === 'horizontal' ? container.clientWidth : container.clientHeight;
+        const availableSpace = Math.max(0, containerDim - totalDividerSpace);
+        if (!ctrl) {
+            const collapsed = collapsedRef.current;
+            setInternalSizes(prev => {
+                if (prev.length === count && prev.length > 0) {
+                    // Proportionally redistribute on container resize
+                    const prevTotal = prev.reduce((a, b) => a + b, 0);
+                    if (prevTotal <= 0) {
+                        return reconcileSizesToAvailableSpace(computeInitialSizes(count, cfgs, availableSpace), cfgs, availableSpace, collapsed);
+                    }
+                    const ratio = availableSpace / prevTotal;
+                    const newSizes = prev.map((s, i) => collapsed.has(i) ? 0 : s * ratio);
+                    return reconcileSizesToAvailableSpace(newSizes, cfgs, availableSpace, collapsed);
+                }
+                return reconcileSizesToAvailableSpace(computeInitialSizes(count, cfgs, availableSpace), cfgs, availableSpace, collapsed);
+            });
+        }
+    }, []);
+    const getAvailableSpace = useCallback(() => {
+        const container = containerRef.current;
+        if (!container || panelCount < 2)
+            return null;
+        const containerDim = direction === 'horizontal'
+            ? container.clientWidth
+            : container.clientHeight;
+        if (containerDim <= 0)
+            return null;
+        const totalDividerSpace = (panelCount - 1) * dividerSize;
+        return Math.max(0, containerDim - totalDividerSpace);
+    }, [direction, dividerSize, panelCount]);
+    useEffect(() => {
+        recalculate();
+        const container = containerRef.current;
+        if (!container || typeof ResizeObserver === 'undefined')
+            return;
+        const ro = new ResizeObserver(() => {
+            recalculate();
+        });
+        ro.observe(container);
+        return () => {
+            ro.disconnect();
+        };
+    }, [
+        recalculate,
+        panelCount,
+        dividerSize,
+        direction,
+        isControlled,
+        stablePanelConfigs,
+    ]);
+    // -----------------------------------------------------------------------
+    // Pointer resize handlers
+    // -----------------------------------------------------------------------
+    const handlePointerDown = useCallback((dividerIndex, e) => {
+        e.preventDefault();
+        e.target.setPointerCapture(e.pointerId);
+        setDraggingIndex(dividerIndex);
+        dragStartPos.current = direction === 'horizontal' ? e.clientX : e.clientY;
+        dragStartSizes.current = [...sizes];
+    }, [direction, sizes]);
+    const handlePointerMove = useCallback((dividerIndex, e) => {
+        if (draggingIndex !== dividerIndex)
+            return;
+        const currentPos = direction === 'horizontal' ? e.clientX : e.clientY;
+        const delta = currentPos - dragStartPos.current;
+        const startSizes = dragStartSizes.current;
+        const leftIndex = dividerIndex;
+        const rightIndex = dividerIndex + 1;
+        const startLeft = startSizes[leftIndex] ?? 0;
+        const startRight = startSizes[rightIndex] ?? 0;
+        const leftCfg = panelConfigs[leftIndex];
+        const rightCfg = panelConfigs[rightIndex];
+        const leftMin = leftCfg?.minSize ?? 0;
+        const leftMax = leftCfg?.maxSize ?? Infinity;
+        const rightMin = rightCfg?.minSize ?? 0;
+        const rightMax = rightCfg?.maxSize ?? Infinity;
+        const totalSize = startLeft + startRight;
+        // Raw sizes (unclamped) — used for collapse threshold detection
+        const rawLeft = startLeft + delta;
+        const rawRight = startRight - delta;
+        // Clamp to [0, totalSize] to prevent overflow
+        let newLeft = Math.max(0, Math.min(totalSize, rawLeft));
+        let newRight = totalSize - newLeft;
+        // Collapse / expand handling
+        let leftCollapsed = false;
+        let rightCollapsed = false;
+        if (leftCfg?.collapsible) {
+            const threshold = leftCfg.collapseThreshold ?? leftMin / 2;
+            if (rawLeft < threshold) {
+                leftCollapsed = true;
+                if (startLeft > 0) {
+                    onCollapseChange?.(leftIndex, true);
+                }
+            }
+            else if (startLeft === 0 && rawLeft >= leftMin) {
+                // Expanding from collapsed state
+                onCollapseChange?.(leftIndex, false);
+            }
+        }
+        if (rightCfg?.collapsible) {
+            const threshold = rightCfg.collapseThreshold ?? rightMin / 2;
+            if (rawRight < threshold) {
+                rightCollapsed = true;
+                if (startRight > 0) {
+                    onCollapseChange?.(rightIndex, true);
+                }
+            }
+            else if (startRight === 0 && rawRight >= rightMin) {
+                // Expanding from collapsed state
+                onCollapseChange?.(rightIndex, false);
+            }
+        }
+        // Apply collapse or min/max with coupled clamping
+        if (leftCollapsed) {
+            newLeft = 0;
+            newRight = totalSize;
+        }
+        else if (rightCollapsed) {
+            newRight = 0;
+            newLeft = totalSize;
+        }
+        else {
+            // Clamp left, then recompute right
+            newLeft = Math.max(leftMin, Math.min(leftMax, newLeft));
+            newRight = totalSize - newLeft;
+            // If right violates its constraints, clamp it and recompute left
+            if (newRight < rightMin) {
+                newRight = rightMin;
+                newLeft = totalSize - newRight;
+            }
+            else if (newRight > rightMax) {
+                newRight = rightMax;
+                newLeft = totalSize - newRight;
+            }
+        }
+        // Update collapsed tracking
+        const collapsed = new Set(collapsedRef.current);
+        if (leftCollapsed) {
+            collapsed.add(leftIndex);
+        }
+        else {
+            collapsed.delete(leftIndex);
+        }
+        if (rightCollapsed) {
+            collapsed.add(rightIndex);
+        }
+        else {
+            collapsed.delete(rightIndex);
+        }
+        collapsedRef.current = collapsed;
+        const newSizes = [...startSizes];
+        newSizes[leftIndex] = newLeft;
+        newSizes[rightIndex] = newRight;
+        const availableSpace = getAvailableSpace();
+        const nextSizes = availableSpace !== null && availableSpace > 0
+            ? reconcileSizesToAvailableSpace(newSizes, panelConfigs, availableSpace, collapsed)
+            : newSizes;
+        if (!isControlled) {
+            setInternalSizes(nextSizes);
+        }
+        onResize?.(nextSizes);
+    }, [
+        draggingIndex,
+        direction,
+        getAvailableSpace,
+        panelConfigs,
+        isControlled,
+        onResize,
+        onCollapseChange,
+    ]);
+    const handlePointerUp = useCallback((_dividerIndex, e) => {
+        e.target.releasePointerCapture(e.pointerId);
+        setDraggingIndex(null);
+        if (isControlled && controlledSizes) {
+            onResizeEnd?.(controlledSizes);
+        }
+        else {
+            onResizeEnd?.(internalSizes);
+        }
+    }, [isControlled, controlledSizes, internalSizes, onResizeEnd]);
+    // -----------------------------------------------------------------------
+    // Keyboard handler on dividers
+    // -----------------------------------------------------------------------
+    const handleKeyDown = useCallback((dividerIndex, e) => {
+        const isHorizontal = direction === 'horizontal';
+        let delta = 0;
+        const positiveKey = isHorizontal ? 'ArrowRight' : 'ArrowDown';
+        const negativeKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp';
+        if (e.key === positiveKey) {
+            delta = e.shiftKey ? KEYBOARD_LARGE_STEP : KEYBOARD_STEP;
+        }
+        else if (e.key === negativeKey) {
+            delta = -(e.shiftKey ? KEYBOARD_LARGE_STEP : KEYBOARD_STEP);
+        }
+        else if (e.key === 'Enter') {
+            // Toggle collapse on the left panel if collapsible
+            const leftCfg = panelConfigs[dividerIndex];
+            if (leftCfg?.collapsible) {
+                e.preventDefault();
+                const currentSizes = [...sizes];
+                const leftIndex = dividerIndex;
+                const rightIndex = dividerIndex + 1;
+                const curLeft = currentSizes[leftIndex] ?? 0;
+                const curRight = currentSizes[rightIndex] ?? 0;
+                if (curLeft === 0) {
+                    // Expand: restore to minSize
+                    const restoreSize = leftCfg.minSize ?? 100;
+                    currentSizes[leftIndex] = restoreSize;
+                    currentSizes[rightIndex] = curRight - restoreSize;
+                    collapsedRef.current = new Set([...collapsedRef.current].filter(i => i !== leftIndex));
+                    onCollapseChange?.(leftIndex, false);
+                }
+                else {
+                    // Collapse
+                    currentSizes[rightIndex] = curRight + curLeft;
+                    currentSizes[leftIndex] = 0;
+                    collapsedRef.current = new Set([
+                        ...collapsedRef.current,
+                        leftIndex,
+                    ]);
+                    onCollapseChange?.(leftIndex, true);
+                }
+                if (!isControlled) {
+                    setInternalSizes(currentSizes);
+                }
+                onResize?.(currentSizes);
+                onResizeEnd?.(currentSizes);
+            }
+            return;
+        }
+        else {
+            return;
+        }
+        e.preventDefault();
+        const leftIndex = dividerIndex;
+        const rightIndex = dividerIndex + 1;
+        const newSizes = [...sizes];
+        let left = (newSizes[leftIndex] ?? 0) + delta;
+        let right = (newSizes[rightIndex] ?? 0) - delta;
+        // Clamp
+        const leftCfg = panelConfigs[leftIndex];
+        const rightCfg = panelConfigs[rightIndex];
+        const leftMin = leftCfg?.minSize ?? 0;
+        const leftMax = leftCfg?.maxSize ?? Infinity;
+        const rightMin = rightCfg?.minSize ?? 0;
+        const rightMax = rightCfg?.maxSize ?? Infinity;
+        if (left < leftMin) {
+            right += left - leftMin;
+            left = leftMin;
+        }
+        if (left > leftMax) {
+            right += left - leftMax;
+            left = leftMax;
+        }
+        if (right < rightMin) {
+            left += right - rightMin;
+            right = rightMin;
+        }
+        if (right > rightMax) {
+            left += right - rightMax;
+            right = rightMax;
+        }
+        newSizes[leftIndex] = left;
+        newSizes[rightIndex] = right;
+        const availableSpace = getAvailableSpace();
+        const nextSizes = availableSpace !== null && availableSpace > 0
+            ? reconcileSizesToAvailableSpace(newSizes, panelConfigs, availableSpace)
+            : newSizes;
+        if (!isControlled) {
+            setInternalSizes(nextSizes);
+        }
+        onResize?.(nextSizes);
+    }, [
+        direction,
+        sizes,
+        getAvailableSpace,
+        panelConfigs,
+        isControlled,
+        onResize,
+        onResizeEnd,
+        onCollapseChange,
+    ]);
+    // -----------------------------------------------------------------------
+    // Merge refs
+    // -----------------------------------------------------------------------
+    const setContainerRef = useCallback((node) => {
+        containerRef.current = node;
+        if (typeof ref === 'function') {
+            ref(node);
+        }
+        else if (ref && typeof ref === 'object') {
+            ref.current = node;
+        }
+    }, [ref]);
+    // -----------------------------------------------------------------------
+    // Render
+    // -----------------------------------------------------------------------
+    const elements = [];
+    panelChildren.forEach((child, i) => {
+        // Panel wrapper with controlled sizing
+        const panelSize = sizes[i] ?? 0;
+        const panelStyle = {
+            flex: `0 0 ${panelSize}px`,
+            overflow: panelSize === 0 ? 'hidden' : undefined,
+            [direction === 'horizontal' ? 'width' : 'height']: `${panelSize}px`,
+            minWidth: direction === 'horizontal' ? 0 : undefined,
+            minHeight: direction === 'vertical' ? 0 : undefined,
+        };
+        elements.push(jsx("div", { style: panelStyle, "data-splitpane-panel-wrapper": "", children: child }, `panel-${i}`));
+        // Add divider between panels
+        if (i < panelCount - 1) {
+            const leftSize = sizes[i] ?? 0;
+            const leftCfg = panelConfigs[i];
+            elements.push(jsx("div", { role: "separator", tabIndex: 0, "aria-orientation": direction === 'horizontal' ? 'vertical' : 'horizontal', "aria-valuenow": Math.round(leftSize), "aria-valuemin": leftCfg?.minSize ?? 0, "aria-valuemax": leftCfg?.maxSize ?? undefined, "aria-label": "Panel divider", "data-testid": testId ? `${testId}-divider-${i}` : undefined, className: dividerRecipe({
+                    direction,
+                    isDragging: draggingIndex === i || undefined,
+                }), style: assignInlineVars({
+                    [dividerSizeVar]: `${dividerSize}px`,
+                }), onPointerDown: e => handlePointerDown(i, e), onPointerMove: e => handlePointerMove(i, e), onPointerUp: e => handlePointerUp(i, e), onKeyDown: e => handleKeyDown(i, e) }, `divider-${i}`));
+        }
+    });
+    return (jsx("div", { ref: setContainerRef, className: cx(containerRecipe({ direction }), className), "data-testid": testId, style: style, ...htmlProps, children: elements }));
+};
+SplitPane.displayName = 'SplitPane';
+
+export { SplitPane };
+//# sourceMappingURL=SplitPane.js.map

package/dist/esm/components/layout/SplitPane/SplitPane.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitPane.js","sources":["../../../../../../src/components/layout/SplitPane/SplitPane.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAkBA;AACA;AACA;AAEA;;;AAGG;AACH;;AAIiC;;AACM;;AAErC;AACE;AACA;AAAwB;;AAE1B;AACF;AAEA;;AAEG;AACH;AAKE;AAGI;AACA;AAAU;;AAEZ;;;AAKF;AACE;AACE;;;AAEA;;;AAIJ;AACA;AAGA;AACF;AAEA;;AAEG;AACH;;AAMI;AACA;AAAU;;AAEV;;AAEA;;AACA;AACF;AACF;AAEA;;;AAGG;AACH;AAKE;;AAEA;AACE;AACA;AACD;AACD;;AAIA;AACE;AACE;AAA+B;AAC/B;AACF;AAEA;;AAEE;;;;;AAIE;;AACA;;;;AAIF;;;;AAEG;;AAEL;AACE;AAA+B;AAC/B;AACF;AAEA;;AAEE;;;;;AAIE;;AACA;;;;AAIF;;;;AAIJ;AACF;AAEA;;;;AAIG;AACH;;;;;;;;;AAiBE;AACE;;AAEA;AACA;AACA;;AAGA;AACE;;;;AAGA;;;;AAKF;;;;AAGA;;;;AAKJ;AAEA;AACA;AAEA;AACA;AACA;AAEA;;;;;;;;;;;;;;AAcG;;AAgBD;;;;;AAMA;AACA;;;AAIA;;AAGA;;;;AAKA;;;;;;;AAQE;AACD;;;;;;AAMC;;;;;AAOF;AACE;;AAQA;;;AAGA;AAEA;;AAGE;;AAEE;;AAEE;AACA;AACE;;AAOF;AACA;;;AAUF;AAMF;;;AAIJ;AACE;AACA;AAAkC;AAElC;;AAGI;;AACmB;;;;;AAMvB;AAEA;AACA;;AAEA;AACE;AACF;AACA;AAEA;;AAEA;AACF;;;;;;;AAOC;;;;;;;;AAYG;AACA;AACF;;;;AAQE;AACA;AAEA;;AAEA;;;AAKA;AACA;AAEA;AACA;AACA;AACA;AAEA;;AAGA;AACA;;AAGA;AACA;;;;AAMA;;AAEE;;AAEE;AACE;;;;;AAIF;;;AAIJ;;AAEE;;AAEE;AACE;;;;;AAIF;;;;;;;;;;;;;;AAaF;AACA;;AAGA;;AAEE;;AACK;;AAEL;;;;;;AAOF;;;AAEA;;;AAGA;;;AAEA;;AAEF;AAEA;AACA;AACA;AACA;;;;;;;AAcA;AACF;;;;;;;;AASC;;;;AAQC;AACE;;;AAEA;;;;;;;AAYF;;;;AAMA;AACE;;AACK;AACL;;AACK;;AAEL;AACA;;AAEE;;AAEA;;;AAKA;;AAEE;AACA;AACA;;AAIA;;;;AAGA;AACA;AACA;;;AAGC;AACD;;;;;AAMF;AACA;;;;;;;;;AAUJ;AAEA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AAEA;AACE;;;AAGF;AACE;;;AAGF;AACE;;;AAGF;AACE;;;AAIF;AACA;AACA;;;;;;;AAaA;AACF;;;;;;;;;AAUC;;;;AAOH;AAEI;AACA;;;AAEO;AACJ;;AAEL;;;;;;;;AAaA;;;AAGE;;;;AAKF;;AAWA;;AAEE;AAEA;;AAeM;AACD;AAEC;;;AASV;AAEA;AAWF;AAEA;;"}

package/dist/esm/components/layout/SplitPane/SplitPanePanel.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { cx } from '../../../utils/cx.js';
+import { panelStyle } from './SplitPane.css.js';
+
+/**
+ * A panel within a SplitPane layout.
+ *
+ * Simple wrapper that renders its children with `overflow: auto`.
+ * The parent SplitPane manages its sizing.
+ *
+ * @example
+ * ```tsx
+ * <SplitPane>
+ *   <SplitPanePanel>Left content</SplitPanePanel>
+ *   <SplitPanePanel>Right content</SplitPanePanel>
+ * </SplitPane>
+ * ```
+ */
+const SplitPanePanel = ({ children, className, testId, style, ref, ...htmlProps }) => {
+    return (jsx("div", { ref: ref, className: cx(panelStyle, className), "data-testid": testId, "data-splitpane-panel": "", style: style, ...htmlProps, children: children }));
+};
+SplitPanePanel.displayName = 'SplitPanePanel';
+
+export { SplitPanePanel };
+//# sourceMappingURL=SplitPanePanel.js.map

package/dist/esm/components/layout/SplitPane/SplitPanePanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitPanePanel.js","sources":["../../../../../../src/components/layout/SplitPane/SplitPanePanel.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAOA;;;;;;;;;;;;;AAaG;;AASD;AAYF;AAEA;;"}

package/dist/esm/components/layout/Stack/Stack.css.js

@@ -0,0 +1,8 @@
+import './../../../assets/src/components/layout/Stack/Stack.css.ts.vanilla-DNZOFYiD.css';
+import { c as createRuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
+
+var gapVar = 'var(--gapVar__xx9bfp0)';
+var stackRecipe = createRuntimeFn({defaultClassName:'Stack_stackRecipe__xx9bfp1',variantClassNames:{direction:{row:'Stack_stackRecipe_direction_row__xx9bfp2',column:'Stack_stackRecipe_direction_column__xx9bfp3'},wrap:{nowrap:'Stack_stackRecipe_wrap_nowrap__xx9bfp4',wrap:'Stack_stackRecipe_wrap_wrap__xx9bfp5','wrap-reverse':'Stack_stackRecipe_wrap_wrap-reverse__xx9bfp6'},justify:{'flex-start':'Stack_stackRecipe_justify_flex-start__xx9bfp7','flex-end':'Stack_stackRecipe_justify_flex-end__xx9bfp8',center:'Stack_stackRecipe_justify_center__xx9bfp9','space-between':'Stack_stackRecipe_justify_space-between__xx9bfpa','space-around':'Stack_stackRecipe_justify_space-around__xx9bfpb','space-evenly':'Stack_stackRecipe_justify_space-evenly__xx9bfpc'},align:{'flex-start':'Stack_stackRecipe_align_flex-start__xx9bfpd','flex-end':'Stack_stackRecipe_align_flex-end__xx9bfpe',center:'Stack_stackRecipe_align_center__xx9bfpf',stretch:'Stack_stackRecipe_align_stretch__xx9bfpg',baseline:'Stack_stackRecipe_align_baseline__xx9bfph'},expandRow:{true:'Stack_stackRecipe_expandRow_true__xx9bfpi'},expandColumn:{true:'Stack_stackRecipe_expandColumn_true__xx9bfpj'}},defaultVariants:{direction:'column',wrap:'nowrap',justify:'flex-start',align:'flex-start'},compoundVariants:[]});
+
+export { gapVar, stackRecipe };
+//# sourceMappingURL=Stack.css.js.map

package/dist/esm/components/layout/Stack/Stack.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}