@dbcdk/react-components 0.0.12 → 0.0.13

package/dist/components/popover/Popover.d.ts

@@ -1,12 +1,26 @@
 import * as React from 'react';
-interface PopoverProps {
-    trigger: (event: (e: React.MouseEvent<HTMLElement> | React.FocusEvent<HTMLElement>) => void, icon: React.ReactNode) => React.ReactNode;
-    children: ((close?: () => void) => React.ReactNode) | React.ReactNode;
+export interface PopoverProps {
+    trigger: (toggle: (e: React.MouseEvent<HTMLElement> | React.FocusEvent<HTMLElement>) => void, icon: React.ReactNode, open?: boolean) => React.ReactNode;
+    children: ((close: () => void) => React.ReactNode) | React.ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    contentId?: string;
+    /**
+     * CSS length, recommended "NNpx" for predictability.
+     * Used as a minimum, not as a forced width unless matchTriggerWidth=true.
+     */
     minWidth?: string;
+    /**
+     * If true, force the overlay width to at least the trigger width.
+     * If false, overlay width is content-driven (calendar-friendly).
+     */
     matchTriggerWidth?: boolean;
     viewportPadding?: number;
     edgeBuffer?: number;
     dataCy?: string;
+    autoFocusContent?: boolean;
+    returnFocus?: boolean;
 }
 export interface PopoverHandle {
     close: () => void;
@@ -14,4 +28,3 @@ export interface PopoverHandle {
     isOpen: () => boolean;
 }
 export declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<PopoverHandle>>;
-export {};

package/dist/components/popover/Popover.js

@@ -1,43 +1,121 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronDown, ChevronUp } from 'lucide-react';
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, } from 'react';
+import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState, } from 'react';
 import { createPortal } from 'react-dom';
 import styles from './Popover.module.css';
-export const Popover = forwardRef(function Popover({ trigger: Trigger, children, minWidth = '200px', matchTriggerWidth = true, viewportPadding = 8, edgeBuffer = 100, dataCy, }, ref) {
-    const [pos, setPos] = useState({ top: 0, left: 0, width: 0, visible: false });
+function getFocusable(container) {
+    const els = container.querySelectorAll([
+        'a[href]',
+        'button:not([disabled])',
+        'input:not([disabled])',
+        'select:not([disabled])',
+        'textarea:not([disabled])',
+        '[tabindex]:not([tabindex="-1"])',
+    ].join(','));
+    return Array.from(els).filter(el => !el.hasAttribute('disabled') && !el.getAttribute('aria-hidden'));
+}
+function parseMinWidthPx(minWidth, elForEm) {
+    const v = minWidth.trim();
+    if (v.endsWith('px')) {
+        const n = Number.parseFloat(v);
+        return Number.isFinite(n) ? n : 0;
+    }
+    if (typeof window !== 'undefined' && v.endsWith('rem')) {
+        const n = Number.parseFloat(v);
+        if (!Number.isFinite(n))
+            return 0;
+        const rootFont = Number.parseFloat(getComputedStyle(document.documentElement).fontSize || '16');
+        return n * (Number.isFinite(rootFont) ? rootFont : 16);
+    }
+    if (typeof window !== 'undefined' && v.endsWith('em')) {
+        const n = Number.parseFloat(v);
+        if (!Number.isFinite(n))
+            return 0;
+        const font = elForEm ? Number.parseFloat(getComputedStyle(elForEm).fontSize || '16') : 16;
+        return n * (Number.isFinite(font) ? font : 16);
+    }
+    return 0;
+}
+export const Popover = forwardRef(function Popover({ trigger: Trigger, children, open, defaultOpen = false, onOpenChange, contentId, minWidth = '200px', matchTriggerWidth = true, viewportPadding = 8, edgeBuffer = 100, dataCy, autoFocusContent = false, returnFocus = true, }, ref) {
+    const internalId = useId();
+    const resolvedContentId = contentId !== null && contentId !== void 0 ? contentId : `popover-${internalId}`;
+    const isControlled = open !== undefined;
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const isOpen = isControlled ? !!open : uncontrolledOpen;
+    const [pos, setPos] = useState({ top: 0, left: 0 });
+    const [positioned, setPositioned] = useState(false);
+    const [triggerWidth, setTriggerWidth] = useState(null);
     const containerRef = useRef(null);
     const contentRef = useRef(null);
-    // avoid SSR/hydration mismatch
+    const triggerElRef = useRef(null);
+    const lastCloseReasonRef = useRef('unknown');
     const [mounted, setMounted] = useState(false);
     useEffect(() => setMounted(true), []);
-    const computeAndSetPosition = useCallback((show) => {
-        const container = containerRef.current;
+    const setOpen = useCallback((next) => {
+        if (!isControlled)
+            setUncontrolledOpen(next);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(next);
+    }, [isControlled, onOpenChange]);
+    const openPopover = useCallback(() => {
+        setPositioned(false);
+        setOpen(true);
+    }, [setOpen]);
+    const closePopover = useCallback((reason = 'api') => {
+        lastCloseReasonRef.current = reason;
+        setOpen(false);
+    }, [setOpen]);
+    const togglePopover = useCallback((e) => {
+        triggerElRef.current = e.currentTarget;
+        if (isOpen)
+            closePopover('trigger');
+        else
+            openPopover();
+    }, [isOpen, closePopover, openPopover]);
+    useImperativeHandle(ref, () => ({
+        close: () => closePopover('api'),
+        open: openPopover,
+        isOpen: () => isOpen,
+    }), [closePopover, openPopover, isOpen]);
+    const computeAndSetPosition = useCallback(() => {
+        var _a;
         const content = contentRef.current;
-        if (!container || !content)
+        if (!content)
+            return;
+        const triggerEl = (_a = triggerElRef.current) !== null && _a !== void 0 ? _a : containerRef.current;
+        if (!triggerEl)
             return;
-        const triggerRect = container.getBoundingClientRect();
-        // Temporarily measure content size by forcing it into the layout.
+        const triggerRect = triggerEl.getBoundingClientRect();
+        // Only compute a forced width when requested.
+        let forcedWidthPx = null;
+        if (matchTriggerWidth) {
+            const minWidthPx = parseMinWidthPx(minWidth, triggerEl);
+            forcedWidthPx = Math.max(triggerRect.width, minWidthPx || 0);
+            setTriggerWidth(forcedWidthPx);
+        }
+        else {
+            setTriggerWidth(null);
+        }
+        // Measure height/width for collision using a temporary sizing that reflects our final sizing:
+        const prevHidden = content.hidden;
         const prevVis = content.style.visibility;
         const prevDisp = content.style.display;
         const prevMinWidth = content.style.minWidth;
         const prevWidth = content.style.width;
         const prevTop = content.style.top;
         const prevLeft = content.style.left;
+        content.hidden = false;
         content.style.visibility = 'hidden';
         content.style.display = 'block';
         content.style.top = '0px';
         content.style.left = '0px';
+        // Apply minWidth always; apply width only if matchTriggerWidth.
         content.style.minWidth = minWidth;
-        content.style.width = 'auto';
-        const minWidthPx = content.offsetWidth;
-        const desiredWidthPx = Math.max(matchTriggerWidth ? triggerRect.width : 0, minWidthPx);
-        // Apply desired width and re-measure final size (height may depend on width).
-        content.style.minWidth = `${desiredWidthPx}px`;
-        content.style.width = `${desiredWidthPx}px`;
+        content.style.width = forcedWidthPx != null ? `${forcedWidthPx}px` : 'auto';
         const contentWidth = content.offsetWidth;
         const contentHeight = content.offsetHeight;
-        // Restore previous inline styles
+        // Restore
+        content.hidden = prevHidden;
         content.style.visibility = prevVis;
         content.style.display = prevDisp;
         content.style.minWidth = prevMinWidth;
@@ -58,80 +136,84 @@ export const Popover = forwardRef(function Popover({ trigger: Trigger, children,
         const placeRightOfLeftEdge = spaceRight >= contentWidth + edgeBuffer;
         const placeLeftOfRightEdge = spaceLeft >= contentWidth + edgeBuffer;
         let rawLeft;
-        if (placeRightOfLeftEdge) {
-            rawLeft = triggerRect.left; // align left edges
-        }
-        else if (placeLeftOfRightEdge) {
-            rawLeft = triggerRect.right - contentWidth; // align right edges
-        }
-        else {
+        if (placeRightOfLeftEdge)
+            rawLeft = triggerRect.left;
+        else if (placeLeftOfRightEdge)
+            rawLeft = triggerRect.right - contentWidth;
+        else
             rawLeft = triggerRect.left + (triggerRect.width - contentWidth) / 2;
-        }
         const clampedLeft = Math.max(viewportPadding, Math.min(rawLeft, vw - contentWidth - viewportPadding));
         const clampedTop = Math.max(viewportPadding, Math.min(rawTop, vh - contentHeight - viewportPadding));
-        setPos({ top: clampedTop, left: clampedLeft, width: desiredWidthPx, visible: show });
+        setPos({ top: clampedTop, left: clampedLeft });
+        setPositioned(true);
     }, [edgeBuffer, viewportPadding, minWidth, matchTriggerWidth]);
-    const openPopover = useCallback((e) => {
-        if (pos.visible) {
-            setPos(p => ({ ...p, visible: false }));
-            return;
-        }
-        computeAndSetPosition(true);
-        e === null || e === void 0 ? void 0 : e.stopPropagation();
-    }, [pos.visible, computeAndSetPosition]);
-    const closePopover = useCallback(() => {
-        setPos(p => ({ ...p, visible: false }));
-    }, []);
-    useImperativeHandle(ref, () => ({
-        close: closePopover,
-        open: () => computeAndSetPosition(true),
-        isOpen: () => !!pos.visible,
-    }), [closePopover, computeAndSetPosition, pos.visible]);
-    // Recompute position after open to account for content becoming visible / measured.
     useLayoutEffect(() => {
-        if (pos.visible)
-            computeAndSetPosition(true);
+        if (!isOpen)
+            return;
+        computeAndSetPosition();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [pos.visible]);
+    }, [isOpen]);
     useEffect(() => {
-        if (!pos.visible)
+        var _a;
+        if (!isOpen)
+            return;
+        const content = contentRef.current;
+        if (!content)
             return;
-        const handleClickOutside = (e) => {
-            if (containerRef.current &&
-                contentRef.current &&
-                !containerRef.current.contains(e.target) &&
-                !contentRef.current.contains(e.target)) {
-                closePopover();
+        if (autoFocusContent) {
+            const focusables = getFocusable(content);
+            (_a = focusables[0]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        const handlePointerDownCapture = (e) => {
+            const container = containerRef.current;
+            const contentEl = contentRef.current;
+            if (!container || !contentEl)
+                return;
+            const target = e.target;
+            if (!container.contains(target) && !contentEl.contains(target)) {
+                closePopover('outside');
             }
         };
         const handleEscape = (e) => {
             if (e.key === 'Escape')
-                closePopover();
+                closePopover('escape');
         };
-        const handleReposition = () => computeAndSetPosition(true);
-        document.addEventListener('click', handleClickOutside);
+        const handleReposition = () => computeAndSetPosition();
+        document.addEventListener('pointerdown', handlePointerDownCapture, true);
         document.addEventListener('keydown', handleEscape, true);
         window.addEventListener('resize', handleReposition);
         window.addEventListener('scroll', handleReposition, true);
         return () => {
-            document.removeEventListener('click', handleClickOutside);
+            document.removeEventListener('pointerdown', handlePointerDownCapture, true);
             document.removeEventListener('keydown', handleEscape, true);
             window.removeEventListener('resize', handleReposition);
             window.removeEventListener('scroll', handleReposition, true);
         };
-    }, [pos.visible, closePopover, computeAndSetPosition]);
-    return (_jsxs("div", { className: styles.container, ref: containerRef, children: [Trigger(openPopover, pos.visible ? _jsx(ChevronUp, { size: 20 }) : _jsx(ChevronDown, { size: 20 })), mounted &&
-                createPortal(_jsx("div", { ref: contentRef, className: styles.content, style: {
+    }, [isOpen, closePopover, computeAndSetPosition, autoFocusContent]);
+    useEffect(() => {
+        var _a, _b;
+        if (isOpen)
+            return;
+        if (!returnFocus)
+            return;
+        if (lastCloseReasonRef.current === 'outside')
+            return;
+        (_b = (_a = triggerElRef.current) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
+    }, [isOpen, returnFocus]);
+    const icon = isOpen ? _jsx(ChevronUp, { size: 20 }) : _jsx(ChevronDown, { size: 20 });
+    return (_jsxs("div", { className: styles.container, ref: containerRef, children: [Trigger(togglePopover, icon, isOpen), mounted &&
+                isOpen &&
+                createPortal(_jsx("div", { id: resolvedContentId, ref: contentRef, className: styles.content, style: {
                         top: pos.top,
                         left: pos.left,
-                        visibility: pos.visible ? 'visible' : 'hidden',
-                        minWidth: pos.width ? `${pos.width}px` : minWidth,
-                        width: pos.width ? `${pos.width}px` : undefined,
+                        // Content-driven sizing by default.
+                        minWidth,
+                        width: triggerWidth != null ? `${triggerWidth}px` : undefined,
                         maxWidth: `calc(100vw - ${viewportPadding * 2}px)`,
                         maxHeight: `clamp(100px, calc(100vh - ${viewportPadding * 2}px), 400px)`,
-                        overflow: 'auto',
-                    }, role: "dialog", "aria-hidden": !pos.visible, "data-cy": dataCy !== null && dataCy !== void 0 ? dataCy : 'popover-content', children: typeof children === 'function'
-                        ? children(closePopover)
+                        visibility: positioned ? undefined : 'hidden',
+                    }, "data-cy": dataCy !== null && dataCy !== void 0 ? dataCy : 'popover-content', children: typeof children === 'function'
+                        ? children(() => closePopover('api'))
                         : children }), document.body)] }));
 });
 Popover.displayName = 'Popover';

package/dist/components/popover/Popover.module.css

@@ -1,5 +1,6 @@
 .container {
   position: relative;
+  display: inline-block;
 }
 
 .content {
@@ -13,6 +14,10 @@
   box-shadow: var(--shadow-md);
 }
 
+.content[hidden] {
+  display: none;
+}
+
 .content svg {
   height: 20px;
   width: 20px;

package/dist/components/split-pane/SplitPane.d.ts

@@ -1,34 +1,20 @@
-import React from 'react';
-import { SplitDirection } from './provider/SplitPaneContext';
-interface SplitPaneProps {
-    children: React.ReactNode;
+import type { JSX, ReactNode } from 'react';
+import type { SplitDirection } from './provider/SplitPaneContext';
+export interface SplitPaneProps {
+    children: ReactNode;
     initialPrimarySize?: number;
     minPrimarySize?: number;
     minSecondarySize?: number;
     direction?: SplitDirection;
     showDivider?: 'hover' | 'always' | 'never';
-    /**
-     * Gutter size (px). This is the space between panes and contains the resizer hit area.
-     * Example: 8 => 4px breathing room on each side if the divider line is centered.
-     */
     gutterSize?: number;
-    /**
-     * If provided, primary size is persisted per key in localStorage.
-     * Only SplitPanes sharing the same key will share size.
-     */
     storageKey?: string;
 }
-export declare function SplitPane({ children, initialPrimarySize, minPrimarySize, minSecondarySize, direction, showDivider, gutterSize, storageKey, }: SplitPaneProps): React.ReactNode;
-/**
- * IMPORTANT:
- * This component now renders ONLY the primary content (scrollable).
- * The resizer lives in a dedicated <SplitPaneGutter /> so it never overlaps scrollbars.
- */
+export declare function SplitPane({ children, initialPrimarySize, minPrimarySize, minSecondarySize, direction, showDivider, gutterSize, storageKey, }: SplitPaneProps): JSX.Element;
 export declare function SplitPanePrimary({ children }: {
-    children: React.ReactNode;
-}): React.ReactNode;
-export declare function SplitPaneGutter(): React.ReactNode;
+    children: ReactNode;
+}): JSX.Element;
 export declare function SplitPaneSecondary({ children }: {
-    children: React.ReactNode;
-}): React.ReactNode;
-export {};
+    children: ReactNode;
+}): JSX.Element;
+export declare function SplitPaneGutter(): JSX.Element;

package/dist/components/split-pane/SplitPane.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
 import { SplitPaneProvider, useSplitPaneContext } from './provider/SplitPaneContext';
 import styles from './SplitPane.module.css';
 function clamp(n, min, max) {
@@ -11,68 +11,97 @@ export function SplitPane({ children, initialPrimarySize = 300, minPrimarySize =
 }
 function SplitPaneContainer({ children, showDivider, gutterSize, }) {
     const { direction, primarySize, containerRef } = useSplitPaneContext();
-    return (_jsx("div", { ref: containerRef, className: styles.container, "data-direction": direction, "data-divider": showDivider, style: {
-            '--split-pane-primary-size': `${primarySize}px`,
-            '--split-pane-gutter': `${gutterSize}px`,
-        }, children: children }));
+    const style = useMemo(() => ({
+        '--split-pane-primary-size': `${primarySize}px`,
+        '--split-pane-gutter': `${gutterSize}px`,
+    }), [primarySize, gutterSize]);
+    return (_jsx("div", { ref: containerRef, className: styles.container, "data-direction": direction, "data-divider": showDivider, style: style, children: children }));
 }
-/**
- * IMPORTANT:
- * This component now renders ONLY the primary content (scrollable).
- * The resizer lives in a dedicated <SplitPaneGutter /> so it never overlaps scrollbars.
- */
 export function SplitPanePrimary({ children }) {
     return _jsx("div", { className: styles.primary, children: children });
 }
+export function SplitPaneSecondary({ children }) {
+    return _jsx("div", { className: styles.secondary, children: children });
+}
 export function SplitPaneGutter() {
     const { direction, primarySize, setPrimarySize, minPrimarySize, minSecondarySize, containerRef } = useSplitPaneContext();
-    const isDraggingRef = useRef(false);
+    const draggingRef = useRef(false);
+    const pointerIdRef = useRef(null);
     const startPosRef = useRef(0);
     const startSizeRef = useRef(primarySize);
-    useEffect(() => {
-        if (!window) {
+    const maxPrimaryRef = useRef(Infinity);
+    const getClientPos = useCallback((e) => (direction === 'horizontal' ? e.clientX : e.clientY), [direction]);
+    const computeClamp = useCallback(() => {
+        const el = containerRef.current;
+        if (!el)
+            return { maxPrimary: Infinity, total: 0 };
+        const rect = el.getBoundingClientRect();
+        const total = direction === 'horizontal' ? rect.width : rect.height;
+        const maxPrimary = Math.max(minPrimarySize, total - minSecondarySize);
+        return { maxPrimary, total };
+    }, [containerRef, direction, minPrimarySize, minSecondarySize]);
+    const onPointerDown = useCallback((e) => {
+        const el = containerRef.current;
+        if (!el)
             return;
-        }
-        const onMove = (e) => {
-            if (!isDraggingRef.current)
-                return;
-            const el = containerRef.current;
-            if (!el)
-                return;
-            const rect = el.getBoundingClientRect();
-            const total = direction === 'horizontal' ? rect.width : rect.height;
-            const clientPos = direction === 'horizontal' ? e.clientX : e.clientY;
-            const delta = clientPos - startPosRef.current;
-            // Note: total includes gutter. That's fine because max clamps against secondary min.
-            const next = startSizeRef.current + delta;
-            const maxPrimary = Math.max(minPrimarySize, total - minSecondarySize);
-            setPrimarySize(clamp(next, minPrimarySize, maxPrimary));
-        };
-        const onUp = () => {
-            if (!isDraggingRef.current)
-                return;
-            isDraggingRef.current = false;
-            document.body.style.cursor = '';
-            document.body.style.userSelect = '';
-        };
-        window.addEventListener('mousemove', onMove);
-        window.addEventListener('mouseup', onUp);
-        return () => {
-            if (window) {
-                window.removeEventListener('mousemove', onMove);
-                window.removeEventListener('mouseup', onUp);
-            }
-        };
-    }, [containerRef, direction, minPrimarySize, minSecondarySize, setPrimarySize]);
-    const handleMouseDown = (event) => {
-        isDraggingRef.current = true;
-        startPosRef.current = direction === 'horizontal' ? event.clientX : event.clientY;
+        e.currentTarget.setPointerCapture(e.pointerId);
+        const { maxPrimary } = computeClamp();
+        maxPrimaryRef.current = maxPrimary;
+        draggingRef.current = true;
+        pointerIdRef.current = e.pointerId;
+        startPosRef.current = getClientPos(e);
         startSizeRef.current = primarySize;
-        document.body.style.cursor = direction === 'horizontal' ? 'col-resize' : 'row-resize';
+        // UX: prevent text selection during drag
         document.body.style.userSelect = 'none';
-    };
-    return (_jsx("div", { className: styles.gutter, "aria-hidden": "true", children: _jsx("span", { className: styles.resizer, onMouseDown: handleMouseDown, role: "separator", "aria-orientation": direction === 'horizontal' ? 'vertical' : 'horizontal', "aria-valuenow": Math.round(primarySize), tabIndex: 0 }) }));
-}
-export function SplitPaneSecondary({ children }) {
-    return _jsx("div", { className: styles.secondary, children: children });
+        document.body.style.cursor = direction === 'horizontal' ? 'col-resize' : 'row-resize';
+    }, [computeClamp, containerRef, direction, getClientPos, primarySize]);
+    const onPointerMove = useCallback((e) => {
+        if (!draggingRef.current)
+            return;
+        if (pointerIdRef.current !== null && e.pointerId !== pointerIdRef.current)
+            return;
+        const delta = getClientPos(e) - startPosRef.current;
+        const next = startSizeRef.current + delta;
+        const maxPrimary = maxPrimaryRef.current;
+        setPrimarySize(clamp(next, minPrimarySize, maxPrimary));
+    }, [getClientPos, minPrimarySize, setPrimarySize]);
+    const endDrag = useCallback(() => {
+        if (!draggingRef.current)
+            return;
+        draggingRef.current = false;
+        pointerIdRef.current = null;
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+    }, []);
+    const onPointerUp = useCallback(() => endDrag(), [endDrag]);
+    const onPointerCancel = useCallback(() => endDrag(), [endDrag]);
+    // Keyboard: arrows adjust size; Shift = bigger step; Home/End = min/max
+    const onKeyDown = useCallback((e) => {
+        const { maxPrimary } = computeClamp();
+        const step = e.shiftKey ? 32 : 8;
+        let next = null;
+        if (direction === 'horizontal') {
+            if (e.key === 'ArrowLeft')
+                next = primarySize - step;
+            if (e.key === 'ArrowRight')
+                next = primarySize + step;
+        }
+        else {
+            if (e.key === 'ArrowUp')
+                next = primarySize - step;
+            if (e.key === 'ArrowDown')
+                next = primarySize + step;
+        }
+        if (e.key === 'Home')
+            next = minPrimarySize;
+        if (e.key === 'End')
+            next = maxPrimary;
+        if (next === null)
+            return;
+        e.preventDefault();
+        setPrimarySize(clamp(next, minPrimarySize, maxPrimary));
+    }, [computeClamp, direction, minPrimarySize, primarySize, setPrimarySize]);
+    const ariaOrientation = direction === 'horizontal' ? 'vertical' : 'horizontal';
+    const { maxPrimary } = computeClamp();
+    return (_jsx("div", { className: styles.gutter, children: _jsx("div", { className: styles.resizer, role: "separator", "aria-orientation": ariaOrientation, "aria-valuemin": Math.round(minPrimarySize), "aria-valuemax": Number.isFinite(maxPrimary) ? Math.round(maxPrimary) : undefined, "aria-valuenow": Math.round(primarySize), tabIndex: 0, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerCancel, onKeyDown: onKeyDown }) }));
 }

package/dist/components/split-pane/SplitPane.module.css

@@ -20,8 +20,8 @@
   min-inline-size: 0;
   min-block-size: 0;
   overflow: auto;
-  flex-direction: column;
   display: flex;
+  flex-direction: column;
 }
 
 /* ===== Secondary pane ===== */
@@ -34,7 +34,7 @@
   flex-direction: column;
 }
 
-/* ===== Gutter (spacing + hit area) ===== */
+/* ===== Gutter (spacing + hit area wrapper) ===== */
 .gutter {
   position: relative;
   flex: 0 0 var(--split-pane-gutter, 8px);
@@ -42,32 +42,37 @@
   z-index: 1;
 }
 
-/* Vertical mode gutter */
 .container[data-direction='vertical'] .gutter {
   inline-size: 100%;
   block-size: var(--split-pane-gutter, 8px);
 }
 
-/* ===== Resizer (interaction only) ===== */
+/* ===== Resizer (interaction element) ===== */
 .resizer {
   position: absolute;
   inset: 0;
   cursor: col-resize;
   user-select: none;
   touch-action: none;
+  outline: none;
 }
 
 .container[data-direction='vertical'] .resizer {
   cursor: row-resize;
 }
 
+/* Focus ring for keyboard resizing */
+.resizer:focus-visible {
+  box-shadow: var(--focus-ring);
+}
+
 /* ===== Divider line ===== */
 .resizer::after {
   content: '';
   position: absolute;
   inset-block: 0;
   inset-inline: 50%;
-  inline-size: var(--border-width-hairline);
+  inline-size: var(--border-width-thin);
   background-color: var(--color-border-subtle);
   opacity: 0;
   transform: translateX(-50%);
@@ -81,7 +86,7 @@
   inset-inline: 0;
   inset-block: 50%;
   inline-size: 100%;
-  block-size: var(--border-width-hairline);
+  block-size: var(--border-width-thin);
   transform: translateY(-50%);
 }
 

package/dist/components/split-pane/provider/SplitPaneContext.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 export const SplitPaneContext = React.createContext(null);
@@ -22,7 +21,7 @@ function writeStoredSize(key, value) {
         localStorage.setItem(key, String(Math.round(value)));
     }
     catch {
-        // ignore (private mode, disabled storage, etc.)
+        // ignore
     }
 }
 export function useSplitPaneContext() {
@@ -33,13 +32,8 @@ export function useSplitPaneContext() {
 }
 export function SplitPaneProvider({ children, direction, initialPrimarySize, minPrimarySize, minSecondarySize, storageKey, }) {
     const containerRef = useRef(null);
-    /**
-     * IMPORTANT (Next.js hydration):
-     * Always start with initialPrimarySize so server HTML and first client render match.
-     * Then, after hydration, read localStorage and update.
-     */
+    // Start with initial to avoid SSR mismatch, then hydrate from storage
     const [primarySize, setPrimarySize] = useState(initialPrimarySize);
-    // Apply persisted size AFTER hydration (prevents SSR/client mismatch warnings)
     useEffect(() => {
         if (!storageKey)
             return;
@@ -48,11 +42,12 @@ export function SplitPaneProvider({ children, direction, initialPrimarySize, min
             return;
         setPrimarySize(stored);
     }, [storageKey]);
-    // Clamp after mount / when container is measurable; re-clamp on resize
     useEffect(() => {
         const el = containerRef.current;
         if (!el)
             return;
+        if (typeof ResizeObserver === 'undefined')
+            return;
         const clampToContainer = () => {
             const rect = el.getBoundingClientRect();
             const total = direction === 'horizontal' ? rect.width : rect.height;
@@ -62,11 +57,10 @@ export function SplitPaneProvider({ children, direction, initialPrimarySize, min
             setPrimarySize(prev => clamp(prev, minPrimarySize, maxPrimary));
         };
         clampToContainer();
-        const ro = new ResizeObserver(() => clampToContainer());
+        const ro = new ResizeObserver(clampToContainer);
         ro.observe(el);
         return () => ro.disconnect();
     }, [direction, minPrimarySize, minSecondarySize]);
-    // Persist on change
     useEffect(() => {
         if (!storageKey)
             return;